/* =============================================
   wazer.ai — chat.css
   Chat-page shell only. Loaded by chat.html together with:
     • main.css             (design tokens + globals)
     • chat-sidebar.css     (left rail)
     • chat-canvas.css      (chat experience + composer + empty state)
     • chat-attachments.css (attachment strip + lightbox)

   This file owns: app grid, topbar, credits pill,
   avatar, user menu, incognito-mode treatment.
   Design tokens inherited from main.css :root.
   ============================================= */

  /* Design tokens are defined in main.css :root and inherited here.
     Do not redeclare tokens in this file. */

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink);
    background:
      linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }

  .app {
    height: 100vh;   /* fallback for browsers without dvh */
    height: 100dvh;  /* dynamic viewport: no jump / cut-off composer as the
                        mobile URL bar shows and hides (100vh is the largest
                        viewport, so the bottom sat below the fold). */
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar canvas";
    transition: grid-template-columns 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* JS bumps this when the split divider is dragged. 50% gives both
       chat and document equal real-estate by default; the user can
       always drag the divider to 25%–70% if they want. */
    --split-pane-width: 50%;
  }
  .app.sidebar-collapsed {
    grid-template-columns: 0 1fr;
  }
  /* Split mode: insert a document pane on the RIGHT and a draggable
     divider between the chat and the doc. Chat keeps its natural
     position (left next to the sidebar) so reading flow stays
     consistent — eyes left for the conversation, right for the doc.
     Pane + divider sit absolutely-positioned inside the canvas grid
     area; canvas shrinks via margin-right. */
  .app.split-open .canvas {
    margin-right: calc(var(--split-pane-width) + 6px);
    transition: margin-right 0.18s ease;
  }
  .app.split-open .split-pane {
    display: flex;
    flex-direction: column;
    grid-area: canvas;
    position: relative;
    margin-left: auto;            /* push to the right edge of the grid area */
    width: var(--split-pane-width);
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow: hidden;
    z-index: 5;
  }
  .app.split-open .split-divider {
    display: block;
    grid-area: canvas;
    position: absolute;
    right: var(--split-pane-width);
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    z-index: 6;
  }
  .app.split-open .split-divider::before {
    content: '';
    position: absolute;
    inset: 0 2px;
    background: var(--border);
    transition: background 0.15s ease;
  }
  .app.split-open .split-divider:hover::before,
  .app.split-open .split-divider.is-dragging::before {
    background: var(--accent);
  }
  /* Pane chrome */
  .split-pane-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Right padding leaves room for the floating Notes / Saved-files /
       Private-mode toggles that sit position:fixed on the topbar.
       Without this, the Stäng button rendered behind them and the
       user had to hunt for it. */
    padding: 14px 144px 14px 18px;
    border-bottom: 1px solid var(--border);
  }
  .split-pane-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 12px;
  }
  .split-pane-close {
    flex-shrink: 0;
    /* Prominent "Stäng" pill so the close affordance is unambiguous
       even when the floating topbar buttons (Saved files / Notes
       toggles) sit nearby — those were hiding the icon-only ×. */
    height: 30px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .split-pane-close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
  }
  /* Undo / Maximise share the close button's shape; only the icon
     differs. Same hover treatment. */
  .split-pane-action {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .split-pane-action:hover { background: var(--bg-2); color: var(--ink); }
  .split-pane-body {
    flex: 1 1 auto;
    overflow: auto;
    background: var(--bg-1);
  }
  .split-pane.hidden,
  .split-divider.hidden { display: none !important; }

  /* Mobile fallback: split mode forces back to modal preview because
     a 38% pane on a 360px viewport leaves no chat room. The class is
     toggled by media-query, not by JS, so the user can resize their
     browser and split-mode reactivates without a state flip. */
  @media (max-width: 900px) {
    .app.split-open .canvas { margin-right: 0; }
    .app.split-open .split-pane,
    .app.split-open .split-divider { display: none; }
  }

  /* Preview overlays (PDF / text / rich): "Open beside chat" button
     sits to the left of the × close button. Hidden on narrow
     viewports where split-mode collapses to modal anyway. */
  .preview-split-btn {
    position: fixed;
    top: 20px;
    right: 64px;
    z-index: 10000;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.15s ease;
  }
  .preview-split-btn:hover {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
  }
  @media (max-width: 900px) {
    .preview-split-btn { display: none; }
  }

  /* INCOGNITO MODE — adds a subtle dark border around app to signal privacy */
  .app.incognito {
    box-shadow: inset 0 0 0 2px rgba(30, 58, 95, 0.20);
  }

  /* ─── topbar ─── */
  .topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: transparent;
    /* Above the floating buttons (z-index:20) so tooltips on credits-pill
       et al. can drop down without being hidden behind them. */
    z-index: 25;
  }
  /* When the sidebar is collapsed, the floating hamburger sits at fixed
     left: 14px. Push the topbar's left content past it so "New chat" and
     other breadcrumbs don't slide under the button. */
  .app.sidebar-collapsed .topbar {
    padding-left: 60px;
  }

  .topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sidebar-mini-toggle {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    display: none;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .app.sidebar-collapsed .sidebar-mini-toggle {
    display: grid;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--ink-soft);
    padding-left: 4px;
  }
  .breadcrumb .crumb { color: var(--ink-soft); cursor: pointer; transition: color 0.15s ease; }
  .breadcrumb .crumb:hover { color: var(--ink); }
  .breadcrumb .crumb.current {
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .breadcrumb .sep { color: var(--ink-ghost); }

  /* Keep a long title/number from sliding under the credits pill: let the left
     side shrink (flex items need min-width:0 to go below their content width),
     truncate the title with an ellipsis, and pin the credits/avatar so they
     never get pushed or overlapped. */
  .topbar-left { min-width: 0; overflow: hidden; flex: 1 1 auto; }
  .topbar-right { flex-shrink: 0; }
  .breadcrumb { min-width: 0; overflow: hidden; flex-wrap: nowrap; }
  /* Crumbs (e.g. a project name) truncate on one line instead of wrapping to
     two and cramping the topbar on narrow phones. */
  .breadcrumb .crumb {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #chat-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Incognito badge in breadcrumb */
  .incognito-badge {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    margin-left: 8px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
  }
  .app.incognito .incognito-badge { display: inline-flex; }

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

  .topbar-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
  }
  .topbar-action:hover {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink);
  }
  .topbar-action.active {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
  }
  .topbar-action .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 2px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
  }

  .credits-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: var(--shadow-xs);
    view-transition-name: wazer-credits;
  }
  .credits-pill::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }
  .credits-pill .num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: -0.01em;
  }
  .credits-pill .label {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 400;
  }
  .credits-pill:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
  }

  /* AVATAR — matches main.css .user-menu-trigger exactly so the same
     persistent component reads identically on marketing and chat. */
  .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--surface);
    display: grid;
    place-items: center;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    overflow: hidden;
    position: relative;
    view-transition-name: wazer-avatar;
  }
  .avatar:hover {
    transform: scale(1.05);
    background: var(--accent-deep);
  }
  .avatar .initial-fallback {
    display: block;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    color: var(--surface);
    line-height: 1;
  }
  /* Legacy .no-image variant kept as no-op alias for backward compat */
  .avatar.no-image { background: var(--accent); }
  .avatar.no-image .initial-fallback { display: block; }
  /* Image-mode avatar (background-image set, .no-image removed): hide the
     initial / "·" placeholder so it doesn't render on top of the photo —
     the "dot in the middle of the avatar" bug. */
  .avatar:not(.no-image) .initial-fallback { display: none; }


  /* ─── topbar credits — pill behaves as link ─── */
  .credits-pill {
    text-decoration: none;
  }
  .credits-pill .num { /* same as 19b */ }


  /* ─── user menu (dropdown anchored to avatar) ─── */
  .topbar-user-wrap { position: relative; }
  .topbar-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    padding: 6px;
    z-index: 60;
    display: none;
  }
  .topbar-user-dropdown.open { display: block; }
  .topbar-user-email {
    padding: 10px 12px 8px;
    font-size: 12px;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    word-break: break-all;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .topbar-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    background: transparent;
    border: none;
    font-size: 14px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s ease;
  }
  .topbar-user-item:hover { background: rgba(26, 22, 18, 0.05); }
  /* Leading icons — muted so the label leads. */
  .topbar-user-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--ink-faint);
  }
  .topbar-user-logout {
    color: var(--ink-soft);
  }
  .topbar-user-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 4px 4px;
  }


  /* ─── credits-pill "+" affordance ─── */
  /* Pill is already <a> + cursor:pointer, but resting state looked
     passive. Tiny + icon shifts the read from "badge" to "button".
     Faint by default, accent on hover (matches existing border behaviour). */
  .credits-pill .credits-pill-add {
    color: var(--ink-faint);
    margin-left: 2px;
    transition: color 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
  }
  .credits-pill:hover .credits-pill-add {
    color: var(--accent);
    transform: scale(1.1);
  }



  /* ═════════════════════════════════════════════════════════════════════
     Pass 2 — viewport-fixed chrome + drawer + modal
     ═════════════════════════════════════════════════════════════════════ */

  /* Lift the credits-pill + avatar OUT of the topbar's flex layout into
     fixed-positioned top-right of viewport, matching the marketing nav's
     credits/avatar position. The chat topbar then has only the breadcrumb
     on its left side, which is fine — the right side stays empty. */
  .topbar-right {
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 20;
    /* Inner flex layout (gap, alignment) inherited from existing rule. */
  }

  /* ─── Credits drawer ─── */

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 18, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 100;
  }
  .drawer-backdrop.open { opacity: 1; }
  .drawer-backdrop.hidden { display: none; }

  .credits-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-panel);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 101;
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .credits-drawer.open { transform: translateX(0); }
  .credits-drawer.hidden { display: none; }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .drawer-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
  }
  .drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .drawer-close,
  .drawer-refresh {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--ink-faint);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .drawer-close:hover,
  .drawer-refresh:hover { background: var(--bg-2); color: var(--ink); }
  .drawer-refresh.is-refreshing svg {
    animation: drawer-refresh-spin 700ms ease-in-out;
  }
  @keyframes drawer-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .drawer-balance {
    padding: 18px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
  }
  .drawer-balance-num {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 72;
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-feature-settings: "tnum";
  }
  .drawer-balance-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faint);
    margin-top: 10px;
  }

  .drawer-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--accent);
    color: var(--surface);
    border: 1px solid var(--accent);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
    margin-bottom: auto;
  }
  .drawer-buy-btn:hover { background: var(--accent-deep); }

  .drawer-footer {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
  }
  .drawer-view-full {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
  }
  .drawer-view-full:hover { border-bottom-color: var(--accent); }
  .drawer-footnote {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ink-faint);
    line-height: 1.55;
  }

  /* ─── Models modal ─── */

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 18, 0.36);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.22s ease;
    z-index: 200;
  }
  .modal-backdrop.open { opacity: 1; }
  .modal-backdrop.hidden { display: none; }

  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
  }
  .modal-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 36;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .modal-subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 14;
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
  }
  .modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--ink-faint);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
  }
  .modal-close:hover { background: var(--bg-2); color: var(--ink); }

  .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px 24px;
  }
  .modal-footer {
    padding: 14px 28px;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
  }
  @media (max-width: 640px) {
    .modal-header, .modal-body, .modal-footer { padding-left: 18px; padding-right: 18px; }
  }

  /* ── Export-conversation picker ── */
  .export-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 18, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
  }
  .export-picker {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px;
    width: min(380px, 100%);
  }
  .export-picker-title {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .export-picker-sub {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 16px;
  }
  .export-picker-formats {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .export-picker-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-warm);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .export-picker-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .export-picker-btn strong { font-size: 14px; font-weight: 600; }
  .export-picker-btn span { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); }
  .export-picker-btn:disabled { opacity: 0.6; cursor: default; }
  .export-picker-cancel {
    width: 100%;
    padding: 9px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    cursor: pointer;
  }
  .export-picker-cancel:hover { color: var(--ink); }

  /* ── Project home view ── */
  .project-home {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px 60px;
  }
  .project-home-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
  }
  .project-home-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    margin-bottom: 6px;
  }
  .project-home-name {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.15;
  }
  .project-home-edit {
    flex-shrink: 0;
    padding: 7px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .project-home-edit:hover { border-color: var(--accent); color: var(--accent); }
  .project-home-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
  }
  .project-home-instructions {
    background: var(--surface-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    white-space: pre-wrap;
    margin-bottom: 22px;
  }
  .project-home-instructions.is-empty { color: var(--ink-faint); font-style: italic; }
  .project-home-newchat {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--bubble-user-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 32px;
    transition: background 0.15s ease;
  }
  .project-home-newchat:hover { background: var(--accent-deep); }
  .project-home-section {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    border-top: 1px solid var(--border-divider);
    padding-top: 20px;
  }
  .project-home-chats { display: flex; flex-direction: column; gap: 2px; }
  .project-home-chat {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .project-home-chat:hover { background: var(--accent-soft); }
  .project-home-chat-icon { display: inline-flex; color: var(--ink-faint); flex-shrink: 0; }
  .project-home-empty { color: var(--ink-faint); font-size: 14px; padding: 8px 0; }