/* Conversations layout. Shared controls and values: ui.css / tokens.css. */
body {
  min-height: 100dvh;
}
#desk {
  min-width: 0;
}
#desk aside {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  overflow: auto;
}
#desk aside > label {
  display: block;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
#conversation-list-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}
#desk aside > input,
#desk aside > select {
  display: block;
  width: 100%;
}
#search-help {
  display: block;
  font-size: var(--text-xs);
  margin: var(--space-1) 0 var(--space-3);
}
#health,
#list-state {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: var(--space-2) 0;
}
#conversations,
#users {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}
#conversations button {
  width: 100%;
  text-align: left;
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}
#conversations .badge {
  display: table;
  margin-top: var(--space-2);
}
#conversations small {
  display: block;
  margin-top: var(--space-1);
  font-weight: 400;
}
#conversations [aria-current='true'] {
  background: var(--color-selected);
  border-color: var(--color-accent);
  box-shadow: inset 3px 0 var(--color-accent);
}
#conversations [aria-current='page'] {
  background: var(--color-selected);
  border-color: var(--color-accent);
  box-shadow: inset 3px 0 var(--color-accent);
}
#conversation {
  min-width: 0;
  min-height: 0;
  padding: var(--space-4);
  overflow: hidden;
  background: var(--color-surface);
}
#thread {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: 64rem;
  margin-inline: auto;
}
#person {
  overflow-wrap: anywhere;
}
#context {
  font-size: var(--text-xs);
  color: var(--color-muted);
  overflow-wrap: anywhere;
  margin-bottom: var(--space-2);
}
#assignment {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
#older {
  margin-top: var(--space-3);
  align-self: flex-start;
}
#messages {
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
  list-style: none;
  padding: var(--space-4) 0;
  margin: 0;
  flex: 1;
}
#messages li {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--space-3);
  background: var(--color-hover);
  margin: 0 var(--space-5) var(--space-3) 0;
  border-radius: var(--radius-panel);
}
#messages li.operator {
  margin: 0 0 var(--space-3) var(--space-5);
  background: var(--color-selected);
}
#messages small {
  display: block;
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
#reply {
  flex: none;
  background: var(--color-surface);
  margin-top: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
#reply textarea {
  display: block;
  width: 100%;
  margin: var(--space-2) 0;
}
#admin,
#availability {
  max-width: 64rem;
  padding: var(--space-4);
  margin-inline: auto;
}
#admin-close {
  margin-bottom: var(--space-4);
}
#admin form,
#availability form {
  margin: var(--space-4) 0;
}
#admin label,
#availability label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
#admin input:not([type='checkbox']),
#admin textarea,
#admin select,
#availability input:not([type='checkbox']),
#availability select {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
}
#users {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
}
#users li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  overflow-wrap: anywhere;
}
#users li strong,
#users li span,
#users li small {
  display: block;
}
#users li span,
#users li small {
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.access-heading {
  padding: var(--space-5);
  border-radius: var(--radius-panel);
  background: linear-gradient(135deg, #edf5ff, #f8fbff);
  border: 1px solid #c7dcfa;
}
.access-heading h2 {
  margin: 0 0 var(--space-2);
}
.access-heading p:last-child {
  margin-bottom: 0;
}
.name-fields,
.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
}
.access-grid {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}
.access-grid legend {
  padding: 0 var(--space-1);
  font-weight: 700;
}
#abuse {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-xs);
}
@media (min-width: 900px) {
  body {
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .top,
  .app-nav,
  .page-header,
  #error {
    flex: none;
  }
  #desk {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
    flex: 1;
    min-height: 0;
  }
  #desk aside {
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
    max-height: none;
  }
  #admin {
    overflow: auto;
    width: 100%;
  }
}

#duty-days fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
#duty-days label {
  min-width: 0;
}
#messages .system {
  background: transparent;
  color: var(--color-muted);
  font-size: 14px;
}

body {
  height: var(--operator-viewport, 100dvh);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.top,
.app-nav,
.page-header,
#error {
  flex: none;
}
#desk {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#desk aside {
  height: 100%;
}
#conversation {
  height: 100%;
}
#availability,
#admin {
  overflow: auto;
  width: 100%;
}
#thread > header {
  flex: none;
}
#availability-form > button {
  margin: var(--space-3) var(--space-2) 0 0;
}
.schedule-days {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.schedule-days fieldset,
#availability-exceptions fieldset {
  min-width: 0;
  margin-block: var(--space-3);
}
.schedule-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.schedule-range label {
  min-width: 0;
  margin-bottom: 0 !important;
}
.schedule-range button {
  font-size: var(--text-xs);
}
.schedule-range input {
  min-width: 0;
}
#back-list {
  margin-bottom: var(--space-2);
}
@media (max-width: 899px) {
  .top label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .top label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .top select {
    max-width: 10rem;
  }
  .top #notifications {
    font-size: var(--text-xs);
    padding-inline: var(--space-2);
  }
  #desk:not(.is-thread-open) #conversation {
    display: none;
  }
  #desk.is-thread-open aside {
    display: none;
  }
  #conversation {
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
  }
  #thread {
    flex: 1;
    width: 100%;
    min-height: 0;
    height: auto;
  }
  #thread > header {
    max-height: 28%;
    overflow: auto;
  }
  #person {
    font-size: 16px;
    margin-bottom: var(--space-1);
  }
  #context {
    display: none;
  }
  #assignment {
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
  }
  .actions {
    gap: var(--space-1);
  }
  .actions button {
    font-size: var(--text-xs);
    padding-inline: var(--space-2);
  }
  #reply textarea {
    min-height: 44px;
    max-height: 160px;
    margin-block: var(--space-1);
  }
  #reply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-2);
    align-items: end;
  }
  #reply label {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
  }
  #reply button {
    margin-bottom: var(--space-1);
  }
}
@media (min-width: 900px) {
  #back-list {
    display: none;
  }
  .schedule-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The shared shell owns the desktop grid; Conversations owns its work pane. */
  body {
    min-height: 100dvh;
    display: grid;
    grid-template: 'top top' auto 'nav header' auto 'nav main' minmax(
        0,
        1fr
      ) / 15rem minmax(0, 1fr);
  }
  #desk {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }
  #availability,
  #admin {
    grid-area: main;
    min-width: 0;
  }
}

#email-context {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

#email-diagnostics {
  margin-block: var(--space-4);
  overflow-wrap: anywhere;
}
#email-diagnostics-counts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
}
#email-diagnostics-counts dd {
  margin: 0;
  font-weight: 650;
}