html, body {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Global layout tokens */
:root {
    /* Fixed chrome sizes */
    --header-h: 56px;            /* height of the fixed header */
    --footer-h: 44px;            /* height of the fixed footer */
    /* Responsive chrome gap tokens */
    --chrome-gap-sm: 6px;        /* small screens */
    --chrome-gap-md: 8px;        /* default */
    --chrome-gap-lg: 12px;       /* large screens */
    /* Active chrome gap (overridden via media queries) */
    --chrome-gap: var(--chrome-gap-md);           /* small equal gap above and below content */
    --sidebar-w: 340px;          /* default sidebar width */
}

/* Responsive activation of chrome gap */
@media (max-width: 768px) {
    :root { --chrome-gap: var(--chrome-gap-sm); }
}
@media (min-width: 1600px) {
    :root { --chrome-gap: var(--chrome-gap-lg); }
}

/* Utility: hide only visually (keep for screen readers) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

h1 {
    color: #3a2f24;
}

p {
    margin: 2px;
}

li {
    margin: 2px;
}

ol {
    margin: 2px;
}

/* Background gradient */
body::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(-45deg, #3a2f24 0%, #4b3b2e 25%, #70553e 50%, #9a7b58 100%);
    background-size: 300%;
    animation: 20s infinite animateBG;
    position: absolute;
}

/* App layout: header + content (sidebar+main) + footer */
.app.layout {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0; /* header/footer are fixed; manage gaps via content padding */
    box-sizing: border-box;
}

.top-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    box-sizing: border-box; /* include padding within fixed height */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: rgba(239, 231, 218, 0.9);
    backdrop-filter: blur(2px);
    border-bottom: 1px solid #d2c7b8;
    z-index: 110; /* above content and footer */
}

.brand { display: flex; align-items: center; gap: 10px; }
.logo-small { height: 32px; }
.app-title { font-size: 1.2rem; margin: 0; color: #3a2f24; }

/* On very small widths, hide the long title and project link to keep tools fitting */
@media (max-width: 640px) {
    .top-banner .app-title,
    .top-banner .project-link {
        display: none;
    }
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: #3a2f24;
    font-size: 1.2rem;
    padding: 6px 8px;
    cursor: pointer;
}

/* Theme select in header */
.header-tools { display: inline-flex; align-items: center; gap: 8px; }
.btn-logout {
    color: #8b1e1e; /* red tint */
    border: 1px solid rgba(139, 30, 30, 0.25);
}
.btn-logout:hover {
    background: rgba(139, 30, 30, 0.08);
}
.btn-logout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 30, 30, 0.25);
}
.theme-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 0.9rem;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #d2c7b8;
    background: #fffdfa;
    color: #3a2f24;
    cursor: pointer;
}
.theme-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(194,155,114,0.25); }

.content {
    /* Pin the content area exactly between the fixed header and footer */
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--chrome-gap));
    bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px) + var(--chrome-gap));
    left: 0;
    right: 0;
    display: flex;
    min-height: 0; /* allow children to shrink for overflow */
    overflow: hidden; /* internal panes handle their own scroll */
    /* side paddings for small gaps from the browser edges */
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

/* Standalone full-page login (hidden when authenticated) */
#login-page.login-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Use small viewport unit when supported to avoid iOS URL-bar jumps */
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    /* Ensure there is always a gap from window borders, even on tiny screens */
    padding: 24px 16px; /* fallback */
    /* Safe-area aware paddings so content never touches screen edges */
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-top: max(24px, env(safe-area-inset-top, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow: auto; /* allow scrolling when content is taller than viewport */
    /* Add subtle background gradient */
    background: linear-gradient(135deg, #f9f6f2 0%, #efe7da 100%);
}

.login-explainer {
    width: 100%;
    max-width: 600px;
    /* Enhanced card styling */
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(107, 78, 46, 0.12);
    border: 1px solid rgba(210, 199, 184, 0.3);
}

@media (max-width: 560px) {
    .login-explainer {
        padding: 24px 20px;
        border-radius: 12px;
    }
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.login-logo {
    margin-bottom: 16px;
    filter: drop-shadow(0 2px 8px rgba(107, 78, 46, 0.15));
}

.login-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #3a2f24;
    margin: 0;
    text-align: center;
}

@media (max-width: 560px) {
    .login-title {
        font-size: 1.5rem;
    }
}

.login-description {
    color: #5a4f3e;
    line-height: 1.6;
    margin-bottom: 8px;
}

.login-description p {
    margin: 0 0 12px 0;
}

.login-description p:last-child {
    margin-bottom: 0;
}

.login-description a {
    color: #c86b3c;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.login-description a:hover {
    color: #b85a2c;
    text-decoration: underline;
}

.login-privacy {
    font-size: 0.9rem;
    color: #7a6a58;
    padding-top: 8px;
    border-top: 1px solid #e8dcc8;
    margin-top: 8px !important;
}

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    max-width: 90vw;
    background: #efe7da;
    border-right: 1px solid #d2c7b8;
    box-sizing: border-box;
    padding: 10px 12px;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    border-radius: 10px; /* match chat window corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* match chat window shadow */
    margin-right: 8px; /* small gap to the main area */
    /* Make the sidebar stretch between header and fixed footer */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* Stronger de-emphasis so focus stays on chat */
    /* Sidebar tone tokens (light theme defaults) */
    --sb-text: rgba(58, 47, 36, 0.62);       /* base body text */
    --sb-muted: rgba(58, 47, 36, 0.58);      /* explainer/first-use body */
    --sb-heading: rgba(58, 47, 36, 0.72);    /* small headings */
    --sb-tab: rgba(58, 47, 36, 0.56);        /* inactive tab label */
    --sb-tab-selected: rgba(58, 47, 36, 0.78); /* selected tab label */
    --sb-link: #7a6a58;                      /* toned link */
    --sb-link-hover: #6b5b49;                /* darker on hover for affordance */
    color: var(--sb-text);
}

/* Collapsed sidebar */
.sidebar-collapsed .sidebar { display: none; }
.sidebar-collapsed .main-area { padding-left: 0; }

.main-area {
    flex: 1;
    display: flex;
    min-height: 0; /* allow chat container to become a scroll area */
    min-width: 0;
    padding: 0 10px; /* horizontal only; avoid extra top/bottom gap vs. sidebar */
    box-sizing: border-box;
}

/*
 Responsive behavior: auto-collapse sidebar on narrow viewports
 - Below 900px, hide the sidebar by default to give space to chat.
 - Keep the existing toggle button functional by inverting the
   meaning of the 'sidebar-collapsed' class at small sizes so that
   clicking the button will SHOW the sidebar instead of hiding it.
 - This is CSS-only; no JS changes required.
*/
@media (max-width: 900px) {
    /* hide sidebar by default on small screens */
    .sidebar { display: none; }

    /* when user toggles, show the sidebar */
    .sidebar-collapsed .sidebar { display: block; }

    /* ensure layout remains tidy when sidebar appears */
    .sidebar {
        max-width: 100vw; /* allow full width if needed on small screens */
        margin-right: 0;  /* avoid squeezing main when shown */
    }

    /* main area should use full width when sidebar is hidden */
    .main-area { padding-left: 0; }
}

.explainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #efe7da;
    border-radius: 10px;
    margin: 8px;
    padding: 16px;
    /* stronger softening to reduce visual pull versus chat */
    color: var(--sb-muted);
}

