.live {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.live-root [hidden] {
  display: none !important;
}
.live-ribbon {
  background: #eaf4ee;
  color: #376f56;
  border-color: #d9e9dd;
}
.live-root .side-bottom a {
  color: #718d7e;
  font-size: 11px;
}
.live-root .nav button:disabled {
  opacity: 0.38;
  cursor: default;
}
.live-explanation {
  margin-bottom: 14px;
  flex-shrink: 0;
}
.live-root .tabs {
  overflow-x: auto;
  flex-shrink: 0;
}
.live-root .tabs button {
  white-space: nowrap;
}
.live-root .source-health {
  margin-left: 8px;
  color: #6d9a7f;
  white-space: nowrap;
}
.live-root .source-health.bad {
  color: #b77835;
}
.live-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.live-detail {
  padding: 20px;
  gap: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.live-detail header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-detail h2 {
  font-size: 18px;
  margin: 6px 0 0;
}
.live-detail p {
  margin: 0;
  color: #708077;
  font-size: 12px;
}
.live-detail > small {
  color: #8a978e;
  font-size: 10px;
}
.live-note {
  background: #fff7e8;
  color: #8a7145;
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.6;
  flex-shrink: 0;
}
.live-messages {
  overflow: auto;
  flex: 1;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.live-message {
  padding: 12px 15px;
  border-radius: 10px;
  background: #f3f5f6;
  max-width: 94%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  flex-shrink: 0;
}
.live-message.own {
  align-self: flex-end;
  background: #eaf5ee;
}
.live-message b {
  display: block;
  font-size: 10px;
  margin-bottom: 5px;
  color: #738179;
}
.live-message small {
  display: block;
  font-size: 10px;
  color: #87978d;
  margin-top: 8px;
}
.live-empty {
  padding: 30px 12px;
  text-align: center;
  color: #819287;
  font-size: 12px;
}
.live-error {
  color: #a04d34 !important;
}
.live-login {
  width: min(460px, 100%);
  background: white;
  padding: 35px;
  border-radius: 18px;
  border: 1px solid #e1e8e5;
}
.live-login h1 {
  font-size: 25px;
  margin: 16px 0;
}
.live-login p {
  color: #7b897f;
  font-size: 13px;
  line-height: 1.6;
  margin: 12px 0;
}
.live-login input {
  width: 100%;
  margin: 15px 0;
  padding: 12px;
  border: 1px solid #dce4e1;
  border-radius: 8px;
}
.live-login a {
  color: #26715d;
}
@media (max-width: 650px) {
  .live-root .stats {
    gap: 8px;
    margin-bottom: 12px;
  }
  .live-root .table-scroll table,
  .live-root .table-scroll tbody {
    display: block;
  }
  .live-root .table-scroll thead {
    display: none;
  }
  .live-root tr.order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
    border-bottom: 1px solid #edf1ee;
    gap: 4px;
  }
  .live-root tr.order-row td {
    padding: 4px;
    border: 0;
    white-space: normal;
    min-width: 0;
  }
  .live-root tr.order-row .merchant-col {
    display: none;
  }
  .live-root tr.order-row td:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }
  .live-root tr.order-row td:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }
  .live-root tr.order-row td:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .live-root .client-cell {
    max-width: 190px;
  }
  .live-root .pagination {
    gap: 8px;
    padding: 9px;
  }
  .live-detail {
    padding: 15px;
  }
}

.live-controls {
  border-top: 1px solid var(--border, #dce4e2);
  margin-top: 20px;
  padding-top: 16px;
}
.live-controls textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  resize: vertical;
}
.live-controls .row {
  flex-wrap: wrap;
  gap: 8px;
}
.live-confirm {
  border: 1px solid #dce4e2;
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: calc(100% - 64px);
  color: #20383b;
}
.live-confirm::backdrop {
  background: rgba(15, 30, 30, 0.45);
}
.live-confirm input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 20px;
}
.live-confirm .row {
  justify-content: flex-end;
  gap: 12px;
}

