/* mrb_assistant's chat canvas (js/mrb-chat.js; Max 2026-10-23: "bring on big chat ui instead of one small chat box", then
   "it should be one canvas only not split"): one conversation in a centred column, the box's versions as cards in it, the
   message box at the foot; on a phone, the whole screen. The newest version is typed in where it stands (no Edit) */
html.mrb-on{overflow:hidden}
.mrb-bg{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / .45)}
.mrb-dlg{width:min(980px,100%);height:min(820px,calc(100dvh - 32px));display:flex;flex-direction:column;min-height:0;background:var(--bg,var(--surface));color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pop);overflow:hidden;box-sizing:border-box}
.mrb-dlg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mrb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mrb-col{width:min(760px,100%);margin:0 auto;box-sizing:border-box}

/* the head: the box's name, Start again, Save, Close */
.mrb-hd{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.mrb-chb,.mrb-av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,var(--brand),oklch(.55 .15 262))}
.mrb-chb svg,.mrb-av svg{width:16px;height:16px}
.mrb-hd h2{flex:1;min-width:0;margin:0;font-size:18px;line-height:24px;display:flex;align-items:center;gap:4px}
.mrb-new{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink2);font:inherit;font-size:13px;font-weight:500;cursor:pointer;flex:none}
.mrb-new svg{width:15px;height:15px}
.mrb-new:hover:not(:disabled){background:var(--hover)}
.mrb-new:disabled{opacity:.5;cursor:default}
.mrb-save{min-height:40px;min-width:84px;flex:none}
.mrb-x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink2);display:grid;place-items:center;cursor:pointer;flex:none}
.mrb-x:hover{background:var(--hover)}
.mrb-x svg{width:20px;height:20px}

/* the conversation */
.mrb-log{flex:1;min-height:0;overflow-y:auto;padding:20px 20px 8px}
.mrb-log>.mrb-col{display:flex;flex-direction:column;gap:16px}
.mrb-row{display:flex;gap:12px;min-width:0}
.mrb-row.me{justify-content:flex-end}
.mrb-me{max-width:80%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--brand);color:#fff;font-size:15px;line-height:22px;overflow-wrap:anywhere;white-space:pre-wrap}
.mrb-av{width:28px;height:28px;border-radius:8px;margin-top:1px}
.mrb-ab{flex:1;min-width:0;display:grid;gap:10px}
.mrb-p{margin:0;font-size:15px;line-height:23px;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.mrb-row.err .mrb-p{color:var(--bad)}
.mrb-wait{display:flex;align-items:center;gap:8px;color:var(--ink3)}

/* a version of the box, its icons under it (outside it), as in other AI chats */
.mrb-v{display:grid;gap:2px}
.mrb-ver{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px}
.mrb-ver.on{border-color:color-mix(in oklab,var(--brand) 55%,var(--line))}
.mrb-vt{margin:0;font-size:15px;line-height:24px;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.mrb-mt{color:var(--ink3)}
/* the newest is typed in where it stands: the box reads as the card's text */
.mrb-ver.on{cursor:text}
.mrb-ver.on:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 18%,transparent)}
.mrb-ta{display:block;width:100%;min-height:24px;resize:none;overflow:hidden;border:0;padding:0;margin:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;line-height:24px;outline:none;box-sizing:border-box}
.mrb-ta[readonly]{color:var(--ink2)}
.mrb-v .mrb-n{visibility:hidden}
.mrb-v.on:focus-within .mrb-n,.mrb-v .mrb-n.over{visibility:visible}
.mrb-tools{display:flex;align-items:center;gap:2px;min-height:32px}
.mrb-ic{width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink3);display:grid;place-items:center;cursor:pointer}
.mrb-ic svg{width:16px;height:16px}
.mrb-ic:hover{background:var(--hover);color:var(--ink)}
.mrb-n{margin-left:6px;font-size:12.5px;color:var(--ink3)}
.mrb-n.over{color:var(--bad);font-weight:600}
.mrb-sug{display:flex;flex-wrap:wrap;gap:8px;padding-left:40px}
.mrb-sg{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink2);font:inherit;font-size:13.5px;cursor:pointer}
.mrb-sg:hover{background:var(--hover);color:var(--ink)}
.mrb-err{margin:0 auto;width:min(760px,100%);padding:0 20px;box-sizing:border-box;font-size:13px;color:var(--bad)}

/* the message box */
.mrb-chf{padding:10px 20px 16px}
.mrb-chf .mrb-col{display:flex;gap:8px;align-items:flex-end;padding:6px;border:1px solid var(--line2);border-radius:16px;background:var(--surface)}
.mrb-chf .mrb-col:focus-within{border-color:var(--brand)}
.mrb-in{flex:1;min-width:0;min-height:44px;max-height:140px;resize:none;border:0;padding:11px 10px;background:transparent;color:var(--ink);font:inherit;font-size:15px;line-height:22px;outline:none;box-sizing:border-box}
.mrb-in::placeholder{color:var(--ink3)}
.mrb-go{width:44px;height:44px;padding:0;border-radius:12px;flex:none;display:grid;place-items:center}

@media (max-width:760px){
  .mrb-bg{padding:0;place-items:stretch}
  .mrb-dlg{width:100%;height:100dvh;border-radius:0;border:0}
  .mrb-hd{padding:8px 6px 8px 16px;gap:6px}
  .mrb-hd .mrb-chb{display:none}
  .mrb-hd h2{font-size:17px}
  .mrb-new{width:40px;padding:0;justify-content:center}
  .mrb-new span{display:none}
  .mrb-save{min-width:72px}
  .mrb-log{padding:16px 16px 8px}
  .mrb-row{gap:10px}
  .mrb-av{display:none}
  .mrb-me{max-width:88%}
  .mrb-p,.mrb-vt,.mrb-me,.mrb-ta{font-size:16px}
  .mrb-ver{padding:12px 14px}
  .mrb-ic{width:40px;height:40px}
  .mrb-ic svg{width:18px;height:18px}
  .mrb-sug{padding-left:0}
  .mrb-sg{min-height:40px}
  .mrb-chf{padding:8px 12px 12px}
  .mrb-in{font-size:16px}
}