/* Multi-conversation chat panel styles for the Agent Bridge dashboard. */
#chat-panel {
  max-width: 1600px;
  margin: 20px auto;
  padding: 0 20px;
}

#chat-panel h2 {
  color: var(--accent);
  font-size: 15px;
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  min-height: 460px;
  max-height: 70vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--border);
}

#chat-new,
#chat-suggest,
#chat-send {
  background: var(--accent-dim);
  color: var(--text);
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#chat-new:hover,
#chat-suggest:hover,
#chat-send:hover {
  background: var(--accent);
}

#chat-conversations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.chat-conversation {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border-radius: 6px;
}

.chat-conversation.active {
  background: var(--panel2);
  border-left: 2px solid var(--accent);
}

.chat-conversation-name,
.chat-delete {
  background: transparent;
  color: var(--text);
  border: 0;
  font: inherit;
  cursor: pointer;
}

.chat-conversation-name {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-delete {
  color: var(--dim);
  padding: 6px;
  font-size: 11px;
}

.chat-delete:hover {
  color: var(--err);
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chat-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--dim);
  font-size: 12px;
}

.chat-controls {
  flex-wrap: wrap;
}

#chat-target-status {
  flex: 1 1 260px;
  overflow-wrap: anywhere;
}

.chat-options {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--dim);
  font-size: 12px;
  flex-wrap: wrap;
}

.chat-options label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-options label.danger {
  color: var(--err);
}

#chat-opt-maxturns {
  width: 72px;
  min-width: 0;
  padding: 5px 7px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

#chat-target,
#chat-input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

#chat-target {
  padding: 5px 8px;
}

#chat-messages {
  flex: 1;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
}

.chat-empty {
  padding: 40px 12px;
  color: var(--dim);
  text-align: center;
}

.chat-message {
  max-width: 88%;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.chat-message.user {
  margin-left: auto;
  border-color: var(--accent-dim);
}

.chat-message.error {
  border-color: var(--err);
}

.chat-role {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-message.user .chat-role {
  color: var(--dim);
}

.chat-content {
  white-space: pre-wrap;
}

.chat-code,
.chat-step pre {
  margin: 6px 0;
  padding: 8px 10px;
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.chat-steps {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.chat-steps summary {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.chat-step pre {
  max-height: 180px;
  overflow-y: auto;
}

.chat-step-label {
  margin-top: 6px;
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-step.command .chat-step-label { color: var(--accent); }

.chat-note {
  margin-top: 6px;
  color: var(--dim);
  font-size: 11px;
}

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

#chat-input {
  flex: 1;
  min-width: 0;
  resize: vertical;
  padding: 9px 10px;
  line-height: 1.45;
}

#chat-input:focus,
#chat-target:focus {
  outline: 1px solid var(--accent-dim);
}

#chat-send:disabled {
  opacity: 0.5;
  cursor: default;
}

#chat-suggest:disabled {
  opacity: 0.5;
  cursor: default;
}

.chat-status {
  min-height: 20px;
  padding: 3px 2px;
  color: var(--dim);
  font-size: 12px;
}

#text-size-toggle {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  font: inherit;
  cursor: pointer;
}

#text-size-toggle[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--accent);
}

.large-text {
  font-size: 21px;
}

.large-text body,
.large-text #chat-panel,
.large-text #tasks-panel,
.large-text #status-report,
.large-text .card {
  font-size: 21px;
}

.large-text header h1,
.large-text #status-text,
.large-text #chat-panel h2,
.large-text #chat-panel button,
.large-text #chat-panel input,
.large-text #chat-panel select,
.large-text #chat-panel textarea,
.large-text #tasks-panel button,
.large-text #tasks-panel input,
.large-text #tasks-panel select,
.large-text #tasks-panel label,
.large-text #status-report button,
.large-text #status-report h2,
.large-text #status-report div,
.large-text .chat-controls,
.large-text .chat-options,
.large-text .chat-status,
.large-text .chat-role,
.large-text .hint,
.large-text .card,
.large-text .card pre {
  font-size: inherit;
}

