:root { color-scheme: light; --ink:#19353d; --muted:#718489; --line:#dce7e8; --surface:#fff; --canvas:#f3f7f6; --accent:#0d5964; --coral:#e7795d; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--canvas); color:var(--ink); }
body { min-height:100dvh; }
button,input,textarea { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; }
.chat-shell { width:100%; max-width:760px; min-height:100dvh; min-height:100svh; margin:0 auto; display:flex; flex-direction:column; background:var(--canvas); }
.chat-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; min-height:68px; padding:max(10px,env(safe-area-inset-top)) 16px 10px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.icon-button,.round-button,.send-button { border:0; display:inline-grid; place-items:center; flex:0 0 auto; }
.icon-button { width:28px; height:40px; background:transparent; color:var(--accent); font-size:34px; line-height:1; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; border-radius:13px; background:var(--accent); color:#fff; box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 24%,transparent); }
.brand-mark img { width:100%; height:100%; object-fit:cover; }.brand-mark span { font-weight:800; }
.header-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }.header-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.header-copy span { color:var(--muted); font-size:12px; }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:9px; }.connection-dot { width:8px; height:8px; border-radius:50%; background:#efb74b; box-shadow:0 0 0 4px rgba(239,183,75,.12); }.connection-dot.online { background:#39b67a; box-shadow:0 0 0 4px rgba(57,182,122,.12); }.connection-dot.offline { background:#db6d61; box-shadow:0 0 0 4px rgba(219,109,97,.12); }
.text-action { color:var(--accent); font-size:12px; font-weight:700; text-decoration:none; }.text-action.disabled { color:#adbabd; pointer-events:none; }
.load-earlier { align-self:center; margin:10px 0 0; padding:7px 12px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--accent); font-size:12px; }.load-earlier[hidden] { display:none; }
.message-list { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 14px 10px; scroll-behavior:smooth; }.message-row { display:flex; margin:6px 0; }.message-row.customer { justify-content:flex-end; }.message-row.operator,.message-row.system { justify-content:flex-start; }
.bubble { max-width:min(86%,520px); padding:10px 12px 7px; border-radius:17px; box-shadow:0 3px 12px rgba(16,42,49,.045); white-space:pre-wrap; overflow-wrap:anywhere; }.customer .bubble { color:#fff; background:var(--accent); border-bottom-right-radius:5px; }.operator .bubble { background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:5px; }.system .bubble { max-width:92%; margin:8px auto; color:#4b696c; background:#eaf2ef; border-radius:15px; font-size:13px; text-align:center; }
.message-body { font-size:15px; line-height:1.42; }.message-meta { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:5px; color:rgba(255,255,255,.72); font-size:10px; }.operator .message-meta,.system .message-meta { color:var(--muted); }.status-read { color:#8ce1d7; }.reply-quote { margin:0 0 7px; padding:6px 8px; border-left:3px solid rgba(255,255,255,.7); border-radius:5px; background:rgba(0,0,0,.1); color:inherit; font-size:11px; }.operator .reply-quote,.system .reply-quote { border-left-color:var(--accent); background:#eef6f4; }
.reply-button { display:block; margin:5px 0 0 auto; padding:0; border:0; background:transparent; color:inherit; opacity:.65; font-size:10px; }.reply-button:hover { opacity:1; }
.attachment-card { display:grid; gap:7px; min-width:160px; margin-bottom:3px; color:inherit; text-decoration:none; }.attachment-card img,.attachment-card video { width:100%; max-height:240px; object-fit:cover; border-radius:11px; background:#d9e4e2; }.attachment-card audio { width:min(100%,290px); }.attachment-name { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; }
.typing-indicator { min-height:24px; padding:0 18px 4px; color:var(--muted); font-size:12px; }.typing-indicator span { display:inline-block; width:5px; height:5px; margin-right:2px; border-radius:50%; background:var(--coral); animation:pulse 1s infinite; }.typing-indicator span:nth-child(2){animation-delay:.15s}.typing-indicator span:nth-child(3){animation-delay:.3s}@keyframes pulse{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.composer { display:flex; align-items:flex-end; gap:7px; padding:9px 12px max(9px,env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--line); }.round-button,.send-button { width:37px; height:37px; border-radius:50%; }.round-button { color:var(--accent); background:#e9f2ef; font-size:19px; }.round-button:disabled,.send-button:disabled { opacity:.45; cursor:not-allowed; }.attach-button { position:relative; font-size:27px; font-weight:300; line-height:1; }.send-button { color:#fff; background:var(--coral); font-size:17px; box-shadow:0 5px 14px rgba(231,121,93,.28); }.send-button.small { width:32px; height:32px; font-size:14px; }
.composer-field { position:relative; flex:1; } textarea { width:100%; max-height:110px; min-height:37px; padding:9px 12px; resize:none; outline:0; border:1px solid var(--line); border-radius:17px; color:var(--ink); background:#f8fbfa; line-height:1.25; } textarea:focus { border-color:#7eb9b6; box-shadow:0 0 0 3px rgba(126,185,182,.15); }
.emoji-menu { position:absolute; bottom:47px; left:0; display:flex; gap:3px; padding:8px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 14px 38px rgba(16,42,49,.09); }.emoji-menu button { border:0; background:transparent; padding:5px; font-size:22px; }
.reply-preview,.attachment-preview,.recording-panel { align-items:center; gap:8px; padding:8px 14px; background:#fff; border-top:1px solid var(--line); font-size:12px; }.reply-preview:not([hidden]),.attachment-preview:not([hidden]),.recording-panel:not([hidden]) { display:flex; }.reply-preview > div { min-width:0; display:flex; flex-direction:column; gap:2px; }.reply-preview strong { color:var(--accent); font-size:11px; }.reply-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:65vw; }.reply-preview button { margin-left:auto; border:0; background:transparent; color:var(--muted); font-size:22px; }.attachment-preview { flex-wrap:wrap; }.attachment-preview-content { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }.attachment-preview-content img,.attachment-preview-content video { width:48px; height:48px; object-fit:cover; border-radius:8px; }.attachment-preview-content span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.attachment-preview-actions { display:flex; align-items:center; gap:8px; }.upload-progress { width:100%; height:3px; background:#e7efed; }.upload-progress span { display:block; width:0; height:100%; background:var(--accent); transition:width .12s linear; }.recording-panel { background:#fff1ed; color:#a85242; }.recording-pulse { width:9px; height:9px; border-radius:50%; background:#db5d54; animation:pulse 1s infinite; }.recording-panel .subtle-button { margin-left:auto; }.subtle-button { border:0; color:var(--muted); background:transparent; font-size:12px; }
.chat-status { min-height:18px; margin:0; padding:3px 14px max(7px,env(safe-area-inset-bottom)); color:#9aa9a9; background:#fff; font-size:10px; text-align:center; }.chat-status.error { color:#a85242; }.chat-note { padding:18px; text-align:center; }.chat-note strong { display:block; margin-bottom:5px; font-size:15px; }.chat-note span { color:var(--muted); font-size:13px; line-height:1.45; }
@media (min-width:761px) { .chat-shell { min-height:100vh; box-shadow:0 14px 38px rgba(16,42,49,.09); } }