/* === AGENTIFICADOR — EDITORIAL PAPER DESIGN SYSTEM === */

:root {
  --ink:           #1a1410;
  --ink-soft:      #3d2e22;
  --paper:         #f4ede2;
  --paper-deep:    #ece1d0;
  --paper-card:    #fffdf9;
  --rule:          #d8c9b2;
  --rule-soft:     #e8ddd0;

  --accent:        #c8941e;
  --accent-soft:   #f7eccd;
  --accent-dark:   #9a6f12;
  --accent-glow:   rgba(200, 148, 30, 0.18);

  --terracotta:    #b4451f;
  --terracotta-soft: #f6e4da;
  --theory:        #2f5d50;
  --theory-soft:   #e3ede9;
  --async:         #6b5b8a;
  --async-soft:    #eae5f1;

  --shadow:        rgba(40, 28, 16, 0.12);
  --shadow-sm:     rgba(40, 28, 16, 0.07);
  --shadow-lg:     0 24px 50px -28px rgba(40, 28, 16, 0.22);

  --mono:    'Spline Sans Mono', ui-monospace, monospace;
  --sans:    'Spline Sans', system-ui, sans-serif;
  --serif:   'Fraunces', Georgia, serif;

  --radius-pill: 20px;
  --radius-ui:   8px;
  --radius-card: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  background:
    radial-gradient(ellipse at top left, #faf4ea, transparent 60%),
    radial-gradient(ellipse at bottom right, #efe4d3, transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--ink-soft); text-decoration: none; }
a:hover { color: var(--ink); }

/* === APP SHELL === */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* === SIDEBAR === */

.sidebar {
  width: 224px;
  min-width: 224px;
  background: var(--paper-deep);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--rule);
}

.logo-glyph {
  font-size: 18px;
  color: var(--accent);
}

.logo-text {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sidebar-section {
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.sidebar-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a8a78;
  padding: 0 18px 8px;
}

.sidebar-label.coral { color: var(--accent); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background 120ms ease-out, color 120ms ease-out;
  border-left: 2px solid transparent;
}

.sidebar-link:hover {
  background: rgba(200, 148, 30, 0.08);
  color: var(--ink);
}

.sidebar-link.active {
  color: var(--ink);
  background: rgba(200, 148, 30, 0.12);
  border-left: 2px solid var(--accent);
  font-weight: 600;
}

.sidebar-link .link-glyph {
  color: #b0a090;
  width: 14px;
  text-align: center;
  font-size: 11px;
}

.sidebar-link.active .link-glyph { color: var(--accent); }

.sidebar-footer {
  margin-top: auto;
  padding: 16px 18px;
  border-top: 1px solid var(--rule);
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.user-role-dot { color: var(--accent); font-size: 8px; }

.user-info { flex: 1; min-width: 0; }

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a8a78;
}

.logout-form { margin: 0; }

.logout-btn {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  border-radius: var(--radius-ui);
  width: 100%;
  transition: border-color 120ms, background 120ms;
}

.logout-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

/* === MAIN CONTENT === */

.main-content {
  flex: 1;
  min-width: 0;
  padding: 32px 36px;
  overflow-y: auto;
}

/* === PAGE HEADER === */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a8a78;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb a { color: #9a8a78; }
.breadcrumb a:hover { color: var(--ink); }

.page-actions { display: flex; gap: 8px; }

/* === CARDS === */

.card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 4px 18px -8px var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}

.card-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a8a78;
  font-weight: 600;
}

.card-action {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0a090;
  transition: color 120ms;
}

.card-action:hover { color: var(--accent); }

/* === BUTTONS === */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 38px;
  border-radius: var(--radius-ui);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--rule);
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-primary:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: var(--paper);
}

.btn-secondary {
  background: var(--paper-card);
  color: var(--ink-soft);
  border-color: var(--rule);
}

.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}

.btn-danger {
  background: var(--paper-card);
  color: #9a8a78;
  border-color: var(--rule);
  font-size: 10px;
}

.btn-danger:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}

.btn-full { width: 100%; justify-content: center; height: 44px; font-size: 13px; }

.btn-run {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  height: 44px;
  width: 100%;
  justify-content: center;
  font-size: 12px;
}

.btn-run:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.btn-run:disabled {
  background: var(--rule);
  border-color: var(--rule);
  color: #b0a090;
  cursor: not-allowed;
}

