@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
html {
    font-size: 16px; /* Default base font size */
}

/* Accessibility: Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* Accessibility: Focus indicators */
*:focus {
    outline: 2px solid #007AC2;
    outline-offset: 2px;
}

/* Remove focus outline for mouse users but keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Accessibility: Button focus styles */
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #007AC2;
    outline-offset: 2px;
}

/* Accessibility: High contrast focus for colorblind theme */
body.theme-colorblind *:focus {
    outline: 3px solid #ffff00;
    outline-offset: 3px;
}

/* Accessibility: Ensure sufficient color contrast */
body.theme-colorblind {
    --focus-outline-color: #ffff00;
}

/* Accessibility: Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessibility: Improved button styling */
button {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Accessibility: Modal focus trap */
.modal:focus {
    outline: none;
}

.modal-content:focus {
    outline: none;
}

/* Accessibility: Ensure form labels are properly associated */
label {
    cursor: pointer;
}

/* Accessibility: Improve form field styling */
input, textarea, select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: #007AC2;
    box-shadow: 0 0 0 2px rgba(0, 122, 194, 0.2);
}

/* Accessibility: Menu item focus styles */
.extra-menu-popup li:focus {
    background-color: rgba(0, 122, 194, 0.1);
    outline: 2px solid #007AC2;
    outline-offset: -2px;
}

/* Accessibility: Theme-specific focus colors */
body.theme-dark *:focus {
    outline-color: var(--focus-outline-color);
}

body.theme-colorblind *:focus {
    outline-color: #ffff00;
}





/* #emailCopyButton {
    display: none;
} */



.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.login-header img {
    max-width: 200px;
    margin-bottom: 1rem;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-weight: 500;
}
.form-group input {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}
.login-button {
    background: #003366;
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.login-button:hover {
    background: #004488;
}
.error-message {
    color: #dc3545;
    text-align: center;
    margin-top: 1rem;
    display: none;
}
.back-link {
    text-align: center;
    margin-top: 1rem;
}
.back-link a {
    color: #003366;
    text-decoration: none;
}
.back-link a:hover {
    text-decoration: underline;
}



/* ArcGIS Login Button Styles */
.arcgis-login-container {
    margin: 20px 0;
    text-align: center;
}

.arcgis-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: #007AC2;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.arcgis-login-button:hover {
    background-color: #005A8C;
}

.arcgis-login-button img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

/* Login Divider Styles */
.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.login-divider span {
    padding: 0 10px;
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
}

/* Update existing login form styles to match */
.login-form {
    margin-top: 20px;
}

/* Banner for Beta Status */
.beta-banner {
    background-color: #F1F1F1;
    color: #000000;
    padding: 0;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    font-weight: light;
    border-bottom: 2px solid #c7c7c7; /* 2px */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.beta-banner a {
    color: #0000EE;
    text-decoration: underline;
    cursor: pointer;
}

.beta-banner a:hover {
    color: #5555ff;
}


/* General Styling */
body {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400;
    font-size: 15px;
    /* Unitless on purpose: children inherit the RATIO and recompute it against
       their own font size. The old `24px` was inherited as a fixed 24px, so at
       the text-size slider's larger settings 32px glyphs were still crammed
       into 24px lines. 1.6 x 15px = the same 24px at the default size. */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    height: 100dvh; /* Fill the page — was a framed 94dvh card for the old iframe embed */
    overflow: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Gray frame (2px #c7c7c7 border + 30px radius + margin/padding) removed —
       the app is no longer embedded as an iframe, so it now fits the page. */
}

/* Default Theme */
body.theme-default {
    --bg-color: #ffffff;
    --text-color: #1C1C1C;
    --button-bg-color: #2B2B2B;
    --nav-button-bg-color: #EEEEEE;
    --button-ask-color: #007BFF;
    --button-text-color: #ffffff;
    --user-message-bg-color: #F6F6F6;
    --user-message-border-color: #EEEEEE;
    --user-message-text-color: #1C1C1C;
    --bot-message-bg-color: #f1f1f1;
    --bot-message-text-color: #000000;
    --pill-button-bg-color: #fff;
    --pill-button-border-color: #005CB8; /* was #007BFF — AA text contrast (>=4.5:1) */
    --pill-button-text-color: #005CB8;
    --additional-button-bg-color: #005CB8;
    --additional-button-text-color: #ffffff;
    --settings-menu-text-color: #535353;
    --starting-question-color: rgba(50, 117, 184, 0.1);
    --settings-menu-hover-color: #f0f0f0;
    --ask-button-image: url('../images/ask_arrow.png');
    --lead-submit-text-color: #ffffff;
    --loading-border-color: #ececec;
    --loading-box-shadow-color: #F7F7F7;
}

/* Dark Theme */
body.theme-dark {
    /* Euclid HL brand cyan, straight off the wordmark. Replaced the old #4CAF50
       green highlight (2026-09): the green was not a brand colour and read as a
       success/valid state. 10.0:1 on #121212, so it also clears 3:1 for
       non-text contrast (WCAG 1.4.11) by a wide margin. */
    --focus-outline-color: #33CCFF;
    --bg-color: #121212;
    --text-color: #ffffff;
    --button-bg-color: #555555;
    --button-ask-color: #007BFF;
    --button-text-color: #ffffff;
    --nav-button-bg-color: #555555;
    --user-message-bg-color: #666666;
    --user-message-text-color: #ffffff;
    --bot-message-bg-color: #444444;
    --bot-message-text-color: #ffffff;
    --pill-button-bg-color: #555555;
    --pill-button-border-color: #ffffff;
    --pill-button-text-color: #ffffff;
    --additional-button-bg-color: #555555;
    --additional-button-text-color: #ffffff;
    --settings-menu-text-color: #fff;
    /* Solid (not 10% alpha like light mode): on the #121212 background a
       translucent blue chip is nearly invisible */
    --starting-question-color: #275d8f;
    --settings-menu-hover-color: #444444;
    --ask-button-image: url('../images/ask_arrow.png');
    --lead-submit-text-color: #ffffff;
    --loading-border-color: #555555;
    --loading-box-shadow-color: #777777;

}

/* Color Blind Mode */
body.theme-colorblind {
    --bg-color: #000000;
    --text-color: #ffffff;
    --button-bg-color: #ffff00;
    --button-ask-color: #ffff00;
    --button-text-color: #000000;
    --nav-button-bg-color: #1a1a1a;
    --user-message-bg-color: #ffff00;
    --user-message-text-color: #000000;
    --bot-message-bg-color: #ffffff;
    --bot-message-text-color: #000000;
    --pill-button-bg-color: #000000;
    --pill-button-border-color: #ffff00;
    --pill-button-text-color: #ffff00;
    --additional-button-bg-color: #ffff00;
    --additional-button-text-color: #000000;
    --settings-menu-text-color: #fff;
    --starting-question-color: #ffff00;
    --settings-menu-hover-color: #1a1a1a;
    --ask-button-image: url('../images/ask_arrow_black.png');
    --lead-submit-text-color: #000000;
    --loading-border-color: #000000;
    --loading-box-shadow-color: #c0c000;   /* Slightly lighter dark yellow for shadow */
}

.esri-view .esri-view-surface:focus:after {
    border-radius: 0 !important;
    display: none !important;
  }


.theme-icon {
    fill: var(--button-bg-color);
    margin-left: auto;
    margin: 0;
    margin-right: 1.125rem; /* 18px */
}

.theme-icon:hover {
    cursor: pointer;
}


.theme-selector-icon.rotated {
    transform: rotate(180deg);
}

.resizeHandle.modified {
    display: none;
}


/* Parent container for chat and map */


.theme-label {
    margin-left: auto;
}




.layout-container {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  
  .chat-container {
    position: relative;
    background-color: var(--bg-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 35%; /* Do not grow or shrink; basis 30% */
    min-width: 20%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* DEPRECATED: chat width is now set by the draggable .chat-divider, not this toggle. */
  .chat-container.widened {
    /* no-op — superseded by the draggable divider */
  }
  .chat-container.right {
    margin: 0 0 0 15px;
  }





  calcite-dropdown-item img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
  }
  

  .chat-container.modified {
    position: absolute;
    z-index: 90;
    left: 5%;
    top: 8%;
    padding: 0.5rem; /* 8px */
    border-radius: 8px; /* 8px */
    box-shadow: 0 0 1.875rem 0 rgba(0, 0, 0, 0.75); /* 30px */
    height: 85%; /* Percentage values remain unchanged */
}


  
  /* Map container settings */
  .rightDiv {
    display: flex;
    flex-direction: row;
    height: 100dvh; /* fill the page now that body has no frame/padding (was 93dvh) */
    overflow: hidden;
    width: 70%; /* Adjust width as needed */
    position: relative;
    border-radius: 0; /* full-bleed map, square corners */
  }
  
  /* Flip the order when .dock-right is added */
  .layout-container.dock-right .chat-container {
    order: 2;
  }
  
  .layout-container.dock-right .rightDiv {
    order: 1;
  }
  




/* Parent container becomes a flex container */
.main-container {
    display: flex;
    flex-direction: row;
  }
  
  /* Both containers take equal space */

  
  /* Default ordering: chat left, map right */
  /* When .dock-right is added, swap the order */
  .main-container.dock-right .chat-container {
    order: 2;
  }
  .main-container.dock-right .rightDiv {
    order: 1;
  }






/* Make sure the parent li is relatively positioned */
.extra-menu-popup li.has-submenu {
    position: relative;
  }

  /* Align the trailing "Select X" triggers of submenu items (Theme Options,
     Tone) into a consistent column regardless of label length. */
  .extra-menu-popup li.has-submenu > span {
    min-width: 130px;
  }
    

  /* Optional: Style the select element */
  .theme-selector {
    font-family: inherit;
    font-size: 14px;
    padding: 4px;
  }




.menu-container {
    position: relative; /* sets the context for the popup */
    display: inline-block;
  }
  

  
  /* Hide the popup by default */
  .extra-menu-popup {
    display: none;
    position: absolute;
    top: 100%;          /* positions the popup directly below the button */
    right: 0;            /* aligns the left edge with the button */
    margin-top: 4px;    /* small gap, reduce if necessary */
    background: var(--bg-color);
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 5px 0;
    white-space: nowrap;
    z-index: 99999999;
    color: var(--settings-menu-text-color);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    transition: background-color 0.3s ease;

  }
  
  
  /* Remove default list styling */
  .extra-menu-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* Style each menu item */
  .extra-menu-popup li {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center; /* Vertically center the children */
    gap: 8px;  
  }

  .extra-menu-popup li img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
  }
  

  
  /* Highlight menu item on hover */
  .extra-menu-popup li:hover {
    background: var(--settings-menu-hover-color);
  }
  










.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1.25rem; /* 20px */
    cursor: ew-resize;
    background: var(--bot-message-bg-color);
    z-index: 10;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Map container */
#viewDiv {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}


/*         Start Previous Map Notifications      */
/*         Start Previous Map Notifications      */
/*         Start Previous Map Notifications      */

/* Full-width overlay at the bottom of rightDiv */
#custom-alert-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 0.625rem 0; /* 10px */
    background-color: transparent;
    transition: opacity 0.3s ease;
}

/* Alert box */
.custom-alert {
    background-color: var(--bot-message-bg-color, #ffffff);
    color: var(--bot-message-text-color, #000000);
    border: 1px solid var(--bot-message-bg-color, #ccc); /* 1px */
    border-radius: 8px; /* 8px */
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    margin: 0.625rem; /* 10px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 4px 8px */
    pointer-events: auto;
    font-family: Arial, sans-serif;
    width: 90%;
    max-width: 40.625rem; /* 650px */
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    opacity: 0.85;
    animation: fade-out-alert 9s linear forwards;
    margin-bottom: 3%;
    transition: opacity 0.3s ease;
}


/* Moving border animation */
.custom-alert::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px; /* Border thickness */
    width: 100%;
    background-color: var(--button-bg-color, #007bff); /* Border color */
    animation: move-border 9s linear forwards;
    z-index: 98;
}

/* Keyframes for moving border */
@keyframes move-border {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Keyframes for alert fade-out */
@keyframes fade-out-alert {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Hover effect: solid background and pause animations */
.custom-alert:hover {
    animation-play-state: paused;
    opacity: 1 !important;
}

/* Resume fade-out and transparency after hover */
.custom-alert:hover::after {
    animation-play-state: paused;
    opacity: 1 !important;

}

/* Title inside the alert */
.custom-alert h4 {
    margin: 0 0 0.3125rem 0; /* 5px */
    font-size: 0.9375rem; /* 15px */
    font-weight: bold;
    color: var(--text-color, #000000);
    text-align: left;
}

/* Content inside the alert (icon, p tag, and button on the same line) */
.custom-alert .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.625rem; /* 10px */
}

/* Icon inside the alert for default theme */
body:not(.theme-default) .custom-alert .content .alert-icon {
    flex-shrink: 0;
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    color: var(--text-color);
}

/* Icon inside the alert for other themes */
body.theme-default .custom-alert .content .alert-icon {
    flex-shrink: 0;
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    color: var(--button-bg-color);
}


/* Paragraph inside the content */
.custom-alert .content p {
    margin: 0;
    font-size: 0.875rem; /* 14px */
    flex-grow: 1;
    color: var(--bot-message-text-color, #000000);
}

/* Button inside the content */
.custom-alert .content button {
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    background-color: var(--button-bg-color, #007bff);
    color: var(--button-text-color, #ffffff);
    border: none;
    border-radius: 5px; /* 5px */
    cursor: pointer;
    font-size: 0.875rem; /* 14px */
    flex-shrink: 0;
}

.custom-alert .content button:hover {
    background-color: var(--button-bg-hover-color, #0056b3); /* Hover effect */
}

/* Increase the size of the icon */
.custom-alert::part(icon) {
    font-size: 2.5rem;
    color: var(--calcite-brand);
}

/* Change the color of the duration bar */
.custom-alert::part(duration-bar) {
    background-color: var(--user-message-bg-color);
}
/*         End Previous Map Notifications      */
/*         End Previous Map Notifications      */
/*         End Previous Map Notifications      */


/* Scroll button that stays fixed inside chat-wrapper */
.scroll-button {
    position: absolute;
    bottom: 0.625rem; /* 10px */
    right: 50%;
    background-color: var(--button-bg-color);
    color: white;
    border: none;
    padding: 0.25rem; /* 4px */
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    display: none;
}

.scroll-button:hover {
    opacity: 1;
}

.scroll-button svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    fill: white;
    margin-bottom: -3px; /* -3px */
}


/* Dialog primary buttons (Go to Euclid, Start New Chat, Sign in): calcite's
   default brand blue is hard to read on the dark and high-contrast dialog
   surfaces, so brighten it in dark and go yellow/black in high contrast. */
/* Must target the buttons (not just the dialog): the global
   `body.theme-dark calcite-button` rule sets a 10%-alpha brand on every
   button element, which beats any value inherited from the dialog. */
body.theme-dark calcite-dialog calcite-button {
    --calcite-color-brand: #1a7fd4;
    --calcite-color-brand-hover: #3993dd;
    --calcite-color-brand-press: #166db6;
    --calcite-color-text-inverse: #ffffff;
}
body.theme-colorblind calcite-dialog calcite-button {
    --calcite-color-brand: #ffff00;
    --calcite-color-brand-hover: #e6e600;
    --calcite-color-brand-press: #cccc00;
    --calcite-color-text-inverse: #000000;
}

/* Terms dialog: welcome title + logos header + intro, with extra left/right
   breathing room. The dialog has no calcite heading — the title is in-content
   so it aligns with the rest of the text. */
.terms-content {
    padding: 12px 16px 0;
}
.terms-welcome {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
/* Small heading directly above the scrolling terms box */
.terms-section-heading {
    display: block;
    margin: 10px 0 4px;
    font-weight: 600;
}
/* The scrolling terms box. Plain light-DOM text so Chrome Translate reaches
   it (it used to be a <calcite-text-area> value, which it can't). Sized and
   bordered like the text area it replaced; colours from calcite's tokens so
   the dialog's dark-mode overrides apply. */
.terms-text {
    max-height: 190px;
    overflow-y: auto;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--calcite-color-border-input, #949494);
    background: var(--calcite-color-foreground-1, #fff);
    color: var(--calcite-color-text-1, #151515);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}
.terms-text:focus-visible {
    outline: 2px solid var(--calcite-color-brand, #007ac2);
    outline-offset: -2px;
}
.terms-text p {
    margin: 0 0 8px;
}
.terms-text p:last-child {
    margin-bottom: 0;
}
.terms-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 12px;
}
.terms-logos img {
    height: 40px;
    width: auto;
    max-width: 45%;
    object-fit: contain;
}
.terms-logo-dark { display: none; }
body.theme-dark .terms-logo-light,
body.theme-colorblind .terms-logo-light { display: none; }
body.theme-dark .terms-logo-dark,
body.theme-colorblind .terms-logo-dark { display: block; }
.terms-intro {
    margin: 0 0 12px;
}

/* Sign-in dialog: ArcGIS OAuth on top, email/password below an "or" divider */
.sign-in-content {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
}
.sign-in-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--text-color);
    opacity: 0.55;
    font-size: 13px;
}
.sign-in-divider::before,
.sign-in-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid currentColor;
}
.local-login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.local-login-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}
.local-login-form input {
    padding: 9px 10px;
    margin-bottom: 6px;
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}
.local-login-form input:focus {
    outline: 2px solid #007BFF;
    outline-offset: 1px;
}
.local-login-error {
    color: #dc3545;
    font-size: 13px;
    margin: 2px 0 6px;
}
body.theme-dark .local-login-form input,
body.theme-colorblind .local-login-form input {
    border-color: #666;
}

/* New Chat confirmation dialog: stack the save-a-copy options */
.new-chat-save-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rail-border);
}

/* Chat Container Styling */
.chat-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative; /* Ensure the scroll button can be positioned relative to this */
    overflow: hidden; /* Ensure the content doesn't overflow */
    z-index: 1000;
}

/* Chat box should scroll within the available space */
.chat-box {
    position: relative;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    /* Keep the conversation readable on widescreen: cap the column and center it */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 10px 10px 0; /* 10px */
    background-color: var(--bg-color);
    scroll-behavior: smooth; /* This enables smooth scrolling */
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    z-index: 1000;
}








/* For WebKit-based browsers */
/* For WebKit-based browsers (Chrome, Safari, Edge, Opera) */
.chat-box::-webkit-scrollbar {
    width: 6px;       /* Adjust width as needed */
    height: 8px;      /* For horizontal scrollbar, if any */
  }
  
  .chat-box::-webkit-scrollbar-track {
    background: transparent; /* Or a subtle color if desired */
  }
  
  .chat-box::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3); /* Minimal, subtle thumb */
    border-radius: 4px;
    border: none;
  }
  
  /* For Firefox */
  .chat-box {
    scrollbar-width: thin; /* Options: auto, thin */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Thumb color and track color */
  }
  

  .chat-box::-webkit-scrollbar-button {
    display: none;
  }

  /* Dark theme scrollbar - lighter color for visibility */
  body.theme-dark .chat-box::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
  }

  body.theme-dark .chat-box {
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  }

  /* High contrast theme scrollbar - bright yellow for maximum visibility */
  body.theme-colorblind .chat-box::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 0, 0.7);
  }

  body.theme-colorblind .chat-box {
    scrollbar-color: rgba(255, 255, 0, 0.7) transparent;
  }








  .chat-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px; /* Adjust the height as needed */
    background: linear-gradient(to bottom, var(--bg-color), rgba(255,255,255,0));
    pointer-events: none; /* Ensures overlay doesn't block clicks */
    z-index: 10; /* Make sure it's above the chat messages */
  }










