:root { --ink:#171614; --ink-soft:#4d4a45; --muted:#88837b; --paper:#f2f0ec; --surface:#fffefa; --surface-soft:#f8f6f2; --line:#e4e0d8; --gold:#d9ad27; --gold-deep:#99700a; --gold-pale:#f7edc8; --teal:#2f7770; --teal-pale:#e2f1ee; --orange:#b9693c; --orange-pale:#f8e8dd; --shadow:0 18px 42px rgba(26,20,8,.08); font-family:'Noto Sans SC','Microsoft YaHei',sans-serif; color:var(--ink); background:#dedbd5; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { min-width:320px; min-height:100%; margin:0; background:#dedbd5; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(217,173,39,.38); outline-offset:2px; }
.app-shell { min-height:100vh; max-width:1600px; margin:0 auto; background:var(--paper); }
.topbar { display:flex; align-items:center; height:72px; padding:0 30px; color:#fff; background:var(--ink); }
.brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.brand img { width:32px; height:32px; object-fit:contain; }
.brand span { font-size:19px; font-weight:750; letter-spacing:-.03em; }
.brand b { color:var(--gold); font-weight:650; }
.topbar-center { display:flex; align-items:center; gap:8px; margin-left:48px; color:#c3beb3; font-size:11px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#65b49a; box-shadow:0 0 0 4px rgba(101,180,154,.12); }
.divider { width:1px; height:13px; margin:0 3px; background:#4b4842; }
.topbar-actions { display:flex; align-items:center; gap:14px; margin-left:auto; }
.icon-button { display:inline-grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:7px; color:var(--ink-soft); background:transparent; transition:background 160ms ease,color 160ms ease,transform 160ms ease; }
.icon-button:hover { color:var(--ink); background:#ece9e3; }
.icon-button:active,.send-button:active,.operator-button:active { transform:scale(.96); }
.topbar .icon-button { color:#d7d1c6; }
.topbar .icon-button:hover { color:#fff; background:#2b2926; }
.icon-button svg { width:17px; height:17px; stroke-width:1.8; }
.operator-button { display:flex; align-items:center; gap:8px; padding:4px 0 4px 4px; border:0; color:#fff; background:transparent; }
.operator-avatar,.customer-avatar { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; color:var(--ink); background:var(--gold); font-size:12px; font-weight:750; }
.customer-avatar.teal { color:#235d58; background:#cce6e1; }
.customer-avatar.orange { color:#8e4b2d; background:#f3d4c3; }
.customer-avatar.dark { color:#fff; background:#353330; }
.operator-avatar { color:#fff; background:#4b4945; }
.operator-name { font-size:11px; font-weight:650; }
.operator-button svg { width:14px; color:#a9a39a; }
.workspace { display:grid; grid-template-columns:minmax(270px,310px) minmax(420px,1fr) minmax(295px,350px); min-height:calc(100vh - 72px); }
.queue-panel,.conversation-panel,.context-panel { min-width:0; }
.queue-panel { display:flex; flex-direction:column; padding:27px 20px 18px; border-right:1px solid var(--line); background:#ebe9e5; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; }
.eyebrow { display:block; color:var(--gold-deep); font-size:9px; font-weight:800; letter-spacing:.14em; }
.panel-heading h1 { margin:7px 0 0; font-size:22px; letter-spacing:-.04em; }
.quiet { color:#918b82; }
.queue-summary { display:flex; align-items:baseline; gap:5px; padding:20px 0 16px; margin-bottom:13px; border-bottom:1px solid #dcd8d1; color:var(--muted); font-size:10px; }
.queue-summary strong { color:var(--ink); font:750 26px 'DM Sans',sans-serif; letter-spacing:-.05em; }
.queue-summary .muted-number { color:#a39d93; font-size:20px; }
.summary-separator { width:1px; height:17px; margin:0 7px; background:#d0cbc3; }
.search-box { display:flex; align-items:center; gap:8px; height:39px; padding:0 11px; border:1px solid #d3cfc8; border-radius:6px; background:#f8f6f2; }
.search-box:focus-within { border-color:var(--gold-deep); background:#fffefa; box-shadow:0 0 0 3px rgba(217,173,39,.12); }
.search-box svg { width:15px; color:#9b958c; }
.search-box input { min-width:0; width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:11px; }
.search-box input::placeholder { color:#9b958c; }
.queue-tabs { display:flex; gap:18px; padding:18px 0 11px; border-bottom:1px solid #dcd8d1; }
.queue-tab { position:relative; display:flex; align-items:center; gap:4px; padding:0 0 9px; border:0; color:#948e85; background:transparent; font-size:11px; }
.queue-tab::after { position:absolute; right:0; bottom:-1px; left:0; height:2px; content:''; background:transparent; }
.queue-tab.is-active { color:var(--ink); font-weight:750; }
.queue-tab.is-active::after { background:var(--gold); }
.queue-tab b { display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px; color:#8c857c; background:#ddd9d1; font:10px 'DM Sans',sans-serif; }
.queue-tab.is-active b { color:var(--gold-deep); background:var(--gold-pale); }
.conversation-list { display:grid; gap:2px; overflow:auto; padding:8px 0; }
.conversation-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; padding:12px 10px; border:0; border-radius:6px; color:var(--ink); background:transparent; text-align:left; transition:background 150ms ease; }
.conversation-item:hover { background:#e3e0da; }
.conversation-item.is-selected { background:var(--surface); box-shadow:0 2px 7px rgba(37,29,13,.05); }
.conversation-item .customer-avatar { width:34px; height:34px; font-size:11px; }
.conversation-copy { min-width:0; }
.conversation-line { display:flex; align-items:center; gap:6px; min-width:0; }
.conversation-line strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.conversation-line time { flex:0 0 auto; margin-left:auto; color:#aaa39a; font:10px 'DM Sans',sans-serif; }
.conversation-preview { display:block; overflow:hidden; margin-top:4px; color:#89847c; font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.conversation-ticket { display:block; margin-top:5px; color:#aaa39a; font:9px 'DM Sans',sans-serif; }
.unread-count { display:grid; place-items:center; width:17px; height:17px; margin-top:3px; border-radius:50%; color:#fff; background:var(--orange); font:10px 'DM Sans',sans-serif; }
.conversation-item.is-muted { opacity:.58; }
.queue-footer { display:flex; align-items:center; justify-content:space-between; gap:7px; padding-top:13px; margin-top:auto; border-top:1px solid #dcd8d1; color:#918b82; font-size:9px; }
.queue-footer span { display:flex; align-items:center; gap:5px; }
.queue-footer svg { width:13px; color:var(--teal); }
.text-action { padding:0; border:0; color:var(--gold-deep); background:transparent; font-size:10px; }
.text-action:hover { text-decoration:underline; text-underline-offset:3px; }
.conversation-panel { display:flex; flex-direction:column; min-height:0; background:var(--surface); }
.conversation-header { display:flex; align-items:center; gap:13px; min-height:83px; padding:20px 28px 14px; border-bottom:1px solid var(--line); }
.mobile-back { display:none; }
.customer-heading { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.customer-heading .customer-avatar { width:40px; height:40px; font-size:14px; }
.heading-name-row { display:flex; align-items:center; gap:8px; }
.heading-name-row h2 { overflow:hidden; margin:0; font-size:17px; letter-spacing:-.03em; text-overflow:ellipsis; white-space:nowrap; }
.verified-badge { display:inline-flex; align-items:center; gap:3px; color:var(--teal); font-size:9px; white-space:nowrap; }
.verified-badge svg { width:13px; }
.customer-heading p { display:flex; align-items:center; gap:6px; margin:5px 0 0; color:#969087; font:10px 'DM Sans','Noto Sans SC',sans-serif; }
.dot-separator { color:#c0bab0; }
.conversation-actions { display:flex; gap:2px; }
.conversation-meta { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 28px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; }
.ticket-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:4px; color:var(--ink-soft); background:#f2efe9; font:10px 'DM Sans','Noto Sans SC',sans-serif; }
.ticket-pill svg { width:13px; color:var(--orange); }
.meta-label { color:var(--gold-deep); }
.meta-time { margin-left:auto; color:#aaa39a; font-size:9px; }
.message-thread { display:flex; flex:1; flex-direction:column; gap:17px; overflow:auto; padding:26px 42px 22px; }
.thread-day { align-self:center; color:#aaa39a; font-size:9px; }
.message { display:flex; flex-direction:column; gap:5px; max-width:min(74%,560px); }
.message.customer { align-self:flex-start; }
.message.agent { align-self:flex-end; align-items:flex-end; }
.message-meta { display:flex; align-items:center; gap:6px; color:#aaa39a; font-size:9px; }
.message.agent .message-meta { flex-direction:row-reverse; }
.message-bubble { padding:11px 13px; border-radius:10px 10px 10px 3px; color:var(--ink-soft); background:#efede9; font-size:12px; line-height:1.65; }
.message.agent .message-bubble { border-radius:10px 10px 3px 10px; color:#fff; background:var(--ink); }
.message-bubble a { color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.composer-wrap { padding:0 28px 20px; }
.suggestion-row { display:flex; gap:7px; overflow:auto; padding:0 0 10px; scrollbar-width:none; }
.suggestion-row::-webkit-scrollbar { display:none; }
.suggestion-row button { flex:0 0 auto; min-height:27px; padding:0 9px; border:1px solid #dcd7ce; border-radius:4px; color:#7e786f; background:#faf8f4; font-size:9px; }
.suggestion-row button:hover { border-color:#d1b55b; color:var(--gold-deep); background:#fffaf0; }
.message-composer { display:flex; align-items:flex-end; gap:5px; min-height:63px; padding:7px 8px 7px 10px; border:1px solid #d4cfc6; border-radius:7px; background:#fff; box-shadow:0 3px 13px rgba(36,28,12,.04); }
.message-composer:focus-within { border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(217,173,39,.12); }
.composer-tool { width:30px; height:30px; color:#999289; }
.message-composer textarea { min-width:0; min-height:31px; max-height:100px; flex:1; padding:7px 4px; border:0; outline:0; resize:none; color:var(--ink); background:transparent; font-size:12px; line-height:1.45; }
.message-composer textarea::placeholder { color:#aaa39a; }
.composer-end { display:flex; align-items:center; gap:6px; }
.character-count { color:#b0aaa2; font:9px 'DM Sans',sans-serif; }
.send-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:5px; color:var(--ink); background:var(--gold); transition:transform 160ms ease,background 160ms ease; }
.send-button:hover { background:#e5bc3e; }
.send-button svg { width:16px; }
.composer-note { display:flex; align-items:center; justify-content:flex-end; gap:4px; padding-top:8px; color:#aaa39a; font-size:9px; }
.composer-note svg { width:12px; }
.context-panel { padding:27px 22px 21px; border-left:1px solid var(--line); background:#faf9f6; }
.context-heading { display:flex; align-items:center; justify-content:space-between; }
.context-profile { display:flex; align-items:center; gap:10px; padding:22px 0 23px; border-bottom:1px solid var(--line); }
.customer-avatar.large { width:43px; height:43px; font-size:15px; }
.context-profile > div:nth-child(2) { min-width:0; flex:1; }
.context-profile h2 { margin:0 0 5px; font-size:17px; }
.context-profile p { display:flex; align-items:center; gap:5px; margin:0; color:#918b83; font:10px 'DM Sans','Noto Sans SC',sans-serif; }
.context-profile p svg { width:12px; color:var(--gold-deep); }
.context-section { padding:19px 0; border-bottom:1px solid var(--line); }
.context-section.compact { padding-bottom:20px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; color:#807a72; font-size:10px; font-weight:700; }
.section-status { display:inline-flex; align-items:center; gap:5px; color:var(--orange); font-size:9px; font-weight:600; }
.section-status::before { width:6px; height:6px; border-radius:50%; content:''; background:var(--orange); }
.work-order-card { padding:13px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.work-order-top { display:flex; align-items:center; justify-content:space-between; }
.work-order-top strong { color:var(--ink-soft); font:700 11px 'DM Sans','Noto Sans SC',sans-serif; }
.icon-button.mini { width:25px; height:25px; }
.icon-button.mini svg { width:14px; }
.work-order-card p { margin:6px 0 15px; color:#888279; font-size:10px; }
.work-order-progress { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; color:#8b857d; font-size:9px; }
.work-order-progress strong { color:var(--ink-soft); font:10px 'DM Sans',sans-serif; }
.progress-track { height:4px; overflow:hidden; border-radius:2px; background:#e9e5de; }
.progress-track b { display:block; width:50%; height:100%; border-radius:2px; background:var(--gold); }
.work-order-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; margin-top:12px; border-top:1px solid #eeeae4; color:#a19b92; font-size:9px; }
.work-order-foot span:first-child { display:flex; align-items:center; gap:4px; color:var(--teal); }
.work-order-foot svg { width:12px; }
.record-list { display:grid; gap:2px; }
.record-item { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 0; }
.record-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:5px; }
.record-icon.gold { color:var(--gold-deep); background:var(--gold-pale); }
.record-icon.teal { color:var(--teal); background:var(--teal-pale); }
.record-icon svg { width:14px; }
.record-item > span:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; gap:4px; }
.record-item strong { overflow:hidden; color:var(--ink-soft); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.record-item small { color:#9c968d; font-size:9px; }
.record-item > svg { width:14px; color:#b0aaa2; }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; }
.tag-list span { padding:5px 8px; border-radius:3px; color:#777168; background:#eeebe5; font-size:9px; }
.tag-list span:first-child { color:var(--gold-deep); background:var(--gold-pale); }
.context-footer { display:flex; align-items:flex-start; gap:8px; padding-top:20px; color:#9a948c; font-size:9px; line-height:1.7; }
.context-footer svg { width:14px; flex:0 0 14px; color:#b0a99f; }
.toast { position:fixed; right:24px; bottom:23px; z-index:20; display:flex; align-items:center; gap:7px; max-width:360px; padding:10px 13px; border-radius:5px; color:#fff; background:var(--ink); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 180ms ease,transform 180ms ease; font-size:11px; }
.toast.is-visible { opacity:1; transform:translateY(0); }
.toast svg { width:15px; color:var(--gold); }
.account-popover { position:fixed; top:62px; right:22px; z-index:30; display:grid; width:194px; padding:8px; border:1px solid var(--line); border-radius:7px; background:#fffefa; box-shadow:0 14px 30px rgba(28,21,9,.15); opacity:0; pointer-events:none; transform:translateY(-5px); transition:opacity 150ms ease,transform 150ms ease; }
.account-popover.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.account-popover-head { display:flex; align-items:center; gap:8px; padding:7px 7px 10px; margin-bottom:3px; border-bottom:1px solid var(--line); }
.account-popover-head > span:last-child { display:flex; flex-direction:column; gap:3px; }
.account-popover-head strong { font-size:11px; }
.account-popover-head small { color:var(--muted); font-size:9px; }
.account-popover > button { display:flex; align-items:center; gap:8px; min-height:34px; padding:0 7px; border:0; border-radius:4px; color:var(--ink-soft); background:transparent; text-align:left; font-size:10px; }
.account-popover > button:hover { background:var(--surface-soft); }
.account-popover > button svg { width:14px; color:#948e85; }
.mobile-context-drawer { display:none; }
.mobile-context-button { display:none; }
.desktop-context-open { display:none; }
.app-shell.context-collapsed .workspace { grid-template-columns:minmax(270px,310px) minmax(420px,1fr) 0; }
.app-shell.context-collapsed .context-panel { display:none; }
.app-shell.context-collapsed .conversation-panel { grid-column:2 / 4; }
.app-shell.context-collapsed .desktop-context-open { display:inline-grid; }
.empty-queue { padding:28px 10px; color:var(--muted); font-size:11px; text-align:center; }
@media (max-width:1100px) { .workspace { grid-template-columns:270px minmax(420px,1fr) 285px; }.queue-panel { padding-right:15px; padding-left:15px; }.conversation-header,.conversation-meta,.composer-wrap { padding-right:20px; padding-left:20px; }.message-thread { padding-right:25px; padding-left:25px; }.context-panel { padding-right:16px; padding-left:16px; } }
@media (max-width:820px) { .workspace { display:block; min-height:calc(100vh - 64px); }.topbar { width:100%; min-width:0; height:64px; padding:0 16px; }.topbar-center { display:none; }.operator-name { display:none; }.queue-panel { min-height:calc(100vh - 64px); border-right:0; }.conversation-panel { display:none; min-height:calc(100vh - 64px); }.context-panel { display:none; }.app-shell.is-conversation .queue-panel { display:none; }.app-shell.is-conversation .conversation-panel { display:flex; }.mobile-back { display:inline-grid; width:32px; height:32px; }.mobile-context-button { display:inline-grid; }.conversation-header { padding:15px 16px 12px; }.conversation-meta { padding:0 16px; }.message-thread { padding:22px 16px 18px; }.composer-wrap { padding:0 12px 16px; }.meta-time { display:none; }.message { max-width:88%; }.mobile-context-drawer { position:fixed; inset:0; z-index:40; display:block; padding:22px 18px; overflow:auto; background:var(--paper); opacity:0; pointer-events:none; transform:translateX(100%); transition:opacity 180ms ease,transform 220ms ease; }.mobile-context-drawer.is-visible { opacity:1; pointer-events:auto; transform:translateX(0); }.drawer-close { position:absolute; top:13px; right:13px; }.drawer-content { padding-top:12px; }.context-drawer-open .drawer-content { display:block; } }
@media (max-width:420px) { .topbar { padding:0 12px; }.topbar-actions { flex-shrink:0; gap:3px; }.topbar .icon-button { width:30px; height:30px; }.operator-button { padding:2px; }.operator-avatar { width:28px; height:28px; flex-basis:28px; }.brand span { font-size:17px; }.conversation-header { gap:8px; }.heading-name-row h2 { font-size:15px; }.verified-badge { display:none; }.suggestion-row button { font-size:8px; }.composer-note { font-size:8px; }.conversation-actions .icon-button { width:30px; } }
body.dark-mode { --paper:#1b1a18; --surface:#24221f; --surface-soft:#2b2925; --line:#3b3832; --ink:#f3f0e8; --ink-soft:#d7d1c6; --muted:#aaa39a; background:#11100f; }
body.dark-mode .app-shell { background:var(--paper); }
body.dark-mode .queue-panel { background:#201f1c; }
body.dark-mode .context-panel { background:#1e1d1a; }
body.dark-mode .search-box, body.dark-mode .work-order-card, body.dark-mode .message-composer, body.dark-mode .conversation-item.is-selected, body.dark-mode .account-popover { color:var(--ink); background:#2a2824; border-color:var(--line); }
body.dark-mode .conversation-item:hover { background:#2a2824; }
body.dark-mode .message-bubble { color:var(--ink-soft); background:#35322d; }
body.dark-mode .queue-tab b { color:#c4bcae; background:#3b3832; }
body.dark-mode .tag-list span { color:#d7d1c6; background:#36332e; }
body.dark-mode .mobile-context-drawer { background:var(--paper); }

.app-shell.is-locked { visibility:hidden; }
.auth-screen { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:28px; background:#dedbd5; }
.auth-screen.is-hidden { display:none; }
.auth-card { width:min(440px,100%); padding:38px 40px 32px; border:1px solid #ddd8cf; border-radius:10px; background:var(--surface); box-shadow:0 20px 60px rgba(35,27,10,.1); }
.auth-brand { display:flex; align-items:center; gap:9px; margin-bottom:42px; color:var(--ink); }
.auth-brand img { width:33px; height:33px; object-fit:contain; }
.auth-brand span { font-size:20px; font-weight:750; letter-spacing:-.03em; }
.auth-brand b { color:var(--gold-deep); font-weight:650; }
.auth-card h1 { margin:8px 0 9px; font-size:29px; letter-spacing:-.055em; }
.auth-intro { max-width:350px; margin:0 0 26px; color:var(--ink-soft); font-size:12px; line-height:1.7; }
.login-form { display:grid; gap:8px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; margin:0 0 16px; border-radius:6px; background:#ebe8e2; }
.auth-tab { min-height:34px; padding:0 8px; border:0; border-radius:4px; color:var(--muted); background:transparent; font-size:11px; font-weight:700; }
.auth-tab.is-selected { color:var(--ink); background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.06); }
.auth-register-fields { display:none; gap:8px; }
.auth-register-fields.is-visible { display:grid; }
.auth-field-note { display:flex; align-items:center; gap:5px; margin:0 0 2px; color:var(--muted); font-size:9px; }
.auth-field-note svg { width:12px; color:var(--teal); }
.login-form > label:not(.remember-row) { margin-top:3px; color:var(--ink-soft); font-size:11px; font-weight:700; }
.login-input { display:flex; align-items:center; min-height:47px; padding:0 11px; border:1px solid #d2cdc4; border-radius:6px; background:#fff; }
.login-input:focus-within { border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(217,173,39,.13); }
.login-input > svg { width:16px; margin-right:7px; color:#9a948a; }
.login-input input { min-width:0; flex:1; border:0; outline:0; color:var(--ink); background:transparent; font-size:13px; }
.login-input input::placeholder { color:#aaa39a; }
.code-button { min-width:88px; min-height:31px; padding:0 7px; border:0; border-left:1px solid var(--line); color:var(--gold-deep); background:transparent; font-size:10px; font-weight:700; }
.code-button:disabled { color:#aaa39a; }
.remember-row { display:flex; align-items:center; gap:7px; margin:9px 0 4px; color:#888279; font-size:10px; }
.remember-row input { width:15px; height:15px; margin:0; accent-color:var(--gold-deep); }
.login-submit { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; margin-top:4px; border:0; border-radius:6px; color:var(--ink); background:var(--gold); font-size:12px; font-weight:750; transition:background 160ms ease,transform 160ms ease; }
.login-submit:hover { background:#e5bc3e; }
.login-submit:active { transform:scale(.98); }
.login-submit svg { width:16px; }
.auth-note { display:flex; align-items:center; justify-content:center; gap:5px; margin:15px 0 0; color:#a09a91; font-size:9px; }
.auth-note svg { width:12px; }
.attachment-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.message-composer.is-dragover { border-color:var(--gold-deep); background:#fffaf0; box-shadow:0 0 0 3px rgba(217,173,39,.12); }
.attachment-preview { display:none; flex-wrap:wrap; gap:7px; padding-bottom:9px; }
.attachment-preview.is-visible { display:flex; }
.attachment-chip { position:relative; display:flex; align-items:center; gap:6px; max-width:190px; min-height:42px; padding:4px 6px; border:1px solid #dfd9cf; border-radius:5px; background:#fff; }
.attachment-chip > img,.attachment-chip > video { width:34px; height:34px; flex:0 0 34px; border-radius:3px; object-fit:cover; background:#f0ede7; }
.attachment-chip-info { overflow:hidden; max-width:108px; color:var(--ink-soft); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.attachment-chip > button { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; color:#aaa39a; background:transparent; }
.attachment-chip > button:hover { color:#a84943; background:#f9e6e3; }
.attachment-chip > button svg { width:13px; }
.attachment-file-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:3px; color:var(--gold-deep); background:var(--gold-pale); }
.attachment-file-icon svg { width:16px; }
.sent-attachment { display:block; margin-top:8px; border-radius:5px; }
.sent-attachment.image { width:min(260px,100%); max-height:220px; object-fit:cover; }
.sent-attachment.video { width:min(300px,100%); max-height:220px; background:#0f0e0d; }
.sent-attachment.file { display:flex; align-items:center; gap:7px; width:max-content; max-width:100%; padding:8px 10px; color:inherit; background:rgba(255,255,255,.1); text-decoration:none; font-size:10px; }
.message.customer .sent-attachment.file { background:#e1ddd6; }
.sent-attachment.file .attachment-file-icon { width:22px; height:22px; background:rgba(255,255,255,.16); }
.message.customer .sent-attachment.file .attachment-file-icon { background:#f0ede7; }
.modal-backdrop { position:fixed; inset:0; z-index:70; background:rgba(22,20,17,.48); opacity:0; pointer-events:none; transition:opacity 160ms ease; }
.modal-backdrop.is-visible { opacity:1; pointer-events:auto; }
.action-modal { position:fixed; top:50%; left:50%; z-index:71; width:min(430px,calc(100% - 32px)); max-height:min(80vh,620px); overflow:auto; padding:25px 25px 22px; border:1px solid var(--line); border-radius:9px; background:var(--surface); box-shadow:0 20px 60px rgba(25,18,8,.2); opacity:0; pointer-events:none; transform:translate(-50%,-47%) scale(.98); transition:opacity 160ms ease,transform 180ms ease; }
.action-modal.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.modal-close { position:absolute; top:11px; right:11px; width:30px; height:30px; }
.modal-heading { display:flex; align-items:center; gap:10px; padding-right:28px; margin-bottom:18px; }
.modal-heading h2 { margin:5px 0 0; font-size:20px; letter-spacing:-.04em; }
.modal-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:6px; color:var(--gold-deep); background:var(--gold-pale); }
.modal-icon svg { width:17px; }
.modal-body { color:var(--ink-soft); font-size:11px; line-height:1.7; }
.modal-body > p { margin:0; }
.help-shortcuts { display:flex; gap:12px; padding-top:15px; margin-top:16px; border-top:1px solid var(--line); color:#8e887f; font-size:10px; }
kbd { padding:3px 5px; border:1px solid #d8d2c8; border-bottom-width:2px; border-radius:3px; color:var(--ink-soft); background:#f5f2ec; font:10px 'DM Sans',sans-serif; }
.detail-list { display:grid; gap:0; margin:0; border-top:1px solid var(--line); }
.detail-list div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:39px; border-bottom:1px solid var(--line); }
.detail-list dt { color:#979188; font-size:10px; }.detail-list dd { margin:0; color:var(--ink-soft); font-size:10px; font-weight:700; text-align:right; }
.modal-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:18px; }
.modal-button { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:5px; font-size:10px; font-weight:700; }
.modal-button.secondary { color:var(--ink-soft); background:transparent; }.modal-button.secondary:hover { border-color:var(--gold-deep); }
.modal-button.primary { border-color:var(--gold); color:var(--ink); background:var(--gold); }
.verification-modal-card { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--line); }.verification-modal-card > div { display:flex; flex-direction:column; gap:3px; }.verification-modal-card strong { color:var(--ink-soft); font-size:11px; }.verification-modal-card p { margin:0; color:#969087; font-size:9px; }.modal-muted { margin-top:13px !important; color:#99938a; font-size:10px; }
.customer-edit-form { display:grid; gap:10px; }.customer-edit-form label { display:grid; gap:5px; color:#858077; font-size:10px; font-weight:700; }.customer-edit-form input { min-height:38px; padding:0 9px; border:1px solid #d5d0c7; border-radius:5px; outline:0; color:var(--ink); background:#fff; font-size:11px; }.customer-edit-form input:focus { border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(217,173,39,.12); }.customer-edit-form input:disabled { color:#a39d94; background:#f0ede8; }
.tag-picker { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.tag-option { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:0 9px; border:1px solid var(--line); border-radius:5px; color:var(--ink-soft); background:transparent; font-size:10px; }.tag-option:hover,.tag-option.is-selected { border-color:#d7bb5d; color:var(--gold-deep); background:var(--gold-pale); }.tag-option svg { width:14px; }
.action-list { display:grid; gap:2px; }.action-list button { display:flex; align-items:center; gap:9px; min-height:42px; padding:0 8px; border:0; border-radius:5px; color:var(--ink-soft); background:transparent; text-align:left; font-size:11px; }.action-list button:hover { background:var(--surface-soft); }.action-list button svg { width:16px; color:#938d84; }
@media (max-width:600px) { .auth-card { padding:29px 24px 25px; }.auth-brand { margin-bottom:33px; }.auth-card h1 { font-size:25px; }.action-modal { padding:22px 19px 19px; }.help-shortcuts { flex-direction:column; gap:7px; } }
body.dark-mode .auth-screen { background:#11100f; }.auth-screen.is-hidden + .app-shell { visibility:visible; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }