/* Frontend/css/main-chat.css */

/* Import core styles */
@import './shared/chat-markdown-tables.6cd6ae0500cc.css';
@import './core/core-styles.d993febb0df6.css';
@import './components/chat-window-styles.1a2550e88cf2.css';
@import './core/search-styles.a52ea0ea382a.css';

/* Standalone-specific theme variables */
:root {
    /* Light theme variables */
    --background-color: #e7e5dc;
    --text-color: #333333;
    --sidebar-bg: #F3F2EB;
    --header-bg: #FAF9F6;
    --chat-bg: #FAF9F6;
    --input-bg: #f5f5f5;
    --input-field-bg: #f5f5f5;
    --border-color: #b4b4b4;
    --accent-color: #405062;
    --scroll-btn-bg: #405062;
    --message-user-bg: #dfe3e8;
    --send-button-bg: #405062;
    --message-user-color: #000;
    --message-bot-bg: #F3F2EB;
    --message-bot-color: #333333;
    --scrollbar-thumb: #c0c0c0;
    --scrollbar-track: rgb(243 242 235 / 50%) transparent;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --icon-color: #717171;
    --accent-color-rgb: 64, 80, 98; /* RGB equivalent of #405062 */
    --active-workflow-bg: #c6cbd0;
    --active-workfow-color: #000;
    --bot-message-link-text: blue;
    --code-block-bg: rgb(232 234 237 / 85%);
    --code-block-border: rgba(64, 80, 98, 0.2);
    --code-block-header-bg: rgba(96, 114, 143, 0.28);
    --code-block-font: #111827;
    --inline-code-bg: rgba(64, 80, 98, 0.12);
    --msg-table-wrap-bg: rgba(255, 255, 255, 0.72);
    --msg-table-head-bg: rgba(64, 80, 98, 0.12);
    --msg-table-row-alt-bg: rgba(64, 80, 98, 0.04);
    --msg-table-border: rgba(64, 80, 98, 0.18);
    --header-shadow-color: rgba(157, 151, 114, 0.3);
    --surface-hover-bg: rgba(64, 80, 98, 0.1);
    --special-loader-bg-color: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0) 100%);
    --fresh-input-bg: #f1f0ec;
    --fresh-input-field-bg: #f9f9f4;
    --fresh-input-border: rgba(64, 80, 98, 0.15);
    --fresh-input-shadow: rgba(64, 80, 98, 0.12);
    --fresh-input-pill-bg: rgba(64, 80, 98, 0.12);
    --fresh-input-muted: #5b5f63;
    --input-field-bg: #ffffffb5;
    --input-focus-bg: #ffffff;
    --input-focus-text: #2b2b2b;
    --input-focus-placeholder: #6b7280;
    --input-focus-icon: #2f3b49;
    --stt-regular-mic: #6a7886;
    --stt-regular-mic-hover: #405062;
    --stt-regular-mic-hover-bg: rgba(64, 80, 98, 0.12);
    --stt-regular-stop: #c0392b;
    --stt-regular-spinner: #405062;
    --stt-regular-visualizer: #7a8794;
    --stt-regular-mic-focus: #2f3b49;
    --stt-regular-mic-hover-focus: #1f2731;
    --stt-regular-mic-hover-bg-focus: rgba(64, 80, 98, 0.18);
    --stt-regular-spinner-focus: #2f3b49;
    --stt-regular-visualizer-focus: #405062;
    --stt-fresh-mic: #5f6b78;
    --stt-fresh-mic-hover: #405062;
    --stt-fresh-mic-hover-bg: rgba(64, 80, 98, 0.12);
    --stt-fresh-stop: #c0392b;
    --stt-fresh-spinner: #405062;
    --stt-fresh-visualizer: #6f7c89;
    --stt-fresh-mic-focus: #2f3b49;
    --stt-fresh-mic-hover-focus: #1f2731;
    --stt-fresh-mic-hover-bg-focus: rgba(64, 80, 98, 0.18);
    --stt-fresh-spinner-focus: #2f3b49;
    --stt-fresh-visualizer-focus: #405062;
    --attachment-bg: #eaebed;
}

body.dark-theme {
    /* Dark theme variables */
    --background-color: #1a1a1a;
    --text-color: #f0f0f0;
    --sidebar-bg: #2a2a2a;
    --header-bg: #2a2a2a;
    --chat-bg: #1a1a1a;
    --input-bg: #4f4f4f;
    --input-field-bg: #272629;
    --send-btn-bg: #fff;
    --border-color: #3a3a3a;
    --accent-color: #71a4df;
    --scroll-btn-bg: #ffffff8a;
    --message-user-bg: #3a3d42;
    --send-button-bg: #405062;
    --message-user-color: #ffffff;
    --message-bot-bg: #252528;
    --message-bot-color: #f0f0f0;
    --scrollbar-thumb: #a2a2a2;
    --scrollbar-track: rgb(42 42 42) transparent;;
    --shadow-color: rgba(0, 0, 0, 0.094);
    --icon-color: #d4d4d4;
    --accent-color-rgb: 74, 144, 226; /* RGB equivalent of #4a90e2 */
    --active-workflow-bg: rgba(113, 164, 223, 0.14);
    --active-workfow-color: #fff;
    --selected-item-bg: rgba(113, 164, 223, 0.18);
    --selected-item-border: rgba(113, 164, 223, 0.38);
    --selected-item-text: #8dbcf5;
    --selected-icon-bg: rgba(113, 164, 223, 0.2);
    --selected-icon-color: #8dbcf5;
    --code-block-bg: rgba(17, 24, 39, 0.85);
    --code-block-border: rgba(113, 164, 223, 0.24);
    --code-block-header-bg: rgba(96, 114, 143, 0.35);
    --code-block-font: #d7e3ff;
    --inline-code-bg: rgba(113, 164, 223, 0.16);
    --msg-table-wrap-bg: rgba(17, 24, 39, 0.62);
    --msg-table-head-bg: rgba(113, 164, 223, 0.16);
    --msg-table-row-alt-bg: rgba(113, 164, 223, 0.08);
    --msg-table-border: rgba(113, 164, 223, 0.18);
    --header-shadow-color: rgba(0, 0, 0, 0.55);
    --surface-hover-bg: rgba(113, 164, 223, 0.16);
    --bot-message-link-text: #72a2ee;
    --special-loader-bg-color: linear-gradient(120deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 42%) 45%, rgb(0 0 0 / 0%) 100%);
    --fresh-input-bg: #1f1f23;
    --fresh-input-field-bg: #2a2b30;
    --fresh-input-border: rgba(255, 255, 255, 0.08);
    --fresh-input-shadow: rgba(0, 0, 0, 0.55);
    --fresh-input-pill-bg: rgba(255, 255, 255, 0.08);
    --fresh-input-muted: #c7c7ce;
    --input-field-bg: #2a2a2ab5;
    --input-focus-bg: #ffffff;
    --input-focus-text: #2b2b2b;
    --input-focus-placeholder: #6b7280;
    --input-focus-icon: #2f3b49;
    --stt-regular-mic: #c1c7d0;
    --stt-regular-mic-hover: #ffffff;
    --stt-regular-mic-hover-bg: rgba(255, 255, 255, 0.12);
    --stt-regular-stop: #ff6b5f;
    --stt-regular-spinner: #ffffff;
    --stt-regular-visualizer: #b4bcc6;
    --stt-regular-mic-focus: #2f3b49;
    --stt-regular-mic-hover-focus: #1f2731;
    --stt-regular-mic-hover-bg-focus: rgba(47, 59, 73, 0.12);
    --stt-regular-spinner-focus: #2f3b49;
    --stt-regular-visualizer-focus: #2f3b49;
    --stt-fresh-mic: #c1c7d0;
    --stt-fresh-mic-hover: #ffffff;
    --stt-fresh-mic-hover-bg: rgba(255, 255, 255, 0.12);
    --stt-fresh-stop: #ff6b5f;
    --stt-fresh-spinner: #ffffff;
    --stt-fresh-visualizer: #b4bcc6;
    --stt-fresh-mic-focus: #2f3b49;
    --stt-fresh-mic-hover-focus: #1f2731;
    --stt-fresh-mic-hover-bg-focus: rgba(47, 59, 73, 0.12);
    --stt-fresh-spinner-focus: #2f3b49;
    --stt-fresh-visualizer-focus: #2f3b49;
    --attachment-bg: #29384a;
}

/* Standalone-specific styles */
body {
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 100vh;
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    padding: 0;
}

.message-container-bot .bot-message,
.internal-message-container .bot-message {
    background-color: var(--message-bot-bg);
    color: var(--message-bot-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.5rem;
    padding: 15px 20px;
    background: transparent;
    box-shadow: none;
    padding: 0 20px;
}

.message-container-bot.flight-widget-only .message.bot-message:empty {
    display: none;
    padding: 0;
    margin: 0;
}

.message-container-bot .bot-message p a {
    color: var(--bot-message-link-text);
}

.chat-area .message-container, .message-container-bot {
    padding: 0 10px;
}

.message-container-bot .bot-message pre {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 20px;
    border-radius: 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
}

.message-container-bot .bot-message pre code p {
    margin: -5px 0;
}

.message-container-bot .bot-message pre p {
    margin-bottom: -20px;
}

.message .msg-code-block {
    margin: 10px 0;
    border: 1px solid var(--code-block-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--code-block-bg);
}

.message .msg-code-header {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--code-block-font);
    background: var(--code-block-header-bg);
}

.message .msg-code-block pre {
    margin: 0;
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--code-block-font);
    background: transparent;
}

.message .msg-code-block code,
.message .msg-inline-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 400;
}