/* Header Styling */
.header-container {
    background-color: var(--bg-color) !important;
}

.header-container-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 10px; /* 10px */
    background-color: var(--bg-color) !important;

}

/* Session buttons container */
.session-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Theme Selector Styling */
.theme-selector-container {
    padding: 0.625rem 1.125rem 0.625rem 0.625rem; /* 10px 18px 10px 10px */
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    gap: 10px; /* 10px */
}

.theme-selector {
    padding: 8px; /* 8px */
    border-radius: 5px; /* 5px */
    /*border: 1px solid var(--text-color); /* 1px */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 11px; /* 11px */
    cursor: pointer;
}

.theme-selector:hover {
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
}


/* Position the button container at the top right of the chat container */
.button-container {
    top: 10px;    /* Adjust vertical position as needed */
    right: 10px;  /* Adjust horizontal position as needed */
    display: flex;
    flex-direction: column;  /* Stack buttons vertically */
    align-items: flex-end;     /* Align buttons to the right edge */
    gap: 10px;                 /* Space between buttons */
    padding: 10px;             /* Optional, for some inner spacing */
    /* Match the widescreen cap on .chat-box/.chat-input-container so the
       pills stay aligned with the chat column instead of the panel edge */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Pill button styling (you can adjust margins if needed) */
.pill-button {
    padding: 10px 20px; /* 10px 20px */
    background-color: var(--starting-question-color);
    color: var(--user-message-text-color);
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
    border: none;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

.pill-button:hover {
    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1); /* 4px 8px */
}


















.chat-input-container {
    position: relative;
    display: flex;
    align-items: flex-end;   /* buttons stay at the foot as the field grows up */
    gap: 8px;
    padding: 10px;  /* 10px */
    background-color: var(--bg-color);
    /* Match .chat-box's widescreen cap so the input stays aligned with the messages */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* The pill wrapper holds the textarea + the send button that sits inside it */
.chat-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Accessibility: Ensure chat input is properly focusable */
.chat-input {
    width: 100%;
    /* Start one line tall and grow upward with content (JS sets height from
       scrollHeight, up to max-height, then scrolls). */
    min-height: 42px;
    /* Sized in rem so the whole pill tracks the text-size slider: at 200% the
       field someone deliberately enlarged the text to read is itself readable,
       and the send button (also rem) keeps its proportions inside the pill
       instead of poking through the rounded end. 1rem = 16px at the default. */
    height: 2.625rem;          /* 42px */
    max-height: 10.5rem;       /* 168px -- chat.js reads this, don't hardcode it there */
    box-sizing: border-box;    /* Includes padding in dimensions */
    overflow-y: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid #8a8a8a; /* >=3:1 non-text contrast (WCAG 1.4.11) */
    border-radius: 1.3125rem;  /* 21px -- half the height, so the ends stay round */
    line-height: 1.35;
    vertical-align: top;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    /* Right padding leaves room for the send button only (share is outside). */
    padding: 0.625rem 2.875rem 0.625rem 1.125rem;   /* 10px 46px 10px 18px */
    font-size: 0.9375rem;      /* 15px */
    resize: none;
}

/* Ensure the chat input container doesn't interfere with focus */
.chat-input-container {
    position: relative; /* For absolute positioning of the button */
    padding: 10px;  /* 10px */
    background-color: var(--bg-color);
    /* Ensure the container doesn't block focus */
    pointer-events: auto;
}

/* Send button, inside the pill at its bottom-right, vertically snug to one line.
   rem throughout so it stays centred in the pill at every text size. */
.chat-button {
    position: absolute;
    bottom: 0.375rem;          /* 6px */
    right: 0.4375rem;          /* 7px */
    width: 1.875rem;           /* 30px */
    height: 1.875rem;          /* 30px */
    background-color: var(--button-ask-color);
    border: none;
    border-radius: 50%;
    background-image: var(--ask-button-image);
    background-repeat: no-repeat;
    background-position: 60% center;
    background-size: 40%;
    cursor: pointer;

    /* Hide the text */
    color: transparent;
    text-indent: -9999px;
    /* No padding: the label is hidden and the arrow is a background image, so
       padding bought nothing -- but it was 0.625rem, which scales with the root
       font size. At the slider's 200% that became 20px a side, and since
       border-box floors a box at its padding, the 30px button swelled to 40px
       and broke out of the input pill's rounded end. */
    padding: 0;
    /* Ensure button is above textarea but doesn't block it */
    z-index: 2;
}


/* Enhanced focus styles for chat input */
.chat-input:focus {
    outline: 2px solid #007AC2;
    outline-offset: 2px;
    border-color: #007AC2;
    box-shadow: 0 0 0 2px rgba(0, 122, 194, 0.2);
}

/* Theme-specific focus colors for chat input */
body.theme-dark .chat-input:focus {
    outline-color: var(--focus-outline-color);
    border-color: var(--focus-outline-color);
}

body.theme-colorblind .chat-input:focus {
    outline-color: #ffff00;
    border-color: #ffff00;
}

/* Style the placeholder to align at the top */
.chat-input::placeholder {
    text-align: left;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
    color: #6e6e6e; /* was #8d8d8d — AA text contrast (>=4.5:1 on white) */
    font-size: 0.9375rem;   /* 15px — rem so it tracks the field */
    font-weight: 400;
}

/* ===== Large text sizes (slider at 150% and up) =====
   utils.js stamps data-text-scale on <html>. Big type needs more air between
   lines than the 1.6 that suits 15px, and Inter's default tracking reads loose
   at display sizes, so ease the leading up and tighten the letter-spacing a
   touch. Applied to running prose only -- buttons and labels keep their own
   metrics so nothing in the chrome reflows. */
html[data-text-scale="lg"] body {
    line-height: 1.75;
    letter-spacing: -0.01em;
}
html[data-text-scale="lg"] .message,
html[data-text-scale="lg"] .message-content,
html[data-text-scale="lg"] .bot-message,
html[data-text-scale="lg"] .user-message,
html[data-text-scale="lg"] .about-panel {
    line-height: 1.75;
}
html[data-text-scale="lg"] .message li,
html[data-text-scale="lg"] .message p {
    margin-bottom: 0.5em;
}



.terms-statement p {
    color: #808080;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-align: center;
    margin: auto;
    line-height: 1.35;
}







.new-session-button {
    padding: 12px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--bg-color);
}
.new-session-button:hover {
    background-color: var(--nav-button-bg-color);
}


/* Extra-menu button remains as is */
.extra-menu-button {
    cursor: pointer;
    padding: 13px 13px;
}

/* Additional Buttons Styling */
.additional-buttons-container {
    display: flex;
    gap: 0.625rem; /* 10px */
    padding: 0;
}

.additional-button {
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: var(--additional-button-bg-color);
    color: var(--additional-button-text-color);
    border: none;
    border-radius: 5px; /* 5px */
    cursor: pointer;
}

.additional-button:hover {
    background-color: var(--additional-button-bg-color);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px */
}

/* Message Styling */
.message {
    padding: 0.625rem; /* 10px */
    margin: 0.3125rem; /* 5px */
    border-radius: 5px; /* 5px */
    font-size: 0.9375rem; /* 15px */
    /* .chat-box is a COLUMN flex container, so align-self controls the
       HORIZONTAL size here. This was `flex-start`, which shrink-wrapped each
       message to its own text; .bot-text's `max-width: 100%` then resolved
       against a width derived from that same text, so long answers laid out
       wider than the panel and were clipped by .chat-container's
       `overflow: hidden` (reading as text running under the map). */
    align-self: stretch;
    max-width: 100%;
    box-sizing: border-box;
}

.user-message {
    background-color: var(--user-message-bg-color);
    border: 1px solid var(--user-message-border-color);
    color: var(--user-message-text-color);
    text-align: right;
    display: inline-block;
    align-self: flex-end;
    /* .message now stretches, so restore the shrink-wrapped bubble the
       right-aligned user message has always had. */
    width: fit-content;
    max-width: 85%;
}

/* Parent container with flex layout, aligning items at the top */
.message-content {
    display: flex;
    align-items: flex-start;
    min-width: 0; /* flex children default to min-width:auto and won't shrink below content */
}

/* Icon wrapper: fixed size, circular with white background and border */
.icon-wrapper {
    background-color: white;
    border: 1px solid #D7D7D7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px; /* Adjust spacing as needed */
    width: 38px;   /* Adjust size as needed */
    height: 38px;  /* Adjust size as needed */
    flex-shrink: 0; /* Prevent the icon from shrinking */
}

/* Icon image styling */
.bot-icon {
    width: 18px;  /* Adjust as needed */
    height: auto;
}

/* Text container can grow as needed */
.bot-text {
    flex: 1 1 auto;
    /* Without min-width:0 this flex item refuses to shrink below its own
       content, so the break-word rules below never get a chance to apply. */
    min-width: 0;
    white-space: pre-wrap; /* Preserve line breaks and wrap text */
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

/* Preserve URL integrity */
.bot-text a {
    overflow-wrap: normal;
    word-break: keep-all;
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

























.followup-container {
    display: flex;
    flex-direction: column;  /* Stack buttons vertically */
    align-items: flex-start;   /* Left-align within the response body */
    gap: 8px;                  /* Space between buttons */
    padding: 4px 0 2px;
    opacity: 0; /* Start invisible */
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* This class will be added via JavaScript to trigger fade-in */
.followup-container.visible {
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.5s ease-out;
}

.followup-button {
    margin-bottom: 8px;
    cursor: pointer;
    text-align: left !important; /* Override global calcite-button center alignment */
    --calcite-button-text-align: left !important;
    --calcite-color-brand: var(--starting-question-color);
    --calcite-color-brand-hover: var(--starting-question-color);
    --calcite-color-brand-press: var(--starting-question-color);
    --calcite-color-text-1: var(--user-message-text-color);
    --calcite-color-text-inverse: var(--user-message-text-color);
    --calcite-button-corner-radius: 12px;
    white-space: normal !important;
}

/* Override calcite-button internal styling for left alignment and rounded corners */
.followup-button::part(button) {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    /* border-radius: 12px; */
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

/* Additional override for text content within button */
.followup-button::part(content) {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Override for the button's text wrapper */
.followup-button::part(text) {
    text-align: left !important;
}

.followup-button:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Adjust button width in widened chat mode */
.chat-container.widened .followup-button {
    width: 70% !important;
}

/* Adjust image wrapper width in widened chat mode */
.chat-container.widened .chat-image-wrapper {
    max-width: clamp(150px, 30%, 250px);
}

/* Fade out effect */
.followup-container.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.followup-container.hidden.display-none {
    display: none;
}

/* Follow-up pills and plan-area chip rows stay under their answer; one already asked goes outline */
.followup-button.followup-button--asked { opacity: .7; }
.plan-area-row calcite-chip { transition: opacity .2s; }
.plan-area-row calcite-chip.plan-area-chip--asked { opacity: .75; }



.button-container.hidden.display-none {
    display: none; /* Removes white space after fade-out */
}


/* Center the content for loading messages */
.loading-message {
    display: contents;
    justify-content: center;
  }
  
  /* Your existing loading container styles */
  .loading-container {
    padding: 5px 8px;
    background: var(--user-message-bg-color);
    border: 1px solid var(--loading-border-color);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--user-message-text-color);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    box-shadow: 0 0 0 3px var(--loading-box-shadow-color);
    margin: 10px auto;
}

  




.dots-wrapper {
    display: flex;
}

/* Animate each dot to appear sequentially */
.dot {
    opacity: 0;
    animation: dotAnimation 1.5s infinite;
}

/* Stagger animation for each dot */
.dot:nth-child(1) {
    animation-delay: 0s;
}
.dot:nth-child(2) {
    animation-delay: 0.3s;
}
.dot:nth-child(3) {
    animation-delay: 0.6s;
}

/* Keyframes for dot animation: they fade in then stay visible */
@keyframes dotAnimation {
    0%, 20% { opacity: 0; }
    40% { opacity: 1; }
    100% { opacity: 1; }
}







.email-input {
    width: 70%;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0.5rem auto;
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  .send-email-button {
    width: 25%;
    padding: 0.5rem 1rem;
    background-color: #3275B8;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin: 0 auto;
  }
  
  .send-email-button:hover {
    background-color: #285a93;
  }
  






.esri-attribution {
    display: none !important;
}
.esri-attribution__sources {
    white-space: normal !important;
}



.resize-arrow {
    font-size: 1rem; /* 16px */
    color: var(--text-color)
}





/* Link Button Styling */
.link-button {
    display: inline-block;
    margin: 0.3125rem 0; /* 5px 0 */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 12px; /* 5px */
    cursor: pointer;
    text-align: center;
    margin-right: 10px;
}

.link-button:hover {
    background-color: var(--button-bg-color);
}

/* Logos */
#labelBox {
    background-color: #fff;
    border-radius: 50%;
    align-items: normal;
    display: contents;
    padding: 0.3125rem; /* 5px */
    padding-bottom: 0;
    border: 1px solid #e3e3e3; /* 1px */
}

.logoDivCity {
    box-shadow: none !important;
}

#HLLabel {
    border-radius: 5px; /* 5px */
    align-items: normal;
    display: inline-flex;
    padding: 10px; /* 10px */
    padding-bottom: 0;
    box-shadow: none !important;
}

.logoDivHL {
    box-shadow: none !important;
}

.logoDivHL img {
    width:  115px; /* 125px */
    margin-left: 25px;
}

.logoDivCity img {
    width: 175px; /* 50px */
}

.logoDivHL {
	box-shadow: none !important;
}

/* Banner */
.banner {
    background-color: var(--bot-message-bg-color);
    color: var(--bot-message-text-color);
    display: none;
}
.banner p {
    text-align: center;
}


.logo-container {
    width: 50%;
}

.logo-container img {
    width: 180px; /* Default width to prevent flash */
    max-width: 100%;
    height: auto;
}


/* Modal container (background). JS toggles inline display:block, so the
   backdrop stays block-based; the content box centers itself. */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* Modal content box */
.modal-content {
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 12vh auto;
    padding: 24px 28px;
    border: 1px solid var(--rail-border);
    width: 80%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.modal-content h2 {
    margin: 0 0 12px;
    font-size: 20px;
}
/* Close button */
.close,
.close-button {
    color: #595959;         /* was #aaa — >=3:1 non-text contrast (WCAG 1.4.11) */
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    min-width: 32px;        /* >=24x24 target size (WCAG 2.5.8) */
    min-height: 32px;
    padding: 2px 6px;
    background: none;
    border: none;
    cursor: pointer;
}
.close:hover,
.close:focus,
.close-button:hover,
.close-button:focus {
    color: var(--text-color, #000);
    text-decoration: none;
    cursor: pointer;
}

/* ===== About Euclid HL dialog =====
   One centred, tabbed dialog holding About / Accessibility / Learn more. It
   replaced three standalone modals (#accessibilityModal, #leadModal, and the
   rail's Learn More), so the accessibility-statement typography that used to
   live on .accessibility-modal now hangs off .about-panel. Only the dialog
   body scrolls; the backdrop does not. */
#aboutModal { overflow: hidden; }
.about-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 90%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    color: var(--text-color);
}

/* Tablist. The active tab is marked by weight + an underline bar, never by
   colour alone (WCAG 1.4.1). */
.about-tabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 16px;
    border-bottom: 1px solid var(--rail-border);
}
.about-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 9px 14px;
    min-height: 32px;          /* >=24px target size (WCAG 2.5.8) */
    font: inherit;
    font-weight: 500;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    white-space: nowrap;
}
.about-tab:hover { opacity: 1; }
.about-tab.is-active {
    opacity: 1;
    font-weight: 600;
    border-bottom-color: currentColor;
}
.about-tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
    border-radius: 4px;
}

.about-panel:focus { outline: none; }
.about-panel h4 {
    margin: 18px 0 6px;
    font-size: 15px;
}
.about-panel p { line-height: 1.5; }
.about-panel ul {
    margin: 0 0 8px;
    padding-left: 20px;
}
.about-panel li {
    margin-bottom: 6px;
    line-height: 1.45;
}
.about-panel .a11y-badge { margin-top: 18px; }
.about-panel .a11y-badge img { height: 46px; width: auto; }
.about-panel .a11y-updated {
    opacity: 0.75;      /* theme-safe muted (inherits --text-color) */
    font-size: 13px;
}

/* Euclid HL wordmark at the head of the About tab. Both variants are in the
   DOM and the body theme class picks one — same pattern as .terms-logos. */
.about-logos {
    display: flex;
    align-items: center;
    padding: 4px 0 14px;
}
.about-logos img {
    height: 40px;
    width: auto;
    max-width: 60%;
    object-fit: contain;
}
.about-logo-dark { display: none; }
body.theme-dark .about-logo-light,
body.theme-colorblind .about-logo-light { display: none; }
body.theme-dark .about-logo-dark,
body.theme-colorblind .about-logo-dark { display: block; }

/* The lead form keeps its own spacing rules (.form-group, .submit-btn,
   .learn-more-link) — those are shared with the login/invite forms. */
.about-panel .learn-more-form-div { margin-top: 4px; }

/* Inline link-styled button: inherits --text-color + underline so it stays
   AA-contrast in every theme without relying on color alone. */
.a11y-link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.a11y-link-btn:hover { text-decoration: none; }

/* Calcite Dialog - ensure it appears on top of all elements */
#termsDialog {
    z-index: 100000000 !important;
}

calcite-dialog {
    z-index: 100000000 !important;
}

/* Calcite Alert (showCalciteAlert in utils.js): appended to <body>, fixed at
   the bottom of the viewport. Calcite's own toast z-index is below the
   chat (.chat-wrapper/.chat-box 1000), so the alert's left edge painted
   under the chat window. Above the rail (1500) and its flyouts (1600),
   below dialogs. A page rule beats the component's :host rule. */
calcite-alert {
    z-index: 1700;
}

/* Terms Dialog Dark Mode Styling */
#termsDialog.calcite-mode-dark {
    --calcite-color-foreground-1: #2b2b2b;
    --calcite-color-foreground-2: #333333;
    --calcite-color-foreground-3: #3a3a3a;
    --calcite-color-background: #1a1a1a;
    --calcite-color-text-1: #ffffff;
    --calcite-color-text-2: #e0e0e0;
    --calcite-color-text-3: #c0c0c0;
    --calcite-color-border-1: #555555;
    --calcite-color-border-2: #666666;
    --calcite-color-brand: #4a8dd9;
    --calcite-color-brand-hover: #5a9de9;
    --calcite-color-brand-press: #3a7dc9;
}