/* === FORMS === */

.form-group {
  margin-bottom: 18px;
}

.form-group--full { grid-column: 1 / -1; }

.form-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8a78;
  margin-bottom: 7px;
  font-weight: 600;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: #c4b49a; font-size: 13px; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b0a090'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.form-input-sm { width: auto; min-width: 200px; }

.form-error {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--terracotta);
  margin-top: 5px;
  letter-spacing: 0.05em;
}

.form-check-row { margin-bottom: 16px; }

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  margin-top: 20px;
}

.form-page { max-width: 800px; }

/* === ALERTS === */

.alert {
  padding: 12px 18px;
  border-radius: var(--radius-ui);
  font-size: 13px;
  margin-bottom: 18px;
  border: 1px solid;
  font-family: var(--sans);
}

.alert-success {
  background: var(--theory-soft);
  border-color: #b0cfc7;
  color: var(--theory);
}

.alert-error {
  background: var(--terracotta-soft);
  border-color: #ddb0a0;
  color: var(--terracotta);
}

/* === PILLS / STATUS === */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a8a78;
  font-weight: 600;
}

.pill-coral {
  border-color: rgba(200, 148, 30, 0.4);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.status-pending  { color: #b0a090; }
.status-running  { color: var(--accent); }
.status-completed { color: var(--theory); }
.status-failed   { color: var(--terracotta); }

/* === DASHBOARD === */

.dashboard-grid { display: flex; flex-direction: column; gap: 18px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stat-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 18px 22px;
  box-shadow: 0 4px 18px -8px var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent);
}

.stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8a78;
  margin-bottom: 10px;
  font-weight: 600;
}

.stat-value {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-value.coral { color: var(--accent); }

.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* === RUN LIST === */

.run-list { display: flex; flex-direction: column; }

.run-row {
  display: grid;
  grid-template-columns: 50px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}

.run-row:last-child { border-bottom: none; }

.run-time {
  font-family: var(--mono);
  font-size: 11px;
  color: #b0a090;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.run-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.run-type {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0a090;
}

.run-action {
  font-family: var(--mono);
  font-size: 11px;
  color: #c4b49a;
  opacity: 0;
  transition: opacity 120ms, color 120ms;
}

.run-row:hover .run-action {
  opacity: 1;
  color: var(--accent);
}

/* === SKILL GRID === */

.section-header {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a8a78;
  margin: 26px 0 14px;
  font-weight: 600;
}

.section-header.coral { color: var(--accent-dark); }

.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.skill-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.skill-card, .skill-tile {
  display: block;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  transition: box-shadow 120ms, border-color 120ms;
  cursor: pointer;
  box-shadow: 0 2px 10px -4px var(--shadow-sm);
}

.skill-card:hover, .skill-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px -6px var(--shadow);
}

.skill-card--shared { border-color: rgba(200, 148, 30, 0.35); }

.skill-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.skill-card-name, .skill-tile-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.skill-card-desc, .skill-tile-desc {
  font-size: 12px;
  color: #9a8a78;
  margin-bottom: 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}

.skill-card-meta, .skill-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: #b0a090;
  letter-spacing: 0.05em;
}

/* === AGENT & SKILL CARD TOP SECTION === */

.agent-card-top,
.skill-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.agent-card-mascot {
  flex-shrink: 0;
  line-height: 0;
}

.skill-card-icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  color: var(--accent-dark);
}

.skill-card-no-icon {
  font-size: 16px;
  color: var(--accent-dark);
  line-height: 1;
}

.agent-card-info,
.skill-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.skill-card-icon-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.skill-card-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent-dark);
  flex-shrink: 0;
}

/* === MASCOT EDITOR (agent form) === */

.mascot-editor {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mascot-preview {
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-card);
  flex-shrink: 0;
}

.mascot-editor-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 80ms, border-color 80ms;
  padding: 0;
}

.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: var(--ink); }

.mascot-options {
  display: flex;
  gap: 5px;
}

.mascot-option {
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  background: var(--paper-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 80ms, background 80ms;
}

.mascot-option:hover { background: var(--paper-deep); }
.mascot-option.active { border-color: var(--ink); background: var(--paper-deep); }

/* === ICON PICKER (skill form) === */

.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.icon-picker-btn,
.icon-picker-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 58px;
  padding: 7px 4px 5px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  background: var(--paper-card);
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color 80ms, background 80ms, color 80ms;
}