.message .msg-inline-code {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--inline-code-bg);
    font-size: 12px;
    color: var(--text-color);
}

.message-container-bot .bot-message .ui-resource-wrapper {
    width: 100%;
    min-width: 40rem;
}

.pricing-loader-container .pricing-loader-text::after {
    background: var(--special-loader-bg-color)
}


.language-selector-item:hover {
    font-size: 12px;
    color: #000;
    font-weight: normal;
}

.language-selector-item {
    font-size: 12px;
    color: #a5a5a5;
    font-weight: normal;
}

.language-selector-item i {
    color: #000;
}

.language-selector-item .active {
    font-weight: bold;
    text-decoration: underline;
    color: #000;
    font-weight: 700;
}

/* Language badge on user avatar */
.user-avatar {
    position: relative;
}

/* The photo (or fallback icon) on its own, WITHOUT the language badge and
   username that share the avatar column.

   This exists to anchor the presence dot. `.user-avatar` is a column — face,
   badge, username — so a dot positioned against it landed at the bottom of the
   column beside the username, while every other surface in the app draws it on
   the picture. The dot is `position: absolute` against `[data-presence-host]`,
   so the host has to be an element that is exactly the size of the face.

   `position: relative` is stated here rather than inherited from the
   `[data-presence-host]` rule in teams-video.css: that file is not loaded on
   every page that renders this header, and a face without a positioned ancestor
   sends the dot back to the column. */
.user-avatar-container .user-avatar__face {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Shrink-wrap the face so the dot sits on the image's own corner. */
    flex: 0 0 auto;
    line-height: 0;
}

.language-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #405062;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
    pointer-events: none;
}

body.dark-theme .language-badge {
    background-color: #4a90e2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Christmas hat decoration on user avatar */
html[data-seasonal-ui="enabled"] .user-avatar::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 42%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    background-image: url('/assets/christmas-hat-png-19607.e8f67fe51aa3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 15; /* Above the avatar and language badge */
    pointer-events: none; /* Allow clicks to pass through to avatar */
}

/* Subtle bounce animation on hover for festive effect */
@keyframes hat-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-2px);
    }
}

html[data-seasonal-ui="enabled"] .user-avatar:hover::before {
    animation: hat-bounce 0.6s ease-in-out infinite;
}

.message-container .user-message {
    background-color: var(--message-user-bg);
    color: var(--message-user-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 5px 0 0 auto;
}

/* ── Sent-message attachment chips (shown above user bubble) ─────── */
.message-container.user-message-container .message-attachments {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    flex-basis: 100%;
    gap: 5px;
    margin: 5px 0 0 auto;
    padding: 0 4px;
    box-sizing: border-box;
}

.message-container.user-message-container .message-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 12px;
    font-size: 11px;
    /* background: var(--selected-item-bg); */
    background-color: var(--attachment-bg, #eaebed);
    color: var(--text-color, #374151);
    max-width: 180px;
    overflow: hidden;
}

.message-container.user-message-container .message-attachment-chip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-container.user-message-container .message-attachment-chip i {
    font-size: 12px;
    flex-shrink: 0;
    color: #6b7280;
}

.message-container.user-message-container .message-attachment-chip .fa-file-pdf  { color: #e3342f; }
.message-container.user-message-container .message-attachment-chip .fa-file-csv  { color: #16a34a; }
.message-container.user-message-container .message-attachment-chip .fa-file-word { color: #2563eb; }
.message-container.user-message-container .message-attachment-chip .fa-image     { color: #7c3aed; }

.app-container {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.app-container .cost-limit-notification {
    margin: auto !important;
}

.sidebar.collapsed .workflow-item {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    margin-bottom: 10px;
}

.user-dropdown .dropdown-item:hover {
    background-color: #e0e0e0;
}

.user-dropdown .dropdown-item {
    background: white;
    z-index: 10000;
    position: relative;
}

.sidebar.collapsed .workflow-content {
    display: none;
}

.sidebar.collapsed .workflow-icon {
    margin-right: 0;
    width: 32px;
    height: 32px;
    background-color: transparent;
}

/* Sidebar Styles */
.sidebar {
    width: 260px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    height: 100vh;
    overflow-y: auto; /* Make the entire sidebar scrollable */
}

.sidebar.collapsed {
    width: 60px;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-header h2 {
    display: none;
}

.sidebar.collapsed .workflows-list {
    /* display: flex !important; */
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    max-height: 100%;
    box-shadow: none;
}

.sidebar-header h2 {
    font-size: 1.2em;
    color: var(--text-color);
    margin: 0;
    padding: 8px 15px;
}

.sidebar.collapsed .sidebar-toggle {
    margin: 0 auto;
    padding: 10px 0;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 15px 0;
}

.sidebar-header {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    height: 65px;
    box-shadow: 0 2px 4px var(--header-shadow-color);
    z-index: 10;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 16px;
}

.workflows-list {
    flex: 1 1 auto; /* Allow flexible resizing */
    padding: 10px;
    overflow-y: auto; /* Enable scrolling when content overflows */
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    min-height: 100px; /* Minimum height to prevent collapse */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.workflow-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.workflow-item:hover {
    background-color: var(--surface-hover-bg);
    color: var(--text-color);
}

.sidebar.collapsed .workflow-item.active {
    background-color: var(--border-color);
    color: var(--text-color);
    padding: 20px;
}

.workflow-item.active {
    background-color: var(--active-workflow-bg, #c6cbd0);
    color: var(--active-workfow-color, #000)
}

.workflow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: var(--border-color);
    border-radius: 6px;
    margin-right: 12px;
    color: var(--text-color);
}

body.dark-theme .workflow-icon {
    background-color: rgba(113, 164, 223, 0.12);
    border: 1px solid rgba(113, 164, 223, 0.24);
}

.workflow-content {
    flex: 1;
}

.workflow-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.workflow-description {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Chat Area Styles - Specific to standalone */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--chat-bg);
    /* Add this to make the entire chat area scrollable */
    overflow-y: hidden;
    position: relative;
}

.chat-area .chat-header {
    padding: 0 20px;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    /* CSS Grid: 3 equal columns — center stays centered regardless of left width */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    color: var(--text-color);
    height: 65px;
    box-shadow: 0 2px 4px var(--header-shadow-color);
    z-index: 2000;
    position: relative;
    background-color: var(--sidebar-bg);
}

/* ── Header 3-column layout ─────────────────────────────────── */
.chat-header-left {
    display: flex;
    align-items: center;
    justify-self: start;
    min-width: 0;
    /* Allow search to grow when expanded */
    width: 100%;
    /* max-width: 300px; */
}

.chat-header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    margin-right: 100px;
}

/* When search is active (focused), hide center tabs */
.chat-header.search-active .chat-header-center {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Search bar: compact default, expands on focus ───────────── */
.chat-header-left .search-container {
    position: absolute;
    top: 50%;
    right: var(--header-search-right, 320px);
    width: var(--header-search-width, 420px);
    min-width: 0;
    max-width: calc(100% - 28px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: visible;
    z-index: 4;
    transform: translateY(-50%) scaleX(0.18);
    transform-origin: right center;
    will-change: transform, opacity;
    transition:
        transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.18s ease,
        visibility 0.18s ease;
}

.chat-header-left .search-container.search-expanded {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scaleX(1);
}

/* Search icon prefix (magnifier inside input) */
.chat-header-left .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.chat-header-left .search-icon-prefix {
    position: absolute;
    left: 10px;
    font-size: 12px;
    color: var(--icon-color);
    pointer-events: none;
    z-index: 1;
}

.chat-header-left #searchInput {
    padding-left: 30px;
}

/* ── Header Tabs (Chat / Tasks / Settings) ──────────────────── */
.header-tabs {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

body.dark-theme .header-tabs {
    background: rgba(255, 255, 255, 0.07);
}

.header-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 8px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--icon-color);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    user-select: none;
}

.header-tab i { font-size: 12px; }

.header-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
}

body.dark-theme .header-tab:hover {
    background: rgba(255, 255, 255, 0.07);
}

.header-tab.active {
    background: var(--header-bg);
    color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

body.dark-theme .header-tab.active {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Content Panels ─────────────────────────────────────────── */
#panel-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#panel-tasks {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    background: var(--background-color);
    padding: 20px;
}

/* ── Tasks workspace: self-contained two-column (Option A — Tasks under Settings)
 * The task-list rail + detail live INSIDE this panel now, so the app sidebar
 * keeps showing the Settings nav. The rail is a fixed-width left column; the
 * detail / template gallery fills the rest.
 * ─────────────────────────────────────────────────────────────── */
#panel-tasks .at-workspace {
    flex: 1;
    display: flex;
    min-height: 0;
    gap: 16px;
    overflow: hidden;
}

#panel-tasks .at-sidebar--in-pane {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--card-bg, var(--sidebar-bg, #ffffff));
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

#panel-tasks .at-sidebar--in-pane .at-sidebar-header {
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#panel-tasks .at-sidebar--in-pane .at-search-wrap {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

#panel-tasks .at-sidebar--in-pane .at-task-list,
#panel-tasks .at-sidebar--in-pane .att-tpl-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#panel-tasks .at-sidebar--in-pane .at-sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

#panel-tasks .at-sidebar--in-pane .at-new-task-btn {
    width: 100%;
    justify-content: center;
}

#panel-tasks .at-sidebar--in-pane .at-new-task-btn.at-new-task-btn--disabled,
#panel-tasks .at-sidebar--in-pane .at-new-task-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: saturate(0.6);
    pointer-events: none;
}

/* Right column: task detail OR the template gallery (siblings; one visible at a
 * time). Both flex to fill the space left of the rail. */
#panel-tasks .at-detail,
#panel-tasks .att-panel {
    flex: 1;
    min-width: 0;
    border-radius: 12px;
}

/* Responsive: on narrow viewports stack the two columns vertically — task rail
 * on top (capped height, its own scroll) and detail below. Stacking (rather than
 * a rail-hiding drill-in) keeps the list reachable without needing a dedicated
 * back button. The body.at-detail-open hook (set by amby-tasks-render.js) is
 * available if a true drill-in is wanted later. */
@media (max-width: 820px) {
    #panel-tasks {
        padding: 12px;
    }
    #panel-tasks .at-workspace {
        flex-direction: column;
        gap: 12px;
        overflow-y: auto;
    }
    #panel-tasks .at-sidebar--in-pane {
        flex: 0 0 auto;
        width: 100%;
        max-height: 42vh;
    }
    #panel-tasks .at-detail {
        flex: 1 1 auto;
        min-height: 320px;
    }
}