/* Terms Dialog High Contrast/Colorblind Mode */
body.theme-colorblind #termsDialog.calcite-mode-dark {
    --calcite-color-foreground-1: #000000;
    --calcite-color-foreground-2: #1a1a1a;
    --calcite-color-foreground-3: #2a2a2a;
    --calcite-color-background: #000000;
    --calcite-color-text-1: #ffffff;
    --calcite-color-text-2: #ffffff;
    --calcite-color-text-3: #ffff00;
    --calcite-color-border-1: #ffff00;
    --calcite-color-border-2: #ffff00;
    --calcite-color-brand: #ffff00;
    --calcite-color-brand-hover: #ffff00;
    --calcite-color-brand-press: #ffff00;
}








.mobile-expand-button {
    display: none; /* Hidden on desktop by default */
}


/* Chat Image Styles */
.chat-image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
    max-width: 100%;
    box-sizing: border-box;
}

.chat-image-wrapper {
    max-width: clamp(150px, 45%, 250px); /* Responsive with min/max constraints */
    min-width: 150px;
    flex: 0 1 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    box-sizing: border-box;
}

.chat-image-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chat-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: contain;
}

/* Calcite Panel Styles */
calcite-panel {
    --calcite-ui-border-1: var(--calcite-ui-border-2);
    --calcite-ui-foreground-1: #ffffff;
    transition: all 0.2s ease;
    min-width: 200px !important;
    min-height: 150px !important;
}

calcite-panel img {
    padding: 4px;
    background: transparent;
}

/* Resize handle styling */
calcite-panel::-webkit-resizer {
    border-bottom-right-radius: 8px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}

/* Ensure smooth resizing */
calcite-panel {
    resize: both;
    overflow: hidden !important;
}

/* Ensure panel stays above map but below modal */
calcite-panel {
    z-index: 1000 !important;
}

/* Keep modal above panels -- and above the rail (.app-rail, z 1500) and its
   themes flyout (1600), so the backdrop dims the whole window, rail included.
   Still below #termsDialog (1e8). */
.modal {
    z-index: 2000 !important;
}
/* Links inside our modals (About, Attribution): the default blue is unreadable
   on the dark and high-contrast panels, so they go white there. */
body.theme-dark .modal-content a,
body.theme-colorblind .modal-content a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.theme-dark .modal-content a:hover,
body.theme-colorblind .modal-content a:hover { text-decoration-thickness: 2px; }

/* Style the resize handle corner */
calcite-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #ddd 50%);
    border-bottom-right-radius: 4px;
}

/* The lead form moved into the About dialog's "Learn more" tab, so its old
   #leadModal / .lead-modal geometry lives on .about-modal now. Only the form's
   own spacing is still needed here. */
#leadForm {
    margin-top: 20px;
}

.about-modal h2 {
    color: var(--text-color);
    margin-bottom: 15px;
}