.icon-picker-btn:hover,
.icon-picker-none:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.icon-picker-btn.active,
.icon-picker-none.active {
  border-color: var(--accent-dark);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.icon-picker-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-transform: uppercase;
}

/* === SHOW LAYOUT === */

.show-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  align-items: start;
}

.show-main { min-width: 0; }
.show-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* === META LIST === */

.meta-list { display: flex; flex-direction: column; gap: 0; }

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}

.meta-row:last-child { border-bottom: none; }
.meta-key {
  font-family: var(--mono);
  color: #b0a090;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.meta-val { color: var(--ink); font-weight: 500; }

/* === TESTER (Livewire) === */

.tester-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 18px -8px var(--shadow);
}

.tester-header {
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper-deep);
}

.tester-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 600;
}

.tester-body { padding: 22px; }

.tester-input { margin-bottom: 14px; }

.tester-output {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  padding: 18px 22px;
  min-height: 160px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  word-break: break-word;
  margin-top: 16px;
  font-family: var(--sans);
}

.tester-output.is-empty { color: #c4b49a; font-style: italic; }

/* Markdown content styles */
.tester-output.markdown-body > *:first-child { margin-top: 0; }
.tester-output.markdown-body > *:last-child { margin-bottom: 0; }
.tester-output.markdown-body p { margin: 0 0 1em; }
.tester-output.markdown-body h1,
.tester-output.markdown-body h2,
.tester-output.markdown-body h3,
.tester-output.markdown-body h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  margin: 1.4em 0 0.5em;
  line-height: 1.3;
}
.tester-output.markdown-body h1 { font-size: 1.5em; }
.tester-output.markdown-body h2 { font-size: 1.25em; }
.tester-output.markdown-body h3 { font-size: 1.1em; }
.tester-output.markdown-body ul,
.tester-output.markdown-body ol {
  margin: 0 0 1em 1.4em;
  padding: 0;
}
.tester-output.markdown-body li { margin-bottom: 0.3em; }
.tester-output.markdown-body code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--terracotta);
}
.tester-output.markdown-body pre {
  background: var(--ink);
  border-radius: var(--radius-ui);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 1em;
}
.tester-output.markdown-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--paper);
  font-size: 0.85em;
  line-height: 1.6;
}
.tester-output.markdown-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 0 0 1em;
  padding: 0.5em 0 0.5em 1em;
  color: var(--ink-soft);
  font-style: italic;
}
.tester-output.markdown-body strong { font-weight: 700; color: var(--ink); }
.tester-output.markdown-body em { font-style: italic; }
.tester-output.markdown-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.2em 0;
}
.tester-output.markdown-body a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tester-output.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: 13px;
}
.tester-output.markdown-body th,
.tester-output.markdown-body td {
  border: 1px solid var(--rule);
  padding: 7px 12px;
  text-align: left;
}
.tester-output.markdown-body th {
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tester-thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
}

.tester-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b0a090;
}

.tester-running-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-glow 1.8s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); opacity: 0.8; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
}

/* === CHAT INTERFACE === */

.chat-page-layout {
  align-items: stretch;
}

.chat-page-layout .show-main {
  display: flex;
  flex-direction: column;
}

.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 18px -8px var(--shadow);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-deep);
  flex-shrink: 0;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.chat-agent-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  white-space: nowrap;
}

.chat-skills-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chat-skill-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 2px 8px;
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.chat-token-count {
  font-family: var(--mono);
  font-size: 11px;
  color: #b0a090;
  letter-spacing: 0.06em;
}

.chat-budget-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
}

.chat-budget-pill.budget-low {
  color: var(--terracotta);
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}

.btn-ghost-sm {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}

.btn-ghost-sm:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Chat log (scrollable messages area) */
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.chat-log::-webkit-scrollbar { width: 5px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-log::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

/* Empty state */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 40px 20px;
}

.chat-empty-glyph {
  font-size: 32px;
  color: var(--rule);
  line-height: 1;
}

.chat-empty-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.chat-empty-hint {
  font-size: 13px;
  color: #b0a090;
  max-width: 380px;
  line-height: 1.6;
}

.chat-empty-skills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* Message rows */
.chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.chat-bubble-wrap.user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-bubble-wrap.assistant {
  align-self: flex-start;
  align-items: flex-start;
}