#panel-settings {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 20px;
    overflow-y: auto;
}

/* ── Sidebar mode isolation (data-mode attribute) ───────────────
 * setSidebarMode() in header-tabs.js sets sidebar.dataset.mode.
 * Using CSS instead of a JS forEach so that dynamically-injected
 * children (chat widgets, sessions list) are hidden automatically
 * even when they arrive after the mode was set.
 * ─────────────────────────────────────────────────────────────── */

/* Settings mode: hide everything except the persistent header and the settings
 * nav. Tasks lives under Settings (its list rail is in #panel-tasks now), so it
 * has no dedicated sidebar mode — the app sidebar stays in 'settings' mode while
 * the Tasks panel is shown. */
.sidebar[data-mode="settings"] > *:not(.sidebar-header):not(#settings-sidebar) {
    display: none !important;
}

/* Teams mode reuses the chat sidebar layout (widgets slot swapped for the Teams
 * switcher + the real Recent Sessions list). Hide only the Settings nav; the
 * widget→Teams swap and Projects hiding are handled in teams.css. */
.sidebar[data-mode="teams"] > #settings-sidebar {
    display: none !important;
}

/* ── Settings sidebar nav ──────────────────────────────────────── */
.sidebar #settings-sidebar {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 10px 0;
    overflow-y: auto;
}

.sidebar #settings-sidebar .settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    padding: 11px 12px 10px 13px;
    cursor: pointer;
    border-radius: 8px;
    margin: 2px 8px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--at-text-1);
    font-family: var(--at-font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--at-t);
    user-select: none;
    text-align: left;
}

.sidebar #settings-sidebar .settings-nav-item i {
    width: 16px;
    text-align: center;
    color: var(--at-text-3);
    flex-shrink: 0;
}

.sidebar #settings-sidebar .settings-nav-item .settings-nav-label {
    flex: 1;
}

.sidebar #settings-sidebar .settings-nav-item:hover,
.sidebar #settings-sidebar .settings-nav-item.is-active {
    background: var(--at-white);
    border-color: var(--at-border);
    box-shadow: var(--at-shadow-sm);
}

.sidebar #settings-sidebar .settings-nav-item.is-active {
    color: var(--at-text-1);
    border-left-color: var(--at-accent);
    box-shadow: var(--at-shadow-md);
}

.sidebar #settings-sidebar .settings-nav-item.is-active i {
    color: var(--at-accent);
}

/* Collapsed sidebar: hide labels and badges, centre icon */
.sidebar.collapsed #settings-sidebar .settings-nav-item {
    justify-content: center;
    padding: 11px 0;
    margin: 1px 6px;
}
.sidebar.collapsed #settings-sidebar .settings-nav-label,
.sidebar.collapsed #settings-sidebar .settings-nav-badge {
    display: none;
}

/* Tasks list-rail styling now lives with the two-column workspace under
 * #panel-tasks .at-sidebar--in-pane (top of this file). The task rail is no
 * longer a child of the app .sidebar, so the former `.sidebar .at-sidebar*`
 * and `.sidebar.collapsed .at-*` rules were removed. */

/* ── Settings "Coming Soon" ─────────────────────────────────── */
.at-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 40px;
}

.at-coming-soon-icon {
    width: 88px;
    height: 88px;
    background: var(--input-bg);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--icon-color);
    box-shadow: 0 1px 4px var(--shadow-color);
}

.at-coming-soon h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
}

.at-coming-soon p {
    font-size: 15px;
    color: var(--icon-color);
    max-width: 320px;
    line-height: 1.65;
}

.settings-page {
    display: flex;
    flex: 1;
    min-height: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.settings-page__content {
    width: 100%;
    overflow: auto;
    padding: 0;
}

.settings-shell {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--at-bg-alt);
    border-radius: 12px;
    overflow: hidden;
}

.settings-view-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--at-border);
    background: var(--at-white);
}

.settings-view-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-view-title {
    margin: 0;
    font-family: var(--at-font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--at-text-1);
}

.settings-view-description {
    margin: 10px 0 0;
    max-width: 760px;
    color: var(--at-text-3);
    font-size: 0.875rem;
    line-height: 1.6;
}

.settings-view-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.settings-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 28px;
    flex-shrink: 0;
}

.settings-info-cell {
    background: var(--at-white);
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: var(--at-shadow-md);
}

.settings-info-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--at-text-3);
    margin-bottom: 5px;
}

.settings-info-value {
    font-family: var(--at-font-mono);
    font-size: 1.3rem;
    color: var(--at-text-1);
    font-weight: 600;
}

.settings-info-limit {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--at-text-3);
}

.settings-info-hint {
    font-size: 11px;
    color: var(--at-text-3);
    margin-top: 3px;
    line-height: 1.5;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 28px 20px;
    flex-shrink: 0;
}

.settings-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.settings-section__eyebrow {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--at-text-3);
    margin-bottom: 8px;
}

.settings-section__title {
    margin: 0;
    font-family: var(--at-font-display);
    font-size: 20px;
    line-height: 1.2;
    color: var(--at-text-1);
}

.settings-section__description {
    margin: 6px 0 0;
    color: var(--at-text-3);
    line-height: 1.6;
    font-size: 14px;
}

.settings-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.settings-page .settings-subsection {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--at-border);
}

.settings-page .settings-subsection__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-page .settings-subsection__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--at-text-2);
}

.settings-page .settings-subsection__description {
    margin: 0;
    font-size: 13px;
    color: var(--at-text-3);
    line-height: 1.5;
}

.settings-card,
.settings-empty,
.settings-memory-card,
.settings-memory-create {
    border: 1px solid var(--at-border);
    border-radius: 8px;
    background: var(--at-white);
    box-shadow: none;
}

.settings-card,
.settings-empty {
    padding: 18px;
}

.settings-card__title {
    margin: 0 0 8px;
    font-family: var(--at-font-display);
    font-size: 17px;
    color: var(--at-text-1);
}

.settings-card__description {
    margin: 0;
    color: var(--at-text-2);
    line-height: 1.6;
    font-size: 13px;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.settings-switch {
    position: relative;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
}

.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch__slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--at-border-strong);
    transition: background 0.18s ease;
    cursor: pointer;
}

.settings-switch__slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    transition: transform 0.18s ease;
}

.settings-switch input:checked + .settings-switch__slider {
    background: var(--at-accent);
}

.settings-switch input:checked + .settings-switch__slider::before {
    transform: translateX(22px);
}

/* ── Notification sound volume sliders ─────────────────────────────────────
   Scoped under .settings-page so the range styling never leaks into other
   sliders on the chat page (CLAUDE.md rule 2). */
.settings-page .settings-sound-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.settings-page .settings-sound-preview {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--at-border);
    border-radius: 50%;
    background: var(--at-white);
    color: var(--at-text-2);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.settings-page .settings-sound-preview:hover {
    border-color: var(--at-accent);
    color: var(--at-accent);
}

.settings-page .settings-sound-slider {
    flex: 1;
    min-width: 0;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--at-border-strong);
    border-radius: 999px;
    cursor: pointer;
}

.settings-page .settings-sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--at-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.settings-page .settings-sound-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--at-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.settings-page .settings-sound-value {
    flex-shrink: 0;
    min-width: 48px;
    text-align: right;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--at-text-2);
}

.settings-memory-create {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    box-shadow: var(--at-shadow-md);
    background-color: var(--header-bg);
}

.settings-memory-create__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.settings-memory-counter {
    font-size: 12px;
    font-weight: 500;
    color: var(--at-text-3);
    white-space: nowrap;
}

.settings-memory-counter--at-limit {
    color: var(--at-danger, #e74c3c);
    font-weight: 600;
}

.settings-memory-create--at-limit textarea {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-memory-create--at-limit #settingsSaveMemoryBtn {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-memory-create textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    border-radius: 8px;
    border: 1px solid var(--at-border);
    background: var(--at-white);
    color: var(--at-text-1);
    padding: 11px 12px;
    font-family: var(--at-font-ui);
    font-size: 13.5px;
    line-height: 1.6;
    outline: none;
    transition: border-color var(--at-t), box-shadow var(--at-t);
}

.settings-memory-create textarea:focus {
    border-color: var(--at-accent);
    box-shadow: 0 0 0 3px var(--at-accent-subtle);
}

.settings-memory-create__footer,
.settings-memory-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-helper-text {
    color: var(--at-text-3);
    font-size: 12px;
    line-height: 1.5;
}

.settings-primary-btn,
.settings-secondary-btn,
.settings-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    padding: 7px 16px;
    font-family: var(--at-font-ui);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--at-t);
    border: none;
    outline: none;
}

