:root{
  --bg:#fff8f1;        /* warm ivory */
  --panel:#ffffff;      /* white cards */
  --muted:#6b7280;      /* gray-500 */
  --text:#1f2937;       /* gray-800 */
  --accent:#f59e0b;     /* amber-500 */
  --accent-2:#fb7185;   /* rose-400 */
  --danger:#ef4444;     /* red-500 */
  --ok:#16a34a;         /* green-600 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
a{color:var(--accent)}
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(6px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid #e5e7eb; /* gray-200 */
}
.container{max-width:1100px; margin:0 auto; padding:16px}
.nav{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap
}
.nav a{
  text-decoration:none; color:var(--text); opacity:.9; padding:8px 10px; border-radius:8px
}
.nav a.active, .nav a:hover{background:#fff1e6; color:#92400e}
.brand{font-weight:700; letter-spacing:.3px; margin-right:auto}
.grid{display:grid; gap:16px}
.panel{
  background:var(--panel); border:1px solid #f3f4f6; border-radius:12px; padding:16px
}
.row{display:flex; gap:12px; align-items:center}
.row.wrap{flex-wrap:wrap}
.muted{color:var(--muted)}
.badge{border:1px solid #f3f4f6; padding:2px 8px; border-radius:999px; font-size:12px; color:#92400e; background:#fff7ed}
button, .btn{
  appearance:none; border:1px solid #e5e7eb; background:#ffffff; color:var(--text); border-radius:10px; padding:10px 14px; cursor:pointer
}
button:hover,.btn:hover{border-color:#d1d5db}
button.primary{border-color:#f59e0b; background:#fff7ed; color:#92400e}
button.danger{border-color:#fecaca; background:#fff1f2; color:#991b1b}
input, textarea, select{
  width:100%; background:#ffffff; color:#111827; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px
}
textarea{min-height:120px; resize:vertical}
.chat{display:flex; flex-direction:column; height:calc(100vh - 120px); gap:12px}
.chat-log{flex:1; overflow:auto; padding:8px; display:flex; flex-direction:column; gap:12px}
.msg{display:flex; gap:12px; align-items:flex-start}
.msg .bubble{max-width:70%}
.msg.assistant{justify-content:flex-start}
.msg.assistant .bubble{margin-right:auto}
.msg.user{justify-content:flex-end}
.msg.user .bubble{margin-left:auto}
.msg.user .avatar{order:2}
.msg.user .bubble{order:1}
.avatar{width:32px; height:32px; border-radius:50%; background:#ffffff; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; font-size:12px; color:#9ca3af}
.msg .role{width:64px; text-align:right; opacity:.7}
.msg .bubble{flex:1; padding:12px 14px; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; white-space:pre-wrap; transition: border-color .15s ease}
.msg.user .bubble{background:#fff7ed}
.msg.assistant .bubble{background:#fffaf0}
.msg .bubble:hover{border-color:#e5e7eb}
.msg .bubble pre{background:#fffaf5; border:1px solid #f3f4f6; padding:12px; border-radius:8px; overflow:auto}
.msg .bubble code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.codeblock{position:relative}
.codeblock .header{position:absolute; top:6px; left:8px; font-size:12px; color:#9a6b2f}
.copy-btn{position:absolute; top:6px; right:8px; font-size:12px; padding:6px 8px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; opacity:.85}
.copy-btn:hover{opacity:1}
.footer{position:sticky; bottom:0}
.footer .controls{display:flex; gap:8px; align-items:flex-start}
.footer textarea{min-height:60px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{border:1px solid #e5e7eb; background:#ffffff; color:#6b7280; padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer}
.chip:hover{color:#92400e; border-color:#f59e0b}

.typing{display:inline-block; width:1em; text-align:left}
.typing::after{content:'…'; animation: ellipsis 1.2s steps(4,end) infinite}
@keyframes ellipsis{to{width:3em}}

button:disabled{opacity:.6; cursor:not-allowed}

.kpi{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.kpi .panel{display:flex; flex-direction:column; gap:6px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-variant-numeric: tabular-nums}
.pre{white-space: pre-wrap}

/* simple table styling */
.table{width:100%; border-collapse:collapse}
.table th, .table td{border:1px solid #f3f4f6; padding:8px 10px; text-align:left}
.table th{background:#fff7ed; color:#92400e}
.table tr:nth-child(even) td{background:#fffdf8}
/* Align numeric columns to the right and prevent wrapping */
.table th:nth-child(2),
.table th:nth-child(3),
.table th:nth-child(4){ text-align:right }
.table td:nth-child(2),
.table td:nth-child(3),
.table td:nth-child(4){ text-align:right; white-space:nowrap }
.small{font-size:12px}
.right{margin-left:auto}
.spacer{height:8px}
.hidden{display:none}