/* ============================================
   CHATLEMUR - APPLE HIG CHAT UI STYLES
   Inspired by Apple Messages & iCloud.com
   Accessibility: WCAG 2.1 AAA compliant
   ============================================ */

/* Design tokens are the single source of truth — imported, never copied.
   @import MUST precede every style rule (CSS spec), so it sits above all else. */
@import url("tokens.css");

/* Guarantee [hidden] always wins over component display: flex/grid overrides */
[hidden] { display: none !important; }

/* ============================================
   RESET & BASE STYLES
   ============================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-system);
    font-size: var(--text-base);
    line-height: 1.47;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow: hidden;
}

/* ============================================
   ACCESSIBILITY - WCAG 2.1 AAA
   ============================================ */

/* Skip Links */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 10000;
    padding: var(--space-3) var(--space-4);
    background: var(--apple-blue);
    color: white;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
    box-shadow: var(--focus-ring);
}

/* Visually Hidden (Screen Reader Only) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus States - High Visibility */
:focus {
    /* Keep browser default for non-keyboard focus; :focus-visible handles keyboard */
}

:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode — token overrides live in tokens.css; component rule stays here */
@media (prefers-contrast: high) {
    .message-bubble {
        border: 2px solid currentColor;
    }
}

/* ============================================
   LAYOUT - App Container
   ============================================ */

.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-primary);
    overflow: hidden;
}

/* ============================================
   SIDEBAR - Conversation List
   ============================================ */

.sidebar {
    width: var(--sidebar-width);
    height: 100%;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform var(--transition-slow);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    min-height: var(--header-height);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
}

/* Profile dropdown menu (Settings / Log out). Toggle via [hidden]; the two
   guarded rules below avoid the UA [hidden] vs author display collision. */
.profile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 180px;
    margin-top: 6px;
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
}
.profile-menu[hidden] { display: none; }
.profile-menu:not([hidden]) { display: flex; }
.profile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.profile-menu-item:hover,
.profile-menu-item:focus {
    background: var(--bg-hover);
    outline: none;
}

.avatar-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-full);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--apple-blue), #5856D6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
}

.avatar-initials {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
}

.user-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--apple-gray-3);
}

.status-indicator.online {
    background: var(--apple-green);
}

.status-indicator.away {
    background: var(--apple-orange);
}

/* Icon Button */
.icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--apple-blue);
    cursor: pointer;
    transition: background var(--transition-fast);
}

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

.icon-button:active {
    background: var(--bg-active);
}

/* Search Container */
.search-container {
    padding: var(--space-3) var(--space-4);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--text-tertiary);
    pointer-events: none;
}

.search-input {
    width: 100%;
    height: 36px;
    padding: 0 var(--space-3) 0 calc(var(--space-3) + 20px);
    font-family: var(--font-system);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-input:focus {
    background: var(--bg-tertiary);
    border-color: var(--apple-blue);
    box-shadow: var(--focus-ring);
}

/* Conversation List */
.conversation-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.conversations {
    list-style: none;
    padding: var(--space-2);
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 5px var(--space-3);   /* reduced from var(--space-3) top/bottom — ~30% savings */
    min-height: 32px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}

.conversation-item:hover {
    background: var(--bg-hover);
}

.conversation-item:focus {
    outline: revert;
}

.conversation-item:focus-visible {
    background: var(--bg-hover);
    box-shadow: inset 0 0 0 2px var(--apple-blue);
}

.conversation-item.active {
    background: var(--bg-active);
}

.conversation-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.conversation-avatar.ai {
    background: linear-gradient(135deg, var(--apple-blue), #5856D6);
}

.conversation-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.conversation-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread-badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: 10px;
    background: var(--text-link, #2563eb);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.unread-badge.has-mention {
    background: var(--apple-red, #dc2626);
}

.conversation-time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.conversation-preview {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.unread-badge {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--apple-blue);
    color: white;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar section headers (Channels / DMs) */
.sidebar-sections {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--space-2);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4) var(--space-1);
}
.sidebar-section-header--dm { margin-top: var(--space-3); }

.sidebar-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.sidebar-section-action {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px touch target (Apple HIG), icon visually centred */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: -12px -12px -12px auto; /* pull back visual spacing */
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-section-action:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success, #34C759);
    flex-shrink: 0;
}

.conversation-empty-state {
    padding: var(--space-3) var(--space-4);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-style: italic;
    list-style: none;
}

/* DM modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal-overlay[hidden] {
    display: none;
}

.modal-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl, 16px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    animation: modal-in 0.2s ease;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-subtitle {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    padding: var(--space-2) var(--space-4) 0;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* New-channel modal form */
#channel-create-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-4);
}
.channel-modal-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.channel-modal-input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color-strong);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}
.channel-modal-input:focus {
    outline: 2px solid var(--text-link);
    outline-offset: 1px;
    border-color: var(--text-link);
}
.channel-modal-error {
    margin: 0;
    color: var(--apple-red);
    font-size: 0.85rem;
}
.channel-modal-error[hidden] { display: none; }
.channel-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
.channel-btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.channel-btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}
.channel-btn--primary {
    background: var(--text-link);
    color: var(--text-inverse);
}
.channel-btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}

.modal-close:hover {
    background: var(--bg-hover, var(--border-color));
    color: var(--text-primary);
}

.online-users-list {
    list-style: none;
    padding: var(--space-2) 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
}

.online-user-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.online-user-item:hover {
    background: var(--bg-tertiary);
}

.online-user-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.online-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.online-user-name {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
}

.online-user-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-success, #34C759);
}

.online-user-loading {
    padding: var(--space-4);
    color: var(--text-tertiary);
    font-style: italic;
    text-align: center;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-color);
}

.settings-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.settings-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ============================================
   SIDEBAR TOGGLE (Mobile)
   ============================================ */

.sidebar-toggle {
    display: none;
    /* fixed (not absolute) so the "open conversation sidebar" control stays
       pinned to the viewport and is always reachable — it must never scroll
       away behind a long message list, which a screen-reader user cannot see. */
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    width: 44px;
    height: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

/* Header theme toggle — hidden on desktop (sidebar has it), shown on mobile */
.theme-toggle-header { display: none; }
@media (max-width: 768px) {
    .theme-toggle-header { display: flex; }
}

/* ============================================
   COLLAPSIBLE SIDEBAR — icon rail mode
   ============================================ */

/* Collapse toggle button */
.sidebar-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sidebar-collapse-btn:focus-visible { outline: 2px solid var(--apple-blue); outline-offset: 2px; }
.sidebar-collapse-btn svg { width: 18px; height: 18px; }
body.sidebar-collapsed .sidebar-collapse-btn svg { transform: scaleX(-1); }

/* Collapsed sidebar — 64px icon rail */
body.sidebar-collapsed .sidebar {
    width: 64px;
    min-width: 64px;
    overflow: hidden;
}
body.sidebar-collapsed .sidebar-section-title,
body.sidebar-collapsed .sidebar-section-action,
body.sidebar-collapsed .user-info,
body.sidebar-collapsed .user-name,
body.sidebar-collapsed .user-status,
body.sidebar-collapsed .sidebar-header .user-info,
body.sidebar-collapsed .conversation-name,
body.sidebar-collapsed .conversation-preview,
body.sidebar-collapsed .conversation-content,
body.sidebar-collapsed .sidebar-footer-text,
body.sidebar-collapsed .sidebar-footer-label,
body.sidebar-collapsed .new-channel-btn span,
body.sidebar-collapsed .webhook-help-panel,
body.sidebar-collapsed .search-container {
    display: none !important;
}
body.sidebar-collapsed .conversation-item {
    justify-content: center;
    padding: 10px 0;
    border-radius: 8px;
    margin: 2px 8px;
}
body.sidebar-collapsed .sidebar-sections {
    padding: 0;
}
body.sidebar-collapsed .sidebar-section-header {
    justify-content: center;
    padding: 8px 0;
}
body.sidebar-collapsed .sidebar-footer {
    padding: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
body.sidebar-collapsed .settings-button span,
body.sidebar-collapsed .upgrade-cta-btn span {
    display: none !important;
}
body.sidebar-collapsed .settings-button,
body.sidebar-collapsed .upgrade-cta-btn {
    justify-content: center;
    width: 44px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
}
/* On mobile, never collapse — use mobile sidebar toggle instead */
@media (max-width: 768px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
        min-width: unset;
    }
    .sidebar-collapse-btn { display: none; }
}

/* ============================================
   MAIN CHAT AREA
   ============================================ */

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;       /* required: flex child must opt-in so parent can constrain it */
    overflow: hidden;    /* prevents messages expanding layout beyond 100dvh */
    background: var(--bg-primary);
}

/* Chat Header */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    min-height: var(--header-height);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mobile-back-button {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--apple-blue);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--apple-blue), #5856D6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.chat-info {
    display: flex;
    flex-direction: column;
}

.chat-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    /* button reset */
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
    font-family: var(--font-system);
    text-align: left;
}

.chat-status--offline {
    cursor: pointer;
    /* #D00000 on white = 5.8:1 — passes WCAG 4.5:1 AA */
    color: #D00000;
}

.chat-status--offline:hover {
    text-decoration: underline;
}

.chat-status--offline:focus-visible {
    text-decoration: underline;
    /* inherit global :focus-visible ring — do NOT override with outline: none */
}

.chat-header-actions {
    display: flex;
    gap: var(--space-2);
    position: relative;
}

/* Collapsed "More" dropdown — voice/video/Discord TTS off primary chrome */
.header-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    min-width: 180px;
    padding: var(--space-1) 0;
    z-index: 200;
    animation: modal-in 0.15s ease;
}

.header-more-menu[hidden] {
    display: none;
}

.header-more-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
    min-height: 44px;
}

.header-more-item:hover {
    background: var(--bg-tertiary);
}

.header-more-item--danger {
    color: var(--color-error, #e53e3e);
}

.header-more-item--danger:hover {
    background: color-mix(in srgb, var(--color-error, #e53e3e) 12%, transparent);
}

/* ============================================
   OFFLINE STATUS BANNER
   ============================================ */

.status-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: #FF3B30;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--space-2) var(--space-4);
    /* shown/hidden via `hidden` attribute */
}

.status-banner[hidden] { display: none; }

.status-banner-retry {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-family: var(--font-system);
    padding: 3px var(--space-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* WCAG 2.5.5: minimum 44×44 px touch target */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.status-banner-retry:hover,
.status-banner-retry:focus-visible {
    background: rgba(255, 255, 255, 0.35);
}

.status-banner-retry:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ============================================
   MESSAGES CONTAINER
   ============================================ */

.messages-container {
    flex: 1;
    min-height: 0;       /* allows flex child to scroll instead of expanding */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: var(--space-4);
    /* scroll-behavior handled by JS — smooth for user actions, instant during streaming */
    display: flex;
    flex-direction: column;
}

.messages-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 800px;
    margin: auto auto 0; /* pushes messages to bottom when content is short; auto-top collapses when overflowing */
    flex: 0 0 auto;
    width: 100%;
}

/* Date Separator */
.date-separator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: 0 var(--space-4);
}

.date-separator::before,
.date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--divider-color);
}

.date-separator span,
.date-separator-text {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ============================================
   MESSAGE BUBBLES - Apple Messages Style
   ============================================ */

.message {
    display: flex;
    gap: var(--space-2);
    max-width: 85%;
    animation: messageAppear 0.3s var(--transition-spring) both;
}

.message.appear {
    animation: messageAppear 0.3s var(--transition-spring) both;
}

@keyframes messageAppear {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* AI Messages - Left aligned, gray bubble */
.message.ai {
    align-self: flex-start;
    flex-direction: row;
}

.message.ai .message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--apple-blue), #5856D6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    align-self: flex-end;
}

.message.ai .message-bubble {
    background: var(--bg-bubble-ai);
    color: var(--text-primary);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
}

/* User Messages - Right aligned, blue bubble */
.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message.user .message-bubble {
    background: var(--bg-bubble-user);
    color: var(--text-inverse);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
}

/* Message Content */
.message-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.message.user .message-content {
    align-items: flex-end;
}

.message-bubble {
    padding: var(--space-3) var(--space-4);
    line-height: 1.47;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.message-bubble p {
    margin: 0;
    color: inherit;
}

.message-bubble p + p {
    margin-top: var(--space-2);
}

.message-bubble ul,
.message-bubble ol {
    margin: var(--space-2) 0;
    padding-left: var(--space-5);
}

.message-bubble li {
    margin: var(--space-1) 0;
    color: inherit;
}

.message-bubble pre {
    margin: var(--space-2) 0;
    padding: var(--space-3);
    padding-top: calc(var(--space-3) + 28px); /* room for copy button */
    background: #1e2937;
    color: #f1f5f9;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    position: relative;
}

/* Copy button injected by JS into each <pre> block */
.code-copy-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 2px var(--space-2);
    cursor: pointer;
    min-height: 24px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.code-copy-btn:hover,
.code-copy-btn:focus-visible {
    background: var(--apple-blue);
    color: #fff;
    border-color: var(--apple-blue);
    outline: none;
}

.message.user .message-bubble pre {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
}

.message-bubble code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: inherit;
}

/* Message Meta */
.message-time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    padding: 0 var(--space-1);
}

.message.user .message-time {
    color: var(--text-tertiary);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.message-status {
    display: flex;
    align-items: center;
    color: var(--apple-gray-3);
}

.message-status.read {
    color: var(--apple-blue);
}

/* Message time cursor hint for hover timestamp */
.message-time[title] {
    cursor: help;
}

/* Markdown content inside AI bubble (avoids double styling) */
.message-bubble.markdown-content { color: inherit; }
.message-bubble.markdown-content > *:first-child { margin-top: 0; }
.message-bubble.markdown-content > *:last-child { margin-bottom: 0; }
.message-bubble.markdown-content h1,
.message-bubble.markdown-content h2,
.message-bubble.markdown-content h3 {
    font-size: 1em;
    font-weight: 600;
    margin: 0.4em 0 0.2em;
    color: inherit;
}

/* Typing Indicator */
.message.typing .message-bubble {
    padding: var(--space-3) var(--space-4);
}

.typing-bubble {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--apple-gray-2);
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-4px);
    }
}

/* ============================================
   INPUT AREA
   ============================================ */

.chat-input-area {
    flex-shrink: 0;      /* never let the input area compress — always visible */
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

/* Quick-command chip toolbar — mobile only */
.cmd-chips {
    display: none; /* shown in @media block below */
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cmd-chips::-webkit-scrollbar { display: none; }

.cmd-chip {
    flex-shrink: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--apple-blue);
    font-family: var(--font-system);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 0 var(--space-3);
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cmd-chip:active,
.cmd-chip:focus-visible {
    background: var(--apple-blue);
    color: #fff;
    outline: none;
}

/* ── Agent / Mode Selector (Liquid Glass, HIG 2026) ────────────────── */
.compose-context {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 800px;
    margin: 0 auto var(--space-2);
    position: relative;
}

.compose-context-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    user-select: none;
}

.agent-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-3);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-system);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
    min-width: 48px; /* HIG 2026 touch target */
    min-height: 48px; /* HIG 2026 — met via padding at render */
    box-sizing: border-box;
}

.agent-selector-btn:hover {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: var(--shadow-sm);
}

.agent-selector-btn:active {
    transform: scale(0.97);
}

.agent-selector-btn:focus-visible {
    box-shadow: var(--focus-ring);
}

.agent-selector-btn[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chevron-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-icon {
    font-size: 1rem;
    line-height: 1;
}

.agent-type-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--apple-blue);
    background: var(--apple-blue-light);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    line-height: 1.5;
}

/* Agent listbox dropdown */
#agent-listbox {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    z-index: 1000;
    animation: listbox-appear 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes listbox-appear {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    @keyframes listbox-appear { from { opacity: 0; } to { opacity: 1; } }
    .agent-selector-btn { transition: none; }
}

#agent-listbox[hidden] { display: none; }

#agent-listbox [role="option"] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    min-height: 48px; /* HIG 2026 */
}

#agent-listbox [role="option"]:hover,
#agent-listbox [role="option"]:focus {
    background: var(--bg-hover);
}

#agent-listbox [role="option"][aria-selected="true"] {
    background: var(--bg-active);
}

.option-icon { font-size: 1.25rem; flex-shrink: 0; }

.option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.option-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.option-check {
    flex-shrink: 0;
    color: var(--apple-blue);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

#agent-listbox [role="option"][aria-selected="true"] .option-check {
    opacity: 1;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
    .agent-selector-btn {
        background: rgba(44, 44, 46, 0.75);
    }
    .agent-selector-btn:hover {
        background: rgba(58, 58, 60, 0.9);
    }
    #agent-listbox {
        background: rgba(28, 28, 30, 0.92);
    }
}