.settings-primary-btn {
    background: var(--at-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(45,95,132,0.35);
}

.settings-primary-btn.passkey-btn:hover {
    opacity: 1;
}

.settings-primary-btn.passkey-btn {
    width: 140px;
    justify-content: center;
    opacity: 0.9;
}

.settings-primary-btn:hover {
    background: var(--at-accent-hover);
    transform: translateY(-1px);
}

.settings-secondary-btn {
    background: var(--at-surface);
    border: 1px solid var(--at-border);
    color: var(--at-text-2);
}

.settings-secondary-btn:hover {
    background: var(--at-white);
    border-color: var(--at-border-strong);
    color: var(--at-text-1);
}

.settings-danger-btn {
    background: var(--at-red-bg);
    border: 1px solid var(--at-red-border);
    color: var(--at-red);
}

.settings-danger-btn:hover {
    background: var(--at-red);
    border-color: var(--at-red);
    color: #fff;
}

.settings-memory-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-memory-card {
    padding: 16px 18px;
}

.settings-memory-card__content {
    margin: 0 0 16px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--at-text-1);
    font-size: 14px;
}

.settings-chip,
.settings-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--at-font-ui);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.settings-chip--cron,
.settings-pill {
    background: var(--at-accent-subtle);
    color: var(--at-accent-text);
}

.settings-chip--manual {
    background: rgba(92,87,80,0.09);
    color: var(--at-text-2);
}

.settings-chip--agent {
    background: rgba(26,39,51,0.07);
    color: #334e64;
}

.settings-pill--muted {
    background: rgba(154,148,136,0.14);
    color: var(--at-text-3);
}

.settings-memory-card--disabled {
    opacity: 0.65;
    border-left: 3px solid var(--at-warning, #e09000);
}

.settings-memory-card--disabled .settings-memory-card__content {
    text-decoration: line-through;
    color: var(--at-text-3);
}

.settings-memory-card__disabled-note {
    margin: 0;
    font-size: 11.5px;
    color: var(--at-warning, #e09000);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Inline edit form inside a memory card */
.settings-memory-card--editing {
    padding: 16px 18px;
}

.settings-memory-edit-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--at-border-2, #d0ccc4);
    border-radius: 8px;
    font-family: var(--at-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--at-text-1);
    background: var(--at-surface-1);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}

.settings-memory-edit-textarea:focus {
    border-color: var(--at-accent, #2d78b7);
}

.settings-memory-card__edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.settings-memory-card__edit-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.settings-empty {
    text-align: center;
    padding: 28px 22px;
}

body.dark-theme .settings-chip--agent {
    color: var(--at-accent-text);
}

@media (max-width: 760px) {
    #panel-settings {
        padding: 14px;
    }

    .settings-view-header,
    .settings-section {
        margin-left: 16px;
        margin-right: 16px;
    }

    .settings-view-header {
        padding: 18px 16px 16px;
        margin: 0;
    }

    .settings-shell {
        border-radius: 10px;
    }

    .settings-info-grid {
        grid-template-columns: 1fr;
        margin: 16px;
    }

    .settings-card-grid {
        grid-template-columns: 1fr;
    }

    .settings-toggle-row,
    .settings-memory-create__footer,
    .settings-memory-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================================
   AI Preferences — grouped grid layout + hints modal
   ========================================================================= */

.settings-pref-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-pref-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--at-white);
    box-shadow: var(--at-shadow-md);
    padding: 30px 20px;
    border-radius: 12px;
}

.settings-pref-group__label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--at-text-3);
    padding-left: 2px;
    padding-bottom: 10px;
}

.settings-pref-grid {
    display: grid;
    gap: 12px;
}

.settings-pref-grid--3 { grid-template-columns: repeat(3, 1fr); }
.settings-pref-grid--2 { grid-template-columns: repeat(2, 1fr); }

.settings-pref-section-card {
    border: 1px solid var(--at-border);
    border-radius: 12px;
    padding: 16px 18px 12px;
    background: var(--at-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Passkeys list (Settings → Other settings) ────────────────────────────── */
.settings-passkey-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.settings-passkey-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--at-border);
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--at-surface);
}

.settings-passkey-item__info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.settings-passkey-item__icon {
    color: var(--send-button-bg, #405062);
    font-size: 1rem;
    flex: 0 0 auto;
}

.settings-passkey-item__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-passkey-item__name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-passkey-item__user {
    font-size: 0.8rem;
    color: var(--at-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-passkey-item__remove {
    flex: 0 0 auto;
}

/* ── Device push-notification (Web Push) card in Settings → Notifications ──── */
.settings-section .settings-webpush-card {
    border: 1px solid var(--at-border);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--at-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.settings-section .settings-webpush-card__title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.settings-section .settings-webpush-card__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--at-text-muted, #6b7280);
    max-width: 42ch;
}

.settings-section .settings-webpush-card__slot {
    flex: 0 0 auto;
}

/* The enable button lives inside the slot (injected by web-push.js). Styled here
   so it reads as a primary action instead of a bare browser button. */
.settings-section .web-push-enable-btn {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--send-button-bg, #405062);
    color: #fff;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.settings-section .web-push-enable-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.settings-section .web-push-enable-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.settings-section .web-push-hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--at-text-muted, #6b7280);
}

@media (max-width: 768px) {
    .settings-section .settings-webpush-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .settings-section .settings-webpush-card__slot {
        width: auto;
        align-self: flex-start;
    }
    .settings-section .web-push-enable-btn {
        width: auto;
        min-width: 0;
        padding: 9px 16px;
        font-size: 0.85rem;
    }
}

.settings-pref-section-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.settings-pref-section-card--saved {
    border-color: rgba(34, 134, 58, 0.35);
}

body.dark-theme .settings-pref-section-card--saved {
    border-color: rgba(74, 222, 128, 0.3);
}

.settings-pref-section-card__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.settings-pref-section-card__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--at-text-1);
}

.settings-pref-saved-badge {
    color: #22863a;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

body.dark-theme .settings-pref-saved-badge {
    color: #4ade80;
}

.settings-pref-section-card__description {
    margin: 0;
    font-size: 12px;
    color: var(--at-text-3);
    line-height: 1.45;
}

.settings-pref-hints-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--at-border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--at-text-2);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, color 0.12s;
}

.settings-pref-hints-btn:hover {
    background: var(--at-accent-subtle);
    color: var(--at-accent-text);
    border-color: transparent;
}

.settings-pref-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--at-border);
    border-radius: 8px;
    background: var(--at-input-bg, var(--at-surface));
    color: var(--at-text-1);
    font-family: var(--at-font-ui);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 150px;
    transition: border-color 0.15s;
}

.settings-pref-textarea:focus {
    outline: none;
    border-color: var(--at-accent);
    background: white;
    color: var(--input-focus-text);
}

.settings-pref-textarea-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.settings-pref-char-count          { font-size: 11px; color: var(--at-text-3); }
.settings-pref-char-count--warning { color: #b45309; }
.settings-pref-char-count--limit   { color: var(--at-red, #d73a49); font-weight: 600; }

.settings-pref-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 4px;
    border-top: 1px solid var(--at-border);
}

/* ── Hints modal ──────────────────────────────────────────────────────────── */

.settings-pref-hints-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.settings-pref-hints-modal.is-open { display: flex; }

.settings-pref-hints-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
}

.settings-pref-hints-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--at-surface);
    border: 1px solid var(--at-border);
    border-radius: 14px;
    padding: 24px 26px 22px;
    max-width: 480px;
    width: calc(100% - 40px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    outline: none;
}

.settings-pref-hints-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--at-text-3);
    font-size: 15px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.12s;
}

.settings-pref-hints-modal__close:hover {
    background: var(--at-hover);
    color: var(--at-text-1);
}

.settings-pref-hints-modal__title {
    margin: 0 28px 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--at-text-1);
}

.settings-pref-hints-modal__desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--at-text-3);
    line-height: 1.5;
}