.about-panel p {
    margin-bottom: 20px;
    color: var(--text-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-color);  font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 95%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.submit-btn {
    background-color: var(--button-ask-color);
    color: var(--lead-submit-text-color);
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.submit-btn:hover {
    background-color: var(--button-ask-color);
}



.learn-more-link {
    color: var(--text-color);
    text-decoration: underline;
}

.success-message {
    text-align: center;
    padding: 30px 20px;
}

.success-message h3 {
    color: #28a745;
    margin-bottom: 15px;
}

.success-message p {
    margin-bottom: 25px;
    color: #666;
}

.success-message .submit-btn {
    max-width: 200px;
    margin: 0 auto;
}

.learn-more-banner {
    color: #666;
    text-align: center;
    font-size: 14px;
    font-style: italic;
    text-decoration: underline;
    cursor: pointer;
}


@media only screen and (max-width: 1233px) {
    .additional-button {
        padding: 0.5rem 0.4375rem; /* 8px 7px */
    }
}

@media only screen and (max-width: 929px) {
    .additional-button {
        padding: 0.5rem 0.4375rem; /* 8px 7px */
    }
}

@media only screen and (max-width: 768px) {
    #layerlist-expand {
        max-height: 200px !important; /* Or another value that fits your design */
        overflow-y: auto !important;
        /* Optionally, adjust padding or margins to ensure the close button is visible */
      }
    .esri-basemap-gallery {
        width: 100% !important;
    }

    .esri-expand__sheet {
        overflow-y: auto !important;
    }

    .esri-ui calcite-flow, .esri-ui calcite-panel {
        height: 280px !important;
        overflow: visible;
    }

    body {
        border: none !important;
        padding: 0px 10px;
        height: auto;
    }
    .layout-container {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        width: 100%;
        position: relative;
    }

    .logo-container img {
        width: 30% !important;
        max-width: 100%;
        height: auto;
    }

    .header-container-logo {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001; /* Ensure it's above everything */
        background: white; /* Or your theme background color */
        padding: 10px 10px 0px 10px;
        border-bottom: 1px solid #eee;
        height: 5dvh;
    }

    .learn-more-banner {
        position: fixed;
        top: 6dvh; /* Adjust based on your header height */
        left: 0;
        right: 0;
        z-index: 5;
        background: #f0f0f0;
    }

    .rightDiv {
        width: 100%;
        order: 1;
        margin-top: 9dvh;
        height: 70dvh;
        
    }

    .chat-container {
        width: 100%;
        height: 25dvh;
        order: 2;
        position: relative;
    }

    .chat-container.expanded {
        height: 90dvh;

    }

    /* When chat is expanded, shrink the map */
    .chat-container.expanded ~ .rightDiv {
        height: 10dvh;
    }

    .chat-input {
        height: 43px;
        border-radius: 6px;
    }

    /* Mobile responsive image adjustments */
    .chat-image-container {
        gap: 5px;
    }

    .chat-image-wrapper {
        max-width: clamp(120px, 48%, 200px);
        min-width: 120px;
    }

    .source-urls-container calcite-button {
        width: 90% !important;
        max-width: 100% !important;
        min-width: 100px !important;
    }

    /* Mobile expand button */
    /* Visible drag-to-resize handle at the top edge of the chat panel */
    .mobile-expand-button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 72px;
        height: 22px;
        border-radius: 20px;
        z-index: 1001; /* must beat .chat-wrapper/.chat-box (z-index 1000, later in DOM) or the chat paints over the pill */
        cursor: row-resize;
        border: none;
        background: transparent;
        padding: 0;
        touch-action: none;   /* the handle owns the vertical drag gesture */
    }

    /* Larger invisible touch target */
    .mobile-expand-button::before {
        content: "";
        position: absolute;
        top: -12px;
        bottom: -12px;
        left: -12px;
        right: -12px;
        background: transparent;
    }

    .drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .drag-handle span {
        width: 48px;
        height: 5px;
        background-color: #b0b0b0;
        border-radius: 3px;
    }
    .drag-handle span + span { display: none; }  /* single grabber pill */


    .chat-wrapper {
        height: calc(100% - 60px); /* Adjust based on remaining space needed */
        overflow-y: auto;
    }

    .theme-default {
        height: 100% !important;
        overflow: hidden;
    }
    #chatToggleIcon{
        display: none;
    }
    .about-modal {
        top: 38%;
    }
}

@media only screen and (max-width: 425px) {

    body {
        padding: 0px;
    }
    #dockButton {
        display: none;
    }
    .logo-container img {
        width: 50% !important;
        max-width: 100%;
        height: auto;
    }
    .chat-container {
        width: 100%;
    }
    .banner {
        display: block;
    }
    .additional-button {
        padding: 0.25rem 0.6875rem; /* 4px 11px */
    }
    .resize-handle {
        display: none;
    }
    .additional-button {
        font-size: 0.75rem; /* 12px */
    }
    .theme-label {
        font-size: 0.75rem; /* 12px */
    }
    .theme-selector {
        font-size: 0.5625rem; /* 9px */
    }
    .button-container {
        display: none;
    }
    .chat-button {
        bottom: 5px;
    }
    .chat-input-container{
        padding-bottom: 0;
    }
    #attributionModal div {
        position: relative;
        top: 30%;
    }
}

@media only screen and (max-width: 375px) {

}

@media only screen and (max-width: 320px) {
    .theme-label, .theme-selector {
        display: none;
    }
    .additional-button {
        padding: 0.5625rem 0.6875rem; /* 9px 11px */
    }
}
  
/* Styles for devices with no pointer or coarse pointer (likely mobile) */
@media (pointer: none), (pointer: coarse) {
    .button-container {
        display: none;
    }
    .theme-default {
        height: 80dvh;
    }
}

/* General media query for devices larger than 768px */
@media only screen and (min-width: 769px) and (max-width: 929px) {
    .additional-button {
        padding: 0.5rem 0.4375rem; /* 8px 7px */
    }
}

calcite-button {
    --calcite-color-text-1: #151515;
    --calcite-color-text-inverse: #ffffff;
    --calcite-color-brand: #3275B8;
    --calcite-color-brand-hover: #2862a3;
    --calcite-color-brand-press: #1f4d8a;
    /* text-align: center; */
    --calcite-color-border-1: #3275B8;
}

body.theme-dark calcite-button {
    --calcite-color-text-1: #ffffff;
    --calcite-color-text-inverse: #ffffff;
    --calcite-color-brand: #3275B81A;
    --calcite-color-brand-hover: #3275B81A;
    --calcite-color-brand-press: #3275B81A;
    --calcite-color-border-1: #4a8dd9;
}

body.theme-colorblind calcite-button {
    --calcite-color-text-1: #000000;
    --calcite-color-text-inverse: #000000;
    --calcite-color-brand: #ffff00;
    --calcite-color-brand-hover: #ffff00;
    --calcite-color-brand-press: #ffff00;   
    --calcite-color-border-1: #ffff00;
}
/* Somehow this works correctly, even though the color is invalid. Maybe that's why it works. */
body.theme-dark calcite-button.theme-selector-title {
    --calcite-color-brand: #a832b81;
    --calcite-color-brand-hover: #a832b81;
    --calcite-color-brand-press: #a832b81;
    --calcite-color-border-1: #a832b81;
}

body.theme-default calcite-button.theme-selector-title {
    --calcite-color-text-1: #151515;
    --calcite-color-text-inverse: #151515;
    --calcite-color-brand: #ffffff;
    --calcite-color-brand-hover: #ffffff;
    --calcite-color-brand-press: #ffffff;
    --calcite-color-border-1: #ffffff;
}

/* Fix source URL button widths to be responsive */
.source-urls-container calcite-button {
    width: 35% !important;
    max-width: 300px !important;
    min-width: 150px !important;
    white-space: normal !important;
    --calcite-color-brand: var(--starting-question-color);
    --calcite-color-brand-hover: var(--starting-question-color);
    --calcite-color-brand-press: var(--starting-question-color);
    --calcite-color-text-1: var(--user-message-text-color);
    --calcite-color-text-inverse: var(--user-message-text-color);
}

/* Tour widget theme support.
   Was a white card with a #667eea purple border and a #28a745 green Done
   button -- three colours that appear nowhere else in Euclid, so the tour read
   as a bolted-on widget. Now on the site palette: the same surface, border and
   radius as the app's dialogs, with Next/Done sharing the primary button
   colour (Done is distinguished by its label, not by turning green). */
/* .tour-card is the shared surface for the step tooltip (#simple-tour-tooltip)
   and the first-visit welcome card (.welcome-message). Theme overrides below
   target the class, so both always match. */
.tour-card {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--rail-border);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

#simple-tour-tooltip .tour-close-btn {
    color: var(--text-color);
    opacity: 0.6;
}
#simple-tour-tooltip .tour-close-btn:hover { opacity: 1; }

#simple-tour-tooltip .tour-step-counter {
    color: var(--text-color);
    opacity: 0.7;
}

#simple-tour-tooltip .tour-prev-btn {
    padding: 9px 18px;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--rail-border);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    min-height: 32px;
}
#simple-tour-tooltip .tour-prev-btn:hover { background: var(--nav-button-bg-color); }

#simple-tour-tooltip .tour-next-btn,
#simple-tour-tooltip .tour-done-btn {
    padding: 9px 18px;
    background: var(--button-ask-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    min-height: 32px;
}
#simple-tour-tooltip .tour-next-btn:hover,
#simple-tour-tooltip .tour-done-btn:hover { opacity: 0.88; }

/* ==========================================================================
   Map toolbar (map-toolbar.js) -- the map's controls, built by us.
   Buttons, panels, the legend card and the search/layers/basemap/maps panels
   are plain DOM absolutely positioned over #viewDiv, so there is no SDK
   wrapper or SDK theme to fight. Surfaces come from --map-ctl-* tokens set
   per theme below, alongside the rest of the theme variables.
   ========================================================================== */
body.theme-default {
    --map-ctl-bg: #ffffff;               /* panels */
    --map-ctl-fg: #1f2937;
    --map-ctl-border: rgba(0, 0, 0, 0.08);
    --map-ctl-hover: #f2f4f7;
    --map-ctl-active-bg: #007BFF;
    --map-ctl-active-fg: #ffffff;
    --map-ctl-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
    --map-ctl-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --map-ctl-muted: rgba(31, 41, 55, 0.6);
    /* Buttons follow the theme like the panels do: light surface here, the
       dark one in body.theme-dark below. (They were dark in both themes for
       a while, which read as "the buttons ignore the theme switch".) */
    --map-btn-bg: #ffffff;
    --map-btn-fg: #1f2937;
    --map-btn-hover: #f2f4f7;
    --map-btn-border: rgba(0, 0, 0, 0.14);
}
body.theme-dark {
    --map-ctl-bg: #2B2B2B;
    --map-ctl-fg: #ffffff;
    --map-ctl-border: rgba(255, 255, 255, 0.12);
    --map-ctl-hover: #3a3a3a;
    --map-ctl-active-bg: #33CCFF;
    --map-ctl-active-fg: #121212;
    --map-ctl-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --map-ctl-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    --map-ctl-muted: rgba(255, 255, 255, 0.6);
    /* A step darker than the panels so they don't sink into the dark basemap */
    --map-btn-bg: #1C1C1C;
    --map-btn-fg: #ffffff;
    --map-btn-hover: #2B2B2B;
    --map-btn-border: rgba(255, 255, 255, 0.16);
}
body.theme-colorblind {
    --map-ctl-bg: #000000;
    --map-ctl-fg: #ffffff;
    --map-ctl-border: #ffff00;
    --map-ctl-hover: #1a1a1a;
    --map-ctl-active-bg: #ffff00;
    --map-ctl-active-fg: #000000;
    --map-ctl-shadow: none;
    --map-ctl-panel-shadow: none;
    --map-ctl-muted: rgba(255, 255, 255, 0.7);
    --map-btn-bg: #000000;
    --map-btn-fg: #ffffff;
    --map-btn-hover: #1a1a1a;
    --map-btn-border: #ffff00;
}

/* Nothing of ours goes through view.ui. Its corner containers are empty now
   (view.ui.components is reduced to the CSS-hidden attribution strip) and the
   SDK already gives .esri-ui pointer-events:none -- NOT re-declared here,
   because the popup, with its Send-to-chat action, renders inside .esri-ui. */

.mt-root {
    position: absolute;
    inset: 0;
    pointer-events: none;      /* the map gets everything except our controls */
    z-index: 5;
    font-family: inherit;
    font-size: 13px;
    color: var(--map-ctl-fg);
}
.mt-root > * { pointer-events: auto; }
/* The hidden attribute relies on the UA stylesheet, and any author display
   rule (the panel is display:flex) silently overrides it -- which is how the
   panel once refused to close. Make hidden win everywhere under the toolbar. */
.mt-root [hidden] { display: none !important; }

/* Button stacks */
.mt-stack {
    position: absolute;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mt-stack--left { left: 12px; }
.mt-stack--right { right: 12px; }

.mt-btn {
    appearance: none;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--map-btn-border);
    border-radius: 10px;
    background: var(--map-btn-bg);
    color: var(--map-btn-fg);
    box-shadow: var(--map-ctl-shadow);
    cursor: pointer;
    transition: background-color .12s, color .12s, box-shadow .12s, transform .12s;
}
.mt-btn:hover { background: var(--map-btn-hover); }
.mt-btn:active { transform: translateY(1px); }
.mt-btn:focus-visible { outline: 2px solid var(--focus-outline-color, var(--button-ask-color)); outline-offset: 2px; }
.mt-btn:disabled { opacity: 0.4; cursor: default; }
.mt-btn.is-active { background: var(--map-ctl-active-bg); color: var(--map-ctl-active-fg); border-color: transparent; }
.mt-btn--plain { width: 28px; height: 28px; border: none; box-shadow: none; background: transparent; color: inherit; border-radius: 8px; }
.mt-btn--plain:hover { background: var(--map-ctl-hover); }
.mt-ico { display: inline-flex; width: 18px; height: 18px; transition: transform .2s; }
.mt-ico svg { width: 100%; height: 100%; }
.mt-btn.is-off-north .mt-ico { color: var(--map-ctl-active-bg); }

/* Zoom in/out share one pill */
.mt-group {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: var(--map-ctl-shadow);
    overflow: hidden;
    border: 1px solid var(--map-ctl-border);
}
.mt-group { border-color: var(--map-btn-border); }
.mt-group .mt-btn { border: none; border-radius: 0; box-shadow: none; }
.mt-group .mt-btn + .mt-btn { border-top: 1px solid var(--map-btn-border); }

/* The shared panel, docked beside the right stack */
.mt-panel {
    position: absolute;
    z-index: 3;      /* above the legend card (z 2), which is later in the DOM and
                        would otherwise paint over a tall panel like the basemaps */
    top: 12px;
    right: 56px;
    width: 300px;
    max-width: calc(100% - 68px);
    max-height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    background: var(--map-ctl-bg);
    color: var(--map-ctl-fg);
    border: 1px solid var(--map-ctl-border);
    border-radius: 12px;
    box-shadow: var(--map-ctl-panel-shadow);
    overflow: hidden;
}
/* Wider variant, per panel (the basemap gallery asks for it) */
.mt-panel--wide { width: 460px; }
.mt-panel--wide .mt-basemaps--stock .esri-basemap-gallery__item-container {
    grid-template-columns: repeat(5, minmax(0, 1fr));   /* ~86px tiles: ten recommended = two rows */
}
.mt-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-bottom: 1px solid var(--map-ctl-border);
    flex: 0 0 auto;
}
.mt-panel__title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.mt-panel__body { overflow-y: auto; padding: 8px; flex: 1 1 auto; }
.mt-panel__body .mt-basemaps--stock { margin: -6px; }   /* eats most of the body padding: tiny gutter */
.mt-empty { padding: 10px 6px; color: var(--map-ctl-muted); font-size: 12.5px; }

