:root {
    font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif;
    color: #17211d;
    background: #edf2ef;
    letter-spacing: 0;
    --ink: #17211d;
    --muted: #68746e;
    --line: #dfe6e2;
    --line-strong: #cbd6d0;
    --surface: #ffffff;
    --surface-soft: #f6f8f7;
    --surface-green: #f7ecf7;
    --green: #ae42b3;
    --green-dark: #843288;
    --green-light: #ecd2ed;
    --amber: #b66a12;
    --red: #b33a3a;
    --rail: #491c4b;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
[hidden] { display: none !important; }
.app-shell { height: var(--console-viewport-height, 100dvh); min-height: 0; overflow: hidden; display: grid; grid-template-columns: 72px minmax(300px, 354px) minmax(430px, 1fr) 304px; background: var(--surface); }
.nav-rail { min-height: 0; overflow: hidden; background: var(--rail); color: #d9ebe4; display: flex; flex-direction: column; align-items: center; padding: 18px 10px 14px; border-right: 1px solid #255044; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 8px; font-size: 13px; font-weight: 800; }
.nav-rail nav { display: grid; gap: 8px; width: 100%; margin-top: 42px; }
.rail-bottom { margin-top: auto; display: grid; justify-items: center; gap: 14px; width: 100%; }
.rail-button { width: 100%; min-height: 48px; display: grid; place-items: center; gap: 3px; color: #a9c6bc; background: transparent; border: 0; border-radius: 6px; padding: 6px 3px; }
.rail-button svg { width: 20px; height: 20px; }
.rail-button span { font-size: 10px; }
.rail-button:hover, .rail-button.active { color: #fff; background: #245246; }
.avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #d9eee6; color: var(--green-dark); font-size: 12px; font-weight: 750; }
.avatar-officer { color: #25352f; background: #f3c777; border: 2px solid #fff; }
.avatar-large { width: 64px; height: 64px; font-size: 19px; }
.inbox-panel { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0; color: #53625b; background: transparent; border: 1px solid transparent; border-radius: 6px; }
.icon-button:hover { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
.icon-button svg { width: 18px; height: 18px; }
.inbox-heading { padding: 22px 18px 14px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0 0 4px; color: var(--green); font-size: 10px; line-height: 1.2; font-weight: 800; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.inbox-heading h1 { margin: 0; font-size: 22px; line-height: 1.15; }
.count-badge { min-width: 26px; height: 26px; display: grid; place-items: center; padding: 0 7px; border-radius: 13px; color: #fff; background: var(--green); font-size: 12px; font-weight: 700; }
.search-box { height: 40px; margin: 0 18px 14px; display: flex; align-items: center; gap: 9px; padding: 0 12px; color: #77827d; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; }
.search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px #d7eee6; }
.search-box svg { width: 17px; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; }
.filter-tabs { display: flex; gap: 4px; padding: 0 18px 14px; overflow-x: auto; scrollbar-width: none; }
.filter-tabs button { flex: 0 0 auto; padding: 7px 9px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 11px; font-weight: 650; }
.filter-tabs button:hover, .filter-tabs button.active { color: var(--green-dark); background: var(--surface-green); }
.list-summary { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 20px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; }
.conversation-list { min-height: 0; flex: 1; overflow-y: auto; }
.conversation-item { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 14px 16px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #edf1ef; position: relative; }
.conversation-item:hover { background: #f8faf9; }
.conversation-item.active { background: var(--surface-green); }
.conversation-item.active::before { content: ""; width: 3px; position: absolute; inset: 0 auto 0 0; background: var(--green); }
.conversation-copy { min-width: 0; }
.conversation-name-row { display: flex; align-items: center; gap: 6px; }
.conversation-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.conversation-subject { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #44514b; font-size: 12px; }
.conversation-meta { margin-top: 7px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.status-dot.waiting { background: var(--amber); }
.status-dot.resolved { background: #82908a; }
.conversation-side { display: grid; align-content: space-between; justify-items: end; min-height: 52px; color: var(--muted); font-size: 10px; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.conversation-unread { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; color: #fff; background: var(--green); border-radius: 10px; font-size: 10px; font-weight: 800; }
.conversation-panel { min-width: 0; min-height: 0; overflow: hidden; position: relative; background: #f7f9f8; }
.empty-thread { height: 100%; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--green); background: var(--surface-green); border-radius: 50%; }
.empty-icon svg { width: 25px; }
.empty-thread h2 { margin: 15px 0 6px; font-size: 17px; }
.empty-thread p { margin: 0; color: var(--muted); font-size: 13px; }
.thread { height: 100%; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 72px minmax(0, 1fr) 34px auto; }
.thread-header { display: flex; align-items: center; gap: 11px; padding: 0 18px; background: #fff; border-bottom: 1px solid var(--line); }
.thread-title { min-width: 0; flex: 1; }
.thread-title strong, .thread-title > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-title strong { font-size: 14px; }
.thread-title > span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.presence-dot { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.thread-actions { display: flex; align-items: center; gap: 8px; }
.status-pill { padding: 5px 8px; color: var(--green-dark); background: var(--surface-green); border: 1px solid #cfe9df; border-radius: 12px; font-size: 10px; font-weight: 750; }
.status-pill.waiting { color: #8b4e08; background: #fff4df; border-color: #efd8ac; }
.status-pill.resolved { color: #52615a; background: #eef1ef; border-color: #dbe1de; }
.messages { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 24px clamp(18px, 4vw, 52px); background: #f7f9f8; }
.day-divider { display: flex; align-items: center; gap: 10px; margin: 3px 0 22px; color: #88928d; font-size: 10px; }
.day-divider::before, .day-divider::after { content: ""; height: 1px; flex: 1; background: #e1e7e4; }
.message-row { max-width: 74%; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; margin: 0 0 18px; }
.message-row.mine { margin-left: auto; grid-template-columns: minmax(0, 1fr); }
.message-row .avatar { width: 30px; height: 30px; margin-top: auto; font-size: 10px; }
.message-bubble { min-width: 0; padding: 10px 12px 7px; position: relative; color: #26322d; background: #fff; border: 1px solid var(--line); border-radius: 10px 10px 10px 2px; box-shadow: 0 2px 8px rgba(20, 49, 39, .05); }
.message-bubble.has-actions { padding-right: 34px; }
.message-row.mine .message-bubble { color: #fff; background: var(--green); border-color: var(--green); border-radius: 10px 10px 2px 10px; }
.message-image { display: block; width: min(360px, 100%); max-height: 340px; margin-bottom: 9px; object-fit: cover; background: #e5ece8; border-radius: 5px; }
.message-image[role="button"] { cursor: zoom-in; }
.image-error { display: block; padding: 20px; color: var(--muted); background: var(--surface-soft); font-size: 11px; }
.message-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }
.deleted-copy { display: flex; align-items: center; gap: 6px; color: #7d8983; font-size: 12px; font-style: italic; }
.message-row.mine .deleted-copy { color: #d4e9e0; }
.message-menu-button { width: 28px; height: 28px; display: grid; place-items: center; position: absolute; top: 2px; right: 2px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 5px; font-size: 18px; line-height: 1; opacity: .65; }
.message-menu-button:hover, .message-menu-button[aria-expanded="true"] { background: rgba(0, 0, 0, .08); opacity: 1; }
.message-menu { min-width: 166px; position: absolute; z-index: 8; top: 32px; right: 4px; display: grid; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 12px 30px rgba(12, 37, 28, .2); }
.message-menu button { padding: 10px 12px; color: inherit; text-align: left; background: #fff; border: 0; font-size: 11px; }
.message-menu button:hover { background: var(--surface-green); }
.message-menu .delete-everyone { color: var(--red); }
.message-footer { min-width: 66px; margin-top: 5px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #85908b; line-height: 1; }
.message-time { display: block; color: inherit; text-align: right; font-size: 9px; }
.message-row.mine .message-time { color: #c8e8dc; }
.delivery-status { min-width: 14px; display: inline-block; color: #c8e8dc; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0; text-align: right; white-space: nowrap; }
.delivery-status.read { color: #62c8ff; }
.delivery-status.sent { font-size: 13px; }
.reply-tools { min-height: 34px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); font-size: 10px; }
.text-tool { display: inline-flex; align-items: center; gap: 6px; padding: 4px; color: var(--green-dark); background: transparent; border: 0; font-size: 11px; font-weight: 700; }
.text-tool svg { width: 14px; }
#composer { position: relative; z-index: 2; min-height: 68px; max-height: 250px; overflow: hidden; flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 11px 16px; background: #fff; }
.attachment-preview { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; align-items: center; gap: 11px; padding: 9px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; }
.attachment-preview img { width: 64px; height: 64px; object-fit: cover; background: #e1e8e4; border-radius: 4px; }
.attachment-preview-visual { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; color: var(--green-dark); background: #e1e8e4; border-radius: 7px; }
.attachment-preview-visual img, .attachment-preview-visual svg { grid-area: 1 / 1; }
.attachment-preview-visual svg { width: 25px; height: 25px; }
.attachment-preview > span { min-width: 0; display: grid; gap: 4px; }
.attachment-preview strong, .attachment-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview strong { font-size: 11px; }
.attachment-preview small { color: var(--muted); font-size: 9px; }
#composer textarea { min-height: 42px; max-height: 120px; min-width: 0; overflow-y: auto; flex: 1; resize: none; padding: 11px 12px; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; outline: 0; line-height: 1.4; }
#composer textarea:focus { border-color: var(--green); box-shadow: 0 0 0 2px #d7eee6; }
.send-button { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #fff; background: var(--green); border: 0; border-radius: 6px; }
.send-button:hover, .primary-action:hover, .login-button:hover { background: var(--green-dark); }
.send-button svg { width: 18px; }
.record-button { position: relative; }
.record-button.recording { width: auto; min-width: 68px; padding: 0 10px; gap: 6px; color: #fff; background: #c7473c; border-color: #c7473c; }
.record-button.recording #record-time { display: inline !important; font-size: 11px; font-variant-numeric: tabular-nums; }
.record-button.recording svg { width: 16px; }
.attachment-action { color: var(--green-dark); background: var(--surface-green); border-color: color-mix(in srgb, var(--green) 18%, transparent); transition: transform .18s ease, background .18s ease; }
.attachment-action:hover { background: var(--green-light); }
.attachment-action:active { transform: scale(.96); }
.voice-note-player { width: min(350px, 72vw); display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 8px; padding: 9px 11px 8px; color: #304039; background: rgba(255,255,255,.92); border: 1px solid rgba(39,76,61,.12); border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.72); }
.voice-toggle { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--green); border: 0; border-radius: 50%; transition: transform .18s ease, background .18s ease; }
.voice-toggle:hover { background: var(--green-dark); }
.voice-toggle:active { transform: scale(.94); }
.voice-toggle:disabled { opacity: .48; }
.voice-toggle svg { grid-area: 1 / 1; width: 17px; height: 17px; }
.voice-pause { display: none; }
.voice-note-player.playing .voice-play { display: none; }
.voice-note-player.playing .voice-pause { display: block; }
.voice-content { min-width: 0; display: grid; gap: 2px; }
.voice-timeline { height: 27px; position: relative; display: block; }
.voice-bars { height: 27px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.voice-bars i { width: 2px; min-width: 2px; background: #b8c5bf; border-radius: 2px; transition: background .12s ease; }
.voice-bars i.played { background: var(--green); }
.voice-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.voice-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #718079; font-size: 9px; line-height: 1; }
.voice-label { font-weight: 700; }
.voice-duration { font-variant-numeric: tabular-nums; }
.voice-note-player.loading .voice-bars { opacity: .5; }
.document-card { width: min(340px, 68vw); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 0 0 8px; padding: 9px; color: #27352f; background: rgba(255,255,255,.9); border: 1px solid rgba(40,67,56,.15); border-radius: 8px; text-align: left; cursor: pointer; }
.document-card:hover { background: #fff; }
.document-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--green-dark); background: var(--surface-green); border-radius: 7px; font-size: 10px; font-weight: 800; }
.document-copy { min-width: 0; }
.document-copy strong, .document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-copy strong { font-size: 11px; }
.document-copy small { margin-top: 3px; color: #69766f; font-size: 9px; }
.document-download { font-size: 18px; }
.attachment-error { display: block; margin-bottom: 7px; font-size: 11px; font-style: italic; }
.mobile-back { display: none; }
.detail-panel { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--line); }
.detail-panel > header { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.contact-card { display: grid; justify-items: center; padding: 24px 18px 20px; border-bottom: 1px solid var(--line); text-align: center; }
.contact-card strong { margin-top: 11px; font-size: 14px; }
.contact-card span { max-width: 230px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.detail-section { padding: 18px; border-bottom: 1px solid var(--line); }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #34423c; font-size: 11px; font-weight: 800; }
.section-title svg { width: 14px; }
dl { margin: 0; }
dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 11px; }
dt { color: var(--muted); }
dd { margin: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }
.action-grid button, .primary-action, .secondary-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 5px; font-size: 11px; font-weight: 750; }
.action-grid button { color: #3b4943; background: #fff; border: 1px solid var(--line-strong); }
.action-grid button svg, .primary-action svg { width: 15px; }
.action-grid .primary-action { grid-column: 1 / -1; color: #fff; background: var(--green); border-color: var(--green); }
.history-section { min-height: 0; flex: 1; overflow-y: auto; }
.history-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 9px; padding-bottom: 14px; color: #49564f; font-size: 10px; line-height: 1.45; }
.history-marker { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: var(--green-light); border: 2px solid var(--green); }
.history-item time { display: block; margin-top: 3px; color: #8a948f; }
.connection-state { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; }
#connection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
#connection-dot.online { background: var(--green); }
.secondary-view { position: fixed; inset: 0 0 0 72px; z-index: 20; padding: 32px clamp(24px, 5vw, 72px); overflow-y: auto; background: #f5f8f6; }
.secondary-view > header { display: flex; justify-content: space-between; align-items: start; max-width: 1040px; margin: 0 auto 30px; }
.secondary-view h1 { margin: 0; font-size: 28px; }
.quick-layout { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
.section-copy { color: var(--muted); font-size: 13px; line-height: 1.5; }
.primary-action { color: #fff; background: var(--green); border: 1px solid var(--green); }
.secondary-button { color: var(--ink); background: #fff; border: 1px solid var(--line-strong); }
.quick-list { border-top: 1px solid var(--line-strong); }
.quick-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 17px 4px; border-bottom: 1px solid var(--line); }
.quick-item strong, .quick-item span, .quick-item p { display: block; }
.quick-item strong { font-size: 13px; }
.quick-item span { margin-top: 4px; color: var(--green); font-size: 10px; font-weight: 750; }
.quick-item p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.metric-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.metric { min-height: 150px; padding: 22px; background: #fff; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.metric span { color: var(--muted); font-size: 11px; }
.metric strong { display: block; margin-top: 24px; font-size: 34px; }
dialog { width: min(520px, calc(100vw - 32px)); padding: 0; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 20px 60px rgba(18, 56, 46, .18); }
dialog::backdrop { background: rgba(12, 31, 25, .45); }
dialog form { padding: 22px; }
dialog header, dialog footer { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
dialog h2 { margin: 0; font-size: 19px; }
dialog label { display: block; margin-top: 16px; color: #435049; font-size: 11px; font-weight: 700; }
dialog input, dialog textarea { width: 100%; display: block; margin-top: 7px; padding: 10px 11px; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 5px; outline: 0; }
dialog input:focus, dialog textarea:focus { border-color: var(--green); }
dialog footer { justify-content: end; margin-top: 20px; }
dialog.image-viewer { width: min(1120px, calc(100vw - 24px)); height: min(90dvh, 820px); max-width: none; max-height: none; padding: 0; overflow: hidden; color: #fff; background: #111714; border: 1px solid #34423c; border-radius: 6px; }
dialog.image-viewer::backdrop { background: rgba(5, 12, 9, .86); backdrop-filter: blur(3px); }
dialog.image-viewer > header { height: 58px; padding: 0 10px 0 18px; display: flex; align-items: center; gap: 14px; color: #f5f7f6; background: #18211d; border-bottom: 1px solid #34423c; }
dialog.image-viewer > header > strong { min-width: 0; flex: 1; font-size: 12px; }
.viewer-actions { display: flex; align-items: center; gap: 2px; }
.viewer-actions .icon-button { color: #dce5e1; }
.viewer-actions .icon-button:hover { color: #fff; background: #304039; border-color: #44554e; }
#viewer-zoom-label { width: 46px; color: #bdc9c3; font-size: 10px; text-align: center; }
.viewer-stage { height: calc(100% - 58px); overflow: auto; display: grid; place-items: center; padding: 16px; background: #0c110f; overscroll-behavior: contain; }
.viewer-stage img { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; }
.viewer-stage img.zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.viewer-stage img[aria-busy="true"] { opacity: .78; }
.login-screen { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(380px, 46%) 1fr; overflow: hidden; color: var(--ink); background: #f3f7f5; }
.login-brand { position: absolute; top: 28px; left: 34px; display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 800; }
.login-brand .brand-mark { width: 34px; height: 34px; }
.login-panel { display: grid; align-content: center; padding: 90px clamp(34px, 7vw, 110px) 50px; background: #fff; border-right: 1px solid var(--line); }
.login-copy h1 { max-width: 560px; margin: 0; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; font-weight: 720; }
.login-copy > p:last-child { max-width: 430px; margin: 22px 0 34px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.login-button { width: min(420px, 100%); display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 12px 14px; color: #fff; text-align: left; background: var(--green); border: 0; border-radius: 7px; }
.demo-password-field{width:min(420px,100%);display:grid;gap:7px;margin:20px 0 10px;color:var(--muted);font-size:12px;font-weight:700}.demo-password-field input{width:100%;min-height:46px;margin:0;padding:0 13px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:7px;font-size:15px;outline:0}.demo-password-field input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--surface-green)}
.login-button .avatar { width: 42px; height: 42px; color: #23463a; background: #f2c56f; }
.login-button strong, .login-button small { display: block; }
.login-button strong { font-size: 13px; }
.login-button small { margin-top: 3px; color: #cde9df; font-size: 10px; }
.login-button svg { width: 18px; }
.login-error { min-height: 18px; margin: 12px 0 0; color: var(--red); font-size: 11px; }
.login-preview { align-self: center; width: min(620px, calc(100% - 80px)); height: min(560px, calc(100% - 150px)); margin-left: 40px; padding: 52px 36px; background: #e4eee9; border: 1px solid #d0ddd7; border-radius: 8px 0 0 8px; box-shadow: 0 24px 80px rgba(18, 56, 46, .14); position: relative; overflow: hidden; }
.preview-row { width: 42%; height: 68px; margin-bottom: 10px; background: #fff; border: 1px solid #d6e1dc; border-radius: 6px; }
.preview-row.active { border-left: 4px solid var(--green); }
.preview-message { width: 45%; height: 90px; position: absolute; top: 118px; right: 34px; background: var(--green); border-radius: 8px 8px 2px 8px; }
#toast { position: fixed; z-index: 80; bottom: 18px; left: 50%; transform: translateX(-50%); display: none; max-width: calc(100vw - 32px); padding: 10px 14px; color: #fff; background: #1d2c26; border-radius: 5px; font-size: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
:focus-visible { outline: 3px solid #eeb14f; outline-offset: 2px; }
@media (max-width: 1180px) {
    .app-shell { grid-template-columns: 64px 320px minmax(400px, 1fr); }
    .detail-panel { display: none; }
    .secondary-view { left: 64px; }
}
@media (max-width: 780px) {
    html, body { overflow: hidden; }
    .app-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 64px; }
    .nav-rail { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 5px 10px; border: 0; border-top: 1px solid var(--line); background: #fff; }
    .nav-rail > .brand-mark, .rail-bottom .avatar { display: none; }
    .nav-rail nav, .rail-bottom { width: auto; display: flex; margin: 0; gap: 10px; }
    .rail-bottom { margin: 0; }
    .rail-button { width: 66px; min-height: 52px; color: #6f7c76; }
    .rail-button:hover, .rail-button.active { color: var(--green); background: var(--surface-green); }
    .inbox-panel { grid-row: 1; min-width: 0; }
    .conversation-panel { display: none; position: fixed; inset: 0 0 auto; height: calc(var(--console-viewport-height, 100dvh) - 64px); z-index: 12; }
    .conversation-panel.mobile-open { display: block; }
    .thread { grid-template-rows: 64px minmax(0, 1fr) 34px auto; }
    .mobile-back { display: inline-grid; }
    .thread-header { padding: 0 10px; }
    .thread-actions .status-pill { display: none; }
    .messages { padding: 18px 12px; }
    #composer { padding-bottom: max(11px, env(safe-area-inset-bottom)); }
    .attachment-preview { grid-template-columns: 54px minmax(0, 1fr) 34px; padding: 7px; }
    .attachment-preview img { width: 54px; height: 54px; }
    .attachment-preview-visual { width: 54px; height: 54px; }
    .message-row { max-width: 88%; }
    dialog.image-viewer { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
    dialog.image-viewer > header { padding-left: 12px; }
    dialog.image-viewer > header > strong { display: none; }
    .viewer-stage { padding: 8px; }
    .detail-panel { display: none; }
    .secondary-view { inset: 0 0 64px; padding: 24px 16px; }
    .quick-layout { grid-template-columns: 1fr; gap: 24px; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .login-screen { grid-template-columns: 1fr; }
    .login-brand { top: 22px; left: 22px; }
    .login-panel { padding: 100px 22px 48px; }
    .login-copy h1 { font-size: 38px; }
    .login-preview { display: none; }
}
@media (max-width: 420px) {
    .filter-tabs button { padding-inline: 7px; }
    .conversation-item { padding-inline: 13px; }
    .reply-tools span { display: none; }
    .metric-grid { grid-template-columns: 1fr; }
    .login-copy h1 { font-size: 33px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Visual refinement: professional inbox density with chat-first hierarchy. */
:root{
--ink:#18231f;
--muted:#5e6d66;
--line:#dbe3df;
--line-strong:#c9d4ce;
--surface-soft:#f5f8f6;
--surface-green:#f7ecf7;
--green:#ae42b3;
--green-dark:#843288;
--rail:#491c4b;
}
body{font-size:14px;line-height:1.45}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[role=button]:focus-visible{outline:3px solid #f0b64d;outline-offset:2px}
.app-shell{grid-template-columns:68px minmax(320px,370px) minmax(440px,1fr) 296px}
.nav-rail{padding:16px 8px 12px;background:var(--rail)}
.brand-mark{border-radius:8px}
.nav-rail nav{margin-top:34px;gap:5px}
.rail-button{min-height:54px;border-radius:7px;color:#b7cec5}
.rail-button span{font-size:10.5px}
.rail-button:hover,.rail-button.active{background:#215348}
.thread-header,.detail-panel>header{height:68px}
.icon-button{width:38px;height:38px;border-radius:7px}
.inbox-heading{padding:22px 18px 13px;align-items:center}
.inbox-heading h1{font-size:22px}
.eyebrow{letter-spacing:0;color:#31735e;font-size:10px}
.count-badge{min-width:28px;height:28px;border-radius:14px;box-shadow:0 0 0 4px #e5f3ed}
.search-box{height:42px;border-radius:8px;background:#f5f8f6}
.filter-tabs{padding-bottom:13px}
.filter-tabs button{min-height:34px;padding:7px 10px;border-radius:7px;font-size:11px}
.filter-tabs button.active{box-shadow:inset 0 0 0 1px #d6ebe2}
.list-summary{height:40px;font-size:10.5px;text-transform:none}
.conversation-list{scrollbar-color:#c4cec9 transparent;scrollbar-width:thin}
.conversation-list[aria-busy=true]:empty::before{content:"Memuat percakapan...";display:block;padding:34px 18px;color:var(--muted);font-size:12px;text-align:center}
.conversation-item{min-height:82px;padding:14px 15px;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;transition:background-color .14s ease}
.conversation-item.active{background:#e9f4ef}
.conversation-item.active::before{width:3px}
.conversation-item .avatar{width:40px;height:40px}
.conversation-name{font-size:13.5px;font-weight:760}
.conversation-subject{margin-top:4px;font-size:12px;line-height:1.35}
.conversation-meta{margin-top:6px;font-size:10.5px}
.conversation-side{min-height:54px;font-size:10.5px}
.conversation-unread{min-width:22px;height:22px;border-radius:11px;box-shadow:0 0 0 3px #e1f1ea;font-size:10.5px}
.conversation-panel{background:#f4f7f5}
.thread{grid-template-rows:68px minmax(0,1fr) 36px auto}
.thread-header{padding:0 17px}
.thread-title strong{font-size:14px}
.thread-title>span{font-size:11.5px}
.status-pill{padding:5px 9px;border-radius:999px}
.messages{padding:24px clamp(20px,4vw,58px);background:#f4f7f5;scrollbar-color:#c4cec9 transparent;scrollbar-width:thin}
.day-divider{margin-bottom:20px;color:#76837d;font-size:10px}
.message-row{max-width:78%;gap:9px;margin-bottom:12px}
.message-row .avatar{width:31px;height:31px;font-size:10px}
.message-bubble{padding:10px 12px 7px;border-radius:12px 12px 12px 3px;box-shadow:0 2px 8px rgba(20,49,39,.06)}
.message-row.mine .message-bubble{border-radius:12px 12px 3px 12px;background:var(--green);border-color:var(--green)}
.message-body{font-size:13.5px;line-height:1.5}
.deleted-copy{min-width:0;white-space:normal;font-size:12.5px;line-height:1.4}
.message-image{border-radius:7px}
.message-menu{border-radius:8px;box-shadow:0 16px 38px rgba(12,37,28,.18)}
.message-menu button{min-height:40px}
.reply-tools{min-height:36px;padding:0 17px;font-size:10.5px}
.text-tool{font-size:11.5px}
#composer{min-height:70px;padding:12px 15px;gap:9px;box-shadow:0 -1px 0 rgba(18,48,37,.03)}
#composer textarea{min-height:44px;padding:11px 13px;border-radius:8px;font-size:13.5px}
.send-button{width:44px;height:44px;border-radius:8px;box-shadow:0 5px 14px rgba(8,122,88,.18)}
.attachment-preview{border-radius:8px}
.detail-panel>header{padding:0 17px;font-size:13px}
.contact-card{padding:22px 17px 19px}
.contact-card strong{font-size:14px}
.contact-card span{font-size:11.5px}
.detail-section{padding:17px}
.section-title{font-size:11.5px}
dl>div{font-size:11.5px}
.action-grid button,.primary-action,.secondary-button{min-height:38px;border-radius:7px;font-size:11px}
.history-item{font-size:10.5px}
.connection-state{min-height:44px;position:relative;padding:0 17px 0 31px;font-size:10.5px;font-weight:620}
#connection-dot{position:absolute;left:17px;width:7px;height:7px;background:#d0912f;box-shadow:0 0 0 3px #f8ecd8}
.connection-state[data-state=online] #connection-dot{background:#0c9368;box-shadow:0 0 0 3px #dff2ea}
.connection-state[data-state=offline] #connection-dot{background:#c64d45;box-shadow:0 0 0 3px #f8e2df}
.empty-thread{background:#f7f9f8}
.empty-thread h2{font-size:18px}
.empty-thread p{max-width:300px;line-height:1.5}
.login-copy h1{font-size:56px;line-height:1.08}
.login-button{min-height:70px;border-radius:8px;box-shadow:0 8px 22px rgba(8,122,88,.14)}
.login-button[aria-busy=true]>svg{display:none}
.login-button[aria-busy=true]::after{content:"";width:18px;height:18px;border:2px solid #8dbbac;border-top-color:#fff;border-radius:50%;animation:officer-spin .8s linear infinite}
@keyframes officer-spin{to{transform:rotate(360deg)}}
.login-preview{border-radius:8px 0 0 8px}
#toast{padding:11px 15px;border-radius:8px;font-size:11.5px}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#c5d0ca;border:3px solid transparent;border-radius:8px;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}
@media(max-width:1180px){.app-shell{grid-template-columns:64px 340px minmax(400px,1fr)}}
@media(max-width:780px){
.app-shell{grid-template-rows:minmax(0,1fr) 62px}
.nav-rail{padding:4px 8px}
.rail-button{min-height:50px}
.conversation-panel{height:calc(var(--console-viewport-height,100dvh) - 62px)}
.thread{grid-template-rows:62px minmax(0,1fr) 34px auto}
.messages{padding:16px 12px}
.message-row{max-width:calc(100% - 20px)}
.message-body{font-size:14px}
#composer{padding:9px 9px max(9px,env(safe-area-inset-bottom))}
#composer textarea{font-size:16px}
.send-button{border-radius:50%}
.login-copy h1{font-size:38px}
}

/* Brand typography and primary-derived surfaces. */
h1,h2,h3,h4,h5,h6,.conversation-name,.thread-title strong,.contact-card strong,.section-title,.quick-item strong,.metric strong,dialog header strong{
font-family:"Raleway","Quicksand",ui-sans-serif,sans-serif;
}
body{font-size:16px;line-height:1.55}
.rail-button span{font-size:12px}
.inbox-heading h1{font-size:25px}.eyebrow{font-size:12px}.search-box input{font-size:14.5px}
.filter-tabs button{font-size:12.5px}.list-summary{font-size:12px}
.conversation-item{min-height:94px}.conversation-name{font-size:15.5px}.conversation-subject{font-size:13.5px}.conversation-meta{font-size:12px}.conversation-side{font-size:11.5px}
.thread-title strong{font-size:16px}.thread-title>span{font-size:12.5px}.status-pill{font-size:11.5px}
.day-divider{font-size:11.5px}.message-body{font-size:15.5px}.message-time{font-size:11px}
.reply-tools{font-size:12px}.text-tool{font-size:13px}#composer textarea{font-size:15.5px}
.detail-panel>header{font-size:14.5px}.contact-card strong{font-size:15.5px}.contact-card span{font-size:13px}
.section-title,dl>div{font-size:12.5px}.action-grid button,.primary-action,.secondary-button{font-size:12.5px}.history-item,.connection-state{font-size:11.5px}
.conversation-item.active,.filter-tabs button:hover,.filter-tabs button.active,.message-menu button:hover{background:var(--surface-green)}
.conversation-unread,.count-badge{box-shadow:0 0 0 3px var(--surface-green)}
.search-box:focus-within,#composer textarea:focus,dialog input:focus,dialog textarea:focus{box-shadow:0 0 0 3px var(--surface-green)}
@media(max-width:780px){
.conversation-name{font-size:15.5px}.conversation-subject{font-size:13.5px}.message-body{font-size:15.5px}
}
@media(max-width:420px){.login-copy h1{font-size:34px}.conversation-item{padding-inline:13px}}
@media(prefers-reduced-motion:reduce){.login-button[aria-busy=true]::after{animation:none}}

/* Mobile console: full-height thread and stable app-style bottom navigation. */
.message-row{width:fit-content}
.message-row.mine .message-bubble{
color:#17372d;
background:#dcefe7;
border-color:#c7e3d8;
}
.message-row.mine .deleted-copy{color:#61776e}
.message-row.mine .message-time{color:#557168}
.message-row.mine .delivery-status{color:#34705e}
.message-row.mine .delivery-status.read{color:#087f9a}
.conversation-item.active .avatar{color:#fff;background:var(--green)}
@media(max-width:780px){
.app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 68px}
.nav-rail{
grid-column:1;
width:100%;
height:68px;
min-height:68px;
display:flex;
align-items:stretch;
justify-content:stretch;
gap:0;
overflow:hidden;
padding:0 8px;
background:#fff;
border-top:1px solid var(--line);
}
.nav-rail nav{
width:auto;
min-width:0;
height:100%;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
flex:3 1 0;
gap:0;
align-items:stretch;
margin:0;
}
.nav-rail .rail-bottom{
width:auto;
min-width:0;
height:100%;
display:grid;
grid-template-columns:minmax(0,1fr);
flex:1 1 0;
gap:0;
align-items:stretch;
}
.nav-rail .rail-button{
width:100%;
min-width:0;
min-height:0;
height:67px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:6px 2px 5px;
border-radius:0;
color:#66766f;
background:transparent;
}
.nav-rail .rail-button svg{width:19px;height:19px}
.nav-rail .rail-button span{font-size:10px;line-height:1.1}
.nav-rail .rail-button:hover,.nav-rail .rail-button.active{color:var(--green);background:#edf6f2}
.conversation-panel{
inset:0;
height:var(--console-viewport-height,100dvh);
z-index:20;
}
.thread{grid-template-rows:62px minmax(0,1fr) 34px auto}
.thread-header{height:62px;padding:0 9px;gap:9px}
.thread-header .avatar{width:36px;height:36px}
.thread-title strong{font-size:14px}
.thread-title>span{margin-top:2px;font-size:10.5px}
.messages{padding:16px 11px 12px}
.message-row{width:fit-content;max-width:92%;margin-bottom:9px;gap:7px}
.message-row.mine{max-width:84%}
.message-row .avatar{width:30px;height:30px}
.message-bubble{padding:9px 11px 6px;border-radius:12px 12px 12px 3px}
.message-row.mine .message-bubble{border-radius:12px 12px 3px 12px}
.message-body{font-size:14px;line-height:1.45}
.reply-tools{min-height:34px;padding:0 12px}
#composer{min-height:66px;padding:8px 9px max(8px,env(safe-area-inset-bottom));gap:8px}
#composer textarea{min-height:44px;padding:11px 12px;background:#f5f8f6}
.send-button{width:44px;height:44px}
}

/* Tenant theme controls and readable application typography. */
:root{--theme-contrast:#fff}
body{font-size:15px;line-height:1.5}
.brand-mark,.count-badge,.conversation-unread,.primary-action,.action-grid .primary-action,.send-button,.login-button{color:var(--theme-contrast)}
.rail-button span{font-size:11.5px}
.inbox-heading h1{font-size:24px}.eyebrow{font-size:11px;letter-spacing:0}.search-box input{font-size:14px}
.filter-tabs button{font-size:12px}.list-summary{font-size:11.5px}
.conversation-item{min-height:90px;grid-template-columns:44px minmax(0,1fr) auto}
.conversation-item .avatar{width:42px;height:42px;background:var(--green-light);font-size:12px}
.conversation-item.active{background:var(--surface-green)}.conversation-item.active .avatar{color:var(--theme-contrast);background:var(--green)}
.conversation-name{font-size:15px}.conversation-subject{font-size:13px}.conversation-meta{font-size:11.5px}.conversation-side{font-size:11px}
.conversation-unread{font-size:11px;box-shadow:0 0 0 3px var(--surface-green)}
.thread-title strong{font-size:15px}.thread-title>span{font-size:12px}.status-pill{font-size:11px;background:var(--surface-green);border-color:var(--green-light)}
.day-divider{font-size:11px}.message-body{font-size:15px}.message-time{font-size:10.5px}.message-meta{font-size:11px}
.message-row.mine .message-bubble{color:var(--green-dark);background:var(--surface-green);border-color:var(--green-light)}
.message-row.mine .deleted-copy,.message-row.mine .message-time,.message-row.mine .delivery-status{color:var(--green-dark)}
.message-menu button{font-size:12px}.reply-tools{font-size:11.5px}.text-tool{font-size:12.5px}
#composer textarea{font-size:15px}.attachment-preview strong{font-size:12px}.attachment-preview small{font-size:10.5px}
.detail-panel>header{font-size:14px}.contact-card strong{font-size:15px}.contact-card span{font-size:12.5px}
.section-title,dl>div{font-size:12px}.action-grid button,.primary-action,.secondary-button{font-size:12px}.history-item,.connection-state{font-size:11px}
.section-copy{font-size:14px}.quick-item strong{font-size:14px}.quick-item span{font-size:11px}.quick-item p{font-size:13px}
.metric span{font-size:12px}.dialog-copy{margin:12px 0 2px;color:var(--muted);font-size:13px;line-height:1.55}
.branding-dialog{width:min(580px,calc(100vw - 28px))}.branding-dialog form{padding:24px}.branding-dialog label{font-size:12px}
.branding-dialog input,.branding-dialog textarea{font-size:14px}
.color-field{min-width:0;margin:20px 0 0;padding:0;border:0}.color-field legend{margin-bottom:9px;color:#435049;font-size:12px;font-weight:700}
.color-input-row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px}.color-input-row input{margin:0}
#branding-color{width:54px;height:44px;padding:4px;cursor:pointer;background:#fff}
#branding-hex{height:44px;font-variant-numeric:tabular-nums;text-transform:uppercase}
.color-swatches{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.color-swatches button{width:30px;height:30px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px var(--line-strong)}
.color-swatches button:hover,.color-swatches button:focus-visible{box-shadow:0 0 0 3px var(--surface-green)}
.theme-preview{min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;margin-top:18px;padding:13px;background:var(--surface-green);border:1px solid var(--green-light);border-radius:8px}
.preview-brand{width:42px;height:42px;display:grid;place-items:center;color:var(--theme-contrast);background:var(--green);border-radius:8px;font-size:12px;font-weight:850}
.theme-preview>div{min-width:0}.theme-preview strong,.theme-preview small{display:block}.theme-preview strong{font-size:13px}.theme-preview small{margin-top:3px;color:var(--muted);font-size:11px}
.preview-badge{min-width:24px;height:24px;display:grid;place-items:center;padding:0 6px;color:var(--theme-contrast);background:var(--green);border-radius:12px;font-size:11px;font-weight:800}
.branding-error{min-height:20px;margin:10px 0 0;color:var(--red);font-size:12px}.branding-dialog footer{align-items:center}
.thread #composer{position:relative;bottom:0;border-top:1px solid var(--line)}
.status-confirm-dialog{width:min(430px,calc(100vw - 28px))}.status-confirm-content{padding:26px;text-align:center}.status-confirm-icon{width:48px;height:48px;margin:0 auto 15px;display:grid;place-items:center;color:var(--green-dark);background:var(--surface-green);border-radius:50%}.status-confirm-icon svg{width:22px}.status-confirm-content h2{margin:0;font-size:20px}.status-confirm-content p{margin:11px 0 22px;color:var(--muted);font-size:13.5px;line-height:1.6}.status-confirm-actions{display:flex;justify-content:center;gap:9px}.status-confirm-actions button{min-height:42px;padding-inline:18px}
.search-box:focus-within,#composer textarea:focus,dialog input:focus,dialog textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--surface-green)}
@media(max-width:780px){
.inbox-heading h1{font-size:25px}.conversation-item{min-height:88px}.conversation-name{font-size:15px}.conversation-subject{font-size:13px}
.thread-title strong{font-size:15px}.thread-title>span{font-size:11.5px}.message-body{font-size:15px}.reply-tools{font-size:11px}
.branding-dialog{max-height:calc(100dvh - 16px);overflow-y:auto}.branding-dialog form{padding:20px}.theme-preview small{white-space:normal}
}

/* Final type scale: prevent legacy compact rules from shrinking current UI. */
body{font-size:16px;line-height:1.55}
.rail-button span{font-size:12px}
.inbox-heading h1{font-size:25px}.eyebrow{font-size:12px}.search-box input{font-size:14.5px}
.filter-tabs button{font-size:12.5px}.list-summary{font-size:12px}
.conversation-item{min-height:94px}.conversation-name{font-size:15.5px}.conversation-subject{font-size:13.5px}.conversation-meta{font-size:12px}.conversation-side{font-size:11.5px}
.thread-title strong{font-size:16px}.thread-title>span{font-size:12.5px}.status-pill{font-size:11.5px}
.day-divider{font-size:11.5px}.message-body{font-size:15.5px}.message-time{font-size:11px}
.reply-tools{font-size:12px}.text-tool{font-size:13px}#composer textarea{font-size:15.5px}
.detail-panel>header{font-size:14.5px}.contact-card strong{font-size:15.5px}.contact-card span{font-size:13px}
.section-title,dl>div{font-size:12.5px}.action-grid button,.primary-action,.secondary-button{font-size:12.5px}.history-item,.connection-state{font-size:11.5px}
.nav-rail .rail-button:hover,.nav-rail .rail-button.active{background:var(--surface-green)}
@media(max-width:780px){.nav-rail .rail-button span{font-size:11px}.thread-title strong{font-size:15.5px}.thread-title>span{font-size:12px}.message-body{font-size:15.5px}}

/* Tenant identity now lives in the inbox heading; action hovers use derived dark color. */
.inbox-heading{align-items:center;padding-top:22px}
.inbox-heading>div:first-child{min-width:0}
.inbox-service{margin:4px 0 0;color:var(--muted);font-size:12px}
.inbox-heading-actions{display:flex;align-items:center;gap:8px}
.inbox-heading-actions .icon-button:hover,
.filter-tabs button:hover,
.message-menu button:hover{color:var(--theme-contrast);background:var(--green-dark);border-color:var(--green-dark)}
.filter-tabs button.active{color:var(--green-dark);background:var(--surface-green)}
.nav-rail .rail-button:hover{color:#fff;background:var(--green-dark)}
.nav-rail .rail-button.active{color:#fff;background:var(--green)}
.conversation-item:hover .avatar{color:var(--theme-contrast);background:var(--green-dark)}
.action-grid .primary-action:disabled,#claim:disabled{color:var(--green-dark);background:var(--surface-green);border-color:var(--green-light);opacity:1}
@media(max-width:780px){
    .inbox-heading{padding-top:18px}
    .inbox-service{font-size:11.5px}
}

/* Content-sized message bubbles shared with the embedded officer experience. */
.conversation-panel,.messages{
background-color:var(--surface-green);
}
.messages{
background-image:radial-gradient(color-mix(in srgb,var(--green) 12%,transparent) .7px,transparent .7px);
background-size:18px 18px;
}
.message-row{
width:fit-content;
min-width:0;
max-width:min(760px,78%);
grid-template-columns:30px auto;
align-items:end;
justify-content:start;
}
.message-row.mine{
width:fit-content;
max-width:min(700px,74%);
display:flex;
flex-direction:column;
align-items:flex-end;
}
.message-bubble{
width:fit-content;
min-width:0;
max-width:100%;
justify-self:start;
padding:10px 12px 7px;
border-color:#d9e2dd;
border-radius:16px 16px 16px 5px;
box-shadow:0 1px 2px rgba(24,43,34,.06),0 7px 18px rgba(24,43,34,.045);
transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms cubic-bezier(.2,.8,.2,1);
}
.message-row.mine .message-bubble{
align-self:flex-end;
border-radius:16px 16px 5px 16px;
box-shadow:0 1px 2px color-mix(in srgb,var(--green-dark) 10%,transparent),0 7px 18px color-mix(in srgb,var(--green-dark) 7%,transparent);
}
.message-bubble:hover{
transform:translateY(-1px);
box-shadow:0 2px 4px rgba(24,43,34,.07),0 10px 24px rgba(24,43,34,.06);
}
.message-bubble.has-actions{padding-right:38px}
.message-body{
width:auto;
max-width:100%;
}
.message-footer{
width:max-content;
min-width:0;
margin-left:auto;
padding-top:1px;
}
.message-image{
width:min(360px,55vw);
max-width:100%;
border-radius:11px;
}
.delivery-status{
width:20px;
min-width:20px;
height:13px;
display:inline-block;
position:relative;
color:var(--green-dark);
font-size:0;
line-height:1;
}
.delivery-status::before,.delivery-status::after{
content:"";
width:4px;
height:8px;
position:absolute;
top:0;
border-right:1.7px solid currentColor;
border-bottom:1.7px solid currentColor;
transform:rotate(45deg);
transform-origin:center;
}
.delivery-status::before{left:2px}
.delivery-status::after{left:7px}
.delivery-status.sent::before{left:7px}
.delivery-status.sent::after{display:none}
.delivery-status.read{color:#1687a7}
@media(max-width:780px){
.message-row{max-width:calc(100% - 14px);grid-template-columns:30px auto}
.message-row.mine{max-width:calc(100% - 30px)}
.message-bubble{border-radius:15px 15px 15px 5px}
.message-row.mine .message-bubble{border-radius:15px 15px 5px 15px}
.message-image{width:min(340px,72vw)}
}
@media(hover:none){
.message-bubble:hover{transform:none}
}