:root {
  color-scheme: light;
  --bg: #eef2f3;
  --surface: #fff;
  --surface-soft: #f6f8f8;
  --text: #18272c;
  --muted: #6e7f85;
  --line: #dce4e6;
  --line-strong: #c7d2d5;
  --teal: #127a73;
  --teal-dark: #0b5e59;
  --teal-soft: #e4f4f2;
  --green: #2e7d5b;
  --amber: #a36b0d;
  --red: #a63f4b;
  --sidebar-width: 330px;
  --context-width: 310px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--text); background: var(--bg); font-family: var(--sans); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }

.workspace { height: 100vh; display: grid; grid-template-rows: 64px minmax(0, 1fr); }
.topbar { min-width: 0; padding: 0 18px; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--context-width); align-items: center; gap: 16px; color: #eaf5f4; background: #11272d; border-bottom: 1px solid #244047; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: #8ce0d6; background: #14353a; border: 1px solid #3f696a; border-radius: 9px; font: 700 14px var(--mono); }
.brand div { min-width: 0; display: grid; gap: 2px; }
.brand strong { font-size: 13px; }
.brand small { color: #91aab0; font-size: 9px; }
.agent-switcher { min-width: 0; display: flex; justify-content: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.agent-switcher::-webkit-scrollbar { display: none; }
.agent-button { position: relative; min-width: 88px; height: 34px; padding: 0 13px; color: #a8bcc1; white-space: nowrap; background: #173138; border: 1px solid #29464d; border-radius: 7px; font-size: 10px; }
.agent-button:hover { color: #fff; border-color: #477078; }
.agent-button.active { color: #fff; background: #1d4749; border-color: #4aa49b; box-shadow: inset 0 -2px #67d0c4; }
.agent-count { margin-left: 6px; padding: 2px 5px; color: #133b39; background: #73d6cb; border-radius: 10px; font: 700 8px var(--mono); }
.connection { justify-self: end; display: flex; align-items: center; gap: 7px; color: #90a8ae; font-size: 9px; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: #8a999d; }
.connection.online i { background: #50ce91; box-shadow: 0 0 0 3px #50ce9121; }
.connection.error i { background: #ef6c78; }

.chat-layout { min-height: 0; min-width: 0; display: grid; grid-template-columns: var(--sidebar-width) minmax(380px, 1fr) var(--context-width); }
.inbox-panel, .chat-panel, .context-panel { min-width: 0; min-height: 0; background: var(--surface); }
.inbox-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); border-right: 1px solid var(--line); }
.context-panel { overflow-y: auto; border-left: 1px solid var(--line); }
.chat-panel { position: relative; background: #f2f5f5; }
.panel-heading { min-height: 74px; padding: 17px 18px 14px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0; color: var(--teal); font: 700 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.panel-heading h1, .panel-heading h2 { margin: 5px 0 0; font-size: 15px; letter-spacing: -.02em; }
.icon-button { width: 30px; height: 30px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; font-size: 17px; }
.icon-button:hover { color: var(--teal); border-color: #aed5d1; }

.filters { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
.status-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 3px; background: #edf2f3; border-radius: 7px; }
.status-tabs button { height: 28px; padding: 0 4px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 8px; }
.status-tabs button.active { color: var(--text); background: #fff; box-shadow: 0 1px 2px #15313912; font-weight: 700; }
.search { height: 36px; margin-top: 9px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.search span { color: var(--muted); }
.search input { width: 100%; min-width: 0; padding: 0; outline: 0; border: 0; color: var(--text); font-size: 10px; }
.search input::placeholder { color: #9aa8ac; }
.conversation-list { overflow-y: auto; overscroll-behavior: contain; }
.conversation-card { width: 100%; min-height: 92px; padding: 13px 15px; display: grid; gap: 7px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #e8edef; }
.conversation-card:hover { background: #f8fbfb; }
.conversation-card.active { background: var(--teal-soft); box-shadow: inset 3px 0 var(--teal); }
.conversation-top, .conversation-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.conversation-top time { flex: 0 0 auto; color: var(--muted); font-size: 8px; }
.conversation-preview { margin: 0; overflow: hidden; color: #4f6268; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.conversation-meta { justify-content: flex-start; color: var(--muted); font: 8px var(--mono); }
.conversation-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #a7b4b7; }
.mini-status { padding: 3px 6px; border-radius: 9px; font: 700 7px var(--mono); }
.mini-status.waiting { color: var(--amber); background: #fff2d9; }
.mini-status.active { color: var(--green); background: #e5f4eb; }
.mini-status.bot { color: var(--teal-dark); background: var(--teal-soft); }
.mini-status.closed { color: #64777d; background: #edf1f2; }
.mini-status.degraded { color: #9b5a00; background: #fff0cf; }
.list-empty { min-height: 220px; padding: 25px; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--muted); text-align: center; }
.list-empty strong { color: var(--text); font-size: 11px; }
.list-empty span { max-width: 210px; font-size: 9px; line-height: 1.5; }

.empty-state { height: 100%; display: grid; place-content: center; justify-items: center; padding: 30px; color: var(--muted); text-align: center; }
.empty-state.compact { min-height: 300px; height: auto; }
.empty-state strong { color: var(--text); font-size: 13px; }
.empty-state p { max-width: 310px; margin: 7px 0 0; font-size: 10px; line-height: 1.55; }
.empty-icon { width: 42px; height: 42px; margin-bottom: 11px; display: grid; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: 12px; font-size: 19px; }
.chat-content { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-header { min-height: 74px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #fff; border-bottom: 1px solid var(--line); }
.chat-title-row { display: flex; align-items: center; gap: 9px; }
.chat-header h2 { margin: 0; font-size: 15px; }
.chat-header p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.state-badge { padding: 4px 7px; border-radius: 10px; font: 700 7px var(--mono); }
.state-badge.waiting { color: var(--amber); background: #fff0cf; }
.state-badge.active { color: var(--green); background: #e3f4ea; }
.state-badge.bot { color: var(--teal-dark); background: var(--teal-soft); }
.state-badge.closed { color: #60757b; background: #ebf0f1; }
.state-badge.degraded { color: #9b5a00; background: #fff0cf; }
.sync-label { color: var(--muted); font: 8px var(--mono); }
.message-stream { padding: 22px max(20px, 6%); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.day-separator { margin: 12px 0; display: flex; align-items: center; gap: 10px; color: #89999d; font-size: 8px; }
.day-separator::before, .day-separator::after { height: 1px; flex: 1; content: ""; background: #dce4e5; }
.message-row { margin: 8px 0; display: flex; }
.message-row.client { justify-content: flex-start; }
.message-row.bot, .message-row.agent { justify-content: flex-end; }
.message-bubble { max-width: min(560px, 78%); padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #16313909; }
.message-row.client .message-bubble { border-bottom-left-radius: 4px; }
.message-row.bot .message-bubble { background: #edf4f4; border-color: #d5e3e3; border-bottom-right-radius: 4px; }
.message-row.agent .message-bubble { color: #103e3a; background: #dff2ef; border-color: #bddfd9; border-bottom-right-radius: 4px; }
.message-author { margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font: 700 7px var(--mono); text-transform: uppercase; }
.message-row.agent .message-author { color: var(--teal-dark); }
.message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.52; }
.attachment-card { min-width: min(360px, 62vw); display: flex; align-items: flex-start; gap: 9px; padding: 9px; background: #f5f8f8; border: 1px solid var(--line); border-radius: 8px; }
.attachment-preview-link { display: block; width: min(440px, 62vw); max-height: 360px; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #e8eeee; }
.attachment-preview { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #eef3f3; }
.attachment-glyph { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; font: 700 8px var(--mono); }
.attachment-details { min-width: 0; display: grid; gap: 3px; }
.attachment-details strong { overflow-wrap: anywhere; font-size: 10px; }
.attachment-details span { color: var(--muted); font-size: 8px; }
.attachment-details code { overflow-wrap: anywhere; color: #60757b; font: 7px var(--mono); }
.attachment-preview-status { color: #8a641f !important; }
.attachment-caption { margin-top: 8px; }
.message-time { margin-top: 6px; display: block; color: #859499; text-align: right; font: 7px var(--mono); }
.delivery-status { margin-left: 4px; color: var(--teal); }
.delivery-status.unknown { color: var(--red); font-weight: 800; }
.retry-delivery { margin-top: 8px; padding: 5px 8px; color: var(--red); background: #fff; border: 1px solid #dfb9be; border-radius: 6px; font-size: 8px; font-weight: 700; }
.handover-gate { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff9eb; border-top: 1px solid #ead7ad; }
.handover-gate div { min-width: 0; display: grid; gap: 4px; }
.handover-gate strong { font-size: 10px; }
.handover-gate span { color: #796841; font-size: 9px; line-height: 1.4; }
.composer { padding: 13px 16px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; background: #fff; border-top: 1px solid var(--line); }
.composer textarea { min-height: 44px; max-height: 130px; padding: 10px 11px; resize: none; outline: 0; color: var(--text); background: #f8fafb; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 11px; line-height: 1.45; }
.composer textarea:focus { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px #127a7314; }
.composer small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.send-button { min-width: 100px; padding: 0 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--teal); border: 1px solid var(--teal); border-radius: 8px; font-size: 9px; font-weight: 700; }
.send-button:hover { background: var(--teal-dark); }
.send-button b { font-size: 13px; }
.closed-note { padding: 15px; color: var(--muted); text-align: center; background: #f7f9f9; border-top: 1px solid var(--line); font-size: 9px; }

.context-heading { min-height: 74px; }
.context-section { padding: 16px 17px; border-bottom: 1px solid var(--line); }
.section-title { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-title strong { font-size: 10px; }
.section-title span { color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.agent-select-label { display: grid; gap: 6px; }
.agent-select-label > span { color: var(--muted); font-size: 8px; }
select { width: 100%; height: 36px; padding: 0 9px; outline: 0; color: var(--text); background: #fff; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 10px; }
select:focus { border-color: var(--teal); }
.full { width: 100%; }
.primary-button, .secondary-button, .danger-button { min-height: 36px; padding: 0 13px; border-radius: 7px; font-size: 9px; font-weight: 700; }
.primary-button { color: #fff; background: var(--teal); border: 1px solid var(--teal); }
.secondary-button { color: var(--text); background: #fff; border: 1px solid var(--line-strong); }
.danger-button { color: var(--red); background: #fff; border: 1px solid #e6c4c8; }
.secondary-button:hover { background: #f5f8f8; }
.danger-button:hover { background: #fff3f4; }
#reassign-button { margin-top: 8px; }
.facts { margin: 0; display: grid; }
.facts div { min-width: 0; padding: 8px 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 9px; border-bottom: 1px solid #edf1f2; }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); font-size: 8px; }
.facts dd { margin: 0; overflow-wrap: anywhere; text-align: right; font-size: 9px; font-weight: 650; }
.summary-block { margin-top: 11px; padding: 9px 10px; background: var(--surface-soft); border-radius: 7px; }
.summary-block span { color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.summary-block p { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 9px; line-height: 1.45; }
.property-card { padding: 11px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; }
.property-card code { display: block; color: var(--teal-dark); font: 700 9px var(--mono); }
.property-card strong { margin-top: 5px; display: block; font-size: 10px; line-height: 1.4; }
.property-card span { margin-top: 5px; display: block; color: var(--muted); font-size: 8px; }
.unanswered-list { display: grid; gap: 7px; }
.unanswered-card { padding: 10px; background: #fff8e8; border: 1px solid #ead7ad; border-radius: 7px; }
.unanswered-card p { margin: 0; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.unanswered-card span { margin-top: 6px; display: block; color: #7a6841; font: 7px var(--mono); text-transform: uppercase; }
.handover-reason { margin: 0; padding: 10px; color: #5e552f; background: #fff7e4; border: 1px solid #ebddb7; border-radius: 7px; font-size: 9px; line-height: 1.45; }
.actions-section { display: grid; gap: 8px; }
.developer-note { margin: 15px 17px 20px; padding: 10px; color: var(--muted); background: #f5f7f8; border-radius: 7px; font-size: 8px; line-height: 1.5; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 20; max-width: 380px; padding: 11px 14px; color: #fff; background: #20353a; border-radius: 7px; box-shadow: 0 12px 35px #11272d35; font-size: 9px; }
.toast.error { background: var(--red); }
.access-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: #eef3f3; }
.access-card { width: min(360px, 100%); padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px #17383d1f; }
.access-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 23px; color: var(--teal); border: 1px solid var(--teal); border-radius: 10px; font-weight: 800; }
.access-card h1 { margin: 5px 0 9px; font-size: 22px; }
.access-card > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.access-card form { margin-top: 24px; display: grid; gap: 8px; }
.access-card label { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.access-card input { width: 100%; height: 48px; padding: 0 14px; color: var(--text); background: #f8fafb; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; font: 700 18px/1 var(--mono); letter-spacing: .45em; text-align: center; }
.access-card input:focus { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px #127a7314; }
.access-card button { height: 42px; margin-top: 4px; color: #fff; background: var(--teal); border: 0; border-radius: 8px; font-size: 10px; font-weight: 750; cursor: pointer; }
.access-card button:disabled { opacity: .55; cursor: wait; }
#access-error { min-height: 15px; color: var(--red); font-size: 9px; text-align: center; }

@media (max-width: 1120px) {
  :root { --sidebar-width: 290px; --context-width: 270px; }
  .topbar { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto; }
}

@media (max-width: 900px) {
  body { overflow: hidden; }
  .workspace { min-height: 0; height: 100vh; grid-template-rows: auto minmax(0, 1fr); }
  .topbar { height: auto; min-height: 64px; grid-template-columns: 1fr auto; }
  .agent-switcher { grid-column: 1 / -1; grid-row: 2; padding-bottom: 10px; justify-content: flex-start; }
  .chat-layout { min-height: 0; height: 100%; grid-template-columns: 280px minmax(0, 1fr); }
  .context-panel { display: none; }
}

@media (max-width: 650px) {
  body { overflow: hidden; }
  .topbar { padding: 0 10px; }
  .connection { display: none; }
  .chat-layout { position: relative; display: block; min-height: 0; height: 100%; }
  .inbox-panel, .chat-panel { position: absolute; inset: 0; }
  .chat-panel { display: none; }
  body.chat-open .inbox-panel { display: none; }
  body.chat-open .chat-panel { display: block; }
  .message-bubble { max-width: 88%; }
  .chat-header::before { content: "‹"; margin-right: 7px; color: var(--teal); font-size: 24px; cursor: pointer; }
}