/* LinkChat: independent Telegram Web A-inspired interface. No external assets. */
:root {
  color-scheme: light; --primary:#3390ec; --primary-hover:#247fd7; --primary-soft:#eaf3fd;
  --surface:#fff; --surface-soft:#f4f5f7; --text:#17212b; --muted:#85919c; --line:#edf0f3;
  --green:#4eaa75; --danger:#e45454; --danger-soft:#fff0f0; --bubble-in:#fff; --bubble-out:#e3ffc8;
  --chat-background:#dbe7d6; --shadow:0 7px 30px #21374412; --sidebar:330px; --profile:310px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-family:var(--font); font-size:14px; -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--surface-soft); }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; background:none; color:inherit; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:var(--primary); text-decoration:none; }
button:focus-visible,a:focus-visible { outline:3px solid #3390ec77; outline-offset:3px; }
input,textarea,select { color:var(--text); background:var(--surface); }
input:focus,textarea:focus,select:focus { outline:0; border-color:var(--primary)!important; box-shadow:0 0 0 3px #3390ec12; }
textarea { resize:none; }
::selection { background:#3390ec33; }
[hidden] { display:none!important; }
h1,h2,h3,h4,p { margin:0; }
.icon { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.icon.tiny { width:16px; height:16px; color:var(--muted); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; color:#77848f; flex-shrink:0; transition:background .15s,color .15s; }
.icon-button:hover { background:var(--surface-soft); color:var(--primary); }
.muted { color:var(--muted); line-height:1.8; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:11px 20px; border-radius:11px; font-weight:600; line-height:1.4; border:1px solid transparent; transition:background .15s,transform .15s; }
.button:active:not(:disabled) { transform:translateY(1px); }
.button.primary { color:#fff; background:var(--primary); }
.button.primary:hover { background:var(--primary-hover); }
.button.secondary { color:var(--text); background:var(--surface-soft); }
.button.danger { color:white; background:var(--danger); }
.button.full { width:100%; }
.button.compact { min-height:37px; padding:8px 15px; font-size:12px; }
.button-row { display:flex; gap:12px; }
.button-row>* { flex:1; }
.text-button { color:var(--primary); font-size:12px; padding:8px 10px; border-radius:7px; }
.text-button:hover { background:var(--primary-soft); }
.input { width:100%; min-height:44px; padding:11px 13px; border:1px solid #dce2e8; border-radius:10px; transition:border-color .15s,box-shadow .15s; }
.input::placeholder { color:#a5aeb7; }
.input[readonly] { background:var(--surface-soft); }
.form-error { color:var(--danger); font-size:12px; line-height:1.7; }
.form-error:empty { display:none; }
.online-text { color:var(--primary)!important; }
.status-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; }
.boot { height:100dvh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; color:var(--muted); }
.loader { width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
/* Navigation and conversation list */
.app-layout { position:relative; width:100%; height:100dvh; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); overflow:hidden; background:var(--surface); }
.app-layout.has-room { grid-template-columns:var(--sidebar) minmax(0,1fr) var(--profile); }
.sidebar { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); background:var(--surface); position:relative; z-index:3; }
.sidebar-head { height:82px; padding:24px 20px 14px 24px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:white; background:linear-gradient(145deg,#5baeff,#2583de); box-shadow:0 4px 10px #3390ec25; }
.brand-mark>.icon { width:25px; height:25px; }
.brand>div { display:flex; flex-direction:column; gap:3px; }
.brand strong { font-size:20px; letter-spacing:1px; line-height:1.2; }
.brand-sub { color:#99a5b0; font-size:9px; letter-spacing:2.8px; font-weight:600; }
.sidebar-search { display:flex; align-items:center; gap:9px; margin:12px 20px 18px; background:var(--surface-soft); border-radius:24px; padding:0 15px; height:43px; color:#9aa4ae; }
.sidebar-search>.icon { width:19px; height:19px; }
.sidebar-search input { width:100%; background:none; border:0; outline:none; height:100%; font-size:13px; padding:0; box-shadow:none; }
.sidebar-search input::placeholder { color:#98a3ad; }
.sidebar-section-heading { display:flex; align-items:center; justify-content:space-between; padding:0 21px 13px; }
.sidebar-section-heading>span { font-size:13px; font-weight:650; color:#8a96a1; }
.new-chat-button { display:flex; align-items:center; gap:4px; background:var(--primary-soft); color:var(--primary); padding:7px 10px; border-radius:8px; font-size:12px; font-weight:600; }
.new-chat-button .icon { width:16px; height:16px; }
.folder-tabs { display:flex; gap:18px; padding:0 20px; border-bottom:1px solid var(--line); }
.folder-tab { display:flex; align-items:center; gap:6px; padding:10px 0 15px; color:#8b97a1; font-weight:600; font-size:12px; position:relative; white-space:nowrap; }
.folder-tab .icon { width:16px; height:16px; }
.folder-tab.active { color:var(--primary); }
.folder-tab.active::after { position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:3px 3px 0 0; background:var(--primary); content:''; }
.tab-count { font-size:10px; min-width:18px; padding:2px 5px; background:var(--surface-soft); border-radius:6px; }
.active .tab-count { color:var(--primary); background:var(--primary-soft); }
.chat-list { overflow-y:auto; padding:9px 9px 20px; flex:1; }
.chat-row { display:flex; width:100%; align-items:center; gap:12px; padding:14px 12px; border-radius:12px; text-align:left; margin:2px 0; }
.chat-row:hover { background:var(--surface-soft); }
.chat-row.selected { background:var(--primary); color:#fff; }
.avatar { width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:20px; font-weight:600; flex-shrink:0; }
.avatar.large { width:86px; height:86px; font-size:32px; }
.tone-0 { background:linear-gradient(145deg,#75b8f8,#4086d1); }
.tone-1 { background:linear-gradient(145deg,#85c9a6,#4b9f7a); }
.tone-2 { background:linear-gradient(145deg,#c0a0ea,#9774c4); }
.tone-3 { background:linear-gradient(145deg,#f3b786,#df8d5f); }
.tone-4 { background:linear-gradient(145deg,#84cbd1,#4ba5b0); }
.tone-5 { background:linear-gradient(145deg,#ec9bae,#cc758f); }
.avatar-wrap { position:relative; flex-shrink:0; }
.online-dot { position:absolute; bottom:2px; right:2px; width:12px; height:12px; border:2px solid var(--surface); border-radius:50%; background:#56bd7b; }
.chat-row.selected .online-dot { border-color:var(--primary); }
.chat-row-body { flex:1; min-width:0; }
.chat-row-top,.chat-row-bottom { display:flex; align-items:center; gap:7px; }
.chat-row-top { margin-bottom:8px; }
.chat-row-top strong { font-size:14px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.chat-row-top time { font-size:10px; color:#9aa4ad; }
.chat-preview { color:#8996a2; font-size:12px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.5; }
.chat-row.selected .chat-preview,.chat-row.selected time { color:#e2f0ff; }
.unread-count { min-width:19px; height:19px; padding:0 5px; border-radius:10px; font-size:10px; background:var(--primary); color:white; display:grid; place-items:center; font-weight:600; }
.selected .unread-count { background:#fff; color:var(--primary); }
.sidebar-footer { display:flex; align-items:center; gap:11px; padding:15px 17px; border-top:1px solid var(--line); }
.admin-avatar { width:39px; height:39px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-size:15px; font-weight:700; }
.admin-summary { flex:1; display:flex; flex-direction:column; gap:7px; }
.admin-summary strong { font-size:12px; font-weight:600; }
.connection-line { display:flex; align-items:center; gap:6px; font-size:10px; color:#8c98a1; }
.connection-line .status-dot { width:6px; height:6px; }
.offline .status-dot { background:#e9ab57; }
.list-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:260px; padding:35px 15px; text-align:center; }
.list-empty>.icon { width:40px; height:40px; color:#b7c8d7; }
.list-empty strong { font-size:13px; color:#6d7f8f; }
.list-empty p { font-size:11px; line-height:1.8; color:#a3adb6; }
/* Main area */
.conversation { min-width:0; height:100%; min-height:0; display:flex; flex-direction:column; position:relative; background:var(--surface); }
.conversation-header { height:76px; flex-shrink:0; display:flex; align-items:center; padding:0 23px; gap:9px; border-bottom:1px solid var(--line); z-index:2; background:var(--surface); }
.conversation-person { display:flex; flex:1; min-width:0; align-items:center; gap:12px; text-align:left; padding:0; }
.conversation-person .avatar { width:43px; height:43px; font-size:18px; }
.conversation-heading { display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.conversation-name { font-size:15px; font-weight:650; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.conversation-subtitle { font-size:11px; color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.conversation-actions { display:flex; gap:2px; }
.conversation-actions .icon-button { width:37px; height:37px; }
.mobile-back { display:none; }
.conversation-body { min-height:0; flex:1; display:flex; flex-direction:column; position:relative; background:var(--chat-background); isolation:isolate; }
.conversation-body::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.22; background-image:radial-gradient(ellipse at 20% 30%,#f9f9de 0,transparent 55%),radial-gradient(ellipse at 85% 75%,#95bfab 0,transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%238aab91' stroke-width='1.2' opacity='.4'%3E%3Cpath d='m23 23 8-4 7 3-1 9-9 5-7-5zm70 45 16-7-5 17-4-7-7-3zm-40 47 3-8 3 8 8 3-8 3-3 8-3-8-8-3zm62-90c7-8 20 5 11 11l-10 7-9-9c-4-6 3-14 8-9zM17 80c7-9 20-1 17 8l-5 9-11-6c-5-3-6-7-1-11zM100 123h20v13h-9l-6 5v-5h-5z'/%3E%3Ccircle cx='61' cy='56' r='6'/%3E%3Cpath d='M61 47v-4m0 26v-4m9-9h4m-27 0h5M129 91l4 4m-4 0 4-4M71 14l4 4m-4 0 4-4'/%3E%3C/svg%3E"); }
.thread-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 34px 12px; scrollbar-width:thin; scrollbar-color:#6f8c6b50 transparent; }
.message-list { max-width:800px; width:100%; margin:0 auto; min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; }
.day-divider { display:flex; justify-content:center; margin:13px 0 18px; }
.day-divider span { background:#7c997b77; color:#fff; font-size:10px; padding:5px 13px; border-radius:12px; line-height:1.5; backdrop-filter:blur(3px); }
.message-row { display:flex; position:relative; align-items:center; gap:8px; width:100%; flex-shrink:0; }
.message-row.outgoing { flex-direction:row-reverse; }
.message-bubble { max-width:min(78%,540px); min-width:80px; background:var(--bubble-in); padding:11px 13px 6px; border-radius:13px 13px 13px 4px; box-shadow:0 1px 2px #253a3012; position:relative; }
.outgoing .message-bubble { background:var(--bubble-out); border-radius:13px 13px 4px 13px; }
.message-text { line-height:1.85; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
.message-meta { display:flex; justify-content:flex-end; align-items:center; gap:4px; font-size:9px; color:#8b9a8e; margin-top:3px; line-height:1.4; }
.message-meta.is-read { color:#65a94c; }
.message-meta>.icon { width:17px; height:13px; }
.bubble-tools { display:flex; opacity:0; pointer-events:none; transition:opacity .15s; }
.bubble-tools .icon-button { width:28px; height:28px; color:#718b74; }
.bubble-tools .icon { width:16px; height:16px; }
.message-row:hover .bubble-tools,.message-row:focus-within .bubble-tools { opacity:1; pointer-events:auto; }
.bubble-tools .icon-button:hover { background:#fff9; }
.bubble-tools .delete-message:hover { color:var(--danger); }
mark { background:#ffe393; color:#473d1d; border-radius:2px; }
.composer-wrap { position:relative; flex-shrink:0; padding:12px 34px 10px; max-width:868px; width:100%; align-self:center; }
.composer { display:flex; align-items:flex-end; gap:7px; background:var(--surface); padding:8px 9px; border-radius:14px; box-shadow:0 2px 6px #183f2610; }
.composer>.icon-button { width:38px; height:38px; }
.composer textarea { flex:1; min-width:0; min-height:38px; max-height:130px; padding:8px 6px; border:0; background:none; line-height:22px; font-size:13px; box-shadow:none; }
.composer textarea::placeholder { color:#a2adb6; }
.send-button { width:39px; height:39px; background:var(--primary); border-radius:11px; color:white; display:grid; place-items:center; flex-shrink:0; }
.send-button .icon { width:20px; height:20px; }
.send-button:hover { background:var(--primary-hover); }
.composer-hint { display:flex; justify-content:space-between; font-size:9px; padding:9px 4px 0; color:#83947f; }
.composer-hint>span { display:flex; align-items:center; gap:3px; }
.composer-hint .icon { width:10px; height:10px; }
.emoji-picker { position:absolute; bottom:100%; left:34px; width:280px; background:var(--surface); padding:12px; border-radius:14px; box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(6,1fr); z-index:5; }
.emoji-picker button { height:38px; font-size:23px; border-radius:8px; }
.emoji-picker button:hover { background:var(--surface-soft); }
.message-search { height:57px; padding:8px 24px; gap:12px; display:flex; align-items:center; border-bottom:1px solid var(--line); background:var(--surface); z-index:2; }
.message-search>.icon { color:var(--primary); width:19px; height:19px; }
.message-search input { flex:1; min-width:0; border:0; font-size:13px; box-shadow:none; }
.search-count { color:var(--muted); font-size:11px; white-space:nowrap; }
.network-banner { padding:9px 15px; background:#fff3dd; color:#a87d36; font-size:11px; text-align:center; }
.invite-banner { display:flex; align-items:center; flex-shrink:0; gap:12px; margin:16px 24px 0; padding:12px 15px; border-radius:11px; background:#fff9; text-align:left; color:#486950; }
.invite-banner-icon { color:var(--primary); width:33px; height:33px; background:#ffffffa8; border-radius:10px; display:grid; place-items:center; }
.invite-banner>span:nth-child(2) { flex:1; display:flex; flex-direction:column; gap:5px; }
.invite-banner strong { font-size:12px; }
.invite-banner small { font-size:10px; opacity:.65; }
.invite-banner>.icon { width:17px; height:17px; }
.conversation-empty { align-self:center; text-align:center; margin:auto; padding:35px 20px; color:#658069; display:flex; align-items:center; flex-direction:column; gap:13px; }
.conversation-empty strong { font-size:16px; }
.conversation-empty p { font-size:12px; line-height:1.8; }
.empty-chat-icon { width:70px; height:70px; background:#fff7; border-radius:25px; display:grid; place-items:center; margin-bottom:5px; }
.empty-chat-icon .icon { width:34px; height:34px; }
.load-history { align-self:center; display:flex; gap:7px; align-items:center; border-radius:18px; padding:8px 14px; font-size:11px; color:#5c7c60; background:#ffffff90; margin-bottom:12px; }
.load-history .icon { width:13px; height:13px; }
/* Visitor profile */
.profile-panel { min-height:0; display:flex; flex-direction:column; border-left:1px solid var(--line); background:var(--surface); z-index:4; }
.profile-header { min-height:76px; padding:0 19px 0 23px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.profile-header h2 { font-size:14px; font-weight:650; }
.profile-header>.icon-button { display:none; }
.profile-scroll { overflow-y:auto; flex:1; padding:0 24px 22px; scrollbar-width:thin; scrollbar-color:#b5c3ce55 transparent; }
.profile-identity { display:flex; flex-direction:column; align-items:center; padding:28px 0 23px; }
.profile-identity h3 { font-size:18px; margin-top:14px; max-width:100%; overflow-wrap:anywhere; }
.profile-status { font-size:10px; color:var(--muted); margin-top:7px; }
.visitor-id { font-size:9px; letter-spacing:.7px; color:#a4afb8; margin-top:12px; }
.profile-form { display:flex; flex-direction:column; gap:14px; }
.profile-form label { display:flex; flex-direction:column; gap:8px; }
.field-label { display:flex; justify-content:space-between; font-size:11px; font-weight:600; color:#657585; }
.field-label small { font-size:9px; color:#a6afb7; font-weight:400; }
.profile-input { min-height:39px; font-size:12px; padding:9px 11px; }
.notes-input { min-height:84px; font-size:11px; line-height:1.8; padding:10px 11px; }
.profile-form .button:disabled { opacity:1; background:var(--surface-soft); color:#adb6be; }
.section-rule { height:1px; background:var(--line); margin:23px 0; }
.profile-section-title { text-transform:uppercase; font-size:11px; letter-spacing:.5px; color:#96a1ac; font-weight:600; margin-bottom:19px; }
.profile-facts { display:flex; flex-direction:column; gap:18px; }
.profile-fact { display:flex; align-items:flex-start; gap:13px; }
.profile-fact>.icon { width:18px; height:18px; color:#9aa7b2; margin-top:1px; }
.profile-fact>div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.profile-fact span { font-size:10px; color:#97a3ae; }
.profile-fact strong { font-size:11px; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
.profile-fact small { font-size:9px; line-height:1.6; color:#adb5bd; }
.metadata-note { display:flex; gap:6px; font-size:9px; color:#a4afb8; line-height:1.8; margin-top:21px; }
.metadata-note>.icon { width:12px; height:12px; margin-top:3px; }
.profile-action-list { display:flex; flex-direction:column; gap:4px; }
.profile-action { padding:12px 0; display:flex; gap:13px; align-items:center; font-size:12px; color:#758593; text-align:left; border-radius:8px; }
.profile-action:hover { color:var(--primary); }
.profile-action .icon { width:19px; height:19px; }
.profile-action.destructive { color:var(--danger); }
.profile-scrim { display:none; }
/* Empty workspace */
.workspace-welcome { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(ellipse at 45% 35%,#edf7ff 0,transparent 60%),#f8fafc; padding:30px; }
.welcome-label { display:flex; align-items:center; gap:7px; background:#fff; padding:8px 13px; border:1px solid #e8f0f6; border-radius:20px; font-size:10px; letter-spacing:.3px; color:#8999a8; }
.welcome-label .status-dot { width:6px; height:6px; }
.welcome-art { position:relative; width:220px; height:200px; display:grid; place-items:center; margin:25px 0 5px; }
.welcome-symbol { display:grid; place-items:center; width:100px; height:100px; border-radius:31px; color:white; background:linear-gradient(145deg,#64b5ff,#2d8eea); box-shadow:0 18px 45px #3390ec2b; transform:rotate(-7deg); z-index:1; }
.welcome-symbol .icon { width:49px; height:49px; }
.welcome-orbit { position:absolute; border:1px solid #3390ec18; border-radius:50%; width:190px; height:190px; }
.welcome-orbit.two { width:140px; height:140px; border-color:#3390ec25; transform:rotate(25deg); }
.welcome-art::before,.welcome-art::after { content:''; width:10px; height:10px; border-radius:50%; background:#b0d6f7; position:absolute; top:30px; right:35px; }
.welcome-art::after { top:auto; right:auto; bottom:37px; left:24px; width:6px; height:6px; background:#9cd3bb; }
.workspace-welcome h1 { font-size:29px; font-weight:650; letter-spacing:1px; color:#31495e; margin-bottom:17px; }
.workspace-welcome>p { color:#94a1ad; font-size:13px; line-height:2; }
.welcome-cta { margin:27px 0 25px; min-width:200px; box-shadow:0 6px 16px #3390ec22; }
.welcome-features { display:flex; gap:23px; color:#9aa8b4; font-size:10px; }
.welcome-features>span { display:flex; gap:5px; align-items:center; }
.welcome-features .icon { width:15px; height:15px; }
.welcome-disclaimer { margin-top:55px; font-size:10px; color:#b5bfc8; }
/* Modals and settings */
.modal { width:min(470px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); border:0; border-radius:20px; padding:0; color:var(--text); background:var(--surface); box-shadow:0 25px 100px #0c233940; overflow:hidden; }
.modal[open] { display:flex; flex-direction:column; animation:appear .18s ease-out; }
.modal.wide { width:min(850px,calc(100vw - 28px)); }
.modal::backdrop { background:#23364866; backdrop-filter:blur(4px); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 19px 13px 25px; border-bottom:1px solid var(--line); flex-shrink:0; }
.modal-header h2 { font-size:17px; font-weight:650; }
.modal-content { overflow-y:auto; padding:23px 25px 26px; }
.modal-footer { padding:16px 25px 22px; display:flex; justify-content:flex-end; gap:12px; }
.modal-footer .button { min-width:92px; }
.stack-form { display:flex; flex-direction:column; gap:20px; }
.stack-form label { display:flex; flex-direction:column; gap:9px; font-size:12px; font-weight:600; }
.stack-form label small { font-size:10px; font-weight:400; }
.dialog-intro { display:flex; gap:14px; align-items:center; }
.dialog-feature-icon { width:53px; height:53px; border-radius:15px; background:var(--primary-soft); color:var(--primary); flex-shrink:0; display:grid; place-items:center; }
.dialog-intro p { font-size:12px; color:var(--muted); line-height:1.9; }
.callout { display:flex; align-items:flex-start; gap:9px; font-size:11px; color:#72899b; background:var(--surface-soft); border-radius:10px; padding:13px; line-height:1.8; }
.callout>.icon { width:17px; height:17px; margin-top:2px; }
.confirm-content { display:flex; flex-direction:column; gap:20px; }
.confirm-content p { color:#7d8b98; font-size:13px; line-height:1.9; }
.invite-dialog { display:flex; flex-direction:column; align-items:center; gap:13px; }
.qr-frame { padding:8px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.qr-code { display:block; width:220px; height:220px; }
.invite-dialog h3 { font-size:17px; margin-top:4px; }
.invite-dialog>.muted { font-size:12px; margin-bottom:6px; }
.invite-domain-label { width:100%; font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:7px; }
.invite-domain-label select { font-size:12px; }
.invite-link-wrap { width:100%; }
.invite-url { font-size:11px; font-family:ui-monospace,SFMono-Regular,monospace; }
.invite-dialog .button-row { width:100%; }
.invite-dialog .button { font-size:12px; }
.privacy-footnote { display:flex; align-items:flex-start; gap:7px; font-size:10px; color:#a2adb7; line-height:1.8; margin-top:5px; }
.privacy-footnote>.icon { width:13px; height:13px; margin-top:2px; }
.domain-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr); gap:25px; margin-top:24px; }
.domain-mode { font-size:10px; display:flex; align-items:center; gap:7px; color:#8596a6; margin-bottom:14px; line-height:1.7; }
.domain-mode>.icon { width:16px; height:16px; }
.domain-list { min-width:0; }
.domain-card { border:1px solid var(--line); border-radius:13px; margin-bottom:12px; padding:15px; }
.domain-card-header { display:flex; align-items:center; gap:9px; }
.domain-icon { display:grid; place-items:center; width:33px; height:33px; flex-shrink:0; background:var(--primary-soft); color:var(--primary); border-radius:10px; }
.domain-icon>.icon { width:18px; height:18px; }
.domain-card-header>div { flex:1; min-width:0; }
.domain-card-header strong { font-size:12px; }
.domain-address { display:block; font-size:10px; color:var(--muted); overflow-wrap:anywhere; margin-top:5px; }
.state-pill { font-size:9px; color:#9ba6b0; border-radius:5px; padding:4px 6px; background:var(--surface-soft); white-space:nowrap; }
.state-pill.enabled { background:#eaf7ef; color:#58a579; }
.domain-card-meta { display:flex; justify-content:space-between; gap:6px; padding:12px 0; font-size:10px; color:#9ba8b3; }
.domain-card-meta>span { display:flex; gap:5px; align-items:center; }
.domain-card-meta .icon { width:13px; height:13px; }
.domain-card-actions { border-top:1px solid var(--line); padding-top:5px; display:flex; align-items:center; }
.domain-card-actions>.icon-button { margin-left:auto; width:30px; height:30px; }
.domain-card-actions>.icon-button>.icon { width:15px; height:15px; }
.domain-form { gap:14px; border-left:1px solid var(--line); padding-left:24px; }
.domain-form h3 { font-size:13px; margin-bottom:4px; }
.domain-form .input { font-size:12px; min-height:40px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.setting-row>span:first-child { display:flex; flex-direction:column; gap:7px; }
.setting-row strong { font-size:13px; font-weight:600; }
.setting-row small { font-size:10px; line-height:1.7; color:var(--muted); }
.switch { display:block; width:36px; height:21px; flex-shrink:0; position:relative; }
.switch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1; margin:0; }
.switch-track { display:block; border-radius:12px; background:#dce2e8; height:100%; transition:background .2s; }
.switch-track::after { content:''; width:17px; height:17px; top:2px; left:2px; position:absolute; background:white; border-radius:50%; box-shadow:0 1px 3px #0002; transition:transform .2s; }
.switch input:checked+.switch-track { background:var(--primary); }
.switch input:checked+.switch-track::after { transform:translateX(15px); }
.switch input:focus-visible+.switch-track { outline:3px solid #3390ec55; }
.settings-about { display:flex; gap:11px; margin:24px 0; }
.settings-about>.icon { color:var(--primary); width:20px; height:20px; }
.settings-about strong { font-size:12px; }
.settings-about p { color:#99a5af; font-size:10px; line-height:1.9; margin-top:8px; }
.logout-button { color:var(--danger)!important; }
.toasts { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; z-index:1000; pointer-events:none; max-width:calc(100vw - 40px); }
.toast { background:#263d50ee; color:white; border-radius:11px; padding:12px 19px; box-shadow:0 4px 20px #172c3326; font-size:12px; line-height:1.7; animation:appear .2s; text-align:center; max-width:550px; }
.toast.error { background:#a74646ee; }
.clipboard-helper { position:fixed; left:-10000px; top:0; }
/* Sign-in and visitor consent */
.auth-page { min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; background:var(--surface); }
.auth-intro { background:linear-gradient(145deg,#eaf5ff,#f5fafb 65%,#f2f7f3); padding:48px max(40px,8vw); display:flex; flex-direction:column; justify-content:center; position:relative; }
.hero-brand { position:absolute; top:45px; left:max(40px,8vw); }
.eyebrow { font-size:11px; letter-spacing:2px; font-weight:600; color:#6b9bbd; margin-bottom:20px; }
.auth-intro h1 { font-size:clamp(30px,3.1vw,48px); line-height:1.5; letter-spacing:2px; font-weight:650; color:#30506c; }
.intro-copy { color:#94a7b7; font-size:13px; line-height:2; margin-top:23px; }
.auth-illustration { position:relative; width:360px; max-width:100%; height:240px; margin-top:35px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.illustration-orbit { position:absolute; width:230px; height:230px; border:1px solid #3390ec1c; border-radius:50%; left:50px; top:0; }
.sample-message { position:relative; z-index:1; display:flex; align-items:center; gap:12px; border-radius:17px; padding:17px 18px; box-shadow:0 9px 25px #42658012; font-size:12px; }
.sample-message.inbound { background:#fff; align-self:flex-start; transform:rotate(-3deg); }
.sample-message .avatar { width:36px; height:36px; font-size:15px; }
.sample-message small { display:block; font-size:9px; color:#a6b3bf; margin-bottom:6px; }
.sample-message strong { font-size:12px; color:#687c8e; font-weight:500; }
.sample-message.outbound { align-self:flex-end; background:#e3f8da; color:#608559; transform:rotate(3deg); }
.sample-message.outbound .icon { width:17px; height:17px; color:#7ba971; }
.illustration-chip { position:relative; font-size:9px; display:flex; gap:6px; align-items:center; justify-content:center; color:#92aab9; margin-top:8px; }
.illustration-chip>.icon { width:14px; height:14px; }
.auth-footnote { color:#acb9c4; font-size:10px; line-height:1.8; }
.auth-intro>.auth-footnote { position:absolute; bottom:35px; left:max(40px,8vw); }
.auth-card-wrap { display:grid; place-items:center; padding:45px; }
.auth-card { width:360px; max-width:100%; }
.auth-symbol { width:56px; height:56px; border-radius:17px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; margin-bottom:27px; }
.auth-symbol .icon { width:26px; height:26px; }
.auth-card h2 { font-size:26px; font-weight:650; margin-bottom:12px; }
.auth-card>.muted { font-size:12px; }
.auth-form { display:flex; flex-direction:column; gap:20px; margin-top:33px; }
.auth-form label { font-size:12px; font-weight:600; display:flex; flex-direction:column; gap:10px; }
.auth-form .input { min-height:49px; font-size:13px; }
.auth-form .button { min-height:48px; margin-top:7px; }
.local-help { margin-top:25px; display:flex; gap:8px; font-size:10px; line-height:1.9; color:#a2aeb9; }
.local-help .icon { width:15px; height:15px; margin-top:2px; }
.guest-gate { min-height:100dvh; background:radial-gradient(ellipse at 50% 20%,#eaf5ff,transparent 65%),var(--surface-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:40px 18px; }
.gate-card { width:min(510px,100%); background:var(--surface); border:1px solid var(--line); border-radius:23px; padding:34px; box-shadow:0 10px 40px #476b8c09; text-align:center; }
.gate-symbol { width:67px; height:67px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); border-radius:22px; margin:0 auto 24px; }
.gate-symbol .icon { width:32px; height:32px; }
.gate-card .eyebrow { display:block; margin-bottom:13px; font-size:9px; }
.gate-card h1 { font-size:23px; font-weight:650; margin-bottom:13px; }
.gate-card>.muted { font-size:11px; }
.guest-consent { margin-top:25px; display:flex; flex-direction:column; gap:19px; text-align:left; }
.privacy-card { display:flex; align-items:flex-start; gap:11px; padding:17px; background:var(--surface-soft); border-radius:12px; font-size:11px; color:#7c8e9d; line-height:1.9; }
.privacy-card>.icon { width:18px; height:18px; color:#83a2bc; margin-top:2px; }
.privacy-card strong { color:#5c788f; font-size:11px; }
.privacy-card p { margin-top:9px; font-size:10px; }
.check-label { display:flex; align-items:flex-start; gap:8px; color:#8595a3; font-size:10px; cursor:pointer; line-height:1.8; }
.check-label input { margin:3px 0 0; accent-color:var(--primary); }
.gone-card .privacy-card { margin-top:25px; }
.danger-soft { background:var(--danger-soft); color:var(--danger); }
.guest-layout { display:flex; background:#c7d9cc; }
.guest-layout .conversation { max-width:1000px; width:100%; margin:0 auto; box-shadow:0 0 60px #29443c12; }
.guest-brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:var(--primary); background:var(--primary-soft); margin-right:6px; }
/* Actual audio/video call */
.call-overlay { position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:25px; background:#14232ebf; backdrop-filter:blur(14px); }
.call-card { width:min(660px,100%); max-height:calc(100dvh - 50px); border-radius:25px; background:linear-gradient(150deg,#2d4b62,#1b3041 70%); color:white; overflow:hidden; box-shadow:0 30px 100px #0005; display:flex; flex-direction:column; }
.call-security { display:flex; gap:6px; align-items:center; justify-content:center; color:#a3bdcf; font-size:10px; padding:21px; }
.call-security .icon { width:13px; height:13px; }
.call-stage { min-height:300px; height:380px; position:relative; display:grid; place-items:center; flex-shrink:1; overflow:hidden; }
.call-identity { display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; pointer-events:none; }
.call-avatar { width:105px; height:105px; border-radius:50%; background:linear-gradient(150deg,#6ca3cc,#49799f); box-shadow:0 0 0 13px #ffffff07,0 0 0 28px #ffffff03; display:grid; place-items:center; font-size:39px; margin-bottom:28px; }
.call-identity h2 { font-size:23px; font-weight:500; }
.call-status { font-size:12px; color:#a1bacb; margin-top:15px; min-height:19px; }
.remote-media { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; display:none; }
.local-media { position:absolute; z-index:4; right:18px; bottom:15px; width:130px; height:95px; object-fit:cover; border-radius:12px; border:1px solid #ffffff44; background:#152735; transform:scaleX(-1); display:none; }
.video-call .local-media { display:block; }
.video-call.call-connected .remote-media { display:block; }
.video-call.call-connected .call-identity { align-self:start; justify-self:start; align-items:flex-start; margin:18px 22px; padding:10px 13px; background:#172d4670; border-radius:12px; }
.video-call.call-connected .call-avatar { display:none; }
.video-call.call-connected .call-identity h2 { font-size:15px; }
.video-call.call-connected .call-status { margin-top:6px; font-size:10px; color:#d7e5ef; }
.call-controls { display:flex; justify-content:center; gap:25px; padding:25px 25px 15px; }
.call-control { display:flex; flex-direction:column; align-items:center; gap:11px; font-size:10px; color:#bccedb; }
.call-control>.icon { width:55px; height:55px; padding:17px; border-radius:50%; background:#ffffff15; color:white; }
.call-control.accept-call>.icon { background:#51b976; }
.call-control.end-call>.icon { background:#ec5c60; }
.call-control.control-off>.icon { background:#f8faff; color:#2f4a60; }
.call-control:hover>.icon { filter:brightness(1.12); }
.call-privacy { font-size:9px; color:#7d9ab0; text-align:center; padding:9px 22px 23px; line-height:1.8; }
.tap-audio { position:absolute; z-index:5; bottom:15px; left:20px; font-size:11px; }
/* Dark appearance */
.dark { color-scheme:dark; --primary:#63a9ef; --primary-hover:#4d99e6; --primary-soft:#253e56; --surface:#202c38; --surface-soft:#293746; --text:#e0e8ee; --muted:#8a9cad; --line:#2c3b49; --green:#70b98b; --danger:#ef7b7b; --danger-soft:#4e343d; --bubble-in:#273b4b; --bubble-out:#35594b; --chat-background:#192c2b; }
.dark .workspace-welcome { background:radial-gradient(ellipse at 45% 35%,#243b4e,transparent 65%),#1b2a36; }
.dark .workspace-welcome h1 { color:#b7ccdd; }
.dark .welcome-label { background:#263a4b; border-color:#334b5e; }
.dark .input { border-color:#3b4d5d; }
.dark .auth-intro { background:linear-gradient(140deg,#223e51,#202f38); }
.dark .auth-intro h1 { color:#a5c7e1; }
.dark .sample-message.inbound { background:#2b4052; }
.dark .sample-message strong { color:#b8cedf; }
.dark .sample-message.outbound { background:#365c4b; color:#b0d8ba; }
.dark .guest-gate { background:radial-gradient(ellipse at 50% 20%,#254157,transparent 65%),#192b39; }
.dark .network-banner { background:#51442f; color:#d6b378; }
.dark .invite-banner { background:#293f3ad9; color:#a3c7a9; }
.dark .invite-banner-icon { background:#254538; }
.dark .message-meta { color:#8cab9e; }
.dark .message-meta.is-read { color:#9bcfa7; }
.dark .day-divider span { background:#41604d99; }
.dark .guest-layout { background:#17252a; }
.dark .qr-frame { border-color:#fff; }
.dark .state-pill.enabled { background:#2d493b; color:#8abc9d; }
.dark .message-bubble { box-shadow:0 1px 2px #0002; }
/* Responsive layouts */
@media (min-width:1600px) { :root { --sidebar:360px; --profile:335px; } .thread-scroll { padding-left:45px; padding-right:45px; } }
@media (max-width:1199px) {
  :root { --sidebar:300px; --profile:300px; }
  .app-layout.has-room { grid-template-columns:var(--sidebar) minmax(0,1fr); }
  .profile-panel { position:absolute; right:0; top:0; bottom:0; width:320px; visibility:hidden; transform:translateX(100%); transition:transform .2s,visibility .2s; box-shadow:-10px 0 50px #14312c20; }
  .profile-header>.icon-button { display:inline-flex; }
  .profile-open .profile-panel { visibility:visible; transform:translateX(0); }
  .profile-open .profile-scrim { display:block; position:fixed; inset:0; background:#182c3b44; z-index:3; }
  .thread-scroll { padding-left:25px; padding-right:25px; }
  .composer-wrap { padding-left:25px; padding-right:25px; }
  .conversation-header { padding:0 17px; }
}
@media (max-width:767px) {
  :root { font-size:14px; }
  .app-layout,.app-layout.has-room { display:flex; }
  .admin-layout>.sidebar { width:100%; flex-shrink:0; border:0; }
  .admin-layout>.conversation { display:none; }
  .admin-layout.mobile-chat>.sidebar { display:none; }
  .admin-layout.mobile-chat>.conversation { display:flex; width:100%; }
  .sidebar-head { height:80px; }
  .sidebar-search { margin-bottom:20px; }
  .chat-row { padding:15px 14px; }
  .chat-row-top strong { font-size:15px; }
  .chat-preview { font-size:13px; }
  .avatar { width:52px; height:52px; }
  .mobile-back { display:inline-flex; width:32px; height:36px; }
  .conversation-header { height:68px; padding:0 10px; gap:5px; }
  .conversation-person { gap:9px; }
  .conversation-person .avatar { width:38px; height:38px; font-size:16px; }
  .conversation-name { font-size:14px; }
  .conversation-subtitle { font-size:10px; }
  .conversation-actions { gap:0; }
  .conversation-actions>.icon-button { width:31px; height:36px; }
  .conversation-actions>.icon-button>.icon { width:20px; height:20px; }
  .thread-scroll { padding:15px 14px 8px; }
  .message-bubble { max-width:82%; }
  .message-text { font-size:14px; }
  .message-meta { font-size:10px; }
  .composer-wrap { padding:10px 12px max(8px,env(safe-area-inset-bottom)); }
  .composer-hint { display:none; }
  .composer textarea { font-size:16px; }
  .bubble-tools { flex-direction:column; opacity:.4; pointer-events:auto; gap:1px; }
  .bubble-tools .icon-button { width:25px; height:25px; }
  .bubble-tools .icon { width:13px; height:13px; }
  .message-row { gap:4px; }
  .profile-panel { width:min(340px,92vw); }
  .profile-fact strong { font-size:12px; }
  .profile-action { font-size:13px; }
  .message-search { padding:8px 14px; }
  .message-search input { font-size:16px; }
  .search-count { font-size:9px; }
  .invite-banner { margin:12px 12px 0; padding:10px; }
  .invite-banner strong { font-size:11px; }
  .invite-banner small { font-size:9px; }
  .domain-layout { grid-template-columns:1fr; }
  .domain-form { border-left:0; padding:20px 0 0; border-top:1px solid var(--line); }
  .auth-page { display:flex; flex-direction:column; }
  .auth-intro { padding:25px 28px 20px; min-height:auto; display:block; }
  .hero-brand { position:static; margin-bottom:35px; }
  .auth-intro .eyebrow,.auth-intro h1,.intro-copy,.auth-illustration,.auth-intro>.auth-footnote { display:none; }
  .auth-card-wrap { padding:25px 28px 45px; }
  .auth-card { width:100%; max-width:390px; }
  .auth-symbol { margin-bottom:22px; }
  .auth-card h2 { font-size:24px; }
  .auth-form .input { font-size:16px; }
  .guest-gate { padding:25px 14px; gap:22px; }
  .gate-card { padding:27px 22px; }
  .gate-card h1 { font-size:22px; }
  .guest-brand-mark { display:none; }
  .guest-layout .conversation-header { padding:0 15px; }
  .modal-content { padding:20px; }
  .modal-header { padding-left:20px; }
  .modal-footer { padding:14px 20px 20px; }
  .stack-form .input { font-size:16px; }
  .emoji-picker { left:12px; }
  .toasts { bottom:85px; width:90%; }
  .toast { padding:11px 15px; font-size:12px; }
  .call-overlay { padding:12px; }
  .call-card { border-radius:20px; max-height:calc(100dvh - 24px); }
  .call-stage { height:380px; min-height:240px; }
  .local-media { width:100px; height:76px; right:12px; }
  .call-controls { gap:22px; }
  .call-control>.icon { width:52px; height:52px; padding:16px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.modal-toast { position:absolute; bottom:18px; left:18px; right:18px; z-index:10; max-width:none; }