:root {
    --bg: #f5f4f0;
    --sidebar-bg: #fafaf8;
    --chat-bg: #ffffff;
    --border: #e4e2db;
    --text: #1a1a18;
    --muted: #8a8880;
    --muted2: #b5b3ad;
    --accent: #1a6b3c;
    --accent-light: #e8f5ee;
    --accent2: #d4a843;
    --red: #c94040;
    --red-light: #fdf0f0;
    --green: #1a6b3c;
    --green-light: #e8f5ee;
    --selected-bg: #1a1a18;
    --selected-text: #f5f4f0;
    --card: #ffffff;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.08);
    --font: 'Geist', sans-serif;
    --mono: 'Geist Mono', monospace;
    --serif: 'Instrument Serif', serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; overflow: hidden; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    display: flex;
    flex-direction: column;
  }

  /* ── TOPBAR ── */
  .topbar {
    height: 52px;
    background: var(--chat-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    flex-shrink: 0;
    z-index: 50;
  }

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

  .logo-mark {
    width: 28px; height: 28px;
    background: var(--text);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: var(--bg);
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: -0.03em;
  }

  .logo-name {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--text);
    font-style: italic;
  }

  .logo-tag {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.06em;
  }

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

  .market-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
  }

  .status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2s ease-in-out infinite;
  }

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

  .api-badge {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted2);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 4px;
  }

  /* ── MAIN LAYOUT ── */
  .main {
    flex: 1;
    display: grid;
    grid-template-columns: 260px 1fr;
    overflow: hidden;
  }

  /* ── LEFT SIDEBAR ── */
  .sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chat-nav {
    padding: 10px 8px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .new-chat-btn {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--chat-bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }

  .new-chat-btn:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--selected-text);
  }

  .new-chat-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.86rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .new-chat-btn:hover .new-chat-icon {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
  }

  .recent-chat-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 176px;
    overflow-y: auto;
    padding-right: 2px;
  }

  .recent-chat-list::-webkit-scrollbar { width: 3px; }
  .recent-chat-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .recent-empty {
    font-size: 0.7rem;
    color: var(--muted2);
    padding: 7px 8px;
    line-height: 1.45;
  }

  .recent-chat-item {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 1fr 22px;
    gap: 6px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font-family: var(--font);
  }

  .recent-chat-item:hover {
    background: var(--border);
  }

  .recent-chat-item.active {
    background: var(--selected-bg);
    color: var(--selected-text);
  }

  .recent-chat-copy {
    min-width: 0;
  }

  .recent-chat-title {
    display: block;
    font-size: 0.74rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recent-chat-meta {
    display: block;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 0.56rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recent-chat-item.active .recent-chat-meta {
    color: rgba(255,255,255,0.56);
  }

  .delete-chat-btn {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted2);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
  }

  .recent-chat-item:hover .delete-chat-btn,
  .recent-chat-item.active .delete-chat-btn {
    opacity: 1;
  }

  .delete-chat-btn:hover {
    background: var(--red-light);
    color: var(--red);
  }

  .recent-chat-item.active .delete-chat-btn {
    color: rgba(255,255,255,0.55);
  }

  .recent-chat-item.active .delete-chat-btn:hover {
    background: rgba(255,255,255,0.14);
    color: var(--selected-text);
  }

  .sidebar-header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .sidebar-title {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
  }

  .search-wrap {
    position: relative;
  }

  .search-input {
    width: 100%;
    background: var(--chat-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px 8px 32px;
    font-family: var(--font);
    font-size: 0.8rem;
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
  }

  .search-input:focus {
    border-color: var(--text);
  }

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

  .search-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted2);
    font-size: 0.75rem;
    pointer-events: none;
  }

  /* Stock List */
  .stock-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
  }

  .stock-list::-webkit-scrollbar { width: 3px; }
  .stock-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .sector-label {
    font-family: var(--mono);
    font-size: 0.58rem;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 8px 4px;
  }

  .stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 1px;
  }

  .stock-item:hover {
    background: var(--border);
  }

  .stock-item.active {
    background: var(--selected-bg);
    color: var(--selected-text);
  }

  .stock-item-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .stock-avatar {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
    letter-spacing: -0.03em;
  }

  .stock-item.active .stock-avatar {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.15);
    color: var(--selected-text);
  }

  .stock-info { min-width: 0; }

  .stock-sym {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stock-item.active .stock-sym { color: var(--selected-text); }

  .stock-fullname {
    display: block;
    font-size: 0.67rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
  }

  .stock-item.active .stock-fullname { color: rgba(255,255,255,0.5); }

  .stock-chg {
    font-family: var(--mono);
    font-size: 0.67rem;
    font-weight: 500;
    flex-shrink: 0;
  }

  .pdf-badge {
    font-family: var(--mono);
    font-size: 0.56rem;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid rgba(26,107,60,0.16);
    border-radius: 999px;
    padding: 2px 6px;
    flex-shrink: 0;
  }

  .stock-item.active .pdf-badge {
    color: var(--selected-text);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
  }

  .stock-chg.up { color: var(--green); }
  .stock-chg.dn { color: var(--red); }
  .stock-item.active .stock-chg.up { color: #6ee89a; }
  .stock-item.active .stock-chg.dn { color: #ff9090; }

  .loading-stocks {
    padding: 24px 16px;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
  }

  .spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--text);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 8px;
  }

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

  /* ── RIGHT CHAT PANEL ── */
  .chat-panel {
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    overflow: hidden;
  }

  /* Chat header — shows selected stock info */
  .chat-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .chat-header-empty {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted2);
  }

  .stock-header-info { flex: 1; }

  .stock-header-sym {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
  }

  .stock-header-name {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1px;
  }

  .stock-header-price {
    text-align: right;
  }

  .price-val {
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
  }

  .price-chg {
    font-family: var(--mono);
    font-size: 0.72rem;
    margin-top: 2px;
  }

  .price-chg.up { color: var(--green); }
  .price-chg.dn { color: var(--red); }

  /* Stock quick metrics strip */
  .metrics-strip {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--sidebar-bg);
    flex-shrink: 0;
    overflow-x: auto;
  }

  .metrics-strip::-webkit-scrollbar { height: 0; }

  .metric-chip {
    padding: 7px 16px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
  }

  .metric-chip:last-child { border-right: none; }

  .metric-label {
    font-family: var(--mono);
    font-size: 0.57rem;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }

  .metric-val {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
  }

  /* Messages */
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .chat-messages::-webkit-scrollbar { width: 4px; }
  .chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* Empty / welcome state */
  .welcome-state {
    margin: auto;
    max-width: 420px;
    text-align: center;
    animation: fadeUp 0.5s ease;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .welcome-icon {
    width: 56px; height: 56px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 16px;
  }

  .welcome-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--text);
    margin-bottom: 8px;
  }

  .welcome-sub {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 20px;
  }

  .welcome-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
  }

  .welcome-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.5;
  }

  .step-num {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text);
    background: var(--border);
    width: 20px; height: 20px;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }

  /* Stock selected but no messages yet */
  .stock-selected-state {
    margin: auto;
    max-width: 460px;
    text-align: center;
    animation: fadeUp 0.4s ease;
  }

  .stock-selected-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: var(--text);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
  }

  .stock-selected-title {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--text);
    margin-bottom: 6px;
  }

  .stock-selected-sub {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .suggestion-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .pill {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 0.76rem;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
  }

  .pill:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--chat-bg);
  }

  /* Messages */
  .msg {
    display: flex;
    gap: 10px;
    animation: msgIn 0.25s ease;
    max-width: 800px;
  }

  @keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .msg.user { align-self: flex-end; flex-direction: row-reverse; }

  .msg-av {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
    font-family: var(--mono);
    font-weight: 600;
  }

  .msg.ai .msg-av {
    background: radial-gradient(circle at 30% 20%, #29452f, #111f15 70%);
    color: var(--bg);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 4px 10px rgba(10,23,14,0.25);
  }

  .msg.user .msg-av {
    background: var(--accent-light);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 0.65rem;
  }

  .msg-body { max-width: 88%; }

  .msg-bubble {
    padding: 11px 15px;
    border-radius: 12px;
    font-size: 0.84rem;
    line-height: 1.75;
  }

  .msg.user .msg-bubble {
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom-right-radius: 3px;
    color: var(--text);
  }

  .msg.ai .msg-bubble {
    background: var(--chat-bg);
    border: 1px solid var(--border);
    border-bottom-left-radius: 3px;
    color: var(--text);
    box-shadow: var(--shadow);
  }

  .msg.ai .msg-bubble.ai-rich-bubble {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
    border-color: #dfddd4;
  }

  .msg.ai .msg-bubble.ai-rich-bubble::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    background: linear-gradient(130deg, rgba(26,107,60,0.15), rgba(212,168,67,0.11), transparent 60%);
    z-index: -1;
  }

  .msg-bubble strong { color: var(--text); font-weight: 600; }

  .msg-bubble p {
    margin: 0 0 10px;
  }

  .msg-bubble p:last-child,
  .msg-bubble ul:last-child,
  .msg-bubble ol:last-child,
  .msg-bubble .table-wrap:last-child {
    margin-bottom: 0;
  }

  .msg-bubble h4 {
    margin: 12px 0 6px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text);
    font-weight: 650;
  }

  .msg-bubble h4:first-child {
    margin-top: 0;
  }

  .msg-bubble ul,
  .msg-bubble ol {
    margin: 8px 0 12px;
    padding-left: 18px;
  }

  .msg-bubble li {
    margin: 5px 0;
  }

  .msg-bubble code {
    font-family: var(--mono);
    font-size: 0.76rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 4px;
  }

  .msg-bubble .data-tag {
    display: inline-block;
    background: var(--accent-light);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.72rem;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid rgba(26,107,60,0.15);
    margin: 0 2px;
  }

  .msg-bubble .warn-tag {
    display: inline-block;
    background: #fdf3e3;
    color: #9a6c00;
    font-family: var(--mono);
    font-size: 0.72rem;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid rgba(154,108,0,0.15);
  }

  /* Source citation bar */
  .source-bar {
    margin-top: 8px;
    padding: 9px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--muted);
    max-width: 360px;
  }

  .source-title {
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--text);
    margin-bottom: 7px;
  }

  .source-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  .source-num {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--chat-bg);
    border: 1px solid var(--border);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 650;
    flex-shrink: 0;
  }

  .source-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .source-kind {
    color: var(--text);
    font-weight: 600;
  }

  .source-name {
    color: var(--muted);
    line-height: 1.4;
  }

  .msg-time {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted2);
    margin-top: 5px;
    padding: 0 4px;
  }

  .msg.user .msg-time { text-align: right; }

  /* Typing */
  .typing-dots {
    display: flex; gap: 3px; padding: 2px 0;
  }
  .typing-dots span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--muted2);
    animation: typeBlink 1.2s ease infinite;
  }
  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes typeBlink { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }

  /* Premium thinking state */
  .ai-pulse {
    animation: aiPulse 1.4s ease-in-out infinite;
  }

  @keyframes aiPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.94); opacity: 0.62; }
  }

  .veda-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
  }

  .veda-avatar-svg {
    width: 16px;
    height: 16px;
    overflow: visible;
  }

  .veda-avatar-ring {
    fill: none;
    stroke: rgba(245, 244, 240, 0.86);
    stroke-width: 1.2;
  }

  .veda-avatar-mark {
    fill: none;
    stroke: #f5f4f0;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .veda-avatar.is-animated .veda-avatar-ring {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
    animation: ringSpin 1.4s linear infinite;
  }

  .veda-avatar.is-animated .veda-avatar-mark {
    animation: markPulse 1.2s ease-in-out infinite;
    transform-origin: 12px 12px;
  }

  @keyframes ringSpin {
    to { stroke-dashoffset: -60; }
  }

  @keyframes markPulse {
    0%,100% { opacity: 0.92; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
  }

  .ai-thinking-bubble {
    overflow: hidden;
    border: 1px solid #dddace !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8f7f2 100%) !important;
    box-shadow: 0 8px 20px rgba(10, 24, 14, 0.06);
  }

  .thinking-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .thinking-glow {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(120deg, #1a6b3c, #d4a843);
    box-shadow: 0 0 0 6px rgba(26,107,60,0.12);
    animation: thinkingGlow 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }

  @keyframes thinkingGlow {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.14); opacity: 1; }
  }

  .thinking-label {
    font-family: var(--mono);
    font-size: 0.67rem;
    color: #4f5b49;
    letter-spacing: 0.01em;
  }

  .thinking-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .thinking-lines span {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ebeadf 20%, #f6f5ef 50%, #ebeadf 80%);
    background-size: 220% 100%;
    animation: shimmer 1.35s linear infinite;
  }

  .thinking-lines span:nth-child(1) { width: 88%; }
  .thinking-lines span:nth-child(2) { width: 68%; }
  .thinking-lines span:nth-child(3) { width: 77%; }

  @keyframes shimmer {
    0% { background-position: 140% 0; }
    100% { background-position: -40% 0; }
  }

  /* AI enrich cards */
  .ai-simple-card {
    margin-top: 8px;
    border: 1px solid #dce6df;
    background: linear-gradient(180deg, #f7fcf9 0%, #eef7f0 100%);
    border-radius: 10px;
    padding: 10px 12px;
  }

  .ai-simple-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f6b3a;
    background: rgba(26,107,60,0.12);
    border: 1px solid rgba(26,107,60,0.2);
    border-radius: 999px;
    padding: 2px 7px;
    margin-bottom: 6px;
  }

  .ai-simple-text {
    font-size: 0.78rem;
    line-height: 1.5;
    color: #24442f;
  }

  .ai-visual-card {
    margin-top: 8px;
    border: 1px solid #dfddd2;
    background: linear-gradient(180deg, #fdfcf8 0%, #f6f4ed 100%);
    border-radius: 10px;
    padding: 11px 12px;
  }

  .ai-visual-title {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #635f4f;
    margin-bottom: 2px;
  }

  .ai-visual-sub {
    font-size: 0.72rem;
    color: #777261;
    margin-bottom: 10px;
  }

  .viz-grid {
    display: grid;
    gap: 8px;
  }

  .viz-meter {
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid #ece9de;
    background: #fffdfa;
  }

  .viz-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.69rem;
    color: #666254;
    margin-bottom: 4px;
    font-family: var(--mono);
  }

  .viz-track {
    height: 6px;
    border-radius: 999px;
    background: #efede5;
    overflow: hidden;
  }

  .viz-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1a6b3c, #d4a843);
    box-shadow: 0 0 10px rgba(26,107,60,0.2);
    animation: vizGrow 0.6s ease;
  }

  @keyframes vizGrow {
    from { width: 0; }
    to { width: 100%; }
  }

  .viz-chart {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #ddd9cd;
  }

  .viz-chart-title {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: #6f6b5d;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .viz-bars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
    height: 90px;
    align-items: end;
  }

  .viz-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .viz-bar {
    width: 100%;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #1a6b3c, #0e4f2b);
    box-shadow: inset 0 -6px 10px rgba(0,0,0,0.11);
    min-height: 8px;
    animation: popBar 0.4s ease;
  }

  @keyframes popBar {
    from { transform: scaleY(0.15); transform-origin: bottom; opacity: 0.4; }
    to { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  }

  .viz-bar-label {
    font-family: var(--mono);
    font-size: 0.56rem;
    color: #898575;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── INPUT BAR ── */
  .input-bar {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border);
    background: var(--sidebar-bg);
    flex-shrink: 0;
  }

  .no-stock-notice {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted2);
    padding: 8px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: none;
  }

  .no-stock-notice.show { display: block; }

  .input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }

  .chat-input {
    flex: 1;
    background: var(--chat-bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font);
    font-size: 0.84rem;
    color: var(--text);
    outline: none;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    line-height: 1.5;
    transition: border-color 0.15s;
  }

  .chat-input:focus { border-color: var(--text); }
  .chat-input::placeholder { color: var(--muted2); }

  .send-btn {
    width: 44px; height: 44px;
    background: var(--text);
    border: none;
    border-radius: 10px;
    color: var(--chat-bg);
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.15s, transform 0.1s;
    flex-shrink: 0;
  }

  .send-btn:hover { opacity: 0.85; transform: translateY(-1px); }
  .send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

  .send-btn.stop-mode {
    background: #b83a3a;
  }

  .send-btn.stop-mode:hover {
    opacity: 0.92;
  }

  .stop-note {
    align-self: center;
    font-family: var(--mono);
    font-size: 0.62rem;
    color: #8a8880;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 999px;
    padding: 4px 9px;
    margin-top: -6px;
  }

  .input-hint {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted2);
    text-align: center;
  }

  /* Fetching state */
  .fetch-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--accent-light);
    border: 1px solid rgba(26,107,60,0.15);
    border-radius: 8px;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--accent);
  }

  .fetch-bar.show { display: flex; }
  .fetch-spinner {
    width: 12px; height: 12px;
    border: 1.5px solid rgba(26,107,60,0.3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
  }

  /* Table in messages */
  .msg-bubble .table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
  }

  .msg-bubble table {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
    font-family: var(--mono);
    font-size: 0.73rem;
    min-width: 620px;
  }
  .msg-bubble th {
    background: var(--bg);
    padding: 8px 10px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-weight: 600;
    color: var(--text);
    vertical-align: top;
  }
  .msg-bubble td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--muted);
    vertical-align: top;
  }

  .msg-bubble th:last-child,
  .msg-bubble td:last-child {
    border-right: 0;
  }

  .msg-bubble tr:last-child td {
    border-bottom: 0;
  }

  @media (max-width: 760px) {
    html, body { overflow: auto; }

    .topbar {
      height: auto;
      min-height: 56px;
      align-items: flex-start;
      padding: 12px;
      flex-direction: column;
    }

    .topbar-right {
      margin-left: 0;
      width: 100%;
      justify-content: space-between;
    }

    .main {
      min-height: calc(100vh - 96px);
      grid-template-columns: 1fr;
      grid-template-rows: 330px minmax(520px, 1fr);
    }

    .sidebar {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .recent-chat-list {
      max-height: 118px;
    }

    .chat-header {
      padding: 12px;
      align-items: flex-start;
    }

    .chat-messages {
      padding: 14px;
    }

    .msg-body {
      max-width: 94%;
    }

    .ai-visual-sub {
      line-height: 1.5;
    }

    .viz-bars {
      height: 72px;
    }

    .api-badge,
    .logo-tag {
      display: none;
    }
  }