/* Model-testing page (model-testing.html).
   The conversation reuses the homepage console from css/styles.css
   (.console, .msg-*, .tool-call, .tool-args, .tool-result, .tools); this
   file only adds what the live agent needs on top of it. */

.mt-page [hidden] { display: none !important; }
.mt-section { padding-top: 136px; }

/* ---------- Console additions ---------- */

.mt-console .console-head .btn { height: 30px; padding: 0 12px; font-size: var(--text-caption); }
.mt-console .console-meta { margin-left: auto; }
.mt-console .console-meta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-slate-border);
  vertical-align: 1px;
}
.mt-console .console-meta[data-state="connected"] { color: var(--color-ivory-text); }
.mt-console .console-meta[data-state="connected"]::before { background: var(--color-mint); }
.mt-console .console-meta[data-state="not_connected"]::before,
.mt-console .console-meta[data-state="error"]::before { background: var(--color-amber); }

/* The title dot only pings once the agent has answered. */
.mt-dot { background: var(--color-slate-border); }
.mt-dot::after { display: none; }
.mt-console[data-state="connected"] .mt-dot { background: var(--color-mint); }
.mt-console[data-state="connected"] .mt-dot::after { display: block; }
.mt-console[data-state="not_connected"] .mt-dot,
.mt-console[data-state="error"] .mt-dot { background: var(--color-amber); }

.mt-examples { align-items: center; }
.mt-examples-label {
  flex: none;
  margin-right: 4px;
  padding-left: 6px;
  color: var(--color-slate-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mt-examples .mt-suggestion[aria-pressed="true"] { background: var(--color-obsidian-button); color: var(--color-ivory-text); }
/* Short while empty so the question box is in view; full height once in use. */
.mt-log { position: relative; height: 260px; }
.mt-console.has-exchanges .mt-log { height: 560px; }
.mt-log:focus-visible { outline-offset: -2px; }
.mt-empty { max-width: 440px; margin: auto; color: var(--color-ash-text); font-size: var(--text-body-sm); text-align: center; }
.mt-empty::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--spacing-16);
  border-radius: 50%;
  background: url("../assets/logo.svg") center / 24px no-repeat, var(--color-graphite-card);
}
.mt-empty-title { margin: 0 0 6px; color: var(--color-ivory-text); font-size: 15px; font-weight: 480; }
.mt-empty p:last-child { margin: 0; }

