/* The workspace: inbox | conversation | player, and the content of its dialogs.
   The breakpoints live only here; --layout tells app code which one applies (ui.js layout()). */

:root {
  --layout: wide;
  --inbox-width: 340px;
  --player-width: 340px;
  --topbar-height: 48px;
  --thread-width: 820px;
}

/* Frame: the top bar, the service warning when shown, and the columns filling the rest. */

.workspace {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.brand {
  font-size: var(--text-l);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.service-warning {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-note-border);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: var(--text-s);
}

.columns {
  display: grid;
  flex: 1;
  grid-template-columns: var(--inbox-width) minmax(0, 1fr) var(--player-width);
  min-height: 0;
}

/* Inbox */

.inbox {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.inbox-head {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.inbox-filters {
  display: flex;
  gap: var(--space-2);
}

.inbox-filters input {
  flex: 1 1 auto;
  min-width: 0;
}

.inbox-filters select {
  flex: none;
  width: auto;
}

.queues,
.composer-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.queue,
.mode {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-weight: 500;
  cursor: pointer;
}

.queue:hover,
.mode:hover {
  background: var(--color-surface-muted);
}

.queue[aria-pressed="true"],
.mode[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.count {
  min-width: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.queue[aria-pressed="true"] .count {
  background: var(--color-surface);
}

.search-note {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.inbox-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.row {
  display: grid;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  color: var(--color-text);
  text-decoration: none;
}

.row:hover {
  background: var(--color-surface-muted);
}

.row[aria-current="true"] {
  border-left-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.row:focus-visible {
  outline-offset: -2px;
}

.row-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.row-from,
.row-subject,
.row-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-from {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.unanswered .row-from {
  color: var(--color-text);
  font-weight: 600;
}

.unanswered .row-from::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: 1px;
}

.row-project,
.row-age {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.row-subject {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.row-badges {
  display: flex;
  flex: none;
  gap: var(--space-1);
}

.row-preview {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.list-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.list-problem {
  margin: var(--space-3);
}

.more {
  width: 100%;
}

/* Conversation */

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

.conversation-empty {
  margin: auto;
  padding: var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}

.ticket {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.ticket-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ticket-title {
  flex: 1;
  min-width: 0;
}

.subject {
  overflow-wrap: anywhere;
}

/* Focused by code when a conversation opens, so screen readers start at its subject; not a control. */
.subject:focus-visible {
  outline: none;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-s);
  overflow-wrap: anywhere;
}

.ticket-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.back,
.player-toggle,
.close-player {
  display: none;
}

.banners {
  display: grid;
  gap: var(--space-2);
  max-width: var(--thread-width);
  margin: var(--space-3) auto 0;
}

.banners:empty {
  display: none;
}

.banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  background: var(--color-surface);
}

/* A proposal, not a message that left: an outline where sent replies are filled. */
.banner.assistant {
  border: 1px dashed var(--color-accent);
}

.banner.warning {
  border-color: var(--color-note-border);
  background: var(--color-warning-soft);
}

.banner.danger {
  border-color: var(--color-danger-soft);
  background: var(--color-danger-soft);
}

.banner.working {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.banner-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.banner-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.draft-preview p {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
  white-space: pre-wrap;
}

.thread {
  flex: 1;
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
}

.messages {
  display: grid;
  gap: var(--space-3);
  max-width: var(--thread-width);
  margin: 0 auto;
}

.older {
  display: flex;
  margin: 0 auto var(--space-3);
}

.message {
  scroll-margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  background: var(--color-surface);
}

.message.outgoing {
  border-color: var(--color-accent-soft);
  background: var(--color-accent-soft);
}

.message.note {
  border-color: var(--color-note-border);
  background: var(--color-note);
}

.message-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.message-author {
  font-size: var(--text-s);
  overflow-wrap: anywhere;
}

.message-time {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.message-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.attachments li .muted {
  white-space: nowrap;
}

.attachments li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 2px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-s);
  overflow-wrap: anywhere;
}

.delivery-problem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--text-s);
}

.delivery-problem.muted {
  background: var(--color-surface-muted);
}

/* Composer */

.composer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.composer-notice {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  overflow-wrap: anywhere;
}

/* The recipient line takes one line even with long addresses; its tooltip holds the whole. */
.composer-notice:not(.warning) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-notice.warning {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.composer textarea {
  min-height: 88px;
  max-height: 40vh;
  field-sizing: content;
  resize: none;
}

.composer.note-mode textarea {
  border-color: var(--color-note-border);
  background: var(--color-note);
}

.composer-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.composer-status {
  display: flex;
  flex: 1;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.save-state.failed {
  color: var(--color-danger);
}

.shortcut {
  font-size: var(--text-xs);
}

.composer-actions {
  display: flex;
  gap: var(--space-2);
}

/* Player */

.player {
  min-height: 0;
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
}

.player:focus-visible {
  outline-offset: -2px;
}

.player-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.player-empty {
  padding: var(--space-4);
}

.panel-section {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.panel-section h3 {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel-section h4 {
  margin: var(--space-1) 0 0;
  font-size: var(--text-s);
}

.panel-section > .button,
.notice .button {
  justify-self: start;
}

.facts {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-s);
}

.facts div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-2);
}

.facts dt {
  color: var(--color-text-muted);
}

.facts dd {
  overflow-wrap: anywhere;
}

.reported[open] summary {
  margin-bottom: var(--space-2);
}

.player-name {
  font-weight: 600;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.stats div {
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}

.stats dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.stats dd {
  font-size: var(--text-l);
  font-weight: 600;
}

.plain-list {
  display: grid;
  gap: var(--space-2);
}

.plain-list li {
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
}

.plain-list li > .button {
  justify-self: start;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.events {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-s);
}

.events code {
  display: block;
  overflow: hidden;
  color: var(--color-text-muted);
  font: var(--text-xs) / 1.4 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tools,
.tools fieldset,
.grants {
  display: grid;
  gap: var(--space-2);
}

.tools fieldset > .button {
  justify-self: start;
}

.field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.segmented {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.segment input {
  position: absolute;
  opacity: 0;
}

.segment span {
  display: block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-s);
  cursor: pointer;
}

.segment + .segment span {
  border-left: 1px solid var(--color-border-strong);
}

.segment input:checked + span {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.segment input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.presets:empty {
  display: none;
}

.tool-result:empty {
  display: none;
}

/* Dialog content */

.inline-form {
  display: flex;
  gap: var(--space-2);
}

.inline-form input {
  flex: 1;
  min-width: 0;
}

.token {
  font-family: var(--font-mono);
}

.attachment-text {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
  font: var(--text-s) / 1.5 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.erasure-preview {
  display: grid;
  gap: var(--space-2);
}

.history {
  display: grid;
  gap: var(--space-2);
}

.history li {
  display: grid;
  gap: 2px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.history time {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.knowledge-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.knowledge-bar select {
  width: auto;
  max-width: 100%;
}

.knowledge-bar input {
  flex: 1 1 180px;
  width: auto;
}

.knowledge {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 320px;
}

.articles {
  display: grid;
  gap: 2px;
}

.article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  text-align: left;
  cursor: pointer;
}

.article-link:hover,
.article-link[aria-current="true"] {
  background: var(--color-accent-soft);
}

.article-reader {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.article-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.article-actions {
  display: flex;
  gap: var(--space-2);
}

.people-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.accounts {
  display: grid;
}

.account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.account.disabled .account-name strong {
  color: var(--color-text-muted);
}

.account-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.account > p {
  grid-column: 1;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: flex-end;
}

.grants table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
}

.grants th,
.grants td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.grants td {
  text-align: center;
}

/* A player found without a conversation: the panel's card inside the Players dialog. */
.found-player {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.found-player:has(.player-card[hidden]) {
  border: 0;
}

.found-player .panel-section:last-child {
  border-bottom: 0;
}

.scripts {
  display: grid;
}

.script {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.script-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.script-head select {
  width: auto;
}

.servers {
  display: grid;
  gap: var(--space-3);
}

.servers + .button {
  justify-self: start;
}

.server {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
}

.server .facts div {
  grid-template-columns: 140px minmax(0, 1fr);
}

/* Below this width the player panel is a drawer over the conversation. */
@media (max-width: 1100px) {
  :root {
    --layout: drawer;
    --inbox-width: 336px;
  }

  .columns {
    grid-template-columns: var(--inbox-width) minmax(0, 1fr);
  }

  .player {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(400px, 100%);
    box-shadow: var(--shadow-overlay);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.18s ease,
      visibility 0s 0.18s;
  }

  /* Visible at once when opening, so the drawer can take the focus. */
  .workspace[data-player="open"] .player {
    transform: none;
    visibility: visible;
    transition: transform 0.18s ease;
  }

  .backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: var(--color-backdrop);
  }

  .player-toggle,
  .close-player {
    display: inline-flex;
  }
}

/* Phones: one column at a time, the inbox or the conversation. */
@media (max-width: 720px) {
  :root {
    --layout: phone;
  }

  .columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace[data-view="inbox"] .conversation,
  .workspace[data-view="conversation"] .inbox {
    display: none;
  }

  .inbox {
    border-right: 0;
  }

  .topbar {
    gap: var(--space-2);
    padding-left: var(--space-3);
  }

  /* The workspace's pages and the account fit beside the name on a phone's width. */
  .topbar-actions {
    gap: 0;
  }

  .topbar-actions .button {
    padding: 0 var(--space-2);
  }

  .ticket-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .back {
    display: inline-flex;
  }

  .ticket-actions {
    justify-content: flex-end;
  }

  .ticket-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .shortcut {
    display: none;
  }

  .banner {
    flex-direction: column;
  }

  .thread {
    padding: var(--space-3);
  }

  .message {
    padding: var(--space-2) var(--space-3);
  }

  .composer {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .composer textarea {
    min-height: 72px;
    max-height: 30vh;
  }

  .knowledge,
  .account {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player {
    transition: none;
  }
}