/* ── GoldSales View Chat ─────────────────────────────────── */
:root {
  --bg: #0c1421; --bg-card: #1e2937; --text: #e0f2fe; --text-muted: #94a3b8;
  --blue: #3b82f6; --green: #10b981; --gold: #fbbf24; --red: #ef4444;
  --border: #334155;
  --font-body: -apple-system, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; }

.chat-container { display: flex; flex-direction: column; height: 100vh; max-width: 800px; margin: 0 auto; }

.chat-messages { flex: 1; overflow-y: auto; padding: 20px 20px 0; display: flex; flex-direction: column; gap: 16px; }
.message { display: flex; gap: 10px; max-width: 85%; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message.assistant { align-self: flex-start; }
.msg-avatar {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.message.assistant .msg-avatar { background: var(--blue); color: #fff; }
.message.user .msg-avatar { background: var(--green); color: #fff; }
.msg-bubble { padding: 10px 16px; border-radius: 12px; font-size: 14px; line-height: 1.65; }
.message.assistant .msg-bubble { background: var(--bg-card); border: 1px solid var(--border); }
.message.user .msg-bubble { background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); }
.msg-bubble p { margin-bottom: 8px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { padding-left: 20px; margin-bottom: 8px; }
.msg-bubble strong { color: var(--gold); }
.msg-bubble code { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 13px; }

.typing-indicator { display: flex; gap: 4px; padding: 8px 0; }
.typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: bounce 1.4s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,80%,100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

.chat-foot { padding: 0 20px 16px; }
.context-bar { font-size: 12px; color: var(--text-muted); padding: 4px 0; }
.chat-input-bar { display: flex; gap: 10px; }
.chat-input-bar textarea {
  flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text); font-size: 14px; font-family: var(--font-body);
  resize: none; outline: none;
}
.chat-input-bar textarea:focus { border-color: var(--blue); }
.chat-input-bar button {
  padding: 10px 20px; background: var(--blue); color: #fff; border: none; border-radius: 8px;
  font-size: 14px; cursor: pointer; font-weight: 600; white-space: nowrap;
}
.chat-input-bar button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) { .message { max-width: 95%; } }

/* Top nav */
.top-nav { display: flex; gap: 12px; padding: 10px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border); align-items: center; }
.top-nav .nav-link { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 6px; transition: all 0.15s; }
.top-nav .nav-link:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.top-nav .nav-link.active { color: var(--text); background: rgba(59,130,246,0.15); }