/* Bubbles */
.chat-bubble {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}

.chat-bubble.user {
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
  font-family: var(--sans);
  white-space: pre-wrap;
}

.chat-bubble.assistant {
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  font-family: var(--sans);
}

.chat-bubble.error {
  background: var(--terracotta-soft);
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 12px;
}

/* Markdown inside assistant bubble */
.chat-bubble.assistant.markdown-body > *:first-child { margin-top: 0; }
.chat-bubble.assistant.markdown-body > *:last-child { margin-bottom: 0; }
.chat-bubble.assistant.markdown-body p { margin: 0 0 0.8em; }
.chat-bubble.assistant.markdown-body h1,
.chat-bubble.assistant.markdown-body h2,
.chat-bubble.assistant.markdown-body h3,
.chat-bubble.assistant.markdown-body h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  margin: 1.2em 0 0.4em;
  line-height: 1.3;
}
.chat-bubble.assistant.markdown-body h1 { font-size: 1.4em; }
.chat-bubble.assistant.markdown-body h2 { font-size: 1.2em; }
.chat-bubble.assistant.markdown-body h3 { font-size: 1.05em; }
.chat-bubble.assistant.markdown-body ul,
.chat-bubble.assistant.markdown-body ol {
  margin: 0 0 0.8em 1.4em;
  padding: 0;
}
.chat-bubble.assistant.markdown-body li { margin-bottom: 0.25em; }
.chat-bubble.assistant.markdown-body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--terracotta);
}
.chat-bubble.assistant.markdown-body pre {
  background: var(--ink);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0.6em 0;
}
.chat-bubble.assistant.markdown-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--paper);
  font-size: 0.84em;
  line-height: 1.6;
}
.chat-bubble.assistant.markdown-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.5em 0;
  padding: 0.3em 0 0.3em 1em;
  color: var(--ink-soft);
  font-style: italic;
}
.chat-bubble.assistant.markdown-body strong { font-weight: 700; }
.chat-bubble.assistant.markdown-body em { font-style: italic; }
.chat-bubble.assistant.markdown-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1em 0;
}
.chat-bubble.assistant.markdown-body a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-bubble.assistant.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 13px;
}
.chat-bubble.assistant.markdown-body th,
.chat-bubble.assistant.markdown-body td {
  border: 1px solid var(--rule);
  padding: 6px 10px;
  text-align: left;
}
.chat-bubble.assistant.markdown-body th {
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Bubble meta (token count + run link) */
.chat-bubble-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 0 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #b0a090;
}

.chat-run-link {
  color: var(--accent-dark);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.chat-run-link:hover { text-decoration: underline; }

.chat-skills-used {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.chat-skill-used-pill {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid rgba(200, 148, 30, 0.25);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Thinking indicator */
.chat-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
}

/* Input bar */
/* Alpine x-cloak: hide until Alpine initialises */
[x-cloak] { display: none !important; }

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-deep);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Skill force indicator — shown when /command is active */
.skill-force-bar {
  width: 100%;
  order: -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(200, 148, 30, 0.3);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
}

.skill-force-glyph { opacity: 0.7; }

.skill-force-name {
  flex: 1;
  font-weight: 700;
}

.skill-force-clear {
  background: none;
  border: none;
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity 120ms;
}
.skill-force-clear:hover { opacity: 1; }

/* Skill autocomplete dropdown — inline flow so overflow:hidden on .chat-shell doesn't clip it */
.skill-autocomplete-dropdown {
  width: 100%;
  order: -2;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui) var(--radius-ui) 0 0;
  border-bottom: none;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

.skill-autocomplete-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background 80ms;
}
.skill-autocomplete-item:last-child { border-bottom: none; }
.skill-autocomplete-item:hover,
.skill-autocomplete-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.skill-autocomplete-glyph {
  font-size: 9px;
  color: var(--accent);
  flex-shrink: 0;
}

.chat-textarea {
  flex: 1;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 14px;
  resize: none;
  outline: none;
  min-height: 42px;
  max-height: 160px;
  overflow-y: auto;
  transition: border-color 120ms;
}

.chat-textarea:focus { border-color: var(--accent); }
.chat-textarea::placeholder { color: #c4b49a; }
.chat-textarea:disabled { opacity: 0.5; }

.chat-send-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, opacity 120ms;
}

