:root{
  --bg:#fff;
  --fg:#111;
  --muted:#666;
  --border:#ddd;
  --panel:#fafafa;
  --btn:#f5f5f5;
  --btn-hover:#eaeaea;
  --btn-primary:#111;
  --btn-primary-fg:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:var(--bg);
}
.split{height:100vh;display:flex}
.pane{flex:1;min-width:0;display:flex;flex-direction:column}
.pane:first-child{border-right:1px solid var(--border)}
.pane__header{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:600;
  background:var(--panel);
}
.pane__body{flex:1;overflow:auto;padding:12px 14px}
.pane__footer{
  padding:12px 14px;
  border-top:1px solid var(--border);
  display:flex;
  gap:8px;
  align-items:center;
}
.input{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  outline:none;
}
.textarea{
  width:100%;
  height:100%;
  min-height:360px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  line-height:1.4;
  resize:none;
}
.btn{
  padding:10px 14px;
  border:1px solid var(--border);
  background:var(--btn);
  border-radius:10px;
  cursor:pointer;
}
.btn:hover{background:var(--btn-hover)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn--primary{
  background:var(--btn-primary);
  color:var(--btn-primary-fg);
  border-color:var(--btn-primary);
  font-weight:600;
}
.btn--primary:hover{filter:brightness(1.1)}
.status{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.msg{margin-bottom:12px}
.msg__role{font-size:11px;color:var(--muted);margin-bottom:3px;letter-spacing:.02em}
.msg__content{white-space:pre-wrap}


/* --- Modal (API key) --- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50}
.modal[aria-hidden="false"]{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal__dialog{
  position:relative;
  width:min(520px, calc(100vw - 28px));
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.modal__title{font-weight:700}
.modal__hint{color:var(--muted);font-size:12px;line-height:1.4}
.modal__hint code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.modal__row{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}
.modal__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}