.settings-pref-examples {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-pref-example {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.settings-pref-example__label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 76px;
}

.settings-pref-example--good .settings-pref-example__label { color: #22863a; }
.settings-pref-example--bad  .settings-pref-example__label { color: var(--at-red, #d73a49); }
.settings-pref-example__text { color: var(--at-text-2); font-style: italic; }

body.dark-theme .settings-pref-hints-modal__panel {
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

body.dark-theme .settings-pref-example--good .settings-pref-example__label { color: #4ade80; }

@media (max-width: 1000px) {
    .settings-pref-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .settings-pref-grid--3,
    .settings-pref-grid--2 { grid-template-columns: 1fr; }

    .settings-pref-form__footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================================================= */

.current-workflow {
    font-weight: bold;
    font-size: 1.1rem;
    width: 180px;
    flex-shrink: 0;
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    justify-self: end;
}

/* User Menu Dropdown */
.user-menu-container {
    position: relative;
}

.user-menu-toggle {
    background: none;
    border: none;
    color: var(--icon-color);
    cursor: pointer;
    font-size: 24px;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-menu-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--accent-color);
}

body.dark-theme .user-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    min-width: 220px;
    z-index: 1000;
}

.user-menu-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.user-menu-item:last-child {
    border-bottom: none;
}

.user-menu-item i {
    color: var(--icon-color);
    font-size: 16px;
    width: 20px;
}

.user-menu-item span {
    flex: 1;
    font-size: 14px;
}

.language-select {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.language-select:hover {
    border-color: var(--accent-color);
}

.language-select:focus {
    border-color: var(--accent-color);
}

.messages-wrapper {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: width 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Narrower message container when widget is in half-view (only on smaller screens) */
@media (max-width: 1600px) {
    .messages-wrapper.widget-half-active {
        width: 70%;
    }
}

.messages-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 60rem;
    margin: 0;
    overflow-y: visible;
    width: 100%;
    flex: 1 0 auto;
    position: relative;
    z-index: 1;
    padding-bottom: calc(60px + var(--send-anchor-extra-space, 0px));
}

.messages-container #bottomReserve,
.messages-container #bottomSentinel {
    width: 100%;
    flex: 0 0 auto;
    pointer-events: none;
}

/* Input Area Styles for standalone */
.chat-area #inputContainer {
    padding: 15px 20px;
    background-color: transparent;
    border-top: none;
    display: flex;
    gap: 10px;
    position: relative;
    max-width: 60rem;
    margin: 0 auto;
    width: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
    --stt-mic-color: var(--stt-regular-mic);
    --stt-mic-hover-color: var(--stt-regular-mic-hover);
    --stt-mic-hover-bg: var(--stt-regular-mic-hover-bg);
    --stt-stop-color: var(--stt-regular-stop);
    --stt-spinner-color: var(--stt-regular-spinner);
    --stt-visualizer-color: var(--stt-regular-visualizer);
}

.chat-area #inputContainer:focus-within {
    --stt-mic-color: var(--stt-regular-mic-focus);
    --stt-mic-hover-color: var(--stt-regular-mic-hover-focus);
    --stt-mic-hover-bg: var(--stt-regular-mic-hover-bg-focus);
    --stt-spinner-color: var(--stt-regular-spinner-focus);
    --stt-visualizer-color: var(--stt-regular-visualizer-focus);
}

.chat-area #inputContainer.has-text {
    --stt-mic-color: var(--stt-regular-mic-focus);
    --stt-mic-hover-color: var(--stt-regular-mic-hover-focus);
    --stt-mic-hover-bg: var(--stt-regular-mic-hover-bg-focus);
    --stt-spinner-color: var(--stt-regular-spinner-focus);
    --stt-visualizer-color: var(--stt-regular-visualizer-focus);
}

.chat-area #inputContainer textarea {
    flex: 1;
    padding: 12px 20px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-color);
    resize: none;
    min-height: 50px;
    max-height: 150px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: normal;
}

.chat-area #inputContainer .mention-input-highlight {
    padding: 13px 20px;
    border-radius: 20px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: normal;
    min-height: 50px;
    max-height: 150px;
}

.chat-area #inputContainer textarea:focus {
    box-shadow: 0 0 5px rgba(97, 98, 98, 0.5);
    background-color: var(--input-focus-bg);
    color: var(--input-focus-text);
}

.chat-area #inputContainer.has-text textarea {
    box-shadow: 0 0 5px rgba(97, 98, 98, 0.5);
    background-color: var(--input-focus-bg);
    color: var(--input-focus-text);
}

.chat-area #inputContainer:focus-within textarea::placeholder,
.chat-area #inputContainer.has-text textarea::placeholder {
    color: var(--input-focus-placeholder);
}

#userInput {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bot-message a {
    color: #4d99f5;
}

.chat-area #inputContainer .send-button {
    /* background-color: color-mix(in srgb, var(--accent-color) 60%, white); */
    color: white;
    border: none;
    border-radius: 12px;
    width: 50px;
    cursor: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    height: 50px;
}

.send-button.has-content {
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
    background-color: var(--send-button-bg);
    cursor: pointer;
    color: white;
    z-index: 10;
}

.send-button.has-content:hover {
    background-color: #3f4b6c; /* Darker blue on hover */
}

/* Desktop input overrides: match mobile inline send affordance */
body:not(.mobile-standalone) .chat-area #inputContainer .input-row {
    position: relative;
    width: 100%;
    gap: 0;
    display: flex;
    align-items: center;
    padding-left: 0;
}

body:not(.mobile-standalone) .chat-area #inputContainer textarea {
    padding-right: 54px;
    padding-left: 50px;
    margin-left: 0;
    width: 100%;
    flex: 1 1 auto;
}

body:not(.mobile-standalone) .chat-area #inputContainer .mention-input-highlight {
    padding-right: 54px;
    padding-left: 50.5px;
    width: 100%;
    line-height: 1.5;
}

/* Paperclip button sits inside the textarea on the left, matching the mic/send pattern on the right */
body:not(.mobile-standalone) .chat-area #inputContainer .file-upload-button {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

body:not(.mobile-standalone) .chat-area #inputContainer .file-upload-button:hover {
    opacity: 1;
    color: var(--text-color);
    background: var(--stt-mic-hover-bg, rgba(0,0,0,0.06));
}

body:not(.mobile-standalone) .chat-area #inputContainer .mic-button,
body:not(.mobile-standalone) .chat-area #inputContainer .send-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--stt-mic-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: 0;
}

body:not(.mobile-standalone) .chat-area #inputContainer .mic-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body:not(.mobile-standalone) .chat-area #inputContainer .mic-button:hover,
.fresh-mic-button:hover {
    background: var(--stt-mic-hover-bg);
    color: var(--stt-mic-hover-color);
}

body:not(.mobile-standalone) .chat-area #inputContainer .send-button.has-content:hover {
    background-color: #3f4b6c;
    color: #fff;
    background: var(--stt-mic-hover-bg);
    color: var(--stt-mic-hover-color);
}

body:not(.mobile-standalone) .chat-area #inputContainer .send-button.has-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    color: var(--input-focus-icon);
    cursor: pointer;
}

body:not(.mobile-standalone) .chat-area #inputContainer .mic-button.has-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body:not(.mobile-standalone) .chat-area #inputContainer .mic-button.is-recording {
    color: var(--stt-stop-color);
}

body:not(.mobile-standalone) .chat-area #inputContainer .mic-button.is-processing,
body:not(.mobile-standalone) .chat-area #inputContainer .mic-button.is-preparing {
    pointer-events: none;
    opacity: 1;
    color: var(--stt-spinner-color);
}

body:not(.mobile-standalone) .chat-area #inputContainer .stt-visualizer {
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    gap: 4px;
    height: 18px;
}

body:not(.mobile-standalone) .chat-area #inputContainer .stt-visualizer span {
    width: 3px;
    height: 10px;
    background: var(--stt-visualizer-color);
    border-radius: 2px;
    animation: stt-bar 0.9s ease-in-out infinite;
}

body:not(.mobile-standalone) .chat-area #inputContainer .stt-visualizer span:nth-child(2) {
    animation-delay: 0.2s;
}

body:not(.mobile-standalone) .chat-area #inputContainer .stt-visualizer span:nth-child(3) {
    animation-delay: 0.4s;
}

body:not(.mobile-standalone) .chat-area #inputContainer.is-recording .stt-visualizer {
    display: flex;
}


@keyframes stt-bar {
    0%, 100% { height: 6px; opacity: 0.6; }
    50% { height: 16px; opacity: 1; }
}

/* Fresh session inline input */
body.fresh-chat-mode .chat-area #inputContainer {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fresh-chat-wrapper {
    width: 100%;
    max-width: 720px;
    margin: 40px auto 0;
    padding: 0 20px 40px;
    box-sizing: border-box;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 200;
}

.fresh-chat-wrapper.entering {
    opacity: 0;
    transform: translateY(12px);
}

.fresh-chat-wrapper.leaving {
    opacity: 0;
    transform: translateY(30px);
}

.fresh-chat-input-shell {
    position: relative;
    background: var(--fresh-input-bg);
    border: 1px solid var(--fresh-input-border);
    border-radius: 20px;
    box-shadow: 0 22px 45px var(--fresh-input-shadow);
    padding: 14px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-bottom: 30px;
    --stt-mic-color: var(--stt-fresh-mic);
    --stt-mic-hover-color: var(--stt-fresh-mic-hover);
    --stt-mic-hover-bg: var(--stt-fresh-mic-hover-bg);
    --stt-stop-color: var(--stt-fresh-stop);
    --stt-spinner-color: var(--stt-fresh-spinner);
    --stt-visualizer-color: var(--stt-fresh-visualizer);
}

.fresh-chat-input-shell:focus-within {
    --stt-mic-color: var(--stt-fresh-mic-focus);
    --stt-mic-hover-color: var(--stt-fresh-mic-hover-focus);
    --stt-mic-hover-bg: var(--stt-fresh-mic-hover-bg-focus);
    --stt-spinner-color: var(--stt-fresh-spinner-focus);
    --stt-visualizer-color: var(--stt-fresh-visualizer-focus);
}

.fresh-chat-input-shell.has-text {
    --stt-mic-color: var(--stt-fresh-mic-focus);
    --stt-mic-hover-color: var(--stt-fresh-mic-hover-focus);
    --stt-mic-hover-bg: var(--stt-fresh-mic-hover-bg-focus);
    --stt-spinner-color: var(--stt-fresh-spinner-focus);
    --stt-visualizer-color: var(--stt-fresh-visualizer-focus);
}

