/* Dashboard Studio — shared tokens come from /tokens.css (prompts/tokens.css); Studio-only layout here */
:root {
  --left-col: 420px; --process-bar-h: 70px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-5);
  line-height: 24px;
  color: var(--grey-1);
  background: var(--grey-11);
  display: flex;
  flex-direction: column;
}

h1, h2, p, ul, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--blue-pip);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.caption { font-size: var(--text-7); line-height: 16px; color: var(--grey-3); }

/* ---------- process bar ---------- */
.process-bar {
  flex: none;
  min-height: var(--process-bar-h);
  background: var(--navigation-header);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-24);
}
.process-bar__info { min-width: 0; flex: 1; }
.process-bar__title {
  font-size: var(--text-4); line-height: 28px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.env-badge {
  display: inline-block; vertical-align: middle; margin-left: var(--space-8);
  font-size: var(--text-7); line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: var(--white); border: 1px solid currentColor; border-radius: var(--br-2); padding: 0 var(--space-8);
}
.process-bar__byline {
  font-size: var(--text-6); line-height: 20px; color: var(--grey-7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.process-bar__actions { display: flex; gap: var(--space-8); flex: none; }
.process-bar :focus-visible { outline-color: var(--white); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-size: var(--text-6); color: var(--white);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px; padding: var(--space-4) var(--space-12);
  flex: none;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.model-picker { flex: none; }
.process-bar__user { display: flex; align-items: center; gap: var(--space-8); flex: none; font-size: var(--text-6); color: var(--grey-7); }
.process-bar__user .btn--secondary { color: var(--white); }

/* ---------- sign-in and auth gating ---------- */
.signin { display: none; margin: auto; text-align: center; padding: var(--space-32); flex-direction: column; align-items: center; gap: var(--space-16); }
.signin__title { font-size: var(--text-3); line-height: 32px; font-weight: 500; }
body[data-auth="out"] .signin { display: flex; }
body:not([data-auth="in"]) .process-bar,
body:not([data-auth="in"]) .layout,
body:not([data-auth="in"]) dialog { display: none !important; }

/* ---------- session list ---------- */
.sessions { display: flex; flex-direction: column; gap: var(--space-4); max-height: 200px; overflow-y: auto; }
.sessions__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  background: var(--white); border: 1px solid var(--grey-8); border-radius: var(--br-2);
  padding: var(--space-4) var(--space-8);
}
.sessions__main { display: flex; flex-direction: column; min-width: 0; }
.sessions__name { font-size: var(--text-6); line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessions__main .caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessions__switch { color: var(--blue); }
.sessions__switch:hover { background: var(--grey-9); }

.input--bar {
  width: auto; padding: var(--space-4) var(--space-8); font-size: var(--text-7); line-height: 20px;
  color: var(--white); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4);
}
.input--bar option { color: var(--grey-1); }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-size: var(--text-6); font-weight: 500; line-height: 20px;
  border-radius: var(--br-2); border: 1px solid transparent;
  padding: var(--space-8) var(--space-16);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn--sm { padding: var(--space-4) var(--space-12); }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: #00588a; }
.btn--secondary { background: transparent; color: inherit; border-color: currentColor; }
.btn--secondary:hover { background: rgba(255, 255, 255, .12); }
.btn--ghost { background: var(--white); color: var(--blue); border-color: var(--grey-7); }
.btn--ghost:hover { background: var(--grey-9); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- progress ---------- */
.progress { flex: none; height: 3px; background: var(--grey-8); overflow: hidden; }
.progress__bar {
  display: block; height: 100%; width: 40%;
  background: var(--blue-pip);
  animation: slide 1.2s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .progress__bar { animation: none; width: 100%; opacity: .6; }
}

/* ---------- layout ---------- */
.layout { flex: 1; display: flex; min-height: 0; }

.col { display: flex; flex-direction: column; min-height: 0; }
.col--left {
  width: var(--left-col); flex: none;
  border-right: 1px solid var(--grey-7);
  background: var(--white);
}
.col--right { flex: 1; min-width: 0; padding: var(--space-16); gap: var(--space-8); }

.context {
  flex: 0 1 auto; max-height: 50%; overflow-y: auto;
  padding: var(--space-16); border-bottom: 1px solid var(--grey-7);
}
.chat { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 280px; }

.section-title {
  font-size: var(--text-7); line-height: 16px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey-3);
  margin-bottom: var(--space-8);
}
.chat > .section-title { padding: var(--space-16) var(--space-16) 0; }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--grey-7); border-radius: var(--br-2);
  background: var(--grey-11); margin-bottom: var(--space-12);
}
.card__summary {
  font-size: var(--text-6); font-weight: 500; line-height: 20px;
  padding: var(--space-12); cursor: pointer;
}
.card__body { padding: 0 var(--space-12) var(--space-12); }
.card__actions { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-8); }

.label { display: block; font-size: var(--text-7); line-height: 16px; color: var(--grey-3); margin-bottom: var(--space-4); }

.input, .textarea {
  font: inherit; font-size: var(--text-6); line-height: 20px;
  width: 100%; color: var(--grey-1); background: var(--white);
  border: 1px solid var(--grey-7); border-radius: var(--br-2);
  padding: var(--space-8);
}
.textarea { resize: vertical; }

