*{box-sizing:border-box}body{margin:0;font:15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#252b36;background:linear-gradient(130deg,#e8edf6,#f7f9fc)}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:11px;padding:10px 14px;background:#1677ff;color:white}button.ghost{background:#edf1f7;color:#39455a}button:disabled{opacity:.5}input,textarea,select{border:1px solid #dfe5ed;border-radius:11px;padding:11px;background:white;width:100%;outline-color:#1677ff}textarea{resize:vertical}.window{background:#fff;border:1px solid #dce3eb;box-shadow:0 24px 70px #263b5826;border-radius:18px;overflow:hidden}.bar{height:48px;background:#f8f9fb;border-bottom:1px solid #e5eaf0;display:flex;align-items:center;gap:8px;padding:0 18px}.dot{height:12px;width:12px;border-radius:50%;background:#ff5f57}.dot:nth-child(2){background:#ffbd2e}.dot:nth-child(3){background:#28c840}.bar span.title{margin:auto;color:#7e8795;font-size:13px}.muted{color:#7b8799;font-size:12px}.layout{display:flex;height:calc(100vh - 48px)}aside{width:290px;background:#f7f9fc;border-right:1px solid #e6ebf1;padding:16px;overflow:auto}main{flex:1;min-width:0;display:flex;flex-direction:column}.head{padding:18px;border-bottom:1px solid #edf0f4;display:flex;align-items:center;justify-content:space-between;gap:12px}.messages{flex:1;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px;background:#fff}.msg{max-width:78%;align-self:flex-start;background:#f0f2f5;padding:11px 14px;border-radius:15px;overflow-wrap:anywhere;white-space:pre-wrap;position:relative}.msg.admin{align-self:flex-end;background:#1677ff;color:white}.msg small{display:block;font-size:10px;opacity:.65;margin-top:5px}.msg img,.msg video{max-width:260px;max-height:240px;border-radius:10px}.msg audio{max-width:240px}.compose{padding:15px;border-top:1px solid #edf0f4;background:#fafbfc}.compose textarea{min-height:65px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}.item{padding:12px;border-radius:12px;cursor:pointer;margin:6px 0;background:white;border:1px solid #e9edf2}.item.active{background:#e8f1ff;border-color:#bcd5ff}.side{width:275px;border-left:1px solid #e6ebf1;padding:16px;overflow:auto}.chip{display:inline-block;background:#eaf1ff;color:#2563aa;border-radius:20px;padding:4px 9px;font-size:12px}.menu{position:fixed;background:white;border:1px solid #dce3eb;box-shadow:0 12px 35px #2233  ;border-radius:12px;padding:6px;z-index:20}.menu button{display:block;background:white;color:#334155;text-align:left;width:150px}.menu button:hover{background:#edf3ff}.panel{padding:18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{border:1px solid #e2e8f0;border-radius:14px;padding:18px}.stat b{font-size:27px;display:block}.hidden{display:none!important}a{color:#1677ff}h2{margin:8px 0 16px}label{display:block;margin:12px 0 6px;font-size:13px;color:#64748b}@media(max-width:760px){aside{width:120px;padding:8px}.side{display:none}.layout{height:calc(100dvh - 48px)}.messages{padding:12px}.head{padding:12px}.stats{grid-template-columns:repeat(2,1fr)}.window{border-radius:0}.msg{max-width:90%}}
/* Four independently selectable themes, mobile-first chat */
:root{--accent:#1677ff;--outgoing:#1677ff;--incoming:#f0f2f5;--surface:#fff;--chat:#fff;--page:#eef1f6;--ink:#252b36}
body{background:var(--page);color:var(--ink)}.window{background:var(--surface)}.messages{background:var(--chat)}.msg{background:var(--incoming)}.msg.admin{background:var(--outgoing)}button:not(.ghost){background:var(--accent)}.theme-select{width:auto;margin-left:8px;padding:5px 8px;font-size:12px}.record{touch-action:none;user-select:none;-webkit-user-select:none}.record.recording{background:#ffe1e1;color:#a12121}
:root[data-theme=wechat]{--accent:#08a14a;--outgoing:#95ec69;--incoming:#fff;--chat:#ededed;--page:#e5e5e5}
:root[data-theme=wechat] .msg.admin{color:#242424}
:root[data-theme=imessage]{--accent:#007aff;--outgoing:#007aff;--incoming:#e9e9ee;--chat:#fff;--page:#e8efff}
:root[data-theme=imessage] .msg{border-radius:21px}
:root[data-theme=dark]{--accent:#4b83ee;--outgoing:#2859c5;--incoming:#343b48;--chat:#1e232c;--page:#11151c;--surface:#252b36;--ink:#f0f3f8}
:root[data-theme=dark] .bar,:root[data-theme=dark] .compose,:root[data-theme=dark] aside,:root[data-theme=dark] .head,:root[data-theme=dark] .side{background:#252b36;color:#f0f3f8;border-color:#414857}
:root[data-theme=dark] .msg{color:#fff}:root[data-theme=dark] input,:root[data-theme=dark] textarea,:root[data-theme=dark] select{background:#323b49;color:#fff;border-color:#596274}
@media(max-width:760px){body:not([data-admin]) .window{height:100dvh!important;margin:0!important;max-width:none!important;border:0}body:not([data-admin]) .window main{height:calc(100dvh - 48px)!important}body:not([data-admin]) .messages{min-height:0}body:not([data-admin]) .compose{padding:9px 12px max(12px,env(safe-area-inset-bottom))}body:not([data-admin]) .compose textarea{min-height:42px;max-height:95px}body[data-admin] aside{width:142px}body[data-admin] .head .chip{display:none}body[data-admin] .compose{padding:8px}body[data-admin] .actions{gap:5px}body[data-admin] .actions button{padding:8px}}

/* Mobile-first refinements */
.msg.selectable{cursor:pointer;outline:1px dashed #7aa8e6}.msg.chosen{outline:3px solid #1683ed!important}
.selection-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:999;display:flex;gap:8px;background:var(--surface,#fff);padding:12px;border-radius:14px;box-shadow:0 10px 40px #0003}
@media(max-width:700px){html,body{height:100%;overflow:hidden}body>.window{height:100dvh!important;max-width:none!important;margin:0!important;border-radius:0!important}.window .bar{min-height:46px}.window main{min-height:0}.messages{overscroll-behavior:contain}.compose{padding-bottom:max(12px,env(safe-area-inset-bottom))}.actions{flex-wrap:wrap}.record{touch-action:none;user-select:none;-webkit-user-select:none}.selection-bar{width:calc(100% - 24px);bottom:max(10px,env(safe-area-inset-bottom));justify-content:center}.selection-bar button{font-size:12px}}

/* Admin session paging: keep controls visible even with many conversations. */
.session-pager{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 3px;border-top:1px solid rgba(127,127,127,.18)}
.session-pager button{white-space:nowrap;padding:7px 9px;font-size:12px}
.session-pager span{font-size:12px;white-space:nowrap}
.session-pager button:disabled{opacity:.45;cursor:not-allowed}

body[data-admin] aside{display:flex;flex-direction:column;overflow:hidden;min-height:0}
body[data-admin] #sessions{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
body[data-admin] .session-pager{flex:0 0 auto}
@media(max-width:760px){body[data-admin] .session-pager{flex-wrap:wrap;justify-content:center;gap:4px}body[data-admin] .session-pager button{padding:5px 7px;font-size:11px}body[data-admin] .session-pager span{order:-1;width:100%;text-align:center}}

/* V68: history pagination stays outside the scrolling message list. */
.history-pager{background:var(--chat,#fff);text-align:center;padding:7px 12px;border-bottom:1px solid #edf0f4;flex-shrink:0}.history-pager button{font-size:12px;padding:6px 14px}

/* V84: keep all four themes while rendering bubbles from the viewer's role. */
.messages .msg{align-self:flex-start;background:var(--incoming);color:var(--ink)}
.messages .msg.outgoing{align-self:flex-end;background:var(--outgoing);color:#fff}
:root[data-theme=wechat] .messages .msg.outgoing{color:#242424}
.menu{background:var(--surface);border-color:#cfd5dd;padding:5px;box-shadow:0 8px 28px #0002}
.menu button,.menu button:not(.ghost){background:transparent;color:var(--ink);border-radius:7px;font-size:14px;padding:10px 14px}
.menu button:hover{background:#8882}.quoted-message{display:flex;align-items:center;gap:8px;border-left:3px solid currentColor;background:#8882;border-radius:5px;padding:8px 10px;margin:0 0 7px;white-space:normal;font-size:12px;opacity:.88;max-width:320px}
.quoted-message b{white-space:nowrap}.quoted-message span{overflow:hidden;text-overflow:ellipsis;max-height:3em}.quoted-message img{width:38px;height:38px;object-fit:cover}
#quote{display:flex;align-items:center;gap:8px}.quote-cancel{padding:4px 9px}.media-caption{margin-top:8px;white-space:pre-wrap}
.unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:12px;background:#e64b50;color:#fff;font-size:11px;font-weight:600;line-height:19px;vertical-align:middle}
.visitor-label{display:inline-block;max-width:calc(100% - 30px);font-size:13px;line-height:1.6;overflow-wrap:anywhere}.item .unread-badge{float:right;margin-top:2px}
.admin-nav{width:98px;flex:0 0 98px;background:var(--surface);border-right:1px solid #8882;padding:18px 7px;display:flex;flex-direction:column;gap:10px}
.admin-nav button{padding:12px 4px;position:relative;font-size:13px}.admin-nav button.active{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}.admin-nav .unread-badge{position:absolute;right:0;top:-4px}
body[data-admin]:not([data-page=chats]) aside,body[data-admin]:not([data-page=chats]) .side{display:none}
#workspace{width:100%;max-width:1100px;margin:0 auto}.admin-nav~main{min-height:0}button.danger{background:#bd4149;margin-top:16px}
.quick-picker{border:1px solid #8883;border-radius:16px;background:var(--surface);color:var(--ink);width:min(480px,calc(100vw - 28px));max-height:75dvh;box-shadow:0 20px 70px #0004;padding:18px}
.quick-picker::backdrop{background:#0004}.picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.quick-items{display:grid;gap:10px}.quick-item{text-align:left;display:flex;flex-direction:column;gap:7px;width:100%;background:#8881!important;color:var(--ink)!important;border:1px solid #8882}.quick-item img,.reply-preview{max-width:150px;max-height:120px;object-fit:contain;border-radius:8px}.quick-item span{white-space:pre-wrap;font-size:13px}
.draft-asset{display:flex;align-items:center;gap:10px;padding:7px;font-size:12px}.draft-asset img{width:54px;height:45px;object-fit:cover;border-radius:7px}.record{min-width:44px;min-height:42px;display:inline-flex;align-items:center;justify-content:center}.record.recording{font-size:12px}.compose label.chip{cursor:pointer;min-height:40px;display:inline-flex;align-items:center;border-radius:11px;padding:8px 12px;background:#8881;color:var(--ink)}
@media(max-width:760px){.admin-nav{width:64px;flex-basis:64px;padding:12px 4px;gap:8px}.admin-nav button{font-size:12px;padding:12px 2px}body[data-admin] aside{width:155px;flex:0 0 155px}.visitor-label{font-size:11px}.messages .msg img,.messages .msg video{max-width:min(240px,58vw)}body[data-admin] .messages .msg img,body[data-admin] .messages .msg video{max-width:100%}.msg audio{max-width:100%}#workspace{padding:14px}.quick-picker{max-height:80dvh}.menu button{width:130px}}