:root {
  color-scheme: light dark;
  --bg:#f4f5f8;
  --panel:#ffffff;
  --panel2:#f8f8fb;
  --text:#20212a;
  --muted:#777b88;
  --line:#e4e5eb;
  --accent:#aa35b9;
  --accent2:#d248c7;
  --danger:#dc3e56;
  --shadow:0 18px 50px rgba(25,20,35,.14);
}
html[data-theme=dark]{--bg:#111217;--panel:#191a20;--panel2:#202128;--text:#f2f2f5;--muted:#a5a8b2;--line:#2d2f38;--shadow:0 18px 50px rgba(0,0,0,.35)}
@media (prefers-color-scheme: dark) {
  html[data-theme=auto],html:not([data-theme]){--bg:#111217;--panel:#191a20;--panel2:#202128;--text:#f2f2f5;--muted:#a5a8b2;--line:#2d2f38;--shadow:0 18px 50px rgba(0,0,0,.35)}
}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior-x:none;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer} [hidden]{display:none!important}
.center-view{min-height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 15%,rgba(183,52,194,.14),transparent 35%),var(--bg)}
.auth-card{width:min(430px,100%);background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:var(--shadow);text-align:center}
.auth-brand{position:relative;width:min(280px,82%);margin:0 auto 12px}.brand-logo{width:100%;height:auto;margin:0;display:block}.version-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:10px;font-weight:800;line-height:1;padding:4px 6px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);box-shadow:0 2px 8px rgba(0,0,0,.08)}.auth-brand .version-badge{position:absolute;right:-2px;bottom:2px}.auth-card h1{margin:6px 0;font-size:30px}.muted,.hint{color:var(--muted)}.hint{font-size:13px;margin-top:18px}
.stack{display:grid;gap:13px;text-align:left;margin-top:22px}.stack label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
input,textarea,select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(170,53,185,.12)}
button{border:0;border-radius:12px;padding:11px 14px}.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;font-weight:700}.secondary{background:var(--panel2);border:1px solid var(--line)}.danger-ghost{background:transparent;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent)}.small{padding:9px 11px;font-size:13px}
.app-shell{height:100vh;height:100dvh;min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr);overflow:hidden}.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;z-index:5}
.sidebar-head{height:74px;padding:12px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.mini-logo-wrap{position:relative;flex:0 0 auto}.mini-logo{width:64px;height:38px;object-fit:contain;display:block}.sidebar-head strong{display:block}.sidebar-head small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-top:3px}.icon-btn{width:38px;height:38px;padding:0;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:20px}.sidebar-head .icon-btn{margin-left:auto}
.sidebar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 12px}.compact-actions{gap:10px}.sidebar-action-icon{min-height:44px;padding:0;display:inline-grid;place-items:center;border-radius:14px}.sidebar-action-icon svg{width:24px;height:24px;display:block}.sidebar-action-icon:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel2))}.sidebar-action-icon:active{transform:scale(.98)}.conversation-list{overflow:auto;flex:1;padding:4px 8px 10px}.conversation{display:flex;gap:11px;align-items:center;padding:10px;border-radius:14px;cursor:pointer}.conversation:hover,.conversation.active{background:var(--panel2)}.avatar{position:relative;width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#9a30b5,#db57c7);color:#fff;font-weight:800}.unread-badge{position:absolute;top:-4px;right:-5px;z-index:2;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#e04760;color:#fff;border:2px solid var(--panel);font-size:10px;font-weight:900;line-height:1;box-shadow:0 2px 8px rgba(224,71,96,.35)}.unread-badge.dot{width:12px;min-width:12px;height:12px;padding:0;top:-1px;right:-1px;border-width:2px}.conversation .body{min-width:0;flex:1}.conversation .top{display:flex;justify-content:space-between;gap:8px}.conversation .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation .preview{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.conversation time{font-size:11px;color:var(--muted)}.sidebar-foot{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}.sidebar-foot button{flex:1}
.chat-panel{min-width:0;min-height:0;height:100%;overflow:hidden;display:grid;grid-template-rows:74px minmax(0,1fr) auto auto;background:var(--bg)}.chat-head{grid-row:1;min-height:74px;background:var(--panel);border-bottom:1px solid var(--line);padding:11px 18px;display:flex;align-items:center;gap:10px}.chat-head h2{font-size:18px;margin:0}.typing{height:18px;font-size:12px;color:var(--accent);margin-top:3px}.empty-chat{grid-row:2;align-self:center;justify-self:center;text-align:center;color:var(--muted);max-width:440px;padding:30px}.empty-chat img{width:190px;opacity:.68}.empty-chat h2{color:var(--text)}
.messages{grid-row:2;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px max(18px,calc((100vw - 330px - 860px)/2));display:flex;flex-direction:column;gap:8px}.message{display:flex;gap:8px;max-width:min(76%,720px)}.message.mine{align-self:flex-end;flex-direction:row-reverse}.bubble{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:9px 12px;box-shadow:0 4px 14px rgba(0,0,0,.04)}.mine .bubble{background:color-mix(in srgb,var(--accent) 15%,var(--panel));border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}.sender{font-size:12px;font-weight:800;color:var(--accent);margin-bottom:4px}.text{white-space:pre-wrap;word-break:break-word;line-height:1.4}.meta{font-size:10px;color:var(--muted);text-align:right;margin-top:6px}.attachment{display:inline-flex;align-items:center;gap:6px;margin-top:7px;color:var(--accent);text-decoration:none;font-size:13px;font-weight:700}
.composer{grid-row:4;position:relative;z-index:4;width:100%;flex:0 0 auto;display:flex;gap:10px;align-items:flex-end;padding:12px max(16px,calc((100vw - 330px - 860px)/2));padding-bottom:max(12px,env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -8px 22px rgba(0,0,0,.04)}
.task-dock{grid-row:3;position:relative;z-index:3;background:color-mix(in srgb,var(--accent) 4%,var(--panel));border-top:1px solid var(--line);padding:8px max(16px,calc((100vw - 330px - 860px)/2));max-height:min(38vh,320px);overflow:hidden;box-shadow:0 -5px 18px rgba(0,0,0,.025)}.task-dock-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 7px;font-size:11px;color:var(--muted)}.task-dock-head strong{color:var(--text);font-size:11px}.task-dock-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:10px;font-weight:900}.task-dock-list{display:flex;flex-direction:column;gap:7px;max-height:min(30vh,250px);overflow-y:auto;overscroll-behavior:contain;padding:1px 3px 3px}.task-dock .task-card{min-width:0;max-width:none;width:100%;padding:9px 11px;gap:7px;box-shadow:0 3px 12px rgba(0,0,0,.035)}.task-dock .task-title{font-size:14px}.task-dock .task-foot{justify-content:space-between}.task-dock[hidden]{display:none!important}
.file-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);cursor:pointer;font-size:20px}.compose-main{flex:1;min-width:0}.composer textarea{resize:none;min-height:42px;max-height:120px}.file-name{font-size:11px;color:var(--muted);padding:4px 4px 0}.send-btn{width:42px;height:42px;border-radius:50%;padding:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:18px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.46);display:grid;place-items:center;padding:18px;z-index:50}.modal-card{width:min(620px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}.modal-head .icon-btn{font-size:20px}.modal-card #modalBody{padding:18px}.user-list{display:grid;gap:8px}.user-row{display:flex;align-items:center;gap:10px;padding:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px}.user-row .info{flex:1;min-width:0}.user-row .info strong,.user-row .info small{display:block}.user-row .info small{color:var(--muted);margin-top:2px}.admin-grid{display:grid;gap:10px}.admin-row{display:grid;grid-template-columns:1.3fr 1fr auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}.badge{font-size:11px;padding:3px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}.toast{position:fixed;right:18px;bottom:18px;background:#202126;color:white;padding:11px 14px;border-radius:12px;z-index:100;box-shadow:var(--shadow);max-width:360px}.mobile-only{display:none}
@media(max-width:760px){.task-dock{padding:7px 10px;max-height:34vh}.task-dock-list{max-height:26vh}.app-shell{grid-template-columns:minmax(0,1fr)}.sidebar{position:fixed;inset:0 auto 0 0;width:min(88vw,340px);transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow)}.app-shell.sidebar-open .sidebar{transform:translateX(0)}.mobile-only{display:inline-grid;place-items:center}.messages{padding:16px 12px}.composer{padding:10px}.message{max-width:88%}.chat-head{padding:10px 12px}.auth-card{padding:24px 18px}.admin-row{grid-template-columns:1fr}.sidebar-head small{max-width:160px}}

/* v0.2.0 · Admin updater */
.admin-panel{display:grid;gap:18px}.admin-create-card{margin-top:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.admin-create-card h4,.update-card h4{margin:0}.admin-users{display:grid;gap:8px}.update-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--panel2)}.update-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.update-head p{margin:6px 0 0;font-size:12px;line-height:1.45}.update-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:13px}.update-form input[type=file]{background:var(--panel);padding:9px}.update-status{min-height:18px;margin-top:10px;color:var(--muted);font-size:12px}.modal-card{width:min(760px,100%)}
@media(max-width:760px){.update-form{grid-template-columns:1fr}.update-form button{width:100%}.update-head{align-items:center}}