/* Layers */
.mt-layers { display: flex; flex-direction: column; }
.mt-layer {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 2px 0 calc(6px + var(--depth, 0) * 16px);   /* indent only by group depth */
    border-radius: 8px;
}
.mt-layer:hover { background: var(--map-ctl-hover); }
.mt-layer.is-out-of-scale .mt-layer__title { color: var(--map-ctl-muted); font-style: italic; }
.mt-layer__label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; cursor: pointer; padding: 4px 0; }
.mt-layer__title { font-size: 12.5px; line-height: 1.3; }
.mt-layer__caret { flex: 0 0 auto; margin-left: auto; }   /* right end of a group row */
.mt-layer__caret .mt-ico { width: 14px; height: 14px; }
.mt-layer__caret.is-open .mt-ico { transform: rotate(90deg); }
.mt-check {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    border: 2px solid var(--map-ctl-muted);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: background-color .1s, box-shadow .1s, border-color .1s;
}
/* Checked: the box fills with the accent and an inset ring in the panel
   colour carves the gap -- no pseudo-element to centre, so it can't sit off
   by a half-pixel. */
.mt-check:checked {
    border-color: var(--map-ctl-active-bg);
    background: var(--map-ctl-active-bg);
    box-shadow: inset 0 0 0 2px var(--map-ctl-bg);
}
.mt-check:focus-visible { outline: 2px solid var(--focus-outline-color, var(--button-ask-color)); outline-offset: 2px; }

/* Basemaps */
.mt-basemaps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-basemap {
    appearance: none;
    padding: 0 0 6px;
    border: 1px solid var(--map-ctl-border);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mt-basemap:hover { background: var(--map-ctl-hover); }
.mt-basemap.is-current { border-color: var(--map-ctl-active-bg); box-shadow: inset 0 0 0 1px var(--map-ctl-active-bg); }
.mt-basemap__thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--map-ctl-hover); }
.mt-basemap__title { font-size: 12px; padding: 0 8px; line-height: 1.25; }

/* The stock basemap gallery inside our panel: strip the SDK's surface and
   restyle its (light-DOM) items as cards that match the rest of the panel. */
.mt-basemaps--stock { display: block; }
.mt-basemaps--stock arcgis-basemap-gallery,
.mt-basemaps--stock .esri-basemap-gallery,
.mt-basemaps--stock .esri-widget {
    display: block;
    width: 100%;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    padding: 0;
    box-shadow: none;
}
.mt-basemaps--stock .esri-basemap-gallery__item-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* dense: 4-up, small thumbs */
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mt-basemaps--stock .esri-basemap-gallery__item {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 0 3px;
    border: 1px solid transparent;           /* frame only shows on hover / selected */
    border-radius: 4px;
    background: transparent;
    color: inherit;
    overflow: hidden;
    cursor: pointer;
}
.mt-basemaps--stock .esri-basemap-gallery__item:hover { background: var(--map-ctl-hover); border-color: var(--map-ctl-border); }
.mt-basemaps--stock .esri-basemap-gallery__item--selected,
.mt-basemaps--stock .esri-basemap-gallery__item[aria-selected="true"] {
    border-color: var(--map-ctl-active-bg);
    box-shadow: inset 0 0 0 1px var(--map-ctl-active-bg);
    background: transparent;
}
/* The SDK paints the selected tile's title in its own dark text colour, which
   vanishes on the dark and high-contrast panels; keep it the panel text. */
.mt-basemaps--stock .esri-basemap-gallery__item--selected .esri-basemap-gallery__item-title,
.mt-basemaps--stock .esri-basemap-gallery__item[aria-selected="true"] .esri-basemap-gallery__item-title,
.mt-basemaps--stock .esri-basemap-gallery__item--selected .esri-basemap-gallery__item-title a,
.mt-basemaps--stock .esri-basemap-gallery__item:hover .esri-basemap-gallery__item-title { color: var(--map-ctl-fg); }
.mt-basemaps--stock .esri-basemap-gallery__item-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    margin: 0;
    background: var(--map-ctl-hover);
}
.mt-basemaps--stock .esri-basemap-gallery__item-title {
    font-size: 11px;
    line-height: 1.15;
    padding: 2px 3px 0;
    color: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}
.mt-basemaps--stock .esri-basemap-gallery__item--error { opacity: 0.45; cursor: default; }
/* Recommended-first split (map-toolbar.js buildBasemaps): heading above the
   component, "Show all" below it. Items past the first two rows carry the
   hidden attribute until expanded; .mt-root [hidden] makes that stick. */
.mt-basemaps__heading {
    padding: 8px 8px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--map-ctl-muted);
}
.mt-basemaps__more {
    appearance: none;
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--map-ctl-active-bg);
    background: transparent;
    border: none;
    border-top: 1px solid var(--map-ctl-border);
    cursor: pointer;
}
.mt-basemaps__more:hover { background: var(--map-ctl-hover); }
.mt-basemaps__more:focus-visible { outline: 2px solid var(--focus-outline-color, var(--button-ask-color)); outline-offset: -2px; }
.mt-basemaps--stock .esri-basemap-gallery__loading { color: var(--map-ctl-muted); }

/* Search + generic result lists (maps, slides) */
.mt-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    color: var(--map-ctl-fg);
    background: var(--map-ctl-hover);
    border: 1px solid var(--map-ctl-border);
    border-radius: 10px;
}
.mt-input::placeholder { color: var(--map-ctl-muted); }
.mt-input:focus { outline: 2px solid var(--focus-outline-color, var(--button-ask-color)); outline-offset: 1px; }
.mt-results, .mt-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.mt-result {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.mt-result:hover, .mt-result:focus-visible { background: var(--map-ctl-hover); outline: none; }
.mt-result.is-current { background: var(--map-ctl-hover); }
.mt-result__primary { font-size: 13px; line-height: 1.3; }
.mt-result__secondary { font-size: 11.5px; color: var(--map-ctl-muted); line-height: 1.2; }
.mt-result__check { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--map-ctl-active-bg); }
.mt-result--thumb { flex-direction: row; align-items: center; gap: 10px; }
.mt-result__thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }

/* Legend card, bottom-right */
.mt-legend { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 2; }
.mt-legend__card {
    width: 260px;
    max-width: calc(100vw - 24px);
    background: var(--map-ctl-bg);
    color: var(--map-ctl-fg);
    border: 1px solid var(--map-ctl-border);
    border-radius: 12px;
    box-shadow: var(--map-ctl-panel-shadow);
    overflow: hidden;
}
.mt-legend__body { max-height: 20vh; overflow-y: auto; padding: 4px 10px 8px; }
.mt-legend__body .euclid-legend.esri-legend { min-width: 0; max-width: none; max-height: none; overflow: visible; padding: 0; }
/* The legend keeps the SDK's row class names for structure; colour is ours. */
.euclid-legend.esri-legend,
.euclid-legend.esri-legend .esri-legend__layer-cell--info,
.euclid-legend.esri-legend .esri-legend__service-label,
.euclid-legend.esri-legend .esri-legend__message {
    color: inherit;
    background: transparent;
}
.euclid-legend.esri-legend .esri-legend__service { border-bottom-color: var(--map-ctl-border); }

/* Map popup (map-popup.js): our card for the PARCELS layer only (2026-09-29).
   Same tokens as the toolbar; floats at the click point, docks on phones.
   Every other layer gets the SDK popup (next block). */
.mt-popup {
    position: absolute;
    z-index: 4;                      /* above the shared panel (3) and legend (2) */
    width: 380px;                    /* was 320: web-map popups (text + fields + chart) need the room */
    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    background: var(--map-ctl-bg);
    color: var(--map-ctl-fg);
    border: 1px solid var(--map-ctl-border);
    border-radius: 12px;
    box-shadow: var(--map-ctl-panel-shadow);
    font-size: 12.5px;
    line-height: 1.4;
}
.mt-popup__pager { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 2px; }
.mt-popup__pager-text { font-size: 11.5px; color: var(--map-ctl-muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; }
.mt-popup__pager .mt-btn--plain:disabled { opacity: 0.35; cursor: default; }
.mt-popup__body {
    padding: 12px 18px 16px;     /* room above the footer so the last row breathes */
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: var(--map-ctl-muted) transparent;
}
.mt-popup__body::-webkit-scrollbar { width: 6px; }
.mt-popup__body::-webkit-scrollbar-thumb { background: var(--map-ctl-muted); border-radius: 3px; border: 1px solid var(--map-ctl-bg); }
/* The parcel content is HTML the builder has always produced, with inline
   margins on its h3/p; normalise it to the card's type scale. */
.mt-popup__html h3 { font-size: 13.5px; font-weight: 600; margin: 4px 0 6px; line-height: 1.3; }
.mt-popup__html p { margin: 3px 0; }
.mt-popup__html a { color: var(--map-ctl-active-bg); text-decoration: underline; text-underline-offset: 2px; }
/* Label column sizes to its longest label, up to 58% of the card, so a name
   like PLANNING.Zoning.AREA never runs into its value; past that it wraps. */
.mt-popup__fields { display: grid; grid-template-columns: fit-content(58%) minmax(0, 1fr); gap: 4px 14px; margin: 4px 0 2px; align-items: baseline; }
.mt-popup__fields dt { color: var(--map-ctl-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.mt-popup__fields dd { margin: 0; overflow-wrap: anywhere; }
.mt-popup__foot {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--map-ctl-border);
    flex: 0 0 auto;
}
.mt-popup__btn {
    appearance: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--map-ctl-border);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.mt-popup__btn:hover { background: var(--map-ctl-hover); }
.mt-popup__btn--primary { background: var(--map-ctl-active-bg); color: var(--map-ctl-active-fg); border-color: transparent; }
.mt-popup__btn--primary:hover { filter: brightness(1.08); background: var(--map-ctl-active-bg); }
.mt-popup__btn:focus-visible { outline: 2px solid var(--focus-outline-color, var(--button-ask-color)); outline-offset: 2px; }
/* Pointer toward the click: below the card normally, above it when flipped */
.mt-popup__pointer {
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--map-ctl-bg);
    border-right: 1px solid var(--map-ctl-border);
    border-bottom: 1px solid var(--map-ctl-border);
    transform: rotate(45deg);
}
.mt-popup--below .mt-popup__pointer { bottom: auto; top: -7px; transform: rotate(225deg); }
/* Phones: docked to the bottom, full width, no pointer */
.mt-popup--docked {
    left: 8px !important;
    right: 8px;
    bottom: 8px;
    top: auto !important;
    width: auto;
    /* Never taller than the map pane it sits in (the phone layout stacks a
       ~50dvh map over the chat), and never more than 60% of the screen. */
    max-height: min(60vh, calc(100% - 16px));
}
.mt-popup--docked .mt-popup__pointer { display: none; }

/* ==========================================================================
   ?mapui=sdk-styled -- the SDK's own widgets, styled as far as the SDK allows.
   Kept for comparison with the custom toolbar. Everything here is the kind of
   rule that got the SDK UI "better" in the rounds before the toolbar: sizes,
   radius, shadows, theme tokens. What it cannot do is also the point: the
   legend still lists every class, Calcite rows keep their own layout, and the
   SDK's main.css loads after ours, so these are all anchored on an id to win.
   The class lives on #viewDiv, not body: applyTheme() rewrites body.className.
   ========================================================================== */
#viewDiv.map-sdk-styled .esri-ui { font-family: inherit; }
#viewDiv.map-sdk-styled .esri-ui .esri-widget--button {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--map-btn-bg); color: var(--map-btn-fg);
    border: 1px solid var(--map-btn-border); box-shadow: var(--map-ctl-shadow);
}
#viewDiv.map-sdk-styled .esri-ui .esri-widget--button:hover,
#viewDiv.map-sdk-styled .esri-ui .esri-widget--button:active,
#viewDiv.map-sdk-styled .esri-ui .esri-widget--button:focus,
#viewDiv.map-sdk-styled .esri-ui .esri-expand__toggle--expanded,
#viewDiv.map-sdk-styled .esri-ui .esri-expand--expanded .esri-widget--button {
    background: var(--map-btn-hover); color: var(--map-btn-fg);
}
#viewDiv.map-sdk-styled .esri-ui .esri-component { background: transparent; box-shadow: none; }
#viewDiv.map-sdk-styled .esri-ui .esri-zoom { border-radius: 10px; overflow: hidden; box-shadow: var(--map-ctl-shadow); }
#viewDiv.map-sdk-styled .esri-ui .esri-zoom .esri-widget--button { border-radius: 0; box-shadow: none; border: none; }
#viewDiv.map-sdk-styled .esri-ui .esri-expand__content {
    border-radius: 12px; overflow: hidden; box-shadow: var(--map-ctl-panel-shadow);
    border: 1px solid var(--map-ctl-border);
}
#viewDiv.map-sdk-styled .esri-widget,
#viewDiv.map-sdk-styled .esri-expand__content,
#viewDiv.map-sdk-styled .esri-search .esri-search__container,
#viewDiv.map-sdk-styled .esri-search .esri-search__input {
    background: var(--map-ctl-bg); color: var(--map-ctl-fg);
}
#viewDiv.map-sdk-styled .esri-ui .esri-widget--panel { width: 300px; font-size: 12px; }
#viewDiv.map-sdk-styled .esri-legend__layer-cell--info,
#viewDiv.map-sdk-styled .esri-legend__service-label,
#viewDiv.map-sdk-styled .esri-widget__heading { color: var(--map-ctl-fg); }
#viewDiv.map-sdk-styled .esri-legend__service { padding: 6px 12px; }
#viewDiv.map-sdk-styled .esri-legend__layer-row { min-height: 22px; }
#viewDiv.map-sdk-styled .esri-legend { max-height: 40vh; }
#viewDiv.map-sdk-styled .esri-legend__layer { overflow: visible; }
/* Calcite inside the widgets: the tokens are all the styling that reaches
   shadow DOM. The site's dark/high-contrast palettes, as with #termsDialog. */