.explainer a { color: var(--sb-link); }
.logo { height: 150px; }
.about-logo {
    display: block;
    width: 96px;
    height: auto;
    margin: 4px 0 12px 0;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: auto;
    /* subtle separation from panel background */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* Sidebar tabs */
.sidebar-tabs { display: flex; flex-direction: column; gap: 8px; }
.tablist { display: flex; gap: 6px; border-bottom: 1px solid #d2c7b8; padding-bottom: 6px; }
.tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 6px 10px;
    /* more muted to clearly de-emphasize */
    color: var(--sb-tab);
    cursor: pointer;
    font-size: 0.95rem;
}
.tab[aria-selected="true"] {
    background: #f5f1e8;
    border-color: #d2c7b8;
    border-bottom-color: transparent;
    color: var(--sb-tab-selected);
}
.tab.disabled,
.tab[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
.tab.disabled:focus,
.tab[aria-disabled="true"]:focus { box-shadow: none; }
.tab:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(194,155,114,0.25);
}
.tabpanel { padding-top: 8px; }

/* Location tab layout */
.location-panel {
    display: flex;
    flex-direction: column;
    gap: 12px; /* a bit more spacing between map, controls, tip */
}

/* Location search above the map */
.location-search { margin: 8px 0 6px 0; }
.location-search-row {
    display: flex;
    flex-direction: column; /* stack input above button */
    gap: 8px;
    align-items: stretch; /* make children full width */
}
.location-search-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d2c7b8;
    border-radius: 8px;
    background: #fffdfa;
    color: #3a2f24;
}
.location-search-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(194,155,114,0.25); }
.location-search-btn {
    white-space: nowrap;
    display: block;
    width: 100%;           /* match map and Clear button width */
    box-sizing: border-box;
    text-align: center;
}

/* Small bottom-anchored notice about SoilGrids in the Location tab */
.location-notice {
    margin-top: auto; /* push to bottom of the flex column when space allows */
    font-size: 0.82em;
    color: var(--sb-muted);
    border-top: 1px dashed #d2c7b8;
    padding-top: 6px;
    line-height: 1.3;
}
.location-notice a { color: var(--sb-link); text-decoration: none; }
.location-notice a:hover { color: var(--sb-link-hover); text-decoration: underline; }

.location-tip {
    font-size: 0.9em;
    opacity: 0.85;
    margin: 0;
    color: var(--sb-muted);
}

.location-panel #map {
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.location-clear-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.location-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* slightly larger than before for clarity */
}

.location-card {
    background: #f5f1e8;
    border: 1px solid #d2c7b8;
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--sb-text);
}

.location-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sb-heading);
    margin-bottom: 6px;
}

.location-card-title { font-weight: 600; }

.location-card-body {
    font-size: 0.95em;
    line-height: 1.35;
}

/* First-use guidance */
.first-use { padding: 8px; color: var(--sb-muted); }
.first-use h3 { margin-top: 0; color: var(--sb-heading); font-weight: 500; }
.first-use ol { padding-left: 18px; }
.first-use ul { padding-left: 18px; }
.first-use a { color: var(--sb-link); }
.first-use a:hover { color: var(--sb-link-hover); text-decoration: underline; }

.chat-container {
    height: 100%;
    overflow: hidden; /* transcript (messages) will manage its own scroll */
    flex: 1;
    background-color: #f5f1e8;
    padding: 0 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow internal scroll areas to size correctly */
    /* Reserve space inside the scroll area so the last message isn't hidden under the input card */
    --input-clear: 96px; /* approximate input card height + margins; adjust if input grows more */
}

.messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto; /* make only the transcript scroll */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    margin-bottom: 0;
    /* bottom padding to clear input card; last items remain visible above the composer */
    padding: 16px 8px calc(var(--input-clear)) 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    line-height: 1.15;
    color: #2b2b2b;
    word-wrap: break-word;
    overflow-wrap: anywhere; /* improve wrapping of long URLs/words on small screens */
    white-space: pre-wrap;
}

.message strong {
    display: block;
    font-size: 0.8em;
    color: #6b5e4a;
    margin-bottom: 4px;
    font-weight: 600;
}

.user-message {
    align-self: flex-end;
    background: #e9efe6; /* light sage */
    border-top-right-radius: 4px;
}

.bot-message {
    align-self: flex-start;
    background: #f3ede4; /* light sand */
    border-top-left-radius: 4px;
}

.input-container {
    display: flex;
    position: absolute; /* anchor within the chat container */
    bottom: 0;
    left: 0;
    right: 0;
    margin: 12px; /* small margin around the input card */
    /* Respect device safe areas (iOS) for the bottom inset */
    margin-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    gap: 10px;
    align-items: stretch; /* textarea full width */
    flex-direction: column; /* stack textarea and actions row */
    z-index: 2; /* keep input above scrolling chat content */
}

/* Visual card around the input, ChatGPT-like */
.input-card {
    background: rgba(255, 253, 249, 0.92);
    border: 1px solid #d2c7b8;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.question {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d2c7b8;
    background: #fffdf9;
    border-radius: 10px;
    outline: none;
    resize: none; /* auto-grown by script */
    overflow: hidden; /* hide scrollbars while we grow */
    min-height: 38px; /* roughly one line */
    max-height: 140px; /* cap growth to ~5-6 lines */
    line-height: 1.3;
    box-sizing: border-box;
}

.question:focus {
    border-color: #c29b72;
    box-shadow: 0 0 0 3px rgba(194,155,114,0.15);
}

/* Actions row under the textarea */
.input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

 .actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Uploaded file indicator chip */
