/* ═══════════════════════════════════════════════════════
       DESIGN TOKENS - MODERN PREMIUM AI CHAT
    ═══════════════════════════════════════════════════════ */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

    :root {
      /* Dark Theme (Default) */
      --bg-0: #09090b;
      /* Deepest background (e.g., sidebar) */
      --bg-1: #121214;
      /* Main chat area */
      --bg-2: #18181b;
      /* Elements, inputs */
      --bg-3: #27272a;
      /* Hover states */
      --bg-4: #3f3f46;
      /* Active/Borders */

      --border: #27272a;
      --border-soft: #1f1f22;
      --border-focus: #3b82f6;

      --text-0: #f8fafc;
      /* Primary text */
      --text-1: #e2e8f0;
      /* Secondary text */
      --text-2: #94a3b8;
      /* Tertiary/Muted */
      --text-3: #64748b;
      /* Disabled/Placeholder */

      --accent: #f8fafc;
      --accent-dim: #e2e8f0;
      --accent-glow: rgba(255, 255, 255, 0.08);
      --accent-bg: #27272a;

      --brand: #3b82f6;
      /* Modern Blue */
      --brand-hover: #2563eb;
      --brand-glow: rgba(59, 130, 246, 0.2);

      --red: #ef4444;
      --green: #10b981;
      --blue: #3b82f6;

      --thinking-bg: rgba(59, 130, 246, 0.04);
      --thinking-border: rgba(59, 130, 246, 0.15);

      --user-msg-bg: #1e1e24;
      /* Distinct user bubble */
      --ai-msg-bg: transparent;

      --sidebar-w: 280px;
      --sidebar-collapsed-w: 68px;

      --radius-lg: 16px;
      --radius: 12px;
      --radius-sm: 8px;
      --radius-xs: 6px;

      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      --shadow-glow: 0 0 20px var(--brand-glow);

      --font: 'Inter', system-ui, -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
      --font-display: 'Inter', system-ui, sans-serif;

      --transition-fast: 0.15s ease;
      --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-theme="light"] {
      --bg-0: #f8fafc;
      --bg-1: #ffffff;
      --bg-2: #f1f5f9;
      --bg-3: #e2e8f0;
      --bg-4: #cbd5e1;

      --border: #e2e8f0;
      --border-soft: #f1f5f9;
      --border-focus: #3b82f6;

      --text-0: #0f172a;
      --text-1: #334155;
      --text-2: #64748b;
      --text-3: #94a3b8;

      --accent: #0f172a;
      --accent-dim: #334155;
      --accent-glow: rgba(0, 0, 0, 0.05);
      --accent-bg: #f1f5f9;

      --user-msg-bg: #f8fafc;

      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    }

    /* ═══════════════════════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════════════════════ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      height: 100dvh;
      overflow: hidden;
      font-family: var(--font);
      background: var(--bg-1);
      color: var(--text-0);
      font-size: 16px;
      /* Base font increased implicitly as we will use lerp/em/rem */
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

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

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

    ::-webkit-scrollbar-thumb {
      background: var(--bg-4);
      border-radius: 99px;
    }

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

    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
      color: inherit;
    }

    input,
    textarea,
    select {
      font-family: inherit;
      color: var(--text-0);
      background: transparent;
      border: none;
      outline: none;
    }

    a {
      color: var(--brand);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    a:hover {
      color: var(--brand-hover);
      text-decoration: underline;
    }

    /* ═══════════════════════════════════════════════════════
       LAYOUT
    ═══════════════════════════════════════════════════════ */
    #app {
      display: flex;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      background: var(--bg-1);
    }

    /* ═══════════════════════════════════════════════════════
       SIDEBAR
    ═══════════════════════════════════════════════════════ */
    #sidebar {
      width: var(--sidebar-w);
      min-width: var(--sidebar-w);
      background: var(--bg-0);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      transition: width var(--transition), min-width var(--transition), transform var(--transition);
      z-index: 100;
      overflow: hidden;
    }

    #sidebar.collapsed {
      width: var(--sidebar-collapsed-w);
      min-width: var(--sidebar-collapsed-w);
    }

    #sidebar.collapsed .logo-text,
    #sidebar.collapsed .sidebar-search,
    #sidebar.collapsed .chat-group-label,
    #sidebar.collapsed .sidebar-chats,
    #sidebar.collapsed .chat-item-text,
    #sidebar.collapsed .chat-item-actions {
      display: none;
    }

    #sidebar.collapsed .sidebar-header {
      padding: 20px 0;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    #sidebar.collapsed .btn-new-chat {
      width: 40px;
      height: 40px;
      background: var(--brand);
      color: #fff;
      border-radius: var(--radius-lg);
      margin: 0 auto;
    }

    #sidebar.collapsed .chat-item {
      justify-content: center;
      padding: 12px 0;
      margin: 4px 8px;
    }

    #sidebar.collapsed .sidebar-footer-btn {
      justify-content: center;
      font-size: 0;
      gap: 0;
      padding: 10px 0;
    }

    #sidebar.collapsed .sidebar-footer-btn span {
      display: none;
    }

    #sidebar.collapsed .sidebar-footer-btn svg {
      margin: 0;
    }

    .sidebar-header {
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    .logo-mark {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--bg-2), var(--bg-0));
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }

    .logo-text {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-0);
      white-space: nowrap;
      overflow: hidden;
    }

    .btn-new-chat {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--text-0);
      background: var(--bg-2);
      border: 1px solid var(--border);
      transition: all var(--transition-fast);
      flex-shrink: 0;
    }

    .btn-new-chat:hover {
      background: var(--bg-3);
      transform: scale(1.05);
    }

    .sidebar-search {
      padding: 0 16px 16px;
    }

    .search-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      transition: all var(--transition-fast);
    }

    .search-box:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 1px var(--brand);
    }

    .search-box svg {
      color: var(--text-2);
      flex-shrink: 0;
      width: 14px;
      height: 14px;
    }

    .search-box input {
      flex: 1;
      font-size: 14px;
      color: var(--text-0);
    }

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

    .sidebar-chats {
      flex: 1;
      overflow-y: auto;
      padding: 0 12px 12px;
    }

    .chat-group-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-3);
      padding: 16px 8px 8px;
    }

    .chat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      margin-bottom: 2px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all var(--transition-fast);
      position: relative;
    }

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

    .chat-item.active {
      background: var(--bg-3);
      font-weight: 500;
    }

    .chat-item.active .chat-item-icon {
      color: var(--text-0);
    }

    .chat-item-icon {
      color: var(--text-3);
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      transition: color var(--transition-fast);
    }

    .chat-item-text {
      flex: 1;
      font-size: 14px;
      color: var(--text-1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
    }

    .chat-item.active .chat-item-text {
      color: var(--text-0);
    }

    .chat-item-actions {
      display: none;
      gap: 4px;
    }

    .chat-item:hover .chat-item-actions {
      display: flex;
    }

    .chat-item-actions button {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-xs);
      color: var(--text-2);
      transition: all var(--transition-fast);
    }

    .chat-item-actions button:hover {
      background: var(--bg-4);
      color: var(--text-0);
    }

    .chat-item-actions .delete-btn:hover {
      color: var(--red);
    }

    .sidebar-footer {
      padding: 16px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: auto;
    }

    .sidebar-footer-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      color: var(--text-2);
      font-size: 14px;
      font-weight: 500;
      transition: all var(--transition-fast);
    }

    .sidebar-footer-btn:hover {
      background: var(--bg-2);
      color: var(--text-0);
    }

    .sidebar-footer-btn svg {
      width: 16px;
      height: 16px;
    }

    /* ═══════════════════════════════════════════════════════
       MAIN AREA
    ═══════════════════════════════════════════════════════ */
    #main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      position: relative;
    }

    /* Topbar */
    #topbar {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 24px;
      background: transparent;
      z-index: 10;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      pointer-events: none;
      /* Let clicks pass through empty areas */
    }

    #topbar>* {
      pointer-events: auto;
    }

    .btn-toggle-sidebar {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--text-2);
      transition: all var(--transition-fast);
      background: transparent;
      border: 1px solid transparent;
    }

    .btn-toggle-sidebar:hover {
      background: var(--bg-2);
      color: var(--text-0);
    }

    @media (min-width: 769px) {
      .mobile-handle {
        display: none !important;
      }
    }

    .topbar-title {
      flex: 1;
      font-size: 15px;
      font-weight: 600;
      color: var(--text-1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0;
      transition: opacity var(--transition);
      /* Hidden by default, maybe show on scroll? Keep simple for now */
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .model-selector {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
      border-radius: 99px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-0);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-fast);
      position: relative;
    }

    .model-selector:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .model-selector.open {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--border-soft);
    }

    .model-dropdown {
      position: absolute;
      right: 0;
      min-width: 260px;
      max-height: 400px;
      overflow-y: auto;
      background: var(--bg-2);
      /* Solid background */
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
      z-index: 500;
      padding: 5px;
      display: none;
      animation: dropdownIn 0.2s cubic-bezier(0, 0, 0.2, 1);
    }

    .model-dropdown.drop-down {
      top: calc(100% + 8px);
      bottom: auto;
    }

    .model-dropdown.drop-up {
      bottom: calc(100% + 8px);
      top: auto;
    }

    .model-selector.open .model-dropdown {
      display: block;
    }

    @keyframes dropdownIn {
      from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .model-dropdown-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 9px;
      cursor: pointer;
      transition: all var(--transition-fast);
      font-size: 14px;
      color: var(--text-1);
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      margin-bottom: 2px;
      font-weight: 400;
    }

    .model-dropdown-item:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-0);
    }

    .model-dropdown-item.active {
      color: var(--text-0);
      font-weight: 500;
    }

    .model-dropdown-item .active-tick {
      width: 18px;
      height: 18px;
      color: #3b82f6;
      /* Claude blue */
      display: none;
    }

    .model-dropdown-item.active .active-tick {
      display: block;
    }

    .model-dropdown-item .model-item-name {
      flex: 1;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .model-dropdown-item .model-item-badge {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      background: var(--bg-3);
      color: var(--text-2);
      font-weight: 500;
      flex-shrink: 0;
      border: 1px solid var(--border-soft);
    }

    .model-dropdown-item.active .model-item-badge {
      background: rgba(59, 130, 246, 0.15);
      color: var(--brand);
      border-color: rgba(59, 130, 246, 0.2);
    }

    .input-model-selector {
      background: transparent;
      border-color: transparent;
    }

    .input-model-selector:hover,
    .input-model-selector.open {
      background: rgba(255, 255, 255, 0.05);
    }

    .model-dropdown-divider {
      height: 1px;
      margin: 6px 0;
      background: var(--border-soft);
    }

    .model-dropdown-more {
      width: 100%;
      text-align: left;
      padding: 12px 14px;
      border-radius: 9px;
      background: transparent;
      color: var(--text-2);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all var(--transition-fast);
      border: none;
      margin-top: 4px;
    }

    .model-dropdown-more:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-0);
    }

    .model-dropdown-more-title {
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    .model-dropdown-more-sub {
      font-size: 11px;
      color: var(--text-3);
    }

    .topbar-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--text-2);
      transition: all var(--transition-fast);
      background: var(--bg-1);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    .topbar-btn:hover {
      background: var(--bg-2);
      color: var(--text-0);
    }

    /* ═══════════════════════════════════════════════════════
       CHAT AREA
    ═══════════════════════════════════════════════════════ */
    #chat-scroll {
      flex: 1;
      overflow-y: auto;
      scroll-behavior: smooth;
      padding-top: 70px;
      display: flex;
      flex-direction: column;
    }

    #chat-messages {
      flex: 1;
      max-width: 840px;
      width: 100%;
      margin: 0 auto;
      padding: 20px 24px 40px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* EMPTY STATE */
    #empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      padding: 40px 24px 0;
      /* Reduced bottom padding */
      text-align: center;
      animation: fadeIn 0.5s ease;
      pointer-events: none;
    }

    .empty-logo {
      width: 72px;
      height: 72px;
      background: linear-gradient(135deg, var(--bg-2), var(--bg-0));
      border: 1px solid var(--border);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      box-shadow: var(--shadow-lg);
    }

    .empty-title {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text-0);
      margin-bottom: 12px;
    }

    .empty-sub {
      font-size: 16px;
      color: var(--text-2);
      max-width: 480px;
      line-height: 1.6;
      margin-bottom: 24px;
      /* Reduced distance to input box */
    }

    /* MESSAGES */
    .message-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      animation: msgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes msgIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .message {
      display: flex;
      gap: 16px;
      position: relative;
      width: 100%;
    }

    .message.user {
      flex-direction: row-reverse;
    }

    .msg-avatar {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-xs);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      margin-top: 4px;
    }

    .msg-avatar.ai {
      background: linear-gradient(135deg, var(--bg-2), var(--bg-0));
      border: 1px solid var(--border);
      color: var(--text-0);
    }

    .msg-avatar.user-av {
      background: var(--bg-3);
      color: var(--text-0);
    }

    .message-content-wrap {
      flex: 0 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

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

    .message-meta {
      display: none;
    }

    /* Hide meta for cleaner look */

    .message-bubble {
      position: relative;
      max-width: 100%;
    }

    .message.user .message-bubble {
      max-width: min(85%, 600px);
    }

    /* User Message Style */
    .message.user .message-bubble>.bubble-inner {
      background: var(--user-msg-bg);
      border: 1px solid var(--border);
      border-radius: 20px 20px 4px 20px;
      padding: 12px 18px;
      font-size: 16px;
      color: var(--text-0);
      line-height: 1.6;
      word-break: break-word;
      white-space: pre-wrap;
    }

    /* AI Message Style */
    .message.ai .message-bubble>.bubble-inner {
      font-size: 16px;
      color: var(--text-0);
      line-height: 1.7;
      word-break: break-word;
      width: fit-content;
      max-width: 100%;
    }

    /* THINKING BLOCK */
    .thinking-block {
      background: var(--thinking-bg);
      border-left: 3px solid var(--brand);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      margin-bottom: 16px;
      overflow: hidden;
      transition: all var(--transition);
    }

    .thinking-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      cursor: pointer;
      user-select: none;
      transition: background var(--transition-fast);
    }

    .thinking-header:hover {
      background: rgba(59, 130, 246, 0.08);
    }

    .thinking-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
      flex-shrink: 0;
    }

    .thinking-dot.pulsing {
      animation: pulse 1s infinite;
      box-shadow: 0 0 8px var(--brand);
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(0.8);
      }
    }

    .thinking-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--brand);
      flex: 1;
    }

    .thinking-chevron {
      color: var(--text-2);
      transition: transform var(--transition);
      width: 14px;
      height: 14px;
    }

    .thinking-block.open .thinking-chevron {
      transform: rotate(180deg);
    }

    .thinking-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .thinking-block.open .thinking-body {
      max-height: 800px;
    }

    .thinking-content {
      padding: 0 14px 14px;
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.6;
      font-family: var(--font-mono);
      white-space: pre-wrap;
      overflow-y: auto;
      max-height: 600px;
    }

    /* MARKDOWN STYLES */
    .md-content h1,
    .md-content h2,
    .md-content h3,
    .md-content h4 {
      font-weight: 600;
      margin: 24px 0 12px;
      color: var(--text-0);
      line-height: 1.4;
    }

    .md-content h1 {
      font-size: 24px;
    }

    .md-content h2 {
      font-size: 20px;
    }

    .md-content h3 {
      font-size: 18px;
    }

    .md-content p {
      margin: 12px 0;
    }

    .md-content ul,
    .md-content ol {
      padding-left: 24px;
      margin: 12px 0;
    }

    .md-content li {
      margin: 6px 0;
    }

    .md-content a {
      color: var(--brand);
      font-weight: 500;
    }

    .md-content blockquote {
      border-left: 4px solid var(--border-focus);
      padding: 8px 16px;
      margin: 16px 0;
      color: var(--text-1);
      background: var(--bg-0);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      font-style: italic;
    }

    .md-content code {
      font-family: var(--font-mono);
      font-size: 14px;
      background: var(--bg-2);
      padding: 3px 6px;
      border-radius: var(--radius-xs);
      color: var(--text-0);
      border: 1px solid var(--border);
    }

    /* Code Blocks */
    .code-block-wrapper {
      margin: 20px 0;
      background: #0d0d0f;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .code-block-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      background: #141416;
      border-bottom: 1px solid var(--border);
    }

    .code-lang {
      font-family: var(--font-mono);
      font-size: 13px;
      color: #a1a1aa;
      font-weight: 500;
    }

    .copy-btn {
      font-size: 12px;
      color: #a1a1aa;
      padding: 4px 10px;
      border-radius: var(--radius-xs);
      background: rgba(255, 255, 255, 0.05);
      transition: all 0.2s;
      cursor: pointer;
      border: none;
    }

    .copy-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .md-content pre {
      margin: 0;
      padding: 0;
      background: #0d0d0f;
    }

    .md-content pre code {
      display: block;
      padding: 16px;
      overflow-x: auto;
      font-size: 14px;
      background: transparent !important;
      color: #e4e4e7;
      border: none;
      line-height: 1.5;
      font-family: var(--font-mono);
    }

    .md-content table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      margin: 16px 0;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .md-content th,
    .md-content td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      text-align: left;
    }

    .md-content th {
      background: var(--bg-0);
      font-weight: 600;
      color: var(--text-0);
    }

    .md-content th:last-child,
    .md-content td:last-child {
      border-right: none;
    }

    .md-content tr:last-child td {
      border-bottom: none;
    }

    /* Message Actions */
    .message-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      opacity: 0;
      transition: opacity var(--transition-fast);
      margin-top: 8px;
    }

    .message:hover .message-actions {
      opacity: 1;
    }

    .message.user .message-actions {
      flex-direction: row-reverse;
    }

    .msg-action-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: var(--radius-xs);
      color: var(--text-2);
      font-size: 12px;
      transition: all var(--transition-fast);
    }

    .msg-action-btn:hover {
      background: var(--bg-2);
      color: var(--text-0);
    }

    .msg-action-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Version Nav */
    .version-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 2px 4px;
      background: var(--bg-0);
      border-radius: var(--radius-xs);
      font-size: 12px;
      color: var(--text-1);
      border: 1px solid var(--border);
    }

    .version-nav button {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--transition-fast);
    }

    .version-nav button:hover:not(:disabled) {
      background: var(--bg-2);
      color: var(--text-0);
    }

    .version-nav button:disabled {
      opacity: 0.3;
    }

    /* Edit user message */
    .message-edit-area {
      width: 100%;
      background: var(--bg-0);
      border: 1px solid var(--border-focus);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font-size: 16px;
      color: var(--text-0);
      resize: vertical;
      min-height: 100px;
      font-family: inherit;
      margin-bottom: 8px;
    }

    .edit-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .btn-edit-save {
      padding: 8px 16px;
      background: var(--text-0);
      color: var(--bg-1);
      border-radius: var(--radius-xs);
      font-size: 14px;
      font-weight: 500;
      transition: background var(--transition-fast);
    }

    .btn-edit-save:hover {
      opacity: 0.9;
    }

    .btn-edit-cancel {
      padding: 8px 16px;
      background: var(--bg-2);
      color: var(--text-1);
      border-radius: var(--radius-xs);
      font-size: 14px;
      transition: background var(--transition-fast);
    }

    .btn-edit-cancel:hover {
      background: var(--bg-3);
    }

    .stream-cursor::after {
      content: '▋';
      animation: blink 1s infinite;
      color: var(--text-0);
      margin-left: 2px;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }

    /* REGENERATE */
    .regen-row {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0;
    }

    .btn-regen {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: var(--bg-0);
      border: 1px solid var(--border);
      border-radius: 99px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-1);
      transition: all var(--transition-fast);
      box-shadow: var(--shadow-sm);
    }

    .btn-regen:hover {
      background: var(--bg-2);
      color: var(--text-0);
      border-color: var(--text-3);
    }

    .btn-regen svg {
      transition: transform 0.5s ease;
    }

    .btn-regen:hover svg {
      transform: rotate(180deg);
    }

    /* ═══════════════════════════════════════════════════════
       INPUT AREA & ATTACHMENTS
    ═══════════════════════════════════════════════════════ */

    /* Inline images in user messages */
    .msg-inline-image {
      max-width: 100%;
      max-height: 300px;
      object-fit: contain;
      border-radius: var(--radius-sm);
      margin: 8px 0;
      display: block;
      cursor: pointer;
      transition: opacity var(--transition-fast);
    }

    .msg-inline-image:hover {
      opacity: 0.85;
    }

    /* Document attachment badges in messages */
    .msg-attachment-badges {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 2px;
      width: fit-content;
      max-width: 100%;
    }

    /* Attachment card in chat bubble (matches input area preview style) */
    .msg-attach-card {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-3);
      border-radius: var(--radius);
      padding: 10px 14px;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .msg-attach-card.image {
      padding: 0;
      background: none;
      max-width: 100%;
    }

    .msg-attach-card-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: #3b82f6;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
    }

    .msg-attach-card-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .msg-attach-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-0);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }

    .msg-attach-card-type {
      font-size: 11px;
      color: var(--text-2);
      line-height: 1.3;
    }

    .msg-file-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      background: var(--bg-3);
      border-radius: 99px;
      font-size: 12px;
      color: var(--text-2);
      max-width: 220px;
      overflow: hidden;
    }

    .msg-file-badge svg {
      flex-shrink: 0;
    }

    .msg-file-badge-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #input-area {
      padding: 0 24px calc(24px + env(safe-area-inset-bottom, 0px));
      background: linear-gradient(to top, var(--bg-1) 80%, transparent);
      position: relative;
      z-index: 20;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #main:not(.chat-active) #input-area {
      margin-bottom: calc(40vh - 5px);
      /* Pulled slightly higher up the screen */
      background: transparent;
    }

    #input-wrap {
      max-width: 840px;
      margin: 0 auto;
      position: relative;
    }

    .input-box {
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: 24px;
      transition: all var(--transition-fast);
      overflow: visible;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-sm);
    }

    .input-box:focus-within {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 1px var(--border-focus), var(--shadow);
      background: var(--bg-0);
    }

    /* Attachments Container */
    #attachments-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding: 16px 20px 0;
      empty-cells: hide;
    }

    #attachments-container:empty {
      display: none;
    }

    .attachment-item {
      position: relative;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      padding-right: 36px;
      min-width: 200px;
      max-width: 320px;
    }

    .attachment-item.image-attachment {
      padding: 0;
      border: none;
      background: transparent;
      width: 68px;
      height: 68px;
      min-width: 0;
      border-radius: var(--radius);
    }

    .attachment-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

    .attachment-icon {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
    }

    .attachment-icon.zip {
      background: #a855f7;
    }

    .attachment-icon.document {
      background: #3b82f6;
    }

    .attachment-icon.default {
      background: #64748b;
    }

    .attachment-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .attachment-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-0);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }

    .attachment-type {
      font-size: 11px;
      color: var(--text-2);
    }

    .attachment-remove {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #000;
      border: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      z-index: 2;
    }

    .attachment-item.image-attachment .attachment-remove {
      top: 4px;
      right: 4px;
      width: 18px;
      height: 18px;
    }

    .attachment-remove svg {
      width: 12px;
      height: 12px;
      stroke-width: 3px;
    }

    #prompt-input {
      width: 100%;
      padding: 16px 20px 0;
      font-size: 16px;
      color: var(--text-0);
      background: transparent;
      resize: none;
      min-height: 60px;
      max-height: 300px;
      line-height: 1.6;
      overflow-y: auto;
    }

    #prompt-input::placeholder {
      color: var(--text-3);
    }

    .input-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px 16px;
    }

    .input-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .input-tool-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--text-2);
      transition: all var(--transition-fast);
      background: var(--bg-3);
      border: 1px solid transparent;
    }

    .input-tool-btn:hover {
      background: var(--bg-4);
      color: var(--text-0);
    }

    .input-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .char-count {
      font-size: 12px;
      color: var(--text-3);
      font-family: var(--font-mono);
    }

    .btn-send {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--text-0);
      border-radius: 50%;
      color: var(--bg-1);
      transition: all var(--transition-fast);
      flex-shrink: 0;
      cursor: pointer;
      border: none;
    }

    .btn-send:hover:not(:disabled) {
      transform: scale(1.05);
    }

    .btn-send:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .btn-send.stop {
      background: var(--red);
      color: white;
      border-radius: var(--radius-sm);
    }

    .input-footer {
      text-align: center;
      margin-top: 12px;
      font-size: 12px;
      color: var(--text-3);
      font-weight: 500;
    }

    /* ═══════════════════════════════════════════════════════
       MODALS & SETTINGS
    ═══════════════════════════════════════════════════════ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.2s ease;
    }

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

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .modal {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px;
      max-width: 500px;
      width: 90%;
      box-shadow: var(--shadow-lg);
      animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes slideUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .modal-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text-0);
    }

    .modal-sub {
      font-size: 14px;
      color: var(--text-2);
      margin-bottom: 24px;
      line-height: 1.6;
    }

    .modal-field {
      margin-bottom: 16px;
    }

    .modal-label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-1);
      margin-bottom: 8px;
    }

    .modal-input,
    .setting-textarea {
      width: 100%;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font-size: 14px;
      color: var(--text-0);
      transition: border-color var(--transition-fast);
      font-family: inherit;
    }

    .modal-input:focus,
    .setting-textarea:focus {
      border-color: var(--border-focus);
      outline: none;
      box-shadow: 0 0 0 1px var(--border-focus);
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 24px;
    }

    .btn-modal-primary {
      padding: 10px 20px;
      background: var(--text-0);
      color: var(--bg-1);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 600;
      transition: all var(--transition-fast);
    }

    .btn-modal-primary:hover {
      opacity: 0.9;
    }

    .btn-modal-secondary {
      padding: 10px 20px;
      background: var(--bg-2);
      color: var(--text-1);
      border-radius: var(--radius-sm);
      font-size: 14px;
      transition: all var(--transition-fast);
      font-weight: 500;
    }

    .btn-modal-secondary:hover {
      background: var(--bg-3);
    }

    /* Model list modal */
    .model-modal {
      max-width: 560px;
      width: min(560px, 96vw);
    }

    .model-modal-list {
      margin-top: 12px;
      max-height: 360px;
      overflow-y: auto;
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .model-modal-item {
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      background: var(--bg-2);
      border: 1px solid var(--border-soft);
      color: var(--text-1);
      font-size: 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: all var(--transition-fast);
    }

    .model-modal-item:hover {
      background: var(--bg-3);
      color: var(--text-0);
      border-color: var(--border-focus);
    }

    .model-modal-item.active {
      border-color: var(--brand);
      box-shadow: var(--shadow-glow);
    }

    .model-modal-item-main {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .model-modal-item-name {
      flex: 1;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .model-modal-item-desc {
      font-size: 12px;
      color: var(--text-3);
      line-height: 1.4;
    }

    .model-modal-pagination {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
      color: var(--text-2);
    }

    .model-modal-page-label {
      flex: 1;
      text-align: center;
    }

    @media (max-width: 768px) {
      .model-modal {
        width: 96vw;
        max-width: 96vw;
        padding: 20px 16px 16px;
      }

      .model-modal-list {
        max-height: 320px;
      }
    }

    /* Settings Panel */
    #settings-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 440px;
      max-width: 100vw;
      background: var(--bg-0);
      border-left: 1px solid var(--border);
      box-shadow: -20px 0 50px rgba(0,0,0,0.5);
      z-index: 500;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #settings-panel.open {
      transform: translateX(0);
    }

    .settings-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 28px;
      border-bottom: 1px solid var(--border-soft);
      background: var(--bg-0);
      z-index: 2;
    }

    .settings-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-0);
    }

    .settings-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--text-2);
      background: transparent;
      transition: all var(--transition-fast);
      border: 1px solid transparent;
    }

    .settings-close:hover {
      background: var(--bg-2);
      color: var(--text-0);
      border-color: var(--border);
    }

    .settings-body {
      flex: 1;
      overflow-y: auto;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

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

    .settings-section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-3);
      margin-left: 4px;
    }

    .settings-card {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
    }

    .setting-row {
      display: flex;
      flex-direction: column;
    }

    .setting-desc {
      font-size: 13px;
      color: var(--text-2);
      line-height: 1.5;
    }

    .preset-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .preset-btn {
      padding: 6px 14px;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: 99px;
      font-size: 13px;
      color: var(--text-1);
      transition: all var(--transition-fast);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .preset-btn:hover {
      background: var(--bg-3);
      color: var(--text-0);
      border-color: var(--border-focus);
    }

    .preset-btn.active {
      background: var(--brand);
      color: #fff;
      font-weight: 500;
      border-color: var(--brand);
      box-shadow: 0 0 12px var(--brand-glow);
    }

    .preset-delete {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: inherit;
      opacity: 0.6;
      margin-left: 2px;
      transition: color var(--transition-fast);
    }

    .preset-delete:hover {
      opacity: 1;
      color: var(--red);
    }

    .setting-textarea {
      width: 100%;
      min-height: 120px;
      background: var(--bg-0);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      font-size: 14px;
      color: var(--text-0);
      resize: vertical;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .setting-textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-glow);
    }

    .save-preset-row {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .save-preset-input {
      flex: 1;
      background: var(--bg-0);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text-0);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .save-preset-input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-glow);
    }

    .save-preset-btn {
      padding: 10px 18px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-0);
      transition: all var(--transition-fast);
    }

    .save-preset-btn:hover {
      background: var(--bg-4);
      border-color: var(--border-focus);
    }

    /* Action Buttons in settings */
    .settings-action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      background: var(--bg-0);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-1);
      transition: all var(--transition-fast);
      cursor: pointer;
    }

    .settings-action-btn:hover {
      background: var(--bg-2);
      color: var(--text-0);
      border-color: var(--border-focus);
    }

    .settings-action-btn.danger {
      color: var(--red);
      background: rgba(239, 68, 68, 0.05);
      border-color: rgba(239, 68, 68, 0.2);
    }

    .settings-action-btn.danger:hover {
      background: var(--red);
      color: white;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    }

    /* TOAST */
    #toast-container {
      position: fixed;
      bottom: 32px;
      right: 32px;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      pointer-events: none;
    }

    .toast {
      background: rgba(24, 24, 27, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 50px;
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 500;
      color: #fafafa;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
      animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 420px;
      letter-spacing: 0.01em;
    }

    [data-theme="light"] .toast {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.06);
      color: #18181b;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    .toast.success {
      border-color: rgba(16, 185, 129, 0.3);
    }

    .toast.error {
      border-color: rgba(239, 68, 68, 0.3);
    }

    @keyframes toastIn {
      from {
        transform: translateY(-16px) scale(0.95);
        opacity: 0;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    @keyframes toastOut {
      to {
        transform: translateY(-12px) scale(0.95);
        opacity: 0;
      }
    }

    /* RENAME INPUT */
    .chat-item-rename {
      flex: 1;
      background: transparent;
      border: none;
      border-bottom: 2px solid var(--brand);
      font-size: 14px;
      color: var(--text-0);
      outline: none;
      padding: 2px;
    }

    /* UTILS */
    .hidden {
      display: none !important;
    }

    .spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--text-0);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .model-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .model-status-dot.ready {
      background: var(--green);
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
    }

    .model-status-dot.loading {
      background: #f59e0b;
      animation: pulse 1s infinite;
    }

    .model-status-dot.idle {
      background: var(--text-3);
    }

    /* ═══════════════════════════════════════════════════════
       MOBILE RESPONSIVE (≤768px)
    ═══════════════════════════════════════════════════════ */

    /* Sidebar backdrop overlay */
    .sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
      z-index: 199;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .sidebar-backdrop.visible {
      display: block;
      opacity: 1;
    }

    @media (max-width: 768px) {

      /* Prevent horizontal overflow from off-screen panels */
      html,
      body,
      #app {
        overflow-x: hidden;
      }

      /* ── SIDEBAR (drawer overlay) ── */
      #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        width: 85vw;
        max-width: 320px;
        min-width: 0;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #sidebar.collapsed {
        width: 85vw;
        max-width: 320px;
        min-width: 0;
      }

      /* Show all sidebar content on mobile even when 'collapsed' */
      #sidebar.collapsed .logo-text,
      #sidebar.collapsed .sidebar-search,
      #sidebar.collapsed .chat-group-label,
      #sidebar.collapsed .sidebar-chats,
      #sidebar.collapsed .chat-item-text,
      #sidebar.collapsed .chat-item-actions {
        display: revert;
      }

      #sidebar.collapsed .sidebar-header {
        padding: 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      #sidebar.collapsed .btn-new-chat {
        width: 36px;
        height: 36px;
        margin: 0;
        background: var(--bg-2);
        border-radius: var(--radius-sm);
      }

      #sidebar.collapsed .chat-item {
        justify-content: flex-start;
        padding: 10px 12px;
        margin: 0 0 2px 0;
      }

      #sidebar.collapsed .sidebar-footer-btn {
        justify-content: flex-start;
        font-size: 14px;
        gap: 12px;
        padding: 10px 12px;
      }

      #sidebar.collapsed .sidebar-footer-btn span {
        display: inline;
      }

      #sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 40px rgba(0, 0, 0, 0.4);
      }

      /* Hide desktop toggle inside sidebar on mobile */
      .desktop-handle {
        display: none !important;
      }

      /* Show chat item actions always on touch, horizontal and larger */
      .chat-item .chat-item-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px;
        flex-shrink: 0;
      }

      .chat-item-actions button {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
      }

      .chat-item-actions button svg {
        width: 16px !important;
        height: 16px !important;
      }

      .chat-item-actions .delete-btn {
        color: var(--red);
      }

      /* ── TOPBAR ── */
      #topbar {
        padding: 10px 12px;
        gap: 8px;
      }

      .topbar-actions {
        gap: 6px;
      }

      .model-selector {
        padding: 6px 10px;
        font-size: 12px;
        gap: 6px;
        max-width: 160px;
      }

      .model-dropdown {
        width: 280px;
        /* Increased for better readability */
        max-width: calc(100vw - 32px);
        min-width: unset;
        right: -8px;
      }

      .model-dropdown-item {
        overflow: hidden;
      }

      #model-name-display {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
        display: inline-block;
      }

      .topbar-btn {
        width: 32px;
        height: 32px;
      }

      /* ── CHAT AREA ── */
      #chat-scroll {
        padding-top: 56px;
      }

      #chat-messages {
        padding: 12px 12px 24px;
        gap: 16px;
      }

      /* Hide avatars on mobile */
      .msg-avatar {
        display: none;
      }

      .message {
        gap: 0;
      }

      /* User bubble full width */
      .message.user .message-bubble>.bubble-inner {
        max-width: 100%;
        border-radius: 16px;
        padding: 10px 14px;
        font-size: 15px;
      }

      /* AI message text */
      .message.ai .message-bubble>.bubble-inner {
        font-size: 15px;
        line-height: 1.65;
        padding-left: 4px;
      }

      /* Show message actions on mobile (no hover on touch) */
      .message-actions {
        opacity: 1;
      }

      .msg-action-btn {
        padding: 6px 8px;
      }

      .msg-action-btn span {
        display: none;
      }

      /* Markdown content scaling */
      .md-content h1 {
        font-size: 20px;
      }

      .md-content h2 {
        font-size: 18px;
      }

      .md-content h3 {
        font-size: 16px;
      }

      .md-content pre code {
        font-size: 13px;
      }

      .md-content table {
        font-size: 13px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .md-content th,
      .md-content td {
        padding: 8px 10px;
      }

      /* Code blocks touch scroll */
      .code-block-wrapper {
        margin: 12px 0;
      }

      .code-block-header {
        padding: 8px 12px;
      }

      /* Thinking block */
      .thinking-block.open .thinking-body {
        max-height: 400px;
      }

      .thinking-content {
        max-height: 350px;
        font-size: 13px;
      }

      /* ── INPUT AREA ── */
      #input-area {
        padding: 0 8px calc(12px + env(safe-area-inset-bottom, 0px));
      }

      #main:not(.chat-active) #input-area {
        margin-bottom: 0;
      }

      .input-box {
        border-radius: 18px;
      }

      #prompt-input {
        padding: 12px 14px 0;
        font-size: 15px;
        min-height: 48px;
      }

      .input-toolbar {
        padding: 8px 12px 12px;
      }

      .input-footer {
        font-size: 11px;
        margin-top: 8px;
      }

      /* Attachments */
      #attachments-container {
        padding: 12px 12px 0;
        gap: 8px;
      }

      .attachment-item {
        min-width: 160px;
        max-width: 240px;
        padding: 6px 10px;
        padding-right: 14px;
      }

      .attachment-remove {
        width: 28px;
        height: 28px;
      }

      .attachment-item.image-attachment .attachment-remove {
        width: 26px;
        height: 26px;
      }

      /* Message inline images scale down on mobile */
      .msg-inline-image {
        max-width: 100%;
        max-height: 240px;
      }

      .msg-attachment-badges {
        gap: 4px;
      }

      .msg-file-badge {
        padding: 4px 10px;
        font-size: 11px;
        max-width: 180px;
      }

      .msg-attach-card {
        padding: 8px 10px;
        gap: 8px;
        max-width: 220px;
      }

      .msg-attach-card-icon {
        width: 32px;
        height: 32px;
      }

      .msg-attach-card-name {
        font-size: 12px;
      }

      .msg-attach-card-type {
        font-size: 10px;
      }

      /* ── EMPTY STATE (centered vertically) ── */
      #empty-state {
        padding: 24px 16px 0;
        margin-top: 0;
        margin-bottom: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        width: 100%;
      }

      .empty-logo {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        margin-bottom: 16px;
      }

      .empty-logo svg {
        width: 28px;
        height: 28px;
      }

      .empty-title {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .empty-sub {
        font-size: 14px;
        margin-bottom: 16px;
      }

      /* ── SETTINGS PANEL (fullscreen on mobile) ── */
      #settings-panel {
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-radius: 0;
      }

      .settings-header {
        padding: 16px;
      }

      .settings-body {
        padding: 16px;
        gap: 24px;
      }

      .setting-textarea {
        min-height: 100px;
      }

      .preset-grid {
        gap: 6px;
      }

      .preset-btn {
        padding: 5px 12px;
        font-size: 12px;
      }

      .save-preset-row {
        flex-direction: column;
      }

      .save-preset-btn {
        align-self: flex-end;
      }

      /* ── MODALS ── */
      .modal {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        padding: 20px;
        margin: 12px;
        max-height: 90vh;
        overflow-y: auto;
      }

      .modal-title {
        font-size: 18px;
      }

      .modal-sub {
        font-size: 13px;
      }

      .modal-actions {
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 20px;
      }

      .btn-modal-primary,
      .btn-modal-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
      }

      /* ── TOASTS (top center on mobile) ── */
      #toast-container {
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: calc(100% - 32px);
        max-width: 340px;
      }

      .toast {
        max-width: 100%;
        font-size: 12px;
        padding: 8px 16px;
        white-space: normal;
      }

      /* ── VERSION NAV ── */
      .version-nav {
        font-size: 11px;
      }

      /* ── EDIT AREA ── */
      .message-edit-area {
        font-size: 15px;
        padding: 10px 12px;
        min-height: 80px;
      }

      .edit-actions {
        flex-direction: column-reverse;
        gap: 6px;
      }

      .btn-edit-save,
      .btn-edit-cancel {
        width: 100%;
        text-align: center;
      }

      /* ── REGENERATE BUTTON ── */
      .btn-regen {
        font-size: 12px;
        padding: 6px 14px;
      }

      /* ── STARTER GRID ── */
      .starter-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Extra small devices (≤480px) */
    @media (max-width: 480px) {
      .topbar-brand {
        display: none !important;
      }

      .model-selector {
        max-width: 130px;
      }

      .model-dropdown {
        width: 280px;
        /* Consistently larger on all mobile devices */
        max-width: calc(100vw - 20px);
      }

      #model-name-display {
        max-width: 70px;
      }

      #chat-messages {
        padding: 8px 8px 20px;
      }

      #input-area {
        padding: 0 6px calc(8px + env(safe-area-inset-bottom, 0px));
      }

      .empty-title {
        font-size: 20px;
      }

      .empty-sub {
        font-size: 13px;
      }

      /* Hide export button on tiny screens */
      .topbar-btn[title="Export Chat"] {
        display: none;
      }

      .msg-inline-image {
        max-height: 200px;
      }

      .msg-file-badge {
        max-width: 150px;
      }
    }

    /* Drag and Drop Overlay */
    body.drag-over #app::after,
    #app.drag-over::after {
      content: "Drop files here";
      position: absolute;
      inset: 0;
      background: rgba(59, 130, 246, 0.1);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 600;
      color: var(--brand);
      border: 4px dashed var(--brand);
      border-radius: var(--radius-lg);
      margin: 16px;
      pointer-events: none;
    }

    /* ═══════════════════════════════════════════════════════
       TOGGLE SWITCH
    ═══════════════════════════════════════════════════════ */
    .switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }
    
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--bg-4);
      transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      border-radius: 24px;
      border: 1px solid transparent;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 2px;
      bottom: 2px;
      background-color: var(--text-0);
      transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      border-radius: 50%;
      box-shadow: var(--shadow-sm);
    }
    
    .switch input:checked + .slider {
      background-color: var(--brand);
      border-color: var(--brand);
    }
    
    .switch input:focus + .slider {
      box-shadow: 0 0 0 2px var(--brand-glow);
    }
    
    .switch input:checked + .slider:before {
      transform: translateX(20px);
    }

    /* ═══════════════════════════════════════════════════════
       GLOBAL DANGER CONFIRM BUTTON
    ═══════════════════════════════════════════════════════ */
    .btn-confirm-danger {
      padding: 10px 20px;
      background: var(--red);
      color: white;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity var(--transition-fast);
      border: none;
    }

    .btn-confirm-danger:hover {
      opacity: 0.9;
    }