:root {
    --bg: #12100e; --panel: #1a1714; --line: #2c2723;
    --ink: #f0ebe4; --dim: #9a9089; --accent: #d97a45; --ok: #7fa96b; --bad: #c9584a;
    --radius: 10px;
  }
  @media (prefers-color-scheme: light) {
    :root { --bg:#faf7f2; --panel:#fff; --line:#e5ded4; --ink:#1e1a17; --dim:#6d6459; --accent:#c4622f; }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink); height: 100dvh;
    display: flex; flex-direction: column;
    font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  header {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    border-bottom: 1px solid var(--line); flex: none;
  }
  h1 { font: 600 17px/1 ui-serif, Georgia, serif; margin: 0; letter-spacing: .2px; }
  h1 span { color: var(--accent); }
  .meta { color: var(--dim); font-size: 12px; margin-left: auto; text-align: right; }
  .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--bad); margin-right:5px; }
  .dot.on { background: var(--ok); }
  button {
    font: inherit; font-size: 13px; color: var(--ink); background: var(--panel);
    border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; cursor: pointer;
  }
  button:hover { border-color: var(--accent); }
  button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .shops { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
  .shops button { border: 0; padding: 3px 10px; color: var(--dim); }
  .shops button[aria-selected="true"] { background: var(--accent); color: #fff; }
  #log { flex: 1; overflow-y: auto; padding: 20px 18px 8px; }
  .wrap { max-width: 760px; margin: 0 auto; }
  .msg { margin-bottom: 18px; }
  .msg.user .body {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 9px 13px; display: inline-block; max-width: 90%;
  }
  .role { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); margin-bottom: 5px; }
  .body { word-wrap: break-word; }
  .body.raw { white-space: pre-wrap; }
  .body h1,.body h2,.body h3,.body h4 { font:600 15px/1.35 ui-serif,Georgia,serif; margin:14px 0 6px; }
  .body p { margin:0 0 9px; }
  .body ul,.body ol { margin:0 0 9px; padding-left:20px; }
  .body li { margin:2px 0; }
  .body strong { font-weight:650; }
  .body code { background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 4px; font-size:.9em; }
  .body pre { background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:9px 11px; overflow-x:auto; margin:0 0 9px; }
  .body pre code { background:none; border:none; padding:0; }
  .body a { color:var(--accent); }
  .body blockquote { border-left:2px solid var(--line); margin:0 0 9px; padding-left:10px; color:var(--dim); }
  .body hr { border:0; border-top:1px solid var(--line); margin:12px 0; }
  .body .tbl { overflow-x:auto; margin:0 0 9px; }
  .body table { border-collapse:collapse; font-size:.94em; }
  .body th,.body td { border:1px solid var(--line); padding:4px 8px; text-align:left; white-space:nowrap; }
  .body th { font-weight:600; }
  .body > :last-child { margin-bottom:0; }

  .tool {
    border-left: 2px solid var(--line); padding: 3px 0 3px 11px; margin: 7px 0;
    font-size: 13px; color: var(--dim);
  }
  .tool b { color: var(--ink); font-weight: 600; }
  .tool .res { font-size: 12px; opacity: .85; }
  .err { color: var(--bad); }
  footer { flex: none; border-top: 1px solid var(--line); padding: 12px 18px 16px; }
  .composer { max-width: 760px; margin: 0 auto; display: flex; gap: 9px; align-items: flex-end; }
  textarea {
    flex: 1; resize: none; font: inherit; color: var(--ink); background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
    min-height: 46px; max-height: 190px;
  }
  textarea:focus { outline: none; border-color: var(--accent); }
  dialog {
    background: var(--panel); color: var(--ink); border: 1px solid var(--line);
    border-radius: 12px; padding: 20px; max-width: 560px; width: calc(100% - 32px);
  }
  dialog::backdrop { background: rgba(0,0,0,.55); }
  dialog h2 { margin: 0 0 8px; font: 600 16px/1.3 ui-serif, Georgia, serif; }
  dialog p, dialog li { color: var(--dim); font-size: 13px; }
  dialog code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
  dialog textarea { width: 100%; min-height: 84px; margin: 10px 0; font-size: 12.5px; }
  .row { display: flex; gap: 8px; justify-content: flex-end; }
  .hint { color: var(--dim); font-size: 12.5px; max-width: 760px; margin: 8px auto 0; }
  .examples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
  .examples button { font-size: 12.5px; color: var(--dim); }
  @keyframes mise-spin { to { transform: rotate(360deg); } }
  @keyframes mise-pulse { 0%,100% { opacity:.35 } 50% { opacity:1 } }
  .spin-line { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:13px; margin:9px 0 4px; }
  .spin {
    width:12px; height:12px; flex:none; border-radius:50%;
    border:2px solid var(--line); border-top-color:var(--accent);
    animation: mise-spin .7s linear infinite;
  }
  .spin-line .lbl { animation: mise-pulse 1.6s ease-in-out infinite; }
  .tool .res.pending { animation: mise-pulse 1.4s ease-in-out infinite; }

  details.steps { margin: 6px 0 10px; }
  details.steps > summary {
    cursor: pointer; list-style: none; color: var(--dim); font-size: 12.5px;
    padding: 3px 0; user-select: none;
  }
  details.steps > summary::-webkit-details-marker { display: none; }
  details.steps > summary::before { content: '▸ '; color: var(--accent); }
  details.steps[open] > summary::before { content: '▾ '; }
  details.steps > summary:hover { color: var(--ink); }
  body.embedded #setup, body.embedded .hint .cookie-note { display: none; }

#stop { color: var(--warn, #c2410c); }
.tool.muted { opacity: .6; font-style: italic; }

.res .ms { opacity: .45; font-variant-numeric: tabular-nums; margin-left: .4em; }

.msg.queued { opacity: .5; }
.msg.queued .role::after { content: ' · queued'; font-style: italic; }