.upload-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background-color: #f4efe7; /* subtle sand */
    color: #3a2f24;
    border: 1px solid #d2c7b8;
    border-radius: 999px; /* pill */
    font-size: 12px;
    line-height: 1;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
}
.upload-indicator i { font-size: 12px; color: #8b5e34; }
.upload-indicator .upload-indicator-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

 /* Character counter under the input */
.char-counter {
    font-size: 12px;
    color: #6b5e4a; /* muted */
    margin-left: 6px;
}
.char-counter.warn { color: #c86b3c; }

/* Primary icon-only send button */
.send-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #c86b3c; /* primary */
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.05s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.send-button i { font-size: 16px; }

.send-button:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-color: #b85e2f;
}

.send-button:active {
    transform: translateY(1px);
}

.send-button:disabled,
.send-button[aria-disabled="true"] {
    background-color: #c8b8ab; /* muted */
    color: #f2eeea;
    cursor: not-allowed;
    box-shadow: none;
}

/* Secondary (additional) upload button */
.upload-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #efe7da; /* subtle bg */
    color: #3a2f24; /* icon/text color */
    border: 1px solid #d2c7b8;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.05s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.upload-button i { font-size: 16px; }

.upload-button:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background-color: #e7dece;
    border-color: #cbb89f;
}

.upload-button:active { transform: translateY(1px); }

.upload-button:disabled,
.upload-button[aria-disabled="true"] {
    background-color: #eee7de;
    color: #9a8f7f;
    border-color: #e0d5c7;
    cursor: not-allowed;
    box-shadow: none;
}

.spin-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
}

.spinner {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #c86b3c;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: auto;
    animation: spin 2s linear infinite;
    transform: translate(-50%, -50%);
}

.chat-header {
    display: none;
}

/* Chat toolbar */
.chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px 0 8px;
}

.chat-name {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    border: 1px solid #d2c7b8;
    background: #fffdf9;
    border-radius: 10px;
    outline: none;
}

.chat-name:focus {
    border-color: #c29b72;
    box-shadow: 0 0 0 3px rgba(194,155,114,0.12);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #eee6da;
    color: #6b5e4a;
    border: 1px solid #deceb8;
    border-radius: 10px;
    cursor: pointer;
}

.toolbar-btn:hover {
    background: #e7dece;
}

.toolbar-btn i {
    color: #8b5e34;
}

.btn-label {
    font-size: 0.95em;
}