.files { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.files__item {
  font-size: var(--text-6); line-height: 20px; color: var(--grey-2);
  background: var(--white); border: 1px solid var(--grey-8);
  border-radius: var(--br-2); padding: var(--space-4) var(--space-8);
  overflow-wrap: anywhere;
}
.files__empty { font-size: var(--text-7); color: var(--grey-3); }

.dropzone {
  display: flex; align-items: center; justify-content: center; gap: var(--space-8);
  border: 1px dashed var(--grey-7); border-radius: var(--br-2);
  padding: var(--space-12); background: var(--white);
}
.dropzone--over { border-color: var(--blue); background: var(--alert-info); }
.dropzone__text { font-size: var(--text-7); color: var(--grey-3); }

/* ---------- transcript ---------- */
.transcript {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12);
}
.transcript__empty { font-size: var(--text-6); line-height: 20px; color: var(--grey-3); margin: auto 0; text-align: center; }
.msg { max-width: 100%; }
.msg__bubble {
  border-radius: var(--br-2); padding: var(--space-8) var(--space-12);
  font-size: var(--text-6); line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg .msg__bubble + .msg__bubble, .msg .tool + .msg__bubble { margin-top: var(--space-8); }
.msg--user .msg__bubble { background: var(--alert-info); color: var(--grey-1); }
.msg--agent .msg__bubble { background: var(--grey-9); color: var(--grey-1); }
.msg--error .msg__bubble { background: var(--alert-error); color: var(--red); }
.msg__caption { margin-top: var(--space-4); font-size: var(--text-7); color: var(--grey-3); }

.tool {
  margin-top: var(--space-4); margin-left: var(--space-12);
  border-left: 2px solid var(--grey-7); padding-left: var(--space-8);
}
.tool__summary { font-size: var(--text-7); line-height: 16px; color: var(--grey-3); cursor: pointer; }
.tool__summary--error { color: var(--red); }
.tool__detail {
  margin: var(--space-4) 0 0; padding: var(--space-8);
  background: var(--grey-9); border-radius: var(--br-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-7); line-height: 16px; color: var(--grey-2);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto;
}
.tool__items { margin-top: var(--space-4); }
.tool--sub { margin-left: var(--space-8); }

/* ---------- live status line ---------- */
.status-line {
  flex: none; padding: var(--space-4) var(--space-24);
  font-size: var(--text-7); line-height: 16px; color: var(--grey-3);
  background: var(--grey-11); border-bottom: 1px solid var(--grey-7);
}

/* ---------- composer ---------- */
.composer {
  flex: none; border-top: 1px solid var(--grey-7);
  padding: var(--space-12) var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-8);
  background: var(--white);
}
.composer__actions { display: flex; justify-content: flex-end; gap: var(--space-8); }

/* ---------- preview ---------- */
.toolbar { display: flex; align-items: center; gap: var(--space-8); }
.toolbar__title { font-size: var(--text-6); font-weight: 500; margin-right: var(--space-8); }
.preview {
  flex: 1; width: 100%; min-height: 0;
  border: 1px solid var(--grey-7); border-radius: var(--br-2);
  background: var(--white);
}

/* ---------- dialogs ---------- */
.dialog {
  border: none; border-radius: var(--br-3);
  padding: var(--space-24); width: min(480px, 92vw);
  color: var(--grey-1); box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}
.dialog::backdrop { background: rgba(0, 0, 0, .4); }
.dialog__title { font-size: var(--text-4); line-height: 28px; font-weight: 500; margin-bottom: var(--space-16); }
.dialog__hint { margin: var(--space-4) 0 var(--space-12); }
.dialog .label + .label, .dialog__hint + .label { margin-top: var(--space-12); }
.dialog--publish { width: min(560px, 92vw); }
.dialog--publish .input + .label { margin-top: var(--space-12); }
.publish-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--grey-7); border-radius: var(--br-card); background: var(--white); }
.publish-thumb__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-12); margin: var(--space-8) 0 var(--space-12); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-24); }
.dialog .btn--secondary { color: var(--grey-2); }
.dialog .btn--secondary:hover { background: var(--grey-8); }

.fieldset { border: none; padding: 0; margin-top: var(--space-16); }
.radio {
  display: flex; gap: var(--space-8); align-items: flex-start;
  font-size: var(--text-6); line-height: 20px; padding: var(--space-8) 0; cursor: pointer;
}
.radio .caption { display: block; }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; bottom: var(--space-24); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--space-8); z-index: 10;
}
.toast {
  font-size: var(--text-6); line-height: 20px;
  padding: var(--space-12) var(--space-16); border-radius: var(--br-2);
  background: var(--alert-info); color: var(--grey-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); max-width: 640px;
}
.toast--error { background: var(--alert-error); color: var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .process-bar { flex-wrap: wrap; padding: var(--space-12) var(--space-16); }
  .process-bar__info { flex: 1 1 auto; }
  .process-bar__actions { flex: 1 1 100%; justify-content: flex-end; }
}

@media (max-width: 960px) {
  .layout { flex-direction: column; }
  .col--left { width: 100%; border-right: none; border-bottom: 1px solid var(--grey-7); }
  .chat { min-height: 420px; }
  .col--right { min-height: 520px; }
}