/* ask.html — page-specific styles */

/* ══════════════════════════════════════════════════
       ASK PAGE — REDESIGNED LAYOUT
       ══════════════════════════════════════════════════ */

    /* Page-level: fill viewport without scroll */
    .page-content { padding-bottom:0 !important; }

    /* ── Ask shell — unified border wrapping sidebar + chat ── */
    .ask-shell {
      display:grid;grid-template-columns:240px 1fr;
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);
      overflow:hidden;margin-bottom:12px;
      box-shadow:var(--shadow-xs);
      height:calc(100vh - 350px);min-height:340px;
    }

    /* ── Session sidebar ── */
    .ask-sessions {
      display:flex;flex-direction:column;
      background:var(--gray-50);border-right:1px solid var(--border-card);min-width:0;
    }
    .ask-sessions-head {
      padding:14px 14px 8px;display:flex;align-items:center;gap:8px;flex-shrink:0;
    }
    .ask-sessions-title {
      font-family:var(--font-mono);font-size:9px;font-weight:600;
      letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);
    }
    .ask-new-btn {
      margin-left:auto;display:inline-flex;align-items:center;gap:5px;
      border:1px solid var(--gray-200);border-radius:7px;
      background:var(--surface);color:var(--text-secondary);
      font-family:var(--font-body);font-size:11px;font-weight:600;
      padding:4px 9px 4px 8px;cursor:pointer;
      transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.1s;
      box-shadow:var(--shadow-xs);
    }
    .ask-new-btn svg { width:11px;height:11px; }
    .ask-new-btn:hover { background:var(--brand-amber);color:#0E0E0E;border-color:var(--brand-amber); }
    .ask-new-btn:active { transform:translateY(0.5px); }

    .ask-sessions-search {
      margin:0 12px 4px;flex-shrink:0;
      display:flex;align-items:center;gap:7px;
      padding:6px 9px;border-radius:7px;
      border:1px solid var(--gray-200);background:var(--surface);
      transition:border-color 0.15s;
    }
    .ask-sessions-search:focus-within { border-color:var(--brand-amber); }
    /* Show only the container's outer border on focus — suppress the global
       input focus ring (components.css) so there is no inner double border. */
    .ask-sessions-search input:focus,
    .ask-sessions-search input:focus-visible { outline:none !important; box-shadow:none !important; border:none !important; }
    .ask-sessions-search svg { color:var(--text-muted);flex-shrink:0;opacity:0.55; }
    .ask-sessions-search input {
      /* border/background/padding forced: the global input[type=text] rule in
         components.css (loaded after this file, equal specificity) otherwise wins and
         paints a 1px border + filled surface + 8px padding, producing a tall inner box.
         The container supplies the padding, so the input itself needs none. */
      flex:1;min-width:0;border:none !important;outline:none;background:transparent !important;padding:0 !important;
      font-family:var(--font-body);font-size:11.5px;color:var(--text);
    }
    .ask-sessions-search input::placeholder { color:var(--text-muted); }

    .ask-sessions-list { flex:1;min-height:0;overflow-y:auto;padding:4px 8px 10px; }
    .ask-sessions-list::-webkit-scrollbar { width:4px; }
    .ask-sessions-list::-webkit-scrollbar-thumb { background:transparent;border-radius:999px; }
    .ask-sessions-list:hover::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1); }

    .ask-session-group {
      font-family:var(--font-mono);font-size:8.5px;font-weight:700;
      letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);
      padding:14px 8px 5px;
    }
    .ask-session-group:first-child { padding-top:8px; }

    .ask-session-item {
      position:relative;padding:7px 8px 7px 19px;border-radius:7px;cursor:pointer;
      display:flex;align-items:center;gap:6px;border:1px solid transparent;
      margin-bottom:1px;transition:background 0.12s,border-color 0.12s;
    }
    .ask-session-item::before {
      content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
      width:4px;height:4px;border-radius:999px;background:var(--gray-300);
      transition:background 0.12s,box-shadow 0.12s;
    }
    .ask-session-item:hover { background:var(--surface); }
    .ask-session-item:hover::before { background:var(--text-muted); }
    .ask-session-item.active {
      background:var(--surface);border-color:var(--gray-200);box-shadow:var(--shadow-xs);
    }
    .ask-session-item.active::before {
      background:var(--brand-amber);box-shadow:0 0 0 2px rgba(255,180,0,0.22);
    }
    .ask-session-item .si-title {
      font-size:11.5px;font-weight:500;color:var(--text-secondary);
      flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .ask-session-item.active .si-title { color:var(--text);font-weight:600; }
    .ask-session-item .si-time {
      font-family:var(--font-mono);font-size:9px;font-weight:500;
      color:var(--text-muted);flex-shrink:0;
    }
    .ask-session-item .si-del {
      display:none;width:18px;height:18px;border:none;background:none;
      color:var(--text-muted);cursor:pointer;border-radius:4px;
      align-items:center;justify-content:center;flex-shrink:0;
    }
    .ask-session-item:hover .si-del { display:inline-flex; }
    .ask-session-item:hover .si-time { display:none; }
    .ask-session-item .si-del:hover { color:var(--red);background:var(--red-bg); }
    .ask-session-item .si-del svg { width:11px;height:11px; }

    .ask-sessions-empty {
      padding:32px 18px;text-align:center;font-size:11px;color:var(--text-muted);line-height:1.6;
    }
    .ask-sessions-empty svg { opacity:0.3;margin-bottom:8px; }

    .ask-sessions-foot {
      padding:10px 14px;border-top:1px solid var(--gray-200);
      display:flex;align-items:center;gap:8px;
      font-family:var(--font-mono);font-size:9px;font-weight:600;
      letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);flex-shrink:0;
    }
    .ask-sessions-foot .v { color:var(--text);font-weight:700; }

    /* ── Main chat panel ── */
    .ask-main { display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface); }

    /* Toolbar */
    .ask-toolbar {
      display:flex;align-items:center;gap:8px;
      padding:9px 18px;border-bottom:1px solid var(--border-card);flex-shrink:0;
    }
    .ask-toolbar .spacer { flex:1; }
    .ask-toolbar .tb-status {
      display:inline-flex;align-items:center;gap:6px;
      font-family:var(--font-mono);font-size:9.5px;font-weight:700;
      letter-spacing:0.14em;text-transform:uppercase;color:var(--brand-amber-strong);
      padding:3px 9px 3px 8px;background:var(--brand-amber-bg);
      border:1px solid rgba(255,180,0,0.22);border-radius:999px;
    }
    .ask-toolbar .tb-status::before {
      content:"";width:5px;height:5px;border-radius:999px;background:var(--brand-amber);
      box-shadow:0 0 0 2px rgba(255,180,0,0.22);animation:ctxPulse 1.5s infinite;
    }
    @keyframes ctxPulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
    .ask-toolbar .tb-btn {
      display:inline-flex;align-items:center;gap:6px;
      padding:5px 9px;border-radius:7px;border:1px solid transparent;background:transparent;
      color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);font-size:11.5px;font-weight:500;
      transition:color 0.12s,background 0.12s;
    }
    .ask-toolbar .tb-btn:hover { color:var(--text);background:var(--gray-100); }
    .ask-toolbar .tb-btn svg { width:12px;height:12px; }

    /* ── Chat area ── */
    .chat-area {
      flex:1;min-height:0;overflow-y:auto;padding:24px 28px 16px;scroll-behavior:smooth;
    }
    .chat-area::-webkit-scrollbar { width:5px; }
    .chat-area::-webkit-scrollbar-thumb { background:transparent;border-radius:999px; }
    .chat-area:hover::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12); }

    /* Welcome */
    .ask-welcome { max-width:820px;margin:0 auto;padding:8px 0 4px; }

    .starters-label {
      display:flex;align-items:center;gap:10px;
      font-family:var(--font-mono);font-size:9px;font-weight:600;
      letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin:20px 0 12px;
    }
    .starters-label::after { content:"";height:1px;flex:1;background:var(--gray-200); }

    .starters { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
    .starter-card {
      position:relative;text-align:left;background:var(--surface);
      border:1px solid var(--border-card);border-radius:var(--radius);
      padding:13px 16px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;
      transition:border-color 0.18s,background 0.18s,box-shadow 0.18s,transform 0.15s;overflow:hidden;
    }
    .starter-card::after {
      content:"→";position:absolute;top:13px;right:14px;
      font-size:13px;color:var(--text-muted);line-height:1;
      opacity:0;transform:translateX(-4px);transition:opacity 0.18s,transform 0.18s,color 0.18s;
    }
    .starter-card:hover {
      border-color:rgba(255,180,0,0.45);box-shadow:0 4px 14px rgba(255,180,0,0.08);transform:translateY(-1px);
    }
    .starter-card:hover::after { opacity:1;transform:translateX(0);color:var(--brand-amber-strong); }
    .starter-card .sc-cat {
      display:inline-flex;align-items:center;gap:6px;
      font-family:var(--font-mono);font-size:8.5px;font-weight:700;
      letter-spacing:0.16em;text-transform:uppercase;color:var(--brand-amber-strong);
    }
    .starter-card .sc-cat::before {
      content:"";width:4px;height:4px;border-radius:999px;
      background:var(--brand-amber);box-shadow:0 0 0 2px rgba(255,180,0,0.18);
    }
    .starter-card .sc-title { font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-0.005em;line-height:1.35;padding-right:18px; }
    .starter-card .sc-desc { font-size:10.5px;color:var(--text-muted);line-height:1.5; }

    /* ── Messages ── */
    .msg-list { max-width:840px;margin:0 auto; }
    .msg { display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;animation:msgIn 0.25s ease-out; }
    @keyframes msgIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
    .msg-avatar { width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
    .msg-avatar.agent { background:linear-gradient(135deg,rgba(255,180,0,0.7),#FFB400);box-shadow:0 2px 8px rgba(255,180,0,0.25),inset 0 1px 0 rgba(255,255,255,0.4); }
    .msg-avatar.user { background:var(--text); }
    .msg-body { flex:1;min-width:0; }
    .msg-role {
      display:flex;align-items:center;gap:8px;
      font-family:var(--font-mono);font-size:8.5px;font-weight:700;
      letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
    }
    .msg-text { font-size:13px;line-height:1.65;color:var(--text); }
    .msg-text p { margin-bottom:8px; }
    .msg-text p:last-child { margin-bottom:0; }
    .msg-text strong { font-family:var(--font-mono);font-weight:700; }
    .msg-text code { font-size:11px;font-family:var(--font-mono);background:var(--gray-100);padding:1px 5px;border-radius:3px; }
    .msg-text .query-label { font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px; }
    .msg-text pre {
      background:#0E0E0E;color:#e4e4e7;padding:14px 16px;
      border-radius:var(--radius-sm);font-size:11px;line-height:1.6;
      overflow-x:auto;font-family:var(--font-mono);margin:8px 0 14px;
      border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .msg-text .table-scroll { overflow-x:auto;margin:8px 0 14px;border-radius:var(--radius-sm);border:1px solid var(--border-card);background:var(--surface); }
    .msg-text table { font-size:11px;width:100%;border-collapse:collapse;background:var(--surface); }
    .msg-text th {
      font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.1em;
      text-transform:uppercase;padding:9px 12px;text-align:left;
      background:var(--gray-50);color:var(--text-muted);font-weight:600;
      border-bottom:1px solid var(--gray-200);white-space:nowrap;
    }
    .msg-text td { padding:8px 12px;font-size:11px;border-top:1px solid var(--gray-100);font-family:var(--font-mono);white-space:nowrap; }
    .msg-text td:first-child { font-weight:600; }
    .msg-text td.positive { color:var(--green); }
    .msg-text td.negative { color:var(--red); }
    .msg-text tr:hover td { background:var(--gray-50); }
    .msg-text ul,.msg-text ol { margin:4px 0 12px 20px;font-size:13px;line-height:1.65; }
    .msg-text li { margin-bottom:4px; }
    .msg-text li::marker { color:var(--brand-amber-strong);font-family:var(--font-mono);font-weight:700; }

    /* Thinking pill */
    .msg-thinking {
      display:inline-flex;align-items:center;gap:10px;
      padding:6px 12px 6px 11px;background:var(--brand-amber-bg);
      border:1px solid rgba(255,180,0,0.22);border-radius:999px;
      font-family:var(--font-mono);font-size:10.5px;font-weight:600;
      letter-spacing:0.04em;color:var(--brand-amber-strong);
    }
    .dot-pulse { display:inline-flex;gap:3px; }
    .dot-pulse span { width:4px;height:4px;border-radius:2px;background:#FFB400;animation:dotP 1.2s infinite ease-in-out; }
    .dot-pulse span:nth-child(2){ animation-delay:0.2s; }
    .dot-pulse span:nth-child(3){ animation-delay:0.4s; }
    @keyframes dotP { 0%,80%,100%{opacity:0.2;transform:scale(0.8);} 40%{opacity:1;transform:scale(1);} }

    /* ── Input bar ── */
    .input-bar { flex-shrink:0;padding:14px 24px 18px;border-top:1px solid var(--border-card);background:var(--surface); }
    .input-shell { max-width:840px;margin:0 auto; }
    .input-row {
      display:flex;gap:8px;align-items:flex-end;
      background:var(--surface);border:1px solid var(--border-card);
      border-radius:var(--radius);padding:8px 8px 8px 14px;
      transition:border-color 0.18s,box-shadow 0.18s;
    }
    .input-row:focus-within { border-color:#FFB400;box-shadow:0 0 0 3px rgba(255,180,0,0.10); }
    .input-row textarea {
      flex:1;resize:none;border:none;background:transparent;
      font-size:13px;font-family:var(--font-body);color:var(--text);outline:none;
      min-height:36px;max-height:140px;line-height:1.55;padding:6px 0;
    }
    .input-row textarea::placeholder { color:var(--text-muted); }
    .send-btn {
      width:36px;height:36px;border:none;border-radius:var(--radius-sm);
      background:#FFB400;color:#0E0E0E;cursor:pointer;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      transition:background 0.15s,transform 0.1s,box-shadow 0.15s;
    }
    .send-btn:hover { background:rgba(255,180,0,0.85);box-shadow:0 2px 8px rgba(255,180,0,0.3); }
    .send-btn:active { transform:translateY(0.5px); }
    /* Disabled = neutral grey, not washed-out gold (design/README.md § Buttons). */
    .send-btn:disabled { background:var(--gray-100);color:var(--text-muted);opacity:1;cursor:not-allowed;box-shadow:none; }
    .send-btn:disabled:hover { background:var(--gray-100);box-shadow:none; }
    .send-btn svg { width:15px;height:15px; }

    .input-foot { margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
    .input-hint {
      font-family:var(--font-mono);font-size:9.5px;font-weight:500;
      color:var(--text-muted);letter-spacing:0.06em;
      display:inline-flex;align-items:center;gap:8px;
    }
    .input-hint kbd {
      display:inline-flex;align-items:center;justify-content:center;
      min-width:16px;height:16px;padding:0 4px;border-radius:3px;
      background:var(--gray-100);border:1px solid var(--gray-200);
      font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--text-secondary);
    }
    .input-hint .sep { color:var(--gray-300);margin:0 2px; }
    .input-quota {
      margin-left:auto;font-family:var(--font-mono);font-size:9.5px;font-weight:600;
      color:var(--text-muted);letter-spacing:0.06em;display:inline-flex;align-items:center;gap:8px;
    }
    .input-quota b { color:var(--text);font-weight:700; }
    .input-quota .bar {
      display:inline-block;width:42px;height:3px;border-radius:2px;
      background:var(--gray-200);position:relative;overflow:hidden;
    }
    .input-quota .bar::after {
      content:"";position:absolute;left:0;top:0;height:100%;width:28%;
      background:var(--brand-amber);border-radius:2px;
    }

    /* ── Responsive ── */
    @media(max-width:1180px){ .starters { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:880px){
      .ask-shell { grid-template-columns:1fr;max-height:none; }
      .ask-sessions { display:none; }
    }
    @media(max-width:640px){
      .starters { grid-template-columns:1fr; }
      .chat-area { padding:18px 16px 12px; }
      .input-bar { padding:12px 14px 16px; }
      .msg-text pre { font-size:10px;padding:8px 10px; }
      .msg-text table { font-size:10px; }
      .msg-text th { font-size:8px;padding:6px 8px; }
      .msg-text td { font-size:10px;padding:5px 8px; }
      .msg-text .table-scroll { -webkit-overflow-scrolling:touch; }
      .input-row textarea { font-size:16px; }
      .send-btn { width:44px;height:44px; }
      .ask-toolbar { padding:8px 14px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch; }
      .ask-welcome-head h2 { font-size:20px; }
    }

/* extracted free inline styles (css-verify) */
.askf-1 { position:relative;z-index:1; }