.mt-exchange { display: flex; flex-direction: column; gap: 14px; }
.mt-exchange + .mt-exchange { padding-top: 14px; border-top: 1px solid var(--color-line); }
.mt-q { white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-a { display: flex; flex-direction: column; gap: 10px; }

/* Waiting row: real elapsed time only, no invented steps. */
.mt-waiting { display: flex; align-items: center; gap: 10px; }
.mt-waiting::before { margin: 0; }
.mt-dots { display: inline-flex; gap: 5px; }
.mt-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ash-text); animation: mt-bob 1.2s ease-in-out infinite; }
.mt-dots i:nth-child(2) { animation-delay: 0.2s; }
.mt-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes mt-bob { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.mt-calls-label {
  margin: 0;
  color: var(--color-slate-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Tool calls: the demo's tool card, expandable ---------- */

.mt-tool > summary { cursor: pointer; list-style: none; }
.mt-tool > summary::-webkit-details-marker { display: none; }
.mt-tool:not([open]) > summary { border-bottom-color: transparent; }
.mt-tool > summary::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-right: 1.5px solid var(--color-slate-border);
  border-bottom: 1.5px solid var(--color-slate-border);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}
.mt-tool[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.mt-tool-name { overflow-wrap: anywhere; }
.mt-status { height: 20px; padding: 0 8px; font-family: var(--font-body); font-size: 11px; }
.mt-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-slate-border); }
.mt-status[data-status="success"]::before { background: var(--color-mint); }
.mt-status[data-status="error"]::before,
.mt-status[data-status="no_data"]::before { background: var(--color-amber); }
.mt-icon { position: relative; width: 14px; height: 14px; flex: none; border-radius: 50%; }
.mt-icon-error { background: var(--color-amber); }
.mt-icon-error::after { content: "!"; position: absolute; inset: 0; color: #171721; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; }
.mt-icon-cancelled,
.mt-icon-unknown { border: 1.5px solid var(--color-slate-border); }

.mt-tool .tool-args { border-bottom: 1px solid var(--color-line); }
.mt-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 4px 0 8px; font-size: 12.5px; }
.mt-kv dt { color: var(--color-slate-border); }
.mt-kv dd { margin: 0; color: var(--color-ivory-text); overflow-wrap: anywhere; }
.mt-data { overflow-x: auto; }
.mt-data th,
.mt-data td { padding-left: 14px; white-space: nowrap; }
.mt-data th:first-child,
.mt-data td:first-child { padding-left: 0; }
.mt-data .bar { max-width: 64px; }
.mt-unknown { color: var(--color-slate-border); font-style: italic; }
.mt-tool-message { margin: 6px 0; color: var(--color-ivory-text); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-raw { border-top: 1px solid var(--color-line); }
.mt-raw > summary { padding: 8px 14px; color: var(--color-slate-border); font-family: var(--font-mono); font-size: 11.5px; cursor: pointer; }
.mt-raw .tool-args { max-height: 280px; overflow: auto; border-bottom: 0; background: #13131b; }

/* ---------- Agent answer (safe Markdown output) ---------- */

.mt-answer { position: relative; max-width: 100%; padding-left: 26px; overflow-wrap: anywhere; }
.mt-answer::before { position: absolute; left: 0; top: 4px; margin: 0; }
.mt-answer > :first-child { margin-top: 0; }
.mt-answer > :last-child { margin-bottom: 0; }
.mt-answer p { margin: 0 0 10px; }
.mt-answer h3,
.mt-answer h4,
.mt-answer h5,
.mt-answer h6 { margin: 16px 0 6px; font-size: 16px; font-weight: 480; }
.mt-answer ul,
.mt-answer ol { margin: 0 0 10px; padding-left: 20px; }
.mt-answer li { margin: 3px 0; }
.mt-answer li::marker { color: var(--color-slate-border); }
.mt-answer strong { color: var(--color-ivory-text); font-weight: 560; }
.mt-answer a { color: var(--color-cobalt-light); text-decoration: underline; text-underline-offset: 3px; }
.mt-answer code { padding: 1px 6px; border-radius: var(--radius-default); background: var(--color-obsidian-button); color: var(--color-ivory-text); font-size: 0.86em; }
.mt-answer pre { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--color-graphite-card); overflow-x: auto; }
.mt-answer pre code { padding: 0; background: none; font-size: 12.5px; }
.mt-answer blockquote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 2px solid var(--color-cobalt); }
.mt-answer hr { margin: 14px 0; border: 0; border-top: 1px solid var(--color-line); }
.md-table { margin: 0 0 10px; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-graphite-card); }
.md-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.md-table th { padding: 7px 12px; color: var(--color-slate-border); font-size: 11px; font-weight: 480; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.md-table td { padding: 7px 12px; border-top: 1px solid var(--color-line); color: var(--color-ash-text); }

.mt-notices { display: grid; gap: 6px; }
.mt-notice {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(229, 181, 103, 0.32);
  border-radius: var(--radius-lg);
  background: rgba(229, 181, 103, 0.08);
  color: var(--color-ivory-text);
  font-size: 13px;
}
.mt-notice.is-info { border-color: var(--color-line-strong); background: var(--color-graphite-card); color: var(--color-ash-text); }
.mt-run { margin: 0; color: var(--color-slate-border); font-family: var(--font-mono); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }

/* ---------- Failures ---------- */

.mt-error {
  padding: 12px 14px;
  border: 1px solid rgba(229, 181, 103, 0.35);
  border-radius: var(--radius-lg);
  background: rgba(229, 181, 103, 0.07);
  animation: pop 0.4s var(--ease) both;
}
.mt-error[data-kind="not_connected"] { border-color: var(--color-line-strong); background: var(--color-graphite-card); }
.mt-error h3 { margin: 0 0 4px; font-family: var(--font-body); font-stretch: 100%; font-size: 14px; font-weight: 560; }
.mt-error p { margin: 0; color: var(--color-ash-text); font-size: 13.5px; }
.mt-error .mt-run { margin-top: 8px; }

/* ---------- Question box (inside the console) ---------- */

.mt-composer { margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--color-line); }
.mt-label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-slate-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mt-composer textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  max-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-card);
  background: var(--color-onyx-canvas);
  color: var(--color-ivory-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
}
.mt-composer textarea::placeholder { color: var(--color-slate-border); }
.mt-composer textarea:focus { border-color: var(--color-cobalt-light); outline: none; }
.mt-composer textarea:focus-visible { outline: 2px solid var(--color-cobalt-light); outline-offset: 2px; }
.mt-composer textarea[aria-invalid="true"] { border-color: var(--color-amber); }
.mt-composer-row { display: flex; align-items: center; gap: var(--spacing-12); margin-top: 10px; }
.mt-hint { flex: 1; margin: 0; color: var(--color-slate-border); font-size: var(--text-caption); }
.mt-count { color: var(--color-slate-border); font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mt-count.is-over { color: var(--color-amber); }
.mt-composer .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.mt-field-error { margin: 8px 0 0; color: var(--color-amber); font-size: 13px; }

/* ---------- Login and access (inside the console) ---------- */

.mt-account { padding: 16px 20px 18px; border-top: 1px solid var(--color-line); }
.mt-account[data-state="allowed"] { display: flex; align-items: center; gap: var(--spacing-12); padding: 0 20px 12px; border-top: 0; }
.mt-account h3 { margin: 0 0 4px; color: var(--color-ivory-text); font-family: var(--font-body); font-stretch: 100%; font-size: 15px; font-weight: 560; }
.mt-account-text { margin: 0; color: var(--color-ash-text); font-size: 13.5px; }
.mt-account-text a { color: var(--color-cobalt-light); overflow-wrap: anywhere; }
.mt-account-line { flex: 1; margin: 0; color: var(--color-slate-border); font-size: var(--text-caption); overflow-wrap: anywhere; }
.mt-account-line strong { color: var(--color-ash-text); font-weight: 500; }
.mt-login-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-12); margin-top: 14px; }
.mt-login-fields label { display: grid; gap: 6px; }
.mt-login-fields span {
  color: var(--color-slate-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mt-login-fields input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-onyx-canvas);
  color: var(--color-ivory-text);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s;
}
.mt-login-fields input:focus { border-color: var(--color-cobalt-light); outline: none; }
.mt-login-fields input:focus-visible { outline: 2px solid var(--color-cobalt-light); outline-offset: 2px; }
.mt-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.mt-account-feedback { margin: 10px 0 0; color: var(--color-ash-text); font-size: 13px; }
.mt-account-feedback[data-tone="error"] { color: var(--color-amber); }
.mt-link { padding: 0; border: 0; background: none; color: var(--color-cobalt-light); font: inherit; font-size: 13px; cursor: pointer; }
.mt-link:hover { text-decoration: underline; }
.mt-link:focus-visible { border-radius: 2px; outline: 2px solid var(--color-cobalt-light); outline-offset: 2px; }
.mt-account button:disabled, .mt-suggestion:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Side cards ---------- */