.large-text header {
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .chat-layout {
    grid-template-columns: minmax(105px, 32%) minmax(0, 1fr);
    min-height: 400px;
    max-height: 75vh;
  }

  .chat-sidebar {
    padding: 8px;
  }

  .chat-message {
    max-width: 96%;
  }

  .large-text .chat-layout {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .large-text .chat-sidebar {
    max-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .large-text .chat-compose {
    flex-wrap: wrap;
  }

  .large-text #chat-input {
    flex-basis: 100%;
  }
}

/* Orchestrator fix 2026-10-04 (Josh: "my send button disappears after I send a few chats, no scroll bar").
   The grid row had no height limit, so the message list grew with every reply and pushed the composer below the
   screen. The chat is now a fixed-height window: only the message list scrolls (with a visible scrollbar) and the
   options, composer and Send button stay pinned. */
.chat-layout {
  height: min(78vh, 900px);
  min-height: 420px;
  max-height: none;
  grid-template-rows: minmax(0, 1fr);
}

.chat-sidebar {
  min-height: 0;
  overflow-y: auto;
}

.chat-main {
  min-height: 0;
  overflow: hidden;
}

.chat-controls,
.chat-options,
.chat-compose,
.chat-status {
  flex: 0 0 auto;
}

#chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}

#chat-messages::-webkit-scrollbar {
  width: 10px;
}

#chat-messages::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border-radius: 6px;
}