.fresh-chat-textarea {
    width: 100%;
    /* border-box so the heavy horizontal padding (25px + 96px for the mic/send
       controls) stays INSIDE the 100% width. Without this the field overflows
       its shell by ~121px and pushes past the panel edge on narrow viewports. */
    box-sizing: border-box;
    border: none;
    resize: none;
    background: var(--fresh-input-field-bg);
    border-radius: 10px;
    padding: 20px 96px 20px 25px;
    min-height: 100px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.fresh-chat-textarea:focus,
.has-text .fresh-chat-textarea {
    outline: none;
    background: var(--input-focus-bg);
    color: var(--input-focus-text);
    box-shadow: 0 0 5px rgba(97, 98, 98, 0.5);
}

.fresh-chat-input-shell:focus-within .fresh-chat-textarea::placeholder,
.fresh-chat-input-shell.has-text .fresh-chat-textarea::placeholder {
    color: var(--input-focus-placeholder);
}

.fresh-send-button {
    position: absolute;
    right: 28px;
    bottom: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--send-button-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fresh-mic-button {
    position: absolute;
    right: 25px;
    bottom: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--stt-mic-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.fresh-chat-input-shell .stt-visualizer {
    position: absolute;
    right: 76px;
    bottom: 50px;
    display: none;
    align-items: center;
    gap: 4px;
    height: 18px;
}

.fresh-chat-input-shell .stt-visualizer span {
    width: 3px;
    height: 10px;
    background: var(--stt-visualizer-color);
    border-radius: 2px;
    animation: stt-bar 0.9s ease-in-out infinite;
}

.fresh-chat-input-shell .stt-visualizer span:nth-child(2) {
    animation-delay: 0.2s;
}

.fresh-chat-input-shell .stt-visualizer span:nth-child(3) {
    animation-delay: 0.4s;
}

.fresh-chat-input-shell.is-recording .stt-visualizer {
    display: flex;
}


.fresh-mic-button.has-content {
    opacity: 0;
    pointer-events: none;
}

.fresh-chat-input-shell.has-text .fresh-mic-button {
    opacity: 0;
    pointer-events: none;
}

.fresh-mic-button.is-recording {
    color: var(--stt-stop-color);
}

.fresh-mic-button.is-processing,
.fresh-mic-button.is-preparing {
    pointer-events: none;
    opacity: 1;
    color: var(--stt-spinner-color);
}

.fresh-chat-input-shell.has-text .fresh-send-button {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
}

.fresh-chat-input-shell .fresh-send-button i {
    pointer-events: none;
    font-size: 18px;
}

.fresh-chat-input-shell .fresh-mic-button i {
    pointer-events: none;
    font-size: 18px;
}

.fresh-suggestions-anchor {
    margin-top: 18px;
}

.fresh-attach-button {
    position: absolute;
    left: 25px;
    bottom: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--stt-mic-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
    font-size: 0.85rem;
    z-index: 2;
}

.fresh-attach-button:hover {
    opacity: 1;
    color: var(--stt-mic-hover-color);
    background: var(--stt-mic-hover-bg);
}

.fresh-chat-input-shell .fresh-attachments-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px 10px;
}

.fresh-chat-input-shell .fresh-attachments-container:empty {
    padding: 0;
}

body.dark-theme .fresh-chat-input-shell {
    background: var(--fresh-input-bg);
    border-color: var(--fresh-input-border);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
}

/* Welcome Message */
.messages-wrapper #chatMessages .welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 80px 0 0;
    animation: fadeIn 0.8s ease-out;
}

.welcome-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.welcome-title {
    font-size: 1.6rem;
    margin-bottom: 10px;
    margin-top: 20px;
}

.welcome-description {
    text-align: center;
    max-width: 600px;
    color: color-mix(in srgb, var(--text-color) 80%, transparent);
}

/* Session end styling */
.session-ended .messages-container {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
  
.new-query-button {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    transition: all 0.3s ease;
}

.new-query-button:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.disabled-input {
    background-color: var(--input-bg);
    color: var(--text-color);
    opacity: 0.5;
}

.disabled-button {
    opacity: 0.5;
    cursor: not-allowed;
}

.header-action-container {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
}

.header-action-label, .username {
    font-size: 0.7rem;
    margin-top: 3px;
    color: var(--icon-color);
    opacity: 0.8;
    text-transform: capitalize;
}

.new-session-button,
.theme-toggle,
.header-search-toggle {
    background: none;
    border: none;
    color: var(--icon-color);
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    margin-right: 0;
}

.new-session-button:hover,
.theme-toggle:hover,
.header-search-toggle:hover {
    color: var(--text-color);
}

.input-container button {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.chat-window.active .input-container button {
    background-color: #405062;
}

.file-upload-button:hover {
    background-color: var(--scrollbar-thumb);
    color: var(--text-color)
}

.file-upload-button i {
    color: var(--text-color);
}

.chat-area .scroll-bottom-arrow {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--scroll-btn-bg);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
}

.chat-area .scroll-bottom-arrow:hover {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
}

/* Sessions list styling */
.sessions-list-container {
    flex: 1 1 auto; /* Allow flexible resizing */
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    min-height: 100px; /* Minimum height to prevent collapse */
    /* Enable positioning context for loading indicator */
    position: relative;
}

.sessions-header {
    padding: 10px 20px 0;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(188, 188, 188, 0.1);
}

.sessions-header h3 {
    font-size: 1rem;
    color: var(--text-color);
    margin: 0;
    opacity: 0.8;
}

.sessions-count {
    opacity: 0.7;
    margin-left: 5px;
    font-size: 1rem;
    color: var(--text-color);
}

/* Sessions search container */
.sessions-search-container {
    padding: 8px 12px;
    /* border-bottom: 1px solid var(--border-color); */
    position: relative;
    --sessions-project-pill-width: 0px;
}

/* Sessions search input */
.sessions-search-input {
    width: 100%;
    padding: 6px 32px 6px 32px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 16px;
    color: var(--text-color);
    transition: all 0.2s ease;
}

.sessions-search-input--with-project {
    padding-left: calc(var(--sessions-project-pill-width) + 42px);
}

.sessions-search-input:focus {
    border-color: var(--send-button-bg);
    background-color: var(--chat-bg);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

.sessions-search-input::placeholder {
    color: var(--icon-color);
    opacity: 0.6;
}

.sessions-search-project-pill {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 86px);
    height: 20px;
    padding: 0 10px 0 8px;
    border: 1px solid color-mix(in srgb, var(--send-button-bg) 28%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--send-button-bg) 12%, var(--input-bg));
    color: var(--text-color);
    cursor: pointer;
    z-index: 1;
    font-size: 12px;
    line-height: 1;
}

.sessions-search-project-pill.visible {
    display: inline-flex;
}

.sessions-search-project-pill:hover {
    background: color-mix(in srgb, var(--send-button-bg) 16%, var(--input-bg));
}

.sessions-search-project-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    font-size: 13px;
}

.sessions-search-project-pill__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* Sessions search clear button */
.sessions-search-clear {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--icon-color);
    cursor: pointer;
    padding: 4px 8px;
    display: none;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.sessions-search-clear.visible {
    display: block;
}

.sessions-search-clear:hover {
    opacity: 1;
}

.sessions-list {
    flex: 1 1 auto; /* Allow flexible resizing within container */
    max-height: none; /* Remove max-height restriction */
    padding: 0 10px 68px 10px;
    overflow-y: auto; /* Enable scrolling when content overflows */
    overflow-x: hidden;
    /* Prevent layout shifts during loading */
    min-height: 50px; /* Reserve space to prevent collapse */
    /* Remove smooth scrolling to prevent automatic scroll adjustments */
    scroll-behavior: auto;
    /* Ensure stable scrolling */
    overscroll-behavior: contain;
    /* CRITICAL: Enable positioning context for loading indicator */
    position: relative;
}

.sessions-project-admin-toggle {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 22px;
    padding: 0 2px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--text-color) 74%, var(--icon-color));
    cursor: pointer;
    z-index: 3;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.sessions-project-admin-toggle:hover {
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 8px 30px;
}

.sessions-project-admin-toggle.active {
    color: var(--send-button-bg);
}

.sessions-project-admin-toggle i {
    font-size: 11px;
    opacity: 0.9;
}

body.dark-theme .sessions-project-admin-toggle {
    color: color-mix(in srgb, var(--text-color) 82%, var(--icon-color));
}

body.dark-theme .sessions-project-admin-toggle:hover {
    color: var(--text-color);
}

body.dark-theme .sessions-project-admin-toggle.active {
    color: #9ec2ff;
}

/* Sidebar separator styling */
.sidebar-separator {
    flex: 0 0 auto; /* Fixed size, don't grow or shrink */
    height: 8px;
    cursor: ns-resize;
    position: relative;
    transition: background-color 0.2s ease;
    user-select: none;
}

.sidebar-separator:hover {
    background: linear-gradient(to bottom, transparent 1px, #e4e4e4 1px, #e6e6e6 7px, transparent 7px);
}

.sidebar-separator.dragging {
    background: linear-gradient(to bottom, transparent 1px, #5e5e5f 1px, #ffffff 7px, transparent 7px);
}

.separator-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-color);
    opacity: 0.6;
    font-size: 10px;
    pointer-events: none;
}

.sidebar-separator:hover .separator-handle,
.sidebar-separator.dragging .separator-handle {
    opacity: 1;
    color: #000000;
}

/* Global dragging state */
body.sidebar-dragging {
    cursor: ns-resize !important;
    user-select: none;
}

body.sidebar-dragging * {
    cursor: ns-resize !important;
}

.session-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease; /* Only animate background color */
    /* Prevent layout shifts */
    min-height: 42px; /* Fixed minimum height */
    box-sizing: border-box;
    /* Remove any transform/position animations that could cause jumps */
}

.session-item:hover {
    background-color: var(--surface-hover-bg);
}

.session-item.active {
    background: var(--active-workflow-bg);
    color: var(--active-workfow-color);
}

.session-item.active .session-icon {
    color: var(--active-workfow-color);
}

body.dark-theme .workflow-item.active {
    background-color: var(--selected-item-bg);
    color: var(--selected-item-text);
    border: 1px solid var(--selected-item-border);
}

body.dark-theme .session-item.active {
    background: var(--selected-item-bg);
    color: var(--selected-item-text);
    border: 1px solid var(--selected-item-border);
}