.receipt-preview {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  margin: 16px 0;
  border: 1px solid #dce4e2;
  border-radius: 10px;
  background: white;
}
/* Operator workspace: prioritize queue width and readable conversation. */
.live-root .app {
  grid-template-columns: 76px minmax(0, 1fr);
}
.live-root .sidebar {
  width: 76px;
  padding: 18px 10px;
}
.live-root .sidebar .brand div,
.live-root .sidebar .nav-label,
.live-root .sidebar .nav button span,
.live-root .side-bottom {
  display: none;
}
.live-root .sidebar .nav button {
  justify-content: center;
}
.live-root .header {
  height: 52px;
  min-height: 52px;
  padding: 0 18px;
}
.live-root .view {
  padding: 12px 16px 0;
}
.live-root .page-heading {
  margin-bottom: 8px;
}
.live-root .page-heading h1 {
  font-size: 24px;
}
.live-root .page-heading p,
.live-root .page-heading .pill {
  display: none;
}
.live-root .stats {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.live-root .stat {
  padding: 5px 10px;
  border-radius: 6px;
  min-height: 0;
  flex: none;
}
.live-root .stat > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-root .stat strong {
  font-size: 15px;
  margin: 0;
}
.live-root .stat-icon {
  display: none;
}
.live-root .stat-label {
  font-size: 11px;
}
.refresh-stamp {
  font-size: 11px;
  color: #637b70;
  font-variant-numeric: tabular-nums;
}
.live-root .page-heading > .row {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.live-root .detail.live-detail {
  width: clamp(460px, 43vw, 680px);
  padding: 14px 16px;
  gap: 8px;
  min-height: 0;
}
.live-detail > header,
.live-detail > p,
.live-dialog-toolbar,
.live-detail > .live-controls {
  flex-shrink: 0;
}
.live-detail h2 {
  display: inline;
  margin-left: 8px;
  font-size: 17px;
}
.live-dialog-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.live-dialog-toolbar span {
  color: #687d71;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.live-messages {
  flex: 1 1 240px;
  min-height: 180px;
  padding: 8px 3px;
}
.live-message {
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 12px;
  max-width: 96%;
}
.live-message b,
.live-message small {
  font-size: 11px;
}
.live-controls {
  margin-top: 0;
  padding-top: 8px;
}
.live-controls h3 {
  font-size: 12px;
  margin: 0 0 6px;
}
.live-controls textarea {
  min-height: 58px;
  max-height: 120px;
  margin-bottom: 6px;
  font-size: 14px;
}
.live-controls p {
  font-size: 10px;
  line-height: 1.35;
  margin-top: 4px;
}
.live-controls button {
  font-size: 11px;
  padding: 6px 8px;
}
.live-controls select {
  font-size: 11px;
  padding: 5px;
}
.receipt-link {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  color: #11694f;
  text-decoration: underline;
  font: inherit;
  overflow-wrap: anywhere;
  text-align: left;
}
.receipt-viewer {
  width: min(1000px, 94vw);
  height: 90dvh;
  max-width: 94vw;
  max-height: 94dvh;
  border: 1px solid #dce4e2;
  border-radius: 14px;
  padding: 0;
  color: #20383b;
}
.receipt-viewer[open] {
  display: flex;
  flex-direction: column;
}
.receipt-viewer::backdrop {
  background: #162824aa;
}
.receipt-viewer header,
.receipt-viewer footer {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.receipt-viewer h2 {
  font-size: 18px;
  margin: 0 0 4px;
}
.receipt-viewer p,
.receipt-viewer footer {
  font-size: 12px;
}
.receipt-canvas {
  overflow: auto;
  background: #edf1ee;
  flex: 1;
  min-height: 0;
  padding: 12px;
}
.receipt-canvas .receipt-preview {
  width: 100%;
  max-height: none;
  margin: 0 auto;
  border: 0;
  object-fit: contain;
}
@media (max-width: 1100px) and (min-width: 701px) {
  .live-root .detail-open .list-pane {
    display: none;
  }
  .live-root .detail.live-detail {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .live-root .sidebar {
    width: 76px;
  }
  .live-root .view {
    padding: 8px 8px 0;
  }
  .live-root .stats {
    display: none;
  }
  .live-root .detail.live-detail {
    width: 100%;
    padding: 10px;
  }
  .live-root .page-heading > .row > .ghost {
    display: inline-flex;
  }
  .refresh-stamp {
    font-size: 10px;
  }
  .live-root .page-heading h1 {
    font-size: 19px;
  }
  .live-root .header {
    padding: 0 10px;
  }
  .live-root .queue-top {
    padding-top: 8px;
  }
  .live-messages {
    min-height: 120px;
  }
}
@media (max-height: 700px) {
  .live-root .stats {
    display: none;
  }
  .live-root .detail.live-detail {
    overflow-y: auto;
  }
}

.receipt-checklist {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.receipt-checklist label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.receipt-checklist input {
  width: auto;
}
@media (max-width: 700px) {
  .receipt-viewer footer {
    align-items: stretch;
    flex-direction: column;
  }
  .receipt-checklist {
    gap: 6px;
  }
}

.live-controls summary {
  cursor: pointer;
  font-size: 12px;
  color: #627a6e;
  padding: 3px 0;
}
.live-controls details[open] summary {
  margin-bottom: 6px;
}

.client-stats {
  margin: 0 0 10px;
  flex-shrink: 0;
}
.client-stats.compact { padding: 5px 8px; border-radius: 6px; background: #f5f8f6; font-size: 12px; }
.client-stats.compact > div { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 10px; line-height: 20px; }
.client-stats.compact span { color: #627a6e; white-space: nowrap; }
.client-stats.compact b { color: #203c32; margin-left: 4px; }
.live-template-bar { display: flex; gap: 6px; margin-bottom: 6px; }
.live-template-bar select { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; }
.live-template-bar button { white-space: nowrap; padding: 6px 8px; font-size: 12px; }
.template-editor { width: min(540px, calc(100vw - 28px)); }
.template-editor label { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; }
.template-editor textarea { width: 100%; resize: vertical; }
.client-stats-title {
  font-size: 12px;
  font-weight: 600;
}
.client-stats-title small,
.client-stats-note {
  color: #627a6e;
  font-size: 11px;
  font-weight: 400;
}
.client-stats-title small {
  margin-left: 6px;
}
.client-stats table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.client-stats th,
.client-stats td {
  padding: 4px 5px;
  border-bottom: 1px solid #e8eeeb;
  text-align: right;
}
.client-stats th:first-child {
  text-align: left;
  white-space: nowrap;
}
.client-stats thead th {
  font-weight: 400;
  color: #627a6e;
}
.client-stats td small {
  display: inline-block;
  margin-left: 5px;
  color: #627a6e;
  font-size: 10px;
  white-space: nowrap;
}
.receipt-checklist label {
  max-width: 560px;
  line-height: 1.5;
}
.receipt-checklist input {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .client-stats-title small, .client-stats td small { display: block; margin-left: 0; }
}
/* Keep the conversation, rather than its controls, dominant. */
.live-root .detail.live-detail { width: clamp(480px, 46vw, 740px); padding: 10px 14px; gap: 5px; }
.live-detail .detail-summary { line-height: 18px; }
.live-detail .client-stats.compact { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 4px 7px; flex-shrink: 0; margin: 0; font-size: 11px; }
.live-detail .client-stats.compact > div { display: flex; gap: 6px; line-height: 17px; }
.live-detail .client-stats.compact b { margin-left: 2px; }
.live-dialog-toolbar { gap: 6px; flex-wrap: nowrap; border-bottom: 1px solid #e4ebe7; }
.detail-tabs { display: flex; gap: 12px; margin-right: auto; }
.detail-tabs button { border: 0; border-radius: 0; padding: 8px 0; background: transparent; font-size: 12px; color: #75877d; border-bottom: 2px solid transparent; }
.detail-tabs button[aria-selected=true] { color: #17664e; border-bottom-color: #17664e; font-weight: 600; }
.live-dialog-toolbar [role=status] { font-size: 10px; white-space: nowrap; }
.live-dialog-toolbar .icon-refresh { border: 0; padding: 5px; display: grid; place-items: center; background: transparent; }
.icon-refresh svg { width: 16px; height: 16px; }
.icon-refresh.is-loading svg { animation: dialog-refresh 1s linear infinite; }
@keyframes dialog-refresh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-refresh.is-loading svg { animation: none; } }
.live-detail .live-messages { flex: 1 1 0; min-height: 100px; padding: 8px 2px; gap: 9px; }
.live-detail .live-message { flex-shrink: 0; font-size: 14px; line-height: 1.55; }
.live-detail .live-message b { margin-bottom: 3px; }
.live-detail .live-message small { margin-top: 4px; }
.live-detail .operator-comment { background: #fff8e8; width: 100%; max-width: 100%; }
.live-template-bar { gap: 5px; overflow-x: auto; margin-bottom: 5px; }
.live-template-bar button { border-radius: 14px; padding: 3px 9px; font-size: 11px; background: #f2f6f3; border: 1px solid #dfe9e2; max-width: 180px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.live-controls .reply-compose { display: flex; align-items: flex-end; gap: 6px; }
.live-controls .reply-compose textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 104px; margin: 0; padding: 9px 10px; resize: none; line-height: 20px; }
.reply-compose > button { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; }
.reply-compose svg { width: 18px; height: 18px; }
.live-controls > p:empty { display: none; }
.live-controls .internal-note { margin: 0 0 5px; }
.financial-actions { margin-top: 5px; font-size: 11px; }
@media (max-width: 600px) {
 .live-root .detail.live-detail { width: 100%; padding: 8px 10px; }
 .live-dialog-toolbar [role=status] { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
 .detail-tabs { gap: 10px; }
}
.live-root .detail.live-detail.expanded-dialog { position: fixed; z-index: 25; top: 12px; right: 12px; bottom: 12px; width: min(860px, calc(100vw - 90px)); border: 1px solid #dbe6df; border-radius: 12px; box-shadow: 0 10px 50px #173c3529; background: white; }
.live-detail header .row { gap: 4px; }
.live-detail header button { padding: 5px 8px; }
@media (max-width: 600px) { .live-root .detail.live-detail.expanded-dialog { width: calc(100vw - 16px); top: 8px; right: 8px; bottom: 8px; } }
.workspace-modal { width: min(1050px,calc(100vw - 28px)); max-height: 90dvh; padding: 20px; overflow: auto; }
.workspace-modal header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.workspace-modal h2 { margin:0 0 12px; font-size:20px; }
.workspace-modal table { width:100%; border-collapse:collapse; font-size:12px; }
.workspace-modal td,.workspace-modal th { text-align:left; padding:9px; border-bottom:1px solid #e4ebe7; }
.workspace-modal small { display:block; margin-top:4px; color:#72857b; }
.workspace-modal button { padding:6px 9px; font-size:12px; }
.archive-filters,.new-user { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.archive-filters input { flex:1; min-width:180px; }
.archive-filters select,.archive-filters input,.new-user input,.new-user select { padding:8px; border:1px solid #dce6df; border-radius:6px; }
.archive-hint { font-size:12px; color:#708077; margin:10px 0; }
.archive-results,.user-results { overflow:auto; }
.archive-pagination { justify-content:flex-end; margin-top:12px; }
.audit-event { padding:12px 0; border-bottom:1px solid #e4ebe7; font-size:13px; }
.new-user h3 { width:100%; margin:8px 0; }
.credential-result { overflow-wrap:anywhere; font-size:13px; padding:8px 0; }
.live-detail .order-presence { color:#98632e; background:#fff7e8; padding:3px 7px; font-size:11px; }
#order-history svg { width:16px; height:16px; }