/* v0.2.5 · avatars + inline media */
.sidebar-identity{min-width:0;flex:1}.profile-btn{margin-left:auto;padding:0;border:0;background:transparent;border-radius:50%}.profile-btn .avatar{cursor:pointer}.avatar{overflow:visible}.avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.avatar-initials{position:relative;z-index:0;line-height:1}.avatar-small{width:38px;height:38px;flex:0 0 38px;font-size:11px;border:2px solid color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 2px 10px rgba(0,0,0,.12)}.avatar-message{width:32px;height:32px;flex:0 0 32px;font-size:11px;cursor:pointer}.avatar-admin{width:38px;height:38px;flex:0 0 38px;font-size:10px;cursor:pointer}.avatar-preview{width:220px;height:220px;flex:0 0 220px;font-size:48px;box-shadow:var(--shadow)}.avatar-profile{width:94px;height:94px;flex:0 0 94px;font-size:24px;cursor:pointer}.avatar-preview-wrap{display:grid;justify-items:center;gap:14px;padding:6px 4px 12px}.profile-panel{display:grid;gap:18px}.profile-hero{display:flex;align-items:center;gap:16px}.profile-hero strong,.profile-hero small{display:block}.profile-hero small{margin-top:5px;color:var(--muted)}.profile-actions{display:flex;gap:10px;flex-wrap:wrap}.profile-hint{font-size:12px;line-height:1.5;margin:0}.admin-who{display:flex;align-items:center;gap:10px;min-width:0}
.chat-image,.chat-video{display:block;width:auto;max-width:min(520px,72vw);max-height:440px;border-radius:12px;margin-top:7px;background:#000;object-fit:contain}.chat-image{cursor:zoom-in}.chat-video{min-width:min(360px,60vw)}.chat-audio{display:block;width:min(360px,62vw);max-width:100%;margin-top:8px}.media-viewer{display:grid;place-items:center;max-width:min(92vw,1100px);max-height:78vh;overflow:auto}.media-viewer img,.media-viewer video{display:block;max-width:100%;max-height:74vh;border-radius:12px;background:#000}.attachment{max-width:100%;overflow-wrap:anywhere}.bubble:has(.chat-image),.bubble:has(.chat-video){padding:7px;max-width:min(560px,76vw)}.bubble:has(.chat-image) .sender,.bubble:has(.chat-video) .sender,.bubble:has(.chat-image) .text,.bubble:has(.chat-video) .text{padding-inline:5px}.bubble:has(.chat-image) .meta,.bubble:has(.chat-video) .meta{padding-inline:5px}
@media(max-width:760px){.sidebar-head{gap:9px}.mini-logo{width:58px}.profile-btn{margin-left:0}.avatar-preview{width:180px;height:180px;flex-basis:180px}.chat-image,.chat-video{max-width:74vw;max-height:55vh}.chat-video{min-width:68vw}.bubble:has(.chat-image),.bubble:has(.chat-video){max-width:82vw}.profile-actions{display:grid;grid-template-columns:1fr;width:100%}.profile-actions button{width:100%}}

/* v0.2.7 · Admin cabinet + tasks */
.attach-wrap{position:relative;flex:0 0 auto}.file-btn{font-size:25px;line-height:1;font-weight:300}.attach-menu{position:absolute;left:0;bottom:52px;width:190px;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:20}.attach-menu button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:transparent;padding:10px 11px;border-radius:10px}.attach-menu button:hover{background:var(--panel2)}.attach-menu button span:first-child{width:22px;text-align:center;font-size:17px}
.task-card{min-width:min(330px,64vw);max-width:min(520px,70vw);display:grid;gap:9px;padding:11px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--accent) 7%,var(--panel))}.task-card.completed{opacity:.83;border-color:color-mix(in srgb,#3cab74 35%,var(--line));background:color-mix(in srgb,#3cab74 7%,var(--panel))}.task-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.task-label{font-size:12px;font-weight:900;color:var(--accent)}.task-card.completed .task-label{color:#3cab74}.task-status{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}.task-title{font-size:15px;font-weight:750;line-height:1.42;white-space:pre-wrap;word-break:break-word}.task-assignee,.task-foot{font-size:11px;color:var(--muted)}.task-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px}.task-complete-btn{padding:8px 10px;border-radius:9px;background:linear-gradient(135deg,#2d9f69,#42bb7f);color:#fff;font-size:12px;font-weight:800}.task-create-assignee{padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:13px}.task-create-hint{font-size:12px;line-height:1.5;margin:0}
.admin-cabinet{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:470px;gap:16px}.admin-tabs{display:flex;flex-direction:column;gap:7px;padding-right:14px;border-right:1px solid var(--line)}.admin-tab{text-align:left;background:transparent;border:1px solid transparent;padding:11px 12px}.admin-tab:hover{background:var(--panel2)}.admin-tab.active{background:color-mix(in srgb,var(--accent) 10%,var(--panel2));border-color:color-mix(in srgb,var(--accent) 25%,var(--line));color:var(--accent);font-weight:800}.admin-section-host{min-width:0}.admin-section{display:grid;gap:14px}.admin-card{border:1px solid var(--line);border-radius:16px;padding:15px;background:var(--panel2)}.admin-card h4{margin:0}.admin-card-desc{font-size:12px;line-height:1.5;margin:6px 0 13px}.admin-form-grid,.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.admin-form-grid label,.settings-grid label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.admin-form-grid>button{align-self:end}.settings-stat{display:flex;align-items:end;padding:0 3px 10px;color:var(--muted);font-size:12px}.settings-actions{display:flex;gap:9px;margin-top:13px}.toggle-row{grid-column:1/-1!important;display:flex!important;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);padding:11px 12px;border-radius:12px}.toggle-row input{width:auto}.toggle-row span{color:var(--text)}.modal-card:has(.admin-cabinet){width:min(1040px,96vw)}
@media(max-width:760px){.attach-menu{left:-2px;width:175px}.task-card{min-width:62vw;max-width:78vw}.admin-cabinet{grid-template-columns:1fr;min-height:0}.admin-tabs{flex-direction:row;overflow-x:auto;padding:0 0 10px;border-right:0;border-bottom:1px solid var(--line)}.admin-tab{white-space:nowrap}.admin-form-grid,.settings-grid{grid-template-columns:1fr}.settings-actions{display:grid;grid-template-columns:1fr}.admin-card{padding:12px}.modal-card:has(.admin-cabinet){width:min(96vw,760px)}}


/* v0.2.8 · avatar account menu + logout confirmation */
.sidebar-head{position:relative}.account-menu{position:absolute;right:12px;top:64px;width:210px;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);z-index:40}.account-menu button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:0;padding:10px 11px;border-radius:10px;font-weight:650}.account-menu button:hover{background:var(--panel2)}.account-menu-icon{width:22px;text-align:center;font-size:16px;color:var(--muted)}.account-menu-separator{height:1px;background:var(--line);margin:5px 3px}.account-menu .account-menu-danger{color:var(--danger)}.account-menu .account-menu-danger .account-menu-icon{color:var(--danger)}.profile-btn[aria-expanded="true"] .avatar-small{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),0 2px 10px rgba(0,0,0,.12)}
.confirm-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.52);backdrop-filter:blur(2px)}.confirm-card{width:min(390px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.confirm-card h3{margin:0 0 8px;font-size:19px}.confirm-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:19px}.confirm-danger{background:var(--danger);color:#fff;font-weight:800}.confirm-danger:focus{outline:3px solid color-mix(in srgb,var(--danger) 24%,transparent)}
@media(max-width:760px){.account-menu{right:52px;top:62px;width:205px}.confirm-actions{grid-template-columns:1fr}}

/* v0.2.9 · database backup / restore */
.database-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:4px 0 12px}.database-stat{display:grid;gap:3px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.database-stat strong{font-size:15px}.database-stat small{font-size:10px;color:var(--muted)}.database-note{font-size:11px;line-height:1.5;color:var(--muted);margin:0 0 12px}.database-warning{padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,#d85050 42%,var(--line));background:color-mix(in srgb,#d85050 7%,var(--panel));font-size:12px;line-height:1.45;margin-bottom:12px}.database-restore-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.database-restore-form input[type=file]{background:var(--panel);padding:9px}.database-danger{background:transparent;border:1px solid color-mix(in srgb,#d85050 62%,var(--line));color:#e05a5a;font-weight:800}.database-danger:hover{background:color-mix(in srgb,#d85050 10%,var(--panel))}
@media(max-width:760px){.database-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.database-restore-form{grid-template-columns:1fr}.database-restore-form .database-danger{width:100%}}


/* v0.3.1 · Admin-managed employee positions */
.admin-user-row{grid-template-columns:minmax(220px,1.15fr) minmax(310px,1.4fr) auto}.admin-user-controls{display:grid;grid-template-columns:minmax(120px,1fr) minmax(110px,.75fr) auto;gap:7px;align-items:center}.compact-select{min-width:0;padding:8px 10px}.position-create-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.position-list{display:grid;gap:8px}.position-row{display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.position-row input{min-width:0}.position-row .badge{white-space:nowrap}.position-row button{white-space:nowrap}
@media(max-width:900px){.admin-user-row{grid-template-columns:1fr}.admin-user-controls{grid-template-columns:1fr 1fr auto}.position-row{grid-template-columns:1fr auto}.position-row input{grid-column:1/-1}}
@media(max-width:560px){.admin-user-controls{grid-template-columns:1fr}.position-create-row{grid-template-columns:1fr}.position-create-row button{width:100%}.position-row{grid-template-columns:1fr 1fr}.position-row input,.position-row .badge{grid-column:1/-1}.position-row button{width:100%}}


/* v0.3.2 · explicit theme, message actions/forwarding and rich link previews */
.profile-theme{display:grid;gap:8px;margin-top:16px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.profile-theme strong{font-size:13px}.profile-theme small{color:var(--muted);line-height:1.45}.profile-theme select{background:var(--panel)}
.bubble{position:relative}.message-actions{position:absolute;top:5px;right:6px;z-index:5}.message.mine .message-actions{right:auto;left:6px}.message-more{width:28px;height:26px;padding:0;border-radius:9px;background:transparent;color:var(--muted);opacity:0;transition:opacity .15s,background .15s}.message:hover .message-more,.message-more:focus,.message-more[aria-expanded=true]{opacity:1}.message-more:hover{background:var(--panel2)}.message-action-menu{position:absolute;right:0;top:29px;min-width:145px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);z-index:8}.message.mine .message-action-menu{right:auto;left:0}.message-action-menu button{display:block;width:100%;padding:8px 9px;text-align:left;background:transparent;border-radius:8px;font-size:12px}.message-action-menu button:hover{background:var(--panel2)}.message-action-menu button:disabled{opacity:.45;cursor:not-allowed}.forwarded-label{font-size:11px;color:var(--accent);font-weight:750;margin:0 34px 5px 0}.message.mine .forwarded-label{margin-left:34px;margin-right:0}.message-link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.link-preview{display:grid;grid-template-columns:minmax(0,148px) minmax(180px,1fr);overflow:hidden;margin-top:8px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);text-decoration:none;color:var(--text);max-width:520px}.link-preview-image{width:148px;height:104px;object-fit:cover;background:var(--bg)}.link-preview-body{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 11px;min-width:0}.link-preview-body small{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.link-preview-body strong{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.link-preview-body span{font-size:11px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.forward-list{max-height:55vh;overflow:auto}.forward-row{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:var(--panel2);border:1px solid var(--line);padding:9px 11px}.forward-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.forward-row .avatar{width:36px;height:36px;flex-basis:36px;font-size:12px}
@media(max-width:760px){.message-more{opacity:1}.link-preview{grid-template-columns:92px minmax(0,1fr)}.link-preview-image{width:92px;height:86px}.link-preview-body{padding:8px}.message-action-menu{min-width:135px}}


/* v0.3.3 · read receipts, fallback typing, group avatars, refined attachment control, robust rich previews */
.file-btn{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;padding:0;border-radius:50%;display:inline-grid;place-items:center;font-size:0;line-height:1;border:1px solid var(--line);background:var(--panel2);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .14s ease,background .14s ease,border-color .14s ease}
.file-btn::before{content:'+';display:block;font-size:27px;font-weight:300;line-height:1;transform:translateY(-1px);color:var(--text)}
.file-btn:hover{transform:scale(1.04);background:color-mix(in srgb,var(--accent) 8%,var(--panel2));border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}.file-btn:active{transform:scale(.97)}
.chat-header-avatar{width:40px;height:40px;flex:0 0 40px;font-size:12px;cursor:pointer;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:0 2px 8px rgba(0,0,0,.08)}.chat-head-text{min-width:0}.chat-head-text h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(62vw,720px)}
.typing{display:flex;align-items:center;gap:6px;min-height:18px;height:18px}.typing-dots{display:inline-flex;gap:3px;align-items:center;height:12px}.typing-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;animation:maxichatTyping 1s infinite ease-in-out}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.30s}@keyframes maxichatTyping{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-3px);opacity:1}}
.meta{display:flex;align-items:center;justify-content:flex-end;gap:5px}.read-receipt{font-size:12px;font-weight:900;line-height:1;color:#32b56d;text-shadow:0 0 8px color-mix(in srgb,#32b56d 22%,transparent)}.read-receipt.all-seen{color:#28c477}
.link-preview{grid-template-columns:112px minmax(170px,1fr);min-height:82px;max-width:min(540px,78vw);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);border-color:color-mix(in srgb,var(--accent) 16%,var(--line));background:color-mix(in srgb,var(--panel2) 92%,var(--accent) 3%)}.link-preview-image{width:112px;height:100%;min-height:82px;max-height:118px;object-fit:cover}.link-preview-body{padding:9px 11px;gap:3px}.link-preview-body small{font-size:10px}.link-preview-body strong{font-size:13px;line-height:1.28}.link-preview-body span{font-size:11px}.link-preview-fallback{grid-template-columns:1fr;min-height:0}.link-preview-fallback .link-preview-body{padding:9px 11px}
@media(max-width:760px){.file-btn{width:42px;height:42px;min-width:42px;min-height:42px;flex-basis:42px}.file-btn::before{font-size:26px}.chat-header-avatar{width:36px;height:36px;flex-basis:36px}.link-preview{grid-template-columns:88px minmax(0,1fr);max-width:76vw}.link-preview-image{width:88px;min-height:78px;max-height:96px}.chat-head-text h2{max-width:58vw}}

/* v0.3.5 · Viber-like composer + voice messages */
.composer{gap:9px;align-items:flex-end;padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.composer-input-shell{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;padding:3px 5px 3px 4px;border:1px solid var(--line);border-radius:24px;background:var(--panel2);transition:border-color .15s ease,box-shadow .15s ease}
.composer-input-shell:focus-within{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.composer .attach-wrap{display:flex;align-items:center;align-self:flex-end;flex:0 0 auto}
.composer .file-btn{width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 36px;border:0;background:transparent;box-shadow:none;border-radius:50%;transform:none}
.composer .file-btn::before{font-size:29px;font-weight:260;line-height:1;color:var(--muted);transform:translateY(-1px)}
.composer .file-btn:hover{background:color-mix(in srgb,var(--text) 7%,transparent);border:0;transform:none}
.composer .file-btn:active{transform:scale(.92)}
.composer .compose-main{display:flex;flex-direction:column;justify-content:center;min-height:38px}
.composer textarea{min-height:38px;max-height:118px;padding:8px 6px 7px;border:0;border-radius:0;background:transparent;box-shadow:none;line-height:1.35}
.composer textarea:focus{border-color:transparent;box-shadow:none}
.composer .file-name{padding:0 6px 4px;font-size:10px;line-height:1.25}
.voice-btn{width:36px;height:36px;min-width:36px;flex:0 0 36px;display:grid;place-items:center;align-self:flex-end;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);transition:background .14s ease,color .14s ease,transform .14s ease}
.voice-btn svg{width:19px;height:19px;fill:currentColor;display:block}
.voice-btn:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.voice-btn:active{transform:scale(.92)}
.send-btn{width:44px;height:44px;min-width:44px;flex:0 0 44px;align-self:flex-end}
.recording-state{flex:1;min-width:0;height:38px;display:flex;align-items:center;gap:8px;padding:0 2px 0 8px;color:var(--text)}
.recording-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 4px color-mix(in srgb,#e5484d 14%,transparent);animation:maxichatRecordPulse 1.1s ease-in-out infinite}
@keyframes maxichatRecordPulse{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.recording-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;letter-spacing:.2px}
.recording-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.record-control{width:32px;height:32px;min-width:32px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1}
.record-cancel{background:transparent;color:var(--muted)}
.record-cancel:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger)}
.record-send{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:15px}
.composer.is-recording .attach-wrap,.composer.is-recording .compose-main,.composer.is-recording .voice-btn,.composer.is-recording>.send-btn{display:none}
.composer.is-recording .composer-input-shell{padding-left:7px}
@media(max-width:760px){
  .composer{gap:7px;padding-inline:9px}
  .composer-input-shell{border-radius:23px}
  .composer .file-btn,.voice-btn{width:35px;height:35px;min-width:35px;flex-basis:35px}
  .composer .file-btn::before{font-size:28px}
  .send-btn{width:42px;height:42px;min-width:42px;flex-basis:42px}
  .recording-label{display:none}
}

/* v0.3.7 · clean three-person group marker (no check mark) */
.group-avatar-badge{position:absolute;right:-4px;bottom:-3px;z-index:5;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);color:var(--text);border:2px solid var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none}
.group-avatar-badge svg{width:14px;height:11px;display:block;overflow:visible}
.avatar-profile.group-avatar .group-avatar-badge{width:28px;height:28px;right:1px;bottom:1px;border-width:3px}.avatar-profile.group-avatar .group-avatar-badge svg{width:19px;height:15px}
.chat-header-avatar.group-avatar .group-avatar-badge{width:19px;height:19px;right:-4px;bottom:-3px}.chat-header-avatar.group-avatar .group-avatar-badge svg{width:13px;height:10px}
.forward-row .group-avatar .group-avatar-badge{width:18px;height:18px;right:-3px;bottom:-3px}.forward-row .group-avatar .group-avatar-badge svg{width:12px;height:9px}
.message.task-history{justify-content:center;padding-block:2px}.task-history .task-history-bubble{max-width:min(560px,86%);background:transparent;border:0;box-shadow:none;padding:0}.task-history .task-card{min-width:min(330px,74vw);max-width:min(540px,80vw)}.task-history-meta{justify-content:center;margin-top:5px;color:var(--muted)}
@media(max-width:760px){.group-avatar-badge{width:19px;height:19px}.group-avatar-badge svg{width:13px;height:10px}.avatar-profile.group-avatar .group-avatar-badge{width:25px;height:25px}.avatar-profile.group-avatar .group-avatar-badge svg{width:17px;height:13px}.task-history .task-history-bubble{max-width:94%}.task-history .task-card{min-width:min(300px,88vw);max-width:88vw}}



/* v0.3.9 · reply composer, quoted replies, edit/delete actions */
.composer{flex-wrap:wrap}
.composer-reply{flex:0 0 100%;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 10px 7px 12px;border-left:3px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 9%,var(--panel2));color:var(--text)}
.composer-reply[hidden]{display:none}.composer-reply-text{min-width:0;display:grid;gap:2px;flex:1}.composer-reply-text strong{font-size:11px;color:var(--accent)}.composer-reply-text span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composer-reply button{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:21px}.composer-reply button:hover{background:var(--panel2);color:var(--text)}
.composer.is-recording .composer-reply{display:none}
.reply-quote{display:block;margin:0 30px 7px 0;padding:7px 9px;border-left:3px solid var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--panel2));min-width:0}.message.mine .reply-quote{margin-left:30px;margin-right:0}.reply-quote strong{display:block;font-size:11px;color:var(--accent);margin-bottom:2px}.reply-quote span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.reply-quote.is-deleted span{font-style:italic}
.edited-label{font-size:9px;color:var(--muted);margin-right:5px}.message-action-menu .danger{color:#ef5b6a}
@media(max-width:760px){.reply-quote span{max-width:58vw}.composer-reply{padding-inline:10px}}


/* v0.4.3 · prevent accidental desktop history swipe while selecting text */
.app-shell,.sidebar,.chat-panel,.messages,.conversation-list{overscroll-behavior-x:none}.message .text,.reply-quote{-webkit-user-select:text;user-select:text}


/* v0.9.1 · unified contacts + groups list */
.mobile-sidebar-tabs,.mobile-contact-list{display:none!important}
.sidebar-pin{flex:0 0 30px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);opacity:.26;font-size:15px;display:grid;place-items:center;cursor:pointer;transition:opacity .15s ease,background .15s ease,transform .15s ease}
.sidebar-pin:hover,.sidebar-pin:focus-visible{opacity:.7;background:var(--panel2)}
.sidebar-pin.active{opacity:1;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sidebar-pin:active{transform:scale(.92)}
@media(max-width:760px){.sidebar-pin{opacity:.34}.sidebar-pin.active{opacity:1}}

/* v0.4.3 · online presence + compact last-seen line */
.online-dot{position:absolute;right:-1px;bottom:-1px;z-index:6;width:12px;height:12px;border-radius:50%;background:#2fc96f;border:2px solid var(--panel);box-shadow:0 1px 5px rgba(47,201,111,.45);pointer-events:none}
.avatar-small .online-dot{width:11px;height:11px}.avatar-message .online-dot{width:10px;height:10px;border-width:2px}.chat-header-avatar .online-dot{width:12px;height:12px;right:-2px;bottom:-2px}
.chat-presence{height:13px;min-height:13px;line-height:13px;margin-top:1px;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(62vw,720px)}
.chat-presence.online{color:#2fc96f;font-weight:750}.chat-head-text .typing{margin-top:0;height:16px;min-height:16px;font-size:11px}
@media(max-width:760px){.chat-presence{max-width:58vw;font-size:10px}.online-dot{width:11px;height:11px}.chat-header-avatar .online-dot{width:11px;height:11px}}

/* v0.4.5 · desktop contact context menu */
.contact-context-menu{position:fixed;z-index:2600;min-width:215px;max-width:min(290px,calc(100vw - 16px));padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 16px 42px rgba(0,0,0,.22);display:grid;gap:2px}
.contact-context-menu button{width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:9px 11px;border-radius:9px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.contact-context-menu button:hover,.contact-context-menu button:focus-visible{background:var(--hover);outline:none}
.contact-context-menu button:disabled{opacity:.42;cursor:default}
.contact-context-menu button.danger{color:var(--danger,#d93b52)}
@media(max-width:760px){.contact-context-menu{display:none!important}}


/* v0.4.6 · global right-click policy: custom Copy-only menu for selected text */
.selection-copy-menu{position:fixed;z-index:2500;min-width:150px;padding:6px;background:var(--surface,#fff);border:1px solid var(--border,#dfe3ea);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.selection-copy-menu button{width:100%;border:0;background:transparent;color:var(--text,#18202a);padding:9px 11px;border-radius:8px;text-align:left;font:inherit;cursor:pointer}
.selection-copy-menu button:hover{background:var(--surface-2,#f3f5f8)}
@media (prefers-color-scheme:dark){html[data-theme=auto] .selection-copy-menu{box-shadow:0 12px 32px rgba(0,0,0,.42)}}
\n\n/* v0.4.7 · browser notification opt-in prompt */\n.notification-permission-card{position:fixed;right:18px;top:18px;z-index:3200;width:min(430px,calc(100vw - 36px));display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px 12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:0 18px 48px rgba(0,0,0,.24);animation:notificationPermissionIn .18s ease-out}\n.notification-permission-icon{grid-row:1 / span 2;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 13%,var(--panel2));font-size:21px}\n.notification-permission-copy{min-width:0;display:grid;gap:3px}.notification-permission-copy strong{font-size:13px}.notification-permission-copy span{font-size:11.5px;line-height:1.35;color:var(--muted)}\n.notification-permission-actions{grid-column:2;display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.notification-permission-actions button{min-height:34px}\n@keyframes notificationPermissionIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}\n@media(max-width:760px){.notification-permission-card{left:10px;right:10px;top:max(10px,env(safe-area-inset-top));width:auto;padding:12px;grid-template-columns:38px minmax(0,1fr)}.notification-permission-icon{width:38px;height:38px;border-radius:12px}.notification-permission-actions{justify-content:stretch}.notification-permission-actions button{flex:1}}\n
/* v0.4.8 · compact composer, emoji picker, voice player and menu stacking fix */
.composer{gap:0;padding-top:9px;padding-bottom:max(9px,env(safe-area-inset-bottom))}
.composer-input-shell{position:relative;width:100%;gap:2px;padding:4px 5px;border-radius:24px;background:var(--panel2);border:1px solid var(--line);align-items:flex-end}
.composer-tools{display:flex;align-items:center;gap:1px;flex:0 0 auto;align-self:flex-end}
.composer-tool-btn,.voice-btn,.composer-send-btn{width:34px;height:34px;min-width:34px;flex:0 0 34px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);transition:background .14s ease,color .14s ease,transform .14s ease}
.composer-tool-btn svg,.voice-btn svg{width:19px;height:19px;fill:currentColor;display:block}
.composer-tool-btn:hover,.voice-btn:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.composer-tool-btn:active,.voice-btn:active,.composer-send-btn:active{transform:scale(.92)}
.composer-send-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:17px;margin-left:1px}
.composer .compose-main{min-width:80px;flex:1;min-height:36px}
.composer textarea{min-height:36px;max-height:116px;padding:7px 7px 6px;border:0!important;background:transparent!important;box-shadow:none!important;line-height:1.35}
.composer .file-name{padding:0 7px 3px;font-size:10px;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.emoji-picker{position:absolute;left:38px;bottom:48px;z-index:120;width:min(310px,calc(100vw - 30px));max-height:210px;overflow:auto;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:8px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:0 14px 38px rgba(0,0,0,.22)}
.emoji-picker[hidden]{display:none!important}.emoji-choice{height:36px;padding:0;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;font-size:21px;line-height:1}.emoji-choice:hover{background:var(--panel2)}
.composer.is-recording .composer-tools,.composer.is-recording .compose-main,.composer.is-recording .voice-btn,.composer.is-recording .composer-send-btn,.composer.is-recording .emoji-picker{display:none!important}
.composer.is-recording .recording-state{flex:1}

/* Custom voice-message player: no native volume / overflow controls and no filename row. */
.voice-player{width:min(350px,62vw);min-width:245px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:15px;background:color-mix(in srgb,var(--panel2) 94%,var(--accent) 4%);border:1px solid color-mix(in srgb,var(--line) 86%,var(--accent) 14%);margin-top:5px}
.voice-play{width:34px;height:34px;min-width:34px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--text)}
.voice-play:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}.voice-play svg{width:18px;height:18px;fill:currentColor}
.voice-middle{flex:1;min-width:0;display:grid;gap:3px}.voice-waveform{height:26px;width:100%;padding:1px 0;border:0;background:transparent;display:flex;align-items:center;gap:2px;overflow:hidden;cursor:pointer}
.voice-waveform i{display:block;flex:1;min-width:2px;max-width:4px;border-radius:99px;background:color-mix(in srgb,var(--muted) 62%,transparent);transition:background .12s ease}.voice-waveform i.played{background:var(--accent2)}
.voice-times{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:9.5px;line-height:1}.voice-audio-engine{display:none!important}
.bubble:has(.voice-player){padding:7px 8px}.bubble:has(.voice-player) .attachment{display:none!important}

/* Message menu must always be above avatar presence dots. */
.message-actions{z-index:80}.message-action-menu{z-index:90}.message.message-menu-open{position:relative;z-index:70}.message.message-menu-open .avatar-message .online-dot{visibility:hidden}

@media(max-width:760px){
  .composer{padding-inline:8px}.composer-input-shell{border-radius:23px;padding-inline:4px}.composer-tools{gap:0}
  .composer-tool-btn,.voice-btn,.composer-send-btn{width:33px;height:33px;min-width:33px;flex-basis:33px}.composer-tool-btn svg,.voice-btn svg{width:18px;height:18px}
  .emoji-picker{left:6px;bottom:46px;grid-template-columns:repeat(7,1fr);width:min(306px,calc(100vw - 26px))}
  .voice-player{width:min(300px,74vw);min-width:215px;padding:7px 9px;gap:8px}.voice-play{width:32px;height:32px;min-width:32px}.voice-waveform{height:24px;gap:1.5px}
}

/* v0.4.8 · deleted-message tombstones + mobile tap action menu */
.message.is-deleted .bubble{opacity:.78;border-style:dashed;background:color-mix(in srgb,var(--panel2) 82%,transparent)}
.deleted-message{font-size:12px;font-style:italic;color:var(--muted);padding:2px 2px 1px;white-space:nowrap}
@media(max-width:760px){.message-action-menu{z-index:140}.message.message-menu-open{z-index:130}}


/* v0.4.9 · keep the mobile Contacts/Chats drawer above all chat decorations */
@media(max-width:760px){
  .sidebar{z-index:500!important}
  .app-shell.sidebar-open .chat-panel{position:relative;z-index:0}
  .app-shell.sidebar-open .chat-panel .online-dot,
  .app-shell.sidebar-open .chat-panel .message-actions,
  .app-shell.sidebar-open .chat-panel .message-action-menu{visibility:hidden!important}
}


/* v0.5.1 · true full-screen mobile Contacts home */
@media(max-width:760px){
  .sidebar{width:100vw!important;max-width:100vw!important;inset:0!important;box-shadow:none!important;border-right:0!important;transform:translateX(-100%)!important}
  .app-shell.sidebar-open .sidebar{transform:translateX(0)!important}
  .app-shell.sidebar-open .chat-panel{visibility:hidden!important;pointer-events:none!important}
  .app-shell.mobile-contact-home .sidebar{transform:translateX(0)!important}
  .app-shell.mobile-contact-home .chat-panel{visibility:hidden!important;pointer-events:none!important}
  .app-shell.mobile-contact-home #closeSidebarBtn{display:none!important}
  .app-shell.mobile-contact-home .sidebar-head{padding-right:14px}
  .mobile-contact-list{flex:1;min-height:0}
}


/* v0.5.2 · Android notification sound settings */
.profile-notifications{display:grid;gap:8px;margin-top:2px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.profile-notifications strong{font-size:13px}.profile-notifications small{color:var(--muted);line-height:1.45}.profile-notifications select{background:var(--panel)}
.profile-notification-actions{display:flex;gap:8px;flex-wrap:wrap}.profile-notification-actions button{min-height:34px}
@media(max-width:760px){.profile-notification-actions{display:grid;grid-template-columns:1fr}.profile-notification-actions button{width:100%}}


/* v0.5.3 · mobile Contacts list begins from the left edge */
@media(max-width:760px){
  .mobile-contact-list{
    width:100%!important;
    box-sizing:border-box!important;
    padding:6px 12px 14px!important;
    text-align:left!important;
    place-items:initial!important;
  }
  .mobile-contact-row{
    width:100%!important;
    box-sizing:border-box!important;
    justify-self:stretch!important;
    justify-content:start!important;
    margin:0!important;
    padding:10px 8px!important;
    text-align:left!important;
  }
  .mobile-contact-row .avatar{justify-self:start!important}
  .mobile-contact-info{justify-self:stretch!important;text-align:left!important}
  .mobile-contact-open{justify-self:end!important}
}


/* v0.6.3 · reliable mobile contact separators: soft ends, clearer center.
   Avoid color-mix() here because older Android WebView builds can drop the whole gradient. */
:root{--contact-separator-edge:rgba(93,96,110,.07);--contact-separator-mid:rgba(73,76,90,.34)}
html[data-theme=dark]{--contact-separator-edge:rgba(230,232,240,.06);--contact-separator-mid:rgba(230,232,240,.30)}
@media (prefers-color-scheme: dark){
  html[data-theme=auto],html:not([data-theme]){--contact-separator-edge:rgba(230,232,240,.06);--contact-separator-mid:rgba(230,232,240,.30)}
}
@media(max-width:760px){
  .mobile-contact-row{position:relative!important}
  .mobile-contact-row + .mobile-contact-row::before{
    content:"";
    position:absolute;
    z-index:2;
    left:7px;
    right:7px;
    top:0;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--contact-separator-edge) 15%,
      var(--contact-separator-mid) 50%,
      var(--contact-separator-edge) 85%,
      transparent 100%
    );
  }
}

/* v0.5.8 · notification sound preview + vibration controls */
.profile-notification-field{display:grid;gap:6px}
.profile-notification-field>span{font-size:12px;color:var(--muted);font-weight:700}
.profile-notification-field select{width:100%}

/* v0.5.8 · mobile safe area + modal/profile layer fix */
@media(max-width:760px){
  /* Keep the app controls below Android/iOS status-bar icons in WebView/PWA. */
  .sidebar-head{
    height:auto!important;
    min-height:74px!important;
    padding-top:max(12px,env(safe-area-inset-top))!important;
  }
  .chat-head{
    min-height:64px!important;
    padding-top:max(10px,env(safe-area-inset-top))!important;
  }

  /* Full-screen Contacts uses z-index 500; dialogs must always sit above it. */
  .modal{
    z-index:5000!important;
    padding-top:max(12px,env(safe-area-inset-top))!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  .modal-card{
    max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;
    overscroll-behavior:contain;
  }
  .confirm-overlay{z-index:5100!important}
  .toast{z-index:5200!important}
}

/* v0.6.1 · audio calls + notification admin */
.call-btn{margin-left:auto;flex:0 0 auto;width:38px;height:38px;border-radius:50%;font-size:20px;display:grid;place-items:center}
body.call-open{overflow:hidden;overscroll-behavior:none}
.call-overlay{position:fixed;inset:0;z-index:12000;display:block;padding:0;background:var(--bg);color:var(--text);overflow:hidden}
.call-card{position:relative;width:100%;height:100%;min-height:100dvh;border:0;border-radius:0;padding:max(34px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;background:radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--accent) 24%,transparent) 0,transparent 31%),radial-gradient(circle at 20% 88%,color-mix(in srgb,var(--accent2) 12%,transparent) 0,transparent 30%),linear-gradient(160deg,color-mix(in srgb,var(--panel) 94%,#000),var(--bg));box-shadow:none}
.call-glow{position:absolute;left:50%;top:31%;width:min(58vw,310px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%);filter:blur(16px);pointer-events:none;opacity:.8}
.call-avatar{position:relative;z-index:1;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));border:2px solid color-mix(in srgb,#fff 18%,transparent);box-shadow:0 18px 52px color-mix(in srgb,var(--accent) 30%,transparent);font-size:34px;font-weight:850;color:#fff;letter-spacing:.02em}
.call-name{position:relative;z-index:1;margin-top:14px;font-size:clamp(24px,4vw,34px);line-height:1.15;text-align:center}
.call-status{position:relative;z-index:1;margin-top:2px;font-size:14px;color:var(--muted);text-align:center}
.call-duration{position:relative;z-index:1;min-height:22px;font-variant-numeric:tabular-nums;font-size:13px;font-weight:750;letter-spacing:.08em;color:color-mix(in srgb,var(--text) 78%,var(--muted));opacity:0;transition:opacity .18s ease}
.call-overlay.is-connected .call-duration{opacity:1}
.call-actions{position:relative;z-index:1;width:min(520px,100%);display:flex;align-items:flex-start;justify-content:center;gap:clamp(18px,7vw,48px);margin-top:34px}
.call-actions-active{margin-top:42px}
.call-control{appearance:none;border:0;background:transparent;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:9px;min-width:76px;padding:0;font:inherit;cursor:pointer}
.call-control-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--panel2) 88%,transparent);border:1px solid color-mix(in srgb,var(--line) 78%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.16);transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease}
.call-control-icon svg{width:27px;height:27px;fill:currentColor;overflow:visible}
.call-control-label{font-size:11px;line-height:1.15;color:var(--muted);max-width:92px;text-align:center}
.call-control:hover .call-control-icon,.call-control:active .call-control-icon{transform:scale(1.055)}
.call-control.is-active .call-control-icon{background:color-mix(in srgb,var(--accent) 24%,var(--panel2));border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:#fff;box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 25%,transparent)}
.call-control.is-active .call-control-label{color:var(--text)}
.call-control.is-danger .call-control-icon{background:#c83e50;border-color:#dc5a68;color:#fff;box-shadow:0 12px 34px rgba(200,62,80,.28)}
.call-control.is-success .call-control-icon{background:#25a55f;border-color:#42bd79;color:#fff;box-shadow:0 12px 34px rgba(37,165,95,.28)}
.call-quick-replies{position:relative;z-index:1;width:min(520px,100%);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.call-quick-replies-title{width:100%;text-align:center;font-size:11px;color:var(--muted);margin-bottom:2px}
.call-quick-reply{appearance:none;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--panel2) 88%,transparent);color:var(--text);border-radius:999px;padding:8px 12px;font:inherit;font-size:11px;line-height:1.2;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.call-quick-reply:active{transform:scale(.98);background:color-mix(in srgb,var(--accent) 18%,var(--panel2))}
.notification-sound-info{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
@media(max-width:760px){.call-btn{width:36px;height:36px}.call-card{padding-left:16px;padding-right:16px}.call-avatar{width:102px;height:102px;font-size:31px}.call-actions{gap:20px}.call-control-icon{width:60px;height:60px}.call-control-label{font-size:10.5px}}

/* v0.6.4 · hard-rendered mobile contact separators.
   These are real DOM elements between rows (not pseudo-elements), so Android WebView cannot skip them. */
.mobile-contact-separator{
  display:block;
  flex:0 0 1px;
  width:calc(100% - 14px);
  height:1px;
  min-height:1px;
  margin:0 7px;
  padding:0;
  border:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(73,76,90,0) 0%,
    rgba(73,76,90,.08) 14%,
    rgba(73,76,90,.48) 50%,
    rgba(73,76,90,.08) 86%,
    rgba(73,76,90,0) 100%
  );
}
html[data-theme=dark] .mobile-contact-separator{
  background:linear-gradient(90deg,
    rgba(235,237,244,0) 0%,
    rgba(235,237,244,.07) 14%,
    rgba(235,237,244,.42) 50%,
    rgba(235,237,244,.07) 86%,
    rgba(235,237,244,0) 100%
  );
}
@media (prefers-color-scheme: dark){
  html[data-theme=auto] .mobile-contact-separator,
  html:not([data-theme]) .mobile-contact-separator{
    background:linear-gradient(90deg,
      rgba(235,237,244,0) 0%,
      rgba(235,237,244,.07) 14%,
      rgba(235,237,244,.42) 50%,
      rgba(235,237,244,.07) 86%,
      rgba(235,237,244,0) 100%
    );
  }
}
@media(max-width:760px){.mobile-contact-row + .mobile-contact-row::before{display:none!important}}


/* v0.6.6 · emoji reactions inside existing message action menu */
.message-reaction-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:2px 2px 7px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.message-action-menu .message-reaction-choice{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:transparent;font-size:18px;line-height:1;transition:transform .12s ease,background .12s ease}
.message-action-menu .message-reaction-choice:hover,.message-action-menu .message-reaction-choice:focus-visible{background:var(--panel2);transform:scale(1.08);outline:none}
.message-action-menu .message-reaction-choice.selected{background:rgba(49,120,246,.14);box-shadow:inset 0 0 0 1px rgba(49,120,246,.28)}
.message-reactions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:6px}
.message-reaction-pill{display:inline-flex;align-items:center;gap:4px;min-height:25px;padding:2px 7px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--text);font:inherit;font-size:13px;line-height:1;cursor:pointer}
.message-reaction-pill:hover{filter:brightness(.98)}
.message-reaction-pill.mine{border-color:rgba(49,120,246,.46);background:rgba(49,120,246,.12)}
.message-reaction-count{font-size:10px;font-weight:750;color:var(--muted)}
.message-reaction-pill.mine .message-reaction-count{color:var(--accent)}
@media(max-width:760px){.message-action-menu{min-width:224px}.message-reaction-picker{gap:4px}.message-action-menu .message-reaction-choice{width:33px;height:33px;font-size:19px}}

/* v0.6.7 · reaction menu viewport clamp + inline meta reactions + reaction authors */
.message-action-menu{width:min(224px,calc(100vw - 16px));min-width:0;max-width:calc(100vw - 16px);box-sizing:border-box}
.message-reaction-picker{grid-template-columns:repeat(6,minmax(0,1fr));width:100%;box-sizing:border-box}
.message-action-menu .message-reaction-choice{width:100%;min-width:0;height:32px}
.message-reactions{display:inline-flex;align-items:center;gap:3px;flex-wrap:nowrap;margin:0 0 0 2px;vertical-align:middle}
.message-reaction-pill{display:inline-flex;align-items:center;gap:2px;min-height:18px;height:18px;padding:0 4px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--text);font:inherit;font-size:12px;line-height:1;cursor:pointer}
.message-reaction-count{font-size:9px;font-weight:800;color:var(--muted)}
.message-reaction-pill.mine{border-color:rgba(49,120,246,.46);background:rgba(49,120,246,.12)}
.message-reaction-pill.mine .message-reaction-count{color:var(--accent)}
.reaction-details{display:grid;gap:12px;min-width:min(320px,78vw)}
.reaction-user-list{display:grid;gap:4px;max-height:48vh;overflow:auto}
.reaction-user-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line)}
.reaction-user-row:last-child{border-bottom:0}.reaction-user-row strong{font-size:13px}
.reaction-user-avatar{width:32px!important;height:32px!important;min-width:32px!important;font-size:11px!important}
.reaction-remove-button{width:100%;border:1px solid color-mix(in srgb,#ef5b6a 38%,var(--line));background:color-mix(in srgb,#ef5b6a 8%,var(--panel));color:#ef5b6a}
@media(max-width:760px){.message-action-menu{width:min(224px,calc(100vw - 16px));min-width:0}.message-action-menu .message-reaction-choice{height:31px;font-size:18px}}

/* v0.7.3 · contact separators on BOTH the main conversation list and mobile Contacts.
   Real DOM elements are rendered between rows. Ends fade out, center stays clearly visible. */
.contact-list-separator{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  flex:0 0 1px!important;
  width:calc(100% - 24px)!important;
  height:1px!important;
  min-height:1px!important;
  margin:0 12px!important;
  padding:0!important;
  border:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(68,71,86,0) 0%,
    rgba(68,71,86,.12) 18%,
    rgba(68,71,86,.52) 50%,
    rgba(68,71,86,.12) 82%,
    rgba(68,71,86,0) 100%)!important;
}
html[data-theme=dark] .contact-list-separator{
  background:linear-gradient(90deg,
    rgba(238,240,246,0) 0%,
    rgba(238,240,246,.10) 18%,
    rgba(238,240,246,.46) 50%,
    rgba(238,240,246,.10) 82%,
    rgba(238,240,246,0) 100%)!important;
}
@media (prefers-color-scheme:dark){
  html[data-theme=auto] .contact-list-separator,
  html:not([data-theme]) .contact-list-separator{
    background:linear-gradient(90deg,
      rgba(238,240,246,0) 0%,
      rgba(238,240,246,.10) 18%,
      rgba(238,240,246,.46) 50%,
      rgba(238,240,246,.10) 82%,
      rgba(238,240,246,0) 100%)!important;
  }
}

/* v0.8.2 · translucent MaxiChat neon chevrons for jump-to-latest. */
.chat-panel{position:relative}
.jump-to-latest{
  position:absolute;
  z-index:45;
  left:50%;
  transform:translateX(-50%);
  width:46px;
  height:46px;
  min-width:46px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:14px;
  background:transparent;
  box-shadow:none;
  opacity:.72;
  transition:opacity .16s ease,transform .16s ease;
}
.jump-to-latest:hover{opacity:.94;transform:translateX(-50%) scale(1.04)}
.jump-to-latest:active{transform:translateX(-50%) scale(.95);opacity:.58}
.jump-to-latest .jump-chevron{
  position:absolute;
  left:50%;
  width:16px;
  height:16px;
  border-right:3px solid var(--accent);
  border-bottom:3px solid var(--accent);
  transform:translateX(-50%) rotate(45deg);
  filter:drop-shadow(0 0 4px rgba(170,53,185,.38));
}
.jump-to-latest .jump-chevron-top{top:9px;opacity:.66}
.jump-to-latest .jump-chevron-bottom{top:17px;border-color:var(--accent2);opacity:.48;filter:drop-shadow(0 0 4px rgba(210,72,199,.30))}
@media(max-width:760px){
  .jump-to-latest{width:44px;height:44px;min-width:44px;opacity:.68}
  .jump-to-latest .jump-chevron{width:15px;height:15px;border-right-width:2.7px;border-bottom-width:2.7px}
  .jump-to-latest .jump-chevron-top{top:9px}
  .jump-to-latest .jump-chevron-bottom{top:17px}
}


/* v0.7.5 · personal notes + group management */
.notes-sidebar-btn{grid-column:auto}
.notes-panel{display:grid;gap:14px}.notes-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.notes-head p{margin:0}.notes-list{display:grid;gap:10px}.notes-empty{padding:28px 14px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}.note-card{display:grid;gap:10px;padding:13px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:14px}.note-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.note-card-head strong{overflow-wrap:anywhere}.note-card-head small{color:var(--muted);white-space:nowrap}.note-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:14px}.note-actions{display:flex;justify-content:flex-end;gap:8px}.note-editor textarea{min-height:180px;resize:vertical}
.group-members-section{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px}.group-members-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.group-member-list{display:grid;gap:7px}.group-member-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px}.group-member-who{flex:1;min-width:0}.group-member-who strong,.group-member-who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-member-who small{color:var(--muted);margin-top:2px}.group-danger-zone{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:flex-end}
@media(max-width:760px){.notes-head{align-items:stretch;flex-direction:column}.notes-head button{width:100%}.note-card-head{display:grid}.note-actions{display:grid;grid-template-columns:1fr 1fr}.group-members-head{align-items:stretch;flex-direction:column}.group-members-head button{width:100%}.group-member-row .danger-ghost{padding:8px 9px}.group-danger-zone button{width:100%}.sidebar-action-icon{min-height:42px}.sidebar-action-icon svg{width:23px;height:23px}}

/* v0.7.8 · Notes use the main chat surface */
.notes-chat-avatar{display:grid;place-items:center;font-size:19px;line-height:1;background:var(--panel2);border:1px solid var(--line)}


/* v0.7.8 · public Privacy Policy + login link */
.auth-legal-links{margin-top:16px;font-size:12px;line-height:1.45}
.auth-legal-links a{color:var(--muted);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--muted) 45%,transparent);padding-bottom:1px}
.auth-legal-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}
html.privacy-document,html.privacy-document body{height:auto;min-height:100%;overflow:auto!important;overscroll-behavior:auto}
.privacy-page-body{margin:0;background:var(--bg);color:var(--text)}
.privacy-shell{width:min(920px,calc(100% - 28px));margin:28px auto 56px}
.privacy-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.privacy-head{padding:26px 28px 22px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 15% 10%,rgba(183,52,194,.13),transparent 42%),var(--panel)}
.privacy-brand{display:flex;align-items:center;gap:14px}.privacy-brand img{width:112px;height:auto;object-fit:contain}.privacy-brand h1{font-size:25px;margin:0}.privacy-updated{margin:8px 0 0;color:var(--muted);font-size:12px}
.privacy-lang-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.privacy-lang-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--text);text-decoration:none;font-size:12px;font-weight:700}
.privacy-content{padding:8px 28px 30px}.privacy-section{padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:18px}.privacy-section:last-child{border-bottom:0}.privacy-section h2{margin:0 0 14px;font-size:20px}.privacy-section h3{margin:20px 0 8px;font-size:15px}.privacy-section p,.privacy-section li{font-size:14px;line-height:1.65}.privacy-section p{margin:8px 0}.privacy-section ul{margin:8px 0;padding-left:22px}.privacy-section a{color:var(--accent)}.privacy-note{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--muted);font-size:13px;line-height:1.55}.privacy-footer{padding:16px 28px 22px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:600px){.privacy-shell{width:min(100% - 16px,920px);margin:8px auto 28px}.privacy-card{border-radius:18px}.privacy-head,.privacy-content{padding-left:18px;padding-right:18px}.privacy-brand{align-items:flex-start}.privacy-brand img{width:92px}.privacy-brand h1{font-size:21px}.privacy-section h2{font-size:18px}}