html[data-theme="dark"] .agent-selector-btn {
    background: rgba(44, 44, 46, 0.75);
}
html[data-theme="dark"] .agent-selector-btn:hover {
    background: rgba(58, 58, 60, 0.9);
}
html[data-theme="dark"] #agent-listbox {
    background: rgba(28, 28, 30, 0.92);
}
/* ── End Agent Selector ─────────────────────────────────────────────── */

.input-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-2);
    transition: all var(--transition-fast);
}

.input-form:focus-within {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.input-actions-left,
.input-actions-right {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Slash-commands toggle — only useful on mobile where chips are hidden by default */
.cmd-chips-toggle { display: none; }

.input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
}

.chat-input {
    width: 100%;
    padding: var(--space-2) var(--space-2);
    font-family: var(--font-system);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: transparent;
    border: none;
    resize: none;
    line-height: 1.47;
    max-height: 150px;
    overflow-y: auto;
}

.chat-input::placeholder {
    color: var(--text-tertiary);
}

.chat-input:focus {
    outline: revert;
}

/* Voice Button */
.voice-button {
    color: var(--apple-gray);
    position: relative;
    transition: all var(--transition-fast);
}

.voice-button:hover {
    color: var(--text-primary);
}

.voice-button:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
    border-radius: var(--radius-full);
}

.voice-button.active {
    color: var(--apple-red);
    animation: voicePulse 1.5s ease-in-out infinite;
}

/* Red listening indicator dot */
.voice-button.active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--apple-red);
    border-radius: 50%;
    animation: indicatorPulse 1s ease-in-out infinite;
}

@keyframes voicePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes indicatorPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.8);
    }
}

/* Voice button unsupported state */
.voice-button:disabled,
.voice-button[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Send Button */
.send-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--apple-blue);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.send-button:disabled {
    background: var(--apple-gray-4);
    cursor: not-allowed;
}

.send-button:not(:disabled):hover {
    background: var(--apple-blue-hover);
    transform: scale(1.05);
}

.send-button:not(:disabled):active {
    transform: scale(0.95);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
    }
    
    .sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }

    /* Backdrop: dims main area when sidebar is open — tap to close */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 190;
        transition: opacity 0.25s;
    }

    .sidebar-backdrop[hidden] {
        display: none;
    }

    .sidebar-toggle {
        display: flex;
        z-index: 250; /* above sidebar z-index 200 so it stays tappable when sidebar is open */
    }
    
    .mobile-back-button {
        display: flex;
    }
    
    .chat-header {
        padding-left: calc(var(--space-4) + 50px);
    }
    
    .message {
        max-width: 90%;
    }
    
    .messages-container {
        padding: var(--space-3);
    }
    
    .chat-input-area {
        padding: var(--space-2) var(--space-3);
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 280px;
    }

    /* iPad: 16px minimum prevents iOS/iPadOS auto-zoom on input focus */
    .chat-input,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px;
    }
}

/* Large screens */
@media (min-width: 1400px) {
    :root {
        --sidebar-width: 360px;
    }
    
    .messages-list {
        max-width: 900px;
    }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--apple-gray-4);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--apple-gray-3);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--apple-gray-4) transparent;
}