.mt-card-title { color: var(--color-ivory-text); font-size: var(--text-body-sm); font-weight: 480; }
.mt-limits { gap: 8px; margin-top: 0; font-size: var(--text-body-sm); }
.install .mt-limits code { font-size: 0.86em; }
.mt-unsupported li::before { top: 11px; width: 10px; height: 0; border-left: 0; transform: none; border-bottom-color: var(--color-slate-border); }

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .mt-section { padding-top: 104px; }
  .mt-console.has-exchanges .mt-log { height: 520px; }
  .mt-tool > summary .mt-tool-name { flex: 1 1 calc(100% - 30px); }
  .mt-tool > summary .t-meta { flex-basis: auto; margin-left: auto; white-space: nowrap; }
  .mt-composer { padding: 12px 16px 14px; }
  .mt-composer-row { flex-wrap: wrap; gap: 8px 12px; }
  .mt-hint { flex-basis: 100%; }
  .mt-composer-row .btn { margin-left: auto; }
  .mt-account { padding: 14px 16px 16px; }
  .mt-account[data-state="allowed"] { padding: 0 16px 12px; }
  .mt-login-fields { grid-template-columns: minmax(0, 1fr); }
  .mt-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mt-kv dd { margin-bottom: 6px; }
  .console-foot #mt-endpoint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-dots i { animation: none; opacity: 0.7; }
}