:root { --blue:#3390ec; --text:#17212b; --muted:#77838f; --line:#e5e8eb; --surface:#fff; --search:#f1f3f4; --hover:#f5f7f8; --bg:#e7ebf0; --bubble:#fff; --empty:#ffffffd9; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); }
body.dark-theme { --text:#e7edf1; --muted:#9aa8b2; --line:#2b3945; --surface:#17212b; --search:#24323e; --hover:#22313d; --bg:#0f171e; --bubble:#1d2a35; --empty:#1b2934e8; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); color:var(--text); } button,input { font:inherit; } input { color:var(--text); } input::placeholder { color:var(--muted); opacity:1; } button { border:0; cursor:pointer; } .app-shell { display:flex; min-height:100vh; max-width:1500px; margin:auto; background:var(--surface); box-shadow:0 0 30px #0002; }
.sidebar { width:360px; height:100vh; flex:none; overflow:hidden; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line); } .sidebar-header { min-height:58px; padding:11px 12px; display:flex; } .chat-search { width:100%; display:flex; align-items:center; gap:7px; padding:0 13px; border-radius:22px; background:var(--search); color:var(--muted); } .chat-search input { width:100%; height:35px; min-width:0; border:0; outline:0; color:var(--text); background:transparent; } .archive-label { padding:10px 22px 8px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; } .archive-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#8ec5f2; }
.chat-list { overflow:auto; } .chat-row { display:flex; gap:11px; min-height:72px; padding:10px 13px; cursor:pointer; } .chat-row:hover { background:var(--hover); } .chat-row.active { color:#fff; background:#4198dd; } .chat-row.active .preview,.chat-row.active .chat-time,.chat-row.active .chat-count { color:#dceeff; } .avatar { width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:50%; background:#5d9cec; color:#fff; font-size:18px; font-weight:600; } .avatar.large { width:40px; height:40px; font-size:15px; } .avatar.alt { background:#de8f76; } .avatar.green { background:#56b5a9; } .chat-copy { flex:1; min-width:0; } .chat-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; } .chat-top strong,.preview { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .chat-time,.chat-count { color:var(--muted); font-size:12px; white-space:nowrap; } .preview { margin-top:5px; color:var(--muted); font-size:14px; } .chat-count { float:right; margin-top:4px; }
.conversation { position:relative; min-width:0; height:100vh; flex:1; display:flex; flex-direction:column; background:linear-gradient(135deg,#dfe8ecaa,#edf1f3cc),radial-gradient(#ced8dd 1px,transparent 1px); background-size:auto,22px 22px; } .dark-theme .conversation { background:linear-gradient(135deg,#101a21cc,#17232acc),radial-gradient(#253740 1px,transparent 1px); } .conversation-header { min-height:59px; display:flex; align-items:center; justify-content:space-between; padding:8px 14px 8px 18px; background:var(--surface); border-bottom:1px solid var(--line); color:var(--text); } .chat-title { display:flex; align-items:center; gap:11px; min-width:0; } h1 { margin:0; color:var(--text); font-size:16px; } .chat-title p { margin:3px 0 0; color:var(--muted); font-size:13px; } .header-actions { display:flex; gap:4px; } .icon-button { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:transparent; color:var(--muted); font-size:25px; } .icon-button:hover { background:var(--hover); }
.filters { display:flex; align-items:end; flex-wrap:wrap; gap:10px; padding:10px 18px; background:var(--surface); border-bottom:1px solid var(--line); } .filters label { display:grid; gap:5px; color:var(--muted); font-size:12px; } .filters input { min-width:135px; padding:8px 9px; border:1px solid var(--line); border-radius:7px; outline:0; background:var(--surface); color:var(--text); } input:focus { border-color:var(--blue); } .secondary-button,.text-button { padding:9px 14px; border-radius:7px; color:#2784d4; background:#e9f3fc; font-weight:600; } .text-button { background:transparent; }
.message-area { flex:1; display:flex; flex-direction:column; gap:7px; overflow:auto; padding:18px max(18px,8%); } .date-pill { align-self:center; margin:5px 0; padding:5px 12px; border-radius:13px; background:var(--empty); color:var(--muted); font-size:12px; } .message { align-self:flex-start; display:flex; flex-direction:column; max-width:min(650px,85%); padding:7px 10px 6px; border-radius:10px 10px 10px 2px; background:var(--bubble); box-shadow:0 1px 1px #0002; } .message.has-brand { border-left:3px solid #53a8ee; } .message-sender { margin-bottom:3px; color:#2381d1; font-size:13px; font-weight:650; line-height:1.35; } .message-text { overflow-wrap:anywhere; white-space:pre-wrap; font-size:14px; line-height:1.5; } .message-meta { align-self:flex-end; margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.3; } .reply { margin-bottom:5px; padding-left:6px; border-left:2px solid #5fa9e1; color:#4c9bd5; font-size:12px; line-height:1.4; } .media { display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 3px; } .image-media { display:block; max-width:320px; overflow:hidden; border-radius:7px; background:var(--search); } .image-media img { display:block; width:100%; max-height:360px; object-fit:cover; } .media-item { display:flex; align-items:center; gap:7px; min-width:180px; padding:7px; border-radius:6px; background:var(--search); color:#317ec0; text-decoration:none; font-size:13px; } .media-icon { font-size:21px; } .media-item small { display:block; margin-top:2px; color:var(--muted); }.empty-state { align-self:center; max-width:400px; margin:auto; padding:25px 35px; border-radius:13px; background:var(--empty); color:var(--muted); text-align:center; } .empty-icon { color:#70afe2; font-size:38px; } .empty-state h2 { margin:8px 0; color:var(--text); font-size:18px; } .empty-state p { margin:0; font-size:14px; }
.message-search { display:flex; align-items:center; gap:8px; padding:9px 14px; background:var(--surface); border-top:1px solid var(--line); } .message-search input { height:34px; min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--text); } .send-button { width:37px; height:37px; border-radius:50%; background:var(--blue); color:#fff; font-size:22px; } .mobile-only { display:none; }
.scroll-bottom-button { position:absolute; z-index:3; right:28px; bottom:78px; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); box-shadow:0 2px 9px #0003; font-size:23px; line-height:1; }
.scroll-bottom-button:hover { background:var(--hover); }
.scroll-bottom-button[hidden] { display:none; }
@media (max-width:720px) { .sidebar { width:100%; } .conversation { display:none; } body.chat-open .sidebar { display:none; } body.chat-open .conversation { display:flex; } .mobile-only { display:grid; } .message-area { padding:14px 10px; } }
.message-highlight { position:relative; z-index:1; animation:message-highlight 2.2s ease-out; }
@keyframes message-highlight { 0%,55% { background:#b9e2ff; outline:3px solid #3390ec; outline-offset:2px; box-shadow:0 0 0 5px #3390ec55,0 2px 8px #0003; } 100% { background:var(--bubble); outline-color:transparent; box-shadow:0 1px 1px #0002; } }
.dark-theme .message-highlight { animation-name:message-highlight-dark; }
@keyframes message-highlight-dark { 0%,55% { background:#294d63; outline:3px solid #66baff; outline-offset:2px; box-shadow:0 0 0 5px #4b9ed566,0 2px 8px #0005; } 100% { background:var(--bubble); outline-color:transparent; box-shadow:0 1px 1px #0002; } }
.reply { margin:0 0 5px; padding:0 0 0 6px; border:0; border-left:2px solid #5fa9e1; background:transparent; color:#4c9bd5; font-size:12px; line-height:1.4; text-align:left; } .reply:hover { color:#2381d1; }
.message-text mark,.message-sender mark { padding:0 1px; border-radius:2px; background:#ffe58a; color:#17212b; }
.message.search-current { outline:2px solid #5ba7e8; outline-offset:2px; }
.search-navigation { display:flex; align-items:center; gap:2px; color:var(--muted); font-size:12px; white-space:nowrap; }
.search-navigation[hidden] { display:none; }
.search-nav-button { width:30px; height:30px; border-radius:50%; background:transparent; color:var(--text); font-size:19px; line-height:1; }
.search-nav-button:hover:not(:disabled) { background:var(--hover); }
.search-nav-button:disabled { opacity:.35; cursor:default; }
@media (max-width:480px) { .message-search { gap:3px; padding:8px; } .search-navigation { gap:0; font-size:11px; } .search-nav-button { width:27px; height:29px; } }
.message-id-copy { padding:1px 3px; border-radius:4px; background:transparent; color:var(--muted); font:10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; }
.message-id-copy:hover { background:var(--search); color:var(--blue); }
.inline-id-copy { display:inline; margin:0 1px; padding:1px 4px; border-radius:4px; background:#e8f3fb; color:#176ca8; font:inherit; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; user-select:text; }
.inline-id-copy:hover,.inline-id-copy:focus-visible { outline:1px solid #62aee7; background:#d5ebfb; }
.dark-theme .inline-id-copy { background:#253e50; color:#9bd3ff; }
.dark-theme .inline-id-copy:hover,.dark-theme .inline-id-copy:focus-visible { background:#31536b; }
.image-viewer { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:48px 20px 20px; background:#000d; }
.image-viewer[hidden] { display:none; }
.image-viewer img { display:block; max-width:100%; max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px); object-fit:contain; border-radius:4px; box-shadow:0 8px 32px #0008; }
.image-viewer-close { position:absolute; top:12px; right:16px; width:42px; height:42px; border-radius:50%; background:#ffffff20; color:#fff; font-size:32px; line-height:1; }
.image-viewer-close:hover { background:#ffffff35; }
.copy-toast { position:fixed; z-index:10; left:50%; bottom:22px; transform:translateX(-50%); padding:9px 14px; border-radius:20px; background:#25313a; color:#fff; box-shadow:0 4px 16px #0003; font-size:13px; }
.copy-toast[hidden] { display:none; }
.search-section-title { padding:12px 15px 5px; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; }
.message-hit { width:100%; display:flex; flex-direction:column; gap:3px; padding:9px 15px; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; }
.message-hit:hover { background:var(--hover); }
.message-hit-chat { color:#2381d1; font-size:13px; font-weight:600; }
.message-hit-text { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:var(--text); font-size:13px; line-height:1.35; }
.message-hit-meta,.search-empty { color:var(--muted); font-size:11px; }
.search-empty,.search-loading,.search-more { padding:10px 15px; color:var(--muted); font-size:11px; }
/* Layout refinements for variable desktop, tablet, and mobile viewports. */
.sidebar,.conversation { height:100vh; height:100dvh; min-height:0; }
.message-area { min-height:0; padding:clamp(10px,2vw,22px) clamp(10px,4vw,64px); }
.message { max-width:min(700px,92%); }
.reply { display:block; align-self:stretch; width:100%; min-width:0; min-height:36px; padding:7px 9px; white-space:normal; overflow-wrap:anywhere; line-height:1.45; }
.inline-id-copy { max-width:100%; overflow-wrap:anywhere; word-break:break-all; }
@media (max-width:820px) {
  .sidebar { width:100%; }
  .conversation { display:none; }
  body.chat-open .sidebar { display:none; }
  body.chat-open .conversation { display:flex; }
  .mobile-only { display:grid; }
  .message-area { padding:12px 10px; }
  .scroll-bottom-button { right:14px; bottom:76px; }
}
@media (max-width:480px) {
  .conversation-header { min-height:54px; padding:6px 9px; }
  .chat-title { gap:6px; }
  .chat-title p { font-size:12px; }
  .message { max-width:96%; padding:7px 9px 6px; }
  .message-text { font-size:14px; line-height:1.45; }
  .reply { font-size:12px; }
  .message-search { gap:3px; padding:7px 6px; }
  .search-navigation { gap:0; font-size:11px; }
  .search-nav-button { width:27px; height:29px; }
  .scroll-bottom-button { right:10px; bottom:72px; }
}
.app-shell { width:100%; height:100vh; height:100dvh; max-width:none; min-height:0; margin:0; overflow:hidden; }
html,body { width:100%; height:100%; overflow:hidden; }
.sidebar,.conversation { height:100%; }
.chat-list { flex:1; min-height:0; }
.reply { display:flex; flex-direction:row; align-items:center; gap:8px; white-space:normal; overflow:hidden; text-overflow:clip; }
.reply-preview { display:flex; flex:1; align-items:center; gap:8px; min-width:0; }
.reply-thumb { width:38px; height:38px; flex:none; border-radius:4px; object-fit:cover; }
.reply-copy { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.reply-sender,.reply-text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-text:empty { display:none; }
.reply-sender { color:#2784d4; font-weight:650; }
.chat-search > span { display:grid; flex:none; place-items:center; line-height:1; transform:translateY(-1px); }
.send-button { display:grid; place-items:center; padding:0; line-height:1; }
.send-button span { display:block; transform:translateY(-1px); }
.message-chat-name { margin-bottom:4px; color:#2381d1; font-size:12px; font-weight:650; }
.new-message-count { position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border:2px solid var(--surface); border-radius:11px; background:#e34850; color:#fff; font-size:10px; font-weight:700; line-height:15px; text-align:center; }
.new-message-count[hidden] { display:none; }
.header-actions { align-items:center; }
.account-button { max-width:180px; overflow:hidden; padding:8px 12px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--text); text-overflow:ellipsis; white-space:nowrap; }
.auth-screen,.modal-screen { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:linear-gradient(140deg,#101a25eF,#253c50eF); }
.auth-screen[hidden],.modal-screen[hidden] { display:none; }
.auth-card,.admin-panel { width:min(100%,440px); padding:32px; border:1px solid #ffffff28; border-radius:18px; background:var(--surface); box-shadow:0 24px 80px #0005; color:var(--text); }
.auth-brand-mark { width:48px; height:48px; display:grid; place-items:center; margin-bottom:24px; border-radius:15px; background:#e7f3fc; color:var(--blue); font-size:27px; }
.auth-eyebrow { margin:0 0 7px; color:var(--blue); font-size:10px; font-weight:750; letter-spacing:.14em; }
.auth-card h1,.admin-header h2 { margin:0; font-size:24px; }
.auth-description { margin:9px 0 24px; color:var(--muted); font-size:14px; line-height:1.5; }
.auth-card label,.admin-create-user label { display:grid; gap:7px; margin:14px 0; color:var(--muted); font-size:13px; font-weight:600; }
.auth-card input,.admin-create-user input:not([type=checkbox]) { width:100%; height:43px; padding:0 12px; border:1px solid var(--line); border-radius:8px; outline:0; background:var(--surface); }
.auth-card input:focus,.admin-create-user input:focus { border-color:var(--blue); }
.primary-button { width:100%; min-height:43px; margin-top:8px; border-radius:8px; background:var(--blue); color:#fff; font-weight:700; }
.primary-button:hover { background:#247dc9; }
.form-error,.form-success { margin:10px 0; font-size:13px; line-height:1.4; }
.form-error { color:#c33b45; }.form-success { color:#25845a; }
.admin-panel { width:min(100%,760px); max-height:min(90vh,850px); overflow:auto; padding:0; }
.admin-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:21px 24px; border-bottom:1px solid var(--line); background:var(--surface); }
.admin-header h2 { font-size:19px; }
.admin-content { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr); gap:26px; padding:22px 24px; }
.admin-content h3 { margin:0 0 14px; font-size:15px; }
.admin-create-user label { margin:11px 0; }
.admin-create-user .check-label { display:flex; align-items:center; gap:8px; }
.user-access-list { display:grid; gap:8px; }
.user-access-card { padding:13px; border:1px solid var(--line); border-radius:10px; }
.user-access-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.user-access-name { font-size:14px; font-weight:700; }
.user-access-badge { color:var(--muted); font-size:11px; }
.user-access-card select { width:100%; min-height:92px; margin-top:10px; padding:7px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); }
.user-access-card small { display:block; margin-top:5px; color:var(--muted); }
.admin-footer { padding:12px 24px; border-top:1px solid var(--line); }
@media(max-width:640px) { .auth-card { padding:26px 22px; }.admin-content { grid-template-columns:1fr; gap:22px; padding:18px; }.admin-header { padding:16px 18px; }.admin-panel { max-height:94vh; } }
.header-actions [hidden] { display:none; }
body:not(.authenticated) .app-shell { visibility:hidden; }
.admin-open-button { min-height:36px; padding:8px 12px; white-space:nowrap; }
.profile-panel { width:min(100%,820px); }
.profile-content { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:22px 24px; }
.profile-form { min-width:0; }
.profile-form h3 { margin:0 0 14px; font-size:15px; }
.profile-form label { display:grid; gap:7px; margin:11px 0; color:var(--muted); font-size:13px; font-weight:600; }
.profile-form input { width:100%; height:41px; padding:0 11px; border:1px solid var(--line); border-radius:7px; outline:0; background:var(--surface); color:var(--text); }
.profile-form input:focus { border-color:var(--blue); }
@media(max-width:640px) { .profile-content { grid-template-columns:1fr; gap:22px; padding:18px; } }
.section-hint { margin:-7px 0 13px; color:var(--muted); font-size:12px; line-height:1.45; }
.user-access-card { padding:14px; }
.user-access-top > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.user-access-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:20px; background:#e9f5ed; color:#28734a; font-size:11px; }
.user-access-badge.inactive { background:#fff0ee; color:#b4453c; }
.user-access-card small { margin-top:8px; }
.user-open-button,.status-action { padding:8px 12px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--blue); font-size:12px; font-weight:700; white-space:nowrap; }
.user-open-button:hover,.status-action:hover:not(:disabled) { background:var(--hover); }
.user-detail-panel { width:min(100%,720px); }
.user-detail-meta { margin:5px 0 0; color:var(--muted); font-size:12px; }
.user-detail-content { padding:18px 24px 22px; }
.user-status-box { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--hover); }
.user-status-box strong { font-size:14px; }
.user-status-box p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
.status-action.danger-action { border-color:#f0c9c5; color:#b4453c; }
.status-action:disabled { opacity:.5; cursor:not-allowed; }
.chat-access-editor { margin-top:22px; }
.access-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.access-heading h3 { margin:0; font-size:15px; }
.access-heading p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.selected-chat-count { flex:none; color:var(--muted); font-size:12px; }
.access-search { display:flex; align-items:center; gap:8px; height:38px; margin-top:14px; padding:0 11px; border:1px solid var(--line); border-radius:8px; color:var(--muted); }
.access-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); }
.access-bulk-actions { display:flex; justify-content:space-between; margin:5px -8px; }
.access-bulk-actions .text-button { padding:7px 8px; font-size:12px; }
.chat-access-groups { display:grid; gap:10px; max-height:min(42vh,360px); overflow:auto; padding:2px 1px; }
.brand-access-group { overflow:hidden; border:1px solid var(--line); border-radius:9px; }
.brand-access-group h4 { display:flex; justify-content:space-between; margin:0; padding:10px 12px; background:var(--hover); font-size:12px; }
.brand-access-group h4 span { color:var(--muted); font-weight:500; }
.brand-access-group > div { padding:3px 11px; }
.chat-access-option { display:flex; align-items:center; gap:9px; min-height:37px; border-bottom:1px solid var(--line); color:var(--text); font-size:13px; cursor:pointer; }
.chat-access-option:last-child { border-bottom:0; }
.chat-access-option input { width:16px; height:16px; accent-color:var(--blue); }
.user-detail-footer { display:flex; justify-content:flex-end; }
.user-detail-footer .primary-button { width:auto; min-width:180px; padding:0 15px; margin:0; }
@media(max-width:640px) { .user-detail-content { padding:15px; }.user-detail-footer { padding:12px 15px; }.user-status-box { align-items:flex-start; flex-direction:column; }.status-action { align-self:flex-end; } }
.brand-grant-field { min-width:0; margin:16px 0 10px; padding:12px; border:1px solid var(--line); border-radius:9px; }
.brand-grant-field legend { padding:0 5px; color:var(--text); font-size:13px; font-weight:700; }
.brand-grant-field > p { margin:0 0 8px; color:var(--muted); font-size:11px; line-height:1.4; }
.brand-grant-options { display:grid; gap:4px; max-height:190px; overflow:auto; }
.brand-grant-option { display:flex !important; align-items:center; gap:9px !important; margin:0 !important; padding:7px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.brand-grant-option:last-child { border-bottom:0; }
.brand-grant-option input { width:16px; height:16px; accent-color:var(--blue); }
.brand-grant-option span { display:grid; gap:2px; color:var(--text); font-size:12px; }
.brand-grant-option small { color:var(--muted); font-size:10px; font-weight:400; }
.root-protected-label { padding:6px 8px; border-radius:6px; background:var(--hover); color:var(--muted); font-size:10px; text-align:center; }
#admin-screen .admin-panel { display:flex; flex-direction:column; height:min(90vh,760px); overflow:hidden; }
#admin-screen .admin-header,#admin-screen .admin-footer { flex:none; }
#admin-screen .admin-content { flex:1; min-height:0; overflow:hidden; }
#admin-screen .user-access-section { display:flex; min-height:0; flex-direction:column; }
#admin-screen .user-access-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 4px 4px 0; }
.profile-panel,.user-detail-panel { display:flex; flex-direction:column; overflow:hidden; }
.profile-content,.user-detail-content { flex:1; min-height:0; overflow-y:auto; }
@media(max-width:640px) { #admin-screen .admin-panel { height:94vh; height:94dvh; }#admin-screen .admin-content { grid-template-rows:auto minmax(0,1fr); grid-template-columns:minmax(0,1fr); overflow:hidden; }#admin-screen .admin-create-user { max-height:34vh; overflow-y:auto; }#admin-screen .user-access-list { max-height:none; } }
.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; }