@media (max-width: 700px) {
  .chat-layout,
  .large-text .chat-layout {
    height: 82vh;
    max-height: none;
  }

  .large-text .chat-layout {
    grid-template-rows: auto minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------------------------------------
   The chat box copied from Server Farm Swarm (formerly Agent Bridge v2), Josh 2026-10-08: a card with the
   destination, model and availability on top, bubbles that say who answered and how long it took, and the
   voice bar docked above the composer. Scoped to data-chat-look="v2" so the older rules above keep the ids.
   --------------------------------------------------------------------------------------------------------- */
#chat-panel[data-chat-look="v2"] { max-width: 1480px; }
#chat-panel[data-chat-look="v2"] .chat-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: 0 0 12px;
}
#chat-panel[data-chat-look="v2"] .chat-head h2 {
  margin: 0; color: var(--bridge-text, var(--text)); font-size: 20px; font-weight: 800;
}
#chat-panel[data-chat-look="v2"] .chat-blurb { margin: 4px 0 0; color: var(--bridge-muted, var(--dim)); font-size: 12px; }
#chat-panel[data-chat-look="v2"] .chat-status {
  min-height: 0; padding: 6px 10px; border: 1px solid var(--bridge-border, var(--border)); border-radius: 999px;
  color: var(--bridge-muted, var(--dim)); font-size: 12px;
}
#chat-panel[data-chat-look="v2"] .chat-status:empty { display: none; }
#chat-panel[data-chat-look="v2"] .chat-layout {
  grid-template-columns: 12rem minmax(0, 1fr); gap: 16px; height: min(82vh, 980px);
  background: transparent; border: 0; border-radius: 0; overflow: visible;
}
#chat-panel[data-chat-look="v2"] .chat-sidebar {
  padding: 12px; border: 1px solid var(--bridge-border, var(--border)); border-radius: 12px;
  background: var(--bridge-surface, var(--panel));
}
#chat-panel[data-chat-look="v2"] #chat-new {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  background: var(--bridge-blue, var(--accent)); color: #07111f; font-weight: 700;
}
#chat-panel[data-chat-look="v2"] .chat-conversation { padding: 2px; border-radius: 8px; }
#chat-panel[data-chat-look="v2"] .chat-conversation:hover { background: rgba(255, 255, 255, 0.05); }
#chat-panel[data-chat-look="v2"] .chat-conversation.active {
  border-left: 0; background: color-mix(in srgb, var(--bridge-blue, var(--accent)) 15%, transparent);
}
#chat-panel[data-chat-look="v2"] .chat-conversation.active .chat-conversation-name { color: var(--bridge-blue, var(--accent)); }
#chat-panel[data-chat-look="v2"] .chat-conversation-name { font-size: 13px; }
#chat-panel[data-chat-look="v2"] .chat-main { gap: 12px; overflow: visible; }
#chat-panel[data-chat-look="v2"] .chat-card {
  flex: 0 0 auto; padding: 12px; border: 1px solid var(--bridge-border, var(--border)); border-radius: 12px;
  background: var(--bridge-surface, var(--panel));
}
#chat-panel[data-chat-look="v2"] .chat-controls {
  display: grid; grid-template-columns: 12rem minmax(10rem, 1fr) minmax(12rem, 1.4fr); gap: 8px;
  align-items: end; padding: 0; border: 0;
}
#chat-panel[data-chat-look="v2"] .chat-field {
  display: grid; gap: 4px; color: var(--bridge-muted, var(--dim));
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
#chat-panel[data-chat-look="v2"] .chat-field select {
  width: 100%; padding: 8px; border: 1px solid var(--bridge-border, var(--border)); border-radius: 6px;
  background: var(--bridge-bg, var(--bg)); color: var(--bridge-text, var(--text)); font: inherit; font-size: 14px;
  letter-spacing: normal; text-transform: none;
}
#chat-panel[data-chat-look="v2"] .chat-field select:disabled { opacity: 0.5; }
#chat-panel[data-chat-look="v2"] .chat-availability {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border: 1px solid var(--bridge-border, var(--border)); border-radius: 6px;
  background: color-mix(in srgb, var(--bridge-bg, var(--bg)) 60%, transparent);
  color: var(--bridge-muted, var(--dim)); font-size: 11px;
}
#chat-panel[data-chat-look="v2"] #chat-target-status {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#chat-panel[data-chat-look="v2"] .chat-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bridge-muted, var(--dim));
}
#chat-panel[data-chat-look="v2"] .chat-dot[data-usable="ok"] { background: var(--bridge-green, var(--ok)); }
#chat-panel[data-chat-look="v2"] .chat-dot[data-usable="blocked"] { background: var(--bridge-red, var(--err)); }
#chat-panel[data-chat-look="v2"] .chat-options {
  margin-top: 10px; padding: 10px 0 0; gap: 12px; border: 0;
  border-top: 1px solid var(--bridge-border, var(--border)); color: var(--bridge-muted, var(--dim));
}
#chat-panel[data-chat-look="v2"] .chat-options[hidden],
#chat-panel[data-chat-look="v2"] .chat-hint[hidden] { display: none; }
#chat-panel[data-chat-look="v2"] .chat-hint {
  margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--bridge-border, var(--border));
  color: var(--bridge-muted, var(--dim)); font-size: 12px;
}
#chat-panel[data-chat-look="v2"] #chat-messages {
  flex: 1 1 auto; min-height: 0; padding: 16px; border: 1px solid var(--bridge-border, var(--border));
  border-radius: 12px; background: var(--bridge-surface, var(--panel)); overflow-y: scroll; scrollbar-gutter: stable;
}
#chat-panel[data-chat-look="v2"] .chat-empty { padding: 56px 12px; }
#chat-panel[data-chat-look="v2"] .chat-message {
  max-width: 84%; margin: 0 0 16px; padding: 10px 14px; border: 0; border-radius: 12px;
  background: var(--bridge-raised, var(--panel2)); color: var(--bridge-text, var(--text)); font-size: 14px;
}
#chat-panel[data-chat-look="v2"] .chat-message.user {
  margin-left: auto; background: var(--bridge-blue, var(--accent)); color: #07111f;
}
#chat-panel[data-chat-look="v2"] .chat-message.error {
  border: 1px solid #991b1b; background: rgba(69, 10, 10, 0.3); color: #fecaca;
}
#chat-panel[data-chat-look="v2"] .chat-role { display: none; }
#chat-panel[data-chat-look="v2"] .chat-meta { margin-top: 8px; font-size: 10px; opacity: 0.6; }
#chat-panel[data-chat-look="v2"] .chat-note { color: inherit; opacity: 0.7; }
#chat-panel[data-chat-look="v2"] .chat-dock { display: grid; gap: 8px; }
#chat-panel[data-chat-look="v2"] .chat-compose { padding: 0; border: 0; }
#chat-panel[data-chat-look="v2"] #chat-input {
  min-height: 56px; padding: 10px 14px; border-radius: 10px; font-size: 14px;
}
#chat-panel[data-chat-look="v2"] #chat-send,
#chat-panel[data-chat-look="v2"] #chat-suggest { height: 48px; padding: 0 16px; border-radius: 10px; }
#chat-panel[data-chat-look="v2"] #chat-send { background: var(--bridge-blue, var(--accent)); color: #07111f; }
#chat-panel[data-chat-look="v2"] #chat-suggest {
  background: transparent; border: 1px solid var(--bridge-border, var(--border)); color: var(--bridge-text, var(--text));
  font-weight: 500;
}
@media (max-width: 900px) {
  #chat-panel[data-chat-look="v2"] .chat-controls { grid-template-columns: minmax(0, 1fr); }
  #chat-panel[data-chat-look="v2"] .chat-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 86vh; }
  #chat-panel[data-chat-look="v2"] .chat-sidebar { max-height: 150px; }
}