:root{color-scheme:dark;--bg:#0c111a;--surface:#141c29;--raised:#1d2938;--border:#334253;--text:#f1f5f9;--muted:#b0bdcc;--accent:#39d9c0;--ink:#082922;--danger:#ffb7b7;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;letter-spacing:0}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}button{cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid var(--border);border-radius:6px;background:var(--raised);color:var(--text);font-weight:650}button:hover{background:#2b3b4f}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #73e6d5;outline-offset:3px}.primary{background:var(--accent);color:var(--ink);border-color:transparent}.primary:hover{background:#7ae8d6}.quiet{background:transparent}.muted{color:var(--muted)}.small{font-size:12px;line-height:1.6}p{line-height:1.65}h1{font-size:28px;line-height:1.2;margin:20px 0 10px}h2{font-size:19px;line-height:1.3;margin:0}input,textarea,select{color:var(--text);background:#0e1520;border:1px solid var(--border);border-radius:6px;padding:12px;width:100%;min-width:0}input{min-height:46px}textarea{resize:vertical;min-height:76px;max-height:180px;line-height:1.5}label{display:block;font-size:13px;font-weight:600}label input{margin-top:8px}select{width:auto;max-width:180px;min-height:44px}a{color:var(--accent)}[hidden]{display:none!important}.stack{display:grid;gap:20px}.brand{display:flex;align-items:center;gap:12px}.brand strong{font-size:18px}.brand span:not(.brand-mark){display:block;color:var(--muted);font-size:12px;margin-top:4px}.brand-mark{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border:1px solid #398a80;border-radius:8px;background:#173d39;color:#70f0dc;font-size:23px;font-weight:800}.connection{font-size:11px;color:var(--muted);white-space:nowrap}.connection::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#9aa7b7;margin-right:6px}.connection.connected::before{background:var(--accent)}.customer-shell{display:flex;flex-direction:column;width:100%;max-width:460px;height:100dvh;max-height:760px;margin:0 auto;background:var(--surface);overflow:hidden}.chat-header{padding:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.welcome{padding:30px 24px;overflow:auto}.welcome p{color:var(--muted);font-size:14px}.eyebrow{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:0}.conversation{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.thread-status{padding:12px 20px;font-size:12px;color:var(--muted)}.messages{flex:1;min-height:100px;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:18px;overscroll-behavior:contain}.message{max-width:85%;align-self:flex-start;min-width:80px}.message.mine{align-self:flex-end}.message-meta{font-size:11px;color:var(--muted);margin-bottom:6px;overflow-wrap:anywhere}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-size:14px;padding:12px 15px;background:var(--raised);border:1px solid var(--border);border-radius:8px}.message.mine .message-body{background:#15433e;border-color:#286259}.message.note .message-body{background:#383526;border-color:#777044}.composer{padding:16px 20px;border-top:1px solid var(--border);background:var(--surface)}.composer-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.feedback{margin:0;padding:0 20px;color:var(--danger);font-size:13px;line-height:1.5;overflow-wrap:anywhere}.feedback:not(:empty){padding:12px 20px;border-top:1px solid var(--border)}.login-shell{max-width:420px;margin:10vh auto;padding:28px}.login-shell .stack{margin-top:28px}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);grid-template-rows:76px minmax(0,1fr);height:100dvh}.workspace-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border);gap:16px;background:var(--surface)}.staff-tools{display:flex;align-items:center;gap:18px;font-size:13px}.inbox{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.inbox-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 20px 16px}.inbox-heading h1{font-size:22px;margin:0}.count{font-size:12px;background:var(--raised);padding:5px 9px;border-radius:5px}.search-label{padding:0 20px 16px;color:var(--muted)}.filters{display:flex;gap:6px;padding:0 20px 16px}.filters button{flex:1;font-size:12px;padding:9px}.filters button[aria-pressed=true]{background:#19433f;color:#8af5e3;border-color:#39776d}.conversation-list{overflow:auto;flex:1}.conversation-item{display:block;border:0;border-bottom:1px solid #263342;border-left:3px solid transparent;border-radius:0;width:100%;text-align:left;background:transparent;padding:18px 20px;min-height:96px}.conversation-item[aria-current=true]{background:#172b30;border-left-color:var(--accent)}.item-top{display:flex;justify-content:space-between;gap:8px}.item-preview{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:7px 0}.item-meta{font-size:11px;color:var(--muted);font-weight:400}.unread{background:var(--accent);color:var(--ink);padding:2px 7px;border-radius:5px;font-size:11px}.pagination{display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border)}.thread{display:flex;min-height:0;min-width:0;background:#101722}.empty{margin:auto;text-align:center;padding:28px;color:var(--muted)}.empty h2{margin-top:18px;color:var(--text)}.empty p{font-size:13px}.empty-symbol{display:inline-grid;place-items:center;width:64px;height:64px;border:1px solid var(--border);border-radius:8px;color:var(--accent);font-size:32px}.thread-header{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);min-height:80px}.customer-title{flex:1;min-width:0;overflow-wrap:anywhere}.thread-toolbar{display:flex;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:8px 16px;gap:8px}.thread-toolbar .thread-status{flex:1;padding:4px}.thread-toolbar button{font-size:12px}.thread .messages{padding:28px;gap:24px}.thread .message{max-width:72%}.compose-mode{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.compose-mode label{display:flex;align-items:center;gap:8px}.compose-mode input{width:18px;min-height:18px;height:18px;margin:0;accent-color:var(--accent)}.admin-feedback:not(:empty){position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 24px));background:#38252c;border:1px solid #a26376;border-radius:6px;z-index:10;box-shadow:0 8px 30px #0008}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#back{display:none}
@media(min-width:700px){body[data-mode=customer]{padding:24px}.customer-shell{height:calc(100dvh - 48px);border:1px solid var(--border);border-radius:8px}}
@media(max-width:760px){.workspace{grid-template-columns:1fr;grid-template-rows:70px minmax(0,1fr)}.workspace-header{padding:0 14px}.staff-tools{gap:8px}.staff-tools #staff-name{display:none}.inbox{border:0}.thread{display:none}.workspace.thread-open .inbox{display:none}.workspace.thread-open .thread{display:flex}#back{display:block}.thread-header{padding:12px;gap:8px}.thread-header h2{font-size:16px}.thread-toolbar{padding:8px 12px}.thread .messages{padding:16px}.thread .message{max-width:90%}.composer{padding:12px}.workspace-header .brand{gap:8px}.brand strong{font-size:16px}.workspace-header .connection{display:none}.compose-mode{flex-wrap:wrap}.customer-shell{max-height:none}.message{max-width:92%}.chat-header{padding:16px}.welcome{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-height:600px){.messages{min-height:0}.customer-shell .thread-status{display:none}.chat-header{padding:10px 14px}.composer{padding:8px 12px}.composer textarea{height:48px;min-height:48px;max-height:70px}.composer-actions{margin-top:8px}.compose-mode{margin-bottom:6px}.workspace{grid-template-rows:56px minmax(0,1fr)}.thread-header{min-height:60px;padding:8px 12px}.thread-toolbar{padding:4px 12px}}
dialog#team-dialog { width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; border: 1px solid #475569; border-radius: 8px; background: #141528; color: #f8fafc; padding: 24px; }
dialog#team-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.team-header, .team-member { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.team-header h2 { font-size: 22px; margin: 0; }
.team-header { margin-bottom: 20px; }
.team-member { padding: 16px 0; border-top: 1px solid #475569; overflow-wrap: anywhere; }
.team-member > div:first-child { min-width: 0; }
.team-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#team-feedback { color: #a5f3fc; overflow-wrap: anywhere; }
#staff-password-form h3 { overflow-wrap: anywhere; }
@media (max-width: 600px) { .team-member { align-items: stretch; flex-direction: column; } dialog#team-dialog { padding: 16px; } .team-header h2 { font-size: 20px; } }
@media (max-width: 600px) {
  .workspace { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
  .inbox, .workspace-header { min-width: 0; }
  .workspace-header { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .workspace-header .brand { flex-basis: 100%; }
  .staff-tools { width: 100%; justify-content: space-between; }
}
.password-field { position: relative; margin-top: 8px; }
.password-field input { padding-right: 56px; }
.password-toggle { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; display: grid; place-items: center; }
.password-eye { width: 22px; height: 22px; background: #c9f5ef; mask: url('./eye.svg') center / contain no-repeat; -webkit-mask: url('./eye.svg') center / contain no-repeat; }
.password-toggle[aria-pressed="true"] .password-eye { mask-image: url('./eye-off.svg'); -webkit-mask-image: url('./eye-off.svg'); }
/* Photo controls share the composer in customer and staff views. */
.attach-photo { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; padding:10px; }
.paperclip-icon { width:22px; height:22px; background:currentColor; mask:url('./paperclip.svg') center/contain no-repeat; }
.photo-preview { display:flex; align-items:center; gap:12px; padding:8px 0; }
.photo-preview[hidden] { display:none; }
.photo-preview img { width:72px; height:72px; object-fit:cover; border-radius:6px; }
.message-photo { display:block; max-width:100%; padding:0; overflow:hidden; border-radius:6px; }
.message-photo img { display:block; width:auto; max-width:100%; height:auto; max-height:300px; object-fit:contain; }
.photo-viewer { background:#141c29; color:white; border:1px solid #465363; border-radius:8px; max-width:95vw; max-height:90dvh; padding:12px; }
.photo-viewer::backdrop { background:#000b; }
.photo-viewer img { display:block; max-width:85vw; max-height:72dvh; object-fit:contain; margin-top:10px; }
.composer-actions { flex-wrap:wrap; gap:8px; }
.sending-photo { display:block; width:auto; max-width:100%; height:auto; max-height:220px; border-radius:6px; opacity:0.75; }