body.dark-theme .session-item.active .session-icon {
    color: var(--selected-icon-color);
}

body.dark-theme .workflow-item.active .workflow-icon,
body.dark-theme .session-item.active .session-icon {
    background-color: var(--selected-icon-bg);
}

.session-item.loading {
    opacity: 0.6;
    position: relative;
}

.session-item.loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid var(--text-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.session-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: var(--text-color);
}

.session-content {
    flex: 1;
    overflow: hidden;
}

.session-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: inherit; /* Inherit cursor from parent */
}

/* Tooltip only shows when text is actually truncated */
.session-title {
    position: relative;
}

.session-title .session-title-track {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(0);
    will-change: transform;
}

.session-title.truncated.marquee-ready:hover .session-title-track {
    overflow: visible;
    text-overflow: clip;
    animation: session-title-marquee var(--session-marquee-duration, 8s) linear infinite alternate;
}

.session-title.truncated.marquee-ready:not(:hover) .session-title-track {
    overflow: hidden;
    text-overflow: ellipsis;
    animation: none;
    transform: translateX(0);
}

@keyframes session-title-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--session-marquee-distance, 0px))); }
}

/* Show tooltip only when text overflows */
.session-title.truncated:not(.marquee-ready):hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    max-width: 250px;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;
    opacity: 1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .session-title.truncated.marquee-ready:hover .session-title-track {
        animation: none;
    }
}