body.theme-dark #viewDiv.map-sdk-styled .esri-layer-list,
body.theme-dark #viewDiv.map-sdk-styled .esri-basemap-gallery,
body.theme-dark #viewDiv.map-sdk-styled .esri-search,
body.theme-dark #viewDiv.map-sdk-styled .esri-expand__content,
body.theme-colorblind #viewDiv.map-sdk-styled .esri-layer-list,
body.theme-colorblind #viewDiv.map-sdk-styled .esri-basemap-gallery,
body.theme-colorblind #viewDiv.map-sdk-styled .esri-search,
body.theme-colorblind #viewDiv.map-sdk-styled .esri-expand__content {
    --calcite-color-foreground-1: var(--map-ctl-bg);
    --calcite-color-foreground-2: var(--map-ctl-hover);
    --calcite-color-foreground-3: var(--map-ctl-hover);
    --calcite-color-background: var(--map-ctl-bg);
    --calcite-color-text-1: var(--map-ctl-fg);
    --calcite-color-text-2: var(--map-ctl-fg);
    --calcite-color-text-3: var(--map-ctl-muted);
    --calcite-color-border-1: var(--map-ctl-border);
    --calcite-color-border-2: var(--map-ctl-border);
    --calcite-color-brand: var(--map-ctl-active-bg);
    --calcite-color-brand-hover: var(--map-ctl-active-bg);
    --calcite-color-text-inverse: var(--map-ctl-active-fg);
}
/* --- SDK popup, default mode ---------------------------------------------------
   Every layer except the parcels layer gets the SDK's own popup (2026-09-29):
   the popup the client authored in Map Viewer, its placement, docking and
   content untouched. The one thing
   that follows the site theme is Calcite's colour tokens, so the panel is dark
   in dark mode and high-contrast in that theme; nothing about size, spacing or
   the header actions is overridden. (The block below this one is the heavier
   ?mapui=sdk-styled treatment, kept for comparison.) */
#viewDiv .esri-popup,
#viewDiv .esri-popup * {
    --calcite-color-foreground-1: var(--map-ctl-bg);
    --calcite-color-foreground-2: var(--map-ctl-hover);
    --calcite-color-foreground-3: var(--map-ctl-hover);
    --calcite-color-background: var(--map-ctl-bg);
    --calcite-color-text-1: var(--map-ctl-fg);
    --calcite-color-text-2: var(--map-ctl-fg);
    --calcite-color-text-3: var(--map-ctl-muted);
    --calcite-color-border-1: var(--map-ctl-border);
    --calcite-color-border-2: var(--map-ctl-border);
    --calcite-color-border-3: var(--map-ctl-border);
    --calcite-color-brand: var(--map-ctl-active-bg);
    --calcite-color-brand-hover: var(--map-ctl-active-bg);
    --calcite-color-brand-press: var(--map-ctl-active-bg);
    --calcite-color-text-inverse: var(--map-ctl-active-fg);
    --calcite-color-text-link: var(--map-ctl-active-bg);
    --calcite-color-focus: var(--focus-outline-color, var(--button-ask-color));
    /* The popup's flow-item / panel read their own heading and surface tokens */
    --calcite-flow-item-background-color: var(--map-ctl-bg);
    --calcite-flow-item-header-background-color: var(--map-ctl-bg);
    --calcite-flow-item-footer-background-color: var(--map-ctl-bg);
    --calcite-flow-item-heading-text-color: var(--map-ctl-fg);
    --calcite-flow-item-description-text-color: var(--map-ctl-muted);
    --calcite-panel-background-color: var(--map-ctl-bg);
    --calcite-panel-header-background-color: var(--map-ctl-bg);
    --calcite-panel-footer-background-color: var(--map-ctl-bg);
    --calcite-panel-heading-text-color: var(--map-ctl-fg);
    --calcite-panel-description-text-color: var(--map-ctl-muted);
    --calcite-action-text-color: var(--map-ctl-fg);
    --calcite-action-background-color-hover: var(--map-ctl-hover);
}
/* Headings inside the content (the parcel card's "Zone:" line, an author's <h2>)
   take the SDK's fixed dark grey; give them the theme's text colour. */
#viewDiv .esri-popup .esri-widget__heading,
#viewDiv .esri-popup .esri-feature__title,
#viewDiv .esri-popup h1, #viewDiv .esri-popup h2, #viewDiv .esri-popup h3,
#viewDiv .esri-popup h4, #viewDiv .esri-popup h5, #viewDiv .esri-popup h6 { color: var(--map-ctl-fg); }
#viewDiv .esri-popup .esri-widget,
#viewDiv .esri-popup .esri-feature,
#viewDiv .esri-popup .esri-feature__main-container,
#viewDiv .esri-popup .esri-widget__table { background: var(--map-ctl-bg); color: var(--map-ctl-fg); }
#viewDiv .esri-popup .esri-widget__table th,
#viewDiv .esri-popup .esri-widget__table td { color: var(--map-ctl-fg); border-color: var(--map-ctl-border); }
#viewDiv .esri-popup .esri-widget__table tr:nth-child(odd) { background: color-mix(in srgb, var(--map-ctl-fg) 5%, var(--map-ctl-bg)); }
#viewDiv .esri-popup a { color: var(--map-ctl-active-bg); }

/* --- SDK popup, styled as far as it goes -------------------------------------
   The 4.32 Popup is the Features widget inside a calcite-flow-item: heading,
   header actions, footer (pagination + actions) all render in Calcite shadow
   DOM. What reaches in: Calcite's colour / component tokens (custom properties
   inherit through shadow roots), inherited text properties (font, colour,
   scrollbar-color), and display:none on the SLOTTED light-DOM nodes (the
   collapse / dock calcite-actions). What does not: the header's own padding and
   layout, the close button's shape, the footer's flex rules, or singling out
   one action ("Send to Euclid HL") as primary -- the actions are identical
   Calcite buttons with no hook we can select on. Compare with .mt-popup. */
#viewDiv.map-sdk-styled .esri-popup,
#viewDiv.map-sdk-styled .esri-popup * {
    /* Calcite semantic tokens, every theme (the site's light palette too). On
       every node, not just the root: the SDK's main.css re-declares these on
       .esri-widget, and the popup's inner wrappers are .esri-widget, so a
       root-only definition loses to the closer one (black heading in dark). */
    --calcite-color-foreground-1: var(--map-ctl-bg);
    --calcite-color-foreground-2: var(--map-ctl-hover);
    --calcite-color-foreground-3: var(--map-ctl-hover);
    --calcite-color-background: var(--map-ctl-bg);
    --calcite-color-text-1: var(--map-ctl-fg);
    --calcite-color-text-2: var(--map-ctl-fg);
    --calcite-color-text-3: var(--map-ctl-muted);
    --calcite-color-border-1: var(--map-ctl-border);
    --calcite-color-border-2: var(--map-ctl-border);
    --calcite-color-border-3: var(--map-ctl-border);
    --calcite-color-brand: var(--map-ctl-active-bg);
    --calcite-color-brand-hover: var(--map-ctl-active-bg);
    --calcite-color-brand-press: var(--map-ctl-active-bg);
    --calcite-color-text-inverse: var(--map-ctl-active-fg);
    --calcite-color-text-link: var(--map-ctl-active-bg);
    --calcite-color-focus: var(--focus-outline-color, var(--button-ask-color));
    --calcite-font-family: inherit;
    --calcite-font-size--2: 11.5px;
    --calcite-font-size--1: 12.5px;
    --calcite-font-size-0: 13px;
    --calcite-font-size-sm: 12.5px;
    --calcite-font-size-md: 13px;
    --calcite-border-radius: 8px;
    --calcite-border-radius-round: 8px;
    /* Component tokens: the flow-item forwards these to its inner calcite-panel */
    --calcite-flow-item-background-color: var(--map-ctl-bg);
    --calcite-flow-item-header-background-color: var(--map-ctl-bg);
    --calcite-flow-item-footer-background-color: var(--map-ctl-bg);
    --calcite-flow-item-heading-text-color: var(--map-ctl-fg);
    --calcite-flow-item-description-text-color: var(--map-ctl-muted);
    --calcite-flow-item-border-color: var(--map-ctl-border);
    --calcite-flow-item-header-border-block-end: 1px solid var(--map-ctl-border);
    --calcite-flow-item-content-space: 8px 14px 12px;
    --calcite-flow-item-footer-space: 10px 12px;
    --calcite-panel-background-color: var(--map-ctl-bg);
    --calcite-panel-header-background-color: var(--map-ctl-bg);
    --calcite-panel-footer-background-color: var(--map-ctl-bg);
    --calcite-panel-heading-text-color: var(--map-ctl-fg);
    --calcite-panel-description-text-color: var(--map-ctl-muted);
    --calcite-panel-border-color: var(--map-ctl-border);
    --calcite-panel-header-border-block-end: 1px solid var(--map-ctl-border);
    --calcite-panel-content-space: 8px 14px 12px;
    --calcite-panel-space: 8px 14px 12px;
    --calcite-panel-footer-space: 10px 12px;
    --calcite-panel-corner-radius: 12px;
    --calcite-action-background-color: transparent;
    --calcite-action-background-color-hover: var(--map-ctl-hover);
    --calcite-action-background-color-press: var(--map-ctl-hover);
    --calcite-action-text-color: var(--map-ctl-fg);
    --calcite-action-text-color-press: var(--map-ctl-fg);
    --calcite-action-corner-radius: 8px;
    --calcite-button-background-color: transparent;
    --calcite-button-background-color-hover: var(--map-ctl-hover);
    --calcite-button-background-color-press: var(--map-ctl-hover);
    --calcite-button-border-color: var(--map-ctl-border);
    --calcite-button-text-color: var(--map-ctl-fg);
    --calcite-button-text-color-hover: var(--map-ctl-fg);
    --calcite-button-corner-radius: 8px;
}
/* Inherited text / scrollbar properties cross the shadow boundary too */
#viewDiv.map-sdk-styled .esri-popup {
    color: var(--map-ctl-fg);
    font-size: 12.5px;
    line-height: 1.4;
    scrollbar-width: thin;
    scrollbar-color: var(--map-ctl-muted) transparent;
}
/* The heading, wherever the SDK puts it: as the flow-item's heading attribute
   (shadow; the tokens above) or as a light-DOM node slotted into the header. */
#viewDiv.map-sdk-styled .esri-popup [slot="header-content"],
#viewDiv.map-sdk-styled .esri-popup [slot="header-content"] *,
#viewDiv.map-sdk-styled .esri-popup .esri-features__heading,
#viewDiv.map-sdk-styled .esri-popup .esri-features__header,
#viewDiv.map-sdk-styled .esri-popup .esri-widget__heading,
#viewDiv.map-sdk-styled .esri-popup h1,
#viewDiv.map-sdk-styled .esri-popup h2,
#viewDiv.map-sdk-styled .esri-popup h3,
#viewDiv.map-sdk-styled .esri-popup h4,
#viewDiv.map-sdk-styled .esri-popup h5,
#viewDiv.map-sdk-styled .esri-popup h6 { color: var(--map-ctl-fg); }
/* The card: same box as .mt-popup */
#viewDiv.map-sdk-styled .esri-popup__main-container,
#viewDiv.map-sdk-styled .esri-popup--shadow .esri-popup__main-container {
    width: 320px;
    max-width: calc(100vw - 16px);
    background: var(--map-ctl-bg);
    color: var(--map-ctl-fg);
    border: 1px solid var(--map-ctl-border);
    border-radius: 12px;
    box-shadow: var(--map-ctl-panel-shadow);
    overflow: hidden;
}
#viewDiv.map-sdk-styled .esri-popup--is-docked-bottom-center .esri-popup__main-container,
#viewDiv.map-sdk-styled .esri-popup--is-docked-top-center .esri-popup__main-container {
    width: 100%;
    max-width: none;
}
#viewDiv.map-sdk-styled .esri-popup--is-docked-bottom-center .esri-popup__main-container { border-radius: 12px 12px 0 0; border-bottom: 0; }
#viewDiv.map-sdk-styled .esri-popup--is-docked-top-center .esri-popup__main-container { border-radius: 0 0 12px 12px; border-top: 0; }
#viewDiv.map-sdk-styled .esri-features,
#viewDiv.map-sdk-styled .esri-features__container,
#viewDiv.map-sdk-styled .esri-popup .esri-widget { background: transparent; color: inherit; }
#viewDiv.map-sdk-styled .esri-popup calcite-flow,
#viewDiv.map-sdk-styled .esri-popup calcite-flow-item,
#viewDiv.map-sdk-styled .esri-popup calcite-panel { background: var(--map-ctl-bg); color: var(--map-ctl-fg); }
/* Header chrome: collapse and dock are light-DOM calcite-actions slotted into
   the flow-item header, so they can be dropped. The close (icon "x") stays. */