/* v0.7.8 · move app version to the bottom of Contacts/sidebar */
.sidebar-app-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 10px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:10px;line-height:1.2;text-align:center;white-space:nowrap}
.sidebar-app-version{font-weight:800;color:var(--muted)}
.sidebar-app-version::after{content:"·";margin-left:7px;color:color-mix(in srgb,var(--muted) 58%,transparent)}
.sidebar-app-copyright{font-weight:650;letter-spacing:.01em}
@media(max-width:760px){.sidebar-app-footer{min-height:32px;font-size:9.5px;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}}

/* v0.8.2 · full-window audio calls + in-call controls */

/* v0.8.5 · call history events */
.call-history-event{display:flex;justify-content:center;width:100%;padding:3px 0}
.call-history-card{display:inline-flex;align-items:center;gap:9px;max-width:min(520px,86vw);padding:7px 11px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;background:color-mix(in srgb,var(--panel2) 82%,transparent);color:var(--text);box-shadow:0 3px 12px rgba(0,0,0,.035)}
.call-history-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:15px;font-weight:900;line-height:1;flex:0 0 24px}.call-history-icon.is-incoming{color:#7b61ff}.call-history-icon.is-outgoing{color:#32c987}.call-history-icon.is-missed{color:#ef5350;background:color-mix(in srgb,#ef5350 12%,transparent)}
.call-history-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}.call-history-text strong{font-size:11px;font-weight:800}.call-history-text span{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap}