/* Typing animation for session title updates */
.session-title.typing-animation {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    border-right: 2px solid var(--primary-color, #3498db);
    animation: typing 1.5s steps(30, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-color, #3498db) }
}


/* Removed duplicate pseudo-element loading indicators - now using DOM-based .loading-indicator */

/* Smart loading: First session replaces loading indicator */
.session-item.replacing-loader {
    position: absolute;
    bottom: 15px; /* Position to replace the loading indicator */
    left: 10px;
    right: 10px;
    background: var(--sidebar-bg);
    z-index: 201; /* Higher than loading indicator */
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 6px;
    /* Ensure stable positioning */
    margin: 0;
    box-sizing: border-box;
}

.session-item.replacing-loader.visible {
    opacity: 1;
}

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

/* Fallback loading indicator using real DOM elements */
.sessions-list-container .loading-indicator {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    padding: 10px 15px;
    border-radius: 8px;
    pointer-events: none;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #e3e3e3;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 8px;
}

.loading-text {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
}

/* Dark theme for fallback indicator */
body.dark-theme .loading-indicator {
    background: rgba(42, 42, 42, 0.95);
}

body.dark-theme .loading-text {
    color: #f0f0f0;
}

/* Skeleton Loader for Chat Widgets */
.workflows-skeleton-loader {
    padding: 2px 0;
}

.skeleton-workflow-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    margin-bottom: 5px;
    border-radius: 8px;
}

.skeleton-workflow-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #e0e0e0) 0%,
        var(--skeleton-shimmer, #f0f0f0) 50%,
        var(--skeleton-bg, #e0e0e0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.skeleton-workflow-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-workflow-title {
    width: 65%;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #e0e0e0) 0%,
        var(--skeleton-shimmer, #f0f0f0) 50%,
        var(--skeleton-bg, #e0e0e0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-workflow-description {
    width: 88%;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #e0e0e0) 0%,
        var(--skeleton-shimmer, #f0f0f0) 50%,
        var(--skeleton-bg, #e0e0e0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Skeleton Loader for Recent Sessions */
.sessions-skeleton-loader {
    padding: 8px 12px;
}

.skeleton-session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    margin-bottom: 8px;
}

.skeleton-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #e0e0e0) 0%,
        var(--skeleton-shimmer, #f0f0f0) 50%,
        var(--skeleton-bg, #e0e0e0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-title {
    height: 14px;
    width: 80%;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #e0e0e0) 0%,
        var(--skeleton-shimmer, #f0f0f0) 50%,
        var(--skeleton-bg, #e0e0e0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-time {
    height: 12px;
    width: 50%;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, #e0e0e0) 0%,
        var(--skeleton-shimmer, #f0f0f0) 50%,
        var(--skeleton-bg, #e0e0e0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Dark theme skeleton loader */
body.dark-theme .skeleton-icon,
body.dark-theme .skeleton-title,
body.dark-theme .skeleton-time,
body.dark-theme .skeleton-workflow-icon,
body.dark-theme .skeleton-workflow-title,
body.dark-theme .skeleton-workflow-description {
    background: linear-gradient(
        90deg,
        var(--skeleton-bg-dark, #3a3a3a) 0%,
        var(--skeleton-shimmer-dark, #4a4a4a) 50%,
        var(--skeleton-bg-dark, #3a3a3a) 100%
    );
    background-size: 200% 100%;
}

body.dark-theme .loading-spinner {
    border-color: #555;
    border-top-color: #4a90e2;
}

/* Removed duplicate dark theme pseudo-element styles - now using DOM-based .loading-indicator */

.session-time {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 2px;
}

/* ── Pin icon (hover swap in .session-icon) ──────────────────────── */

.sessions-list .session-icon {
    position: relative;
}

/* ── session-title-row: title + rename button side-by-side ────────── */

.sessions-list .session-title-row {
    display: flex;
    align-items: center;
    min-width: 0; /* allow title to shrink */
    overflow: hidden;
}

.sessions-list .session-title-row .session-title {
    flex: 1;
    min-width: 0;
}

/* ── Pin icon (hover swap in .session-icon) ──────────────────────── */

.sessions-list .session-icon .session-workflow-icon,
.sessions-list .session-icon .session-project-icon {
    transition: opacity 0.15s ease;
}

.sessions-list .session-icon .session-pin-toggle-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    font-size: 1rem;
    color: var(--text-secondary, #888);
    transition: opacity 0.15s ease;
    cursor: pointer;
    /* rotate so the point faces upper-right, matching common pin UX */
    transform: rotate(45deg);
    z-index: 5;
}

/* Hover affordances are gated to hover-capable (mouse) devices. On touch,
   iOS/Android fire a synthetic :hover on the first tap that only reveals these
   controls WITHOUT dispatching the click — forcing a second tap to actually open
   the session. Gating the reveal behind (hover: hover) lets the first tap open
   the session directly on touch, while desktop behaviour is unchanged. */
@media (hover: hover) {
    .sessions-list .session-item:hover .session-workflow-icon,
    .sessions-list .session-item:hover .session-project-icon {
        opacity: 0;
    }

    .sessions-list .session-item:hover .session-pin-toggle-icon {
        opacity: 1;
    }
}

/* When pinned, keep the pin icon always slightly visible */
.sessions-list .session-item.pinned .session-pin-toggle-icon {
    opacity: 0;
    color: var(--primary-color, #3498db);
}

@media (hover: hover) {
    .sessions-list .session-item.pinned:hover .session-pin-toggle-icon {
        opacity: 1;
        color: var(--primary-color, #3498db);
    }
}

/* Persistent small pin indicator badge (top-right corner) */
.sessions-list .session-pin-indicator {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.55rem;
    color: var(--primary-color, #3498db);
    opacity: 0.65;
    transform: rotate(45deg);
    pointer-events: none;
}

.sessions-list .session-item {
    position: relative; /* needed for .session-pin-indicator absolute positioning */
}

/* ── Rename button in .session-title-row (right side, on hover) ──── */

.sessions-list .session-rename-btn {
    background: none;
    border: none;
    padding: 0 2px;
    margin-left: 4px;
    cursor: pointer;
    color: var(--text-secondary, #888);
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    line-height: 1;
    flex-shrink: 0;
}

@media (hover: hover) {
    .sessions-list .session-item:hover .session-rename-btn {
        opacity: 1;
    }
}

.sessions-list .session-rename-btn:hover {
    color: var(--primary-color, #3498db);
}

/* ── Privacy toggle button in .session-title-row (right side, on hover) ── */

.sessions-list .session-privacy-btn {
    background: none;
    border: none;
    padding: 0 2px;
    margin-left: 4px;
    cursor: pointer;
    color: var(--text-secondary, #888);
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    line-height: 1;
    flex-shrink: 0;
}

@media (hover: hover) {
    .sessions-list .session-item:hover .session-privacy-btn {
        opacity: 1;
    }
}

.sessions-list .session-privacy-btn:hover {
    color: var(--primary-color, #3498db);
}

/* ── Pinned sessions: subtle left border + STUCK to the top of the list ──
 *
 * "Pinned" has to mean "always reachable", not merely "sorted first" — a pin
 * that scrolls away with everything else is only a one-time sort. `.sessions-list`
 * is itself the scroll container (overflow-y: auto, position: relative), so these
 * stick to ITS scrollport.
 *
 * `--pin-sticky-top` is set per row by refreshPinnedStickyOffsets()
 * (session-list-query-apis.js), which stacks each pinned row below the previous
 * one from measured heights — with every row at top:0 they would pile up on top
 * of each other. It also caps the stack so pins can never eat the whole list.
 *
 * An opaque background is REQUIRED: .session-item is transparent by default, so
 * without it the unpinned rows scrolling underneath show straight through. */
.sessions-list .session-item.pinned {
    border-left: 5px solid var(--primary-color, #3498db);
    padding-left: 8px; /* compensate for border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: var(--pin-sticky-top, 0px);
    z-index: 3;
    background-color: var(--sidebar-bg);
}

/* The pinned background must not swallow the selected/hover states, which are
   the weaker selectors and would otherwise lose the cascade. Order mirrors the
   base rules (:hover first, .active last) so an active pinned row keeps the
   selected colour while hovered, exactly as an unpinned one does. */
.sessions-list .session-item.pinned:hover  { background-color: var(--surface-hover-bg); }
.sessions-list .session-item.pinned.active { background: var(--active-workflow-bg); }

/* Separates the stuck block from the rows sliding beneath it. Applied to the
   LAST stuck row only (marked in JS), so a single pin doesn't get a stray line. */
.sessions-list .session-item.pinned.pinned-stack-last {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px -4px rgba(0, 0, 0, 0.18);
}

/* Beyond the cap a pin keeps its sort position and border but scrolls normally —
   better than a stack tall enough to hide the list it is pinned in. */
.sessions-list .session-item.pinned.pinned-not-stuck {
    position: relative;
    top: auto;
    z-index: auto;
    background-color: transparent;
}

/* ── Pin action animations ───────────────────────────────────────── */

/* 1. Pin icon spins while the PATCH request is in flight */
@keyframes session-pin-spin {
    0%   { transform: rotate(45deg) scale(1); }
    40%  { transform: rotate(45deg) scale(1.35); }
    100% { transform: rotate(45deg + 360deg) scale(1); }
}

.sessions-list .session-icon .session-pin-toggle-icon.pin-icon-spinning {
    animation: session-pin-spin 0.5s ease-in-out;
    opacity: 1 !important;
    color: var(--primary-color, #3498db);
}

/* 2. Item fades down slightly before the DOM move */
@keyframes session-pin-depart {
    from { opacity: 1;   transform: translateY(0); }
    to   { opacity: 0;   transform: translateY(4px); }
}

.sessions-list .session-item.pin-departing {
    animation: session-pin-depart 0.18s ease forwards;
    pointer-events: none;
}

/* 3. Item slides in from above and glows blue after landing */
@keyframes session-pin-arrive-slide {
    from { opacity: 0;   transform: translateY(-10px); }
    to   { opacity: 1;   transform: translateY(0); }
}

@keyframes session-pin-arrive-glow {
    0%   { background-color: rgba(52, 152, 219, 0.22); }
    60%  { background-color: rgba(52, 152, 219, 0.12); }
    100% { background-color: transparent; }
}

.sessions-list .session-item.pin-arriving {
    animation:
        session-pin-arrive-slide 0.25s ease forwards,
        session-pin-arrive-glow  0.7s ease 0.15s forwards;
}

/* Dark theme glow variant */
body.dark-theme .sessions-list .session-item.pin-arriving {
    animation:
        session-pin-arrive-slide 0.25s ease forwards,
        session-pin-arrive-glow  0.7s ease 0.15s forwards;
}

/* ── Rename title saved animation ────────────────────────────────── */

/* Left-to-right shimmer sweep confirming the title was saved */
@keyframes session-title-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.sessions-list .session-title.title-saved {
    background-image: linear-gradient(
        90deg,
        transparent 20%,
        rgba(52, 152, 219, 0.35) 50%,
        transparent 80%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: session-title-shimmer 0.75s ease forwards;
    border-radius: 3px;
}

/* Fallback for browsers without background-clip: text */
@supports not (-webkit-background-clip: text) {
    .sessions-list .session-title.title-saved {
        background-image: none;
        animation: none;
        outline: 2px solid rgba(52, 152, 219, 0.45);
        outline-offset: 2px;
        border-radius: 3px;
        transition: outline-color 0.75s ease;
    }
}

/* ── Rename modal overlay ────────────────────────────────────────── */

.session-rename-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: session-modal-fadein 0.15s ease;
}

@keyframes session-modal-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.session-rename-modal {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 380px;
    max-width: 92vw;
    overflow: hidden;
    animation: session-modal-slidein 0.15s ease;
}

@keyframes session-modal-slidein {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.session-rename-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color, #eee);
}

.session-rename-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #888);
    font-size: 0.9rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.session-rename-close:hover {
    color: var(--text-color);
}

.session-rename-modal-body {
    padding: 14px 16px;
}

.session-rename-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg, #fff);
    color: var(--text-color);
    outline: none;
    transition: border-color 0.15s ease;
}

.session-rename-input:focus {
    border-color: var(--primary-color, #3498db);
}

.session-rename-hint {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
}

.session-rename-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--border-color, #eee);
}

.session-rename-cancel {
    background: none;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-secondary, #666);
    transition: background 0.15s ease;
}

.session-rename-cancel:hover {
    background: var(--surface-hover-bg);
}

.session-rename-save {
    background: var(--primary-color, #3498db);
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #fff;
    font-weight: 500;
    transition: opacity 0.15s ease;
}

.session-rename-save:hover {
    opacity: 0.88;
}

/* Dark theme adjustments */
body.dark-theme .session-rename-modal {
    background: var(--dark-card-bg, #2a2a2a);
    border-color: var(--dark-border-color, #444);
}

body.dark-theme .session-rename-input {
    background: var(--dark-input-bg, #333);
    border-color: var(--dark-border-color, #555);
    color: var(--dark-text-color, #eee);
}

body.dark-theme .session-rename-modal-header,
body.dark-theme .session-rename-modal-footer {
    border-color: var(--dark-border-color, #444);
}

/* Collapsed state */
.sidebar.collapsed .sessions-list-container {
    display: none;
}

.sidebar.collapsed .sidebar-separator {
    display: none;
}

button.transcript-toggle-btn:hover {
    background-color: var(--accent-color);
    color: white;
}

button.transcript-toggle-btn {
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--message-user-bg);
    cursor: pointer;
    border: 1px solid grey;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.transcript-toggle-btn i {
    padding-right: 5px;
}

.toggle-icon-container {
    display: inline-block;
    margin-right: 5px;
    color: #3498db; /* Blue color for the toggle */
}

.toggle-off-icon, .toggle-on-icon {
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.toggle-on-icon {
    color: #2ecc71; /* Green color when toggled on */
}

.sticky-player-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.sticky-player-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.messages-wrapper,
#chatMessages {
  scroll-behavior: smooth;   /* any programmatic scroll now animates */
}

@media (min-width: 769px) {
    /* Show mobile search bar */
    .mobile-search-bar {
        display: block;
        padding: 8px 5px;   /* Reduced side padding */
    }
    
    /* Show desktop search bar */
    .chat-header .search-container {
        display: flex;
    }
}

/* Realtime Voice Modal */
.realtime-voice-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.realtime-voice-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.realtime-voice-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    display: none;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.realtime-voice-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #212529;
}

.realtime-voice-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.realtime-voice-modal-close:hover {
    background: #e9ecef;
    color: #212529;
}

.realtime-voice-modal-body {
    padding: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .realtime-voice-modal-content {
        background: #1a1a1a;
    }
    
    .realtime-voice-modal-header {
        background: #2d2d2d;
        border-bottom-color: #404040;
    }
    
    .realtime-voice-modal-header h3 {
        color: #ffffff;
    }
    
    .realtime-voice-modal-close {
        color: #adb5bd;
    }
    
    .realtime-voice-modal-close:hover {
        background: #404040;
        color: #ffffff;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .realtime-voice-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
}

/* ============================================================================
   Recent Sessions — empty states
   ============================================================================
   Shown by renderSessionsEmptyState() (session-list-query-apis.js) when the
   list has zero sessions and no active search. Scoped to #sessionsList so the
   generic-sounding class names cannot reach any other panel.
   ========================================================================= */

#sessionsList .sessions-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 32px 20px;
    color: var(--text-secondary, #666);
}

#sessionsList .sessions-empty-state__icon {
    font-size: 26px;
    opacity: 0.35;
    margin-bottom: 2px;
}

#sessionsList .sessions-empty-state__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color, #222);
}

#sessionsList .sessions-empty-state__body {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 260px;
}

#sessionsList .sessions-empty-state__cta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: var(--accent-color, #2d5f84);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

#sessionsList .sessions-empty-state__cta:hover { filter: brightness(1.08); }

#sessionsList .sessions-empty-state__secondary {
    background: none;
    border: none;
    padding: 2px;
    font-size: 12.5px;
    color: var(--text-secondary, #666);
    text-decoration: underline;
    cursor: pointer;
}

#sessionsList .sessions-empty-state__secondary:hover { color: var(--text-color, #222); }

/* The empty state POINTS at the real control, which lives outside #sessionsList
   (the header "New chat" button, or the Teams "New conversation" FAB pinned to
   the sidebar). Both class names are specific to those two buttons, so these
   rules cannot leak into another component. The pulse is removed as soon as the
   list has any session in it. */
.new-session-button.session-empty-pointer-target,
.teams-new-convo-fab.session-empty-pointer-target {
    position: relative;
    animation: session-empty-pointer-pulse 1.9s ease-in-out infinite;
}

.new-session-button.session-empty-pointer-target::after,
.teams-new-convo-fab.session-empty-pointer-target::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    border: 2px solid var(--accent-color, #2d5f84);
    opacity: 0;
    animation: session-empty-pointer-ring 1.9s ease-out infinite;
    pointer-events: none;
}

@keyframes session-empty-pointer-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@keyframes session-empty-pointer-ring {
    0%   { opacity: 0.75; transform: scale(0.9); }
    70%  { opacity: 0;    transform: scale(1.25); }
    100% { opacity: 0;    transform: scale(1.25); }
}

/* Respect a reduced-motion preference: keep the ring as a static highlight so
   the affordance survives without the movement. */
@media (prefers-reduced-motion: reduce) {
    .new-session-button.session-empty-pointer-target,
    .teams-new-convo-fab.session-empty-pointer-target { animation: none; }
    .new-session-button.session-empty-pointer-target::after,
    .teams-new-convo-fab.session-empty-pointer-target::after { animation: none; opacity: 0.75; }
}