@media screen and (max-width: 600px) {
    .btn-label { display: none; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes animateBG {
    0% {
        background-position: 0%;
    }
    50% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}

@media screen and (max-width: 960px) {
    .app {
        flex-direction: column;
    }
    .hero-container {
        display: none;
    }
    .chat-container {
        position: relative;
    }
    .chat-header {
        display: flex;
        align-items: center;
        padding: 0 10px;
        position: absolute;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        left: 0;
        right: 0;
    }
    .chat-header img {
        height: 30px;
        margin: 0 10px;
    }

}

@media screen and (min-width: 1600px) {
    .app {
        width: 70%;
    }
}
/* Login section in explainer */
.login-section {
    width: 100%;
    max-width: 100%;
    margin-top: 28px; /* spacing from text above */
    padding: 20px;
    background: linear-gradient(135deg, #faf8f5 0%, #f5f1e8 100%);
    border-radius: 12px;
    border: 1px solid #e8dcc8;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Arrange username/password neatly on one row (stack on small screens) */
.login-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
}
.login-row .login-input {
    flex: 1 1 0;
    width: auto; /* override 100% to allow side-by-side layout */
    min-width: 0; /* allow shrinking inside flex row */
}
@media (max-width: 560px) {
    .login-row { flex-direction: column; }
    .login-row .login-input { width: 100%; }
}

.login-section h3 {
    margin: 0 0 2px 0;
    color: #3a2f24;
}

.login-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0d5c6;
    background: #ffffff;
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.login-input:focus {
    border-color: #c29b72;
    box-shadow: 0 0 0 4px rgba(194,155,114,0.15);
    transform: translateY(-1px);
}

.login-input::placeholder {
    color: #a89b87;
}

.login-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* buttons full width */
    gap: 6px; /* small space between button and feedback */
}

.login-button {
    padding: 14px 24px;
    background: linear-gradient(135deg, #c86b3c 0%, #b85a2c 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(200, 107, 60, 0.3);
    width: 100%;
    box-sizing: border-box;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Centered feedback below the (login/logout) button */
.login-info {
    display: block;
    text-align: center;
    font-size: 0.92em;
    line-height: 1.2;
    min-height: 1.2em;
    margin-top: 4px;
}

/* Theme colors for feedback states */
.login-info.ok { color: #6b5e4a; }
.login-info.error { color: #b84a3a; }

.login-button:hover {
    background: linear-gradient(135deg, #d67845 0%, #c86b3c 100%);
    box-shadow: 0 6px 20px rgba(200, 107, 60, 0.4);
    transform: translateY(-2px);
}

.login-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(200, 107, 60, 0.3);
}

.login-note {
    color: #6b5e4a;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: #6b5e4a;
}

/* Small top icons for chat bubbles */
.message-header i {
    color: #8b5e34;
    font-size: 0.9em; /* small icon */
    line-height: 1;
}

.message-content {
    font-size: 0.98em;
}

/* Feedback bar for AI messages */
.bot-message .feedback {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    opacity: 0.35; /* subtle by default */
    transition: opacity 0.2s ease;
}

.bot-message:hover .feedback {
    opacity: 0.85; /* more visible on hover */
}

.feedback button {
    background: transparent;
    border: none;
    color: #8b5e34;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 0.9em;
}

.feedback button:hover {
    background: rgba(139, 94, 52, 0.08);
}

.feedback .thumb-up i::before {
    content: "\f164"; /* fa-thumbs-up (regular) fallback if JS delayed */
}

.feedback .thumb-down i::before {
    content: "\f165"; /* fa-thumbs-down (regular) fallback if JS delayed */
}

/* Sticky status footer (flex item at bottom, always visible) */
.status-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h);
    background: rgba(239, 231, 218, 0.9);
    border-top: 1px solid #d2c7b8;
    padding: 6px 12px;
    /* respect device bottom safe area */
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    color: #3a2f24;
    font-size: 0.9rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between; /* status on the left, version on the right */
    z-index: 100;
}

/* Subtle pulse effect for status updates (non-intrusive) */
.status-footer #status-text {
    transition: color 0.25s ease, background-color 0.25s ease;
}

@keyframes statusPulse {
    0%   { background-color: transparent; }
    50%  { background-color: rgba(139, 94, 52, 0.14); }
    100% { background-color: transparent; }
}

.status-footer #status-text.status-pulse {
    border-radius: 6px;
    padding: 2px 6px;
    animation: statusPulse 1.2s ease-in-out 1;
}

/* Version text on the right side of the footer */
.status-footer #version-text {
    margin-left: 12px;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}


/* Chat bubble layout: place icon margin on the left and text in the main area */
/* Grid with a narrow left gutter (icon + vertical feedback) and a wide right column for text */
.message {
    display: grid;
    grid-template-columns: 28px 1fr; /* left icon gutter + main text */
    column-gap: 10px;
    row-gap: 8px; /* a bit more space between time, text, and controls */
    align-items: start; /* ensure text starts at the top of the bubble */
}

/* Left-side icon at the top of the gutter */
.message-header {
    grid-column: 1;
    grid-row: 1;
    margin: 0; /* override bottom margin from earlier rule */
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Only show the icon from the header; hide header labels to save space */
.message-header strong,
.message-header span {
    display: none;
}

/* Ensure the icon looks crisp in the left gutter */
.message-header i {
    font-size: 1.05em; /* slightly larger for clarity */
    color: #8b5e34;
}

/* Main text content spans full width under the header/time row so it aligns with the left edge of the bubble */
.message-content {
    grid-column: 1 / -1; /* start at the left edge of the bubble, below the icon */
    grid-row: 2;
}

/* Code blocks and inline code (Markdown rendering) */
.message-content pre {
    margin: 0.4em 0;
    padding: 10px 12px;
    border-radius: 10px;
    overflow: auto;
    background: #f0ebe2;   /* light sand bg for light theme */
    border: 1px solid #d2c7b8;
}
.message-content pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.message-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.message-content code {
    background: #f4efe7;
    padding: 2px 5px;
    border-radius: 6px;
    border: 1px solid #e0d5c6;
}

/* Harmonize highlight.js block base even if external theme differs */
.message-content .hljs {
    background: transparent; /* we style the pre instead */
    color: #2b2b2b;
}

/* Timestamp shown at the top of the chat bubble */
.message-time {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    font-size: 0.75em;
    color: #6b5e4a;
    opacity: 0.7;
    margin-bottom: 6px; /* extra spacing below the time */
}

/* Bot feedback (thumbs) goes into the left gutter below the icon, stacked vertically */
.bot-message .feedback {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;  /* vertical: up above down */
    align-items: center;
    gap: 2px; /* tighter spacing to reduce bubble height */
    margin-top: 0; /* remove extra gap under the icon */
    opacity: 0.45; /* subtle by default (slightly more visible than before) */
}

.bot-message:hover .feedback { opacity: 0.9; }

/* Hide any text labels inside feedback buttons; show only icons */
.feedback button span { display: none; }

/* Make feedback icons slightly larger for clarity in the narrow gutter */
.feedback button i { font-size: 0.9em; }

/* Reduce bottom padding for bot bubbles to cut empty space */
.bot-message { padding-bottom: 4px; }

/* Typing/thinking indicator inside bot bubble while generating */
.typing-indicator {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
}

.typing-indicator .dot {
    width: 6px;
    height: 6px;
    background: #8b5e34;
    opacity: 0.25;
    border-radius: 50%;
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(1) { animation-delay: 0s; }
.typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.25; }
    40% { transform: translateY(-4px); opacity: 0.9; }
}


/* --- Bot feedback repositioning: bottom-right, small square buttons --- */
/* Use three rows: time (row 1), content (row 2 grows), controls (row 3 bottom) */
.message {
    grid-template-rows: auto 1fr auto; /* ensure feedback sticks to bottom */
}

/* Place bot feedback at the bottom-right of the bubble with a small gap from text */
.bot-message .feedback {
    grid-column: 2;           /* right (text) column */
    grid-row: 3;              /* controls row at the bottom */
    justify-self: end;        /* align to the right edge */
    align-self: end;          /* stick to the bottom of its row */
    display: inline-flex;     /* horizontal row of buttons */
    flex-direction: row;
    gap: 6px;                 /* small spacing between buttons */
    margin-top: 4px;          /* small gap from the text */
    opacity: 0.6;             /* subtle by default */
}

.bot-message:hover .feedback { opacity: 0.9; }

/* Small, square buttons ~30x30px; keep icon aspect ratio centered */
.bot-message .feedback button {
    width: 30px;
    height: 30px;
    padding: 0;               /* square box without internal padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;       /* subtle rounding to match theme */
}

/* --- Markdown/content typography inside chat bubbles --- */
/* Ensure strong text remains inline so list titles like "Term: description" stay on one line */
.message-content strong {
    display: inline;
    font-size: 1em;  /* match surrounding text */
    margin: 0;
    font-weight: 600;
}

/* Tighter, consistent spacing for lists rendered by Markdown */
.message-content ul,
.message-content ol {
    padding-left: 1.2em;      /* standard indent */
    margin: 0.05em 0;         /* minimal gaps around lists */
}

.message-content li {
    margin: 0.05em 0;         /* minimal gap between list items */
}

.message-content p {
    margin: 0.25em 0;         /* compact spacing between paragraphs */
}

/* Remove margin from first and last paragraphs */
.message-content p:first-child {
    margin-top: 0;
}

.message-content p:last-child {
    margin-bottom: 0;
}

/* Reduce excessive spacing from empty paragraphs */
.message-content p:empty {
    display: none;
}

/* Tighten consecutive br tags */
.message-content br + br {
    display: none;
}

/* Description lists (if the model emits them) */
.message-content dl { margin: 0.15em 0; }
.message-content dt { font-weight: 600; margin: 0.1em 0; }
.message-content dd { margin: 0 0 0.15em 1.2em; }

/* Compact header spacing inside message bubbles */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin: 0.3em 0 0.2em 0;
}

.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child,
.message-content h4:first-child,
.message-content h5:first-child,
.message-content h6:first-child {
    margin-top: 0;
}

.bot-message .feedback button i {
    font-size: 16px;          /* fits well inside 30x30 */
    line-height: 1;           /* avoid vertical overflow */
}


/* --- Feedback reasons panel styles (downvote) ---
   Fix overlapping reason buttons by overriding the generic 30x30 feedback button rules. */
.bot-message .feedback .feedback-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    /* keep it aligned with the thumbs on the right */
    justify-content: flex-end;
}

/* Ensure reason buttons are sized for text, not the 30x30 icon size */
.bot-message .feedback .feedback-reasons .reason-option,
.bot-message .feedback .reason-option {
    width: auto !important;
    height: auto !important;
    padding: 4px 10px;
    background: rgba(139, 94, 52, 0.08);
    border: 1px solid rgba(139, 94, 52, 0.25);
    border-radius: 12px;
    font-size: 0.85em;
    color: #3a2f24;
    cursor: pointer;
}

.bot-message .feedback .feedback-reasons .reason-option:hover,
.bot-message .feedback .reason-option:hover {
    background: rgba(139, 94, 52, 0.15);
}

/* Provide clear focus ring for keyboard accessibility */
.bot-message .feedback .feedback-reasons .reason-option:focus-visible,
.bot-message .feedback .reason-option:focus-visible {
    outline: 2px solid #8b5e34;
    outline-offset: 2px;
}

/* --- Persistent voted state for thumbs --- */
.bot-message .feedback.voted-up,
.bot-message .feedback.voted-down {
    opacity: 0.95; /* make the bar a bit more visible when a vote exists */
}