.chat-send-btn:hover:not(:disabled) { background: var(--ink-soft); }
.chat-send-btn:disabled { opacity: 0.35; cursor: default; }

/* === CONVERSATION LIST === */

.convo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.convo-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms, background 120ms;
  cursor: pointer;
}

.convo-card:hover {
  border-color: var(--accent);
  background: var(--paper);
}

.convo-card-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-ui);
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: var(--mono);
  margin-top: 2px;
}

.convo-card-body {
  flex: 1;
  min-width: 0;
}

.convo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.convo-card-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
}

.convo-card-time {
  font-family: var(--mono);
  font-size: 10px;
  color: #b0a090;
  letter-spacing: 0.06em;
}

.convo-card-preview-user {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
  font-weight: 500;
}

.convo-card-preview-agent {
  font-size: 12px;
  color: #9a8878;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
  font-style: italic;
}

.convo-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #b0a090;
}

/* === FILTERS === */

.page-filters {
  margin-bottom: 22px;
}

.filter-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-form .form-input,
.filter-form .form-select { width: auto; }

/* === TABLE === */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8a78;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
  font-weight: 600;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  vertical-align: middle;
}

.data-table tr:hover td { background: rgba(200, 148, 30, 0.04); }
.data-table tr:last-child td { border-bottom: none; }

.table-wrapper {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 4px 18px -8px var(--shadow-sm);
}

/* === EMPTY STATES === */

.empty-state {
  padding: 36px;
  text-align: center;
  font-size: 13px;
  color: #b0a090;
  letter-spacing: 0.03em;
}

.empty-card {
  background: var(--paper-card);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-card);
  padding: 28px;
  text-align: center;
  font-size: 13px;
  color: #b0a090;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* === AUTH === */

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top left, #faf4ea, transparent 60%),
    radial-gradient(ellipse at bottom right, #efe4d3, transparent 55%),
    var(--paper);
}

.auth-container {
  width: 100%;
  max-width: 400px;
  padding: 32px 16px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 4px;
}

.auth-tagline {
  font-family: var(--mono);
  font-size: 11px;
  color: #b0a090;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 30px;
  box-shadow: var(--shadow-lg);
}

/* === UTILITIES === */

.coral { color: var(--accent-dark); }
.fg-2  { color: var(--ink-soft); }
.fg-3  { color: #9a8a78; }
.fg-4  { color: #c4b49a; }

/* === RUNS PAGE === */

.run-detail { display: flex; flex-direction: column; gap: 18px; }

.run-messages { display: flex; flex-direction: column; gap: 10px; }

.message-block {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  padding: 14px 18px;
}

.message-block.user      { border-left: 3px solid var(--rule); }
.message-block.assistant { border-left: 3px solid var(--accent); }
.message-block.tool      { border-left: 3px solid var(--theory); }

.message-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b0a090;
  margin-bottom: 7px;
  font-weight: 600;
}

.message-content {
  font-size: 14px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.75;
}

/* === DOCUMENTS === */

.document-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.document-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 18px 22px;
  transition: border-color 120ms, box-shadow 120ms;
  box-shadow: 0 2px 10px -4px var(--shadow-sm);
}

.document-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px -6px var(--shadow);
}

.document-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.document-desc {
  font-size: 13px;
  color: #9a8a78;
  margin-bottom: 14px;
  line-height: 1.5;
}

.document-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b0a090;
}

.document-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

/* === ADMIN PAGES === */

.admin-banner {
  background: var(--accent-soft);
  border: 1px solid rgba(200, 148, 30, 0.3);
  border-radius: var(--radius-ui);
  padding: 11px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 22px;
  font-weight: 600;
}

/* === AGENT SKILLS SELECTOR === */

.skills-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  padding: 8px;
}

.skill-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-ui);
  cursor: pointer;
  transition: background 120ms;
}

.skill-option:hover { background: var(--accent-soft); }

.skill-option input[type="checkbox"] { accent-color: var(--accent); }

.skill-option-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.skill-option-desc {
  font-size: 12px;
  color: #b0a090;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* === PAGINATION === */

.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 22px 0;
}

.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  font-family: var(--mono);
  font-size: 11px;
  color: #9a8a78;
  background: var(--paper-card);
  transition: background 120ms, color 120ms, border-color 120ms;
}

.pagination a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}

.pagination .active span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* === SCROLLBAR === */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #c4b49a; }