/* v0.9.2 · robust unified contact row + last-action preview + location card */
.conversation{gap:6px;padding:4px 6px}
.conversation-open{min-width:0;flex:1;display:flex;align-items:center;gap:11px;padding:7px 4px;border:0;background:transparent;color:inherit;text-align:left;border-radius:12px;cursor:pointer;font:inherit}
.conversation-open:hover,.conversation-open:focus-visible{background:var(--panel2);outline:none}
.conversation-open:disabled{opacity:.72;cursor:progress}
.conversation .body{pointer-events:none}
.conversation-open .avatar{pointer-events:none}
.location-card{display:grid;grid-template-columns:minmax(110px,148px) minmax(0,1fr);align-items:stretch;gap:0;min-width:230px;max-width:min(100%,420px);overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent) 8%,var(--panel2));color:inherit;text-decoration:none;box-shadow:0 3px 14px rgba(0,0,0,.05)}
.location-card:hover{background:color-mix(in srgb,var(--accent) 13%,var(--panel2))}
.location-card-media{position:relative;display:block;min-height:118px;background:linear-gradient(180deg,rgba(170,53,185,.12),rgba(170,53,185,.04)),var(--panel2)}
.location-card-map{display:block;width:100%;height:100%;min-height:118px;object-fit:cover}
.location-card-media.no-image .location-card-map{display:none}
.location-card-media.no-image::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 35%,rgba(170,53,185,.20),transparent 35%),radial-gradient(circle at 68% 62%,rgba(210,72,199,.18),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));opacity:.95}
.location-card-pin{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(22,18,30,.82);backdrop-filter:blur(4px);font-size:19px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.location-card-body{display:grid;align-content:center;gap:5px;padding:12px 13px 12px 14px;min-width:0}
.location-card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.location-card-title-row strong{font-size:14px}.location-card-open{font-size:10px;font-weight:800;color:var(--accent);white-space:nowrap}
.location-card-coords,.location-card-meta{font-size:11px;color:var(--muted);line-height:1.35}.location-card-coords{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media(max-width:760px){.location-card{grid-template-columns:1fr;max-width:min(100%,330px)}.location-card-media,.location-card-map{min-height:116px}.location-card-body{padding:11px 12px}.location-card-open{font-size:10px}}
.attachment-choice-menu button{min-height:46px;text-align:left}

/* v0.9.3 · contact/group tap reliability */
.conversation-open{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.conversation-open .body,.conversation-open .avatar{pointer-events:none!important}

/* Chat switch: show only the selected conversation while loading its history. */
.chat-history-status{align-self:center;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:12px;min-height:72px;margin:auto 0;color:var(--muted);font-size:13px;text-align:center}

/* v1.0.2 · four-way swipe mic/video switch with discoverable on-button affordance */
.voice-btn{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.voice-btn .voice-mode-video[hidden],.voice-btn .voice-mode-microphone[hidden]{display:none!important}
.voice-btn.video-mode{color:var(--accent)}
.voice-btn .voice-mode-swipe-hint{position:absolute;right:-7px;top:-8px;display:grid;place-items:center;padding:1px 3px;min-width:22px;min-height:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 2px 5px rgba(0,0,0,.08);font-size:8px;font-weight:900;line-height:1;letter-spacing:-1px;color:var(--muted);pointer-events:none}
.voice-btn.video-mode .voice-mode-swipe-hint{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.voice-btn .voice-swipe-coachmark{position:absolute;z-index:150;bottom:calc(100% + 15px);right:-5px;display:flex;align-items:center;gap:7px;width:max-content;max-width:min(260px,calc(100vw - 25px));padding:9px 12px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 8px 22px rgba(0,0,0,.16);font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;pointer-events:none;animation:voiceTipIn .20s ease-out}
.voice-btn .voice-swipe-coachmark::after{content:"";position:absolute;bottom:-6px;right:14px;width:10px;height:10px;transform:rotate(45deg);background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.voice-btn .voice-swipe-coachmark[hidden]{display:none!important}
.voice-btn.mode-switched svg:not([hidden]){animation:voiceIconSwitch .20s ease-out}
@keyframes voiceIconSwitch{from{opacity:.32;transform:scale(.65) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes voiceTipIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.voice-btn.mode-switched svg:not([hidden]),.voice-btn .voice-swipe-coachmark{animation:none!important}}
.voice-btn:disabled{opacity:.6;cursor:wait}
.video-note-preview{position:absolute;right:18px;bottom:calc(100% + 12px);width:196px;height:196px;overflow:hidden;z-index:15;border:3px solid var(--accent);border-radius:50%;background:#16121c;box-shadow:0 12px 35px rgba(0,0,0,.32)}
.video-note-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.video-note-preview-badge{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:5px 10px;white-space:nowrap;border-radius:999px;background:rgba(12,11,17,.80);color:white;font-size:12px;font-weight:800;line-height:1}
.video-note-preview-badge i{width:8px;height:8px;border-radius:50%;background:#ff3d56;box-shadow:0 0 7px #ff3d56;animation:maxichatRecordPulse 1s infinite}
.video-note-player{position:relative;width:196px;height:196px;border-radius:50%;background:#111217;overflow:hidden;margin:5px 0}
.chat-video-note{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;background:#111217}
.video-note-poster{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:saturate(1.06) contrast(1.04)}
.video-note-poster[hidden]{display:none!important}
.video-note-player::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 56%,transparent),inset 0 -22px 35px rgba(0,0,0,.20)}
.video-note-player:not(.without-poster){background:radial-gradient(circle at 65% 28%,#443550 0%,#16111e 70%)}
.video-note-play{z-index:5}
.video-note-duration{z-index:5}

.video-note-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;padding:0;background:rgba(20,16,28,.72);color:#fff;border:1px solid rgba(255,255,255,.26);font-size:20px;display:grid;place-items:center;backdrop-filter:blur(4px)}
.video-note-play:hover{background:rgba(170,53,185,.80)}
.video-note-play[hidden]{display:none!important}
.video-note-duration{position:absolute;right:24px;bottom:13px;color:#fff;background:rgba(13,11,17,.72);border-radius:99px;padding:4px 8px;font-size:10px;font-weight:800;pointer-events:none;font-variant-numeric:tabular-nums}
/* Video notes are circular media: no rectangular message bubble or extra download row. */
.message.is-video-note .bubble,.message.is-video-note.mine .bubble{padding:0!important;max-width:min(245px,75vw);border:0!important;border-radius:20px;background:transparent!important;box-shadow:none!important}
.message.is-video-note .video-note-player{margin:2px 0 4px;box-shadow:0 4px 18px rgba(0,0,0,.16);border-radius:50%}
.message.is-video-note .bubble .meta{width:196px;max-width:100%;padding:2px 4px;text-align:center;justify-content:center;color:var(--muted)}
.message.is-video-note .sender{padding:0 5px 3px;max-width:196px}
.message.is-video-note .forwarded-label,.message.is-video-note .reply-quote{max-width:196px}
.message.is-video-note .message-actions{top:7px;right:7px}
.message.is-video-note.mine .message-actions{left:7px;right:auto}
@media(max-width:760px){.video-note-preview{width:174px;height:174px;right:12px;bottom:calc(100% + 9px)}.video-note-player{width:174px;height:174px}.message.is-video-note .bubble .meta{width:174px}.message.is-video-note .sender,.message.is-video-note .forwarded-label,.message.is-video-note .reply-quote{max-width:174px}.video-note-duration{right:20px}}

/* v1.0.3 — larger recorder icons; one live SVG switches microphone <-> camera.
   The hint floats above the entire message-entry row, never inside the button. */
.composer .voice-btn{
  position:relative;width:52px;height:52px;min-width:52px;flex:0 0 52px;
  display:grid;place-items:center;align-self:flex-end;border-radius:50%;
  padding:0;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;overflow:visible;
}
.composer .voice-btn .recorder-mode-icon{
  width:36px;height:36px;min-width:36px;min-height:36px;max-width:none;
  display:block;fill:currentColor;pointer-events:none;
}
.composer .voice-btn .voice-mode-swipe-hint{
  top:0;right:0;min-width:21px;min-height:15px;font-size:8px;
}
.composer .voice-btn.video-mode{color:var(--accent)}
.composer .voice-swipe-coachmark{
  position:absolute;z-index:160;bottom:calc(100% + 11px);right:0;left:auto;
  display:flex;align-items:center;justify-content:center;
  width:max-content;max-width:min(335px,calc(100vw - 24px));
  white-space:normal;text-align:center;line-height:1.4;
  padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:14px;background:var(--panel);color:var(--text);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  font-size:12px;font-weight:700;pointer-events:none;
  animation:voiceTipIn .20s ease-out;
}
.composer .voice-swipe-coachmark::after{
  content:"";position:absolute;bottom:-6px;right:22px;width:10px;height:10px;
  transform:rotate(45deg);background:var(--panel);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.composer .voice-swipe-coachmark[hidden]{display:none!important}
.composer .voice-btn.mode-switched .recorder-mode-icon{animation:voiceIconSwitch .20s ease-out}
@media(max-width:760px){
  .composer .voice-btn{width:49px;height:49px;min-width:49px;flex-basis:49px}
  .composer .voice-btn .recorder-mode-icon{width:36px;height:36px}
  .composer .voice-swipe-coachmark{right:0;max-width:min(315px,calc(100vw - 24px));font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .composer .voice-btn.mode-switched .recorder-mode-icon,.composer .voice-swipe-coachmark{animation:none!important}
}

/* v1.0.4 · compact one-line composer + constant 36px recorder icons.
   Press/hold-to-record and swipe mode change work only within #voiceBtn. */
.composer .composer-input-shell{min-height:44px;padding-block:3px;align-items:center}
.composer .compose-main{min-height:36px}
.composer textarea{min-height:36px;padding-top:7px;padding-bottom:6px}
.composer .voice-btn,.composer .voice-btn.video-mode{color:var(--accent);touch-action:none}
.composer .voice-btn{width:49px;height:44px;min-width:49px;flex:0 0 49px;align-self:center;margin-block:-3px;background:transparent}
.composer .voice-btn:hover{color:var(--accent2);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.composer .voice-btn.hold-recording{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.composer .voice-btn .recorder-icon-window{position:relative;width:38px;height:38px;display:grid;place-items:center;overflow:hidden;pointer-events:none;border-radius:50%}
.composer .voice-btn .recorder-mode-icon{width:36px;height:36px;min-width:36px;min-height:36px;fill:currentColor;position:relative;z-index:2;flex-shrink:0;pointer-events:none}
.composer .voice-btn .recorder-sliding-out{position:absolute;inset:1px;z-index:3}
.composer .voice-btn .voice-mode-swipe-hint{right:0;top:0}
@media(max-width:760px){
  .composer .composer-input-shell{min-height:43px;padding-block:3px}
  .composer .voice-btn{width:49px;height:43px;min-width:49px;flex-basis:49px}
  .composer .voice-btn .recorder-mode-icon{width:36px;height:36px}
  .composer .voice-btn .recorder-icon-window{width:38px;height:38px}
}

/* Keep the pressed element alive while recording; otherwise WebView cancels
   pointer capture before pointerup and hold-to-send can never finish. */
.composer.is-recording .voice-btn.hold-recording{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;flex:0 0 49px;min-width:49px}
.composer.is-recording .recording-state{min-width:0}


/* v1.0.5 — Never relayout the captured recorder button during a hold.
   Record status floats ABOVE the message bar, not as another flex child.
   The two manual cancel/send circles appear ONLY for short-tap recordings. */
.composer.is-recording .composer-input-shell{
  padding:3px 5px 3px 4px!important;
  align-items:center!important;
}
.composer.is-recording .composer-tools{
  display:flex!important;visibility:hidden!important;pointer-events:none!important;
}
.composer.is-recording .compose-main{
  display:flex!important;visibility:hidden!important;pointer-events:none!important;
}
.composer.is-recording .voice-btn{
  display:grid!important;visibility:visible!important;opacity:1!important;
  pointer-events:auto!important;
  flex:0 0 49px!important;min-width:49px!important;
  align-self:center!important;margin-block:-3px!important;
}
.composer.is-recording .recorder-icon-window{pointer-events:none!important}
.composer.is-recording .recording-state{
  position:absolute!important;z-index:155;bottom:calc(100% + 10px);right:0;left:auto;
  display:flex!important;align-items:center;justify-content:flex-start;gap:9px;
  flex:none!important;min-width:0;max-width:min(350px,calc(100vw - 24px));
  min-height:43px;height:auto;padding:6px 11px!important;
  border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:var(--panel);box-shadow:0 9px 24px rgba(0,0,0,.17);
}
.composer.is-recording .recording-state[hidden]{display:none!important}
.composer.is-recording .recording-state .recording-label{
  display:block!important;flex:1;min-width:0;font-size:11px;
}
.composer.is-recording .recording-state .record-control{
  width:38px;height:38px;min-width:38px;flex:0 0 38px;
}
.composer.is-hold-recording .recording-state{
  pointer-events:none!important;
  width:max-content;max-width:calc(100vw - 24px);
}
.composer.is-hold-recording .recording-state .record-cancel,
.composer.is-hold-recording .recording-state .record-send{
  display:none!important;
}
.composer.is-recording .composer-send-btn{display:none!important}
.composer.is-recording .emoji-picker{display:none!important}
@media(max-width:760px){
  .composer.is-recording .composer-input-shell{padding:3px 5px 3px 4px!important}
  .composer.is-recording .recording-state{right:0;max-width:calc(100vw - 20px)}
}

/* Avoid active-button scale translating the touch target while the finger is down. */
.composer .voice-btn.hold-recording,.composer .voice-btn.hold-recording:active{transform:none!important}

/* v1.0.5 · outgoing and incoming chat-bubble tails point toward sender avatar.
   Purely decorative: no hitbox changes, no layout shifts, no tail on circular
   video notes or centered task history. Colors follow the active light/dark theme. */
.message:not(.is-video-note):not(.task-history) > .bubble::before{
  content:"";position:absolute;top:11px;left:-10px;width:12px;height:16px;
  background:var(--panel);clip-path:polygon(100% 0,0 45%,100% 100%);
  pointer-events:none;
}
.message.mine:not(.is-video-note):not(.task-history) > .bubble::before{
  left:auto;right:-10px;
  background:color-mix(in srgb,var(--accent) 15%,var(--panel));
  clip-path:polygon(0 0,100% 45%,0 100%);
}
.message.is-deleted:not(.is-video-note):not(.task-history) > .bubble::before{
  background:color-mix(in srgb,var(--panel2) 82%,transparent);
}

/* MaxiChat v1.0.6: video call shares secure WebRTC signaling with existing audio calls. */
.video-call-btn{display:grid;place-items:center;font-size:0}.video-call-btn svg{width:24px;height:24px}
.call-video-overlay .call-card{background:#0c0d14;color:white;isolation:isolate}
.call-video-stage{position:absolute;inset:0;z-index:0;background:#0c0d14;pointer-events:none}
.call-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0c0d14}
.call-local-video{position:absolute;right:clamp(12px,4vw,32px);top:calc(22px + env(safe-area-inset-top));width:min(29vw,184px);aspect-ratio:3/4;max-height:30vh;object-fit:cover;border-radius:17px;border:2px solid rgba(255,255,255,.35);background:#13151c;box-shadow:0 12px 35px rgba(0,0,0,.48);z-index:5;transform:scaleX(-1)}
.call-video-overlay .call-glow{display:none}
.call-video-overlay .call-name,.call-video-overlay .call-status,.call-video-overlay .call-duration,.call-video-overlay .call-actions,.call-video-overlay .call-quick-replies{z-index:3;color:#fff}
.call-video-overlay .call-card:has(.call-remote-video) .call-avatar{z-index:2}
.call-video-overlay.remote-video-ready .call-avatar{opacity:0}
.call-video-overlay .call-actions{flex-wrap:wrap;gap:12px;max-width:530px;margin-top:auto;padding-bottom:12px}
.call-video-overlay .call-name{margin-top:auto;text-shadow:0 2px 8px #000}
.call-video-overlay .call-status,.call-video-overlay .call-duration{text-shadow:0 2px 9px #000}
.call-video-overlay .call-control-icon{background:rgba(43,43,51,.83);backdrop-filter:blur(6px)}
.call-video-overlay .call-control-end .call-control-icon{background:#db3658}
@media(max-width:760px){.call-video-overlay .call-actions{gap:6px}.call-video-overlay .call-control-icon{width:51px;height:51px}.call-video-overlay .call-control{min-width:65px}.call-local-video{width:110px}}

.profile-audio-diagnostics{display:grid;gap:11px;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
.profile-audio-diagnostics strong{font-size:14px}.profile-audio-diagnostics small{font-size:12px;color:var(--muted);line-height:1.5}
.audio-test-meter{height:13px;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.audio-test-meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#44bca6,var(--accent));transition:width .09s ease}
.profile-audio-actions{display:flex;flex-wrap:wrap;gap:8px}.profile-audio-actions button{flex:1 1 145px;min-height:38px}
.profile-audio-diagnostics audio{width:100%;max-width:100%}

/* v1.0.6 toolbar keeps audio and video calls side by side. */
#callBtn{margin-left:0}
#videoCallBtn{margin-left:auto}

/* v1.0.8: pre-answer incoming video screen uses MaxiChat theme and caller avatar;
   absolutely NO video stage or camera preview until acceptIncomingCallById succeeds. */
.call-incoming-pending.call-video-overlay .call-card{background:radial-gradient(circle at 50% 27%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 35%),linear-gradient(160deg,var(--panel),var(--bg));color:var(--text)}
.call-incoming-pending .call-incoming-brand{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;margin-bottom:32px}
.call-incoming-brand{display:none}.call-incoming-pending .call-incoming-brand{display:flex}
.call-incoming-brand img{width:min(38vw,190px);height:auto;max-height:100px;object-fit:contain}
.call-incoming-pending.call-video-overlay .call-avatar{width:132px;height:132px;border:3px solid color-mix(in srgb,var(--accent) 32%,white);box-shadow:0 14px 50px color-mix(in srgb,var(--accent) 26%,transparent)}
.call-incoming-pending.call-video-overlay .call-avatar .avatar-photo{width:100%;height:100%;object-fit:cover;border-radius:50%}
.call-incoming-pending.call-video-overlay .call-name{margin:14px 0 0;text-shadow:none;color:var(--text);font-size:clamp(23px,4vw,34px)}
.call-incoming-pending.call-video-overlay .call-status,.call-incoming-pending.call-video-overlay .call-quick-replies-title{color:var(--muted);text-shadow:none}
.call-incoming-pending.call-video-overlay .call-actions{margin-top:24px;margin-bottom:4px}
.call-incoming-pending.call-video-overlay .call-control-label{color:var(--text)}
.call-incoming-pending.call-video-overlay .call-quick-replies{margin-top:18px}
.call-incoming-pending.call-video-overlay .call-quick-reply{color:var(--text)}
@media(max-width:760px){.call-incoming-pending .call-incoming-brand{margin-bottom:22px}.call-incoming-pending.call-video-overlay .call-avatar{width:114px;height:114px}}

/* v1.1.5: screen sharing controls and uncropped desktop preview. */
.call-overlay.screen-sharing-local .call-local-video{transform:none;object-fit:contain;aspect-ratio:16/10;width:min(33vw,220px);height:auto;background:#111}
.call-control-screen.is-active .call-control-icon{background:var(--accent);color:#fff}
.call-video-overlay .call-remote-video{object-fit:contain}
@media(max-width:760px){.call-overlay.screen-sharing-local .call-local-video{width:126px}}

/* MaxiChat v1.2.3 — uniform Admin dialog top position on ALL tabs.
   Only the Admin overlay is affected; chat/profile/confirmation dialogs stay centered. */
#modal.admin-dialog:not([hidden]){
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:clamp(20px,6dvh,74px);
  padding-bottom:18px;
}
#modal.admin-dialog > .modal-card{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - clamp(20px,6dvh,74px) - 18px);
  overflow:hidden;
}
#modal.admin-dialog .modal-head{flex:0 0 auto}
#modal.admin-dialog #modalBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
@media(max-width:760px){
  #modal.admin-dialog:not([hidden]){
    padding-top:max(16px,env(safe-area-inset-top))!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  #modal.admin-dialog > .modal-card{
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
  }
  #modal.admin-dialog #modalBody{scrollbar-gutter:auto}
}

/* v1.2.3 · show a controlled reconnect on FIRST navigation only. */
.server-connection-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;max-width:370px;min-height:220px}
.server-connection-card .brand-logo{max-width:140px;max-height:85px;object-fit:contain}
.server-connection-card p{text-align:center;line-height:1.5;margin:0}
.server-connect-spinner{height:28px;width:28px;border:3px solid color-mix(in srgb,var(--accent) 18%,transparent);border-top-color:var(--accent);border-radius:50%;animation:maxichatSpin .9s linear infinite}
@keyframes maxichatSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.server-connect-spinner{animation:none}}

/* v1.2.6: video calls use an upright portrait 9:16 canvas; audio/video toggle.
   Controls remain inside mobile safe area, video always hands-free. */
.call-overlay.call-video-overlay .call-video-stage{inset:0;display:grid;place-items:center}
.call-overlay.call-video-overlay .call-remote-video{inset:0;margin:auto;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;background:#0c0d14}
.call-overlay.call-video-overlay .call-card{min-height:100dvh;max-height:100dvh}
.call-overlay .call-actions-active{gap:12px;flex-wrap:wrap;max-width:580px;margin-top:auto;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.call-overlay .call-control-camera-mode .call-control-icon{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.call-overlay .call-control-speaker[hidden]{display:none!important}
.call-overlay .call-local-video:not(.screen-sharing-local){aspect-ratio:3/4;object-fit:cover}
@media(max-width:760px){
  .call-overlay .call-actions-active{gap:7px;max-width:370px;align-items:flex-start;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .call-overlay .call-actions-active .call-control{min-width:62px;flex:0 1 66px;gap:6px}
  .call-overlay .call-actions-active .call-control-icon{width:50px;height:50px}
  .call-overlay .call-actions-active .call-control-label{font-size:10px}
  .call-video-overlay .call-local-video{top:calc(12px + env(safe-area-inset-top));width:26vw;max-width:116px;max-height:24vh}
}


/* v1.2.7: uncropped portrait call video & branded camera-off participant.
   All images constrained inside their actual avatar boxes, never viewport-size. */
.call-overlay .call-avatar, .call-overlay .call-video-placeholder-avatar{
  flex:0 0 auto;min-width:0;min-height:0;overflow:hidden;isolation:isolate;
}
.call-overlay .call-avatar .avatar-photo,
.call-overlay .call-video-placeholder-avatar .avatar-photo{
  display:block;position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:cover;object-position:center;border-radius:50%;
}
.call-overlay .call-avatar .avatar-initials{display:grid;place-items:center;width:100%;height:100%}
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-card>.call-avatar{display:none}
.call-overlay.call-video-overlay .call-video-stage{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#31233e 0%,#15121c 48%,#090a10 100%);
}
.call-overlay.call-video-overlay .call-remote-video{
  position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain!important;object-position:center;background:transparent;
  opacity:0;visibility:hidden;transition:opacity .22s ease;z-index:1;
}
.call-overlay.call-video-overlay.remote-video-ready .call-remote-video{opacity:1;visibility:visible}
.call-overlay.call-video-overlay .call-video-placeholder{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(18px,4vh,36px);
  padding:28px 24px 180px;box-sizing:border-box;text-align:center;color:#f5f2f8;
  background:radial-gradient(ellipse at 50% 33%,rgba(163,55,180,.23),transparent 46%),
    linear-gradient(155deg,#201826,#100f19 65%,#0b0b10);
  opacity:1;transition:opacity .22s ease;
}
.call-overlay.call-video-overlay.remote-video-ready .call-video-placeholder{opacity:0;visibility:hidden}
.call-video-placeholder-brand{display:block;width:min(46vw,210px);max-width:210px;height:76px;object-fit:contain;opacity:.92}
.call-video-placeholder-user{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;max-width:95%}
.call-overlay .call-video-placeholder-avatar{width:104px;height:104px;border-radius:50%;border:3px solid rgba(190,79,203,.75);box-shadow:0 8px 42px rgba(165,53,180,.22)}
.call-video-placeholder-name{font-size:clamp(22px,4vw,31px);line-height:1.25;overflow-wrap:anywhere}
.call-video-placeholder-hint{font-size:13px;color:#cfc3d2;letter-spacing:.02em}
.call-overlay.call-video-overlay .call-local-video{
  z-index:5;object-fit:contain!important;object-position:center;
  background:#15121b;aspect-ratio:3/4;border-color:rgba(232,173,239,.45);
}
.call-local-camera-off{display:none;position:absolute;z-index:6;right:clamp(12px,4vw,32px);top:calc(22px + env(safe-area-inset-top));
  width:min(29vw,184px);aspect-ratio:3/4;max-height:30vh;border-radius:17px;border:2px solid rgba(232,173,239,.45);
  align-items:center;justify-content:center;padding:12px;text-align:center;font-size:11px;color:#ebdaed;
  background:linear-gradient(135deg,#312039,#15121b);box-shadow:0 12px 35px rgba(0,0,0,.48);
}
.call-overlay.call-video-overlay.local-camera-off .call-local-video{opacity:0;visibility:hidden}
.call-overlay.call-video-overlay.local-camera-off .call-local-camera-off{display:flex}
.call-overlay.screen-sharing-local .call-local-video{transform:none!important;object-fit:contain!important}
@media(max-width:760px){
  .call-overlay.call-video-overlay .call-video-placeholder{padding-bottom:155px}
  .call-video-placeholder-brand{height:62px;width:min(48vw,190px)}
  .call-overlay .call-video-placeholder-avatar{width:90px;height:90px}
  .call-local-camera-off{top:calc(12px + env(safe-area-inset-top));width:26vw;max-width:116px;max-height:24vh}
}
@media(prefers-reduced-motion:reduce){
  .call-overlay .call-remote-video,.call-overlay .call-video-placeholder{transition:none}
}
/* Keep the call metadata away from the branded center panel; no duplicate
   caller name/status can cover the off-camera avatar. */
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-name{
  position:absolute;left:16px;right:16px;bottom:calc(214px + env(safe-area-inset-bottom));
  margin:0;font-size:clamp(20px,3.2vw,27px);text-shadow:0 2px 10px #000a;
  z-index:7;pointer-events:none;
}
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-status{
  position:absolute;left:16px;right:16px;bottom:calc(189px + env(safe-area-inset-bottom));
  margin:0;color:#ece6ef;font-size:12px;z-index:7;text-shadow:0 2px 8px #000;
  pointer-events:none;
}
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-duration{
  position:absolute;left:16px;right:16px;bottom:calc(167px + env(safe-area-inset-bottom));
  margin:0;color:#f4eef5;font-size:12px;z-index:7;text-shadow:0 2px 8px #000;
  pointer-events:none;
}
@media(max-height:740px){
  .call-overlay.call-video-overlay:not(.call-incoming-pending) .call-name{bottom:calc(191px + env(safe-area-inset-bottom))}
  .call-overlay.call-video-overlay:not(.call-incoming-pending) .call-status{bottom:calc(169px + env(safe-area-inset-bottom))}
  .call-overlay.call-video-overlay:not(.call-incoming-pending) .call-duration{bottom:calc(147px + env(safe-area-inset-bottom))}
}

/* v1.2.8: true 9:16 video stage, never landscape-shaped participant cards.
   Screen sharing keeps its own landscape ratio; cameras remain un-cropped. */
.call-overlay.call-video-overlay:not(.screen-sharing-local) .call-video-stage{
  position:absolute;inset:0;display:grid;place-items:center;
  aspect-ratio:auto;min-width:0;min-height:0;
}
.call-overlay.call-video-overlay:not(.screen-sharing-local) .call-remote-video{
  width:min(100vw,56.25dvh)!important;
  height:min(100dvh,177.777vw)!important;
  aspect-ratio:9/16;object-fit:contain!important;
  object-position:center center;
}
.call-overlay.call-video-overlay .call-local-video,
.call-overlay.call-video-overlay .call-local-camera-off{
  aspect-ratio:9/16!important;height:auto;max-height:27vh;
  object-fit:contain!important;
}


/* v1.2.9: portrait CAMERA video, without the 16:9 horizontal band.
   Layout/track are both 9:16; screen sharing remains fit-to-view. */
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-remote-video{
  width:min(100vw,56.25dvh)!important;
  height:min(100dvh,177.777vw)!important;
  aspect-ratio:9/16!important;max-width:100%!important;max-height:100%!important;
  object-fit:cover!important;object-position:center center;
}
.call-overlay.call-video-overlay.remote-screen-sharing .call-remote-video{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  aspect-ratio:auto!important;object-fit:contain!important;
}
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-local-video,
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-local-camera-off{
  width:min(27vw,130px)!important;height:auto!important;aspect-ratio:9/16!important;
  max-height:29dvh!important;object-fit:cover!important;object-position:center;
}
.call-overlay.call-video-overlay.screen-sharing-local .call-local-video{
  width:min(34vw,180px)!important;aspect-ratio:16/10!important;object-fit:contain!important;
}
/* The video fills a portrait viewport instead of a centered landscape bar. */
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-video-stage{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
}

/* v1.2.10: KEEP the proven portrait 9:16 positions and sizes. Never crop the
   actual remote or self-view again; the publisher embeds the complete source
   on a 9:16 track, with optional blurred padding inside that track. */
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-remote-video{
  object-fit:contain!important;object-position:center!important;
}
.call-overlay.call-video-overlay:not(.call-incoming-pending) .call-local-video{
  object-fit:contain!important;object-position:center!important;
}
/* Screen sharing still shows the entire shared screen, unchanged. */
.call-overlay.call-video-overlay.remote-screen-sharing .call-remote-video,
.call-overlay.call-video-overlay.screen-sharing-local .call-local-video{object-fit:contain!important}

/* MaxiChat 1.3.1 — login errors stay above mobile keyboard (not bottom toast). */
.login-feedback{margin:12px 0 3px;padding:12px 14px;text-align:left;line-height:1.45;font-size:13px;font-weight:650;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--danger) 9%,var(--panel));color:var(--text);overflow-wrap:anywhere}
@media(max-width:760px){.login-feedback:not([hidden]){position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;max-width:430px;margin:0 auto;z-index:7000;box-shadow:0 10px 34px rgba(0,0,0,.21);text-align:center}.center-view:has(#loginForm){overflow-y:auto;align-content:center}}
/* Contact editor keeps its actions usable on narrow Admin panels. */
.admin-contact-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px}
.admin-user-inactive{opacity:.76}
.contact-status{display:inline-block;margin-top:5px;font-size:11px;color:var(--danger);font-weight:650}
.contact-edit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.contact-edit-form label{display:grid;gap:6px;min-width:0;font-size:13px;color:var(--muted)}
.contact-edit-form input,.contact-edit-form select{min-width:0}
.contact-edit-hint{grid-column:1/-1;margin:0;font-size:12px;line-height:1.5}
.contact-edit-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.contact-form-error{grid-column:1/-1;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--danger) 11%,var(--panel));color:var(--danger);font-size:13px}
@media(max-width:900px){.admin-contact-actions{justify-content:flex-start}}
@media(max-width:560px){.contact-edit-form{grid-template-columns:1fr}.contact-edit-actions{display:grid;grid-template-columns:1fr 1fr}.admin-contact-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.admin-contact-actions button{min-width:0;padding:8px 5px;font-size:12px}}

.archived-contacts-toggle{justify-self:start;margin:12px 0 10px;width:100%;text-align:center}
.admin-user-inactive{border-style:dashed}

/* v1.3.2: discreet in-app connection status, never block messaging UI. */
.live-connection-warning{position:fixed;z-index:8500;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;padding:8px 14px;border-radius:14px;background:rgba(35,39,50,.95);color:#f8f8fb;font:500 12px/1.4 system-ui,sans-serif;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,.16);pointer-events:none}
.live-connection-warning[hidden]{display:none!important}