/* ============================================
   UTILITIES
   ============================================ */

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* Print styles */
@media print {
    .sidebar,
    .chat-header,
    .chat-input-area,
    .skip-link {
        display: none !important;
    }
    
    .messages-container {
        overflow: visible;
        padding: 0;
    }
    
    .message-bubble {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ============================================
   WEBSOCKET CHAT - REAL-TIME STYLES
   ============================================ */

/* Received Messages (from other users) */
.message.received {
    align-self: flex-start;
    flex-direction: row;
}

.message.received .message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #5856D6, #AF52DE);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    align-self: flex-end;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.message.received .message-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.message.received .message-avatar .avatar-initials {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.message.received .message-bubble {
    background: var(--bg-bubble-ai);
    color: var(--text-primary);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
}

.message.received .message-sender {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
    padding-left: var(--space-1);
}

/* AI Assistant Message Styling */
.message.ai-message {
    /* Inherit received styles, add AI-specific tweaks */
}

.message.ai-message .ai-avatar {
    background: linear-gradient(135deg, #10B981, #3B82F6) !important;
}

.message.ai-message .ai-initials {
    font-size: 1.2rem;
    line-height: 1;
}

.message.ai-message .ai-bubble {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.message.ai-message .ai-sender {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: linear-gradient(135deg, #10B981, #3B82F6);
    color: white;
    font-size: 10px;
    font-weight: var(--weight-bold);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-model {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: var(--weight-normal);
}

/* System Messages (join/leave) */
.message.system {
    align-self: center;
    padding: var(--space-2) 0;
}

.system-message {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
    .message.received .message-avatar {
        background: linear-gradient(135deg, #5E5CE6, #BF5AF2);
    }
    
    .system-message {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
    }
}

/* Connection Status Indicators */
.status-indicator.connecting {
    background-color: var(--apple-orange);
    animation: pulse 1.5s infinite;
}

.status-indicator.offline {
    background-color: #D00000;
    /* Match text color for consistency */
    width: 10px;
    height: 10px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Message appear animation */
.message {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.message.appear {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SITE FOOTER - Apple HIG Design
   Clean, minimal, accessible
   ============================================ */

/* Footer with DISTINCT complementary color - Soft lavender tint from Lemur Purple */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(180deg, #F0EBF8 0%, #E8E0F4 100%);
    border-top: 1px solid rgba(124, 58, 237, 0.15);
    padding: var(--space-2) var(--space-4);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
}

@supports (backdrop-filter: blur(20px)) {
    .site-footer {
        background: linear-gradient(180deg, rgba(240, 235, 248, 0.95) 0%, rgba(232, 224, 244, 0.95) 100%);
    }
}

/* Theme Toggle Button - Apple HIG Style */
.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

/* Dark mode: show sun, hide moon */
.dark-mode .theme-toggle .sun-icon,
html[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

.dark-mode .theme-toggle .moon-icon,
html[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

.theme-icon {
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.theme-toggle:hover .theme-icon {
    transform: rotate(15deg);
}

.theme-toggle:active .theme-icon {
    transform: scale(0.9);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-mascot {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.footer-mascot:hover {
    transform: scale(1.1) rotate(-5deg);
}

.footer-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.footer-link {
    font-size: var(--text-xs);
    color: var(--text-link);
    text-decoration: none;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.footer-link:hover {
    background: var(--bg-hover);
    color: var(--apple-blue-hover);
}

.footer-link:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
}

.footer-divider {
    color: var(--text-tertiary);
    user-select: none;
}

.footer-legal {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    text-align: right;
}

.footer-location {
    display: block;
    margin-top: 2px;
    font-size: 0.625rem;
    color: var(--text-tertiary);
}

/* Adjust main chat area to account for footer */
.chat-area {
    padding-bottom: calc(80px + var(--space-4));
}

.chat-input-area {
    bottom: 52px;
}

/* Dark mode footer */
@media (prefers-color-scheme: dark) {
    .site-footer {
        background: rgba(28, 28, 30, 0.85);
        border-top-color: rgba(255, 255, 255, 0.08);
    }
    
    .footer-name {
        color: var(--text-primary);
    }
    
    .footer-link {
        color: #64D2FF;
    }
    
    .footer-link:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* Mobile responsive footer */
@media (max-width: 768px) {
    .site-footer {
        padding: var(--space-2) var(--space-3);
    }
    
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }
    
    .footer-legal {
        text-align: center;
    }
    
    .chat-input-area {
        bottom: 72px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .footer-mascot {
        transition: none;
    }
    
    .footer-mascot:hover {
        transform: none;
    }
}

/* ============================================
   WAVE SEPARATOR - "Lemur Leap" Design
   Original ChatLemur curve design
   ============================================ */

.wave-separator {
    position: fixed;
    bottom: 80px; /* Above footer */
    left: 0;
    right: 0;
    z-index: 99;
    height: 40px;
    pointer-events: none;
    overflow: hidden;
}

.wave-separator svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* CSS Variable for wave gradient */
:root {
    --lemur-purple: #7C3AED;
}

/* Dark mode wave */
.dark-mode .wave-separator svg path,
html[data-theme="dark"] .wave-separator svg path {
    fill: url(#lemurWaveGradientDark);
}

/* ============================================
   UPDATED SITE FOOTER - Centered Design
   Apple HIG with version number
   ============================================ */

.site-footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-3) var(--space-4);
}

.site-footer .footer-mascot-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.site-footer .footer-mascot {
    transition: transform 0.3s ease;
}

.site-footer .footer-mascot:hover {
    transform: scale(1.1) rotate(-5deg);
}

.site-footer .footer-brand {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: #5B21B6; /* Darker purple for contrast on lavender */
    margin: 0 0 var(--space-1) 0;
    letter-spacing: -0.02em;
}

.site-footer .footer-tagline {
    font-size: var(--text-sm);
    color: #6B7280;
    margin: 0 0 var(--space-2) 0;
}

.site-footer .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.site-footer .footer-link {
    font-size: var(--text-xs);
    color: #7C3AED;
    text-decoration: none;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.site-footer .footer-link:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #5B21B6;
}

.site-footer .footer-link:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

.site-footer .footer-divider {
    color: var(--text-tertiary);
    user-select: none;
}

.site-footer .footer-version {
    font-size: var(--text-xs);
    color: #7C3AED;
    font-weight: var(--weight-medium);
    margin: 0 0 var(--space-1) 0;
    font-family: var(--font-mono);
}

.site-footer .footer-copyright {
    font-size: var(--text-xs);
    color: #9CA3AF;
    margin: 0;
}

/* Dark mode footer text colors */
.dark-mode .site-footer .footer-brand,
html[data-theme="dark"] .site-footer .footer-brand {
    color: #A78BFA;
}

.dark-mode .site-footer .footer-tagline,
html[data-theme="dark"] .site-footer .footer-tagline {
    color: #9CA3AF;
}

.dark-mode .site-footer .footer-version,
html[data-theme="dark"] .site-footer .footer-version {
    color: #C4B5FD;
}

.dark-mode .site-footer .footer-copyright,
html[data-theme="dark"] .site-footer .footer-copyright {
    color: #6B7280;
}

/* Adjust for wave separator above footer */
.chat-input-area {
    bottom: 92px; /* 80px footer + ~12px wave overlap */
}

@media (max-width: 768px) {
    .wave-separator {
        height: 30px;
        bottom: 100px;
    }
    
    .chat-input-area {
        bottom: 112px;
    }
}

/* ── TTS speak button ───────────────────────────────────────────────── */

/*
 * message-actions (copy / like / dislike) — hidden until the message
 * is hovered or receives keyboard focus. Stays visible while a pressed
 * state is active (e.g. after user likes/dislikes) so it never disappears
 * mid-interaction. The TTS controls (.tts-controls) stay always-visible.
 */
/* Liked state — green fill */
.like-btn[aria-pressed="true"] svg,
.like-btn.feedback-active svg {
    fill: var(--apple-green);
    stroke: var(--apple-green);
}
.like-btn[aria-pressed="true"],
.like-btn.feedback-active {
    color: var(--apple-green);
    background: rgba(52, 199, 89, 0.12);
    border-radius: var(--radius-sm);
}

/* Disliked state — red fill */
.dislike-btn[aria-pressed="true"] svg,
.dislike-btn.feedback-active svg {
    fill: var(--apple-red);
    stroke: var(--apple-red);
}
.dislike-btn[aria-pressed="true"],
.dislike-btn.feedback-active {
    color: var(--apple-red);
    background: rgba(255, 59, 48, 0.10);
    border-radius: var(--radius-sm);
}

/* ── Share sheet (desktop dropdown) ─────────────────────────────────── */
.share-sheet {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 9999;
    min-width: 160px;
}
[data-theme="dark"] .share-sheet {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
.share-sheet-item {
    padding: 8px 16px;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm, 14px);
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.share-sheet-item:hover,
.share-sheet-item:focus-visible {
    background: var(--bg-hover);
}

.message-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
    opacity: 0;
    pointer-events: none;   /* block mouse clicks when invisible */
    transition: opacity 0.15s ease;
    /* NOTE: intentionally NOT using visibility:hidden — Joe uses VoiceOver (blind).
       opacity:0 keeps buttons in the a11y tree so Tab/VoiceOver can still reach them. */
}

/* Reveal on hover over the parent message article */
article.message:hover .message-actions,
/* Reveal when focus is anywhere inside the message (keyboard nav) */
article.message:focus-within .message-actions,
/* Keep visible while a feedback button is active */
.message-actions:has(.like-btn[aria-pressed="true"]),
.message-actions:has(.dislike-btn[aria-pressed="true"]) {
    opacity: 1;
    pointer-events: auto;
}

/* Fallback for browsers without :has() — keep visible once any btn focused */
.message-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
}

/* Always fully visible on touch/hover-none devices */
@media (hover: none) {
    .message-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

.tts-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
    line-height: 1;
}

.tts-btn:hover:not(:disabled) {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.tts-btn:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.tts-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

/* ── Copy / Like / Dislike / Share action buttons ────────────────────── */
.copy-btn,
.like-btn,
.dislike-btn,
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s, color 0.15s, transform 0.1s;
    line-height: 1;
    min-height: 28px;
    white-space: nowrap;
}

.copy-btn:hover:not(:disabled),
.like-btn:hover:not(:disabled),
.dislike-btn:hover:not(:disabled),
.share-btn:hover:not(:disabled) {
    opacity: 1;
}

.copy-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.like-btn:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.dislike-btn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.share-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    color: var(--apple-blue);
}

.like-btn.feedback-active,
.dislike-btn.feedback-active {
    opacity: 1;
    transform: scale(1.2);
}

.like-btn[aria-pressed="true"] {
    background: rgba(34, 197, 94, 0.2);
    opacity: 1;
}

.dislike-btn[aria-pressed="true"] {
    background: rgba(239, 68, 68, 0.2);
    opacity: 1;
}

.copy-btn:focus,
.like-btn:focus,
.dislike-btn:focus {
    outline: 2px solid var(--accent, #7c3aed);
    outline-offset: 2px;
}

.copy-btn:disabled,
.like-btn:disabled,
.dislike-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

/* Inline "Thanks!" confirmation that appears after submitting feedback */
.feedback-thanks {
    display: none;
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
    margin-left: 4px;
    font-weight: 500;
    letter-spacing: 0.01em;
    animation: feedback-thanks-fade-in 0.15s ease;
}

@keyframes feedback-thanks-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Trading Card — Apple HIG Glassmorphism ─────────────────────────── */
.trading-card-wrapper {
    display: flex;
    justify-content: flex-start;
    padding: 4px 12px 4px 12px;
}

.trading-card {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    max-width: 340px;
    padding: 0;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
}

.trading-card.appear {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.trading-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transform: translateY(-1px) scale(1);
}

/* Dark mode — glassmorphism on dark surface */
.dark-mode .trading-card,
[data-theme="dark"] .trading-card {
    background: rgba(28, 28, 58, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.dark-mode .trading-card:hover,
[data-theme="dark"] .trading-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

/* Card inner sections */
.tc-top {
    padding: 16px 16px 12px;
}

.tc-bottom {
    padding: 12px 16px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}

.dark-mode .tc-bottom,
[data-theme="dark"] .tc-bottom {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Header row: coin icon + symbol + source badge */
.tc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Coin icon — gradient circle with symbol letter */
.tc-coin-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
    letter-spacing: 0;
}

.tc-coin-icon[data-symbol="BTC"] { background: linear-gradient(135deg, #F7931A 0%, #FFBE5C 100%); }
.tc-coin-icon[data-symbol="ETH"] { background: linear-gradient(135deg, #627EEA 0%, #A8BCFF 100%); }
.tc-coin-icon[data-symbol="BNB"] { background: linear-gradient(135deg, #F3BA2F 0%, #FFD966 100%); }
.tc-coin-icon[data-symbol="SOL"] { background: linear-gradient(135deg, #9945FF 0%, #14F195 100%); }
.tc-coin-icon[data-symbol="XRP"] { background: linear-gradient(135deg, #00AAE4 0%, #88DDFF 100%); }
.tc-coin-icon[data-symbol="DOGE"] { background: linear-gradient(135deg, #C2A633 0%, #F0D060 100%); }

.tc-symbol-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.tc-symbol {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.dark-mode .tc-symbol,
[data-theme="dark"] .tc-symbol { color: #f1f5f9; }

.tc-name {
    font-size: 11px;
    color: #64748b;
    line-height: 1.2;
}

.dark-mode .tc-name,
[data-theme="dark"] .tc-name { color: #94a3b8; }

.tc-source {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 3px 8px;
    align-self: flex-start;
}

.dark-mode .tc-source,
[data-theme="dark"] .tc-source {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

/* Price row: big number + change pill side by side */
.tc-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

/* Price */
.tc-price {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.dark-mode .tc-price,
[data-theme="dark"] .tc-price { color: #f1f5f9; }

/* Change — Apple-style pill */
.tc-change {
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 8px;
    line-height: 1.4;
    white-space: nowrap;
}

.tc-change.positive {
    background: rgba(52, 199, 89, 0.15);
    color: #1a8a3a;
}

.dark-mode .tc-change.positive,
[data-theme="dark"] .tc-change.positive {
    background: rgba(52, 199, 89, 0.2);
    color: #34C759;
}

.tc-change.negative {
    background: rgba(255, 59, 48, 0.12);
    color: #c0392b;
}

.dark-mode .tc-change.negative,
[data-theme="dark"] .tc-change.negative {
    background: rgba(255, 59, 48, 0.2);
    color: #FF3B30;
}

/* 24h Range bar */
.tc-range {
    margin-bottom: 0;
}

.tc-range-label {
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.dark-mode .tc-range-label,
[data-theme="dark"] .tc-range-label { color: #94a3b8; }

.tc-range-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #64748b;
    margin-top: 5px;
}

.dark-mode .tc-range-bounds,
[data-theme="dark"] .tc-range-bounds { color: #94a3b8; }

.tc-range-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.dark-mode .tc-range-bar,
[data-theme="dark"] .tc-range-bar {
    background: rgba(255, 255, 255, 0.12);
}

.tc-range-fill {
    height: 100%;
    background: linear-gradient(90deg, #7C3AED, #A78BFA);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stats grid — 3 columns in bottom section */
.tc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 8px;
    margin-bottom: 10px;
}

.tc-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tc-stat-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
}

.tc-stat-value {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

.dark-mode .tc-stat-value,
[data-theme="dark"] .tc-stat-value { color: #e2e8f0; }

/* Footer row */
.tc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}

.dark-mode .tc-footer,
[data-theme="dark"] .tc-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.tc-timestamp {
    font-size: 10px;
    color: #94a3b8;
}

/* Copy button — Apple blue pill */
.tc-copy-btn {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: none;
    background: #007AFF;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.tc-copy-btn:hover {
    opacity: 0.85;
}

.tc-copy-btn:active {
    transform: scale(0.96);
}

.tc-copy-btn:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
    opacity: 0.9;
}

.dark-mode .tc-copy-btn:focus,
[data-theme="dark"] .tc-copy-btn:focus {
    outline-color: #409CFF;
}

/* ── TA Analysis Card — Liquid Glass ────────────────────────────────── */
.ta-card-wrapper {
    display: flex;
    justify-content: flex-start;
    padding: 4px 12px 4px 12px;
}

.ta-card {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    max-width: 400px;
    width: 100%;
    padding: 16px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
}

.ta-card.appear {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dark-mode .ta-card,
[data-theme="dark"] .ta-card {
    background: rgba(18, 18, 40, 0.88);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Header */
.ta-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ta-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.ta-symbol {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.3px;
}

.dark-mode .ta-symbol,
[data-theme="dark"] .ta-symbol { color: #f1f5f9; }

.ta-timeframe {
    font-size: 11px;
    color: #64748b;
}

.dark-mode .ta-timeframe,
[data-theme="dark"] .ta-timeframe { color: #94a3b8; }

/* Signal pill */
.ta-signal-pill {
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.ta-signal-buy  { background: rgba(34, 197, 94, 0.15); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.3); }
.ta-signal-sell { background: rgba(239, 68, 68, 0.15); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.3); }
.ta-signal-hold { background: rgba(100, 116, 139, 0.12); color: #475569; border: 1px solid rgba(100, 116, 139, 0.2); }

.dark-mode .ta-signal-buy,  [data-theme="dark"] .ta-signal-buy  { color: #4ade80; background: rgba(34, 197, 94, 0.2); }
.dark-mode .ta-signal-sell, [data-theme="dark"] .ta-signal-sell { color: #f87171; background: rgba(239, 68, 68, 0.2); }
.dark-mode .ta-signal-hold, [data-theme="dark"] .ta-signal-hold { color: #94a3b8; background: rgba(148, 163, 184, 0.1); }

/* Price row */
.ta-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.ta-price {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.dark-mode .ta-price,
[data-theme="dark"] .ta-price { color: #f1f5f9; }

.ta-trend {
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.ta-trend.bullish { color: #15803d; }
.ta-trend.bearish { color: #b91c1c; }
.ta-trend.neutral { color: #64748b; }

.dark-mode .ta-trend.bullish, [data-theme="dark"] .ta-trend.bullish { color: #4ade80; }
.dark-mode .ta-trend.bearish, [data-theme="dark"] .ta-trend.bearish { color: #f87171; }

/* Indicator grid — 4 cols */
.ta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 6px;
    margin-bottom: 14px;
}

.ta-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ta-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.ta-value {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
}

.dark-mode .ta-value,
[data-theme="dark"] .ta-value { color: #e2e8f0; }

.ta-green { color: #15803d !important; }
.ta-red   { color: #b91c1c !important; }

.dark-mode .ta-green, [data-theme="dark"] .ta-green { color: #4ade80 !important; }
.dark-mode .ta-red,   [data-theme="dark"] .ta-red   { color: #f87171 !important; }

/* Bollinger Bands bar */
.ta-bb-section,
.ta-macd-section,
.ta-patterns-section {
    border-top: 0.5px solid rgba(0, 0, 0, 0.07);
    padding-top: 12px;
    margin-bottom: 12px;
}

.dark-mode .ta-bb-section,
.dark-mode .ta-macd-section,
.dark-mode .ta-patterns-section,
[data-theme="dark"] .ta-bb-section,
[data-theme="dark"] .ta-macd-section,
[data-theme="dark"] .ta-patterns-section {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.ta-bb-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 4px;
}

.ta-bb-label-lo,
.ta-bb-label-hi {
    font-size: 9px;
    color: #94a3b8;
    white-space: nowrap;
    min-width: 40px;
}

.ta-bb-label-hi { text-align: right; }

.ta-bb-track {
    position: relative;
    flex: 1;
    height: 6px;
    background: rgba(100, 116, 139, 0.15);
    border-radius: 999px;
    overflow: visible;
}

.ta-bb-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #eab308, #22c55e);
    border-radius: 999px;
}

.ta-bb-thumb {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #007AFF;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.ta-bb-meta {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: #64748b;
}

.ta-squeeze-badge {
    background: rgba(234, 179, 8, 0.15);
    color: #a16207;
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dark-mode .ta-squeeze-badge,
[data-theme="dark"] .ta-squeeze-badge { color: #fde047; background: rgba(234, 179, 8, 0.2); }

/* MACD row */
.ta-macd-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #334155;
    margin-top: 6px;
}

.dark-mode .ta-macd-row,
[data-theme="dark"] .ta-macd-row { color: #e2e8f0; }

.ta-cross {
    font-weight: 700;
}

/* Candlestick pattern badges */
.ta-patterns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.ta-pattern-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: default;
}

.ta-pattern-bullish {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.ta-pattern-bearish {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.ta-pattern-neutral {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.dark-mode .ta-pattern-bullish, [data-theme="dark"] .ta-pattern-bullish { color: #4ade80; background: rgba(34, 197, 94, 0.18); }
.dark-mode .ta-pattern-bearish, [data-theme="dark"] .ta-pattern-bearish { color: #f87171; background: rgba(239, 68, 68, 0.18); }
.dark-mode .ta-pattern-neutral, [data-theme="dark"] .ta-pattern-neutral { color: #94a3b8; }

.ta-strength {
    font-size: 9px;
    opacity: 0.7;
    letter-spacing: -1px;
}

/* Footer */
.ta-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    margin-top: 4px;
}

.dark-mode .ta-footer,
[data-theme="dark"] .ta-footer { border-top-color: rgba(255, 255, 255, 0.07); }

.ta-disclaimer {
    font-size: 9px;
    color: #94a3b8;
    font-style: italic;
}

.ta-source {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 3px 8px;
}

.dark-mode .ta-source,
[data-theme="dark"] .ta-source {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

/* Discord Webhook Help Panel */
.webhook-help-panel {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    margin: 12px;
    padding: 12px;
    font-size: 13px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.webhook-help-panel:not([hidden]) {
    max-height: 300px;
    opacity: 1;
}

.webhook-help-panel[hidden] {
    display: none;
}

.webhook-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.webhook-help-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.close-help-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.close-help-btn:hover {
    background-color: var(--bg-tertiary, #e5e7eb);
}

.close-help-btn:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.webhook-help-content {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.webhook-help-content li {
    padding: 4px 0;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
}

.webhook-help-content code {
    background: var(--bg-tertiary, #e5e7eb);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-primary, #1f2937);
}

.webhook-help-note {
    margin: 8px 0 0 0;
    padding: 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-left: 3px solid #0066cc;
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

/* Dark Mode */
.dark-mode .webhook-help-panel,
[data-theme="dark"] .webhook-help-panel {
    background: #1f2937;
    border-color: #374151;
}

.dark-mode .webhook-help-header h3,
[data-theme="dark"] .webhook-help-header h3 {
    color: #f3f4f6;
}

.dark-mode .close-help-btn,
[data-theme="dark"] .close-help-btn {
    color: #9ca3af;
}

.dark-mode .close-help-btn:hover,
[data-theme="dark"] .close-help-btn:hover {
    background-color: #374151;
}

.dark-mode .webhook-help-content li,
[data-theme="dark"] .webhook-help-content li {
    color: #d1d5db;
}

.dark-mode .webhook-help-content code,
[data-theme="dark"] .webhook-help-content code {
    background: #374151;
    color: #f3f4f6;
}

.dark-mode .webhook-help-note,
[data-theme="dark"] .webhook-help-note {
    background: #111827;
    border-left-color: #0ea5e9;
    color: #d1d5db;
}

/* Touch Targets - 44px minimum for accessibility */
#help-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-help-btn {
    min-width: 44px;
    min-height: 44px;
}

/* DOGE Donation Footer */
.doge-donation-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30,30,40,0.95);
  border-top: 1px solid rgba(255,200,0,0.3);
  padding: 8px 16px;
  z-index: 100;
  backdrop-filter: blur(8px);
}
.doge-donation-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 0.85rem;
  color: #ccc;
}
.doge-copy-btn {
  background: rgba(255,200,0,0.15);
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 6px;
  color: #ffd700;
  padding: 4px 10px;
  cursor: pointer;
  font-family: monospace;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.doge-copy-btn:hover, .doge-copy-btn:focus {
  background: rgba(255,200,0,0.25);
  outline: 2px solid #ffd700;
}
.doge-qr-link {
  color: #ffd700;
  text-decoration: underline;
  font-size: 0.8rem;
  white-space: nowrap;
}
.doge-qr-link:focus { outline: 2px solid #ffd700; }
.doge-icon { font-size: 1.4rem; }

/* ── File Attachment Chips ─────────────────────────────────────────── */
.attachment-chips {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 0;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 20px;
  padding: 3px 8px 3px 10px;
  font-size: 0.8rem;
  color: #c4c8ff;
  max-width: 240px;
}
.chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-remove {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.chip-remove:hover, .chip-remove:focus {
  color: #fff;
  background: rgba(255,255,255,0.15);
  outline: 2px solid #6366f1;
}
/* chips inside sent user message bubble */
.msg-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.msg-chip {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: #dde;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Discord TTS Panel — "Speak in Discord"
   Uses existing CSS custom properties. WCAG 2.1 AA: focus-visible on every
   interactive element, status conveyed by text not colour alone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Toggle button — sits in chat-header-actions, matches existing icon-button */
#discord-tts-panel-toggle {
    position: relative;
}
#discord-tts-panel-toggle[aria-expanded="true"] {
    background: var(--bg-active);
    color: var(--text-link);
}

/* Panel — collapsible region above the input form */
/* Respect HTML [hidden] — CSS display:flex would otherwise override it */
.discord-tts-panel[hidden] { display: none !important; }

.discord-tts-panel {
    margin: 0 var(--space-4) var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-sm);
    animation: discord-panel-in 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .discord-tts-panel { animation: none; }
}

@keyframes discord-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel heading row */
.discord-tts-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.discord-tts-panel-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* Status row */
.discord-tts-status-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.discord-tts-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    background: var(--text-tertiary);
    transition: background 250ms;
}
.discord-tts-status-dot--online  { background: #34C759; }
.discord-tts-status-dot--offline { background: #FF3B30; }
.discord-tts-status-dot--checking {
    background: #FF9F0A;
    animation: discord-dot-pulse 1s ease-in-out infinite;
}
@keyframes discord-dot-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Config row — guild + channel IDs */
.discord-tts-config {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
}
@media (max-width: 600px) {
    .discord-tts-config {
        grid-template-columns: auto 1fr;
    }
}

.discord-tts-config label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}
.discord-tts-config input {
    height: 30px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    min-width: 0;
}
.discord-tts-config input:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 1px;
    border-color: var(--text-link);
}
.discord-tts-config input::placeholder { color: var(--text-tertiary); }

/* Voice selector row */
.discord-tts-voice-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.discord-tts-voice-row label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}
.discord-tts-voice-row select {
    flex: 1;
    height: 30px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
}
.discord-tts-voice-row select:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 1px;
}

/* Action buttons row */
.discord-tts-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.discord-tts-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-strong);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
    white-space: nowrap;
}
.discord-tts-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--text-link);
}
.discord-tts-btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}
.discord-tts-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.discord-tts-btn--primary {
    background: var(--text-link);
    border-color: var(--text-link);
    color: #fff;
}
.discord-tts-btn--primary:hover:not(:disabled) {
    background: var(--bg-active);
    color: var(--text-link);
}
.discord-tts-btn--stop {
    background: transparent;
    border-color: #FF3B30;
    color: #FF3B30;
}
.discord-tts-btn--stop:hover:not(:disabled) {
    background: rgba(255, 59, 48, 0.1);
}

/* Custom text row */
.discord-tts-custom-row {
    display: flex;
    gap: var(--space-2);
}
.discord-tts-custom-row input {
    flex: 1;
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-system);
    min-width: 0;
}
.discord-tts-custom-row input:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 1px;
    border-color: var(--text-link);
}
.discord-tts-custom-row input::placeholder { color: var(--text-tertiary); }
.discord-tts-custom-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
    display: block;
}

/* Feedback banner */
.discord-tts-feedback {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}
.discord-tts-feedback--success {
    background: rgba(52, 199, 89, 0.12);
    border-color: rgba(52, 199, 89, 0.35);
    color: #1a7a35;
}
.discord-tts-feedback--error {
    background: rgba(255, 59, 48, 0.1);
    border-color: rgba(255, 59, 48, 0.3);
    color: #c0392b;
}
.discord-tts-feedback--info {
    background: var(--bg-active);
    border-color: var(--text-link);
    color: var(--text-link);
}
@media (prefers-color-scheme: dark) {
    .discord-tts-feedback--success { color: #30d158; }
    .discord-tts-feedback--error   { color: #ff6961; }
}

/* ── Watchlist widget ────────────────────────────────────────────────────── */
.watchlist-widget {
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
    margin-top: auto;
    flex-shrink: 0;
}

.watchlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm, 0.85rem);
    font-weight: 600;
    color: var(--text-secondary);
    gap: var(--space-2);
    transition: background 0.15s;
}
.watchlist-header:hover { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.watchlist-header:focus { outline: 2px solid var(--accent, #7c3aed); outline-offset: -2px; }
.watchlist-chevron { font-size: 0.7rem; opacity: 0.7; }

.watchlist-body {
    padding: 0 var(--space-2) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.watchlist-list { display: flex; flex-direction: column; gap: 2px; }
.watchlist-empty, .watchlist-loading {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #888);
    padding: var(--space-1) var(--space-2);
    text-align: center;
}

.watchlist-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--text-xs, 0.75rem);
    transition: background 0.1s;
}
.watchlist-row:hover { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.wl-coin  { font-weight: 600; color: var(--text-primary); }
.wl-price { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wl-up    { color: #22c55e; }
.wl-down  { color: #ef4444; }
.wl-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #aaa);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.watchlist-row:hover .wl-remove-btn { opacity: 1; }
.wl-remove-btn:hover { color: #ef4444; }
.wl-remove-btn:focus { outline: 2px solid var(--accent, #7c3aed); opacity: 1; }

.watchlist-add-row {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
}
.watchlist-add-input {
    flex: 1;
    min-width: 0;
    padding: 4px var(--space-2);
    border: 1px solid var(--border-color, rgba(0,0,0,0.15));
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-input, #fff);
    color: var(--text-primary);
    font-size: var(--text-xs, 0.75rem);
}
.watchlist-add-input:focus {
    outline: 2px solid var(--accent, #7c3aed);
    outline-offset: 0;
}
.watchlist-add-btn {
    padding: 4px 10px;
    background: var(--accent, #7c3aed);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: var(--text-sm, 0.85rem);
    font-weight: 700;
    transition: background 0.15s;
}
.watchlist-add-btn:hover  { background: var(--accent-hover, #6d28d9); }
.watchlist-add-btn:focus  { outline: 2px solid var(--accent, #7c3aed); outline-offset: 2px; }

.watchlist-feedback {
    font-size: var(--text-xs, 0.7rem);
    min-height: 1.2em;
    padding: 0 var(--space-1);
}

/* ============================================
   SLASH COMMAND PALETTE + INLINE CARDS
   ============================================ */

/* Command palette (autocomplete above input) */
.sc-palette {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
    z-index: 200;
    overflow: hidden;
    display: none;
}

.sc-palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.sc-palette-item:hover,
.sc-palette-item.active { background: var(--bg-hover); }

.sc-palette-cmd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--apple-blue);
    min-width: 120px;
}

.sc-palette-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* input-wrapper needs position:relative for palette positioning */
.input-wrapper { position: relative; }

/* Shared card bubble */
.sc-bubble {
    padding: var(--space-3) var(--space-4) !important;
    min-width: 220px;
}

.sc-loading {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

/* Price card */
.sc-price-card { display: flex; flex-direction: column; gap: var(--space-3); }

.sc-price-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.sc-coin {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.sc-price {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.sc-chg {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}
.sc-up   { color: var(--apple-green); }
.sc-down { color: var(--apple-red); }

.sc-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.sc-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}

.sc-stat-l {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sc-stat-v {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.sc-price-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-1);
    border-top: 1px solid var(--border-color);
}

.sc-tf {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}

/* Chart card */
.sc-chart-card { display: flex; flex-direction: column; gap: var(--space-2); }

.sc-chart-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sc-chart-frame {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: var(--radius-md);
    display: block;
}

/* Alert / watchlist confirmation */
.sc-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.sc-confirm-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.sc-confirm-title {
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-1);
    color: var(--text-primary);
}

.sc-confirm-detail {
    font-size: var(--text-sm);
    margin: 0 0 var(--space-1);
    color: var(--text-primary);
}

.sc-confirm-sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
}

/* Help card */
.sc-help { display: flex; flex-direction: column; gap: var(--space-3); }

.sc-help-title {
    font-weight: var(--weight-semibold);
    margin: 0;
    color: var(--text-primary);
}

.sc-help-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
}

.sc-help-list dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--apple-blue);
    white-space: nowrap;
    padding: 2px 0;
}

.sc-help-list dd {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    padding: 2px 0;
}

.sc-help-footer { margin: 0; font-size: var(--text-xs); }

/* Shared links and buttons */
.sc-link {
    font-size: var(--text-xs);
    color: var(--apple-blue);
    text-decoration: none;
    font-weight: var(--weight-medium);
}
.sc-link:hover { text-decoration: underline; }

.sc-btn-alert {
    font-size: var(--text-xs);
    color: var(--apple-blue);
    background: transparent;
    border: 1px solid var(--apple-blue);
    border-radius: var(--radius-sm);
    padding: 3px var(--space-2);
    cursor: pointer;
    font-family: var(--font-system);
    font-weight: var(--weight-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sc-btn-alert:hover { background: var(--apple-blue); color: #fff; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .sc-palette { background: #2C2C2E; border-color: rgba(255,255,255,0.1); }
    .sc-stat { background: rgba(255,255,255,0.06); }
}
[data-theme="dark"] .sc-palette { background: #2C2C2E; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .sc-stat { background: rgba(255,255,255,0.06); }
.watchlist-feedback--error { color: #ef4444; }

/* ============================================
   MOBILE SIMPLIFICATION — WhatsApp/Slack feel
   Applied at ≤768px (phones + small tablets)
   ============================================ */

@media (max-width: 768px) {

    /* ── Header: keep only avatar + name + "…" ── */

    /* Keyboard shortcuts + discord-TTS: desktop-only.
       Theme toggle stays on mobile — a VoiceOver user reaches for it and must not
       have to hunt the sidebar (mobile a11y contract). Voice + video call stay. */
    #shortcuts-btn,
    #discord-tts-panel-toggle,
    #more-options-btn { display: none !important; }

    /* Keep the header lean so surfacing the theme toggle doesn't overflow 390px:
       drop the "Pins" text label to an icon-only control on mobile. */
    .pins-toggle-btn span { display: none; }

    /* Keyboard shortcuts dialog is irrelevant on touch (no physical keyboard) */
    #keyboard-shortcuts-dialog { display: none !important; }

    /* Tighter header — remove the big left padding added for sidebar toggle */
    .chat-header {
        padding: var(--space-2) var(--space-3);
    }

    /* ── Tap targets: >=44x44 (Apple HIG / WCAG 2.5.5) ──
       Fat-finger + low-vision floor for a mobile-first, accessibility-first app. */
    #sidebar-toggle,
    #profile-btn,
    #voice-call-btn,
    #video-call-btn,
    #speak-all-btn,
    #theme-toggle-header-btn {
        min-width: 44px;
        min-height: 44px;
    }
    /* Status pill is a real button — give it a 44px tap height without bloating width */
    #chat-status-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ── Discord TTS panel: desktop-only feature ── */

    /* Force hidden regardless of JS state — Safari doesn't need Discord TTS */
    #discord-tts-panel { display: none !important; }

    /* ── Compose area cleanup ── */

    /* "Talking to Lenny AI ▾" row takes vertical space — hide on mobile.
       It's always Lenny; users can tell from the header avatar. */
    .compose-context { display: none !important; }

    /* 🔇📤 Discord TTS audio-send toggle in the input bar — hide */
    #discord-tts-toggle { display: none !important; }

    /* ── Safe area: notch + home indicator (requires viewport-fit=cover) ── */

    /* .app-container is the flex parent — push normal-flow children (chat header etc.)
       below the status bar / Dynamic Island */
    .app-container {
        padding-top: env(safe-area-inset-top);
    }

    /* .sidebar is position:absolute so it ignores the container's padding-top.
       Pad the header inside the sidebar so content clears the status bar. */
    .sidebar-header {
        padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    }

    /* Pin input to viewport bottom — position:fixed is the ONLY reliable approach
       on iOS Safari. 100dvh gaps, flex layout gaps, all solved by this single rule. */
    .chat-input-area {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
        gap: var(--space-1);
        border-top: 1px solid var(--border-color);
        background: var(--bg-tertiary);
    }

    /* Messages need bottom padding so last message isn't hidden behind fixed input */
    .messages-container {
        padding-bottom: var(--input-bar-height, 130px);
    }

    /* ── Touch targets: Apple HIG minimum 44pt (all interactive elements) ── */
    .icon-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Two-row compose grid — Claude Opus 4.7 + Gemini 2.5 Pro consensus.
       Row 1: tools (attach, mic, quick-cmds) — full width secondary bar.
       Row 2: textarea + send — primary interaction, textarea gets full width.
       This gives the textarea ~330px on 390px screens vs ~120px in single-row. */
    .input-form {
        display: grid;
        grid-template-areas:
            "tools tools"
            "input send";
        grid-template-columns: 1fr auto;
        gap: var(--space-1) var(--space-2);
    }

    .input-actions-left {
        grid-area: tools;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .input-wrapper {
        grid-area: input;
    }

    /* On mobile, send is the only element in input-actions-right */
    .input-actions-right {
        grid-area: send;
        gap: 0;
    }

    /* Show slash-commands toggle on mobile */
    .cmd-chips-toggle { display: flex; }

    /* Quick-command chips — HIDDEN by default; toggled by cmd-chips-toggle-btn.
       Progressive disclosure: clean for new users, one tap reveals shortcuts. */
    .cmd-chips {
        display: none;
        transition: none;
    }
    .cmd-chips.chips-open {
        display: flex;
    }
    /* Highlight the toggle button when chips are open */
    .cmd-chips-toggle[aria-expanded="true"] {
        color: var(--apple-blue);
        background: var(--apple-blue-light);
        border-radius: var(--radius-sm);
    }

    /* Message actions: always rendered at reduced opacity — VoiceOver-safe.
       Joe is blind; display:none / max-height:0 would cause VoiceOver to skip
       Copy, Like, Dislike, Share entirely. Opacity:0.65 keeps them in the
       a11y tree and visually present but unobtrusive.
       Boost to full opacity on :focus-within (VoiceOver nav) or .message-active (tap). */
    .message-actions {
        opacity: 0.65;
        transition: opacity 0.15s ease;
        /* Remove the inherited opacity:0 from the desktop rule */
    }
    article.message:focus-within .message-actions,
    article.message.message-active .message-actions,
    .message-actions:focus-within {
        opacity: 1;
    }

    /* Larger message bubble text — easier to read on small screens */
    .message-bubble {
        font-size: 17px;
        line-height: 1.55;
    }

    /* Message action buttons — 44×44 real hit area (WCAG 2.5.5 / Apple HIG).
       Padding lives inside the box, so a 36px box is a 36px target, not 44. */
    .message-actions .icon-button,
    .copy-btn, .like-btn, .dislike-btn, .share-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 4px;
    }

    /* ── Input font: 16px minimum prevents iOS auto-zoom on focus ── */
    .chat-input,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px;
    }

    /* ── Message bubbles ── */
    .message { max-width: 88%; }

    /* Reduce AI avatar size to give text more width */
    .message.ai .message-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
    .message.ai .message-avatar svg {
        width: 16px;
        height: 16px;
    }

    /* Inline chart cards: full width on mobile */
    .sc-chart-frame { height: 220px; }
    .sc-price-grid { grid-template-columns: 1fr 1fr; }

    /* Watchlist widget: collapse by default on mobile (sidebar is hidden anyway) */
    .watchlist-widget { display: none !important; }

    /* Legal disclaimer wastes 24px on a 844px screen — hide on mobile */
    .chat-legal-footer { display: none !important; }

    /* AI model name "(llama-3.3-70b-versatile)" is clutter on mobile */
    .ai-model { display: none !important; }

    /* Nothing below the input — strip every element inside .chat-input-area
       that isn't the form itself */
    .chat-input-area > *:not(.input-form):not(.cmd-chips) { display: none !important; }
}

/* ── Keyboard shortcuts dialog — CSS-controlled visibility (no inline style) ── */
/* Default: hidden. JS sets style.display='flex' to open (JS inline = not CSP-blocked). */
#keyboard-shortcuts-dialog.shortcuts-dialog-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 99997;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    padding: 16px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}
.shortcuts-dialog-panel {
    background: rgba(28, 18, 48, 0.97);
    color: #fff;
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.45);
    backdrop-filter: blur(10px);
}
.shortcuts-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.shortcuts-dialog-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #c4b5fd;
}
.shortcuts-dialog-close {
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
}
.shortcuts-dialog-list {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 18px;
    font-size: 13.5px;
}
.shortcut-key {
    color: #a78bfa;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
}
.shortcut-desc {
    margin: 0;
    color: #e5e7eb;
}

/* ── Voice/video call placeholder buttons ─────────────────────────────── */
.header-call-btn {
    opacity: 0.45;
    cursor: not-allowed;
}
.header-call-btn:hover {
    opacity: 0.55;
    background: none;
}
.header-call-btn:focus-visible {
    opacity: 0.7;
}

/* ── Speak all toggle ──────────────────────────────────────────────────── */
.speak-all-toggle[aria-pressed="true"] {
    color: var(--apple-blue);
    background: var(--apple-blue-light);
    border-radius: var(--radius-full, 50%);
}
[data-theme="dark"] .speak-all-toggle[aria-pressed="true"] {
    background: rgba(10, 132, 255, 0.2);
}

/* ── Load older messages button ───────────────────────────────────────── */
.load-more-btn {
    display: block;
    width: calc(100% - var(--space-8));
    margin: var(--space-3) var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}
.load-more-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.load-more-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Knowledge source transparency ────────────────────────────────────── */
.knowledge-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 6px;
    font-size: 11px;
    color: var(--text-tertiary, #8e8e93);
    opacity: 0.75;
}
.knowledge-sources:hover {
    opacity: 1;
}
.knowledge-tag {
    display: inline-block;
    background: var(--bg-secondary, #f2f2f7);
    border: 1px solid var(--border-color, #e5e5ea);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary, #6e6e73);
    white-space: nowrap;
}
[data-theme="dark"] .knowledge-tag {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
}

/* ── Legal footer disclaimer ───────────────────────────────────────────── */
.chat-legal-footer {
    text-align: center;
    font-size: 10px;
    color: var(--text-tertiary, #8e8e93);
    padding: 4px 16px 6px;
    margin: 0;
    line-height: 1.4;
}
.chat-legal-link {
    color: var(--text-tertiary, #8e8e93);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.chat-legal-link:hover { color: var(--text-secondary); }

/* ── Keyboard shortcut hint below chat input ──────────────────────────── */
.input-hint {
    font-size: 11px;
    color: var(--text-tertiary, #999);
    padding: 0 12px 4px;
    display: block;
    text-align: right;
}
@media (max-width: 768px) { .input-hint { display: none !important; } }

/* ── Upgrade CTA in sidebar footer ────────────────────────────────────── */
.upgrade-cta-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0 8px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.upgrade-cta-btn:hover { opacity: 0.9; }
.upgrade-cta-btn:active { transform: scale(0.97); }
.upgrade-cta-btn svg { flex-shrink: 0; }
.upgrade-cta-btn[hidden] { display: none; }
body.is-pro .upgrade-cta-btn,
body.is-founder .upgrade-cta-btn { display: none; }

/* ── Chart Widget ─────────────────────────────────────────────────────────── */
.chart-widget-wrapper { margin: 0 0 8px; }
.chart-widget-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 620px;
}
.chart-widget-card.appear { opacity: 1; transform: translateY(0); }
.chart-widget-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.chart-widget-fullscreen {
    font-size: 11px;
    color: var(--accent, #007AFF);
    text-decoration: none;
    white-space: nowrap;
    margin-left: 8px;
}
.chart-widget-fullscreen:hover { text-decoration: underline; }
.chart-widget-container {
    width: 100%;
    height: 320px;
}
[data-theme="dark"] .chart-widget-card {
    background: #161b22;
    border-color: #30363d;
}

/* Timeframe tabs */
.chart-tf-bar {
    display: flex;
    gap: 4px;
    padding: 4px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chart-tf-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary, #888);
    cursor: pointer;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    transition: all 0.15s;
}
.chart-tf-btn:hover { border-color: rgba(124,58,237,0.4); color: #7C3AED; }
.chart-tf-btn.active { background: rgba(124,58,237,0.15); border-color: #7C3AED; color: #7C3AED; }

/* RSI sub-panel */
.chart-rsi-label {
    color: #7C3AED;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 12px 0;
    text-transform: uppercase;
}
.chart-rsi-container {
    height: 80px;
    padding: 0 0 8px;
    width: 100%;
}

/* Chart type selector bar */
.chart-type-bar {
    display: flex;
    gap: 4px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.chart-type-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary, #888);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    transition: all 0.15s;
    line-height: 1.4;
}
.chart-type-btn:hover { border-color: rgba(123,104,238,0.4); color: #7B68EE; }
.chart-type-btn.active { background: rgba(123,104,238,0.18); border-color: #7B68EE; color: #7B68EE; }

/* Download/screenshot button in caption bar */
.chart-download-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    font-size: 13px;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}
.chart-download-btn:hover { color: var(--text, #fff); }

/* ── Chart Comment Bubble ──────────────────────────────────────────────── */
.chart-comment-bubble .message-bubble {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    font-size: 0.88em;
}
.chart-comment-badge {
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    white-space: nowrap;
}
.badge-bull { background: rgba(38,166,154,0.2); color: #26a69a; border: 1px solid #26a69a55; }
.badge-bear { background: rgba(239,83,80,0.2); color: #ef5350; border: 1px solid #ef535055; }
.badge-neutral { background: rgba(158,158,158,0.15); color: #9e9e9e; border: 1px solid #9e9e9e44; }
.chart-comment-text { line-height: 1.5; }

/* ── Fear & Greed Card ─────────────────────────────────────────────────── */
.fng-wrapper { margin: 0 0 8px; }
.fng-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 320px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.fng-card.appear { opacity: 1; transform: translateY(0); }
.fng-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.fng-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.fng-source { font-size: 10px; color: var(--text-secondary,#6b7280); }
.fng-body { display: flex; flex-direction: column; align-items: center; padding: 4px 14px 8px; }
.fng-gauge { width: 140px; height: 82px; }
.fng-label { font-size: 15px; color: var(--text-primary,#0f172a); margin-top: 2px; }
.fng-spark { display: flex; gap: 4px; align-items: flex-end; height: 36px; padding: 0 14px 8px; }
.fng-spark-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 8px; transition: height .3s ease; }
.fng-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 6px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); }
.fng-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .fng-card { background: #161b22; border-color: #30363d; }

/* ── Open Interest Card ────────────────────────────────────────────────── */
.oi-wrapper { margin: 0 0 8px; }
.oi-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 340px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.oi-card.appear { opacity: 1; transform: translateY(0); }
.oi-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 4px; }
.oi-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.oi-value { font-size: 15px; font-weight: 700; color: var(--text-primary,#0f172a); }
.oi-subrow { padding: 0 14px 6px; }
.oi-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.oi-badge-up { background: #dcfce7; color: #15803d; }
.oi-badge-down { background: #fee2e2; color: #dc2626; }
.oi-spark { display: flex; gap: 2px; align-items: flex-end; height: 40px; padding: 0 14px 8px; }
.oi-spark-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 4px; transition: height .3s ease; background: var(--oi-bar,#94a3b8); }
.oi-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 6px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); }
[data-theme="dark"] .oi-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .oi-badge-up { background: #14532d; color: #4ade80; }
[data-theme="dark"] .oi-badge-down { background: #450a0a; color: #f87171; }

/* ── Multi-Timeframe Card ──────────────────────────────────────────────── */
.mtf-wrapper { margin: 0 0 8px; }
.mtf-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 480px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.mtf-card.appear { opacity: 1; transform: translateY(0); }
.mtf-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; border-bottom: 1px solid var(--border,#e5e7eb); }
.mtf-title-group { display: flex; flex-direction: column; gap: 2px; }
.mtf-coin { font-size: 15px; font-weight: 700; color: var(--text-primary,#0f172a); }
.mtf-price { font-size: 13px; color: var(--text-secondary,#6b7280); }
.mtf-confluence { font-size: 14px; font-weight: 600; text-align: right; }
.mtf-score { font-size: 11px; font-weight: 400; margin-left: 4px; opacity: .7; }
.mtf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mtf-table th { padding: 6px 14px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary,#6b7280); background: var(--surface-2,#f8faff); }
.mtf-row td { padding: 8px 14px; border-top: 1px solid var(--border,#e5e7eb); color: var(--text-primary,#0f172a); }
.mtf-tf { font-weight: 700; font-size: 12px; color: var(--text-secondary,#6b7280); }
.mtf-trend { text-transform: capitalize; }
.mtf-pct.positive { color: #26a69a; }
.mtf-pct.negative { color: #ef5350; }
.mtf-bias { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.mtf-buy { background: rgba(38,166,154,.15); color: #26a69a; }
.mtf-sell { background: rgba(239,83,80,.15); color: #ef5350; }
.mtf-neutral { background: rgba(158,158,158,.15); color: #9e9e9e; }
.mtf-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px; border-top: 1px solid var(--border,#e5e7eb); }
.mtf-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; }
[data-theme="dark"] .mtf-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .mtf-table th { background: #0d1117; }

/* ── Market Dominance Card ───────────────────────────────────────────── */
.dom-wrapper { margin: 0 0 8px; }
.dom-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 360px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.dom-card.appear { opacity: 1; transform: translateY(0); }
.dom-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.dom-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.dom-meta { font-size: 12px; color: var(--text-secondary,#6b7280); }
.dom-change-up { color: #26a69a; font-weight: 600; }
.dom-change-down { color: #ef5350; font-weight: 600; }
.dom-bar { display: flex; height: 28px; margin: 10px 14px 0; border-radius: 6px; overflow: hidden; gap: 1px; }
.dom-bar-seg { display: flex; align-items: center; justify-content: center; min-width: 4px; transition: flex .4s ease; }
.dom-bar-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.dom-body { padding: 8px 14px 4px; }
.dom-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dom-tbl-coin { padding: 3px 0; color: var(--text-primary,#0f172a); display: flex; align-items: center; gap: 5px; }
.dom-tbl-pct { padding: 3px 0; text-align: right; color: var(--text-secondary,#6b7280); font-variant-numeric: tabular-nums; }
.dom-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dom-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 6px; }
.dom-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .dom-card { background: #161b22; border-color: #30363d; }

/* ── Order Book Depth Card ────────────────────────────────────────────── */
.depth-wrapper { margin: 0 0 8px; }
.depth-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 480px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.depth-card.appear { opacity: 1; transform: translateY(0); }
.depth-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; border-bottom: 1px solid var(--border,#e5e7eb); }
.depth-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.depth-pressure-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .4px; }
.depth-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.depth-table th { padding: 5px 10px; text-align: right; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.depth-table td { padding: 5px 10px; border-top: 1px solid var(--border,#e5e7eb); text-align: right; font-variant-numeric: tabular-nums; }
.depth-th-bid { color: #26a69a; background: rgba(38,166,154,.06); }
.depth-th-ask { color: #ef5350; background: rgba(239,83,80,.06); }
.depth-bid-price { color: #26a69a; font-weight: 600; }
.depth-bid-qty { color: var(--text-secondary,#6b7280); }
.depth-ask-price { color: #ef5350; font-weight: 600; }
.depth-ask-qty { color: var(--text-secondary,#6b7280); }
.depth-pressure-bar { display: flex; height: 6px; margin: 0; }
.depth-bar-bid { background: #26a69a; transition: flex .4s ease; }
.depth-bar-ask { background: #ef5350; transition: flex .4s ease; }
.depth-footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary,#6b7280); padding: 7px 14px 9px; border-top: 1px solid var(--border,#e5e7eb); }
[data-theme="dark"] .depth-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .depth-th-bid { background: rgba(38,166,154,.08); }
[data-theme="dark"] .depth-th-ask { background: rgba(239,83,80,.08); }

/* ── Crypto News Card ─────────────────────────────────────────────────── */
.news-wrapper { margin: 0 0 8px; }
.news-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 440px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.news-card.appear { opacity: 1; transform: translateY(0); }
.news-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.news-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.news-header-right { display: flex; align-items: center; gap: 6px; }
.news-sentiment-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; }
.news-time { font-size: 11px; color: var(--text-secondary,#6b7280); }
.news-list { list-style: none; margin: 8px 0 0; padding: 0; }
.news-item { display: flex; align-items: baseline; gap: 6px; padding: 5px 14px; line-height: 1.35; transition: background .15s; }
.news-item:hover { background: var(--surface-2,#f8fafc); }
.news-source-pill { display: inline-block; flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; border: 1px solid; opacity: .85; white-space: nowrap; }
.news-item-title { font-size: 12px; color: var(--text-primary,#0f172a); }
.news-sep { height: 1px; background: var(--border,#e5e7eb); margin: 3px 14px; }
.news-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 6px; }
.news-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .news-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .news-item:hover { background: #1c2128; }
[data-theme="dark"] .news-sep { background: #30363d; }
[data-theme="dark"] .news-footer { border-color: #30363d; }
[data-theme="dark"] .news-footer code { background: #0d1117; }

/* ── Market Scanner Card ──────────────────────────────────────────────── */
.scan-wrapper { margin: 0 0 8px; }
.scan-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 520px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.scan-card.appear { opacity: 1; transform: translateY(0); }
.scan-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.scan-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.scan-header-right { display: flex; align-items: center; gap: 6px; }
.scan-tf-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--surface-2,#f1f5f9); color: var(--text-secondary,#6b7280); letter-spacing: .4px; }
.scan-bias-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; }
.scan-stats-row { display: flex; gap: 12px; padding: 8px 14px 4px; font-size: 12px; }
.scan-stat { font-variant-numeric: tabular-nums; }
.scan-stat-bull { color: #26a69a; font-weight: 600; }
.scan-stat-bear { color: #ef5350; font-weight: 600; }
.scan-stat-neutral { color: #9e9e9e; }
.scan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px 14px 4px; }
.scan-col { }
.scan-col-hdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 0 2px; }
.scan-col-hdr-bull { color: #26a69a; }
.scan-col-hdr-bear { color: #ef5350; }
.scan-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.scan-row td { padding: 3px 2px; vertical-align: middle; }
.scan-emoji { font-size: 10px; }
.scan-coin { font-weight: 600; color: var(--text-primary,#0f172a); white-space: nowrap; }
.scan-signal { font-size: 10px; white-space: nowrap; }
.scan-rsi { font-size: 10px; color: var(--text-secondary,#6b7280); font-variant-numeric: tabular-nums; }
.scan-pct { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scan-up { color: #26a69a; }
.scan-down { color: #ef5350; }
.scan-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
.scan-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
@media (max-width: 767px) {
  .scan-grid { grid-template-columns: 1fr; }
  .scan-card { max-width: 100%; }
}
[data-theme="dark"] .scan-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .scan-tf-badge { background: #0d1117; color: #8b949e; }
[data-theme="dark"] .scan-footer { border-color: #30363d; }
[data-theme="dark"] .scan-footer code { background: #0d1117; }

/* ── Explain Card ─────────────────────────────────────────────────────────── */
.explain-wrapper { margin: 0 0 8px; }
.explain-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 480px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.explain-card.appear { opacity: 1; transform: translateY(0); }
.explain-header { padding: 10px 14px 0; }
.explain-title { font-size: 13px; color: var(--text-primary,#0f172a); }
.explain-body { padding: 8px 14px 4px; }
.explain-text { font-size: 13px; color: var(--text-primary,#0f172a); line-height: 1.6; margin: 0; }
.explain-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 6px; }
.explain-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .explain-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .explain-footer { border-color: #30363d; }
[data-theme="dark"] .explain-footer code { background: #0d1117; }

/* ── Quick Card ───────────────────────────────────────────────────────────── */
.quick-wrapper { margin: 0 0 8px; }
.quick-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 360px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.quick-card.appear { opacity: 1; transform: translateY(0); }
.quick-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.quick-title { font-size: 13px; color: var(--text-primary,#0f172a); }
.quick-price { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); font-variant-numeric: tabular-nums; }
.quick-body { padding: 6px 14px 4px; }
.quick-line { font-size: 13px; font-weight: 600; margin: 3px 0; line-height: 1.4; color: var(--text-primary,#0f172a); }
.quick-bias-bull { color: #26a69a; }
.quick-bias-bear { color: #ef5350; }
.quick-bias-neutral { color: #9e9e9e; }
.quick-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
.quick-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .quick-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .quick-footer { border-color: #30363d; }
[data-theme="dark"] .quick-footer code { background: #0d1117; }

/* ── Alpha Card ───────────────────────────────────────────────────────────── */
.alpha-wrapper { margin: 0 0 8px; }
.alpha-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 440px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.alpha-card.appear { opacity: 1; transform: translateY(0); }
.alpha-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.alpha-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.alpha-bias-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; }
.alpha-signal-list { list-style: none; margin: 8px 0 0; padding: 0; }
.alpha-signal-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 14px; }
.alpha-signal-row + .alpha-signal-row { border-top: 1px solid var(--border,#e5e7eb); }
.alpha-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.alpha-signal-info { flex: 1; min-width: 0; }
.alpha-signal-main { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.alpha-signal-name { font-size: 12px; font-weight: 600; color: var(--text-primary,#0f172a); white-space: nowrap; }
.alpha-signal-value { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-primary,#0f172a); text-align: right; }
.alpha-signal-detail { font-size: 0.78em; color: var(--text-secondary,#6b7280); margin-top: 2px; line-height: 1.35; }
.alpha-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 6px; }
.alpha-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .alpha-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .alpha-signal-row + .alpha-signal-row { border-color: #30363d; }
[data-theme="dark"] .alpha-footer { border-color: #30363d; }
[data-theme="dark"] .alpha-footer code { background: #0d1117; }

/* ── FreqTrade Card ───────────────────────────────────────────────────────── */
.freqtrade-wrapper { margin: 0 0 8px; }
.freqtrade-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 520px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.freqtrade-card.appear { opacity: 1; transform: translateY(0); }
.freqtrade-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.freqtrade-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.ft-status-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .4px; }
.ft-stats-row { display: flex; gap: 0; padding: 8px 14px 6px; border-bottom: 1px solid var(--border,#e5e7eb); }
.ft-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; }
.ft-stat + .ft-stat { border-left: 1px solid var(--border,#e5e7eb); }
.ft-stat-label { font-size: 10px; color: var(--text-secondary,#6b7280); text-align: center; }
.ft-stat-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary,#0f172a); }
.ft-trade-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }
.ft-trade-table th { padding: 5px 10px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary,#6b7280); background: var(--surface-2,#f8fafc); border-bottom: 1px solid var(--border,#e5e7eb); }
.ft-trade-table th:not(:first-child) { text-align: right; }
.ft-trade-row td { padding: 4px 10px; border-top: 1px solid var(--border,#e5e7eb); vertical-align: middle; }
.ft-pair { font-weight: 600; color: var(--text-primary,#0f172a); white-space: nowrap; }
.ft-entry, .ft-current { color: var(--text-secondary,#6b7280); text-align: right; }
.ft-pnl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-pnl-up { color: #26a69a; }
.ft-pnl-down { color: #ef5350; }
.ft-perf-section { padding: 6px 14px 2px; border-top: 1px solid var(--border,#e5e7eb); }
.ft-perf-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary,#6b7280); padding-bottom: 4px; }
.ft-perf-list { list-style: none; margin: 0; padding: 0; }
.ft-perf-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; font-size: 12px; }
.ft-perf-pair { font-weight: 600; color: var(--text-primary,#0f172a); }
.ft-perf-pnl { font-variant-numeric: tabular-nums; font-weight: 600; }
.freqtrade-error { padding: 12px 14px; font-size: 13px; color: var(--text-secondary,#6b7280); }
.freqtrade-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
.freqtrade-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
@media (max-width: 767px) {
  .freqtrade-card { max-width: 100%; }
  .ft-stats-row { flex-wrap: wrap; }
  .ft-stat { flex: 0 0 50%; border-left: none; border-top: 1px solid var(--border,#e5e7eb); padding: 4px; }
  .ft-stat:nth-child(-n+2) { border-top: none; }
}
[data-theme="dark"] .freqtrade-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .ft-stats-row { border-color: #30363d; }
[data-theme="dark"] .ft-stat + .ft-stat { border-color: #30363d; }
[data-theme="dark"] .ft-trade-table th { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .ft-trade-row td { border-color: #30363d; }
[data-theme="dark"] .ft-perf-section { border-color: #30363d; }
[data-theme="dark"] .freqtrade-footer { border-color: #30363d; }
[data-theme="dark"] .freqtrade-footer code { background: #0d1117; }

/* ── Liquidity Card ───────────────────────────────────────────────────────── */
.liquidity-wrapper { margin: 0 0 8px; }
.liquidity-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 480px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.liquidity-card.appear { opacity: 1; transform: translateY(0); }
.liquidity-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.liquidity-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.liq-bias-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; }
.liq-total-oi { font-size: 12px; color: var(--text-secondary,#6b7280); padding: 6px 14px 4px; }
.liq-total-oi strong { color: var(--text-primary,#0f172a); font-variant-numeric: tabular-nums; }
.liq-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }
.liq-table thead tr { background: var(--surface-2,#f8fafc); }
.liq-table th { padding: 4px 10px; text-align: right; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary,#6b7280); border-bottom: 1px solid var(--border,#e5e7eb); }
.liq-table th:first-child { text-align: left; }
.liq-coin-row td { padding: 4px 10px; border-top: 1px solid var(--border,#e5e7eb); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; }
.liq-coin { font-weight: 600; text-align: left !important; color: var(--text-primary,#0f172a); }
.liq-oi { color: var(--text-secondary,#6b7280); }
.liq-ls { font-weight: 600; }
.liq-funding { font-weight: 600; }
.liq-whale { font-size: 14px; }
.liquidity-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
.liquidity-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .liquidity-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .liq-table thead tr { background: #0d1117; }
[data-theme="dark"] .liq-table th { border-color: #30363d; }
[data-theme="dark"] .liq-coin-row td { border-color: #30363d; }
[data-theme="dark"] .liquidity-footer { border-color: #30363d; }
[data-theme="dark"] .liquidity-footer code { background: #0d1117; }

/* ── On-Chain Card ────────────────────────────────────────────────────────── */
.onchain-wrapper { margin: 0 0 8px; }
.onchain-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 440px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.onchain-card.appear { opacity: 1; transform: translateY(0); }
.onchain-hash-ribbon-chip { display: inline-flex; align-items: center; gap: 5px; margin: 6px 14px 2px; padding: 3px 10px; background: rgba(124,58,237,.12); color: #7C3AED; border: 1px solid rgba(124,58,237,.3); border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
[data-theme="dark"] .onchain-card { background: #161b22; border-color: #30363d; }

/* ── TAScan Card ──────────────────────────────────────────────────────────── */
.tascan-wrapper { margin: 0 0 8px; }
.tascan-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 500px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.tascan-card.appear { opacity: 1; transform: translateY(0); }
.tascan-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.tascan-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.tascan-count-row { display: flex; gap: 8px; padding: 6px 14px 4px; }
.tascan-count-bull { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: #26a69a; background: rgba(38,166,154,.12); }
.tascan-count-bear { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: #ef5350; background: rgba(239,83,80,.12); }
.tascan-count-neutral { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: #9e9e9e; background: rgba(158,158,158,.12); }
.tascan-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }
.tascan-table th { padding: 4px 10px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary,#6b7280); background: var(--surface-2,#f8fafc); border-bottom: 1px solid var(--border,#e5e7eb); }
.tascan-tf-row td { padding: 4px 10px; border-top: 1px solid var(--border,#e5e7eb); vertical-align: middle; font-variant-numeric: tabular-nums; color: var(--text-primary,#0f172a); }
.tascan-key-tf td { background: rgba(124,58,237,.04); }
.tascan-synthesis { margin: 8px 14px 6px; padding: 8px 12px; background: var(--surface-2,#f8fafc); border-left: 3px solid #7C3AED; border-radius: 4px; font-size: 12px; font-style: italic; color: var(--text-secondary,#6b7280); line-height: 1.5; }
.tascan-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
.tascan-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
[data-theme="dark"] .tascan-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .tascan-table th { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .tascan-tf-row td { border-color: #30363d; }
[data-theme="dark"] .tascan-key-tf td { background: rgba(124,58,237,.08); }
[data-theme="dark"] .tascan-synthesis { background: #0d1117; }
[data-theme="dark"] .tascan-footer { border-color: #30363d; }
[data-theme="dark"] .tascan-footer code { background: #0d1117; }

/* ── Risk Card ────────────────────────────────────────────────────────────── */
.risk-wrapper { margin: 0 0 8px; }
.risk-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 420px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.risk-card.appear { opacity: 1; transform: translateY(0); }
.risk-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; }
.risk-dir-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; flex-shrink: 0; }
.risk-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 8px 0 4px; }
.risk-col { padding: 0 14px; }
.risk-col + .risk-col { border-left: 1px solid var(--border,#e5e7eb); }
.risk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0; }
.risk-label { font-size: 11px; color: var(--text-secondary,#6b7280); white-space: nowrap; }
.risk-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary,#0f172a); }
.risk-rr-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px 4px; border-top: 1px solid var(--border,#e5e7eb); }
.risk-rr-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary,#6b7280); }
.risk-rr-value { font-size: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.risk-warnings { list-style: none; margin: 4px 0 0; padding: 6px 14px; background: rgba(245,158,11,.08); border-top: 1px solid rgba(245,158,11,.2); }
.risk-warnings li { font-size: 11px; color: #f59e0b; padding: 2px 0; }
.risk-warnings li::before { content: '⚠ '; }
.risk-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
[data-theme="dark"] .risk-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .risk-col + .risk-col { border-color: #30363d; }
[data-theme="dark"] .risk-rr-row { border-color: #30363d; }
[data-theme="dark"] .risk-warnings { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.15); }
[data-theme="dark"] .risk-footer { border-color: #30363d; }

/* ── Candles Card ─────────────────────────────────────────────────────────── */
.candles-wrapper { margin: 0 0 8px; }
.candles-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 560px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.candles-card.appear { opacity: 1; transform: translateY(0); }
.candles-header { padding: 10px 14px 0; }
.candles-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.candles-summary { display: flex; gap: 12px; align-items: baseline; padding: 5px 14px 4px; flex-wrap: wrap; }
.candles-change { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.candles-stat { font-size: 11px; color: var(--text-secondary,#6b7280); font-variant-numeric: tabular-nums; }
.candles-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }
.candles-table th { padding: 4px 8px; text-align: right; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-secondary,#6b7280); background: var(--surface-2,#f8fafc); border-bottom: 1px solid var(--border,#e5e7eb); }
.candles-table th:first-child { text-align: left; }
.candle-row td { padding: 3px 8px; border-top: 1px solid var(--border,#e5e7eb); text-align: right; vertical-align: middle; }
.candle-time { text-align: left !important; color: var(--text-secondary,#6b7280); white-space: nowrap; }
.candle-num { color: var(--text-primary,#0f172a); }
.candle-chg { font-weight: 600; }
.candle-vol { color: var(--text-secondary,#6b7280); }
.candle-up td { background: rgba(38,166,154,.04); }
.candle-down td { background: rgba(239,83,80,.04); }
.candles-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
.candles-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
@media (max-width: 767px) {
  .candles-card { max-width: 100%; }
  .candles-table { font-size: 10px; }
}
[data-theme="dark"] .candles-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .candles-table th { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .candle-row td { border-color: #30363d; }
[data-theme="dark"] .candle-up td { background: rgba(38,166,154,.07); }
[data-theme="dark"] .candle-down td { background: rgba(239,83,80,.07); }
[data-theme="dark"] .candles-footer { border-color: #30363d; }

/* ── Yahoo Card ───────────────────────────────────────────────────────────── */
.yahoo-wrapper { margin: 0 0 8px; }
.yahoo-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 520px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.yahoo-card.appear { opacity: 1; transform: translateY(0); }
.yahoo-header { padding: 10px 14px 4px; border-bottom: 1px solid var(--border,#e5e7eb); }
.yahoo-title { font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.yahoo-body { padding: 8px 14px; }
.yahoo-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
/* Market summary grid */
.yahoo-market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px; }
.yahoo-index-cell { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; background: var(--surface-2,#f8fafc); border-radius: 8px; }
.yahoo-index-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-secondary,#6b7280); }
.yahoo-index-price { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary,#0f172a); }
.yahoo-index-chg { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Screener table */
.yahoo-screener-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }
.yahoo-screener-table th { padding: 4px 8px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-secondary,#6b7280); background: var(--surface-2,#f8fafc); border-bottom: 1px solid var(--border,#e5e7eb); }
.yahoo-screener-row td { padding: 4px 8px; border-top: 1px solid var(--border,#e5e7eb); vertical-align: middle; color: var(--text-primary,#0f172a); }
.yahoo-screener-ticker { font-weight: 700; }
.yahoo-screener-name { color: var(--text-secondary,#6b7280); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yahoo-screener-price { text-align: right; }
.yahoo-screener-chg { text-align: right; font-weight: 600; }
/* Single quote */
.yahoo-quote-price { font-size: 2em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; padding: 6px 0 2px; }
.yahoo-quote-subprice { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.yahoo-quote-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.yahoo-quote-table td { padding: 3px 0; vertical-align: middle; }
.yahoo-quote-label { color: var(--text-secondary,#6b7280); width: 70px; }
.yahoo-quote-val { font-variant-numeric: tabular-nums; color: var(--text-primary,#0f172a); font-weight: 500; }
@media (max-width: 767px) {
  .yahoo-card { max-width: 100%; }
  .yahoo-market-grid { grid-template-columns: repeat(2, 1fr); }
}
[data-theme="dark"] .yahoo-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .yahoo-header { border-color: #30363d; }
[data-theme="dark"] .yahoo-index-cell { background: #0d1117; }
[data-theme="dark"] .yahoo-screener-table th { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .yahoo-screener-row td { border-color: #30363d; }
[data-theme="dark"] .yahoo-footer { border-color: #30363d; }

/* ── Search Card ──────────────────────────────────────────────────────────── */
.search-wrapper { margin: 0 0 8px; }
.search-card { background: var(--surface,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; overflow: hidden; max-width: 560px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.search-card.appear { opacity: 1; transform: translateY(0); }
.search-header { padding: 10px 14px 4px; border-bottom: 1px solid var(--border,#e5e7eb); }
.search-title { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary,#0f172a); }
.search-query-sub { display: block; font-size: 11px; font-style: italic; color: var(--text-secondary,#6b7280); margin-top: 2px; }
.search-body { padding: 10px 14px 4px; }
.search-answer { }
.search-answer-para { font-size: 13px; line-height: 1.6; color: var(--text-primary,#0f172a); margin: 0 0 8px; }
.search-answer-para:last-child { margin-bottom: 4px; }
.search-no-results { font-size: 13px; color: var(--text-secondary,#6b7280); font-style: italic; }
.search-sources { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border,#e5e7eb); }
.search-sources-label { font-size: 11px; font-weight: 700; color: var(--text-secondary,#6b7280); margin-right: 4px; }
.search-source-pill { font-size: 10px; padding: 2px 8px; background: var(--surface-2,#f1f5f9); color: var(--text-secondary,#6b7280); border-radius: 20px; border: 1px solid var(--border,#e5e7eb); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.search-footer { font-size: 11px; color: var(--text-secondary,#6b7280); padding: 8px 14px 10px; border-top: 1px solid var(--border,#e5e7eb); margin-top: 4px; }
.search-footer code { background: var(--surface-2,#f1f5f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
@media (max-width: 767px) {
  .search-card { max-width: 100%; }
}
[data-theme="dark"] .search-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .search-header { border-color: #30363d; }
[data-theme="dark"] .search-sources { border-color: #30363d; }
[data-theme="dark"] .search-source-pill { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .search-footer { border-color: #30363d; }
[data-theme="dark"] .search-footer code { background: #0d1117; }
[data-theme="dark"] .candles-footer code { background: #0d1117; }

/* ============================================
   THREAD PANEL
   ============================================ */

.thread-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100dvh;
    background: var(--bg-primary, #ffffff);
    border-left: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.thread-panel:not([hidden]) {
    transform: translateX(0);
}

/* Thread panel overlays content instead of pushing it */
body.thread-open .messages-container,
body.thread-open .chat-footer,
body.thread-open .chat-input-area {
    margin-right: 0; /* overlay only — no push */
}

/* Semi-transparent backdrop when thread is open */
.thread-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 199;
    cursor: pointer;
}
body.thread-open .thread-backdrop { display: block; }

/* On very wide screens, opt-in to side-by-side layout */
@media (min-width: 1200px) {
    body.thread-open.thread-side-by-side .messages-container,
    body.thread-open.thread-side-by-side .chat-footer,
    body.thread-open.thread-side-by-side .chat-input-area {
        margin-right: 380px;
        transition: margin-right 0.25s ease-out;
    }
}

.thread-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 16px);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-weight: var(--weight-semibold, 600);
    min-height: 56px;
    flex-shrink: 0;
}

.thread-panel-title {
    font-size: 1rem;
    color: var(--text-primary, #0f172a);
}

.thread-panel-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    padding: 4px;
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.thread-panel-close:hover {
    color: var(--text-primary, #0f172a);
    background: var(--bg-tertiary, #f1f5f9);
}

.thread-parent-context {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f8fafc);
    flex-shrink: 0;
}

.thread-parent-sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    display: block;
    margin-bottom: 4px;
}

.thread-parent-bubble {
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    line-height: 1.45;
    border-left: 3px solid var(--apple-blue, #007aff);
    padding-left: 10px;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-replies-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thread-reply.message {
    max-width: 100%;
}

.thread-empty,
.thread-error,
.thread-loading {
    font-size: 13px;
    color: var(--text-tertiary, #9ca3af);
    text-align: center;
    padding: 16px;
}

.thread-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}

.thread-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.thread-input {
    flex: 1;
    background: var(--bg-input, var(--bg-secondary, #f8fafc));
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    padding: 8px 14px;
    font-family: var(--font-system, system-ui, sans-serif);
    font-size: 14px;
    color: var(--text-primary, #0f172a);
    resize: none;
    outline: none;
    min-height: 38px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.4;
}

.thread-input:focus {
    border-color: var(--apple-blue, #007aff);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.thread-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--apple-blue, #007aff);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
}
.thread-send-btn:hover { opacity: 0.85; }
.thread-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Thread reply count badge on messages */
.thread-reply-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--apple-blue, #007aff);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
    margin-top: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.thread-reply-count:hover { opacity: 0.75; }

/* Thread button in message actions */
.thread-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    min-height: 28px;
    transition: color 0.15s, background 0.15s;
}
.thread-btn:hover {
    color: var(--apple-blue, #007aff);
    background: var(--bg-tertiary, #f1f5f9);
}

/* Dark mode */
[data-theme="dark"] .thread-panel {
    background: var(--bg-primary, #0d1117);
    border-color: #30363d;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .thread-panel-header { border-color: #30363d; }
[data-theme="dark"] .thread-parent-context { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .thread-input-area { border-color: #30363d; }
[data-theme="dark"] .thread-input { background: #161b22; border-color: #30363d; color: #e6edf3; }
[data-theme="dark"] .thread-panel-close:hover { background: #21262d; }
[data-theme="dark"] .thread-btn:hover { background: #21262d; }

@media (max-width: 768px) {
    .thread-panel {
        width: 100%;
        top: 60px;
        height: calc(100dvh - 60px);
        transform: translateY(100%);
    }
    .thread-panel:not([hidden]) {
        transform: translateY(0);
    }
    body.thread-open .messages-container,
    body.thread-open .chat-footer,
    body.thread-open .chat-input-area {
        margin-right: 0;
    }
}

/* Static welcome message has no real message-id — hide its thread button */
.lenny-welcome .thread-btn { display: none !important; }

/* Inline error banner for file attach failures (visible even if TTS is unavailable) */
.attach-error-notice {
    color: var(--apple-red);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(255, 59, 48, 0.08);
    border: 1px solid rgba(255, 59, 48, 0.25);
    margin-bottom: var(--space-1);
}

/* ============================================================
   Voice Call Overlay — incoming call notification
============================================================ */
.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: callFadeIn 0.2s ease;
}
.call-overlay[hidden] { display: none; }

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

.call-overlay-card {
    background: var(--bg-secondary, #1c1c1e);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 36px 40px;
    text-align: center;
    min-width: 260px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    animation: callCardEntrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes callCardEntrance {
    0%   { transform: scale(0.88) translateY(12px); opacity: 0; }
    60%  { transform: scale(1.03) translateY(-3px); opacity: 1; }
    80%  { transform: scale(0.98) translateY(1px);  opacity: 1; }
    100% { transform: scale(1.0)  translateY(0);    opacity: 1; }
}

.call-overlay-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.18);
    border: 2px solid rgba(52, 199, 89, 0.5);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    animation: callPulse 1.5s ease-in-out infinite;
    color: #34c759;
}

@keyframes callPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0.4); }
    50%       { box-shadow: 0 0 0 12px rgba(52,199,89,0); }
}

.call-overlay-title {
    font-size: 0.85rem;
    color: var(--text-secondary, #8e8e93);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.call-overlay-caller {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 28px;
}

.call-overlay-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.call-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}
.call-btn:hover { transform: scale(1.05); filter: brightness(1.1); }
.call-btn:active { transform: scale(0.97); }

.call-accept {
    background: #34c759;
    color: #fff;
}
.call-decline {
    background: #ff3b30;
    color: #fff;
}

/* ============================================================
   Voice Call HUD — shown while in an active call
============================================================ */
.voice-hud {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 985; /* above speaker overlay (960) and exit btn (980) */
    animation: hudSlideDown 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.voice-hud[hidden] { display: none; }

@keyframes hudSlideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.voice-hud-inner {
    background: rgba(28,28,30,0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    padding: 8px 16px 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    white-space: nowrap;
}

.voice-hud-indicator {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #34c759;
    animation: hudPulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes hudPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.voice-hud-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: #fff;
}

.voice-hud-controls {
    display: flex;
    gap: 6px;
}

.voice-hud-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-radius: 50px;
    padding: 6px 12px;
    font-size: clamp(0.72rem, 1.4vw, 0.82rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    color: #fff;
}
.voice-hud-btn:active { transform: scale(0.96); }

.ptt-btn {
    background: rgba(255,255,255,0.15);
}
.ptt-btn[aria-pressed="true"],
.ptt-btn.active {
    background: #34c759;
}
.hangup-btn {
    background: #ff3b30;
    min-width: 72px;
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.hangup-btn:hover {
    background: #ff2d20;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(255, 59, 48, 0.45);
}
.hangup-btn:active {
    transform: scale(0.96);
    box-shadow: none;
}

.voice-participants {
    display: flex;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
}

.voice-participant {
    display: flex;
    align-items: center;
    gap: 3px;
}
.voice-participant.speaking {
    color: #34c759;
}
.voice-participant-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ============================================================
   Voice — header button active-call state
============================================================ */
#voice-call-btn.in-call {
    color: #34c759;
    background: rgba(52, 199, 89, 0.15);
    border-radius: 8px;
    animation: callBtnPulse 2s ease-in-out infinite;
    position: relative;
}
#voice-call-btn.in-call::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 0 rgba(52,199,89,0.4);
    animation: callDotPulse 1.5s ease-in-out infinite;
}
@keyframes callBtnPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(52,199,89,0.5),
                    0 0 8px rgba(52,199,89,0.2);
        transform: scale(1.0);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(52,199,89,0),
                    0 0 16px rgba(52,199,89,0.4);
        transform: scale(1.05);
    }
}
@keyframes callDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.3); opacity: 0.7; }
}

/* ── Mute/Unmute toggle — primary HUD control ─────────────── */
.mute-btn {
    background: rgba(52, 199, 89, 0.2) !important;
    color: #34c759 !important;
    border: 1px solid rgba(52, 199, 89, 0.4);
    font-size: 0.82rem !important;
    padding: 7px 14px !important;
    min-width: 78px;
}
.mute-btn.muted {
    background: rgba(255, 59, 48, 0.18) !important;
    color: #ff3b30 !important;
    border-color: rgba(255, 59, 48, 0.55);
    animation: mutedBorderPulse 1.6s ease-in-out infinite;
}
@keyframes mutedBorderPulse {
    0%, 100% {
        border-color: rgba(255, 59, 48, 0.55);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.0),
                    inset 0 0 0 1px rgba(255, 59, 48, 0.0);
    }
    50% {
        border-color: rgba(255, 59, 48, 0.95);
        box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.22),
                    inset 0 0 0 1px rgba(255, 59, 48, 0.15);
    }
}

/* ── LIVE badge ───────────────────────────────────────────── */
.voice-hud-live {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #34c759;
    background: rgba(52,199,89,0.15);
    border: 1px solid rgba(52,199,89,0.4);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* ── PTT secondary button ─────────────────────────────────── */
.ptt-btn {
    background: rgba(255,255,255,0.08) !important;
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    opacity: 0.8;
    border: 1px solid rgba(255,255,255,0.15);
}
.ptt-btn.active,
.ptt-btn[aria-pressed="true"] {
    background: rgba(52,199,89,0.25) !important;
    color: #34c759 !important;
    opacity: 1;
    border-color: rgba(52,199,89,0.5);
}
.ptt-btn:hover { opacity: 1; }

/* ── Trader Pulse — speaking participant animation ────────── */
.voice-participant-pulse {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    margin-right: 4px;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background 0.15s;
}
.voice-participant.speaking .voice-participant-pulse {
    background: #4cd964;
    animation: traderPulse 0.55s ease-in-out infinite alternate;
    box-shadow: 0 0 10px rgba(76, 217, 100, 0.9),
                0 0 20px rgba(76, 217, 100, 0.45);
}
@keyframes traderPulse {
    from { transform: scale(1);    opacity: 0.85; }
    to   { transform: scale(1.75); opacity: 1; }
}
.voice-participant.speaking {
    color: #4cd964;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(76, 217, 100, 0.5);
}

/* ── HUD layout tweak — give more breathing room ──────────── */
.voice-hud-inner {
    gap: 8px !important;
}

/* ============================================================
   Video Call Grid — shown when camera enabled during a call
============================================================ */
.video-call-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 850;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    max-width: 92vw;
    overflow-x: auto;
    animation: callFadeIn 0.2s ease;
}
.video-call-container[hidden] { display: none; }

.video-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: #111;
    flex-shrink: 0;
}
.local-tile  { width: 140px; height: 105px; }
.remote-video-tile {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
    height: 135px;
}
.video-el {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    background: #0a0a0a;
}
.remote-videos-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.video-name-label {
    position: absolute;
    bottom: 5px; left: 7px;
    color: #fff;
    font-size: clamp(0.68rem, 1.2vw, 0.78rem);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    padding: 1px 6px;
    pointer-events: none;
}

/* Speaking ring on remote tile */
.remote-video-tile.speaking {
    border-color: #34c759;
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.4);
}

/* Frozen track indicator — shown when remote camera track ends unexpectedly */
.video-frozen-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 6px;
    padding: 4px 10px;
    pointer-events: none;
    animation: frozen-pulse 2s ease-in-out infinite;
}
@keyframes frozen-pulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; }
}

/* Remote camera muted (peer toggled their camera off) — dim the frozen frame
   and overlay a "Camera off" label so the muted state is visible, not just a
   silently frozen last frame. */
.video-tile.camera-muted .video-el {
    filter: grayscale(1) brightness(0.4);
}
.video-tile.camera-muted::after {
    content: 'Camera off';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    padding: 4px 10px;
    pointer-events: none;
}

/* Live captions bar — subtitle-style transcript pinned to the bottom of the
   call view. The log is the accessible (aria-live) transcript; interim text
   shows the in-progress line beneath it. */
.captions-bar {
    position: fixed;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%);
    width: min(680px, 92vw);
    max-height: 30vh;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    z-index: 60;
    pointer-events: none;
}
.captions-log {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: auto;
}
.captions-log-entry {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.captions-interim {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-style: italic;
    min-height: 1.2em;
}
.captions-toggle-btn.active {
    background: rgba(52, 199, 89, 0.2) !important;
    color: #34c759 !important;
}
.captions-save-btn {
    align-self: flex-end;
    pointer-events: auto;
    margin-top: 2px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
}
.captions-save-btn:hover,
.captions-save-btn:focus-visible {
    background: rgba(255, 255, 255, 0.22);
}

/* Camera button in HUD */
.camera-btn {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem !important;
    padding: 6px 11px !important;
    color: rgba(255,255,255,0.5) !important;
}
.camera-btn.camera-on {
    background: rgba(52, 199, 89, 0.2) !important;
    color: #34c759 !important;
    border-color: rgba(52, 199, 89, 0.4);
}

/* ── Speaker view HUD button ─────────────────────────────── */
.speaker-view-btn {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem !important;
    padding: 6px 11px !important;
    color: rgba(255,255,255,0.5) !important;
}
.speaker-view-btn.speaker-on {
    background: rgba(52, 199, 89, 0.2) !important;
    color: #34c759 !important;
    border-color: rgba(52, 199, 89, 0.4);
}

/* ── Per-tile pin/expand button ──────────────────────────── */
.tile-pin-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
}
.video-tile:hover .tile-pin-btn,
.video-tile:focus-within .tile-pin-btn {
    opacity: 1;
}
.tile-pin-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* ── Speaker/fullscreen overlay ──────────────────────────── */
#video-speaker-overlay {
    position: fixed;
    inset: 0;
    z-index: 960;
    background: #000;
    display: flex;
    flex-direction: column;
}
#video-speaker-overlay[hidden] { display: none; }

#speaker-main-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
#speaker-main-wrap .video-tile {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    border-color: transparent;
}
#speaker-main-wrap .video-el {
    width: 100%; height: 100%;
    object-fit: contain;
}

/* Thumbnail strip at bottom of speaker overlay */
#speaker-thumb-strip {
    height: 96px;
    min-height: 96px;
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.85);
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow-x: auto;
    align-items: center;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#speaker-thumb-strip::-webkit-scrollbar { display: none; }
#speaker-thumb-strip .video-tile {
    width: 128px;
    min-width: 128px;
    height: 76px;
    cursor: pointer;
    border-color: rgba(255,255,255,0.2);
    transition: border-color 0.15s;
    scroll-snap-align: start;
    flex-shrink: 0;
}
#speaker-thumb-strip .video-tile:hover {
    border-color: rgba(255,255,255,0.55);
}
#speaker-thumb-strip .video-tile.speaking {
    border-color: #34c759;
    box-shadow: 0 0 0 2px rgba(52,199,89,0.4);
}
#speaker-thumb-strip .tile-pin-btn { display: none; }

/* Self-view PiP while overlay is open */
.video-tile.pip-self {
    position: fixed !important;
    bottom: 108px; /* above thumb strip */
    right: 16px;
    width: 160px !important;
    height: 120px !important;
    z-index: 970;
    box-shadow: 0 8px 32px rgba(0,0,0,0.75);
    cursor: move;
    user-select: none;
    touch-action: none;
}

/* Exit speaker view button */
.speaker-exit-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 980;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    color: #fff;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.speaker-exit-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* ── Voice reconnect banner ───────────────────────────────── */
.voice-reconnect-banner {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff9500;
    color: #fff;
    padding: 6px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 1055;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    pointer-events: none;
    animation: fadeIn 0.2s ease;
}
.voice-reconnect-banner[hidden] { display: none; }

/* Hidden icon helper — avoids inline style="display:none" (CSP safe) */
.voice-icon-hidden { display: none !important; }

/* ── Voice HUD — mobile stacking at 480px ────────────────── */
@media (max-width: 480px) {
    .voice-hud {
        top: auto;
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 24px);
        max-width: 360px;
    }
    .voice-hud-inner {
        flex-wrap: wrap !important;
        border-radius: 18px !important;
        padding: 10px 12px 12px !important;
        gap: 8px !important;
        justify-content: space-between;
    }
    .voice-hud-label,
    .voice-hud-live {
        flex: 1 1 auto;
    }
    .voice-hud-controls {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }
    .voice-hud-btn {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        min-height: 44px;
    }
    .hangup-btn {
        flex: 1 1 100%;
        min-height: 48px;
        font-size: 0.88rem !important;
    }
    .voice-participants {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── Voice Presence Bar ──────────────────────────────────────────────────── */
.voice-presence-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-height: 36px;
    flex-shrink: 0;
}
.voice-presence-bar[hidden] { display: none; }
.vp-bar-icon { color: rgba(255,255,255,0.4); display: flex; align-items: center; }
.vp-avatars { display: flex; gap: -6px; /* overlap */ align-items: center; }
.vp-avatar {
    width: 32px; height: 32px;
    min-width: 44px; min-height: 44px;
    border-radius: 50%;
    background: #3a3a5c;
    border: 2px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
    margin-left: -8px;
    position: relative;
    cursor: default;
    transition: border-color 0.2s;
    overflow: hidden;
}
.vp-avatar:first-child { margin-left: 0; }
.vp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vp-avatar.speaking {
    border-color: #34c759;
    box-shadow: 0 0 0 2px rgba(52,199,89,0.4);
}
.vp-avatar-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}
.vp-avatar:hover .vp-avatar-tooltip { opacity: 1; }
.vp-overflow {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin-left: 4px;
}

/* ── Layout mode HUD button ──────────────────────────────────────────────── */
.layout-mode-btn {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem !important;
    padding: 6px 11px !important;
    color: rgba(255,255,255,0.5) !important;
    gap: 5px;
}
.layout-mode-btn #layout-mode-icon {
    font-size: 1rem;
    line-height: 1;
}
.layout-mode-btn.active {
    background: rgba(100,130,255,0.22) !important;
    color: #8899ff !important;
    border-color: rgba(100,130,255,0.4);
}

/* ── Layout modes ────────────────────────────────────────────────────────── */
/* chat-primary (default): video strip at bottom, chat fills rest — no extra rules needed */

/* video-primary: video grid fills ~55% of main area; chat collapses to right rail (280px) */
body.layout-video-primary .chat-main {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    align-items: stretch;
}
body.layout-video-primary .video-call-container {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    z-index: 100;
    flex: 1 1 55%;
    max-height: 100%;
    padding: 8px;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    overflow-y: auto;
    background: rgba(0,0,0,0.92);
    order: -1;
}
body.layout-video-primary .remote-videos-grid {
    width: 100%;
}
body.layout-video-primary .local-tile { width: 160px; height: 120px; }
body.layout-video-primary .remote-video-tile { flex: 1; min-width: 0; height: 140px; }
body.layout-video-primary .messages-container {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
    border-left: 1px solid rgba(255,255,255,0.07);
    overflow-y: auto;
    height: 100%;
}

/* Auto grid layout — 1 col default, 2-col for 2–4, 3-col for 5+ */
.remote-videos-grid.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.remote-videos-grid.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.remote-videos-grid.grid-2 .remote-video-tile,
.remote-videos-grid.grid-3 .remote-video-tile {
    min-width: 0;
    max-width: none;
    width: auto;
    height: 120px;
}

/* ── Active speaker scroll-follow PiP ──────────────────────────────────── */
.active-speaker-pip {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 200px;
    height: 150px;
    z-index: 855;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(52,199,89,0.6);
    box-shadow: 0 8px 32px rgba(0,0,0,0.65);
    background: #111;
    display: none;
    animation: callFadeIn 0.2s ease;
}
.active-speaker-pip.visible { display: block; }
.active-speaker-pip video {
    width: 100%; height: 100%;
    object-fit: cover;
}
.active-speaker-pip-label {
    position: absolute;
    bottom: 5px; left: 7px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(0,0,0,0.55);
    border-radius: 4px;
    padding: 1px 6px;
    pointer-events: none;
}
.active-speaker-pip-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    transition: background 0.15s;
}
.active-speaker-pip-close:hover {
    background: rgba(255,255,255,0.2);
}

/* ── Phase 4A: Self-view ghost treatment ────────────────────────────────── */
#local-video-wrap {
    transition: filter 0.4s ease, opacity 0.4s ease;
}
#local-video-wrap.self-ghost {
    filter: saturate(0.6) brightness(0.85);
    opacity: 0.82;
}

/* ── Phase 4B: Self-view hide ───────────────────────────────────────────── */
#local-video-wrap.self-hidden {
    display: none;
}

/* ── Phase 4B: Hide button on self-view tile ────────────────────────────── */
.local-hide-btn {
    position: absolute;
    top: 5px;
    right: 30px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 6;
}
#local-video-wrap:hover .local-hide-btn,
#local-video-wrap:focus-within .local-hide-btn {
    opacity: 1;
}
.local-hide-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* ── Phase 4C: Mirror — applied on #local-video element only ────────────── */
#local-video.mirrored {
    transform: scaleX(-1);
}

/* ── Phase 4C: Mirror HUD button ────────────────────────────────────────── */
.mirror-btn {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem !important;
    padding: 6px 11px !important;
    color: rgba(255,255,255,0.5) !important;
}
.mirror-btn.mirror-on {
    background: rgba(90,130,255,0.18) !important;
    color: #7aa3ff !important;
    border-color: rgba(90,130,255,0.4);
}

/* ── Phase 4B: Self-show pill button ────────────────────────────────────── */
.self-show-btn {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem !important;
    padding: 6px 11px !important;
    color: rgba(255,255,255,0.5) !important;
}

/* Legacy self-view controls (pre-Phase-4 dynamic injection) */
.self-view-controls {
    display: none;
}
.selfview-restore-btn {
    display: none;
}

/* Screen share button */
.screenshare-btn {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem !important;
    padding: 6px 11px !important;
    color: rgba(255,255,255,0.5) !important;
}
.screenshare-btn.sharing {
    background: rgba(255,149,0,0.2) !important;
    color: #ff9500 !important;
    border-color: rgba(255,149,0,0.4);
}
/* ── Device check modal ─────────────────────────────────────────────────── */
.device-check-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
.device-check-modal[hidden] { display: none; }
.device-check-inner {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 28px 28px 22px;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.device-check-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.device-check-preview-wrap {
    position: relative;
    height: 180px;
    background: #0a0a0f;
    border-radius: 10px;
    overflow: hidden;
}
.device-preview-video {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}
.device-preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.85rem;
}
.device-check-selects { display: flex; flex-direction: column; gap: 8px; }
.device-check-label { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.device-check-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #fff;
    padding: 6px 10px;
    font-size: 0.84rem;
    width: 100%;
}
.device-check-actions { display: flex; gap: 10px; justify-content: flex-end; }
.device-check-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.device-check-cancel {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.device-check-join {
    background: #7c3aed;
    color: #fff;
}
.device-check-join:hover { background: #6d28d9; }

/* ── Thread Pins Panel ───────────────────────────────────────────── */
.pins-panel {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(124,58,237,0.06);
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    flex-shrink: 0;
}
.pins-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 6px;
    position: sticky;
    top: 0;
    background: rgba(18,18,20,0.95);
    z-index: 1;
}
.pins-panel-title {
    font-size: 12px;
    font-weight: 600;
    color: #c4b5fd;
    letter-spacing: 0.02em;
}
.pins-panel-close {
    background: none;
    border: none;
    color: #71717a;
    font-size: 16px;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1;
}
.pins-panel-close:hover { color: #e4e4e7; }
.pins-list {
    list-style: none;
    margin: 0;
    padding: 0 14px 8px;
}
.pins-empty {
    font-size: 12px;
    color: #52525b;
    padding: 6px 0;
    font-style: italic;
}
.pinned-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px;
    color: #a1a1aa;
}
.pinned-item:last-child { border-bottom: none; }
.pinned-item-sender {
    color: #c4b5fd;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 11px;
}
.pinned-item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d4d4d8;
}
.pinned-item-unpin {
    background: none;
    border: none;
    color: #52525b;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.pinned-item-unpin:hover { color: #ef4444; }

/* Pin button on messages */
.pin-btn {
    background: none;
    border: none;
    color: #52525b;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: color 0.15s, background 0.15s;
}
.pin-btn:hover { color: #c4b5fd; background: rgba(124,58,237,0.12); }
.pin-btn.pinned { color: #7c3aed; }

/* Pins toggle in header */
.pins-toggle-btn {
    font-size: 12px;
    color: #71717a;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.pins-toggle-btn:hover { color: #c4b5fd; background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.3); }
.pins-toggle-btn[aria-pressed="true"] { color: #c4b5fd; background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.4); }

/* ── Soundboard ──────────────────────────────────────────────────── */
.soundboard-btn { color: #a78bfa; }
.soundboard-btn.active { color: #7c3aed; background: rgba(124,58,237,0.18); }

.soundboard-panel {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 240px;
    background: #18181b;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 14px;
    z-index: 1200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sb-title { font-size: 13px; font-weight: 600; color: #e4e4e7; }
.sb-close {
    background: none;
    border: none;
    color: #71717a;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}
.sb-close:hover { color: #e4e4e7; }
.sb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.sb-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 10px;
    color: #a1a1aa;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sb-option span { font-size: 10px; }
.sb-option:hover { background: rgba(255,255,255,0.1); color: #e4e4e7; }
.sb-option.active { background: rgba(124,58,237,0.25); border-color: #7c3aed; color: #c4b5fd; }
.sb-vol-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sb-vol-label { font-size: 11px; color: #71717a; flex-shrink: 0; }
.sb-vol-slider { flex: 1; accent-color: #7c3aed; }
.sb-vol-display { font-size: 11px; color: #a1a1aa; min-width: 28px; text-align: right; }

/* ── Clip & Ship ─────────────────────────────────────────────────── */
.clip-btn { color: #f59e0b; }
.clip-btn.recording { color: #ef4444; animation: clip-pulse 1s ease-in-out infinite; }
@keyframes clip-pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
.clip-btn .clip-icon-rec { display: none; }
.clip-btn.recording .clip-icon-idle { display: none; }
.clip-btn.recording .clip-icon-rec { display: block; }

/* ── Ghost Mode ─────────────────────────────────────────────────── */
.ghost-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    border-radius: inherit;
}
.ghost-overlay[hidden] { display: none; }

.ghost-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.35) brightness(0.88) contrast(1.04);
    animation: ghost-breathe 4s ease-in-out infinite;
}

@keyframes ghost-breathe {
    0%, 100% { transform: scale(1.0);    filter: grayscale(0.35) brightness(0.88); opacity: 0.95; }
    50%       { transform: scale(1.012); filter: grayscale(0.50) brightness(0.80); opacity: 0.88; }
}

.ghost-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 28%, rgba(180,180,255,0.08) 0%, transparent 45%),
        radial-gradient(circle at 78% 72%, rgba(220,180,255,0.06) 0%, transparent 45%);
    animation: ghost-drift 9s ease-in-out infinite;
}

@keyframes ghost-drift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-3px, 2px); }
    66%  { transform: translate(3px, -2px); }
    100% { transform: translate(0, 0); }
}

.ghost-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    background: rgba(15, 10, 30, 0.75);
    color: #c4b5fd;
    padding: 2px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Long-press ring on camera button */
#camera-toggle-btn.ghost-long-pressing {
    position: relative;
}
#camera-toggle-btn.ghost-long-pressing::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #a78bfa;
    animation: ghost-lp-ring 0.6s linear forwards;
    pointer-events: none;
}

@keyframes ghost-lp-ring {
    from { clip-path: inset(0 100% 0 0 round 50%); }
    to   { clip-path: inset(0 0% 0 0 round 50%); }
}

/* Local tile when in ghost mode — show ghost badge color on border */
#local-video-wrap.in-ghost-mode {
    outline: 2px solid rgba(167, 139, 250, 0.5);
    outline-offset: -2px;
}

/* ── Lemi AI Co-Participant Tile ─────────────────────────────────── */
.ai-tile {
  position: relative;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: borderShimmer 3s linear infinite;
  overflow: hidden;
  background-color: #18181b;
}

.ai-tile .lemi-canvas {
  width: 100%;
  height: 100%;
}

.ai-tile .video-name-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #a78bfa;
  font-weight: bold;
}

.ai-tile .lemi-transcript-preview {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: monospace;
  font-size: 11px;
  color: rgba(228, 228, 231, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0.2rem 0.5rem;
  background: rgba(24, 24, 27, 0.6);
}

.ai-tile .lemi-actions {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.ai-tile:hover .lemi-actions {
  display: block;
}

.lemi-actions button {
  background-color: #7c3aed;
  color: #e4e4e7;
  border: none;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin: 0 0.2rem;
}

.lemi-actions button:hover {
  background-color: #a78bfa;
}

.ai-tile.lemi-thinking {
  box-shadow: 0 0 10px 2px rgba(156, 96, 255, 0.4);
  animation: pulseGlow 2s infinite;
}

.ai-tile.lemi-responding {
  box-shadow: 0 0 15px 3px rgba(156, 96, 255, 0.8);
}

@keyframes borderShimmer {
  0% {
    border-color: rgba(255, 255, 255, 0.08);
  }
  50% {
    border-color: rgba(228, 228, 231, 0.3);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.08);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px 2px rgba(156, 96, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(156, 96, 255, 0.6);
  }
}

/* ── Lemi animation states ───────────────────────────────────────── */
.ai-tile { cursor: default; }
.ai-tile.lemi-thinking {
    box-shadow: 0 0 0 2px rgba(124,58,237,0.4), 0 0 20px rgba(124,58,237,0.2);
    animation: lemi-glow-pulse 1.5s ease-in-out infinite;
}
.ai-tile.lemi-responding {
    box-shadow: 0 0 0 2px rgba(0,200,200,0.5), 0 0 24px rgba(0,200,200,0.25);
}
@keyframes lemi-glow-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(124,58,237,0.4), 0 0 20px rgba(124,58,237,0.2); }
    50%      { box-shadow: 0 0 0 2px rgba(124,58,237,0.7), 0 0 32px rgba(124,58,237,0.4); }
}
.lemi-transcript-preview {
    position: absolute;
    bottom: 28px;
    left: 0; right: 0;
    padding: 0 8px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: rgba(200,200,255,0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.lemi-actions {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    display: flex; gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.ai-tile:hover .lemi-actions { opacity: 1; }
.lemi-actions button {
    background: rgba(20,15,40,0.85);
    border: 1px solid rgba(167,139,250,0.3);
    color: #c4b5fd;
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.lemi-actions button:hover { background: rgba(124,58,237,0.4); }

/* ── Apple HIG compliance — video/voice ─────────────────────────────────── */

/* Contrast: inactive HUD button labels lifted to 0.75 opacity (was 0.5) for 3:1 minimum */
.camera-btn,
.speaker-view-btn,
.layout-mode-btn,
.screenshare-btn,
.mirror-btn,
.soundboard-btn,
.clip-btn {
    color: rgba(255,255,255,0.75) !important;
}

/* Contrast: presence bar icon and overflow count */
.vp-bar-icon { color: rgba(255,255,255,0.75); }
.vp-overflow  { color: rgba(255,255,255,0.75); }

/* Focus-visible rings on all video/voice interactive elements (Apple + WCAG 2.4.11) */
.tile-pin-btn:focus-visible,
.speaker-exit-btn:focus-visible,
.vp-avatar:focus-visible,
.voice-hud-btn:focus-visible,
#local-hide-btn:focus-visible,
#mirror-btn:focus-visible,
#self-show-btn:focus-visible {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

/* prefers-reduced-motion — disable all video/voice transitions and animations */
@media (prefers-reduced-motion: reduce) {
    .video-tile,
    .tile-pin-btn,
    .vp-avatar,
    .voice-hud,
    .voice-hud-btn,
    .active-speaker-pip,
    .speaker-exit-btn,
    .self-ghost,
    #local-video-wrap,
    #local-video,
    .vp-avatar-tooltip,
    .voice-presence-bar {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Apple HIG: prefers-color-scheme: light — video/voice overlays ─────── */
@media (prefers-color-scheme: light) {
    /* HUD pill */
    .voice-hud-inner {
        background: rgba(255,255,255,0.82) !important;
        border-color: rgba(0,0,0,0.1) !important;
    }
    .voice-hud-btn  { color: #1c1c1e !important; }
    .voice-hud-label,
    .voice-hud-live { color: #1c1c1e; }
    .voice-hud-indicator { background: #34c759; }

    /* Speaker overlay */
    #video-speaker-overlay { background: #f2f2f7; }
    #speaker-main-wrap     { background: #000; }
    #speaker-thumb-strip   {
        background: rgba(242,242,247,0.92);
        border-top-color: rgba(0,0,0,0.1);
    }
    #speaker-thumb-strip .video-tile { border-color: rgba(0,0,0,0.15); }

    /* Video container */
    .video-call-container {
        background: rgba(255,255,255,0.88);
        border-color: rgba(0,0,0,0.1);
    }
    .video-tile { border-color: rgba(0,0,0,0.12); }

    /* Presence bar */
    .voice-presence-bar {
        background: rgba(0,0,0,0.05);
        border-bottom-color: rgba(0,0,0,0.08);
    }
    .vp-bar-icon  { color: rgba(0,0,0,0.55); }
    .vp-overflow  { color: rgba(0,0,0,0.55); }
    .vp-avatar    { background: #e5e5ea; color: #1c1c1e; border-color: rgba(0,0,0,0.1); }

    /* Reconnect banner stays orange — intentional */

    /* Exit speaker button */
    .speaker-exit-btn {
        background: rgba(255,255,255,0.82);
        border-color: rgba(0,0,0,0.15);
        color: #1c1c1e;
    }
    .speaker-exit-btn:hover { background: rgba(0,0,0,0.08); }

    /* Active speaker scroll PiP */
    .active-speaker-pip {
        background: rgba(255,255,255,0.92);
        border-color: rgba(0,0,0,0.12);
    }
}

/* ============================================================
   Phase 5A — Pre-join device check sheet
============================================================ */
.prejoin-sheet {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.prejoin-sheet[hidden] { display: none; }

.prejoin-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
}

.prejoin-card {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    background: rgba(28,28,30,0.95);
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),
                0 20px 60px rgba(0,0,0,0.6);
    padding: 20px 20px 32px;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.prejoin-sheet:not([hidden]) .prejoin-card {
    transform: translateY(0);
}

.prejoin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.prejoin-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.prejoin-close {
    background: rgba(118,118,128,0.24);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(235,235,245,0.6);
    font-size: 1rem;
    cursor: pointer;
    transition: background 300ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.prejoin-close:hover { background: rgba(118,118,128,0.4); }

.prejoin-preview {
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
    margin-bottom: 16px;
    position: relative;
}
.prejoin-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.prejoin-audio-meter {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 50px;
    overflow: hidden;
}
.prejoin-meter-bar {
    height: 100%;
    width: 0%;
    background: #34C759;
    border-radius: 50px;
    transition: width 80ms linear;
}

.prejoin-controls {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 20px;
}
.prejoin-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(235,235,245,0.6);
    white-space: nowrap;
}
.prejoin-select {
    background: rgba(118,118,128,0.12);
    border: 1px solid rgba(60,60,67,0.29);
    border-radius: 10px;
    min-height: 44px;
    padding: 0 10px;
    color: #fff;
    font-size: 0.88rem;
    cursor: pointer;
    width: 100%;
}
.prejoin-select option { background: #1c1c1e; }

.prejoin-error {
    margin: 0 0 8px;
    padding: 8px 12px;
    background: rgba(255,69,58,0.15);
    border: 1px solid rgba(255,69,58,0.4);
    border-radius: 8px;
    color: #ff453a;
    font-size: 0.88rem;
    text-align: center;
}
.prejoin-error[hidden] { display: none; }
.prejoin-actions {
    display: flex;
    gap: 12px;
}
.prejoin-btn {
    flex: 1;
    min-height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 300ms cubic-bezier(0.25,0.46,0.45,0.94),
                transform 150ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.prejoin-btn:active { transform: scale(0.97); }
.prejoin-btn-primary {
    background: #007AFF;
    color: #fff;
}
.prejoin-btn-primary:hover { background: #0A84FF; }
.prejoin-btn-secondary {
    background: rgba(118,118,128,0.24);
    color: rgba(235,235,245,0.8);
}
.prejoin-btn-secondary:hover { background: rgba(118,118,128,0.36); }

/* ── Focus trap ring ─────────────────────────────────────── */
.prejoin-close:focus-visible,
.prejoin-select:focus-visible,
.prejoin-btn:focus-visible {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

/* ============================================================
   Phase 5B — Auto grid layout
============================================================ */
.remote-videos-grid.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.remote-videos-grid.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* ============================================================
   Phase 5C — Screen share view overlay
============================================================ */
.screenshare-view {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.screenshare-view[hidden] { display: none; }
.screenshare-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.screenshare-view-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,59,48,0.85);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 8px 16px;
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 300ms cubic-bezier(0.25,0.46,0.45,0.94),
                transform 150ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.screenshare-view-close:hover { background: #ff3b30; transform: scale(1.04); }
.screenshare-view-close:active { transform: scale(0.97); }
.screenshare-view-close:focus-visible {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

/* ============================================================
   Phase 5D — In-call emoji reaction bar
============================================================ */
.reaction-bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(28,28,30,0.75);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.reaction-bar[hidden] { display: none; }
#video-speaker-overlay .reaction-bar {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.reaction-bar-grid {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.reaction-btn {
    background: transparent;
    border: none;
    border-radius: 50px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1),
                background 150ms ease;
    padding: 4px;
}
.reaction-btn:hover {
    background: rgba(255,255,255,0.12);
    transform: scale(1.25);
}
.reaction-btn:active { transform: scale(0.95); }
.reaction-btn:focus-visible {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

/* Floating reaction animation */
@keyframes reactionFloat {
    0%   { transform: translateY(0) scale(1);     opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(-120px) scale(0); opacity: 0; }
}
.reaction-float {
    position: fixed;
    font-size: 2.2rem;
    pointer-events: none;
    z-index: 20000;
    animation: reactionFloat 2s ease-out forwards;
}

/* ============================================================
   Phase 5E — Call history panel + HUD button
============================================================ */
.call-history-panel {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 320px;
    background: rgba(28,28,30,0.95);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),
                0 20px 60px rgba(0,0,0,0.6);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    max-height: 480px;
    overflow: hidden;
}
.call-history-panel[hidden] { display: none; }

.ch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    border-bottom: 1px solid rgba(84,84,88,0.65);
}
.ch-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.ch-close {
    background: rgba(118,118,128,0.24);
    border: none;
    border-radius: 50%;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(235,235,245,0.6);
    font-size: 1rem;
    cursor: pointer;
    transition: background 300ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.ch-close:hover { background: rgba(118,118,128,0.4); }
.ch-close:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }

.ch-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}
.ch-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(84,84,88,0.35);
    color: rgba(235,235,245,0.85);
    font-size: 0.88rem;
}
.ch-entry:last-child { border-bottom: none; }
.ch-entry-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.ch-entry-info { flex: 1; min-width: 0; }
.ch-entry-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.ch-entry-meta {
    font-size: 0.75rem;
    color: rgba(235,235,245,0.5);
}
.ch-entry-missed .ch-entry-name { color: #FF453A; }

.ch-btn-clear {
    margin: 8px 16px 16px;
    background: rgba(255,59,48,0.15);
    border: 1px solid rgba(255,59,48,0.3);
    border-radius: 10px;
    color: #FF453A;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 44px;
    cursor: pointer;
    transition: background 300ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.ch-btn-clear:hover { background: rgba(255,59,48,0.25); }
.ch-btn-clear:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }

.ch-hud-btn {
    background: rgba(255,255,255,0.1);
    position: relative;
}
.ch-hud-btn.has-missed::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF453A;
}
.ch-hud-btn:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }

/* ── Price alert toasts ───────────────────────────────────────────────── */
#alert-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.alert-toast {
    background: #FF9500;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: auto;
    cursor: pointer;
    max-width: 320px;
    word-break: break-word;
}
.alert-toast--visible {
    opacity: 1;
    transform: translateY(0);
}
[data-theme="dark"] .alert-toast {
    background: #FF9F0A;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}