/* Highlight the selected thumb with a soft tint */
.bot-message .feedback.voted-up .thumb-up,
.bot-message .feedback.voted-down .thumb-down {
    background: rgba(139, 94, 52, 0.15);
    box-shadow: 0 0 0 1px rgba(139, 94, 52, 0.25) inset;
}

/* Keep hover a touch stronger but respectful */
.bot-message .feedback.voted-up .thumb-up:hover,
.bot-message .feedback.voted-down .thumb-down:hover {
    background: rgba(139, 94, 52, 0.22);
}

/* Disabled state for thumbs */
.bot-message .feedback button:disabled {
    cursor: not-allowed;
    opacity: 0.6; /* still visible but indicates waiting */
}


/* --- Top banner link visibility improvements --- */
.banner-actions { display: flex; align-items: center; gap: 8px; }
.top-banner .project-link {
    color: #3a2f24; /* brand dark for good contrast on light banner */
    font-size: 1rem; /* slightly larger than before (0.9rem) */
    font-weight: 500; /* subtle emphasis */
    text-decoration: none;
    padding: 4px 8px; /* comfortable hit area */
    border-radius: 6px;
    line-height: 1.2;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.top-banner .project-link:hover {
    text-decoration: underline; /* clear hover affordance */
    background-color: rgba(58, 47, 36, 0.06); /* very subtle tint */
}
.top-banner .project-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(194, 155, 114, 0.35); /* accessible focus ring */
    background-color: rgba(58, 47, 36, 0.08);
}
@media (max-width: 480px) {
    .top-banner .project-link { font-size: 0.95rem; padding: 3px 6px; }
}