#viewDiv.map-sdk-styled .esri-popup calcite-action[slot="header-actions-end"]:not([icon="x"]),
#viewDiv.map-sdk-styled .esri-popup calcite-action[slot="header-actions-start"],
#viewDiv.map-sdk-styled .esri-popup [slot="header-menu-actions"],
#viewDiv.map-sdk-styled .esri-popup .esri-popup__collapse-icon,
#viewDiv.map-sdk-styled .esri-popup .esri-popup__button--dock,
#viewDiv.map-sdk-styled .esri-popup .esri-popup__button--collapse,
#viewDiv.map-sdk-styled .esri-popup calcite-action[icon^="dock-"],
#viewDiv.map-sdk-styled .esri-popup calcite-action[icon="minimize"],
#viewDiv.map-sdk-styled .esri-popup calcite-action[icon="chevron-up"],
#viewDiv.map-sdk-styled .esri-popup calcite-action[icon="chevron-down"] { display: none !important; }
/* Content: the feature's HTML, brought to the card's type scale */
#viewDiv.map-sdk-styled .esri-popup .esri-features__content-container,
#viewDiv.map-sdk-styled .esri-popup .esri-features__content-feature { padding: 0; background: transparent; }
#viewDiv.map-sdk-styled .esri-popup .esri-feature,
#viewDiv.map-sdk-styled .esri-popup .esri-feature__main-container { background: transparent; color: inherit; }
#viewDiv.map-sdk-styled .esri-popup .esri-feature__content-element,
#viewDiv.map-sdk-styled .esri-popup .esri-feature__content-node,
#viewDiv.map-sdk-styled .esri-popup .esri-feature__text,
#viewDiv.map-sdk-styled .esri-popup .esri-feature__fields { padding: 0; margin: 0 0 6px; font-size: 12.5px; line-height: 1.4; color: inherit; }
#viewDiv.map-sdk-styled .esri-popup .esri-feature__content-element:last-child,
#viewDiv.map-sdk-styled .esri-popup .esri-feature__content-node:last-child { margin-bottom: 0; }
#viewDiv.map-sdk-styled .esri-popup .esri-feature__content-element h3,
#viewDiv.map-sdk-styled .esri-popup .esri-feature__text h3,
#viewDiv.map-sdk-styled .esri-popup .esri-feature h3 { font-size: 13.5px; font-weight: 600; margin: 4px 0 6px; line-height: 1.3; color: var(--map-ctl-fg); }
#viewDiv.map-sdk-styled .esri-popup .esri-feature__content-element p,
#viewDiv.map-sdk-styled .esri-popup .esri-feature__text p { margin: 3px 0; }
#viewDiv.map-sdk-styled .esri-popup a { color: var(--map-ctl-active-bg); text-decoration: underline; text-underline-offset: 2px; }
/* Field tables (the web-map fieldInfos list): same label/value feel as .mt-popup__fields */
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table { background: transparent; color: inherit; border-collapse: collapse; }
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table tr,
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table tr:nth-child(odd),
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table tr:nth-child(even) { background: transparent; }
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table th,
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table td { padding: 3px 7px 3px 0; border: 0; border-bottom: 1px solid var(--map-ctl-border); vertical-align: baseline; overflow-wrap: anywhere; }
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table tr:last-child th,
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table tr:last-child td { border-bottom: 0; }
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table th { color: var(--map-ctl-muted); font-size: 11.5px; font-weight: 400; width: 42%; text-align: left; }
#viewDiv.map-sdk-styled .esri-popup .esri-widget__table td { padding-right: 0; }
/* Footer: pagination + actions. Buttons take the outline look from the tokens
   above; the light-DOM wrapper gets the card's border. */
#viewDiv.map-sdk-styled .esri-popup .esri-features__footer,
#viewDiv.map-sdk-styled .esri-popup [slot="footer"] { background: var(--map-ctl-bg); border-top: 1px solid var(--map-ctl-border); gap: 8px; }
#viewDiv.map-sdk-styled .esri-popup .esri-features__pagination-text { font-size: 11.5px; color: var(--map-ctl-muted); font-variant-numeric: tabular-nums; }
#viewDiv.map-sdk-styled .esri-popup calcite-button { font-weight: 500; }
#viewDiv.map-sdk-styled .esri-popup calcite-button[kind="brand"],
#viewDiv.map-sdk-styled .esri-popup calcite-button[appearance="solid"] {
    --calcite-button-background-color: var(--map-ctl-active-bg);
    --calcite-button-background-color-hover: var(--map-ctl-active-bg);
    --calcite-button-text-color: var(--map-ctl-active-fg);
    --calcite-button-text-color-hover: var(--map-ctl-active-fg);
    --calcite-button-border-color: transparent;
}
#viewDiv.map-sdk-styled .esri-popup .esri-feature__title,
#viewDiv.map-sdk-styled .esri-popup .esri-widget__heading { color: var(--map-ctl-fg); font-size: 13.5px; font-weight: 600; }
/* Pointer toward the click: our panel colour, hairline instead of the SDK's shadow */
#viewDiv.map-sdk-styled .esri-popup__pointer-direction {
    background: var(--map-ctl-bg);
    box-shadow: none;
    border: 1px solid var(--map-ctl-border);
}
#viewDiv.map-sdk-styled .esri-popup--aligned-top-center .esri-popup__pointer-direction,
#viewDiv.map-sdk-styled .esri-popup--aligned-top-left .esri-popup__pointer-direction,
#viewDiv.map-sdk-styled .esri-popup--aligned-top-right .esri-popup__pointer-direction { border-top: 0; border-left: 0; }
#viewDiv.map-sdk-styled .esri-popup--aligned-bottom-center .esri-popup__pointer-direction,
#viewDiv.map-sdk-styled .esri-popup--aligned-bottom-left .esri-popup__pointer-direction,
#viewDiv.map-sdk-styled .esri-popup--aligned-bottom-right .esri-popup__pointer-direction { border-bottom: 0; border-right: 0; }
#viewDiv.map-sdk-styled .esri-popup--is-docked .esri-popup__pointer { display: none; }

/* Scrollbars inside the legend card and the shared panel: thin, themed, and
   invisible until there is something to scroll. Same idea as the rail; the
   thumb is the muted text colour and turns the accent on hover, so it
   follows light / dark / high-contrast on its own. Firefox uses the
   scrollbar-color pair; WebKit browsers use the pseudo-elements. */
.mt-legend__body,
.mt-panel__body {
    scrollbar-width: thin;
    scrollbar-color: var(--map-ctl-muted) transparent;
}
.mt-legend__body::-webkit-scrollbar,
.mt-panel__body::-webkit-scrollbar {
    width: 6px;
}
.mt-legend__body::-webkit-scrollbar-track,
.mt-panel__body::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.mt-legend__body::-webkit-scrollbar-thumb,
.mt-panel__body::-webkit-scrollbar-thumb {
    background: var(--map-ctl-muted);
    border-radius: 3px;
    border: 1px solid var(--map-ctl-bg);   /* inset from the edge, like the rail */
}
.mt-legend__body::-webkit-scrollbar-thumb:hover,
.mt-panel__body::-webkit-scrollbar-thumb:hover {
    background: var(--map-ctl-active-bg);
}

/* Phones: the panel takes the width, legend collapses to its button */
@media (max-width: 768px) {
    /* Touch targets: 40px buttons, 20px glyphs. The panel drops below the
       taller right stack (12 + 40 + 8). */
    .mt-btn { width: 40px; height: 40px; }
    .mt-btn--plain { width: 32px; height: 32px; }
    .mt-ico { width: 20px; height: 20px; }
    .mt-panel, .mt-panel--wide { right: 12px; left: 12px; top: 60px; width: auto; max-width: none; max-height: 55vh; }
    .mt-panel--wide .mt-basemaps--stock .esri-basemap-gallery__item-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* The legend card: no wider than the map, and its list gets more of the
       (short) map than on desktop so a few rows don't need scrolling. */
    .mt-legend__card { width: min(260px, calc(100vw - 24px)); }
    .mt-legend__body { max-height: 28vh; }
}

/* In-view legend (legend-in-view.js)./* In-view legend (legend-in-view.js). It borrows the SDK legend's class
   names for theming, which also means it inherits the SDK's roomy spacing;
   these rules pull it into a compact panel. Selectors are anchored on
   `.euclid-legend.esri-legend` (two classes) because style.css loads BEFORE
   the SDK's main.css, so a same-specificity rule here would lose the tie --
   this outranks the SDK's single-class rules without any !important. */
/* The Expand that hosts the legend. The SDK caps and scrolls its content
   wrapper as well, which produced a scrollbar inside a scrollbar; the
   legend root above is the only element allowed to scroll. */
.euclid-legend-expand .esri-expand__content,
.euclid-legend-expand .esri-expand__content-expanded,
.euclid-legend-expand .esri-expand__panel {
    max-height: none;
    overflow: visible;
}
.euclid-legend.esri-legend {
    min-width: 200px;
    max-width: 260px;   /* same as the other panels (Map UI block) */
    max-height: 20vh;
    overflow-y: auto;
    padding: 4px 8px 6px;
    font-size: 12px;
    line-height: 1.25;
}
.euclid-legend.esri-legend .esri-legend__service {
    padding: 4px 0 5px;
    margin: 0;
    border-bottom: 1px solid var(--rail-border, rgba(128, 128, 128, 0.22));
}
.euclid-legend.esri-legend .esri-legend__service:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}
.euclid-legend.esri-legend .esri-legend__service-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 3px;
    padding: 0;
}
/* The SDK gives .esri-legend__layer overflow:auto, so every layer section
   scrolled on its own -- the scrollbar-inside-a-scrollbar. Only the root
   (.euclid-legend.esri-legend) may scroll. */
.euclid-legend.esri-legend .esri-legend__layer,
.euclid-legend.esri-legend .esri-legend__layer-table,
.euclid-legend.esri-legend .esri-legend__layer-body {
    margin: 0;
    padding: 0;
    overflow: visible;
    max-height: none;
}
.euclid-legend.esri-legend .esri-legend__layer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    padding: 1px 0;
    margin: 0;
}
.euclid-legend.esri-legend .esri-legend__layer-cell {
    padding: 0;
    margin: 0;
}
/* 20px cell. legend-in-view.js previews a size-clamped clone of each symbol
   so the preview fits; the cell is min-, not fixed-, sized so anything that
   still comes out larger widens its row instead of spilling left into the
   card body's scroll container (which can't scroll left, so it clipped). */
.euclid-legend.esri-legend .esri-legend__symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
}
.euclid-legend.esri-legend .esri-legend__layer-cell--info {
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
}
.euclid-legend.esri-legend .esri-legend__message {
    padding: 4px 2px;
    font-size: 12px;
    opacity: 0.8;
}

/* Tour spotlight. The scrim dims everything but the target; the ring marks the
   target itself. Both are needed: on the dark theme the un-dimmed target
   (#121212) against the dimmed page (~#050505) is nearly invisible, so the
   ring is what actually says "look here". Colour follows the theme's focus
   colour -- brand blue in light, the cyan from the wordmark in dark, yellow
   in high contrast -- so it always sits on the page the way focus does. */
.simple-tour-cutout {
    background: rgba(0, 0, 0, 0.7);
}
.simple-tour-highlight {
    box-sizing: border-box;
    border: 2px solid var(--button-ask-color);
    border-radius: 8px;
    background: transparent;
}
body.theme-dark .simple-tour-cutout {
    background: rgba(0, 0, 0, 0.78);
}
body.theme-dark .simple-tour-highlight {
    border-color: var(--focus-outline-color);
}
body.theme-colorblind .simple-tour-highlight {
    border: 3px solid #ffff00;
}

/* Dark theme tour styles. The rules above are all var()-driven now, so dark
   mode only needs the one surface tweak: #2B2B2B lifts the card off the
   #121212 page the way a raised dialog should. */
body.theme-dark .tour-card {
    background: #2B2B2B;
}

/* Colorblind/High contrast theme tour styles */
body.theme-colorblind .tour-card {
    background: #000000;
    color: #ffffff;
    border: 3px solid #ffff00;
}

body.theme-colorblind #simple-tour-tooltip .tour-close-btn {
    color: #ffffff;
}

body.theme-colorblind #simple-tour-tooltip .tour-step-counter {
    color: #ffffff;
}

body.theme-colorblind #simple-tour-tooltip .tour-prev-btn {
    background: #333333;
    color: #ffffff;
    border: 2px solid #ffff00;
}

body.theme-colorblind #simple-tour-tooltip .tour-next-btn,
body.theme-colorblind #simple-tour-tooltip .tour-done-btn {
    background: #ffff00;
    color: #000000;
    border: 2px solid #ffff00;
}

body.theme-colorblind #simple-tour-tooltip h3 {
    color: #ffff00;
}

body.theme-colorblind #simple-tour-tooltip p {
    color: #ffffff;
}

/* =========================================================================
   LEFT RAIL + DRAGGABLE CHAT/MAP DIVIDER
   Replaces the old top header row, the "…" settings popup, the learn-more
   banner, and the "Expand Chat" toggle. Rail is a fixed, full-height column
   on the far left; the layout reserves a gutter for it and the two panes are
   split by a draggable divider.
   ========================================================================= */

:root {
    --rail-w: 56px;          /* collapsed rail width (also the layout gutter) */
    --rail-w-open: 224px;    /* pinned rail width (content shifts over to make room) */
    --rail-border: rgba(128, 128, 128, 0.22);
}

/* Reserve a permanent gutter for the fixed rail; panes fill the rest. */
.layout-container {
    padding-left: var(--rail-w);
    box-sizing: border-box;
    transition: padding-left 0.18s ease; /* matches the rail's width transition */
}
/* Expanded rail pushes the panes over instead of overlaying them. Desktop only:
   on mobile the rail is a top bar and .pinned can linger from localStorage. */
@media only screen and (min-width: 769px) {
    .layout-container:has(.app-rail.pinned) {
        padding-left: var(--rail-w-open);
    }
}

/* Chat width is driven by --chat-basis (set by the divider drag); map fills the rest. */
.layout-container .chat-container {
    flex: 0 0 var(--chat-basis, 35%);
    min-width: 0;
    max-width: none;
}
.layout-container .rightDiv {
    flex: 1 1 auto;
    width: auto;
}

/* Divider ordering so the handle always sits between the two panes,
   in both the default and docked-right orientations. */
.layout-container.dock-right .chat-container { order: 3; }
.layout-container.dock-right .chat-divider   { order: 2; }
.layout-container.dock-right .rightDiv       { order: 1; }

/* ---- The rail ---- */
.app-rail {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: var(--rail-w);
    /* Above .chat-wrapper/.chat-box (both z-index:1000) so the rail paints over
       the chat during the expand/collapse transition (content shifts, but the
       two briefly overlap mid-animation). Still below modals (z-index ~1e8). */
    z-index: 1500;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    background: var(--bg-color);
    border-right: 1px solid var(--rail-border);
    overflow: hidden;
    transition: width 0.18s ease;
}
.app-rail.pinned {
    width: var(--rail-w-open);
}

