: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; }
.brand img.brand-mark { display:block; width:48px; height:48px; object-fit:contain; background:transparent; border:0; border-radius:0; }
img.empty-symbol { object-fit:contain; background:transparent; border:0; border-radius:0; }
.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; overflow-x:auto; max-height:136px; }
.photo-queue-item { display:grid; gap:4px; flex:0 0 80px; }
.photo-queue-item button { padding:6px; font-size:12px; }
.photo-download { display:inline-block; padding:12px 4px; }
.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; }
body[data-mode="customer"] .photo-viewer {
  position:fixed; inset:0; margin:auto; width:min(900px,100%); height:var(--customer-view-height,100dvh);
  max-width:100%; max-height:var(--customer-view-height,100dvh); padding:8px 12px;
  border-radius:0; overflow:hidden; background:#0c111a;
}
body[data-mode="customer"] .photo-viewer[open] { display:flex; flex-direction:column; gap:8px; }
body[data-mode="customer"] .photo-viewer > button { align-self:flex-end; min-width:72px; min-height:44px; flex-shrink:0; }
body[data-mode="customer"] .photo-viewer img { flex:1; min-height:0; width:100%; max-width:100%; height:0; max-height:none; object-fit:contain; margin:0; }
body[data-mode="customer"] .photo-viewer .photo-download { flex-shrink:0; min-height:44px; text-align:center; }
.photo-viewer::backdrop { background:#000c; }
.photo-viewer, body[data-mode="customer"] .photo-viewer {
  position:fixed; inset:0; margin:auto; width:min(900px,100%); height:var(--customer-view-height,100dvh);
  max-width:100%; max-height:var(--customer-view-height,100dvh); border-radius:0; overflow:hidden;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.photo-viewer[open] { display:flex; flex-direction:column; gap:8px; }
.photo-toolbar { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.photo-toolbar button { min-width:44px; min-height:44px; padding:8px 10px; }
.photo-toolbar button:last-child { margin-left:auto; }
.photo-stage { flex:1; min-height:0; min-width:0; overflow:hidden; touch-action:none; user-select:none; }
.photo-viewer .photo-stage img, body[data-mode="customer"] .photo-viewer .photo-stage img { display:block; width:100%; height:100%; max-width:none; max-height:none; margin:0; object-fit:contain; transform-origin:center; pointer-events:none; }
.photo-viewer .photo-download { min-height:44px; flex-shrink:0; text-align:center; }
.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; }
.activity-line { min-height:22px; padding:2px 16px; color:var(--accent); font-size:12px; overflow-wrap:anywhere; }
.delivery-status { display:block; font-size:11px; color:var(--muted); text-align:right; margin:4px 0; }
.storage-dialog { width:min(520px,calc(100% - 24px)); max-height:85dvh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:20px; }
.storage-dialog::backdrop { background:#000a; }
.staff-tools { flex-wrap:wrap; }
.welcome { padding:16px 20px; }
.welcome h1 { margin:8px 0 12px; font-size:24px; }
.welcome .stack { gap:12px; }
.welcome .stack p { margin:0; font-size:12px; }
.auth-tabs { display:flex; gap:8px; margin:12px 0 16px; }
.auth-tabs button { flex:1; }
.auth-tabs button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); }
.check-label { display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.check-label input { width:18px; min-height:18px; height:18px; margin:2px 0 0; flex-shrink:0; accent-color:var(--accent); }
.customer-account-bar { display:flex; align-items:center; gap:6px; padding:4px 10px; border-bottom:1px solid var(--border); }
.customer-account-bar span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:12px; }
.customer-account-bar button { padding:8px; font-size:12px; }
.account-dialog { width:min(430px,calc(100% - 24px)); max-height:85dvh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:20px; }
.account-dialog::backdrop { background:#000b; }
.account-dialog code { display:block; overflow-wrap:anywhere; padding:14px; background:var(--bg); font-size:16px; user-select:all; }
.account-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
/* Dinalan customer chat shares the main site's gold palette. */
body[data-mode="customer"] {
  --bg: #100c05;
  --surface: #1d160b;
  --raised: #2b2110;
  --border: #705526;
  --text: #fff9e9;
  --muted: #d6c5a2;
  --accent: #ffd65b;
  --ink: #241704;
}
body[data-mode="customer"] :is(input, textarea, select) { background: #130e06; }
body[data-mode="customer"] button:hover { background: #403013; }
body[data-mode="customer"] :is(button, input, textarea, select):focus-visible {
  outline-color: #ffe390;
}
body[data-mode="customer"] .primary {
  background: linear-gradient(115deg, #ffe888, #efb320 60%, #d68b08);
  border-color: #ffe390;
  color: #241704;
}
body[data-mode="customer"] .primary:hover { background: #ffda68; }
body[data-mode="customer"] .auth-tabs button[aria-pressed="true"] { background: #35270d; }
body[data-mode="customer"] .password-eye { background: #ffe6a1; }
body[data-mode="customer"] .message.mine .message-body { background: #44300f; border-color: #987027; }
body[data-mode="customer"] .photo-viewer { background: var(--bg); border-color: var(--border); }
/* Keep the customer viewport anchored; only message and photo areas scroll. */
@media (max-width:1024px) and (max-height:500px) {
  body[data-mode="customer"] .customer-shell:has(#message:focus) .customer-account-bar,
  body[data-mode="customer"] .customer-shell:has(#message:focus) .thread-status,
  body[data-mode="customer"] .customer-shell:has(#message:focus) .activity-line,
  .embedded-customer .customer-shell:has(#message:focus) .chat-header { display:none; }
  body[data-mode="customer"] #composer {
    display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:6px;
    align-items:end; padding:6px 8px;
  }
  body[data-mode="customer"] #composer > textarea {
    grid-column:1; height:48px; min-height:48px; max-height:72px;
    padding:10px; margin:0; resize:none; font-size:16px;
  }
  body[data-mode="customer"] #composer .composer-actions {
    grid-column:2; margin:0; gap:8px; align-items:center; flex-wrap:wrap;
  }
  body[data-mode="customer"] #composer .composer-actions button { width:44px; min-width:44px; height:44px; padding:10px; margin:0; }
  body[data-mode="customer"] #composer button[type="submit"] { font-size:0; }
  body[data-mode="customer"] #composer button[type="submit"]::after {
    content:""; display:block; width:22px; height:22px; background:currentColor;
    mask:url('./send.svg') center/contain no-repeat;
  }
  body[data-mode="customer"] #composer .photo-preview { grid-column:1/-1; grid-row:1; margin:0; }
  body[data-mode="customer"] #composer .composer-actions [role="status"]:empty { display:none; }
  body[data-mode="customer"] #composer .composer-actions [role="status"]:not(:empty) { flex-basis:100%; order:3; font-size:11px; }
}
html:has(body[data-mode="customer"]) { overflow-x:hidden; overscroll-behavior-x:none; }
body[data-mode="customer"] { width:100%; max-width:100%; overflow-x:hidden; overscroll-behavior-x:none; }
.customer-shell > *, .customer-shell .composer, .customer-shell .messages { min-width:0; max-width:100%; }
.customer-shell .messages, .customer-shell .welcome { overflow-x:hidden; overscroll-behavior-x:none; }
.customer-shell .chat-header .brand { min-width:0; }
.customer-shell input, .customer-shell textarea, .customer-shell select { font-size:16px; }
@media (max-height:280px) {
  body[data-mode="customer"] .chat-header,
  .customer-shell .customer-account-bar { display:none; }
  body[data-mode="customer"] .photo-preview { max-height:56px; }
  body[data-mode="customer"] .photo-preview img { width:32px; height:32px; }
}
html:has(body[data-mode="customer"]), body[data-mode="customer"] { height:100%; }
body[data-mode="customer"] .customer-shell { height:var(--customer-view-height,100dvh); }
.embedded-customer body[data-mode="customer"] { padding:0; overflow:hidden; }
.embedded-customer .customer-shell { width:100%; max-width:none; height:100%; max-height:none; margin:0; border:0; border-radius:0; }
.customer-shell .welcome { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.customer-shell .chat-header, .customer-shell .customer-account-bar, .customer-shell .composer { flex-shrink:0; }
.customer-shell .messages { min-height:0; -webkit-overflow-scrolling:touch; }
.customer-shell .composer-actions > .small.muted { display:none; }
@media (max-width:760px), (max-height:500px) {
  .standalone-customer body[data-mode="customer"] { position:fixed; top:var(--customer-view-top,0px); left:0; right:0; height:var(--customer-view-height,100dvh); }
  body[data-mode="customer"] { padding:0; overflow:hidden; }
  .customer-shell { max-width:none; max-height:none; }
  .customer-shell .chat-header { padding:10px 14px; }
  .embedded-customer .chat-header { justify-content:flex-end; padding:4px 12px; min-height:24px; }
  .embedded-customer .chat-header .brand { display:none; }
  .customer-shell .customer-account-bar { min-height:48px; }
  .customer-shell .customer-account-bar button { min-width:44px; min-height:44px; }
  .customer-shell .messages { padding:12px; gap:12px; }
  .customer-shell .composer { padding:8px 12px max(8px,env(safe-area-inset-bottom)); }
  .embedded-customer .composer { padding-bottom:8px; }
  .customer-shell .composer textarea { height:48px; min-height:48px; max-height:96px; resize:none; }
  .customer-shell .composer-actions { margin-top:6px; flex-wrap:nowrap; }
  .customer-shell .composer-actions button[type="submit"] { margin-left:auto; }
  .customer-shell .thread-status { padding:4px 12px; }
  .customer-shell .thread-status:empty { display:none; }
  .customer-shell .photo-preview { max-height:88px; }
  .customer-shell .photo-preview img { width:48px; height:48px; }
  .customer-shell .composer > .small { display:none; }
  body[data-mode="customer"] .account-dialog { max-height:calc(var(--customer-view-height,100dvh) - 24px); overflow-y:auto; }
}
@media (max-width:760px), (max-height:500px) {
  body[data-mode="customer"] .photo-preview { max-height:56px; padding:4px 0; gap:8px; align-items:center; }
  .customer-shell .photo-queue-item { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
  body[data-mode="customer"] .photo-preview img { width:44px; height:44px; flex-shrink:0; }
  .customer-shell .photo-queue-item button { min-width:60px; min-height:44px; }
  .customer-shell .composer-actions [role="status"] { min-width:0; overflow-wrap:anywhere; }
}
@media (max-height:280px) {
  body[data-mode="customer"] .composer { padding:4px 8px; }
  body[data-mode="customer"] .composer textarea { display:block; height:44px; min-height:44px; max-height:44px; }
  body[data-mode="customer"] .composer-actions { margin-top:4px; }
  body[data-mode="customer"] .messages { padding-top:0; padding-bottom:0; }
  body[data-mode="customer"] .activity-line { display:none; }
}
@media (max-height:380px) {
  .customer-shell:has(.photo-preview:not([hidden])) .chat-header,
  .customer-shell:has(.photo-preview:not([hidden])) .customer-account-bar,
  .customer-shell:has(.photo-preview:not([hidden])) .activity-line { display:none; }
  .customer-shell:has(.photo-preview:not([hidden])) .messages { padding-top:0; padding-bottom:0; }
}