/* Header action area tweaks for copy/clear buttons */
.banner-actions { display: flex; align-items: center; gap: 12px; }
.header-tools { display: inline-flex; gap: 8px; align-items: center; }
.project-link { color: #8b5e34; text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.project-link:hover { background: rgba(139,94,52,0.08); }

/* ===================== */
/* Dark theme overrides  */
/* Applied when <html data-theme="dark"> */
/* ===================== */

html[data-theme="dark"] body::after {
    background-image: linear-gradient(-45deg, #18130f 0%, #201912 25%, #2a2018 50%, #3a2b20 100%);
}

html[data-theme="dark"] h1 { color: #f2e8dc; }

html[data-theme="dark"] .top-banner {
    background: rgba(26, 22, 18, 0.85);
    border-bottom: 1px solid #3b3127;
}
html[data-theme="dark"] .app-title { color: #f0e7da; }
html[data-theme="dark"] .sidebar-toggle { color: #f0e7da; }

html[data-theme="dark"] .theme-select {
    background: #1f1b16;
    border-color: #3b3127;
    color: #e9dfd2;
}
html[data-theme="dark"] .theme-select:focus { box-shadow: 0 0 0 3px rgba(255, 211, 166, 0.2); }

html[data-theme="dark"] .sidebar {
    background: #1e1a15;
    border-right: 1px solid #3b3127;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    /* Dark theme sidebar tone tokens */
    --sb-text: #b9ae9d;
    --sb-muted: #a99e8e;
    --sb-heading: #c7bdad;
    --sb-tab: #9e9383;
    --sb-tab-selected: #c2b7a6;
    --sb-link: #bf965f;
    --sb-link-hover: #d3a36f;
}
html[data-theme="dark"] .explainer { background-color: #1e1a15; color: var(--sb-muted); }
html[data-theme="dark"] .explainer a { color: var(--sb-link); }
/* Slightly stronger shadow to keep the icon readable on dark background */
html[data-theme="dark"] .about-logo {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
html[data-theme="dark"] .tablist { border-bottom-color: #3b3127; }
html[data-theme="dark"] .tab { color: var(--sb-tab); }
html[data-theme="dark"] .tab[aria-selected="true"] {
    background: #242018;
    border-color: #3b3127;
    color: var(--sb-tab-selected);
}
html[data-theme="dark"] .tab:focus { box-shadow: 0 0 0 3px rgba(255, 211, 166, 0.2); }
html[data-theme="dark"] .first-use { color: var(--sb-muted); }
html[data-theme="dark"] .first-use h3 { color: var(--sb-heading); }
html[data-theme="dark"] .first-use a { color: var(--sb-link); }
html[data-theme="dark"] .first-use a:hover { color: var(--sb-link-hover); }

/* Location tab — dark theme tweaks */
html[data-theme="dark"] .location-card {
    background: #1f1a15;           /* deep panel to match dark sidebar */
    border-color: #3b3127;         /* subtle warm border */
    color: var(--sb-text);         /* readable body text */
}
html[data-theme="dark"] .location-card-header { color: var(--sb-heading); }
html[data-theme="dark"] .location-card-title { color: var(--sb-heading); }
html[data-theme="dark"] .location-card-body { color: var(--sb-text); }

html[data-theme="dark"] .chat-container {
    background-color: #151311;
    box-shadow: 0 0 14px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .messages { scrollbar-color: #5c4a3a #151311; }

html[data-theme="dark"] .message { color: #efe6da; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
html[data-theme="dark"] .message strong { color: #d9c6ae; }
html[data-theme="dark"] .user-message { background: #2a3127; }
html[data-theme="dark"] .bot-message { background: #262019; }

html[data-theme="dark"] .message-header i { color: #e2b07c; }
html[data-theme="dark"] .message-time { color: #c9b79f; }
html[data-theme="dark"] .message-content pre {
    background: #1b1713;
    border-color: #3b3127;
}
html[data-theme="dark"] .message-content code {
    background: #221c16;
    border-color: #3b3127;
    color: #efe6da;
}
html[data-theme="dark"] .message-content .hljs { color: #efe6da; }

html[data-theme="dark"] .input-card {
    background: rgba(24, 21, 18, 0.95);
    border-color: #3b3127;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .question {
    background: #161310;
    color: #efe6da;
    border-color: #3b3127;
}
html[data-theme="dark"] .question::placeholder { color: #a28f79; }
html[data-theme="dark"] .question:focus { border-color: #7b5d3c; box-shadow: 0 0 0 3px rgba(123,93,60,0.25); }

html[data-theme="dark"] .upload-indicator {
    background-color: #1f1a15;
    color: #e7ddcf;
    border-color: #3b3127;
}
html[data-theme="dark"] .upload-indicator i { color: #e2b07c; }
html[data-theme="dark"] .char-counter { color: #c9b79f; }
html[data-theme="dark"] .char-counter.warn { color: #e0905d; }

/* Buttons */
html[data-theme="dark"] .send-button {
    background: #2b231b;
    color: #f0e7da;
    border: 1px solid #3b3127;
}
html[data-theme="dark"] .send-button:hover { background: #3a2f24; }
html[data-theme="dark"] .send-button:disabled,
html[data-theme="dark"] .send-button[aria-disabled="true"] {
    background: #221b15;
    color: #9d8a73;
    border-color: #32281f;
}

html[data-theme="dark"] .upload-button {
    background: #2b231b;
    color: #f0e7da;
    border: 1px solid #3b3127;
}
html[data-theme="dark"] .upload-button:hover { background: #3a2f24; }
html[data-theme="dark"] .upload-button:disabled,
html[data-theme="dark"] .upload-button[aria-disabled="true"] {
    background: #221b15;
    color: #9d8a73;
    border-color: #32281f;
}

/* Header toolbar buttons */
html[data-theme="dark"] .toolbar-btn {
    background: #2b231b;
    color: #e9dfd2;
    border: 1px solid #3b3127;
}
html[data-theme="dark"] .toolbar-btn:hover { background: #3a2f24; }
html[data-theme="dark"] .toolbar-btn i { color: inherit; }

/* Dark theme: red-tinted logout button */
html[data-theme="dark"] .btn-logout {
    color: #ff6b6b; /* brighter red for dark bg */
    border-color: rgba(255, 107, 107, 0.35);
}
html[data-theme="dark"] .btn-logout:hover {
    background: rgba(255, 107, 107, 0.14);
}

/* Login page dark theme */
html[data-theme="dark"] #login-page.login-page {
    background: linear-gradient(135deg, #1a1612 0%, #0f0d0b 100%);
}

html[data-theme="dark"] .login-explainer {
    background: #1f1a15;
    border-color: #3b3127;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .login-title {
    color: #e9dfd2;
}

html[data-theme="dark"] .login-description {
    color: #c9b79f;
}

html[data-theme="dark"] .login-description a {
    color: #e2b07c;
}

html[data-theme="dark"] .login-description a:hover {
    color: #f0c992;
}

html[data-theme="dark"] .login-privacy {
    color: #a89b87;
    border-top-color: #3b3127;
}

html[data-theme="dark"] .login-section {
    background: linear-gradient(135deg, #161310 0%, #1f1a15 100%);
    border-color: #3b3127;
}

/* Login buttons */
html[data-theme="dark"] .login-button {
    background: linear-gradient(135deg, #d67845 0%, #c86b3c 100%);
    box-shadow: 0 4px 12px rgba(214, 120, 69, 0.3);
}
html[data-theme="dark"] .login-button:hover {
    background: linear-gradient(135deg, #e88652 0%, #d67845 100%);
    box-shadow: 0 6px 20px rgba(214, 120, 69, 0.4);
}

/* Feedback bar */
html[data-theme="dark"] .feedback button { color: #e2b07c; }
html[data-theme="dark"] .feedback button:hover { background: rgba(226, 176, 124, 0.14); }
html[data-theme="dark"] .bot-message .feedback .feedback-reasons .reason-option,
html[data-theme="dark"] .bot-message .feedback .reason-option {
    background: rgba(226, 176, 124, 0.12);
    border-color: rgba(226, 176, 124, 0.35);
    color: #f0e7da;
}
html[data-theme="dark"] .bot-message .feedback .feedback-reasons .reason-option:hover,
html[data-theme="dark"] .bot-message .feedback .reason-option:hover {
    background: rgba(226, 176, 124, 0.2);
}

/* Login inputs (username/password) — ensure readability in dark mode */
html[data-theme="dark"] .login-input {
    background: #161310;
    color: #efe6da;
    border: 1px solid #3b3127;
    outline: none;
}
html[data-theme="dark"] .login-input::placeholder { color: #a28f79; }
html[data-theme="dark"] .login-input:focus {
    border-color: #7b5d3c;
    box-shadow: 0 0 0 3px rgba(123,93,60,0.25);
}
/* Optional: login info text contrast */
html[data-theme="dark"] .login-info { color: #c9b79f; }

/* Status footer */
html[data-theme="dark"] .status-footer {
    background: rgba(26, 22, 18, 0.85);
    border-top: 1px solid #3b3127;
    color: #e9dfd2;
}
html[data-theme="dark"] @keyframes statusPulse {
    0%   { background-color: transparent; }
    50%  { background-color: rgba(226, 176, 124, 0.18); }
    100% { background-color: transparent; }
}

/* Links in header */
html[data-theme="dark"] .top-banner .project-link { color: #e9dfd2; }
html[data-theme="dark"] .top-banner .project-link:hover { background-color: rgba(226,176,124,0.12); }
html[data-theme="dark"] .top-banner .project-link:focus-visible { box-shadow: 0 0 0 3px rgba(226, 176, 124, 0.35); background-color: rgba(226,176,124,0.12); }

/* Scrollbars (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #151311; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4a3a2c; border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5b4736; }

/* ----------------------------- */
/* Responsive tweaks for mobile  */
/* ----------------------------- */

@media (max-width: 768px) {
    .top-banner {
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .brand { gap: 6px; }
    .logo-small { height: 28px; }
    .app-title { font-size: 1.05rem; }
    .header-tools { flex-wrap: wrap; gap: 6px; }

    .content { padding-left: 6px; }
    /* Sidebar should still stretch between header and fixed footer on small screens */
    .sidebar { margin: 0; }
    .main-area { padding: 0 6px; }
    .chat-container { padding: 0 12px; }
    .messages {
        padding: 12px 6px calc(72px + env(safe-area-inset-bottom, 0px)) 6px;
        gap: 6px;
    }
    .message { max-width: 88%; }

    .input-container {
        margin: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
        gap: 8px;
    }
    .input-card { padding: 6px; }
    .input-actions { flex-wrap: wrap; row-gap: 8px; }
    .actions-group { flex-wrap: wrap; }
    .upload-indicator { max-width: 60vw; }

    .chat-toolbar { flex-wrap: wrap; gap: 8px; }
    .toolbar-right { flex-wrap: wrap; gap: 6px; }

    .status-footer { padding: 6px 10px; font-size: 0.88rem; }
}

@media (max-width: 480px) {
    .logo-small { height: 24px; }
    .app-title { font-size: 0.98rem; }
    .chat-container { padding: 0 8px; }
    .messages { padding: 10px 4px calc(68px + env(safe-area-inset-bottom, 0px)) 4px; }
    .message { max-width: 94%; padding: 8px 10px; }
    .message-content pre { font-size: 0.92em; }
    .question { padding: 10px 12px; max-height: 120px; }
    .send-button, .upload-button { width: 38px; height: 38px; }
    .location-panel #map { height: 220px; }
}

/* ----------------------------- */
/* Link Icons for Wikipedia and Catalog */
/* ----------------------------- */

/* Wikipedia links - add "W" icon */
.message-content a[href*="wikipedia.org"]::before {
    content: "W";
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    margin-right: 5px;
    font-size: 11px;
    font-weight: 700;
    font-family: system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #0066cc 0%, #0055aa 100%);
    color: white;
    border-radius: 3px;
    vertical-align: middle;
    opacity: 0.85;
}

/* SoilWise catalog links - add "S" icon */
.message-content a[href*="repository.soilwise-he.eu"]::before,
.message-content a[href*="soilwise-he"]::before {
    content: "S";
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    margin-right: 5px;
    font-size: 11px;
    font-weight: 700;
    font-family: system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #7b5d3c 0%, #5a4229 100%);
    color: white;
    border-radius: 3px;
    vertical-align: middle;
    opacity: 0.85;
}

/* Vocabulary links - add "V" icon */
.message-content a[href*="voc.soilwise-he"]::before {
    content: "V";
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    margin-right: 5px;
    font-size: 11px;
    font-weight: 700;
    font-family: system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #2d7d2d 0%, #1f5f1f 100%);
    color: white;
    border-radius: 3px;
    vertical-align: middle;
    opacity: 0.85;
}

/* Style Wikipedia links with distinct color */
.message-content a[href*="wikipedia.org"] {
    color: #0066cc;
    border-bottom: 1px solid rgba(0, 102, 204, 0.3);
    text-decoration: none;
}

.message-content a[href*="wikipedia.org"]:hover {
    color: #004499;
    border-bottom-color: rgba(0, 68, 153, 0.5);
    background-color: rgba(0, 102, 204, 0.05);
}

/* Style SoilWise catalog links with distinct color */
.message-content a[href*="repository.soilwise-he.eu"],
.message-content a[href*="soilwise-he"] {
    color: #7b5d3c;
    border-bottom: 1px solid rgba(123, 93, 60, 0.3);
    text-decoration: none;
}

.message-content a[href*="repository.soilwise-he.eu"]:hover,
.message-content a[href*="soilwise-he"]:hover {
    color: #5a4229;
    border-bottom-color: rgba(90, 66, 41, 0.5);
    background-color: rgba(123, 93, 60, 0.05);
}

/* Style Vocabulary links with distinct green color */
.message-content a[href*="voc.soilwise-he"] {
    color: #2d7d2d;
    border-bottom: 1px solid rgba(45, 125, 45, 0.3);
    text-decoration: none;
}

.message-content a[href*="voc.soilwise-he"]:hover {
    color: #1f5f1f;
    border-bottom-color: rgba(31, 95, 31, 0.5);
    background-color: rgba(45, 125, 45, 0.05);
}

/* Dark mode adjustments for link badges and colors */
html[data-theme="dark"] .message-content a[href*="wikipedia.org"]::before {
    background: linear-gradient(135deg, #5b9ed9 0%, #4a8bc7 100%);
    opacity: 0.9;
}

html[data-theme="dark"] .message-content a[href*="repository.soilwise-he.eu"]::before,
html[data-theme="dark"] .message-content a[href*="soilwise-he"]::before {
    background: linear-gradient(135deg, #c89860 0%, #b07d45 100%);
    opacity: 0.9;
}

html[data-theme="dark"] .message-content a[href*="voc.soilwise-he"]::before {
    background: linear-gradient(135deg, #5fad5f 0%, #4a9a4a 100%);
    opacity: 0.9;
}

html[data-theme="dark"] .message-content a[href*="wikipedia.org"] {
    color: #6ba4e0;
    border-bottom-color: rgba(107, 164, 224, 0.3);
}

html[data-theme="dark"] .message-content a[href*="wikipedia.org"]:hover {
    color: #8fb9e8;
    border-bottom-color: rgba(143, 185, 232, 0.5);
    background-color: rgba(107, 164, 224, 0.1);
}

html[data-theme="dark"] .message-content a[href*="repository.soilwise-he.eu"],
html[data-theme="dark"] .message-content a[href*="soilwise-he"] {
    color: #d4a574;
    border-bottom-color: rgba(212, 165, 116, 0.3);
}

html[data-theme="dark"] .message-content a[href*="repository.soilwise-he.eu"]:hover,
html[data-theme="dark"] .message-content a[href*="soilwise-he"]:hover {
    color: #e2b685;
    border-bottom-color: rgba(226, 182, 133, 0.5);
    background-color: rgba(212, 165, 116, 0.1);
}

html[data-theme="dark"] .message-content a[href*="voc.soilwise-he"] {
    color: #6bc46b;
    border-bottom-color: rgba(107, 196, 107, 0.3);
}

html[data-theme="dark"] .message-content a[href*="voc.soilwise-he"]:hover {
    color: #82d682;
    border-bottom-color: rgba(130, 214, 130, 0.5);
    background-color: rgba(107, 196, 107, 0.1);
}

/* Ensure all links in message content have consistent padding and transitions */
.message-content a {
    padding: 1px 3px;
    border-radius: 3px;
    transition: all 0.2s ease;
    display: inline;
}

/* ----------------------------- */
/* Insight Panel Styles */
/* ----------------------------- */

.insight-panel {
    padding: 16px;
}

.insight-description {
    margin: 0 0 20px 0;
    color: #6b5e4a;
    font-size: 0.9rem;
}

.insight-card {
    background: #f9f7f4;
    border: 1px solid #e0d5c6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.insight-card:last-child {
    margin-bottom: 0;
}

.insight-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #4b3b2e;
}

.insight-card-header i {
    font-size: 1.1rem;
}

.insight-card-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.insight-card-body {
    color: #5a4f3e;
    font-size: 0.88rem;
    line-height: 1.5;
}

.insight-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-links-list li {
    margin-bottom: 8px;
}

.insight-links-list li:last-child {
    margin-bottom: 0;
}

.insight-links-list a {
    color: #5a7a95;
    text-decoration: none;
    transition: color 0.2s;
    word-break: break-word;
}

.insight-links-list a:hover {
    color: #3a5a75;
    text-decoration: underline;
}

/* ----------------------------- */
/* Options Panel Styles (Legacy - kept for backward compatibility) */
/* ----------------------------- */

.options-panel {
    padding: 16px;
}

.options-panel h3 {
    margin: 0 0 8px 0;
    color: #3a2f24;
    font-size: 1.2rem;
}

.options-description {
    margin: 0 0 20px 0;
    color: #6b5e4a;
    font-size: 0.9rem;
}

.options-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0d5c6;
}

.options-section:last-of-type {
    border-bottom: none;
}

.options-section h4 {
    margin: 0 0 12px 0;
    color: #4b3b2e;
    font-size: 1rem;
    font-weight: 600;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
}

.option-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #7b5d3c;
}

.option-item span {
    color: #3a2f24;
    font-size: 0.95rem;
}

.option-item:hover span {
    color: #2b231b;
}

.option-hint {
    margin: 4px 0 0 28px;
    color: #8a7d6a;
    font-size: 0.85rem;
    font-style: italic;
}

.options-notice {
    background: #f4efe7;
    border: 1px solid #d2c7b8;
    border-radius: 8px;
    padding: 12px;
    margin-top: 20px;
}

.options-notice p {
    margin: 0;
    color: #5a4f3e;
    font-size: 0.88rem;
}

.options-notice strong {
    color: #3a2f24;
}

#option-reset-btn {
    width: 100%;
    padding: 10px;
    background: #7b5d3c;
    color: white;
    border: 1px solid #5a4229;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
}

#option-reset-btn:hover {
    background: #5a4229;
}

/* Dark mode for options panel */
html[data-theme="dark"] .options-panel h3 {
    color: #f0e7da;
}

html[data-theme="dark"] .options-description {
    color: #b8a890;
}

html[data-theme="dark"] .options-section {
    border-bottom-color: #3b3127;
}

html[data-theme="dark"] .options-section h4 {
    color: #e2d5c4;
}

html[data-theme="dark"] .option-item span {
    color: #efe6da;
}

html[data-theme="dark"] .option-item:hover span {
    color: #ffffff;
}

html[data-theme="dark"] .option-item input[type="checkbox"] {
    accent-color: #c89860;
}

html[data-theme="dark"] .option-hint {
    color: #9a8f7d;
}

html[data-theme="dark"] .options-notice {
    background: #2b231b;
    border-color: #3b3127;
}

html[data-theme="dark"] .options-notice p {
    color: #c9b79f;
}

html[data-theme="dark"] .options-notice strong {
    color: #f0e7da;
}

html[data-theme="dark"] #option-reset-btn {
    background: #c89860;
    border-color: #b07d45;
}

html[data-theme="dark"] #option-reset-btn:hover {
    background: #b07d45;
}

/* Dark theme for insight panel */
html[data-theme="dark"] .insight-description {
    color: #b8a890;
}

html[data-theme="dark"] .insight-card {
    background: #1f1a15;
    border-color: #3b3127;
}

html[data-theme="dark"] .insight-card-header {
    color: #e2d5c4;
}

html[data-theme="dark"] .insight-card-body {
    color: #c9b79f;
}

html[data-theme="dark"] .insight-links-list a {
    color: #bf965f;
}

html[data-theme="dark"] .insight-links-list a:hover {
    color: #d3a36f;
}

html[data-theme="dark"] .vocab-related-section {
    border-top-color: #3b3127 !important;
}

html[data-theme="dark"] .vocab-related-section h5 {
    color: #e2d5c4 !important;
}

/* ----------------------------- */
/* Vocabulary Chips Styles */
/* ----------------------------- */

.vocab-chips-container {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 0;
    overflow: hidden;
}

.vocab-chips-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #d2c7b8 transparent;
    padding: 2px 0;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.vocab-chips-scroll::-webkit-scrollbar {
    height: 4px;
}

.vocab-chips-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.vocab-chips-scroll::-webkit-scrollbar-thumb {
    background: #d2c7b8;
    border-radius: 2px;
}

.vocab-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f4efe7;
    border: 1px solid #d2c7b8;
    border-radius: 16px;
    color: #4b3b2e;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.vocab-chip:hover {
    background: #e9e1d4;
    border-color: #b8a890;
    transform: translateY(-1px);
}

.vocab-chip i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Dark theme for vocab chips */
html[data-theme="dark"] .vocab-chips-scroll {
    scrollbar-color: #3b3127 transparent;
}

html[data-theme="dark"] .vocab-chips-scroll::-webkit-scrollbar-thumb {
    background: #3b3127;
}

html[data-theme="dark"] .vocab-chip {
    background: #2b231b;
    border-color: #3b3127;
    color: #e9dfd2;
}

html[data-theme="dark"] .vocab-chip:hover {
    background: #3a2f24;
    border-color: #5c4a3a;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .vocab-chip {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}

/* ----------------------------- */
/* CSS Classes for Controlling Link Display */
/* ----------------------------- */

/* Disable Wikipedia links when disabled - show text as plain text */
.hide-wikipedia-links .message-content a[href*="wikipedia.org"] {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
    cursor: text;
    pointer-events: none;
}

.hide-wikipedia-links .message-content a[href*="wikipedia.org"]::before {
    display: none !important;
}

/* Disable Vocabulary links when disabled - show text as plain text */
.hide-vocab-links .message-content a[href*="voc.soilwise-he"] {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
    cursor: text;
    pointer-events: none;
}

.hide-vocab-links .message-content a[href*="voc.soilwise-he"]::before {
    display: none !important;
}

/* Hide all link icons when disabled */
.hide-link-icons .message-content a[href*="wikipedia.org"]::before,
.hide-link-icons .message-content a[href*="repository.soilwise-he.eu"]::before,
.hide-link-icons .message-content a[href*="soilwise-he"]::before,
.hide-link-icons .message-content a[href*="voc.soilwise-he"]::before {
    display: none !important;
}

/* Use uniform colors when distinct colors are disabled - just underline, no color */
.uniform-link-colors .message-content a[href*="wikipedia.org"],
.uniform-link-colors .message-content a[href*="repository.soilwise-he.eu"],
.uniform-link-colors .message-content a[href*="soilwise-he"],
.uniform-link-colors .message-content a[href*="voc.soilwise-he"] {
    color: inherit;
    text-decoration: underline;
    border-bottom: none;
}

.uniform-link-colors .message-content a[href*="wikipedia.org"]:hover,
.uniform-link-colors .message-content a[href*="repository.soilwise-he.eu"]:hover,
.uniform-link-colors .message-content a[href*="soilwise-he"]:hover,
.uniform-link-colors .message-content a[href*="voc.soilwise-he"]:hover {
    color: inherit;
    text-decoration: underline;
    border-bottom: none;
    background-color: transparent;
}

/* Dark mode uniform colors - just underline, no color */
html[data-theme="dark"] .uniform-link-colors .message-content a[href*="wikipedia.org"],
html[data-theme="dark"] .uniform-link-colors .message-content a[href*="repository.soilwise-he.eu"],
html[data-theme="dark"] .uniform-link-colors .message-content a[href*="soilwise-he"],
html[data-theme="dark"] .uniform-link-colors .message-content a[href*="voc.soilwise-he"] {
    color: inherit;
    text-decoration: underline;
    border-bottom: none;
}

html[data-theme="dark"] .uniform-link-colors .message-content a[href*="wikipedia.org"]:hover,
html[data-theme="dark"] .uniform-link-colors .message-content a[href*="repository.soilwise-he.eu"]:hover,
html[data-theme="dark"] .uniform-link-colors .message-content a[href*="soilwise-he"]:hover,
html[data-theme="dark"] .uniform-link-colors .message-content a[href*="voc.soilwise-he"]:hover {
    color: inherit;
    text-decoration: underline;
    border-bottom: none;
    background-color: transparent;
}