/* Readability pass: keep the approved glass chrome; use solid, clear reading surfaces. */
:root:not([data-theme]), :root[data-theme="liquid"] {
  --ink: #f6f5fb;
  --muted: #c0bdd1;
  --line: #d6cdef2d;
  --accent: #c2a9ff;
  --chat-incoming: #303344;
  --chat-outgoing: #6d3cbd;
}
:root[data-theme="graphite"] { --chat-incoming: #29343e; --chat-outgoing: #405465; }
:root[data-theme="ocean"] { --chat-incoming: #183c4c; --chat-outgoing: #185775; }
:root[data-theme="pearl"] { --chat-incoming: #eef2f7; --chat-outgoing: #dce7f7; }

/* Labels stay legible without wrapping one word into several lines on the rail. */
@media (min-width:601px) {
  .shell.crm-shell { grid-template-columns: 86px minmax(0,1fr); }
  .crm-shell .sidebar { padding-inline: 6px; }
  .crm-shell .sidebar .nav-item { min-height: 48px; padding: 7px 3px; gap: 5px; color: var(--muted); }
  .crm-shell .sidebar .nav-item svg { width: 21px; height: 21px; stroke-width: 1.8; }
  .crm-shell .sidebar .nav-item small { font-size: 11px; line-height: 1.3; overflow-wrap: normal; white-space: nowrap; letter-spacing: 0; }
  .crm-shell .sidebar .nav-item.active { color: var(--ink); background: color-mix(in srgb,var(--accent) 22%,var(--surface)); border-color: var(--accent); }
}
.crm-topbar, .theme-control, .environment-status { font-size: 12px; }
.demo-bar, .demo-bar button { font-size: 12px; }
.icon-button { color: var(--muted); }
.icon-button:hover, .icon-button:focus-visible { color: var(--ink); }

@media (min-width:1251px) {
  .inbox-layout { grid-template-columns: 340px minmax(0,1fr) 340px; }
  .inbox-layout.details-hidden, .inbox-layout.no-selection { grid-template-columns: 340px minmax(0,1fr); }
  .inbox-layout.queue-collapsed { grid-template-columns: minmax(0,1fr) 340px; }
  .inbox-layout.queue-collapsed.details-hidden { grid-template-columns: minmax(0,1fr); }
}
:root[data-theme="liquid"] .conversation-queue { background: #1d1a27ed; }
:root[data-theme="liquid"] .thread { background: #12111b; }
:root[data-theme="liquid"] :is(.thread-header,.chat-tag-bar,.composer-wrap) { background: #211d2be8; }
.queue-heading h1 { font-size: 22px; font-weight: 600; }
.queue-heading .eyebrow, .queue-subtitle, .queue-footer { font-size: 12px; color: var(--muted); }
.inbox-search { min-height: 40px; border-color: var(--line); }
.inbox-search input { font-size: 14px; color: var(--ink); }
.inbox-search input::placeholder, .composer textarea::placeholder { color: var(--muted); opacity: 1; }
.queue-tabs { gap: 12px; padding-inline: 13px; }
.queue-tabs button { font-size: 13px; font-weight: 500; min-height: 42px; color: var(--muted); }
.queue-tabs button.selected { color: var(--ink); border-bottom-color: var(--accent); }
.queue-attention { gap: 6px; }
.queue-attention button { font-size: 12px; color: var(--muted); min-height: 34px; }
.conversation-item .conversation-row { min-height: 88px; padding-block: 12px; }
.conversation-title strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.conversation-title time { font-size: 12px; color: var(--muted); }
.conversation-snippet { font-size: 14px; line-height: 1.4; color: var(--muted); margin: 4px 0; }
.conversation-meta, .queue-channel { font-size: 12px; color: var(--muted); }
.person-avatar { width: 38px; height: 38px; flex-shrink: 0; font-size: 13px; font-weight: 600; }
.conversation-row.selected { background: color-mix(in srgb,var(--accent) 18%,var(--surface)); border-color: color-mix(in srgb,var(--accent) 55%,transparent); box-shadow: inset 3px 0 var(--accent); }
.conversation-row:hover { background: color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.conversation-meta .unread { font-size: 12px; min-width: 20px; min-height: 20px; color: var(--frame); background: var(--accent); }
.conversation-more { color: var(--ink); }

/* A fixed place for the receiving WhatsApp; independent of customer identity
   and ad attribution. Full labels remain available in title/accessibility text. */
.conversation-title { display:flex; gap:8px; align-items:center; min-width:0; }
.conversation-title strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-badge { display:inline-block; border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--accent); border-radius:5px; padding:2px 6px; font-size:11px; line-height:1.4; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.conversation-title .queue-channel { flex:0 1 auto; max-width:46%; min-width:0; color:var(--accent); }
.conversation-meta { flex-wrap:nowrap; min-height:20px; }
.queue-message-time { margin-left:auto; flex-shrink:0; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.conversation-meta .unread { margin-left:0; flex-shrink:0; }
.attribution-partial { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-connection { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; max-width:65%; white-space:normal; overflow:visible; }
.thread-connection .channel-badge { max-width:220px; }
.connection-phone { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
@media(max-width:600px) { .thread-connection { max-width:100%; } .thread-connection .channel-badge { max-width:200px; } }

.thread-title>strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.thread-title :is(code,.header-assignee,.header-status) { font-size: 12px; }
.thread-actions .icon-button { width: 40px; height: 40px; color: var(--muted); }
.thread-actions .icon-button svg, .composer-tools .icon-button svg { width: 20px; height: 20px; stroke-width: 1.8; }
.chat-tag-bar :is(.pill,.text-button), .thread-connection { font-size: 12px; }
.messages { padding: 20px 24px; }
.message { margin-bottom: 16px; }
.inbox-layout .message-bubble { background: var(--chat-incoming); border: 1px solid color-mix(in srgb,var(--ink) 15%,transparent); color: var(--ink); padding: 11px 14px 7px; box-shadow: none; max-width: min(80%,800px); }
.inbox-layout .message.outgoing .message-bubble { background: var(--chat-outgoing); border-color: color-mix(in srgb,var(--ink) 18%,transparent); box-shadow: none; }
.message p { font-size: 16px; font-weight: 500; line-height: 1.5; color: inherit; }
.message-sender { color: var(--muted); font-size: 12px; font-weight: 500; }
.message-stamp { font-size: 12px; color: var(--muted); gap: 7px; }
.message-stamp button { color: inherit; opacity: 1; }
.message-stamp button svg { width: 15px; height: 15px; }
:root:not([data-theme="pearl"]) .message-bubble { color: #fff; }
:root:not([data-theme="pearl"]) .message-stamp { color: #e0ddeb; }
.message-bubble blockquote { font-size: 13px; color: inherit; opacity: 1; border-left: 3px solid var(--accent); background: #0002; }
.referral-event, .date-divider { font-size: 12px; color: var(--muted); }
.compose-tabs button { font-size: 13px; color: var(--muted); }
.compose-tabs button.selected { color: var(--ink); font-weight: 600; }
.compose-tabs>span, .composer-hint { font-size: 12px; color: var(--muted); }
.composer-tools .icon-button { width: 38px; height: 38px; }
.compose-input-row { border-color: color-mix(in srgb,var(--ink) 25%,transparent); background: var(--frame); }
.composer textarea { font-size: 16px; line-height: 24px; min-height: 46px; height: 46px; color: var(--ink); padding: 10px; }
.composer .send-button { width: 44px; height: 44px; }
.contact-details :is(.detail-section h3,.details-heading,.contact-shortcuts button,.contact-field>span,.detail-section dt) { font-size: 13px; color: var(--muted); }
.contact-details :is(.contact-field>div>span,.detail-section dd,#sidebar-note-form textarea) { font-size: 14px; color: var(--ink); }
.contact-profile h2 { font-size: 18px; font-weight: 600; }
.compact-flow-picker, .compact-flow-picker>header strong, .compact-flow-picker .flow-choice { font-size: 14px; }
.compact-flow-picker :is(.flow-recipient,.flow-scope-note,.flow-reply-option) { font-size: 12px; }

@media (min-width:601px) and (max-width:1250px) {
  .inbox-layout, .inbox-layout.details-hidden, .inbox-layout.no-selection { grid-template-columns: 300px minmax(0,1fr); }
  .inbox-layout.queue-collapsed, .inbox-layout.queue-collapsed.details-hidden { grid-template-columns: minmax(0,1fr); }
  .queue-tabs { gap: 8px; }
  .queue-tabs button { font-size: 12px; }
  .messages { padding: 16px; }
  .inbox-layout .message-bubble { max-width: 94%; }
}
@media (max-width:600px) {
  .crm-shell .sidebar .nav-item { color: var(--muted); }
  .crm-shell .sidebar .nav-item.active { color: var(--accent); }
  .thread-title>strong { font-size: 16px; }
  .thread-actions .icon-button { width: 44px; height: 40px; }
  .queue-tabs { gap: 8px; }
  .messages { padding: 14px 12px; }
  .inbox-layout .message-bubble { max-width: 92%; padding: 10px 12px 6px; }
  .message p { font-size: 16px; }
  .compose-tabs { gap: 8px; flex-wrap: wrap; }
  .compose-tabs button { font-size: 12px; }
  .composer-tools { gap: 0; }
  .composer-tools .icon-button { width: 34px; height: 38px; }
  .composer textarea { font-size: 16px; }
  .composer .send-button { width: 44px; height: 44px; }
}