/* Logo header — pinned to the top of the chat column. Because it sits above the
   scrolling .chat-box, it stays in place while the conversation scrolls. The
   logo width comes from config (img_city_logo_size) via init.js. */
.chat-logo-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--rail-border);
}
/* EuclidHL wordmark: hard height cap so the header stays one predictable band.
   Light/dark variants are both in the DOM; the body theme class picks one. */
.chat-logo-header .euclid-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}
/* "for City, ST" tag next to the wordmark so each deployment is identifiable */
.chat-logo-header .chat-logo-for {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
}
.chat-logo-header .euclid-logo-dark { display: none; }
body.theme-dark .chat-logo-header .euclid-logo-light,
body.theme-colorblind .chat-logo-header .euclid-logo-light { display: none; }
body.theme-dark .chat-logo-header .euclid-logo-dark,
body.theme-colorblind .chat-logo-header .euclid-logo-dark { display: block; }

/* City logo overlay, bottom-left of the map; pointer-events:none so it never
   intercepts map interaction. Two rules keep it off the legend:
   - stacking: z-index 4, BELOW the toolbar layer (.mt-root is 5 and #viewDiv is
     not a stacking context, so the two share .rightDiv's). The legend, the
     panels and the popup paint over the logo, never under it. It used to be 50,
     which put the logo over all of them.
   - geometry: max-width leaves room for the legend card (260px at right:12px)
     plus a gutter, so on a normal map they never meet at all. Percentages here
     resolve against .rightDiv (position:relative), i.e. the map's width. */
.map-city-logo {
    position: absolute;
    left: 12px;
    bottom: 12px;                        /* same baseline as the legend; Esri's strip is CSS-hidden */
    z-index: 4;
    pointer-events: none;
    max-width: calc(100% - 300px);      /* 12 left + 16 gutter + 260 card + 12 right */
}
.map-city-logo .logo-container { width: 100%; }   /* the global 50% is for the rail */
/* Width comes from the dashboard setting (img_city_logo_size), applied inline by
   init.js; max-width:100% caps it at the container above, so the configured
   width wins until it would reach the legend. */
.map-city-logo .logo-container img {
    max-width: 100%;
    max-height: 22vh;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}
/* Legend collapsed to its toggle (the phone default): only the button to clear. */
.rightDiv:has(.mt-legend__card[hidden]) .map-city-logo { max-width: calc(100% - 76px); }
/* ?mapui=sdk modes: the stock legend is a 300px expand panel at 15px. */
.rightDiv:has(.esri-expand--expanded .esri-legend) .map-city-logo { max-width: calc(100% - 340px); }
/* A popup docked along the bottom (phones) takes the full width; step aside. */
.rightDiv:has(.mt-popup--docked:not([hidden])) .map-city-logo,
.rightDiv:has(.esri-popup--is-docked-bottom-center) .map-city-logo { display: none; }

/* Scrollable list of actions */
.app-rail-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Appearance/layout controls, pushed to the FOOT of the scrolling item list.
   The operational actions (New Chat, Email, Tour) stay packed at the top and
   read as the primary set; these sit against Terms/About at the rail's base,
   which is also where a dedicated settings surface would live later.
   margin-top:auto collapses to 0 once the list overflows, so a short viewport
   degrades to the plain top-down packing rather than clipping anything. */
.rail-group-settings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}

/* Thin, unobtrusive scrollbar for the rail */
.app-rail-items::-webkit-scrollbar { width: 6px; }
.app-rail-items::-webkit-scrollbar-thumb { background: var(--rail-border); border-radius: 3px; }

/* Rail item = icon (collapsed) or icon + label (pinned) */
.rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;   /* centers the lone icon when collapsed */
    padding: 10px 0;
    border: none;
    background: transparent;
    color: var(--text-color);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.15s ease;
}
.rail-item img,
.rail-item .rail-ico {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}
/* Inline SVG icons inherit the theme text color via currentColor, so they're
   always correct in default / dark / high-contrast without separate assets. */
.rail-ico { color: var(--text-color); }
.rail-item:hover { background: var(--nav-button-bg-color); }
/* Inset the focus ring so the rail's overflow:hidden can't clip it (WCAG 2.4.7) */
.app-rail .rail-item:focus-visible { outline-offset: -2px; }

/* Hidden labels stay RENDERED (clipped to 1px, not display:none): Google
   Translate skips display:none text and never revisits it when the rail
   expands via a class toggle, which left "Collapse", "New Chat", etc. in
   English on translated pages. */
.rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.app-rail.pinned .rail-item {
    justify-content: flex-start;
    padding: 10px 12px;
}
/* Keep the pin button's divider level with the chat header's bottom border
   when expanded too — the pinned padding shorthand above would reset it. */
.app-rail.pinned .rail-pin {
    padding-bottom: 16px;
}
.app-rail.pinned .rail-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.rail-divider {
    height: 1px;
    background: var(--rail-border);
    margin: 8px 10px;
    flex: 0 0 auto;
}


/* Themes flyout — position:fixed so it escapes the rail's overflow:hidden and
   its scrolling items container; JS sets top/left from the button's position. */
.rail-item-group { position: relative; }
.rail-flyout {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 156px;
    padding: 6px;
    background: var(--bg-color);
    border: 1px solid var(--rail-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 1600;
}
.rail-flyout.open { display: flex; flex-direction: column; gap: 2px; }
.rail-flyout button {
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}
.rail-flyout button:hover { background: var(--nav-button-bg-color); }

/* 'More' flyout rendered as a menu with icon rows, a divider, and a sub-label */
.rail-flyout-menu { min-width: 190px; }
.flyout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
/* DEPRECATED: tone moved to a per-city dashboard setting (default-tone); the
   flyout tone buttons no longer exist. Kept per repo convention. */
.flyout-item.tone-option[aria-pressed="true"] {
    font-weight: 600;
    color: var(--button-ask-color, var(--text-color));
}
.flyout-item.tone-option[aria-pressed="true"]::after {
    content: "\2713";
    margin-left: auto;
    font-size: 12px;
}
.flyout-item img.flyout-ico,
.flyout-item .flyout-ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
    color: var(--text-color);
}
.flyout-divider {
    height: 1px;
    background: var(--rail-border);
    margin: 6px 4px;
}
.flyout-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    padding: 6px 12px 2px;
    color: var(--text-color);
}

/* ===== Text size flyout =====
   Opened from the rail's Text Size button; replaced the old Increase/Decrease
   Text pair. Wider than the menu flyouts because a range input needs a real
   track to be draggable, and the row is 24px tall so the thumb clears the
   minimum pointer target (WCAG 2.5.8). */
.rail-flyout-textsize {
    min-width: 236px;
    gap: 10px;
    padding: 12px;
}
.textsize-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.textsize-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}
.textsize-value {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.8;
    font-variant-numeric: tabular-nums;   /* stops the readout shifting 90% -> 100% */
}
.textsize-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Small/large A bookends: the direction of travel reads without the number */
.textsize-a {
    flex: 0 0 auto;
    color: var(--text-color);
    font-weight: 700;
    line-height: 1;
}
.textsize-a-sm { font-size: 12px; }
.textsize-a-lg { font-size: 19px; }

.textsize-slider {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.textsize-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--rail-border);
}
.textsize-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--rail-border);
}
.textsize-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;          /* centres the 16px thumb on the 4px track */
    border-radius: 50%;
    background: var(--button-ask-color);
    border: 2px solid var(--bg-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.textsize-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--button-ask-color);
    border: 2px solid var(--bg-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Link-styled, so it doesn't read as a third control competing with the
   slider. Overrides the .rail-flyout button rules above. */
.rail-flyout-textsize .textsize-reset {
    align-self: flex-start;
    padding: 4px 0;
    min-height: 24px;
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rail-flyout-textsize .textsize-reset:hover {
    background: transparent;
    opacity: 1;
}

/* Bottom cluster: account actions + collapse toggle, pinned to the rail's foot */
.app-rail-bottom {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px solid var(--rail-border);
}

/* Collapse / expand toggle — sits at the top of the rail, above the actions */
.rail-pin {
    flex: 0 0 auto;
    margin-bottom: 6px;
    /* 16px (not the rail-item's 10px) drops this button's bottom border to
       y=57px — exactly level with .chat-logo-header's bottom border
       (12px padding + 32px logo + 12px padding + 1px border). */
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rail-border);
    border-radius: 0;
}

/* The mobile top bar (logo + hamburger) is hidden on desktop where the rail is a sidebar */
.rail-topbar { display: none; }
.rail-hamburger { display: none; }
.rail-hamburger-label { display: none; }

/* Dock icon swaps with the dock direction (data-docked on the button) */
.dock-ico-left { display: none; }
#dockButton[data-docked="left"] .dock-ico-right { display: none; }
#dockButton[data-docked="left"] .dock-ico-left { display: block; }

/* Dock label swaps the same way. The inactive variant is clipped (not
   display:none) so Google Translate keeps both translated; the id selector
   outweighs the .app-rail.pinned label restore. */
#dockButton[data-docked="right"] .dock-label-left,
#dockButton[data-docked="left"] .dock-label-right {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---- Draggable divider ---- */
.chat-divider {
    flex: 0 0 12px;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
    background: transparent;
    z-index: 6;
    touch-action: none;
}
/* Enlarge the pointer target to >=24px (WCAG 2.5.8) without a wide visible gap */
.chat-divider::after {
    content: "";
    position: absolute;
    inset: 0 -6px;
}
.chat-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 42px;
    border-radius: 2px;
    background: #8a8a8a; /* >=3:1 non-text contrast (WCAG 1.4.11) */
    transition: background-color 0.15s ease, height 0.15s ease;
}
.chat-divider:hover::before,
.chat-divider:focus-visible::before {
    background: #007AC2;
    height: 64px;
}
.chat-divider.dragging::before { background: #007AC2; height: 100%; }

/* ---- Mobile: rail becomes a hamburger top bar; panes stack and are resizable ---- */
@media only screen and (max-width: 768px) {
    .layout-container {
        padding-left: 0;
        padding-top: 52px;   /* room for the top bar */
        box-sizing: border-box;
    }
    /* Chat starts larger and is resizable via the drag handle (inline height);
       the map fills whatever space remains. */
    .layout-container .chat-container {
        flex: 0 0 auto;
        height: 42dvh;
    }
    .layout-container .chat-container.expanded { height: 85dvh; }
    .layout-container .rightDiv {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        margin-top: 0;
    }

    /* Logo band is desktop-only. */
    .chat-logo-header { display: none; }

    /* Rail is a top bar with the logo on the left and a hamburger on the right;
       the hamburger opens the full labeled menu as a drawer below the bar. */
    .app-rail {
        position: fixed;
        top: 0; left: 0; right: 0;
        width: auto;
        height: 52px;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--rail-border);
        background: var(--bg-color);
        z-index: 1500;
        overflow: visible;
    }
    .app-rail.pinned { width: auto; box-shadow: none; }
    .rail-pin { display: none; }

    .rail-topbar {
        display: flex;
        align-items: center;
        flex: 0 0 52px;
        height: 52px;
        padding: 0 10px;
    }
    .rail-topbar .app-rail-brand { display: flex; align-items: center; overflow: hidden; }
    .rail-topbar .app-rail-brand .logo-container { width: auto; display: flex; align-items: center; }
    .rail-topbar .app-rail-brand .logo-container img {
        width: auto !important;   /* override the inline width init.js sets */
        height: auto;
        max-height: 34px;
        max-width: 170px;
        object-fit: contain;
    }

    .rail-hamburger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;         /* push the hamburger to the right */
        height: 40px;
        padding: 0 8px;
        border: none;
        background: transparent;
        color: var(--text-color);
        cursor: pointer;
        border-radius: 8px;
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: 600;
    }
    .rail-hamburger .rail-ico { width: 24px; height: 24px; flex: 0 0 24px; }
    .rail-hamburger-label { display: inline; }

    /* Closed: the action lists are hidden behind the hamburger. */
    .app-rail-items,
    .app-rail-bottom { display: none; }

    /* Open: the bar expands into a scrollable, labeled menu below the top bar. */
    .app-rail.menu-open {
        height: auto;
        max-height: 100dvh;
        overflow-y: auto;
        padding-bottom: 8px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }
    .app-rail.menu-open .rail-topbar { border-bottom: 1px solid var(--rail-border); }
    .app-rail.menu-open .app-rail-items {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: visible;
        width: 100%;
        padding: 6px 8px 0;
        box-sizing: border-box;
    }
    .app-rail.menu-open .app-rail-bottom {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        padding: 6px 8px 0;
        margin-top: 6px;
        border-top: 1px solid var(--rail-border);
        box-sizing: border-box;
    }
    .app-rail.menu-open .rail-item {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 12px;
    }
    .app-rail.menu-open .rail-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .app-rail.menu-open .rail-label { display: inline; }
    .app-rail.menu-open .rail-divider { display: block; }

    /* The map is small on phones: the city logo stays, but low and narrow. Its
       width is the max-width chain above (beside the legend toggle, or the open
       card); the height cap keeps it under the toolbar stacks. */
    .map-city-logo .logo-container img { max-height: 8vh; }

    /* Sign in is desktop-only; hide it in the mobile menu.
       !important beats the inline display JS may set on auth-state changes. */
    #loginButton { display: none !important; }

    .chat-divider { display: none; }   /* desktop divider off; mobile uses the drag handle */
}

/* ===== Euclid Lite (dashboard Staff Tools embed) =====
   Lite mode omits the .app-rail entirely (both the desktop fixed rail and
   its mobile top-bar form), the .chat-logo-header, and the starter-question
   .button-container — see templates/index.html's `{% if not lite %}` guards.
   .layout-container normally reserves space for those fixed-position
   elements (padding-left for the desktop rail's gutter, padding-top for the
   mobile top bar); with the rail gone that reservation would leave a dead
   band, so lite mode zeroes it out on both axes. .chat-container/.rightDiv
   already fill 100dvh via existing rules, so no height overrides are
   needed once the padding is reclaimed. */
body.lite-mode .layout-container {
    padding-left: 0;
    padding-top: 0;
}