/* MiniGap responsive UI */
:root{
  --ink:#1d1c38;--muted:#85839a;--brand:#5b4bff;--brand2:#9476ff;
  --line:#ecebf5;--paper:#fff;--bg:#f5f4fc;
  --success:#10b981;--warning:#f59e0b;--error:#ef4444;
  --radius-sm:8px;--radius-md:13px;--radius-lg:20px;
  --sidebar-width:280px;
}

/* Absolute final modal-row contract: action buttons stay side by side on
   every breakpoint, including legacy mobile overrides. */
.account-modal .account-actions,
.account-modal .decision-actions,
.account-modal .upload-confirm-actions,
.account-modal .folder-editor-actions,
.file-modal .upload-confirm-actions,
.delete-confirm-panel .account-actions{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:10px!important;
}
.account-modal .account-actions>button,
.account-modal .decision-actions>button,
.account-modal .upload-confirm-actions>button,
.account-modal .folder-editor-actions>button,
.file-modal .upload-confirm-actions>button,
.delete-confirm-panel .account-actions>button{
  flex:1 1 0!important;
  width:0!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0!important;
}

*{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
  min-height:100%;line-height:1.6;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}
body.modal-open{overflow:hidden}
button,input{font:inherit}
button{touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

.auth{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  overflow:auto;
  background:radial-gradient(circle at 13% 15%,#c5baff 0,transparent 31%),
             radial-gradient(circle at 86% 88%,#c6f3ee 0,transparent 34%),#f8f7ff;
}
.auth-card{
  width:min(100%,410px);padding:34px;
  border:1px solid #ffffffaa;border-radius:var(--radius-lg);
  background:#fffffff2;box-shadow:0 22px 65px #4c3cb52b;
}
.brand-mark{
  width:52px;height:52px;display:grid;place-items:center;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--brand),#a975ff);color:#fff;font-size:26px;
  box-shadow:0 10px 22px #5b4bff54;
}
.brand-mark{background-image:url('/assets/minigap-logo-192.png');background-size:cover;background-position:center;color:transparent;font-size:0;box-shadow:0 10px 28px rgba(25,214,220,.2),0 0 0 1px rgba(111,235,255,.24)}
.auth h1{margin:19px 0 5px;font-size:27px;letter-spacing:-1px}
.auth p{margin:0 0 24px;color:var(--muted);font-size:.91rem}
.tabs{display:flex;gap:7px;padding:5px;border-radius:var(--radius-md);background:#f3f2f9;margin-bottom:20px}
.tabs button{flex:1;border:0;border-radius:9px;background:transparent;color:#77748d;padding:9px;min-height:44px}
.tabs .active{background:#fff;color:var(--brand);box-shadow:0 2px 7px #20175d12;font-weight:bold}
label{display:block;margin:14px 0 0;font-size:.84rem;font-weight:bold}
input{
  width:100%;min-height:48px;border:1px solid #dfdeeb;border-radius:var(--radius-md);
  padding:12px 13px;margin-top:7px;outline:none;background:#fff;transition:border-color .2s,box-shadow .2s;
}
input:focus{border-color:var(--brand);box-shadow:0 0 0 4px #5b4bff18}
.captcha-box{margin-top:14px;padding:10px 12px;border:1px solid rgba(91,75,255,.2);border-radius:14px;background:linear-gradient(135deg,rgba(91,75,255,.06),rgba(32,217,220,.05))}
.captcha-question{display:flex;align-items:center;gap:8px;min-height:30px;color:var(--muted);font-size:.75rem}
.captcha-question strong{flex:1;color:var(--ink);font-size:.9rem;direction:ltr;text-align:center;letter-spacing:.08em}
.captcha-refresh{width:30px;height:30px;border:1px solid rgba(91,75,255,.24);border-radius:9px;background:rgba(255,255,255,.45);color:var(--brand);font-size:1.1rem;cursor:pointer}
.captcha-refresh:hover{background:var(--brand);color:#fff}
.captcha-box input[name="captchaAnswer"]{min-height:42px;margin-top:8px}
.captcha-box input[type="hidden"]{display:none}
.primary{
  width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px;
  border:0;border-radius:var(--radius-md);padding:12px;margin-top:21px;
  background:linear-gradient(135deg,var(--brand),#7658ff);color:#fff;font-weight:bold;
  box-shadow:0 9px 16px #5b4bff42;
}
.primary:active{transform:scale(.98)}
.primary span{font-size:20px}
.auth form small{display:block;color:var(--muted);text-align:center;margin-top:13px;font-size:.75rem}
#authError,#fileHint,#accountError{display:none!important}
#fileHint{padding:0 16px;flex-shrink:0}

.app{
  position:relative;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  width:100%;height:100dvh;min-height:0;overflow:hidden;background:var(--bg);
}
.sidebar-tabs{
  position:sticky;top:0;width:100%;z-index:35;order:0;
  display:flex;gap:5px;padding:6px 8px;background:var(--paper);border-bottom:1px solid var(--line);flex-shrink:0;
}
.sidebar-tabs button{
  flex:1;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);
  padding:7px 5px;font-size:.72rem;font-weight:bold;
}
.sidebar-tabs button.active{background:linear-gradient(135deg,#eeeaff,#f7f5ff);border-color:#ded7ff;color:var(--brand)}
.sidebar-tab-hidden{display:none!important}
aside{
  min-width:0;min-height:0;border-right:1px solid var(--line);background:var(--paper);
  overflow:hidden;display:flex;flex-direction:column;z-index:30;
}
.profile{
  min-height:80px;padding:14px 12px;border-bottom:1px solid var(--line);
  display:flex;gap:9px;align-items:center;
}
.profile .avatar{
  width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(135deg,var(--brand),#a975ff);
  color:#fff;display:grid;place-items:center;font-weight:bold;flex:0 0 40px;overflow:hidden;
}
.profile .avatar.big{width:46px;height:46px;min-width:46px;min-height:46px;max-width:46px;max-height:46px;flex-basis:46px;font-size:19px}
.profile-avatar-button{border:0;padding:0;cursor:pointer;transition:transform .18s,box-shadow .18s}
.profile-avatar-button:hover{transform:scale(1.05);box-shadow:0 0 0 3px rgba(91,75,255,.2)}
.avatar img,.header-avatar img,.message-avatar img,.profile-avatar-large img{
  width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;
}
.profile>div{flex:1;min-width:0}
.profile strong{display:block;font-size:.9rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile small{display:block;color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-button,.mobile-close{
  border:0;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:9px;
  padding:0;display:grid;place-items:center;transition:.2s;flex:0 0 auto;
}
.icon-button:hover,.mobile-close:hover{background:#f0f0f6;color:var(--brand)}
.mobile-close{display:none}
.search-wrap{
  min-height:58px;padding:10px 14px;display:flex;gap:8px;align-items:center;
  border-bottom:1px solid var(--line);color:var(--muted);
}
.sidebar-tabs + .search-wrap{margin-top:0}
.group-settings-header{display:grid}
.group-membership-header{display:grid}
.search-wrap input{margin:0;border:0;background:transparent;padding:6px 0;min-height:38px;flex:1;font-size:.85rem}
.search-wrap input:focus{box-shadow:none}
.section-title{
  padding:11px 16px;font-size:.75rem;font-weight:bold;color:var(--muted);
  display:flex;justify-content:space-between;flex-shrink:0;
}
.assistant-entry{
  width:calc(100% - 16px);margin:0 8px 5px;padding:9px 8px;border:1px solid #e1d8ff;
  border-radius:var(--radius-sm);background:linear-gradient(135deg,#f0ebff,#f8f6ff);
  color:var(--ink);display:flex;align-items:center;gap:11px;text-align:right;cursor:pointer;
}
.assistant-entry:hover{border-color:var(--brand);background:#eee9ff}
.assistant-entry .avatar{width:38px;height:38px;flex:0 0 auto}
.assistant-entry span:last-child{min-width:0}
.assistant-entry strong,.assistant-entry small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assistant-entry strong{font-size:.85rem}
.assistant-entry small{color:var(--muted);font-size:.72rem}
.ephemeral-warning{margin:0 0 14px;padding:10px 12px;border:1px solid #9e752d;border-radius:12px;background:#3a2b13;color:#f6d58c;font-size:.75rem;line-height:1.8}
.ephemeral-panel{width:min(100%,480px)}
.ephemeral-panel>#ephemeralStartView,.ephemeral-panel>#ephemeralRoomView{display:grid;gap:10px}
.ephemeral-panel label{display:grid;gap:6px}
.ephemeral-panel label input{width:100%;box-sizing:border-box}
.ephemeral-panel small{color:var(--muted)}
.ephemeral-messages{display:grid;gap:7px;max-height:300px;min-height:90px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:14px;background:#11101a}
.ephemeral-message{max-width:82%;justify-self:start;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#24213a}
.ephemeral-message.own{justify-self:end;background:#3b31a0;border-color:#6d5cff}
.ephemeral-message strong{display:block;font-size:.7rem}.ephemeral-message p{margin:4px 0;font-size:.8rem;line-height:1.7;white-space:pre-wrap;word-break:break-word}.ephemeral-message small{font-size:.62rem}
.ephemeral-composer{display:flex!important;flex-direction:row!important;align-items:center;gap:8px}
.ephemeral-composer input{flex:1;min-width:0}.ephemeral-composer button{flex:0 0 auto;min-width:95px}
.users{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:6px}
.user{
  min-height:58px;padding:9px 8px;margin:3px 8px;border-radius:var(--radius-sm);
  display:flex;gap:11px;align-items:center;cursor:pointer;transition:background .15s;
}
.user:hover{background:#f5f5fa}
.user.active{background:linear-gradient(135deg,#f0ebff,#f5f2ff);color:var(--brand)}
.avatar{
  width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(135deg,var(--brand),#a975ff);
  color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:bold;flex:0 0 38px;overflow:hidden;
}
.user>div{flex:1;min-width:0}
.user strong{display:block;font-size:.85rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user small{display:block;color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .presence-status{display:flex;align-items:center;min-height:10px;line-height:1.2}
.user .presence-status:empty{display:none}
.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9a97a6;box-shadow:0 0 0 2px rgba(154,151,166,.12);vertical-align:middle}
.presence-dot.online{background:#13b77a;box-shadow:0 0 0 2px rgba(19,183,122,.16)}
.presence-dot.hidden{background:#777384}
.group-section-title{margin-top:3px}
.section-add{border:0;background:transparent;color:var(--brand);font-size:20px;line-height:1;padding:0 4px}
.group-search{display:flex;align-items:center;gap:6px;margin:0 8px 4px;padding:0 8px;border:1px solid var(--line);border-radius:9px;color:var(--muted)}
.group-search input{min-height:32px;margin:0;border:0;background:transparent;padding:5px;font-size:.72rem}
.groups-list{max-height:220px;flex:0 1 auto}
.group-empty{display:block;padding:8px 14px;color:var(--muted);font-size:.72rem;text-align:center}
.group-row .group-settings{border:0;background:transparent;color:var(--muted);padding:5px}
.group-row .group-settings:hover{color:var(--brand)}
.channel-row{border-inline-start:3px solid #ef9b35}
.channel-row .group-avatar{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.channel-row.active{box-shadow:inset 0 0 0 1px rgba(239,155,53,.35)}
.channel-option{color:var(--ink)}
.channel-option input{accent-color:#ef9b35}
.group-help{display:block;color:var(--muted);font-size:.72rem;line-height:1.8}
.group-type-options{border:1px solid var(--line);border-radius:10px;padding:8px 10px 10px;margin:13px 0 0}
.group-type-options legend{padding:0 5px;color:var(--muted);font-size:.72rem}
.group-type-options .phone-visibility{display:inline-flex;align-items:center;gap:6px;margin:3px 10px 0 0}
.group-type-options input{width:auto;min-height:0;margin:0;padding:0;accent-color:var(--brand)}
.group-settings-form{border:1px solid var(--line);border-radius:12px;padding:0 10px 10px;margin-bottom:10px}
.group-settings-form .primary{margin-top:14px}
.group-preview-card{
  align-self:center;width:min(100%,420px);margin:auto;padding:28px 22px;text-align:center;
  border:1px solid var(--line);border-radius:22px;background:var(--paper);
  box-shadow:0 12px 34px rgba(45,35,100,.08)
}
.group-preview-avatar{
  width:78px;height:78px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#a975ff);
  color:#fff;font-size:28px;font-weight:800;overflow:hidden
}
.group-preview-avatar img{width:100%;height:100%;object-fit:cover}
.group-preview-card h3{margin:0 0 2px;font-size:1.1rem}
.group-preview-card>small{color:var(--muted);font-size:.75rem}
.group-preview-card p{margin:13px 0 0;color:var(--muted);font-size:.82rem;line-height:1.9}
.group-preview-join{width:min(100%,260px);margin:18px auto 0}
.public-channel-link{display:block;max-width:100%;margin-top:12px;color:#8f83ff;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr}
.public-channel-link-box{margin:12px 0;padding:11px 12px;border:1px solid rgba(126,112,255,.35);border-radius:14px;background:rgba(91,75,255,.08)}
.public-channel-link-box[hidden]{display:none}
.public-channel-link-box>small{display:block;margin-bottom:7px;color:var(--muted)}
.public-channel-link-row{display:flex;align-items:center;gap:8px;direction:ltr}
.public-channel-link-row a{min-width:0;flex:1;color:#9a8fff;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.public-channel-link-row button{flex:0 0 auto;min-height:32px;padding:5px 10px}
.group-member-results{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.group-invite-result{border:1px solid var(--line);background:rgba(91,75,255,.06);color:var(--ink);border-radius:9px;padding:7px;text-align:right}
.group-members{display:flex;flex-direction:column;gap:5px;margin-top:12px;max-height:270px;overflow:auto}
.group-member-row{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:10px}
.group-member-row .avatar{width:30px;height:30px;min-width:30px;min-height:30px;font-size:.7rem}
.group-member-row>div{flex:1;min-width:0}
.group-member-row strong,.group-member-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-member-row strong{font-size:.78rem}.group-member-row small{font-size:.66rem;color:var(--muted)}
.group-remove{border:0;border-radius:7px;background:#fee2e2;color:#b91c1c;padding:4px 7px;font-size:.65rem}
.group-promote,.group-demote{border:0;border-radius:7px;background:#e9e6ff;color:var(--brand);padding:4px 7px;font-size:.65rem;white-space:nowrap}
.group-demote{background:#fff3d6;color:#a16207}
.danger-outline{border-color:#e9a4ad;color:#b91c1c}
.mute-chat{
  border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;flex:0 0 auto;font-size:14px;opacity:.65;
}
.mute-chat:hover{background:#e9e7f5;color:var(--brand);opacity:1}
.view-profile{
  border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;flex:0 0 auto;font-size:14px;opacity:.65;
}
.view-profile:hover{background:#e9e7f5;color:var(--brand);opacity:1}
aside footer{margin:7px 0;text-align:center;color:#77748f;font-size:.65rem;padding:8px 12px;flex-shrink:0}
aside footer a{color:var(--brand);text-decoration:none}

.chat{
  position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(circle at 95% 0,#fafbff,#f5f4fc);
}
.chat-header{
  min-height:72px;padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;background:var(--paper);flex-shrink:0;
}
.chat-search-bar{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--paper);color:var(--muted)}
.chat-search-bar input{min-width:0;flex:1;margin:0;min-height:36px;border:0;background:transparent;padding:6px 4px;color:var(--ink);outline:0}
.chat-search-bar input:focus{box-shadow:none}
.chat-search-bar button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted)}
.chat-search-bar button:hover{background:rgba(91,75,255,.12);color:var(--brand)}
.chat-search-bar button:disabled{opacity:.3;cursor:not-allowed}
.chat-search-count{min-width:42px;color:var(--muted);font-size:.68rem;text-align:center;direction:ltr}
.back{
  border:0;background:transparent;color:var(--ink);font-size:27px;padding:0;width:40px;height:40px;
  display:grid;place-items:center;flex-shrink:0;
}
.header-avatar{
  width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(135deg,var(--brand),#a975ff);
  color:#fff;display:grid;place-items:center;font-weight:bold;flex:0 0 40px;cursor:pointer;overflow:hidden;
}
.header-info{flex:1;min-width:0}
.header-info strong{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-info small{display:block;color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#typingIndicator{display:block;color:var(--brand);font-size:.7rem;font-weight:bold;white-space:nowrap;margin-inline-start:0}
.chat-actions{display:flex;gap:6px;flex-shrink:0}
.action-btn{
  border:0;background:#f0f0f6;color:var(--ink);width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;font-size:17px;transition:.2s;
}
.action-btn:hover:not(:disabled){background:var(--brand);color:#fff}
.action-btn:disabled{opacity:.5;cursor:not-allowed}
.messages{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;
  display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain;
  direction:ltr;
}
.scroll-to-latest{
  position:absolute;right:28px;bottom:92px;z-index:12;width:48px;height:48px;padding:0;
  display:grid;place-items:center;border:1px solid rgba(190,181,255,.78);border-radius:50%;
  background:linear-gradient(145deg,#715cff,#4936d2);color:#fff;
  box-shadow:0 10px 25px rgba(48,37,153,.38),inset 0 1px rgba(255,255,255,.3);
  animation:slideUp .18s ease both;transition:transform .18s,box-shadow .18s;
}
.scroll-to-latest img{width:31px;height:31px;display:block;pointer-events:none}
.scroll-to-latest:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(48,37,153,.4)}
.scroll-to-latest.has-unread{background:linear-gradient(135deg,#0eaa83,#08775f);border-color:#56d5b4}
.welcome{display:grid;place-items:center;gap:10px;padding:40px 20px;color:var(--muted);text-align:center}
.welcome-icon{font-size:48px;opacity:.5}
.welcome strong{color:var(--ink);font-size:1.1rem}
.message{
  display:flex;flex-direction:column;
  align-self:flex-start;margin-right:auto;margin-left:0;direction:rtl;
  padding:12px 14px;border-radius:18px;max-width:min(75%,400px);
  background:linear-gradient(145deg,#fff,#f3f2fa);border:1px solid #e7e5f2;border-left:3px solid #d9d5ef;
  box-shadow:0 5px 16px rgba(45,35,100,.07);word-wrap:break-word;overflow-wrap:anywhere;
  animation:slideUp .15s;
}
.message-body{min-width:0;display:flex;flex-direction:column;gap:7px}
.message-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;padding-bottom:6px;border-bottom:1px solid rgba(91,75,255,.12)}
.message-sender{font-size:.74rem;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message.mine .message-sender{color:#eeeaff}
.message-flags{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}
.message-flag{display:inline-flex;align-items:center;gap:3px;max-width:150px;padding:2px 6px;border-radius:6px;font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.forwarded-label{background:#e9e6ff;color:var(--brand)}
.reply-quote{background:#fff1d9;color:#a16207}
.message.mine .forwarded-label{background:#8175ef;color:#fff}
.message.mine .reply-quote{background:#8d78d9;color:#fff}
.message-footer{display:flex;align-items:center;gap:7px;min-height:20px;padding-top:5px;border-top:1px solid rgba(91,75,255,.1)}
.message-footer .message-meta{order:3;margin-inline-start:auto}
.message-footer .message-reactions{order:1;margin:0}
.message-footer .reaction-display{order:1;margin:0}
.message-footer .message-actions{order:2}
.message-avatar{
  width:26px;height:26px;min-width:26px;min-height:26px;max-width:26px;max-height:26px;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(135deg,var(--brand),#a975ff);
  color:#fff;display:grid;place-items:center;font-size:.68rem;font-weight:bold;flex:0 0 26px;
  margin-bottom:4px;overflow:hidden;
}
.message.mine .message-avatar{display:none}
.message.mine{
  align-self:flex-end;margin-left:auto;margin-right:0;
  background:linear-gradient(145deg,#6656ff,#4938d5);
  color:#fff;border-color:#5142e5;border-left-color:transparent;border-right:3px solid #a99dff;
  box-shadow:0 8px 20px rgba(91,75,255,.22);
}
.message:not(.mine)::before,.message.mine::before{content:'';display:block;width:28px;height:3px;border-radius:99px;background:var(--brand);opacity:.65;margin-bottom:5px}
.message.mine::before{background:#c8c1ff;opacity:.8}
.message time{display:block;font-size:.65rem;opacity:.7;margin-top:5px;color:#8b7fd1}
.message.mine time{color:#d9d4ff}
.message a{color:inherit;text-decoration:underline;overflow-wrap:anywhere}
.message.mine a{color:rgba(255,255,255,.9)}
.image-attachment{display:block;width:min(220px,65vw);line-height:0;text-decoration:none!important}
.image-attachment img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:10px;background:#0003}
.image-attachment img:hover{opacity:.9}
.delete-message{
  border:0;background:transparent;color:var(--muted);padding:4px;font-size:.85rem;
  cursor:pointer;opacity:0;transition:.2s;min-height:28px;
}
.message:hover .delete-message,.message:focus-within .delete-message{opacity:1}
.delete-message:hover{color:var(--error)}
.delete-message:hover{background:#ffffff22}
.message-meta{display:flex;align-items:center;gap:8px;margin-top:5px;min-height:20px}
.message time{margin-top:0}
.message-status{font-size:0;color:#a7a4b7;white-space:nowrap}
.message-status::after{content:'✓';font-size:.72rem;letter-spacing:-2px}
.message-status.read{color:#168cff}
.message-status.read::after{content:'✓✓'}
.message-reactions{display:flex;gap:4px;margin-top:0}
.message-reaction{
  border:1px solid #d8d5e8;background:transparent;color:var(--muted);border-radius:7px;
  padding:2px 7px;font-size:.75rem;line-height:1.4;cursor:pointer;
}
.message-reaction:hover,.message-reaction.active{border-color:var(--brand);color:var(--brand);background:#eeeaff}
.reaction-display{display:inline-block;margin-top:5px;font-size:.85rem;line-height:1}
.danger-action{color:var(--error)}
.danger-action:hover:not(:disabled){background:#fee2e2;color:#b91c1c}
.danger-action:disabled{opacity:.35;cursor:not-allowed}

.audio-message-card{
  display:flex;align-items:flex-start;gap:10px;min-width:min(280px,65vw);
  padding:10px;border-radius:15px;background:rgba(91,75,255,.08);border:1px solid rgba(91,75,255,.14);
}
.message.mine .audio-message-card{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2)}
.audio-message-icon{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),#a975ff);color:#fff;font-size:18px;
}
.audio-message-details{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.audio-message-details strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-message-details small{font-size:.66rem;opacity:.7}
.audio-message-player{width:100%;height:30px;min-width:0}
.audio-message-open{align-self:flex-start;border:0;background:transparent;color:var(--brand);font-size:.68rem;padding:1px 0;cursor:pointer}
.message.mine .audio-message-open{color:#e0dcff}

.composer{
  padding:10px 12px;border-top:1px solid var(--line);background:var(--paper);
  display:flex;gap:8px;align-items:flex-end;flex-shrink:0;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
}
.attach,.send{
  border:0;background:var(--brand);color:#fff;width:42px;height:42px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;transition:.2s;flex-shrink:0;font-size:17px;
}
.attach:hover:not(:disabled),.send:hover:not(:disabled){background:#7658ff;box-shadow:0 4px 12px #5b4bff42}
.attach:disabled,.send:disabled{opacity:.5;cursor:not-allowed}
.emoji-wrap{position:relative;flex:0 0 auto}
.emoji-button{
  border:0;background:transparent;color:var(--muted);width:42px;height:42px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;transition:.2s;flex-shrink:0;font-size:21px;
}
.emoji-button:hover:not(:disabled){background:#f0f0f6;color:var(--brand)}
.emoji-button:disabled{opacity:.5;cursor:not-allowed}
.emoji-picker{
  position:absolute;right:0;bottom:50px;width:min(300px,calc(100vw - 24px));padding:10px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:4px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 12px 30px #20175d24;
  z-index:50;
}
.emoji-option{
  border:0;background:transparent;border-radius:8px;padding:6px;font-size:22px;line-height:1.2;
}
.emoji-option:hover{background:#f0f0f6}
.composer input{
  flex:1;min-width:0;min-height:42px;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:9px 12px;outline:none;background:var(--paper);transition:.2s;margin:0;
}
.composer input:focus{border-color:var(--brand);box-shadow:0 0 0 4px #5b4bff18}

.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.sidebar-backdrop.visible{opacity:1;pointer-events:auto}

.call-modal{
  position:fixed;inset:0;background:radial-gradient(circle at 50% 0,#27223f,#050507 62%);z-index:1000;
  display:grid;place-items:center;padding:0;animation:fadeIn .15s;
}
.call-container{
  width:min(100%,600px);max-height:100dvh;background:#08080b;border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
}
.call-header{
  min-height:78px;padding:12px 16px;background:#1a1a1a;display:flex;gap:12px;align-items:center;
  border-bottom:1px solid #333;flex-shrink:0;
}
.call-avatar{
  width:48px;height:48px;min-width:48px;min-height:48px;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(135deg,var(--brand),#a975ff);
  color:#fff;display:grid;place-items:center;font-weight:bold;font-size:20px;flex-shrink:0;
}
.call-info{flex:1;color:#fff;min-width:0}
.call-info strong{display:block;font-size:.95rem;margin-bottom:2px}
.call-info small{display:block;color:#aaa;font-size:.75rem}
#callTimer{display:block;color:var(--success);font-weight:bold;margin-top:4px}
.video-container{position:relative;width:100%;aspect-ratio:4/3;max-height:calc(100dvh - 160px);background:linear-gradient(145deg,#11101a,#000);overflow:hidden}
#remoteVideo,#localVideo{width:100%;height:100%;object-fit:contain;background:#000}
#localVideo{
  position:absolute;bottom:12px;right:12px;width:min(120px,28vw);height:min(120px,28vw);
  border-radius:var(--radius-md);border:2px solid rgba(255,255,255,.3);z-index:10;
}
.call-answer-row{
  display:flex;justify-content:center;gap:18px;padding:14px 16px 0;background:#1a1a1a;flex-shrink:0;
}
.call-controls{
  padding:12px 16px max(12px,env(safe-area-inset-bottom));background:#1a1a1a;
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;border-top:1px solid #333;flex-shrink:0;
}
.control-btn{
  border:0;background:#2a2a2a;color:#fff;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;transition:.2s;font-size:18px;
}
.control-btn:focus-visible,.action-btn:focus-visible,.back:focus-visible{
  outline:3px solid #a99cff;outline-offset:3px;
}
.control-btn:hover:not(:disabled){background:#3a3a3a}
.control-btn:disabled{opacity:.5;cursor:not-allowed}
.control-btn.end-btn{background:var(--error)}
.control-btn.accept-btn{background:var(--success)}
.control-btn.muted,.control-btn.off{background:#5a5a5a}

.account-modal{
  position:fixed;inset:0;background:rgba(17,18,28,.6);display:grid;place-items:center;
  z-index:1100;padding:18px;overscroll-behavior:contain;
}
.account-panel{
  width:min(100%,440px);max-height:calc(100dvh - 36px);overflow:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 15px 40px rgba(35,28,80,.18);padding:20px;
}
.account-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.account-header h3{margin:0;font-size:1.05rem}
.close-btn{border:0;background:#f0f0f6;color:var(--ink);width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.account-panel form{display:flex;flex-direction:column;gap:10px}
.account-panel label{margin:0}
.account-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.account-security-section{margin-top:10px;padding:13px;border:1px solid var(--line);border-radius:15px;background:rgba(91,75,255,.06)}
.account-security-section h4{margin:0 0 9px;font-size:.8rem;color:var(--brand)}
.account-quick-actions{display:flex;gap:8px;flex-wrap:wrap}
.account-quick-actions .secondary{min-width:0;padding:9px 11px;min-height:42px}
#logoutAccount{display:none}
.secondary{
  border:1px solid var(--line);background:transparent;color:var(--ink);padding:12px 16px;
  min-height:48px;border-radius:12px;font-weight:bold;flex:1;min-width:150px;
}
.secondary:hover{background:#f5f5fa}
#accountError{color:var(--error);min-height:16px;margin-top:4px;display:block;font-size:.75rem}
textarea{
  width:100%;resize:vertical;border:1px solid #dfdeeb;border-radius:var(--radius-md);
  padding:10px 13px;margin-top:7px;outline:none;background:#fff;color:var(--ink);
}
.phone-visibility{
  display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8rem;font-weight:normal;
}
.phone-visibility input{
  width:18px;min-height:18px;height:18px;margin:0;accent-color:var(--brand);
}
.profile-editor{display:flex;justify-content:center;margin:4px 0 8px}
.profile-image-button{
  border:0;background:transparent;color:var(--brand);display:flex;align-items:center;gap:10px;
  font-weight:bold;cursor:pointer;
}
.profile-image-button .avatar{width:74px;height:74px;min-width:74px;min-height:74px;max-width:74px;max-height:74px;flex:0 0 74px;font-size:24px}
.managed-group-profile-editor{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(91,75,255,.08)}
.managed-group-profile-editor{cursor:pointer;min-height:76px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.managed-group-profile-editor:hover,.managed-group-profile-editor:focus-visible{border-color:#7e70ff;background:rgba(91,75,255,.13);box-shadow:0 0 0 3px rgba(126,112,255,.12);outline:none}
.managed-group-profile-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.managed-group-profile-preview{width:62px;height:62px;min-width:62px;font-size:22px;border:2px solid rgba(143,131,255,.55)}
.managed-group-profile-content{display:grid;gap:4px}
.managed-group-profile-content strong{color:var(--ink);font-size:.9rem}
.managed-group-profile-content small{color:var(--muted);font-size:.75rem}
.managed-group-profile-editor.has-new-image{border-color:#7e70ff;box-shadow:0 0 0 3px rgba(126,112,255,.12)}
.crop-modal{
  position:fixed;inset:0;background:rgba(17,18,28,.7);display:grid;place-items:center;
  z-index:1250;padding:18px;
}
.crop-modal[aria-hidden="false"]{
  z-index:3000;
}
.crop-card{
  width:min(100%,430px);padding:20px;background:var(--paper);border:1px solid var(--line);
  border-radius:24px;box-shadow:0 20px 60px #20175d35;
}
.crop-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.crop-header h3{margin:0;font-size:1.05rem}
.crop-help{margin:6px 0 14px;color:var(--muted);font-size:.78rem}
.crop-stage{
  position:relative;width:min(100%,360px);aspect-ratio:1;margin:auto;overflow:hidden;
  border-radius:50%;background:#171622;touch-action:none;box-shadow:0 8px 28px #20175d25;
}
.crop-stage canvas{display:block;width:100%;height:100%;cursor:grab}
.crop-stage canvas:active{cursor:grabbing}
.crop-ring{position:absolute;inset:0;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 999px #0007;pointer-events:none}
.crop-zoom{margin-top:16px;color:var(--muted);font-size:.78rem}
.crop-zoom input{margin-top:4px;padding:0;min-height:30px;border:0;box-shadow:none;accent-color:var(--brand)}
.crop-actions{display:flex;gap:10px;margin-top:8px}
.crop-actions .primary,.crop-actions .secondary{margin-top:0}
.profile-modal{
  position:fixed;inset:0;background:rgba(17,18,28,.62);display:grid;place-items:center;
  z-index:1200;padding:18px;
}
.profile-card{
  position:relative;width:min(100%,360px);max-height:calc(100dvh - 24px);overflow:auto;padding:30px 24px 24px;text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:28px;
  box-shadow:0 20px 60px #20175d35;
}
.profile-card .close-btn{position:absolute;top:12px;left:12px}
.site-footer{color:var(--muted);font-size:.72rem;text-align:center}
.site-footer a{color:var(--brand);text-decoration:none}
.auth-footer{display:none;position:static;width:min(100%,520px);margin:22px auto 18px;padding:12px 16px;border-top:1px solid var(--line);line-height:1.8}
body:has(#auth:not([hidden])) .auth-footer{display:block}
body:has(#auth:not([hidden])){overflow:auto}
.public-landing{width:100%;min-height:100dvh;margin:0 auto;padding:22px clamp(14px,4vw,46px) 42px;direction:rtl;background:radial-gradient(circle at 13% 15%,#c5baff 0,transparent 31%),radial-gradient(circle at 86% 88%,#c6f3ee 0,transparent 34%),#f8f7ff}
.public-landing>*{width:min(1180px,100%);margin-inline:auto}
.landing-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 0 22px;border-bottom:1px solid rgba(91,75,255,.18)}
.landing-brand{display:flex;align-items:center;gap:10px}
.landing-logo{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background-image:url('/assets/minigap-logo-192.png');background-size:cover;background-position:center;color:transparent;font-size:0;font-weight:900;box-shadow:0 10px 24px rgba(25,214,220,.2),0 0 0 1px rgba(111,235,255,.24)}
.landing-brand strong{display:block;color:var(--ink);font-size:1rem}
.landing-brand small{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}
.landing-actions{display:flex;align-items:center;gap:8px;direction:ltr}
.landing-actions button{border-radius:11px;padding:9px 16px;font-weight:700;cursor:pointer}
.landing-login{border:1px solid rgba(91,75,255,.5);background:transparent;color:var(--brand)}
.landing-register{border:0;background:linear-gradient(135deg,#5b4bff,#826fff);color:#fff;box-shadow:0 8px 18px rgba(91,75,255,.2)}
.landing-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(32px,7vw,76px) 0 42px}
.landing-hero>div:first-child{max-width:630px}
.landing-hero small,.landing-section-title small{color:#8678ff;font-weight:800}
.landing-hero h1{margin:10px 0 12px;color:var(--ink);font-size:clamp(2rem,5vw,4rem);line-height:1.2;letter-spacing:-.05em}
.landing-hero h1 span{color:#7564ff}
.landing-hero p{max-width:570px;color:var(--muted);line-height:2;font-size:.95rem}
.landing-orbit{position:relative;width:180px;height:180px;border:1px solid rgba(126,112,255,.28);border-radius:50%;background:radial-gradient(circle,#7b68ff2b,transparent 62%);box-shadow:inset 0 0 35px #6f5eff18,0 0 60px #6f5eff12}
.landing-orbit:before,.landing-orbit:after{content:"";position:absolute;inset:22px;border:1px dashed #8b7dff4d;border-radius:50%}
.landing-orbit:after{inset:48px}
.landing-orbit span{position:absolute;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#28234c;color:#bcb4ff;box-shadow:0 5px 14px #0003}
.landing-orbit span:nth-child(1){top:18px;right:24px}.landing-orbit span:nth-child(2){bottom:28px;left:14px}.landing-orbit span:nth-child(3){top:74px;left:74px;background:#6855ff;color:#fff}
.landing-channels{padding-bottom:24px}
.landing-section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:17px}
.landing-section-title h2{margin:6px 0 0;color:var(--ink);font-size:clamp(1.25rem,3vw,1.8rem)}
.landing-section-title>span{color:var(--muted);font-size:.75rem}
.public-channel-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:15px}
.public-channel-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-height:142px;padding:18px;border:1px solid rgba(126,112,255,.2);border-radius:22px;background:linear-gradient(145deg,rgba(37,31,73,.75),rgba(25,23,42,.9));box-shadow:0 12px 28px rgba(14,10,35,.18);overflow:hidden}
.public-channel-card:after{content:"";position:absolute;left:-35px;bottom:-55px;width:145px;height:145px;border-radius:50%;background:#6e5eff1a}
.public-channel-avatar{width:61px;height:61px;min-width:61px;font-size:25px;z-index:1}
.public-channel-card-body{min-width:0;z-index:1}
.public-channel-card-body h3{margin:0;color:var(--ink);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-channel-card-body small{display:block;margin-top:5px;color:#9587ff;font-size:.72rem}
.public-channel-card-body p{margin:8px 0 0;color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-channel-card-link{grid-column:2;width:max-content;z-index:1;padding:8px 13px;border-radius:10px;background:#6351ff;color:#fff;font-size:.75rem;font-weight:700;text-decoration:none;box-shadow:0 7px 15px #5b4bff33}
.landing-loading,.landing-empty{grid-column:1/-1;padding:35px;text-align:center;color:var(--muted);border:1px dashed rgba(126,112,255,.28);border-radius:18px}
.landing-hidden{display:none!important}
body.landing-mode{overflow:auto}
.profile-avatar-large{
  width:104px;height:104px;min-width:104px;min-height:104px;max-width:104px;max-height:104px;aspect-ratio:1/1;flex:0 0 104px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#a975ff);
  color:#fff;font-size:40px;font-weight:bold;overflow:hidden;box-shadow:0 12px 28px #5b4bff40;
}
.profile-avatar-large img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}
.profile-card h3{margin:0 0 2px;font-size:1.2rem}
.profile-card>small{color:var(--muted)}
.profile-card p{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);line-height:1.8}
.profile-files-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-align:right}
.profile-files-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.profile-files-heading h4{margin:0;color:var(--ink);font-size:.9rem}
.profile-files-heading span{color:var(--muted);font-size:.7rem}
.profile-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:240px;overflow:auto;padding:2px 2px 4px}
.profile-files-loading,.profile-files-empty{display:block;padding:13px 8px;text-align:center;color:var(--muted);font-size:.72rem}
.profile-file-card{display:flex;align-items:center;gap:7px;width:100%;min-width:0;padding:6px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 72%,transparent);color:var(--ink);text-align:right;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
.profile-file-card:hover{background:color-mix(in srgb,var(--brand) 12%,var(--bg));border-color:var(--brand);transform:translateY(-1px)}
.profile-file-preview{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,var(--brand),#8b68ff);color:#fff;font-size:17px}
.profile-file-preview img,.profile-file-preview video{width:100%;height:100%;display:block;object-fit:cover}
.profile-file-details{display:grid;gap:3px;min-width:0}
.profile-file-details strong,.profile-file-details small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-file-details strong{font-size:.76rem}
.profile-file-details small{color:var(--muted);font-size:.65rem}
.profile-lazy-media{background:linear-gradient(135deg,#25213d,#17152a)}
@media (max-width:420px){.profile-files{grid-template-columns:1fr}}
.profile-modal-actions{display:flex;justify-content:center;margin-top:14px}
.profile-modal-actions .primary{width:auto;min-width:170px;margin:0}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(5px);opacity:0}to{transform:translateY(0);opacity:1}}

@media(max-width:700px){
  .mobile-menu-button{display:grid;place-items:center}
  .chat-menu-button{order:0;margin-inline-start:0}
  .chat-header>.back{display:none}
  .discover-section{padding:22px 12px 30px}
  .discover-heading{display:block}
  .discover-heading>span{display:block;margin-top:7px}
  .discover-grid{grid-template-columns:1fr}
  .discover-card{min-height:82px;border-radius:16px;padding:11px}
  .discover-avatar{flex-basis:46px;width:46px;height:46px}
  .public-landing{padding:10px 14px 30px}
  .landing-header{padding-bottom:15px}
  .landing-brand small{display:none}
  .landing-actions button{padding:8px 11px;font-size:.72rem}
  .landing-hero{padding:30px 0 28px;gap:12px}
  .landing-hero h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .landing-hero p{font-size:.8rem}
  .landing-orbit{width:105px;height:105px;flex:0 0 105px}
  .landing-orbit:before{inset:13px}
  .landing-orbit:after{inset:29px}
  .landing-orbit span{width:22px;height:22px;font-size:.65rem}
  .landing-orbit span:nth-child(1){top:10px;right:12px}
  .landing-orbit span:nth-child(2){bottom:16px;left:7px}
  .landing-orbit span:nth-child(3){top:42px;left:42px}
  .landing-section-title{display:block}
  .landing-section-title>span{display:block;margin-top:6px}
  .public-channel-card{min-height:130px;padding:14px;border-radius:18px}
  .public-channel-avatar{width:52px;height:52px;min-width:52px}
  body{overflow:hidden}
  .app{display:block}
  aside{
    position:fixed;right:0;top:0;bottom:0;width:100vw;height:100dvh;
    border-left:1px solid var(--line);transform:translateX(105%);
    transition:transform .22s ease;box-shadow:0 0 30px rgba(0,0,0,.12);
  }
  .app:not(.chat-open) aside,
  aside.open{transform:translateX(0)}
  .sidebar-backdrop{display:block}
  .mobile-close{display:grid}
  .chat{position:absolute;inset:0;width:100%;height:100dvh}
  .app:not(.chat-open) .chat{visibility:hidden;pointer-events:none}
  .app.account-open .chat{visibility:visible;pointer-events:auto}
  .app.profile-open .chat{visibility:visible;pointer-events:auto}
  .app.chat-open .chat{visibility:visible;pointer-events:auto}
  .app.chat-open aside{transform:translateX(105%)}
  .app.chat-open aside.open{transform:translateX(0)}
  .app.chat-open .sidebar-backdrop{opacity:0;pointer-events:none}
  .sidebar-tabs{top:0;width:100%;padding:7px 10px}
  .sidebar-tabs button{min-height:40px;font-size:.78rem}
  .group-section-title{padding:10px 12px}
  .group-search{margin:0 10px 7px;min-height:42px}
  .group-search input{font-size:16px;min-height:38px}
  .groups-list{max-height:none;flex:1;min-height:0;padding-bottom:14px;overflow-y:auto}
  .group-row{min-height:64px;margin:4px 10px;padding:10px 9px;border:1px solid transparent}
  .group-row .group-settings{width:38px;height:38px;font-size:17px}
  .chat-header{min-height:64px;padding:9px 10px}
  .back{width:42px;height:42px;font-size:29px}
  .header-avatar{width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px;flex-basis:38px}
  .chat-actions{gap:4px}
  .action-btn{width:40px;height:40px}
  .danger-action{font-size:16px}
  .messages{padding:10px 8px max(12px,env(safe-area-inset-bottom))}
  .message{max-width:88%;padding:9px 11px}
  .message .delete-message{
    opacity:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:34px;
    margin-top:2px;
    color:inherit;
    background:rgba(255,255,255,.14);
    border-radius:8px;
  }
  .message:not(.mine) .delete-message{display:none}
  .composer{padding-left:8px;padding-right:8px}
  .composer input{font-size:16px} /* prevents iOS Safari auto-zoom */
  .attach,.send,.emoji-button{width:42px;height:42px}
  #fileHint{padding:0 10px}
  .account-modal{padding:0;align-items:flex-end}
  .account-panel{
    width:100%;max-height:92dvh;border-radius:22px 22px 0 0;
    padding:18px 16px max(18px,env(safe-area-inset-bottom));
  }
  .group-panel{max-height:96dvh;padding:14px 12px max(14px,env(safe-area-inset-bottom))}
  .group-panel .account-header{position:sticky;top:-14px;z-index:2;padding:4px 0 10px;background:var(--paper)}
  .group-settings-form{padding:0 9px 9px;margin-bottom:8px}
  .group-type-options{padding:7px 8px 9px}
  .group-type-options .phone-visibility{display:flex;margin:4px 0}
  .group-members{max-height:30dvh;margin-top:9px}
  .group-member-row{flex-wrap:wrap;gap:6px;padding:7px}
  .group-member-row>div{flex:1 1 calc(100% - 44px);min-width:0}
  .group-member-row .group-promote,.group-member-row .group-demote,.group-member-row .group-remove{
    flex:1 1 auto;min-height:34px;margin-inline-start:36px
  }
  .account-actions{flex-direction:column}
  .secondary{width:100%}
  .call-modal{padding:0}
  .call-container{width:100%;height:100dvh;max-height:none;border-radius:0}
  .video-container{flex:1;height:auto;max-height:none;aspect-ratio:auto}
  .call-header{min-height:74px;padding:12px 14px}
  .call-controls{padding:14px 16px max(16px,env(safe-area-inset-bottom));gap:14px}
  .control-btn{width:54px;height:54px;font-size:20px}
  .call-answer-row{padding-top:16px;gap:24px}
}
.row-actions-toggle:has(.conversation-pin-indicator){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  width:52px!important;
  min-width:52px!important;
}
.row-actions-toggle .conversation-pin-indicator{
  position:static!important;
  inset:auto!important;
  display:inline-grid!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  border:0!important;
  border-radius:5px!important;
  background:transparent!important;
  color:#ffd66e!important;
  font-size:12px!important;
  line-height:1!important;
  text-shadow:none!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.row-actions-toggle.has-pin{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  width:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  height:34px!important;
  min-height:34px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.row-actions-toggle.has-pin .conversation-pin-indicator{
  flex:0 0 16px!important;
  width:16px!important;
  min-width:16px!important;
  height:16px!important;
  font-size:11px!important;
}
.row-actions-menu.has-pin{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  width:76px!important;
  min-width:76px!important;
  height:36px!important;
  overflow:visible!important;
}
.row-actions-menu.has-pin .row-actions-toggle{
  flex:0 0 34px!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.row-actions-menu.has-pin .conversation-pin-indicator{
  position:static!important;
  inset:auto!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 30px!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  border:1px solid rgba(255,220,121,.56)!important;
  border-radius:8px!important;
  background:linear-gradient(145deg,rgba(255,205,83,.25),rgba(177,111,20,.18))!important;
  color:#ffe28a!important;
  font-size:14px!important;
  line-height:1!important;
  text-shadow:0 1px 3px rgba(0,0,0,.7)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.22)!important;
  pointer-events:none!important;
}
/* Compact conversation controls: keep the action affordance visually lighter
   than the avatar and conversation content. */
.row-actions-menu:not(.has-pin) .row-actions-toggle,
.row-actions-toggle{
  width:29px!important;
  min-width:29px!important;
  max-width:29px!important;
  height:29px!important;
  min-height:29px!important;
  border-radius:9px!important;
  font-size:1rem!important;
}
.row-actions-menu.has-pin{width:66px!important;min-width:66px!important;height:31px!important;gap:3px!important}
.row-actions-menu.has-pin .row-actions-toggle{flex-basis:29px!important;width:29px!important;min-width:29px!important;max-width:29px!important;height:29px!important;min-height:29px!important;border-radius:9px!important;font-size:1rem!important}
.row-actions-menu.has-pin .conversation-pin-indicator{flex-basis:26px!important;width:26px!important;min-width:26px!important;height:26px!important;border-radius:7px!important;font-size:12px!important}
.row-actions-menu{
  left:0!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  top:50%!important;
  z-index:40!important;
}
.user{position:relative!important}
.user>div:not(.row-actions-menu){min-width:0!important}
.row-actions-menu.has-pin{
  direction:ltr!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
}
@media(max-width:700px){
  .row-actions-menu:not(.has-pin) .row-actions-toggle,.row-actions-toggle{width:29px!important;min-width:29px!important;height:29px!important;min-height:29px!important}
}

/* Keep conversation rows quiet; secondary actions live in one compact menu. */
.user{position:relative}.row-actions-menu{position:absolute;inset-inline-start:54px;top:50%;z-index:8;transform:translateY(-50%)}
.row-actions-toggle{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid rgba(105,220,226,.22);border-radius:10px;background:rgba(8,28,43,.7);color:#bdeff2;font-size:1.2rem;line-height:1;cursor:pointer}
.row-actions-toggle:hover,.row-actions-toggle:focus-visible{background:rgba(35,180,190,.25);border-color:rgba(105,240,240,.6);outline:none}
.row-actions-menu.is-open .row-actions-toggle{background:linear-gradient(135deg,rgba(43,210,215,.38),rgba(91,91,225,.34));border-color:rgba(126,247,245,.86);color:#fff;box-shadow:0 0 0 3px rgba(71,224,225,.16),0 7px 18px rgba(0,0,0,.24)}
.row-actions-dropdown{position:absolute;inset-inline-end:0;top:calc(100% + 5px);display:flex;align-items:center;gap:3px;min-width:max-content;padding:5px;border:1px solid rgba(105,220,226,.22);border-radius:12px;background:rgba(5,18,30,.96);box-shadow:0 14px 28px rgba(0,0,0,.35);backdrop-filter:blur(12px)}
.row-actions-dropdown button{display:grid;place-items:center;width:34px;height:34px;min-width:34px;padding:0;border:0;border-radius:8px;background:transparent;color:#bfeef0;font-size:.95rem;cursor:pointer}
.row-actions-dropdown button:hover,.row-actions-dropdown button:focus-visible{background:rgba(54,205,210,.18);color:#fff;outline:none}
.row-actions-dropdown .is-pinned{color:#ffd66e}
@media(max-width:700px){.row-actions-toggle{width:34px;height:34px}.row-actions-menu{inset-inline-start:51px}.row-actions-dropdown{inset-inline-end:-2px}.user{padding-inline-end:47px!important}}
html[data-theme="light"] .row-actions-toggle{background:#edf3fa;border-color:#c9d7e6;color:#294568}html[data-theme="light"] .row-actions-dropdown{background:#fff;border-color:#cbd9e8;box-shadow:0 12px 26px rgba(37,64,96,.18)}html[data-theme="light"] .row-actions-dropdown button{color:#294568}html[data-theme="light"] .row-actions-dropdown button:hover{background:#e4effc;color:#1d5daf}
html[data-theme="classic"] .row-actions-toggle{background:#382a1b;border-color:#76552d;color:#f0ce92}html[data-theme="classic"] .row-actions-dropdown{background:#2a2118;border-color:#76552d}html[data-theme="classic"] .row-actions-dropdown button{color:#f0ce92}

/* Readable conversation actions: open a contained vertical menu below the trigger. */
.row-actions-menu{z-index:30}
.row-actions-dropdown{
  inset-inline-start:0;
  inset-inline-end:auto;
  top:calc(100% + 7px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  width:174px;
  min-width:174px;
  max-width:calc(100vw - 24px);
  max-height:240px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px;
  border-radius:14px;
  background:rgba(5,18,30,.98);
  box-shadow:0 16px 34px rgba(0,0,0,.42),0 0 0 1px rgba(105,220,226,.08);
}
.row-actions-dropdown button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:38px;
  height:38px;
  padding:0 10px;
  border-radius:9px;
  text-align:start;
  white-space:nowrap;
  font-size:.95rem;
}
.row-actions-dropdown button::after{
  content:attr(data-label);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.72rem;
  font-weight:750;
  line-height:1.2;
}
@media(max-width:700px){
  .row-actions-menu{inset-inline-start:51px}
  .row-actions-dropdown{inset-inline-start:0;inset-inline-end:auto;width:174px;min-width:174px;max-width:calc(100vw - 24px)}
  .row-actions-dropdown button{min-height:40px;height:40px}
}
html[data-theme="light"] .row-actions-dropdown{background:rgba(255,255,255,.99);box-shadow:0 16px 34px rgba(37,64,96,.22),0 0 0 1px rgba(80,120,170,.08)}
html[data-theme="classic"] .row-actions-dropdown{background:rgba(42,33,24,.99)}

/* Conversation actions are rendered in a real viewport-level modal so they
   cannot be clipped by the sidebar's scroll container. */
.row-actions-modal[hidden]{display:none!important}
.row-actions-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(1,7,15,.62);
  backdrop-filter:blur(5px);
  animation:rowActionsFadeIn .16s ease-out;
}
.row-actions-panel{
  width:min(100%,360px);
  max-height:min(80dvh,430px);
  overflow:auto;
  padding:8px;
  border:1px solid rgba(105,220,226,.28);
  border-radius:20px;
  background:linear-gradient(155deg,rgba(13,35,53,.99),rgba(6,17,30,.99));
  box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 0 1px rgba(112,178,255,.08);
}
.row-actions-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 12px;border-bottom:1px solid rgba(123,191,211,.16)}
.row-actions-header h3{min-width:0;margin:0;color:#effcff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-actions-close{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid rgba(139,195,211,.22);border-radius:10px;background:rgba(255,255,255,.06);color:#cceef3;cursor:pointer}
.row-actions-close:hover,.row-actions-close:focus-visible{background:rgba(255,100,125,.16);border-color:rgba(255,145,161,.55);color:#fff;outline:0}
.row-actions-modal .row-actions-dropdown{position:static;display:flex;width:100%;min-width:0;max-width:none;max-height:none;overflow:visible;gap:4px;padding:8px 2px 2px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.row-actions-modal .row-actions-dropdown button{min-height:46px;height:46px;padding-inline:12px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.045);color:#c8f3f4;font-size:1.05rem}
.row-actions-modal .row-actions-dropdown button::after{font-size:.78rem}
.row-actions-modal .row-actions-dropdown button:hover,.row-actions-modal .row-actions-dropdown button:focus-visible{background:rgba(48,205,211,.16);border-color:rgba(111,235,231,.34);color:#fff;outline:0}
@keyframes rowActionsFadeIn{from{opacity:0}to{opacity:1}}
html[data-theme="light"] .row-actions-modal{background:rgba(35,52,73,.38)}
html[data-theme="light"] .row-actions-panel{background:linear-gradient(155deg,#fff,#edf4fb);border-color:#c7d9ea;box-shadow:0 24px 70px rgba(37,64,96,.28)}
html[data-theme="light"] .row-actions-header{border-bottom-color:#d8e4ef}
html[data-theme="light"] .row-actions-header h3{color:#203854}
html[data-theme="light"] .row-actions-close{background:#edf3fa;color:#294568;border-color:#c9d7e6}
html[data-theme="light"] .row-actions-modal .row-actions-dropdown button{background:#f3f7fb;color:#294568}
html[data-theme="light"] .row-actions-modal .row-actions-dropdown button:hover{background:#e3effb;color:#1d5daf;border-color:#bfd7ef}
html[data-theme="classic"] .row-actions-panel{background:linear-gradient(155deg,#3c2b1b,#241b13);border-color:#76552d}
html[data-theme="classic"] .row-actions-header{border-bottom-color:rgba(224,178,102,.2)}
html[data-theme="classic"] .row-actions-header h3,.row-actions-modal .row-actions-dropdown button{color:#f0ce92}
@media(max-width:700px){
  .row-actions-modal{align-items:flex-end;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .row-actions-panel{width:100%;max-height:min(72dvh,460px);border-radius:20px 20px 14px 14px}
}

/* The sidebar is vertically scrollable only; horizontal scrolling is never
   useful for conversation navigation and causes clipped mobile layouts. */
#sidebar,
#sidebar > #users,
#sidebar .users,
#sidebar .sidebar-search-toolbar,
#sidebar .sidebar-quick-actions{
  overflow-x:hidden!important;
  max-width:100%;
}
#sidebar > #users{overflow-y:auto!important;}

/* Final modal-row contract: later responsive rules must not stack action
   buttons vertically. */
.account-modal .account-actions,
.account-modal .decision-actions,
.account-modal .upload-confirm-actions,
.account-modal .folder-editor-actions,
.file-modal .upload-confirm-actions,
.delete-confirm-panel .account-actions{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:10px!important;
}
.account-modal .account-actions>button,
.account-modal .decision-actions>button,
.account-modal .upload-confirm-actions>button,
.account-modal .folder-editor-actions>button,
.file-modal .upload-confirm-actions>button,
.delete-confirm-panel .account-actions>button{
  flex:1 1 0!important;
  width:0!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0!important;
}

/* Chat header actions use one compact trigger and a viewport-level modal. */
.chat-actions-toggle{display:grid!important;place-items:center;font-size:1.25rem!important;font-weight:900;line-height:1}
.chat-actions-modal[hidden]{display:none!important}
.chat-actions-modal{position:fixed;inset:0;z-index:1210;display:grid;place-items:center;padding:20px;background:rgba(1,7,15,.62);backdrop-filter:blur(5px);animation:rowActionsFadeIn .16s ease-out}
.chat-actions-panel{width:min(100%,360px);max-height:min(78dvh,500px);overflow:auto;padding:8px;border:1px solid rgba(105,220,226,.28);border-radius:20px;background:linear-gradient(155deg,rgba(13,35,53,.99),rgba(6,17,30,.99));box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 0 1px rgba(112,178,255,.08)}
.chat-actions-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 12px;border-bottom:1px solid rgba(123,191,211,.16)}
.chat-actions-modal-header h3{margin:0;color:#effcff;font-size:.9rem}
.chat-actions-modal-close{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid rgba(139,195,211,.22);border-radius:10px;background:rgba(255,255,255,.06);color:#cceef3;cursor:pointer}
.chat-actions-modal-close:hover,.chat-actions-modal-close:focus-visible{background:rgba(255,100,125,.16);border-color:rgba(255,145,161,.55);color:#fff;outline:0}
.chat-actions-modal-list{display:grid;gap:5px;padding:8px 2px 2px}
.chat-actions-modal-list .action-btn{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0;min-height:46px;height:46px;padding:0 12px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.045);color:#c8f3f4;font-size:1.05rem}
.chat-actions-modal-list .action-btn::after{content:attr(title);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:750}
.chat-actions-modal-list .action-btn:hover:not(:disabled),.chat-actions-modal-list .action-btn:focus-visible{background:rgba(48,205,211,.16);border-color:rgba(111,235,231,.34);color:#fff;outline:0}
.chat-actions-modal-list .action-btn[hidden]{display:none!important}
html[data-theme="light"] .chat-actions-modal{background:rgba(35,52,73,.38)}
html[data-theme="light"] .chat-actions-panel{background:linear-gradient(155deg,#fff,#edf4fb);border-color:#c7d9ea;box-shadow:0 24px 70px rgba(37,64,96,.28)}
html[data-theme="light"] .chat-actions-modal-header{border-bottom-color:#d8e4ef}html[data-theme="light"] .chat-actions-modal-header h3{color:#203854}
html[data-theme="light"] .chat-actions-modal-close{background:#edf3fa;color:#294568;border-color:#c9d7e6}
html[data-theme="light"] .chat-actions-modal-list .action-btn{background:#f3f7fb;color:#294568}
html[data-theme="light"] .chat-actions-modal-list .action-btn:hover:not(:disabled){background:#e3effb;color:#1d5daf;border-color:#bfd7ef}
html[data-theme="classic"] .chat-actions-panel{background:linear-gradient(155deg,#3c2b1b,#241b13);border-color:#76552d}html[data-theme="classic"] .chat-actions-modal-header{border-bottom-color:rgba(224,178,102,.2)}html[data-theme="classic"] .chat-actions-modal-header h3,html[data-theme="classic"] .chat-actions-modal-list .action-btn{color:#f0ce92}
@media(max-width:700px){.chat-actions-modal{align-items:flex-end;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.chat-actions-panel{width:100%;max-height:min(72dvh,500px);border-radius:20px 20px 14px 14px}}

/* Consistent sizing for modal action controls. Close/icon-only controls are
   intentionally excluded so they can remain compact. */
.chat-actions-modal-list .action-btn,
.row-actions-modal .row-actions-dropdown button,
.account-actions>button,
.modal-footer>button,
.forward-footer>button,
.file-viewer-footer .file-action,
.upload-confirm-actions>button,
.folder-editor-actions>button,
.decision-actions>button{
  box-sizing:border-box;
  min-height:46px;
  height:46px;
  line-height:1.2;
  font-family:inherit;
}
.account-actions>button,
.modal-footer>button,
.forward-footer>button,
.file-viewer-footer .file-action,
.upload-confirm-actions>button,
.folder-editor-actions>button,
.decision-actions>button{display:inline-flex;align-items:center;justify-content:center}

/* Keep modal action groups on one predictable row at every breakpoint. */
.account-actions,
.decision-actions,
.upload-confirm-actions,
.folder-editor-actions{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center;
}
.account-actions>button,
.decision-actions>button,
.upload-confirm-actions>button,
.folder-editor-actions>button{
  flex:1 1 0;
  width:0;
  min-width:0;
  white-space:nowrap;
}

/* Stable one-piece folder editor layout. */
#folderEditorModal .folder-editor-panel{display:flex;flex-direction:column;min-height:0;padding:0!important}
#folderEditorModal .folder-editor-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:0 0 auto;padding:20px 22px;border-bottom:1px solid rgba(169,191,255,.13);background:linear-gradient(120deg,rgba(92,112,255,.2),rgba(41,211,209,.08),transparent)}
#folderEditorModal .folder-editor-title{display:flex;align-items:center;gap:12px;min-width:0}
#folderEditorModal .folder-editor-mark{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid rgba(155,192,255,.28);border-radius:14px;background:linear-gradient(145deg,rgba(111,126,255,.33),rgba(46,220,207,.16));font-size:1.35rem;box-shadow:0 8px 20px rgba(35,102,255,.18)}
#folderEditorModal .folder-editor-title h3{margin:0;color:#f1f5ff;font-size:1.08rem}
#folderEditorModal .folder-editor-title p{margin:4px 0 0;color:#9eafd0;font-size:.7rem;line-height:1.5}
#folderEditorModal .folder-editor-form{display:flex;flex-direction:column;gap:16px;min-height:0;padding:20px 22px 22px!important;background:linear-gradient(180deg,rgba(12,21,43,.45),rgba(8,15,31,.88));overflow:auto}
#folderEditorModal .folder-editor-form>label{display:grid;gap:8px;color:#b9c8e8;font-size:.74rem;font-weight:750}
#folderEditorModal .folder-editor-form input,#folderEditorModal .folder-editor-form select{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:1px solid rgba(157,183,255,.17);border-radius:14px;background:rgba(3,10,25,.68);color:#f3f6ff}
#folderEditorModal .folder-editor-form input:focus,#folderEditorModal .folder-editor-form select:focus{border-color:#79c5ff;box-shadow:0 0 0 4px rgba(86,166,255,.14);outline:0}
#folderEditorModal .folder-editor-hint{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid rgba(111,205,220,.18);border-radius:16px;background:linear-gradient(135deg,rgba(40,179,188,.12),rgba(90,103,255,.1));color:#dcecff}
#folderEditorModal .folder-editor-hint>span{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:rgba(101,225,221,.14);color:#7be8e2;font-size:1.1rem}
#folderEditorModal .folder-editor-hint strong,#folderEditorModal .folder-editor-hint small{display:block}
#folderEditorModal .folder-editor-hint strong{font-size:.76rem}
#folderEditorModal .folder-editor-hint small{margin-top:4px;color:#96adc9;font-size:.67rem;line-height:1.65}
#folderEditorModal .folder-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px -22px -22px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(155,180,255,.13);background:rgba(10,18,37,.97)}
#folderEditorModal .folder-editor-actions button{min-height:46px;border-radius:13px;font-weight:800}
#folderEditorModal .folder-editor-actions .primary{background:linear-gradient(135deg,#6d7dff,#35cfc4);border-color:transparent;color:#061323;box-shadow:0 10px 22px rgba(67,190,211,.22)}
#folderEditorModal .folder-editor-actions .danger-outline{color:#ffacb6;border-color:rgba(255,126,145,.38);background:rgba(255,95,121,.07)}
.folder-lock-control{display:grid;gap:5px!important;padding:12px 13px;border:1px solid rgba(122,171,255,.18);border-radius:14px;background:rgba(65,101,180,.09);color:#cfe0ff!important}
.folder-lock-row{display:flex;align-items:center;gap:9px}.folder-lock-row input{width:18px!important;min-height:18px!important;accent-color:#62d8ce}.folder-lock-control small,.folder-password-wrap small{color:#8ea4c6;font-size:.66rem;line-height:1.55}.folder-password-wrap{display:grid;gap:6px}.folder-password-wrap[hidden]{display:none}
.folder-unlock-panel{width:min(100% - 28px,390px);padding:26px 22px;border:1px solid rgba(145,180,255,.25);border-radius:24px;background:linear-gradient(155deg,#17243d,#0c152a);box-shadow:0 30px 90px rgba(0,0,0,.55);text-align:center}.folder-unlock-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border:1px solid rgba(114,225,215,.3);border-radius:17px;background:rgba(73,205,193,.13);font-size:1.5rem}.folder-unlock-panel h3{margin:0;color:#f1f6ff}.folder-unlock-panel p{margin:9px 0 16px;color:#a5b7d4;font-size:.75rem;line-height:1.8}.folder-unlock-panel input{box-sizing:border-box;width:100%;min-height:46px;padding:0 13px;border:1px solid rgba(157,183,255,.2);border-radius:13px;background:rgba(3,10,25,.7);color:#fff;text-align:center}.folder-unlock-actions{display:flex;gap:9px;margin-top:16px}.folder-unlock-actions button{flex:1;min-height:44px;border-radius:12px}
#users>.folder-row-open{min-width:0}
#users>.folder-row-open .folder-row-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:rgba(101,126,255,.12);line-height:1}
#users>.folder-row-open strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-lock-badge{margin-inline-start:5px;font-size:.68rem;opacity:.85;flex:0 0 auto}
.locked-search-result{display:flex;align-items:center;gap:10px;width:calc(100% - 16px);min-height:54px;margin:4px 8px;padding:8px 10px;border:1px dashed rgba(255,190,104,.38);border-radius:14px;background:rgba(255,177,73,.07);color:#f8e2bd;text-align:start;cursor:pointer}.locked-search-result:hover{border-color:rgba(255,204,126,.75);background:rgba(255,177,73,.13)}.locked-search-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:rgba(255,184,87,.14);font-size:1rem}.locked-search-result strong,.locked-search-result small{display:block}.locked-search-result strong{font-size:.75rem}.locked-search-result small{margin-top:3px;color:#c5a97a;font-size:.65rem}
.sidebar-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:8px 12px 10px;padding:7px;border:1px solid rgba(140,176,255,.14);border-radius:17px;background:linear-gradient(135deg,rgba(93,115,255,.1),rgba(40,205,198,.06));box-shadow:0 8px 22px rgba(0,0,0,.12)}
.sidebar-quick-button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:42px;padding:6px 7px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.045);color:#cddcff;font-size:.68rem;font-weight:750;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease}
.sidebar-quick-button:hover,.sidebar-quick-button:focus-visible{transform:translateY(-1px);border-color:rgba(128,188,255,.3);background:rgba(111,139,255,.16);color:#fff;outline:none}
.sidebar-quick-avatar,.sidebar-quick-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:rgba(89,211,210,.13);font-size:1rem;line-height:1}
.sidebar-quick-button>span:last-child,#sidebarQuickActions #createGroup.sidebar-create-button>span{display:none}
.sidebar-quick-actions{grid-template-columns:repeat(3,1fr);align-items:center;white-space:nowrap}
.sidebar-quick-actions{direction:ltr}
#sidebarQuickActions #createFolderTop{grid-column:1}
#sidebarQuickActions .sidebar-search-toggle{grid-column:2}
#sidebarQuickActions #createGroup{grid-column:3}
.sidebar-quick-actions .sidebar-search-toggle{display:grid;place-items:center;width:auto;height:42px;margin:0;padding:0;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.045);color:#cddcff;font-size:1.08rem}
.sidebar-quick-actions .sidebar-search-toggle:hover,.sidebar-quick-actions .sidebar-search-toggle:focus-visible{border-color:rgba(128,188,255,.3);background:rgba(111,139,255,.16);color:#fff;outline:none}
#users>.folder-add-row{display:none!important}
.folder-quick .sidebar-quick-icon{background:rgba(117,126,255,.18)}
#sidebarQuickActions #createGroup.sidebar-create-button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:42px;margin:0;padding:6px 7px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.045);color:#cddcff;font-size:.68rem;font-weight:750}
#sidebarQuickActions #createGroup.sidebar-create-button::before{content:'➕';display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:rgba(99,157,255,.16);font-size:.9rem}
@media(max-width:700px){#sidebar .profile{position:relative;padding-inline-end:52px!important}#sidebar .profile .mobile-close{position:absolute;inset-inline-end:8px;top:50%;z-index:5;width:34px;height:34px;min-width:34px;transform:translateY(-50%);margin:0}#sidebar .profile .mobile-close:hover{transform:translateY(-50%)}.sidebar-quick-actions{grid-template-columns:repeat(3,1fr);margin-inline:10px;gap:5px;padding:6px}.sidebar-quick-button,#sidebarQuickActions #createGroup.sidebar-create-button,.sidebar-quick-actions .sidebar-search-toggle{min-height:46px;font-size:.64rem;padding-inline:4px}.sidebar-quick-button span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:700px){
  #folderEditorModal .folder-editor-panel{width:100%;max-height:calc(100dvh - 6px);border-radius:26px 26px 0 0}
  #folderEditorModal .folder-editor-header{padding:18px 16px}
  #folderEditorModal .folder-editor-form{padding:16px 16px 20px!important}
  #folderEditorModal .folder-editor-actions{margin-inline:-16px;padding-inline:16px}
}

/* Final visual pass for the folder editor modal. */
#folderEditorModal:not([hidden]){z-index:1200!important;background:linear-gradient(135deg,rgba(2,7,18,.84),rgba(11,18,40,.74))!important;backdrop-filter:blur(18px) saturate(1.2)!important}
#folderEditorModal .folder-editor-panel{position:relative;isolation:isolate;width:min(610px,calc(100vw - 32px));max-height:min(780px,calc(100dvh - 32px));border:1px solid rgba(155,180,255,.24);border-radius:28px;background:#101a31;box-shadow:0 34px 100px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.035) inset;overflow:hidden}
#folderEditorModal .folder-editor-panel::before{content:'';position:absolute;inset:0 0 auto;height:150px;z-index:-1;background:radial-gradient(circle at 16% 0,rgba(111,126,255,.36),transparent 58%),linear-gradient(125deg,rgba(35,218,209,.11),transparent 65%);pointer-events:none}
#folderEditorModal .account-header{position:relative;min-height:84px;padding:22px 24px 18px 76px!important;border-bottom:1px solid rgba(169,191,255,.13)!important;background:transparent!important}
#folderEditorModal .account-header::before{content:'🗂️';position:absolute;inset-inline-start:24px;top:21px;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(155,192,255,.28);border-radius:14px;background:linear-gradient(145deg,rgba(111,126,255,.33),rgba(46,220,207,.16));font-size:1.35rem;box-shadow:0 10px 25px rgba(35,102,255,.2)}
#folderEditorModal .account-header h3{font-size:1.18rem!important;font-weight:850;letter-spacing:-.03em}
#folderEditorModal .account-header small{display:block;margin-top:5px;color:#9eafd0!important;line-height:1.55}
#folderEditorModal .close-btn{width:38px;height:38px;border:1px solid rgba(181,200,255,.17);border-radius:12px;background:rgba(255,255,255,.055);color:#cbd8f5;font-size:1rem;transition:background .18s ease,transform .18s ease}
#folderEditorModal .close-btn:hover{background:rgba(255,255,255,.12);transform:rotate(4deg)}
#folderEditorModal #folderEditorForm{gap:17px!important;padding:20px 24px 24px!important;background:linear-gradient(180deg,rgba(12,21,43,.4),rgba(8,15,31,.82))}
#folderEditorModal #folderEditorForm>label{gap:8px!important;color:#b9c8e8!important;font-size:.74rem;letter-spacing:.01em}
#folderEditorModal #folderEditorForm>label input,#folderEditorModal #folderEditorForm>label select{min-height:48px!important;padding:0 14px!important;border:1px solid rgba(157,183,255,.17)!important;border-radius:14px!important;background:rgba(3,10,25,.68)!important;box-shadow:0 5px 15px rgba(0,0,0,.12) inset;color:#f3f6ff!important;font-size:.88rem}
#folderEditorModal #folderEditorForm>label select{cursor:pointer}
#folderEditorModal #folderEditorForm>label input::placeholder{color:#7183a7}
#folderEditorModal #folderEditorForm>label input:focus,#folderEditorModal #folderEditorForm>label select:focus{border-color:#79c5ff!important;box-shadow:0 0 0 4px rgba(86,166,255,.14)!important;outline:0}
#folderEditorModal .folder-assignment-heading{padding:7px 2px 0!important;color:#edf3ff!important}
#folderEditorModal .folder-assignment-heading strong{font-size:.84rem}
#folderEditorModal .folder-assignment-heading small{color:#8ea4cb!important;font-size:.68rem}
#folderEditorModal .folder-assignment-toolbar{padding:8px;border:1px solid rgba(155,180,255,.12);border-radius:16px;background:rgba(4,11,27,.42)}
#folderEditorModal .folder-assignment-toolbar input{min-height:42px!important;border-radius:11px!important;background:rgba(16,29,55,.82)!important}
#folderEditorModal .folder-assignment-toolbar button{min-height:42px!important;border-radius:11px!important}
#folderEditorModal .folder-assignment-list{display:grid;gap:5px;max-height:280px!important;margin:0!important;padding:7px!important;border:1px solid rgba(155,180,255,.14)!important;border-radius:17px!important;background:rgba(4,10,24,.47)!important}
#folderEditorModal .folder-assignment-list label{min-height:43px;padding:7px 10px!important;border:1px solid transparent!important;border-radius:12px!important;background:rgba(255,255,255,.018);color:#dce7ff!important;transition:background .16s ease,border-color .16s ease,transform .16s ease}
#folderEditorModal .folder-assignment-list label:hover{transform:translateX(-2px);border-color:rgba(120,190,255,.3)!important;background:rgba(92,133,255,.13)!important}
#folderEditorModal .folder-assignment-list label:has(input:checked){border-color:rgba(74,221,209,.34)!important;background:linear-gradient(90deg,rgba(43,200,193,.16),rgba(89,105,255,.11))!important;color:#f5ffff!important}
#folderEditorModal .folder-assignment-list input{width:18px;height:18px;accent-color:#53d5cb}
#folderEditorModal .folder-assignment-empty{margin:0;padding:30px 16px;text-align:center;color:#91a5ca;font-size:.78rem;line-height:1.8}
#folderEditorModal .account-actions{margin:2px -24px -24px!important;padding:14px 24px calc(14px + env(safe-area-inset-bottom))!important;background:rgba(10,18,37,.96)!important;border-top:1px solid rgba(155,180,255,.13)!important;box-shadow:0 -14px 28px rgba(0,0,0,.2)}
#folderEditorModal .account-actions button{min-height:46px;border-radius:13px;font-weight:800}
#folderEditorModal .account-actions .primary{background:linear-gradient(135deg,#6d7dff,#35cfc4);border-color:transparent;color:#061323;box-shadow:0 10px 22px rgba(67,190,211,.22)}
#folderEditorModal .account-actions .danger-outline{color:#ffacb6;border-color:rgba(255,126,145,.38);background:rgba(255,95,121,.07)}
@media(max-width:700px){
  #folderEditorModal:not([hidden]){align-items:flex-end!important;padding:0!important}
  #folderEditorModal .folder-editor-panel{width:100%;max-height:calc(100dvh - 6px);border-radius:26px 26px 0 0}
  #folderEditorModal .account-header{min-height:76px;padding:18px 16px 14px 68px!important}
  #folderEditorModal .account-header::before{inset-inline-start:16px;top:18px;width:38px;height:38px}
  #folderEditorModal #folderEditorForm{padding:16px 16px 20px!important}
  #folderEditorModal .folder-assignment-list{max-height:31dvh!important}
  #folderEditorModal .account-actions{margin-inline:-16px!important;padding-inline:16px!important}
}

@media(max-width:380px){
  .profile{gap:5px;padding-left:7px;padding-right:7px}
  .profile .avatar.big{width:42px;height:42px;min-width:42px;min-height:42px;max-width:42px;max-height:42px;flex-basis:42px}
  .profile .icon-button{width:32px;height:32px}
  .chat-header{gap:5px;padding-left:6px;padding-right:6px}
  .header-avatar{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;flex-basis:36px}
  .header-info strong{font-size:.88rem}
  .header-info small{font-size:.68rem}
  .chat-actions{gap:2px}
  .chat-actions .action-btn{width:36px;height:36px;border-radius:9px;font-size:15px}
  .message{max-width:94%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Hamburger controls are only needed on the mobile layout. */
@media(min-width:701px){
  .mobile-menu-button,
  .chat-menu-button,
  #mobileMenu,
  #chatMenu{display:none!important}
}

@media(prefers-color-scheme:dark){
  .sidebar-tabs{background:#191827;border-color:#302d48}
  .sidebar-tabs button.active{background:#302b52;border-color:#51477d;color:#d9d4ff}
  .group-promote{background:#302b52;color:#d9d4ff}
  .group-demote{background:#4b3b21;color:#ffd98a}
  :root{--ink:#f3f1ff;--muted:#aaa7c0;--line:#28263c;--paper:#151421;--bg:#0d0c15}
  .auth{background:radial-gradient(circle at 13% 15%,#30277a,transparent),radial-gradient(circle at 86% 88%,#123e45,transparent),#0d0c15}
  .public-landing{background:radial-gradient(circle at 13% 15%,#30277a,transparent),radial-gradient(circle at 86% 88%,#123e45,transparent),#0d0c15}
  .auth-card{background:#181724e8;border-color:#343149}
  .tabs{background:#242238}.tabs button{color:#aaa7c0}.tabs .active{background:#343149;color:#d5d0ff}
  input{color:var(--ink);background:#222033;border-color:#393650}
  input:focus{box-shadow:0 0 0 4px #5b4bff30}
  .app{background:#0d0c15} aside{background:#12111d;border-right-color:#28263c}
  .chat{background:radial-gradient(circle at 95% 0,#1a1633,transparent),#11101a}
  .user:hover{background:#1a1733}.user.active{background:linear-gradient(135deg,#1a1555,#1a1a40)}
  .assistant-entry{background:linear-gradient(135deg,#1a1555,#1a1a40);border-color:#40358a;color:var(--ink)}
  .assistant-entry:hover{background:#24204d;border-color:#6b5cff}
  .messages{background:radial-gradient(circle at 95% 0,#1a1633,transparent),#11101a}
  .welcome strong{color:var(--ink)}
  .message{background:#242333;border-left-color:#353348;color:#f3f1ff}
  .message time{color:#b3afc8}.message a{color:#c3bcff}.message.mine{border-right-color:#5b4bff}
  .chat-header{background:#171622;border-bottom-color:#28263c}.back{color:var(--ink)}
  .action-btn{background:#2a2742;color:var(--ink)}.action-btn:hover:not(:disabled){background:var(--brand)}
  .composer{background:#171622;border-top-color:#28263c}
  .composer input{background:#252334;border-color:#393650;color:#fff}
  textarea{background:#252334;border-color:#393650;color:#fff}
  .emoji-button{color:#c3bfd6}.emoji-button:hover:not(:disabled),.emoji-option:hover{background:#2a2742}
  .emoji-picker{box-shadow:0 12px 30px #0008}
  .close-btn{background:#2a2742;color:var(--ink)}
  .secondary{background:transparent}.secondary:hover{background:#252334}
  #authError,#fileHint{color:#fca5a5}
}

/* Mobile keyboard stability */
:root{--app-height:100dvh;--app-top:0px}
.app,.chat{height:var(--app-height)}
.messages{min-height:0;padding-bottom:12px}
@media(max-width:700px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .app{position:fixed;inset:var(--app-top) 0 auto;height:var(--app-height);max-height:var(--app-height);overflow:hidden}
  .chat{height:100%;max-height:100%;overflow:hidden}
  .composer{padding-bottom:max(10px,env(safe-area-inset-bottom));}
  .messages{scroll-padding-bottom:120px}
  .messages{touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  .chat-header{padding-top:max(9px,env(safe-area-inset-top))}
  .composer{gap:5px;padding-left:6px;padding-right:6px}
  .composer input{min-width:0;padding-left:9px;padding-right:9px}
  .attach,.send,.emoji-button,.record-audio{width:38px;height:38px;flex-basis:38px}
  .record-audio{font-size:16px}
  .message-actions{opacity:1}
  .message-actions button{min-width:30px;min-height:28px}
  .scroll-to-latest{right:12px;bottom:76px;width:46px;height:46px}
  .scroll-to-latest img{width:29px;height:29px}
}

/* Keep the conversation header and sidebar profile perfectly aligned */
.profile,.chat-header{
  height:72px;
  min-height:72px;
  max-height:72px;
  padding-top:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
@media(max-width:700px){
  .profile,.chat-header{
    height:64px;
    min-height:64px;
    max-height:64px;
    padding-top:max(8px,env(safe-area-inset-top));
    padding-bottom:8px;
  }
}

/* Mobile conversation layout inspired by the reference design */
@media(max-width:700px){
  .app{background:#070c13}
  aside{
    background:
      radial-gradient(420px 300px at 8% 0,rgba(26,210,218,.10),transparent 70%),
      #070c13;
    border:0;
  }
  .profile{
    height:72px;min-height:72px;max-height:72px;
    padding:10px 14px;
    background:linear-gradient(180deg,rgba(14,27,39,.96),rgba(7,14,23,.90));
    border-bottom:1px solid rgba(91,202,210,.22);
  }
  .profile .avatar.big{width:42px;height:42px;min-width:42px;min-height:42px;flex-basis:42px}
  .profile strong{font-size:.88rem;color:#efffff}
  .profile small{color:#7fa3ad}
  .profile .icon-button{width:34px;height:34px;border-radius:50%;font-size:15px;color:#82a9b0}
  .profile .icon-button:hover{background:rgba(27,213,218,.15);color:#7fffff}
  .sidebar-tabs{
    order:0;
    padding:9px 12px 6px;
    gap:7px;
    background:transparent;
    border:0;
  }
  .sidebar-tabs button{
    min-height:38px;
    border-radius:999px;
    border:1px solid rgba(94,166,181,.22);
    background:rgba(13,28,39,.72);
    color:#8daab4;
    font-size:.74rem;
  }
  .sidebar-tabs button.active{
    color:#dfffff;
    border-color:#20d9dc;
    background:rgba(19,103,111,.35);
    box-shadow:0 0 14px rgba(32,217,220,.12);
  }
  .search-wrap{
    min-height:48px;
    margin:3px 12px 8px;
    padding:4px 13px;
    border:1px solid rgba(116,177,188,.25);
    border-radius:16px;
    background:rgba(17,31,43,.88);
    box-shadow:inset 0 1px rgba(255,255,255,.04);
  }
  .search-wrap input{min-height:38px;font-size:16px;color:#eaffff}
  .section-title{padding:10px 16px 6px;color:#7797a2;font-size:.72rem}
  .assistant-entry{
    width:calc(100% - 24px);margin:3px 12px 8px;padding:10px 12px;
    min-height:66px;border-radius:16px;
    background:linear-gradient(135deg,rgba(16,56,67,.78),rgba(25,24,66,.84));
    border-color:rgba(44,213,219,.32);
  }
  .assistant-entry .avatar{width:44px;height:44px;min-width:44px}
  .assistant-entry strong{font-size:.82rem;color:#efffff}
  .assistant-entry small{font-size:.68rem;color:#85abb4}
  .users{padding:0 6px 12px}
  .user{
    min-height:68px;
    margin:0;
    padding:9px 10px;
    border-radius:0;
    border-bottom:1px solid rgba(105,147,157,.15);
    gap:12px;
    background:transparent;
  }
  .user:hover,.user.active{background:rgba(26,200,207,.09)}
  .user.active{box-shadow:inset 3px 0 #20d9dc}
  .user .avatar{width:48px;height:48px;min-width:48px;min-height:48px;flex-basis:48px;font-size:1rem}
  .user strong{font-size:.88rem;color:#eafcff}
  .user small{font-size:.7rem;color:#829da6}
  .user .presence-status{position:absolute;margin-top:-54px;margin-inline-start:34px;min-height:12px}
  .presence-dot{width:10px;height:10px;border:2px solid #07111a}
  .user .view-profile,.user .mute-chat{width:30px;height:30px;font-size:13px}
  .group-section-title{margin-top:4px;padding:10px 16px 6px}
  .group-search{margin:2px 12px 7px;min-height:44px;border-radius:15px;background:rgba(17,31,43,.88)}
  .group-row{min-height:68px;margin:0 6px;border-bottom:1px solid rgba(105,147,157,.15);border-radius:0}
  .group-row.active{background:rgba(26,200,207,.09)}
  .call-logs{padding-inline:10px}
  aside footer{padding:10px 12px;background:rgba(5,12,19,.5)}
  .chat{
    background:
      radial-gradient(430px 300px at 88% 0,rgba(32,217,220,.09),transparent 70%),
      #070c13;
  }
  .chat-header{
    height:72px;min-height:72px;max-height:72px;
    padding:10px 12px;
    background:linear-gradient(180deg,rgba(14,28,40,.97),rgba(7,15,24,.93));
    border-bottom:1px solid rgba(91,202,210,.25);
  }
  .chat-header>.back{display:grid;width:38px;height:38px;color:#c9f5f6;font-size:26px}
  .header-avatar{width:42px;height:42px;min-width:42px;min-height:42px;flex-basis:42px}
  .header-info strong{font-size:.9rem;color:#efffff}
  .header-info small{font-size:.68rem;color:#80a4ad}
  .chat-actions{gap:3px}
  .chat-actions .action-btn{width:34px;height:34px;border-radius:50%;font-size:14px;background:transparent;border-color:transparent}
  .chat-actions .action-btn:hover:not(:disabled){background:rgba(30,215,220,.16)}
  .chat-actions #deleteConversation,.chat-actions #callAudio,.chat-actions #callVideo{display:none}
  .messages{
    padding:14px 11px 12px;
    gap:11px;
    background:
      radial-gradient(500px 360px at 12% 95%,rgba(74,59,198,.10),transparent 70%),
      #070c13;
  }
  .message{
    width:min(89%,500px);
    max-width:500px;
    padding:10px 12px 8px;
    border-radius:17px 17px 17px 6px;
    background:linear-gradient(145deg,rgba(24,40,53,.96),rgba(10,19,29,.96));
  }
  .message.mine{
    border-radius:17px 17px 6px 17px;
    background:linear-gradient(145deg,#105461,#193474);
  }
  .message-body>.message-text{font-size:.9rem;line-height:1.8}
  .message-head{padding-bottom:6px}
  .message-footer{padding-top:6px}
  .image-attachment{width:min(260px,72vw)}
  .audio-message-card{min-width:min(260px,76vw)}
  .composer{
    margin:7px 8px 0;
    border-radius:19px;
    padding:6px;
    background:linear-gradient(145deg,rgba(19,37,49,.96),rgba(7,16,25,.98));
  }
}

/* Clean message surfaces and keep the emoji panel inside the viewport */
.message:not(.mine)::before,.message.mine::before{display:none}
.message-head,.message-footer{border-top:0;border-bottom:0}
.message-body{gap:7px}
.emoji-picker{
  position:fixed;
  inset-inline-start:14px;
  inset-inline-end:auto;
  bottom:88px;
  width:min(310px,calc(100vw - 28px));
  max-height:min(52dvh,340px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:10px;
  background:linear-gradient(145deg,rgba(19,39,51,.98),rgba(7,15,24,.99));
  border:1px solid rgba(71,216,220,.42);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.58),0 0 24px rgba(32,216,220,.12);
}
.emoji-option{border-radius:10px}
.emoji-option:hover{background:rgba(32,217,220,.14)}
@media(max-width:700px){
  .emoji-picker{
    inset-inline-start:10px;
    bottom:calc(62px + env(safe-area-inset-bottom));
    max-height:48dvh;
  }
}
@media(min-width:701px){
  .scroll-to-latest{right:24px;bottom:94px}
}

/* MiniGap Aurora Glass Theme */
:root{
  --ink:#edf7fb;
  --muted:#8ea7b2;
  --brand:#22d3d8;
  --brand2:#7658ff;
  --line:rgba(119,174,190,.22);
  --paper:rgba(15,24,35,.86);
  --bg:#070c13;
  --success:#36d47c;
  --warning:#f2a94a;
  --error:#ff657a;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:24px;
}
body{
  background:
    radial-gradient(900px 600px at 8% 8%,rgba(0,210,225,.10),transparent 65%),
    radial-gradient(800px 600px at 92% 88%,rgba(255,164,69,.08),transparent 68%),
    #070c13;
  color:var(--ink);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,transparent 0 48%,rgba(22,211,216,.035) 49%,transparent 50% 76%,rgba(255,170,80,.035) 77%,transparent 78%);
}
.auth,.public-landing{
  background:
    radial-gradient(700px 500px at 8% 12%,rgba(0,220,235,.14),transparent 68%),
    radial-gradient(700px 500px at 92% 86%,rgba(244,155,67,.12),transparent 68%),
    #070c13;
  color:var(--ink);
}
.auth-card,.app,.account-panel,.profile-card,.crop-card,.forward-panel,.file-panel,.video-panel,.group-preview-card{
  background:linear-gradient(145deg,rgba(20,31,43,.94),rgba(8,14,23,.95));
  border:1px solid rgba(103,183,201,.28);
  box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 35px rgba(24,215,222,.06);
  color:var(--ink);
}
.auth-card{backdrop-filter:blur(22px);padding:clamp(22px,5vw,34px)}
.brand-mark,.landing-logo{
  background-image:url('/assets/minigap-logo-192.png');
  background-size:cover;background-position:center;
  border:1px solid rgba(157,255,255,.42);
  box-shadow:0 0 24px rgba(30,216,220,.28),0 10px 28px rgba(51,35,180,.3);
}
.auth h1,.landing-brand strong,.landing-hero h1,.landing-section-title h2{color:#f3fbff}
.auth p,.landing-brand small,.landing-hero p,.landing-section-title>span{color:var(--muted)}
.tabs,.sidebar-tabs{background:rgba(8,16,25,.72);border-color:var(--line)}
.tabs button,.sidebar-tabs button{color:var(--muted)}
.tabs .active,.sidebar-tabs button.active{
  color:#eaffff;
  background:linear-gradient(135deg,rgba(22,211,216,.22),rgba(92,76,255,.4));
  border:1px solid rgba(46,224,228,.45);
  box-shadow:0 0 18px rgba(32,213,219,.12);
}
input,textarea,.composer input,.search-wrap,.group-search,.chat-search-bar,.public-channel-search{
  background:rgba(8,16,25,.78);
  border-color:var(--line);
  color:var(--ink);
}
input::placeholder,textarea::placeholder,.composer input::placeholder{color:#69818d}
input:focus,textarea:focus,.composer input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(31,215,220,.13),0 0 18px rgba(31,215,220,.10);
}
.primary{
  background:linear-gradient(135deg,#16cfd5,#5e4bff);
  border:1px solid rgba(169,255,255,.26);
  box-shadow:0 9px 24px rgba(45,67,213,.32),0 0 20px rgba(28,215,220,.14);
}
.secondary{background:rgba(11,22,32,.66);border-color:var(--line);color:var(--ink)}
.secondary:hover,.icon-button:hover,.mobile-close:hover,.emoji-button:hover:not(:disabled){background:rgba(25,205,211,.13);color:#aaffff}
aside,.chat,.chat-header,.composer{background:rgba(9,16,25,.88);border-color:var(--line)}
aside{border-right:1px solid var(--line);backdrop-filter:blur(18px)}
.profile,.chat-header{background:linear-gradient(180deg,rgba(19,31,43,.92),rgba(9,16,25,.82));border-color:var(--line)}
.profile .avatar,.avatar,.header-avatar,.message-avatar,.profile-avatar-large,.group-preview-avatar{
  background:linear-gradient(135deg,#17cbd3,#6d4cff);
  box-shadow:0 0 20px rgba(27,213,219,.16);
}
.user:hover{background:rgba(24,212,218,.08)}
.user.active,.assistant-entry{
  background:linear-gradient(135deg,rgba(22,190,201,.16),rgba(89,69,238,.28));
  border-color:rgba(45,216,220,.38);
  box-shadow:inset 0 0 22px rgba(40,218,222,.06);
}
.assistant-entry{color:var(--ink)}
.section-title,.user small,.profile small,.header-info small{color:var(--muted)}
.presence-dot.online{background:#35d878;box-shadow:0 0 0 2px rgba(53,216,120,.15),0 0 10px rgba(53,216,120,.45)}
.presence-dot{background:#647682;box-shadow:0 0 0 2px rgba(100,118,130,.14)}
.messages{background:
  radial-gradient(circle at 88% 0,rgba(25,189,204,.10),transparent 35%),
  radial-gradient(circle at 12% 100%,rgba(117,78,255,.08),transparent 34%),
  rgba(5,11,18,.72)}
.message{
  background:linear-gradient(145deg,rgba(25,39,52,.94),rgba(10,19,29,.95));
  border-color:rgba(105,166,184,.25);
  border-left-color:rgba(39,214,218,.65);
  box-shadow:0 10px 26px rgba(0,0,0,.22),0 0 20px rgba(24,207,215,.04);
}
.message.mine{
  background:linear-gradient(145deg,#104e5a,#19377d);
  border-color:rgba(49,226,226,.45);
  border-right-color:#28d8dc;
  box-shadow:0 10px 28px rgba(5,29,74,.4),0 0 20px rgba(24,215,220,.10);
}
.message-head,.message-footer{border-color:rgba(74,179,193,.20)}
.message-sender,.message-reaction:hover,.message-reaction.active{color:#62eff1}
.message-reaction{border-color:rgba(106,178,193,.28);color:var(--muted)}
.forwarded-label{background:rgba(70,207,215,.14);color:#68eef0}
.reply-quote{background:rgba(240,172,78,.15);color:#ffd28d}
.action-btn,.attach,.send,.record-audio{
  background:rgba(27,45,59,.92);border:1px solid rgba(104,183,198,.24);color:#b9eaf0;
}
.action-btn:hover:not(:disabled),.attach:hover:not(:disabled),.send:hover:not(:disabled){
  background:linear-gradient(135deg,#16cfd5,#5e4bff);color:#fff;box-shadow:0 0 18px rgba(35,216,220,.2)
}
.scroll-to-latest{background:linear-gradient(135deg,#16cfd5,#5544ee);border-color:#65f4f1;box-shadow:0 0 24px rgba(28,214,220,.28)}
.emoji-picker,.file-preview,.forward-source,.forward-list,.upload-confirm-panel{
  background:rgba(10,20,30,.96);border-color:var(--line);color:var(--ink)
}
.account-modal,.profile-modal,.crop-modal,.forward-modal,.file-modal,.video-modal,.call-modal{
  background:rgba(2,8,14,.78);
  backdrop-filter:blur(14px);
}
.close-btn{background:rgba(29,50,63,.92);border:1px solid var(--line);color:#b9eaf0}
.close-btn:hover{background:rgba(35,215,220,.16);color:#fff}
.toast{background:linear-gradient(135deg,rgba(15,50,57,.98),rgba(29,26,69,.98));border-color:rgba(52,222,222,.45);box-shadow:0 12px 35px #0008,0 0 20px rgba(33,216,220,.12)}
.toast.error{border-color:rgba(255,101,122,.65);background:linear-gradient(135deg,rgba(75,25,43,.98),rgba(37,20,48,.98))}
.landing-header{border-color:var(--line)}
.landing-login{border-color:rgba(38,216,220,.5);color:#8df4f1}
.landing-register{background:linear-gradient(135deg,#16cfd5,#5e4bff)}
.landing-hero small,.landing-section-title small{color:#5ce9eb}
.landing-hero h1 span{color:#6e9dff}
.landing-orbit{border-color:rgba(33,218,221,.4);background:radial-gradient(circle,rgba(36,215,219,.20),transparent 62%);box-shadow:inset 0 0 35px rgba(40,222,222,.14),0 0 60px rgba(40,222,222,.10)}
.landing-orbit:before,.landing-orbit:after{border-color:rgba(100,218,223,.35)}
.landing-orbit span{background:#132b3a;color:#9ff8f5}
.public-channel-card{border-color:rgba(63,215,220,.28);background:linear-gradient(145deg,rgba(18,42,52,.88),rgba(14,20,35,.94));box-shadow:0 14px 35px #0006,0 0 22px rgba(31,214,220,.07)}
.public-channel-card-body h3{color:#effcff}.public-channel-card-body small{color:#6eebed}
.public-channel-card-link{background:linear-gradient(135deg,#16cfd5,#5e4bff)}
.landing-public-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.landing-public-stats span{display:grid;gap:3px;padding:10px 12px;border:1px solid rgba(63,215,220,.2);border-radius:14px;background:rgba(12,27,39,.66);text-align:center}
.landing-public-stats strong{color:#63edef;font-size:1.05rem}.landing-public-stats small{color:var(--muted);font-size:.7rem}
@media(max-width:600px){.landing-public-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.site-footer,aside footer{color:#78919d}.site-footer a,aside footer a{color:#60e9eb}
.ephemeral-warning{background:rgba(116,69,16,.25);border-color:rgba(241,173,73,.5)}

/* Conversation cards */
.messages{gap:12px;padding:20px clamp(12px,3vw,30px)}
.message{
  position:relative;
  width:min(78%,520px);
  max-width:520px;
  min-width:180px;
  padding:13px 15px 10px;
  border-radius:20px 20px 20px 7px;
  isolation:isolate;
}
.message:after{
  content:"";position:absolute;bottom:0;left:-7px;width:18px;height:18px;
  background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%);z-index:-1;
}
.message.mine{
  border-radius:20px 20px 7px 20px;
}
.message.mine:after{
  left:auto;right:-7px;clip-path:polygon(0 0,100% 100%,0 100%);
}
.message-body{gap:9px}
.message-head{min-height:24px;padding-bottom:8px;border-bottom-color:rgba(112,205,210,.18)}
.message-sender{font-size:.78rem;font-weight:800;letter-spacing:.01em;color:#84f3f0}
.message.mine .message-sender{color:#e9ffff}
.message-flags{gap:5px;justify-content:flex-start}
.message-flag{
  max-width:180px;padding:4px 8px;border:1px solid rgba(112,211,215,.18);
  border-radius:8px;font-size:.62rem;background:rgba(18,41,50,.72)
}
.message.mine .message-flag{background:rgba(2,18,38,.30);border-color:rgba(182,255,255,.24)}
.message-body>.message-text{font-size:.94rem;line-height:1.95;white-space:pre-wrap}
.message-body>.message-text:empty{display:none}
.message time{font-size:.64rem;color:#8fb0b7}
.message-footer{gap:8px;padding-top:8px;border-top-color:rgba(112,205,210,.18)}
.message-meta{gap:7px}
.message-status{color:#7dabb5}
.message-status.read{color:#42e2e1}
.message-reaction{border-color:rgba(112,211,215,.24);background:rgba(11,31,40,.45);border-radius:999px;padding:3px 8px}
.reaction-display{padding:3px 7px;border:1px solid rgba(240,164,81,.32);border-radius:999px;background:rgba(240,164,81,.12)}
.image-attachment{width:min(300px,72vw);margin-top:2px}
.image-attachment img{max-height:270px;border:1px solid rgba(130,218,220,.24);border-radius:14px}
.audio-message-card{min-width:min(300px,72vw);padding:10px;border:1px solid rgba(54,217,220,.24);border-radius:14px;background:rgba(11,47,55,.62)}
.audio-message-icon{background:linear-gradient(135deg,#19d2d5,#5750ee);box-shadow:0 0 16px rgba(27,214,220,.2)}
.message.mine .audio-message-card{background:rgba(4,28,52,.48);border-color:rgba(178,255,255,.24)}
.waveform-player{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-width:0}
.waveform{min-width:0;height:38px;padding:4px 0;overflow:hidden}
.waveform-controls{display:flex;align-items:center;gap:5px;direction:ltr}
.waveform-play{width:32px;height:32px;border:1px solid rgba(102,245,244,.5);border-radius:50%;background:linear-gradient(135deg,#17beca,#5750ee);color:#fff;display:grid;place-items:center;font-size:12px;cursor:pointer;box-shadow:0 0 13px rgba(25,210,213,.2)}
.waveform-play:active,.waveform-play:focus,.waveform-play:focus-visible{background:linear-gradient(135deg,#17beca,#5750ee);color:#fff;border-color:rgba(102,245,244,.5);box-shadow:0 0 13px rgba(25,210,213,.2);outline:none;transform:none}
.waveform-play:disabled{opacity:.5;cursor:not-allowed}
.waveform-time{min-width:72px;color:#b9d6dc;font-size:.62rem;text-align:center;direction:ltr;white-space:nowrap}
.waveform-error .waveform{opacity:.45}
.message:not(.mine) .message-avatar{margin-inline-end:2px}
@media(max-width:700px){
  .messages{padding:12px 9px}
  .message{width:min(91%,520px);min-width:0;padding:11px 12px 9px}
  .message-body>.message-text{font-size:.9rem}
  .message-flag{max-width:145px}
  .waveform-time{min-width:60px;font-size:.58rem}
}

/* Aurora composer */
.composer{
  direction:ltr;
  margin:10px 14px max(10px,env(safe-area-inset-bottom));
  padding:8px;
  gap:7px;
  align-items:center;
  border:1px solid rgba(71,204,211,.35);
  border-radius:21px;
  background:linear-gradient(145deg,rgba(20,37,49,.94),rgba(8,17,27,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.30),0 0 22px rgba(32,216,220,.08);
}
.composer input{
  order:4;
  min-height:48px;
  height:48px;
  border:0;
  border-radius:15px;
  background:rgba(6,15,24,.62);
  color:#efffff;
  direction:rtl;
  text-align:right;
  padding:11px 15px;
  box-shadow:inset 0 0 0 1px rgba(107,172,185,.15);
}
.composer input:focus{
  border:0;
  box-shadow:inset 0 0 0 1px rgba(32,217,220,.7),0 0 16px rgba(32,217,220,.12);
}
.record-audio,.emoji-button,.attach,.send{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;
}
.record-audio{order:1;background:linear-gradient(145deg,#19d4d7,#0f8d9d);border:1px solid #71ffff;color:#efffff;box-shadow:0 0 18px rgba(25,215,218,.24)}
.record-audio:hover:not(:disabled){background:linear-gradient(145deg,#35e9e7,#17a9b0)}
.emoji-wrap{order:2}
.emoji-button{background:rgba(21,42,53,.74);border:1px solid rgba(112,182,193,.28);color:#d7f8f8}
.emoji-button:hover:not(:disabled){background:rgba(31,211,216,.16)}
.attach{order:3;background:rgba(21,42,53,.74);border:1px solid rgba(112,182,193,.28);color:#b9e8eb}
.attach:hover:not(:disabled){background:rgba(31,211,216,.16)}
.send{order:5;background:linear-gradient(145deg,#21dadd,#544cff);border:1px solid #8dffff;color:#fff;font-size:20px;box-shadow:0 0 22px rgba(31,216,220,.25),0 7px 18px rgba(46,44,173,.28)}
.send:hover:not(:disabled){background:linear-gradient(145deg,#45eded,#6e5dff);transform:translateY(-1px)}
.send:disabled,.attach:disabled,.record-audio:disabled,.emoji-button:disabled{opacity:.42}
@media(max-width:700px){
  .composer{
    margin:6px 7px 0;
    padding:6px;
    gap:5px;
    border-radius:18px;
  }
  .composer input{height:44px;min-height:44px;padding-inline:12px}
  .record-audio,.emoji-button,.attach,.send{width:40px;height:40px;flex-basis:40px}
  .send{font-size:18px}
}
@media(max-width:700px){
  html.keyboard-open .app{height:var(--app-height)!important;max-height:var(--app-height)!important}
  html.keyboard-open .composer{padding-bottom:0;min-height:58px}
  html.keyboard-open .messages{padding-bottom:4px}
}

.user.has-new-message{background:#f3efff;border:1px solid #e1d8ff}
.user.has-new-message strong{font-weight:800;color:var(--brand)}
.user.has-new-message small{color:#5b4bff}
.mobile-menu-button{display:none;border:0;background:transparent;color:var(--ink);font-size:22px;line-height:1;padding:7px;border-radius:12px;cursor:pointer}
.chat-menu-button{display:grid;place-items:center;background:linear-gradient(135deg,#5b4bff,#8c6bff);color:#fff;box-shadow:0 5px 14px rgba(91,75,255,.25)}
.home-button{display:grid;place-items:center;color:#8f83ff}
.chat-home-button{display:grid;width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(120,200,255,.12);border-radius:12px;background:rgba(255,255,255,.025);color:#9bbdff;font-size:0;transition:background .18s,border-color .18s,color .18s,transform .18s}
.chat-home-button::before{content:"";width:19px;height:19px;display:block;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}
.chat-home-button:hover{background:rgba(70,150,255,.1);border-color:rgba(70,200,255,.3);color:#68f1f4;transform:translateY(-1px)}
.discover-section{width:min(980px,100%);margin:auto;padding:clamp(22px,5vw,58px) clamp(14px,4vw,42px);direction:rtl}
.discover-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}
.discover-heading small{color:#8d80ff;font-weight:700}
.discover-heading h2{margin:5px 0 0;color:var(--ink);font-size:clamp(1.2rem,2.5vw,1.8rem)}
.discover-heading>span{color:var(--muted);font-size:.82rem}
.discover-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.discover-card{display:flex;align-items:center;gap:12px;width:100%;min-height:94px;padding:14px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));color:var(--ink);text-align:right;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.discover-card:hover{transform:translateY(-2px);border-color:#7464ff;background:linear-gradient(145deg,rgba(111,94,255,.2),rgba(255,255,255,.04))}
.discover-avatar{flex:0 0 52px;width:52px;height:52px;font-size:22px}
.discover-card-body{display:grid;gap:4px;min-width:0;flex:1}
.discover-card-body strong,.discover-card-body small,.discover-card-body>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discover-card-body strong{font-size:1rem}
.discover-card-body small{color:#9d92ff;font-size:.75rem}
.discover-card-body>span{color:var(--muted);font-size:.78rem}
.discover-open{flex:0 0 auto;padding:7px 10px;border-radius:10px;background:#5b4bff;color:#fff;font-size:.75rem;font-weight:700}
.group-unread-dot{display:inline-block;width:8px;height:8px;margin-inline-start:7px;border-radius:50%;background:#6d5cff;box-shadow:0 0 0 3px rgba(109,92,255,.16);vertical-align:middle}
.group-row.has-new-message{border-color:rgba(109,92,255,.42);background:linear-gradient(135deg,rgba(109,92,255,.16),rgba(109,92,255,.06))}
.group-row.has-new-message strong{color:#8f83ff}
.user>div{position:relative;min-width:0;}
.reply-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.reply-preview{display:flex;align-items:center;gap:9px;min-width:0;flex:1;border:0;border-inline-start:3px solid var(--brand);border-radius:10px;padding:7px 10px;background:rgba(91,75,255,.08);color:var(--ink);text-align:start;cursor:pointer}
.reply-preview:hover{background:rgba(91,75,255,.14)}
.reply-preview-icon{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:50%;background:var(--brand);color:#fff;font-size:14px}
.reply-preview-image{width:34px;height:34px;flex:0 0 34px;border-radius:7px;object-fit:cover;background:#e9e7f4}
.reply-preview-content{display:flex;flex-direction:column;gap:2px;min-width:0}
.reply-preview-content strong{font-size:.72rem;color:var(--brand)}
.reply-preview-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);max-width:min(70vw,520px)}
.reply-cancel{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;padding:7px}
.reply-cancel:hover{color:var(--error)}
.reply-quote{padding:5px 8px;margin-bottom:6px;border-inline-start:3px solid var(--accent);background:rgba(80,120,255,.09);font-size:12px;cursor:pointer;color:var(--muted)}
.forwarded-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.message-actions{display:flex;gap:3px;opacity:0;transition:opacity .15s}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}
.message-actions button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px}
.message-actions button:hover{color:var(--brand);background:rgba(91,75,255,.1);border-radius:7px}
.message.reply-target-highlight .message-body{animation:replyHighlight 1.4s ease-out}
.message.search-match{border-color:#7566ff;box-shadow:0 0 0 2px rgba(117,102,255,.14),0 9px 24px rgba(91,75,255,.16)}
.message.search-current{border-color:#22b8a7;box-shadow:0 0 0 3px rgba(34,184,167,.28),0 12px 28px rgba(34,184,167,.16);transform:translateY(-1px)}
.reply-quote{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes replyHighlight{0%,100%{box-shadow:0 0 0 0 transparent}20%{box-shadow:0 0 0 5px rgba(91,75,255,.28)}}
.forward-modal{
  position:fixed;inset:0;z-index:1300;background:rgba(17,18,28,.64);display:grid;place-items:center;
  padding:18px;backdrop-filter:blur(5px);animation:fadeIn .15s;
}
.forward-panel{
  width:min(100%,540px);max-height:min(760px,calc(100dvh - 28px));display:flex;flex-direction:column;
  overflow:hidden;background:var(--paper);border:1px solid rgba(113,217,225,.22);border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.36);
}
.forward-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 22px 14px;background:linear-gradient(135deg,rgba(33,214,216,.1),transparent 62%)}
.forward-kicker{display:block;color:var(--brand);font-size:.7rem;font-weight:800;letter-spacing:.04em;margin-bottom:3px}
.forward-header h3{margin:0;font-size:1.15rem}
.forward-source{margin:0 20px 14px;padding:12px 14px;border:1px solid rgba(88,208,220,.22);border-radius:15px;background:linear-gradient(135deg,rgba(35,213,216,.1),rgba(94,79,235,.1));min-width:0}.forward-source-label{display:block;margin-bottom:4px;color:var(--muted);font-size:.67rem;font-weight:700}.forward-source strong{display:block;color:var(--ink);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forward-search{
  display:flex;align-items:center;gap:8px;margin:0 20px 12px;padding:0 12px;
  border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--muted);
}
.forward-search input{flex:1;border:0!important;box-shadow:none!important;outline:0;padding:12px 0;min-height:42px;background:transparent}
.forward-list{overflow:auto;padding:2px 14px 12px;min-height:180px}
.forward-target{
  display:flex;align-items:center;gap:11px;padding:10px;border-radius:15px;cursor:pointer;
  transition:background .15s,transform .15s;margin:2px 0;
}
.forward-target:hover{background:#f5f4fc;transform:translateY(-1px)}
.forward-target.selected{background:#eeecff}
.forward-target input{width:18px;height:18px;accent-color:var(--brand);margin:0}
.forward-avatar{width:42px;height:42px;min-width:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#a975ff);color:#fff;font-weight:800;overflow:hidden}
.forward-avatar img{width:100%;height:100%;object-fit:cover}
.forward-target-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.forward-target-info strong{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forward-target-info small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forward-empty{display:grid;place-items:center;min-height:180px;color:var(--muted);font-size:.85rem}
.forward-footer{display:flex;align-items:center;gap:12px;padding:14px 20px 18px;border-top:1px solid rgba(113,217,225,.17);background:linear-gradient(180deg,transparent,rgba(17,34,49,.05))}
.forward-footer small{flex:1;color:var(--muted);font-size:.75rem}
.forward-footer .primary{min-width:110px;margin:0}
.video-modal{
  position:fixed;inset:0;z-index:1350;background:rgba(5,5,10,.82);display:grid;place-items:center;
  padding:18px;backdrop-filter:blur(6px);animation:fadeIn .15s;
}
.video-panel{
  width:min(100%,820px);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;
  overflow:hidden;background:#11111a;color:#fff;border:1px solid #3a3850;border-radius:24px;
  box-shadow:0 24px 90px rgba(0,0,0,.45);
}
.video-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
.video-modal-header h3{margin:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65vw}
.video-modal-header .close-btn{background:#292837;color:#fff}
.video-modal-kicker{display:block;color:#aaa5ff;font-size:.68rem;margin-bottom:3px}
.video-stage{display:grid;place-items:center;background:#050507;min-height:220px;max-height:calc(100dvh - 190px)}
.video-stage video{display:block;width:100%;max-height:calc(100dvh - 190px);background:#000}
.video-modal-footer{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#171621}
.video-modal-footer small{flex:1;color:#c8c6d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-download{min-width:125px;text-align:center;text-decoration:none;margin:0}
.video-attachment{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:rgba(91,75,255,.1);color:var(--brand);font-weight:700;text-decoration:none}
.video-attachment:hover{background:rgba(91,75,255,.18)}
.video-attachment{
  position:relative;display:block;width:min(260px,68vw);padding:0;overflow:hidden;
  border:1px solid rgba(91,75,255,.24);background:#080810;border-radius:14px;
}
.video-attachment-preview{
  display:block;width:100%;height:150px;object-fit:cover;background:#080810;
}
.video-attachment-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;display:grid;place-items:center;padding-right:2px;
  border-radius:50%;background:#5b4bffee;color:#fff;font-size:18px;
  box-shadow:0 6px 20px #08081088;pointer-events:none;
}
.video-attachment-name{
  display:block;padding:7px 10px;background:rgba(8,8,16,.85);color:#fff;
  font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.upload-caption-label{margin:0;padding:0 18px 12px;font-size:.78rem}
.upload-caption-label textarea{
  display:block;width:100%;min-height:76px;resize:vertical;margin-top:6px;
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;
  background:var(--bg);color:var(--ink);outline:0;font-size:.82rem;
}
.upload-caption-label textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #5b4bff20}
.file-modal{position:fixed;inset:0;z-index:1360;background:rgba(5,5,10,.78);display:grid;place-items:center;padding:18px;backdrop-filter:blur(6px);animation:fadeIn .15s}
.file-panel{width:min(100%,760px);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 90px rgba(0,0,0,.35)}
.file-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;gap:12px}
.file-modal-header h3{margin:0;font-size:1rem;max-width:65vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-modal-kicker{display:block;color:var(--brand);font-size:.68rem;margin-bottom:3px}
.file-preview{display:grid;place-items:center;min-height:220px;max-height:calc(100dvh - 270px);padding:14px;background:#101018;overflow:auto}
.file-preview-image,.file-preview-media{display:block;max-width:100%;max-height:calc(100dvh - 310px);object-fit:contain;border-radius:10px;background:#050507}
.file-preview-media{width:100%}
.file-preview-audio{width:min(100%,520px)}
.file-preview-document{width:100%;height:min(55dvh,520px);background:#fff}
.file-preview-empty{max-width:440px;text-align:center;color:#c8c6d8;font-size:.85rem;line-height:1.9}
.file-details{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--line)}
.file-detail-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#eeecff;font-size:21px}
.file-detail-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.file-detail-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-detail-text small{color:var(--muted);font-size:.72rem}
.file-modal-footer{display:flex;gap:10px;padding:13px 18px 17px;border-top:1px solid var(--line)}
.file-action{flex:1;min-width:0;text-align:center;text-decoration:none;margin:0}
.record-audio{
  width:42px;height:42px;flex:0 0 42px;border:0;border-radius:50%;
  background:#f0eff8;color:var(--brand);font-size:18px;transition:.2s;
}
.record-audio:hover:not(:disabled){background:#e3e0ff}
.record-audio:disabled{opacity:.5;cursor:not-allowed}
.record-audio.recording{background:#fee2e2;color:#dc2626;animation:recordPulse 1.2s ease-in-out infinite}
@keyframes recordPulse{50%{box-shadow:0 0 0 5px rgba(220,38,38,.14)}}
.inline-audio-recorder{
  display:flex;align-items:center;gap:7px;min-height:42px;margin:0 14px 6px;padding:5px 8px;
  direction:rtl;border:1px solid rgba(0,217,239,.32);border-radius:18px;
  background:linear-gradient(120deg,rgba(8,28,44,.96),rgba(30,17,67,.96));
  box-shadow:0 8px 24px rgba(0,0,0,.24),0 0 18px rgba(0,217,239,.08);
}
.inline-audio-recorder[hidden]{display:none}
.inline-audio-status{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.inline-audio-status strong{font-size:.72rem;color:#f4fbff}
.inline-audio-status time{direction:ltr;color:#70f5ef;font-variant-numeric:tabular-nums;font-size:.7rem}
.inline-audio-status small{color:#9eb5c2;font-size:.68rem;overflow:hidden;text-overflow:ellipsis}
.inline-audio-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#ff5370;box-shadow:0 0 0 4px rgba(255,83,112,.12);animation:recordPulse 1.2s ease-in-out infinite}
.inline-audio-preview{flex:1;min-width:120px;overflow:hidden}
.inline-audio-preview .waveform-player{gap:5px}
.inline-audio-preview .waveform{height:26px;padding:0}
.inline-audio-preview .waveform-controls{gap:3px}
.inline-audio-preview .waveform-play{width:28px;height:28px;font-size:10px}
.inline-audio-preview .waveform-time{min-width:58px;font-size:.56rem}
.inline-audio-actions{display:flex;align-items:center;gap:4px;flex:none}
.inline-audio-actions button{display:inline-grid;place-items:center;width:29px;min-width:29px;height:29px;padding:0;border:1px solid rgba(125,198,255,.3);border-radius:50%;color:#eaffff;background:rgba(10,30,49,.8);cursor:pointer;font:inherit}
.inline-audio-actions button span{font-size:13px;line-height:1}
.inline-audio-actions button:hover{border-color:#55eff0;box-shadow:0 0 12px rgba(0,217,239,.22)}
.audio-inline-send{background:linear-gradient(135deg,#08cbd4,#6049f4)!important}
.audio-inline-cancel{color:#ff9aaf!important}
.audio-inline-stop{color:#ffe2a9!important}
.audio-inline-send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none!important}
.live-waveform-player .waveform{opacity:.82}
.live-waveform-player .waveform-time{color:#70f5ef}
.inline-audio-recorder:not(.is-recording) .inline-audio-dot{background:#8a83ff;animation:none}
.inline-audio-recorder:not(.has-preview) .inline-audio-preview{display:none}
@media(max-width:700px){
  .inline-audio-recorder{margin:0 7px 5px;min-height:48px;padding:6px 8px;gap:6px;border-radius:15px}
  .inline-audio-status small{display:none}
  .inline-audio-status strong{font-size:.7rem}
  .inline-audio-preview{min-width:110px}
  .inline-audio-preview .waveform-time{min-width:48px;font-size:.52rem}
  .inline-audio-actions{gap:4px}
  .inline-audio-actions button{min-width:30px;width:30px;height:30px}
}

.chat-loading-state{
  min-height:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  color:#8faabd;font-size:.78rem;direction:rtl;
}
.chat-loading-spinner{
  width:18px;height:18px;border:2px solid rgba(112,220,230,.2);
  border-top-color:#22d8d7;border-radius:50%;animation:chatLoadingSpin .7s linear infinite;
}
@keyframes chatLoadingSpin{to{transform:rotate(360deg)}}

/* Toast notifications and polished dark surfaces */
.toast{
  position:fixed;left:24px;bottom:24px;z-index:3000;
  display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px));
  padding:11px 12px;border:1px solid #7165e8;border-radius:14px;
  background:linear-gradient(135deg,#282052,#19162e);color:#f8f7ff;
  box-shadow:0 16px 42px rgba(14,10,36,.34);font-size:.82rem;
  animation:toastIn .2s ease both;
}
.toast[hidden]{display:none}
.toast.success{border-color:#32b987;background:linear-gradient(135deg,#124d42,#12352f)}
.toast.error{border-color:#c76575;background:linear-gradient(135deg,#4b202f,#261522)}
.toast.success .toast-icon{background:#16a878}
.toast.loading{border-color:#5d8fe8;background:linear-gradient(135deg,#202f55,#182039)}
.toast.loading .toast-icon{background:#4d8de5;animation:toastSpin 1s linear infinite}
.toast-icon{
  width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;
  border-radius:50%;background:#6f61ee;color:#fff;font-weight:900;
}
.toast.error .toast-icon{background:#d45a70}
.toast-close{
  border:0;background:transparent;color:#cbc6e8;cursor:pointer;
  padding:3px 4px;font-size:.8rem;line-height:1;margin-inline-start:4px;
}
.toast-close:hover{color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastSpin{to{transform:rotate(360deg)}}

.message:not(.mine)::before,.message.mine::before{display:none}
.message:not(.mine){border-color:#e2dfed;border-left-color:#c9c3e8}
.message-head{border-bottom-color:rgba(91,75,255,.14)}
.message-footer{border-top-color:rgba(91,75,255,.13)}

@media(prefers-color-scheme:dark){
  .message{border-color:#302d45;border-left-color:#403a5b}
  .message:not(.mine){
    background:linear-gradient(145deg,#252438,#1d1b2b);
    box-shadow:0 7px 22px rgba(0,0,0,.28)
  }
  .message-head{border-bottom-color:#393550}
  .message-footer{border-top-color:#393550}
  .message:not(.mine) .forwarded-label{background:#332c62;color:#cfc9ff}
  .message:not(.mine) .reply-quote{background:#513d22;color:#ffd98c}
  .message-reaction{border-color:#413d59}
  .message-reaction:hover,.message-reaction.active{background:#302b52;color:#cfc9ff}
  .file-panel{
    background:#181724;color:var(--ink);border-color:#302d45;
    box-shadow:0 24px 90px rgba(0,0,0,.55)
  }
  .file-modal-header,.file-details,.file-modal-footer{border-color:#302d45}
  .file-detail-icon{background:#2a2742}
  .toast{box-shadow:0 16px 42px rgba(0,0,0,.5)}
  .forward-panel{
    background:#181724;color:var(--ink);border-color:#302d45;
    box-shadow:0 24px 80px rgba(0,0,0,.58)
  }
  .forward-source{
    background:linear-gradient(135deg,#29234f,#211c3b);
    color:#d5d0f1;border-color:#5e51d4
  }
  .forward-search{
    background:#222033;color:#c9c4df;border-color:#393650
  }
  .forward-search input{background:transparent;color:var(--ink)}
  .forward-search input::placeholder{color:#85819e}
  .forward-target:hover{background:#252141}
  .forward-target.selected{background:#332c62}
  .forward-footer{background:#14131f;border-top-color:#302d45}
  .forward-footer small{color:#aaa7c0}
  .upload-caption-label textarea{background:#222033;border-color:#393650;color:var(--ink)}
  .video-attachment-name{background:rgba(8,8,16,.92)}
  .group-search{background:#222033;border-color:#393650}
  .group-search input{background:transparent;color:var(--ink)}
  .group-search input::placeholder{color:#85819e}
  .group-invite-result{background:#252141;border-color:#393650;color:var(--ink)}
  .group-member-row{border-color:#393650;background:#1b1a29}
  .group-remove{background:#542631;color:#ffc2c9}
  .danger-outline{border-color:#a45b68;color:#ffabb6}
}

@media(max-width:700px){
  .sidebar-tabs{width:100%}
  .toast{
    right:auto;left:14px;bottom:max(16px,env(safe-area-inset-bottom));
    max-width:none;justify-content:flex-start
  }
}

/* Responsive login and registration layout */
.auth{
  min-height:100dvh;height:100dvh;
  padding:clamp(10px,3vw,24px);
}
.auth-card{
  width:min(100%,410px);
  max-height:calc(100dvh - 20px);
  overflow-y:auto;
  padding:clamp(18px,5vw,34px);
}
@media(max-width:700px){
  .auth-card{border-radius:18px}
  .auth h1{margin-top:13px;font-size:clamp(23px,7vw,27px)}
  .auth p{margin-bottom:16px;font-size:.82rem}
  .tabs{margin-bottom:13px}
  label{margin-top:10px;font-size:.8rem}
  input{min-height:44px;padding:9px 11px;margin-top:5px}
  .primary{min-height:45px;margin-top:15px;padding:9px 11px}
}
@media(max-height:700px){
  .auth{place-items:start center}
  .auth-card{margin:10px 0}
  .brand-mark{width:44px;height:44px;font-size:22px}
  .auth h1{margin-top:9px;margin-bottom:2px}
  .auth p{margin-bottom:10px}
  .tabs{padding:3px;margin-bottom:8px}
  .tabs button{min-height:38px;padding:6px}
  label{margin-top:7px}
  input{min-height:40px}
  .primary{min-height:41px;margin-top:10px}
}

/* Premium public landing */
.public-landing{position:relative;isolation:isolate;overflow:hidden;padding-top:18px;background:radial-gradient(circle at 8% 8%,rgba(120,103,255,.18),transparent 28%),radial-gradient(circle at 92% 18%,rgba(49,196,180,.13),transparent 26%),linear-gradient(145deg,#f9f8ff 0%,#f3f2fb 52%,#eef8f7 100%)}
.public-landing:before{content:"";position:absolute;z-index:-1;width:420px;height:420px;top:190px;left:-220px;border:1px solid rgba(91,75,255,.12);border-radius:50%;box-shadow:0 0 0 32px rgba(91,75,255,.035),0 0 0 64px rgba(91,75,255,.025)}
.public-landing>*{width:min(1180px,100%);margin-inline:auto}
.landing-header{min-height:68px;padding:8px 0 16px;border-bottom:1px solid rgba(91,75,255,.13)}
.landing-brand{gap:12px}.landing-logo{width:46px;height:46px;border-radius:15px;background-image:url('/assets/minigap-logo-192.png');background-size:cover;background-position:center;box-shadow:0 12px 26px rgba(25,214,220,.2)}
.landing-brand strong{font-size:1.05rem;letter-spacing:-.02em}.landing-actions button{transition:transform .2s,box-shadow .2s,background .2s}.landing-actions button:hover{transform:translateY(-2px)}
.landing-login{background:rgba(255,255,255,.55)}.landing-register{padding-inline:18px!important}
.landing-hero{position:relative;min-height:330px;margin-top:20px;padding:clamp(34px,6vw,70px) clamp(20px,5vw,66px);border:1px solid rgba(91,75,255,.14);border-radius:30px;background:linear-gradient(105deg,rgba(255,255,255,.76),rgba(255,255,255,.38)),radial-gradient(circle at 85% 20%,rgba(115,96,255,.22),transparent 35%);box-shadow:0 22px 60px rgba(63,51,150,.1)}
.landing-hero:after{content:"";position:absolute;inset:auto 8% -75px auto;width:280px;height:150px;border-radius:50%;background:rgba(88,73,244,.13);filter:blur(25px);pointer-events:none}
.landing-hero>div:first-child{position:relative;z-index:2}.landing-hero h1{max-width:650px;margin:13px 0 17px;font-size:clamp(2.35rem,6vw,4.7rem);line-height:1.12}
.landing-hero p{max-width:520px;line-height:2.15;font-size:1rem}.landing-orbit{z-index:1;width:220px;height:220px;border-color:rgba(104,87,255,.27);background:radial-gradient(circle,rgba(116,98,255,.2),rgba(255,255,255,0) 65%);box-shadow:inset 0 0 45px rgba(111,94,255,.13),0 20px 60px rgba(91,75,255,.12)}
.landing-orbit span{background:#fff;color:#6655ed;border:1px solid rgba(91,75,255,.1)}.landing-orbit span:nth-child(3){background:linear-gradient(145deg,#5b4bff,#9476ff);box-shadow:0 10px 25px rgba(91,75,255,.35)}
.landing-channels{padding:42px 0 34px}.landing-section-title{margin-bottom:20px}.landing-section-title h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.04em}.landing-section-title>span{padding:7px 11px;border:1px solid rgba(91,75,255,.12);border-radius:999px;background:rgba(255,255,255,.45)}
.public-channel-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px}.public-channel-card{min-height:170px;padding:20px;border:1px solid rgba(91,75,255,.13);border-radius:24px;background:rgba(255,255,255,.66);box-shadow:0 14px 32px rgba(55,44,137,.08);transition:transform .22s,box-shadow .22s,border-color .22s}
.public-channel-card:hover{transform:translateY(-5px);border-color:rgba(91,75,255,.34);box-shadow:0 20px 40px rgba(55,44,137,.14)}.public-channel-card:after{background:rgba(110,94,255,.08)}
.public-channel-avatar{width:66px;height:66px;min-width:66px;border:1px solid rgba(91,75,255,.13);box-shadow:0 9px 20px rgba(91,75,255,.13)}

/* Stable channel/group profile media: never stretch or inherit a flexible
   avatar size from surrounding profile layouts. */
.profile-card .profile-avatar-large,
#profileModal .profile-avatar-large{
  width:104px!important;
  height:104px!important;
  min-width:104px!important;
  min-height:104px!important;
  max-width:104px!important;
  max-height:104px!important;
  flex:0 0 104px!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
.profile-card .profile-avatar-large > img,
#profileModal .profile-avatar-large > img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}
.public-channel-card-body h3{font-size:1.05rem}.public-channel-card-body small{color:#6d5be7}.public-channel-card-body p{color:#77748d}.public-channel-card-link{background:linear-gradient(135deg,#5b4bff,#806dff);transition:box-shadow .2s,transform .2s}.public-channel-card-link:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(91,75,255,.28)}
body.landing-mode .auth{background:transparent}body.landing-mode .auth-card{box-shadow:0 18px 45px rgba(63,51,150,.09)}
@media(prefers-color-scheme:dark){
  .public-landing{background:radial-gradient(circle at 8% 8%,rgba(120,103,255,.2),transparent 28%),radial-gradient(circle at 92% 18%,rgba(49,196,180,.12),transparent 26%),linear-gradient(145deg,#0f0e1b,#121126 56%,#0d1b1b)}
  .landing-header{border-color:rgba(145,130,255,.18)}.landing-hero{background:linear-gradient(105deg,rgba(31,28,55,.9),rgba(24,23,46,.72)),radial-gradient(circle at 85% 20%,rgba(115,96,255,.22),transparent 35%);border-color:rgba(145,130,255,.2)}
  .landing-login{background:rgba(30,27,54,.7)}.landing-section-title>span{background:rgba(30,27,54,.48)}.public-channel-card{background:rgba(27,25,47,.82);border-color:rgba(145,130,255,.18)}.public-channel-card-body p{color:#aaa7c0}
  body.landing-mode .auth-card{box-shadow:0 18px 55px rgba(0,0,0,.25)}
}
@media(max-width:700px){
  .public-landing{padding-top:10px}.landing-hero{min-height:270px;margin-top:12px;padding:30px 18px;border-radius:23px}.landing-hero h1{font-size:clamp(2rem,10vw,3rem)}.landing-hero p{font-size:.82rem;line-height:1.95}.landing-orbit{width:116px;height:116px}
  .landing-orbit:before{inset:14px}.landing-orbit:after{inset:32px}.landing-orbit span{width:23px;height:23px}.landing-orbit span:nth-child(1){top:11px;right:13px}.landing-orbit span:nth-child(2){bottom:17px;left:8px}.landing-orbit span:nth-child(3){top:46px;left:46px}
  .landing-channels{padding-top:30px}.landing-section-title>span{display:inline-block;margin-top:8px}.public-channel-card{min-height:148px;padding:16px}
}

/* Premium messenger surface: final chat UI layer. */
:root{
  --ui-bg:#030810;
  --ui-bg-soft:#07111d;
  --ui-panel:rgba(7,17,29,.9);
  --ui-panel-strong:rgba(9,21,36,.96);
  --ui-card:#102a42;
  --ui-card-2:#0b1e32;
  --ui-own-1:#172653;
  --ui-own-2:#263b7a;
  --ui-cyan:#00d9ef;
  --ui-blue:#438bff;
  --ui-violet:#a855ff;
  --ui-text:#ecf7ff;
  --ui-muted:#8ea5b8;
  --ui-border:rgba(100,177,231,.2);
}
.app{
  background:
    radial-gradient(900px 560px at 72% 12%,rgba(37,75,173,.11),transparent 68%),
    linear-gradient(135deg,var(--ui-bg),var(--ui-bg-soft));
}
aside,.chat{
  background:
    radial-gradient(500px 400px at 10% 0,rgba(0,217,239,.05),transparent 70%),
    rgba(3,9,17,.92);
}
aside{
  border-inline-start:1px solid rgba(83,157,208,.2);
  border-inline-end:0;
  box-shadow:-18px 0 55px rgba(0,0,0,.2);
}
.profile,.chat-header{
  height:82px;min-height:82px;max-height:82px;
  padding:14px 22px;
  background:linear-gradient(180deg,rgba(8,19,32,.96),rgba(4,11,19,.88));
  border-bottom:1px solid rgba(89,165,220,.2);
  backdrop-filter:blur(14px);
}
.chat-header{gap:13px}
.header-avatar,.profile .avatar{
  border:1px solid rgba(95,210,255,.38);
  box-shadow:0 0 0 3px rgba(0,217,239,.04),0 0 18px rgba(0,217,239,.15);
}
.header-info strong,.profile strong{color:var(--ui-text);font-weight:750}
.header-info small,.profile small{color:var(--ui-muted)}
.chat-actions{gap:9px}
.action-btn,.icon-button,.mobile-close{
  width:44px;height:44px;border:1px solid rgba(110,182,239,.2);
  border-radius:14px;background:rgba(255,255,255,.025);color:#b8cde0;
  transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.action-btn:hover:not(:disabled),.icon-button:hover,.mobile-close:hover{
  background:rgba(47,143,230,.12);border-color:rgba(0,217,239,.42);
  color:#7ffaff;transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.18);
}
.chat .action-btn:disabled{opacity:.35}
.sidebar-tabs{
  padding:14px 18px 12px;background:rgba(3,10,18,.55);
  border-bottom:1px solid rgba(89,165,220,.14);
}
.sidebar-tabs button{
  min-height:45px;border:1px solid rgba(110,182,239,.16);border-radius:15px;
  color:var(--ui-muted);background:rgba(255,255,255,.018);font-size:.78rem;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.sidebar-tabs button.active{
  color:#effcff;border-color:rgba(0,217,239,.42);
  background:linear-gradient(135deg,rgba(18,91,137,.5),rgba(91,38,159,.45));
  box-shadow:0 0 22px rgba(0,217,239,.08);
}
.search-wrap,.group-search{
  margin:12px 16px 8px;min-height:50px;padding:5px 14px;
  border:1px solid rgba(110,182,239,.18);border-radius:15px;
  background:rgba(7,19,32,.8);box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.search-wrap input,.group-search input{color:var(--ui-text)}
.search-wrap:focus-within,.group-search:focus-within{
  border-color:rgba(0,217,239,.48);box-shadow:0 0 0 3px rgba(0,217,239,.07);
}
.section-title{padding:16px 20px 9px;color:#7895a9;letter-spacing:.01em}
.assistant-entry{
  width:calc(100% - 32px);margin:4px 16px 12px;padding:13px 14px;
  min-height:78px;border:1px solid rgba(168,85,255,.25);border-radius:18px;
  background:linear-gradient(135deg,rgba(29,52,103,.48),rgba(74,29,112,.42));
  box-shadow:0 12px 28px rgba(31,14,80,.2),inset 0 1px rgba(255,255,255,.05);
}
.assistant-entry:hover{
  border-color:rgba(0,217,239,.45);background:linear-gradient(135deg,rgba(21,79,112,.52),rgba(83,35,139,.5));
}
.assistant-entry .avatar{
  width:48px;height:48px;border:1px solid rgba(0,217,239,.45);
  box-shadow:0 0 18px rgba(0,217,239,.16);
}
.assistant-entry strong{color:#f1fbff;font-size:.87rem}
.assistant-entry small{color:#9eb4c7}
.user{
  min-height:76px;margin:3px 12px;padding:12px 13px;gap:13px;
  border:1px solid transparent;border-radius:18px;background:rgba(255,255,255,.012);
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.user:hover{
  background:rgba(37,120,175,.1);border-color:rgba(83,180,223,.18);transform:translateX(-2px);
}
.user.active{
  color:var(--ui-text);background:linear-gradient(135deg,rgba(20,60,105,.74),rgba(48,25,104,.62));
  border-color:rgba(84,148,255,.48);box-shadow:0 9px 24px rgba(0,0,0,.22),inset 0 0 25px rgba(49,150,255,.06);
}
.user .avatar{
  width:46px;height:46px;min-width:46px;min-height:46px;flex-basis:46px;
  border:1px solid rgba(108,201,255,.3);box-shadow:0 5px 16px rgba(0,0,0,.25);
}
.user strong{color:#edf8ff;font-size:.86rem}
.user small{color:#7f99ad}
.user.active strong{color:#6cecf3}
.presence-dot{width:8px;height:8px;border:1px solid #07111d}
.presence-dot.online{background:#21d07a;box-shadow:0 0 0 2px rgba(33,208,122,.14),0 0 9px rgba(33,208,122,.36)}
.groups-list{max-height:260px}
.messages{
  padding:25px clamp(20px,3vw,48px) 28px;gap:18px;
  background:
    radial-gradient(650px 480px at 80% 8%,rgba(40,89,215,.1),transparent 68%),
    radial-gradient(540px 400px at 10% 90%,rgba(122,52,211,.07),transparent 70%),
    #030a13;
}
.message{
  max-width:min(72%,620px);padding:15px 17px 12px;
  border:1px solid rgba(70,190,230,.2);border-radius:21px 21px 21px 8px;
  background:linear-gradient(145deg,rgba(24,55,82,.96),rgba(10,28,49,.96));
  box-shadow:0 12px 35px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
  animation:messageIn .24s ease-out both;
}
.message:hover{
  border-color:rgba(70,190,230,.38);box-shadow:0 15px 38px rgba(0,0,0,.3);
}
.message.mine{
  border-radius:21px 21px 8px 21px;
  background:linear-gradient(135deg,rgba(27,38,88,.98),rgba(34,42,105,.96));
  border-color:rgba(125,105,255,.32);
  box-shadow:0 12px 35px rgba(22,17,91,.32),0 0 20px rgba(117,85,255,.06);
}
.message.mine:hover{border-color:rgba(149,129,255,.55)}
.message::after{
  width:17px;height:17px;bottom:-1px;left:-8px;background:inherit;
}
.message.mine::after{right:-8px}
.message-body{gap:10px}
.message-head{min-height:27px;padding-bottom:9px;border-bottom:1px solid rgba(112,205,210,.16)}
.message-sender{font-size:.84rem;font-weight:800;color:#63eaf0}
.message.mine .message-sender{color:#b79dff}
.message-flags{gap:6px}
.message-flag{
  max-width:220px;padding:5px 9px;border:1px solid rgba(112,211,215,.18);
  border-radius:10px;font-size:.64rem;background:rgba(8,24,39,.55);
}
.reply-quote{border-inline-start:3px solid #a855ff;background:rgba(168,85,255,.1);color:#d0c0ff}
.forwarded-label{border-inline-start:3px solid #00d9ef;background:rgba(0,217,239,.08);color:#9beef2}
.message.mine .message-flag{background:rgba(7,12,37,.3)}
.message-body>.message-text{
  color:#e9f7ff;font-size:.96rem;line-height:1.9;white-space:pre-wrap;
}
.message-footer{position:relative;gap:9px;padding-top:10px;border-top:1px solid rgba(112,205,210,.14)}
.message-meta{gap:8px}
.message time{font-size:.67rem;color:#8eaabe;opacity:.75}
.message-status{color:#789eaf}
.message-status.read{color:#00d9ef}
.message-avatar{
  width:40px;height:40px;min-width:40px;min-height:40px;flex-basis:40px;
  margin-bottom:5px;border:1px solid rgba(100,200,255,.28);
  box-shadow:0 0 15px rgba(50,180,255,.08);
}
.message-actions{
  position:absolute;z-index:4;right:12px;bottom:-21px;gap:4px;padding:4px;
  opacity:0;transform:translateY(5px);pointer-events:none;
  border:1px solid rgba(100,150,255,.2);border-radius:14px;
  background:rgba(8,15,30,.92);backdrop-filter:blur(15px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:opacity .2s,transform .2s;
}
.message:hover .message-actions,.message:focus-within .message-actions{
  opacity:1;transform:none;pointer-events:auto;
}
.message-actions button,.delete-message{
  width:32px;height:32px;min-width:32px;min-height:32px;margin:0;padding:0;
  border:0;border-radius:10px;background:transparent;color:#b8c9df;
  display:grid;place-items:center;font-size:0;transition:background .18s,color .18s,transform .18s;
}
.message-actions button:hover{background:rgba(0,217,239,.12);color:#70f6f5;transform:scale(1.05)}
.message-actions .reply-action:hover{color:#c39bff;background:rgba(168,85,255,.14)}
.message-actions .forward-action:hover{color:#65ddff}
.delete-message{position:absolute;right:12px;bottom:8px;color:#8298aa}
.delete-message:hover{background:rgba(239,68,68,.12);color:#ff8e9e;transform:scale(1.05)}
.message-reactions{gap:5px;margin-inline-start:0}
.message-reaction,.reaction-display{
  border:1px solid rgba(255,255,255,.12);border-radius:999px;
  background:rgba(255,255,255,.045);padding:4px 10px;color:#c7d8e5;
  transition:transform .18s,background .18s,border-color .18s;
}
.message-reaction:hover,.message-reaction.active{transform:scale(1.05);background:rgba(0,217,239,.1);border-color:rgba(0,217,239,.42);color:#7ffaff}
.image-attachment{
  width:min(360px,72vw);border:1px solid rgba(100,200,255,.24);border-radius:16px;
  overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s;
}
.image-attachment:hover{transform:scale(1.015);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.image-attachment img{max-height:340px;border:0;border-radius:0;object-fit:contain;background:#050b12}
.audio-message-card{
  min-width:min(390px,72vw);padding:13px;border:1px solid rgba(0,217,239,.24);
  border-radius:18px;background:linear-gradient(145deg,rgba(16,54,76,.92),rgba(10,27,49,.94));
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.audio-message-icon{
  width:44px;height:44px;flex-basis:44px;border-radius:14px;
  background:linear-gradient(135deg,#00d9ef,#6550ff);box-shadow:0 0 18px rgba(0,217,239,.2);
}
.audio-message-details strong{color:#eafcff;font-size:.82rem}
.audio-message-details small{color:#91b1c2}
.audio-message-player{height:32px;accent-color:#00d9ef}
.video-attachment{
  width:min(360px,72vw);border:1px solid rgba(100,200,255,.24);border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.video-attachment-play{background:linear-gradient(135deg,#00d9ef,#6c45ff);box-shadow:0 0 22px rgba(0,217,239,.28)}
.composer{
  margin:12px 24px max(14px,env(safe-area-inset-bottom));padding:9px;
  min-height:66px;gap:9px;border:1px solid rgba(70,190,255,.22);
  border-radius:24px;background:rgba(7,18,31,.9);backdrop-filter:blur(20px);
  box-shadow:0 10px 40px rgba(0,0,0,.3),0 0 20px rgba(0,217,239,.05);
}
.composer input{
  min-height:48px;border:1px solid rgba(100,150,255,.12);border-radius:17px;
  background:rgba(4,12,23,.52);color:#edfaff;padding-inline:16px;
}
.composer input:focus{border-color:rgba(0,217,239,.55);box-shadow:0 0 0 3px rgba(0,217,239,.08)}
.record-audio,.emoji-button,.attach,.send{
  width:48px;height:48px;flex-basis:48px;border-radius:50%;
  border:1px solid rgba(100,150,255,.2);transition:transform .2s,background .2s,box-shadow .2s;
}
.record-audio{background:linear-gradient(145deg,#00cfd9,#0d718e);color:#eaffff;box-shadow:0 0 18px rgba(0,217,239,.18)}
.emoji-button,.attach{background:rgba(255,255,255,.03);color:#b4c9dc}
.emoji-button:hover:not(:disabled),.attach:hover:not(:disabled){background:rgba(0,217,239,.12);color:#75f9f5;border-color:rgba(0,217,239,.38);transform:scale(1.04)}
.send{background:linear-gradient(135deg,#00d9ef,#438bff 48%,#a855ff);border-color:rgba(127,244,255,.55);box-shadow:0 0 24px rgba(0,217,239,.24),0 8px 20px rgba(73,45,180,.25)}
.send:hover:not(:disabled){transform:scale(1.04);box-shadow:0 0 30px rgba(0,217,239,.34),0 10px 24px rgba(73,45,180,.3)}
@keyframes messageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
  .profile,.chat-header{height:70px;min-height:70px;max-height:70px;padding:9px 10px}
  .messages{padding:16px 10px 22px;gap:14px}
  .message{width:min(91%,560px);max-width:91%;padding:12px 13px 10px}
  .message-body>.message-text{font-size:.91rem}
  .message-avatar{width:34px;height:34px;min-width:34px;min-height:34px;flex-basis:34px}
  .message-actions{position:static;opacity:1;transform:none;pointer-events:auto;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
  .message-actions button,.delete-message{width:30px;height:30px;min-width:30px;min-height:30px}
  .delete-message{position:static}
  .composer{margin:7px 8px max(7px,env(safe-area-inset-bottom));min-height:58px;padding:6px;border-radius:19px;gap:5px}
  .composer input{min-height:44px;border-radius:15px;padding-inline:11px}
  .record-audio,.emoji-button,.attach,.send{width:40px;height:40px;flex-basis:40px}
  .audio-message-card,.image-attachment,.video-attachment{width:min(100%,330px);min-width:0}
}

/* Compact conversation list and avatar-outside message composition. */
#users{
  flex:1 1 auto;
  min-height:180px;
  padding:2px 8px 5px;
}
#users .user{
  min-height:64px;
  margin:2px 4px;
  padding:8px 10px;
  border-radius:14px;
  gap:10px;
}
#users .user .avatar{
  width:40px;height:40px;min-width:40px;min-height:40px;flex-basis:40px;
}
#users .user strong{font-size:.82rem;margin-bottom:0}
#users .user small{font-size:.69rem;line-height:1.35}
#users .user .view-profile,#users .user .mute-chat{width:28px;height:28px;font-size:12px}
.assistant-entry{
  min-height:64px;
  margin-bottom:5px;
  padding:9px 11px;
  border-radius:15px;
}
.assistant-entry .avatar{width:40px;height:40px;min-width:40px}
.section-title{padding-top:10px;padding-bottom:6px}
.groups-list{max-height:190px}
.call-logs{max-height:120px;overflow:auto}
.sidebar-search-toggle{
  align-self:flex-end;width:38px;height:38px;margin:10px 16px 2px;
  border:1px solid rgba(110,182,239,.2);border-radius:12px;
  background:rgba(255,255,255,.025);color:#b8cde0;font-size:21px;
  display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.sidebar-search-toggle:hover{background:rgba(0,217,239,.12);border-color:rgba(0,217,239,.42);color:#7ffaff;transform:translateY(-1px)}
.search-wrap{max-height:58px;overflow:hidden;transition:max-height .22s,opacity .18s,margin .22s,padding .22s}
#sidebar.search-collapsed .search-wrap{
  max-height:0;min-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;
  opacity:0;pointer-events:none;border-width:0;
}
#sidebar.search-collapsed .sidebar-search-toggle{margin-bottom:5px}
.section-title:not(.group-section-title){font-size:0;min-height:8px;padding-top:3px;padding-bottom:3px}
.section-title:not(.group-section-title) span{display:none}
.group-section-title{font-size:0;min-height:8px;padding-top:4px;padding-bottom:2px}
.group-section-title>span{display:none}
.group-section-title .section-add{font-size:19px}
.section-title:not(.group-section-title),
.group-section-title{
  min-height:0;
  margin:0;
  padding:0;
  line-height:0;
}
.group-section-title .section-add{
  line-height:1;
  margin:0;
}

.messages{
  padding-inline:64px;
}
.message{
  overflow:visible;
}
.message-sender{
  display:none;
}
.message-head{
  min-height:12px;
  padding-bottom:0;
  border-bottom:0;
}
.message:not(.mine) .message-avatar,
.message.mine .message-avatar{
  display:grid;
  position:absolute;
  top:14px;
  z-index:2;
  width:42px;height:42px;min-width:42px;min-height:42px;flex-basis:42px;
  margin:0;
}
.message:not(.mine) .message-avatar{left:-53px}
.message.mine .message-avatar{right:-53px}
.message .message-body{width:100%}
.message .message-head:empty{display:none}
.message-actions{bottom:-19px}

/* The home shortcut is part of the desktop and mobile header design. */
.chat-home-button{
  display:grid!important;
}
@media(max-width:700px){
  #users{
    min-height:140px;
    padding-inline:4px;
  }
  #users .user{
    min-height:60px;
    margin:1px 2px;
    padding:7px 8px;
  }
  .groups-list{max-height:none}
  .messages{padding-inline:52px}
  .message:not(.mine) .message-avatar{left:-44px}
  .message.mine .message-avatar{right:-44px}
  .message:not(.mine) .message-avatar,
  .message.mine .message-avatar{
    top:11px;width:34px;height:34px;min-width:34px;min-height:34px;flex-basis:34px;
  }
}
.ui-icon{width:1.25em;height:1.25em;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.attach,.send,.emoji-button,.record-audio{font-size:0}
.attach::before,.send::before,.emoji-button::before,.record-audio::before{display:block;font-size:22px;line-height:1}
.attach::before{content:"⌇";transform:rotate(-42deg);font-weight:700}
.emoji-button::before{content:"☺";font-family:Arial,sans-serif;font-size:25px}
.record-audio::before{content:"◉";font-size:20px}
.send::before{content:"➤";font-size:24px}
.message-actions button.message-action{width:30px;height:30px;padding:0;border:1px solid rgba(112,182,193,.22);border-radius:10px;background:rgba(17,35,45,.7);display:grid;place-items:center;font-size:0;transition:transform .18s,background .18s,color .18s}
.message-actions button.message-action::before{display:block;font-size:17px;line-height:1}
.message-actions button.reply-action::before{content:"↩"}
.message-actions button.forward-action::before{content:"↗"}
.message-actions button.message-action:hover{transform:translateY(-2px);background:rgba(25,205,211,.16);color:#75ffff;border-color:rgba(112,255,255,.46)}
.chat{
  --chat-bg:#050b12;
  --chat-surface:#0b1723;
  --chat-incoming:#102337;
  --chat-incoming-2:#17324a;
  --chat-outgoing:#16234a;
  --chat-outgoing-2:#263b7a;
  --chat-accent:#22d3d8;
  --chat-accent-2:#7568ff;
  --chat-text:#e9f7fb;
  --chat-muted:#8da8b3;
}
.messages{background:radial-gradient(circle at 84% 8%,rgba(74,94,255,.07),transparent 28%),linear-gradient(145deg,var(--chat-bg),#08131d);padding:18px clamp(12px,2.2vw,28px);gap:10px}
.message{
  position:relative;isolation:isolate;max-width:min(76%,560px);padding:13px 15px 10px;
  border:1px solid rgba(70,190,230,.16);border-radius:20px 20px 20px 7px;
  background:linear-gradient(145deg,rgba(24,55,82,.95),rgba(14,36,62,.95));
  color:var(--chat-text);box-shadow:0 8px 30px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);transition:border-color .2s,background .2s,box-shadow .2s;
}
.message:hover{border-color:rgba(70,210,230,.3);background:linear-gradient(145deg,rgba(27,62,91,.97),rgba(15,40,68,.97));box-shadow:0 10px 34px rgba(0,0,0,.3)}
.message::before{display:none}
.message::after{content:"";position:absolute;bottom:-1px;left:-7px;width:16px;height:16px;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%);z-index:-1}
.message.mine{background:linear-gradient(135deg,#172653,#203b72);border-color:rgba(91,170,255,.3);border-right:1px solid rgba(91,170,255,.3);box-shadow:0 8px 30px rgba(12,31,77,.36)}
.message.mine:hover{background:linear-gradient(135deg,#1b2d60,#294684);border-color:rgba(110,213,255,.46)}
.message.mine::after{left:auto;right:-7px;clip-path:polygon(0 0,100% 100%,0 100%)}
.message-body{gap:9px}
.message-head{min-height:24px;padding-bottom:8px;border-bottom:1px solid rgba(70,190,230,.13)}
.message-sender{font-size:.82rem;font-weight:700;color:#7deef2;letter-spacing:.01em}
.message.mine .message-sender{color:#d7edff}
.message-body>.message-text{font-size:.94rem;line-height:1.85;color:var(--chat-text);overflow-wrap:anywhere;word-break:break-word}
.message-footer{gap:8px;padding-top:8px;border-top:1px solid rgba(70,190,230,.12)}
.message-avatar{width:38px;height:38px;min-width:38px;min-height:38px;flex-basis:38px;border:1px solid rgba(112,230,238,.3);box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 3px rgba(34,211,216,.04);font-size:.72rem}
.message-avatar img{object-fit:cover;width:100%;height:100%;display:block}
.message time{font-size:.66rem;color:#8fb0b7;opacity:.7}
.message-status{color:#7dabb5}
.message-status.read{color:#42e2e1}
.message-reaction{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:999px;padding:3px 8px;color:#c7dce1;transition:transform .18s,background .18s,border-color .18s}
.message-reaction:hover,.message-reaction.active{transform:scale(1.05);border-color:rgba(34,211,216,.48);background:rgba(34,211,216,.12);color:#76f7f6}
.reaction-display{padding:3px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06)}
.message-actions{gap:5px;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1;transform:none}
.message-actions button,.delete-message{width:29px;height:29px;min-width:29px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(5,15,25,.44);color:#9bb7bf;display:grid;place-items:center;font-size:0;transition:transform .18s,background .18s,color .18s,border-color .18s}
.message-actions button::before,.delete-message::before{font-size:16px;line-height:1}
.message-actions .copy-action::before{content:"⧉"}
.message-actions .reply-action::before{content:"↩"}
.message-actions .forward-action::before{content:"↗"}
.delete-message::before{content:"×"}
.message-actions button:hover{transform:translateY(-1px);background:rgba(34,211,216,.12);border-color:rgba(34,211,216,.42);color:#74f6f1}
.delete-message:hover{transform:translateY(-1px);background:rgba(231,91,117,.12);border-color:rgba(231,91,117,.42);color:#ff9aaa}
.reply-quote,.forwarded-label{border:1px solid rgba(34,211,216,.16);border-inline-start:3px solid var(--chat-accent);border-radius:9px;padding:5px 8px;background:rgba(34,211,216,.08);color:#a9d9df}
.forwarded-label{border-inline-start-color:var(--chat-accent-2);background:rgba(117,104,255,.1);color:#c1baff}
.message.mine .reply-quote,.message.mine .forwarded-label{background:rgba(5,15,35,.28);color:#d6eaff}
.image-attachment{width:min(320px,72vw);border:1px solid rgba(112,230,238,.24);border-radius:15px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}
.image-attachment:hover{opacity:1;transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.32)}
.image-attachment img{max-height:300px;border:0;border-radius:0;object-fit:cover}
.audio-message-card{min-width:min(320px,72vw);padding:11px;border:1px solid rgba(34,211,216,.22);border-radius:17px;background:linear-gradient(145deg,rgba(13,46,59,.88),rgba(14,31,51,.9));box-shadow:0 8px 24px rgba(0,0,0,.2)}
.audio-message-icon{width:40px;height:40px;flex-basis:40px;border-radius:13px;background:linear-gradient(135deg,#19d2d5,#5750ee);box-shadow:0 5px 15px rgba(25,210,213,.2)}
.audio-message-player{height:30px;accent-color:var(--chat-accent)}
.message-body>a:not(.image-attachment):not(.video-attachment){display:flex;align-items:center;gap:9px;width:min(320px,72vw);padding:11px 13px;border:1px solid rgba(34,211,216,.2);border-radius:14px;background:linear-gradient(145deg,rgba(21,47,70,.84),rgba(12,29,47,.9));color:#b9edf0;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-body>a:not(.image-attachment):not(.video-attachment):hover{border-color:rgba(34,211,216,.48);background:rgba(34,211,216,.1)}
@media(max-width:700px){
  .messages{padding:12px 9px}
  .message{width:min(92%,560px);max-width:92%;padding:11px 12px 9px}
  .message-body>.message-text{font-size:.9rem;line-height:1.8}
  .message-avatar{width:34px;height:34px;min-width:34px;min-height:34px;flex-basis:34px}
  .message-actions{opacity:1;transform:none}
  .image-attachment,.message-body>a:not(.image-attachment):not(.video-attachment),.audio-message-card{width:min(100%,320px);min-width:0}
}

/* Compact media previews: keep the original files intact, reduce only chat display size. */
.message-body .image-attachment{
  width:min(160px,36vw);
}
.message-body .image-attachment img{
  max-height:150px;
}
.message-body .video-attachment{
  width:min(180px,40vw);
}
.message-body .video-attachment-preview{
  height:75px;
}

/* Telegram-like compact voice message: the message metadata stays outside the player. */
.message-body .audio-message-card{
  width:min(238px,62vw);
  min-width:0;
  padding:5px 7px;
  gap:6px;
  border-radius:14px;
  box-shadow:0 5px 15px rgba(0,0,0,.16);
}
.message-body .audio-message-icon{
  width:30px;
  height:30px;
  flex-basis:30px;
  border-radius:50%;
  font-size:13px;
}
.message-body .audio-message-details{
  gap:0;
}
.message-body .waveform-player{
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px;
}
.message-body .waveform{
  height:27px;
  padding:2px 0;
}
.message-body .waveform-controls{
  gap:2px;
}
.message-body .waveform-play{
  width:27px;
  height:27px;
  font-size:10px;
}
.message-body .waveform-time{
  min-width:52px;
  font-size:.55rem;
  color:#9fc4cc;
}
.message-body .audio-message-open,
.message-body .audio-message-details>strong,
.message-body .audio-message-details>small{
  display:none;
}

/* Premium messenger density: compact bubbles, grouped consecutive messages. */
.messages{
  gap:8px;
  padding-block:14px;
}
.message{
  width:fit-content;
  min-width:0;
  max-width:min(78%,560px);
  padding:10px 12px 8px;
  border-radius:18px 18px 18px 6px;
}
.message.mine{
  border-radius:18px 18px 6px 18px;
}
.message-body{
  gap:5px;
}
.message-head{
  min-height:0;
  padding:0;
  border:0;
}
.message-footer{
  min-height:16px;
  gap:6px;
  padding-top:3px;
  border-top:0;
}
.message-body>.message-text{
  font-size:.9rem;
  line-height:1.72;
}
.message-grouped{
  margin-top:-4px;
}
.message-grouped .message-avatar{
  visibility:hidden;
}
.message-grouped .message-head{
  min-height:0;
  padding:0;
}
.message time{
  font-size:.6rem;
}
.message-actions button,.delete-message{
  width:27px;
  height:27px;
  min-width:27px;
  min-height:27px;
}

/* Borderless chat bubbles: separation comes from surface color and spacing. */
.message,
.message.mine{
  border:0!important;
  border-inline:0!important;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.message:hover,
.message.mine:hover{
  border:0!important;
  box-shadow:0 11px 28px rgba(0,0,0,.27);
}
.message::after{
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.12));
}

/* Final compact layout overrides. Keep the existing message DOM intact. */
#users{padding:1px 6px 3px;min-height:160px}
#users .user{min-height:60px;margin:1px 3px;padding:7px 9px;border-radius:13px;gap:9px}
#users .user .avatar{width:38px;height:38px;min-width:38px;min-height:38px;flex-basis:38px}
#users .user strong{font-size:.8rem}
#users .user small{font-size:.67rem}
.assistant-entry{min-height:59px;margin:2px 14px 4px;padding:8px 10px;border-radius:14px}
.assistant-entry .avatar{width:38px;height:38px;min-width:38px}
.section-title{padding:8px 17px 4px}
.groups-list{max-height:175px}

.messages{padding-inline:62px}
.message{overflow:visible}
.message-sender{display:none!important}
.message-head{min-height:0;padding:0;border:0}
.message:not(.mine) .message-avatar,
.message.mine .message-avatar{
  display:grid!important;position:absolute;top:12px;z-index:2;
  width:40px;height:40px;min-width:40px;min-height:40px;flex-basis:40px;margin:0;
}
.message:not(.mine) .message-avatar{left:-51px}
.message.mine .message-avatar{right:-51px}
.message .message-body{width:100%}
.message-actions{bottom:-18px}
.chat-home-button{display:grid!important}
@media(max-width:700px){
  #users{min-height:120px;padding-inline:3px}
  #users .user{min-height:57px;margin:1px 2px;padding:6px 7px}
  #users .user .avatar{width:36px;height:36px;min-width:36px;min-height:36px;flex-basis:36px}
  .groups-list{max-height:none}
  .messages{padding-inline:50px}
  .message:not(.mine) .message-avatar{left:-42px}
  .message.mine .message-avatar{right:-42px}
  .message:not(.mine) .message-avatar,
  .message.mine .message-avatar{
    top:10px;width:33px;height:33px;min-width:33px;min-height:33px;flex-basis:33px;
  }
}

/* Premium compact sidebar rail and mobile drawer. Existing hooks and behavior remain intact. */
.app{
  --sidebar-ink:#eaf7ff;
  --sidebar-muted:#7893a8;
  --sidebar-border:rgba(101,181,231,.16);
}
aside{
  background:
    radial-gradient(370px 280px at 85% 0,rgba(27,120,180,.11),transparent 70%),
    linear-gradient(180deg,#061321 0%,#040b14 100%);
  border-inline-start:1px solid var(--sidebar-border);
  box-shadow:-18px 0 55px rgba(0,0,0,.2);
}
.profile{
  min-height:76px;height:76px;padding:10px 14px;
  background:linear-gradient(180deg,rgba(9,27,44,.98),rgba(5,15,26,.96));
  border-bottom-color:var(--sidebar-border);
}
.profile .avatar.big{
  width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px;
  border:1px solid rgba(48,218,226,.45);
  box-shadow:0 0 0 3px rgba(0,217,239,.05),0 0 18px rgba(0,217,239,.16);
}
.profile strong{color:var(--sidebar-ink);font-size:.86rem}
.profile small{color:var(--sidebar-muted);font-size:.68rem}
.profile .icon-button{
  width:35px;height:35px;border-radius:11px;
  color:#9bb6c5;background:rgba(255,255,255,.025);
  border:1px solid rgba(104,183,232,.14);
}
.profile .icon-button:hover{color:#7ffaff;background:rgba(0,217,239,.1);border-color:rgba(0,217,239,.38)}
.sidebar-tabs{
  gap:7px;padding:13px 14px 11px;
  background:linear-gradient(180deg,rgba(7,20,34,.98),rgba(4,13,23,.92));
  border-bottom:1px solid var(--sidebar-border);
}
.sidebar-tabs button{
  min-height:42px;padding:8px 10px;border:1px solid rgba(104,183,232,.16);
  border-radius:14px;background:rgba(255,255,255,.018);color:var(--sidebar-muted);
  font-size:.75rem;transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.sidebar-tabs button:hover{color:#c8f7ff;border-color:rgba(35,213,222,.34);background:rgba(25,104,129,.16)}
.sidebar-tabs button.active{
  color:#f0ffff;border-color:rgba(35,213,222,.6);
  background:linear-gradient(135deg,rgba(10,94,128,.58),rgba(74,36,139,.62));
  box-shadow:0 0 20px rgba(20,206,225,.1),inset 0 1px rgba(255,255,255,.08);
}
.search-wrap{
  min-height:48px;margin:10px 14px 6px;padding:4px 12px;
  border:1px solid rgba(105,181,226,.2);border-radius:15px;
  background:rgba(5,20,34,.86);color:#8fb4c7;
}
.search-wrap input{min-height:36px;color:var(--sidebar-ink);font-size:.78rem}
.search-wrap input::placeholder{color:#6d899e}
.sidebar-search-toggle{width:36px;height:36px;margin:8px 14px 1px;border-radius:12px}
.section-title{min-height:0;margin:0;padding:8px 15px 4px;color:#6f8da2;font-size:.68rem}
.assistant-entry{
  width:calc(100% - 24px);min-height:66px;margin:3px 12px 8px;padding:9px 11px;
  border:1px solid rgba(117,85,255,.34);border-radius:17px;
  background:linear-gradient(135deg,rgba(20,57,91,.75),rgba(54,26,105,.72));
  box-shadow:0 10px 24px rgba(18,11,56,.26),inset 0 1px rgba(255,255,255,.06);
}
.assistant-entry .avatar{width:42px;height:42px;min-width:42px;border:1px solid rgba(0,217,239,.46)}
.assistant-entry strong{color:#eefcff;font-size:.8rem}
.assistant-entry small{color:#9ab4c6;font-size:.66rem}
#users{min-height:150px;padding:1px 7px 4px}
#users .user{
  min-height:61px;margin:2px 3px;padding:8px 9px;gap:10px;
  border:1px solid transparent;border-radius:15px;background:rgba(255,255,255,.012);
}
#users .user:hover{transform:none;border-color:rgba(64,178,221,.22);background:rgba(20,103,137,.14)}
#users .user.active{
  border-color:rgba(60,214,223,.45);
  background:linear-gradient(135deg,rgba(12,75,104,.7),rgba(43,29,99,.74));
  box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 0 22px rgba(0,217,239,.05);
}
#users .user .avatar{width:39px;height:39px;min-width:39px;min-height:39px;flex-basis:39px}
#users .user strong{color:#e6f5fc;font-size:.78rem}
#users .user.active strong{color:#72f3f2}
#users .user small{color:#7898aa;font-size:.65rem}
.groups-list{max-height:205px;padding-bottom:3px}
.group-row{min-height:59px;margin:2px 8px;padding:7px 9px;border-radius:14px}
.group-row.active{background:linear-gradient(135deg,rgba(18,73,103,.62),rgba(62,31,113,.6));border-color:rgba(55,211,220,.34)}
.group-search{min-height:42px;margin:2px 10px 5px;background:rgba(5,20,34,.76);border-color:rgba(105,181,226,.16)}
.group-search input{font-size:.7rem;color:var(--sidebar-ink)}
aside footer{
  padding:9px 10px 11px;border-top:1px solid rgba(101,181,231,.11);
  background:rgba(3,10,18,.52);color:#668398;font-size:.62rem;text-align:center;
}
aside footer a{color:#55dfe5}
@media(max-width:700px){
  aside{
    width:min(92vw,390px);right:0;
    border-inline-start:1px solid rgba(73,209,220,.3);
    box-shadow:-22px 0 60px rgba(0,0,0,.42);
  }
  .profile{height:70px;min-height:70px;max-height:70px;padding:9px 12px}
  .sidebar-tabs{padding:9px 10px 7px;gap:6px}
  .sidebar-tabs button{min-height:39px;border-radius:13px;font-size:.72rem}
  .search-wrap{margin:8px 11px 5px}
  .sidebar-search-toggle{margin:7px 11px 1px}
  .assistant-entry{width:calc(100% - 20px);margin-inline:10px}
  #users .user{margin-inline:3px}
  .groups-list{max-height:none}
  aside footer{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:480px){
  aside{width:100vw}
  .profile{padding-inline:10px}
  .profile .icon-button{width:33px;height:33px}
  .assistant-entry{min-height:62px}
}

@media(max-width:700px){
  .crop-modal{
    position:fixed;
    inset:0;
    z-index:3000;
    padding:max(12px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom));
    align-items:center;
  }
  .crop-card{
    width:min(100%,390px);
    max-height:calc(100dvh - 24px);
    overflow:auto;
    padding:16px;
    border-radius:20px;
  }
  .crop-stage{
    width:min(78vw,300px);
  }
}

/* Reference-matched sidebar finish: a dense, calm right rail that scales to mobile. */
aside{
  width:var(--sidebar-width);
  padding:0;
  background:
    radial-gradient(320px 260px at 18% 0,rgba(0,217,239,.08),transparent 72%),
    linear-gradient(180deg,#061321 0%,#030a12 100%);
}
.profile{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) repeat(3,auto);
  align-items:center;
  gap:8px;
  height:72px;
  min-height:72px;
  max-height:72px;
  padding:9px 12px;
}
.profile>div{min-width:0}
.profile .avatar.big{width:42px;height:42px;min-width:42px;min-height:42px;flex-basis:42px}
.profile strong{font-size:.82rem}
.profile small{font-size:.64rem}
.profile .icon-button{
  width:32px;height:32px;min-width:32px;border-radius:10px;
  font-size:14px;
}
.sidebar-tabs{
  position:relative;
  padding:10px 12px 8px;
  gap:6px;
}
.sidebar-tabs button{
  min-height:40px;
  border-radius:13px;
  font-size:.72rem;
}
.sidebar-search-toggle{
  width:34px;height:34px;
  margin:7px 12px 0;
  border-radius:11px;
  font-size:19px;
}
.search-wrap{
  min-height:44px;
  margin:7px 12px 6px;
  padding:3px 11px;
  border-radius:14px;
}
.search-wrap input{min-height:34px;font-size:.74rem}
.section-title{
  padding:6px 13px 3px;
  font-size:.64rem;
}
.assistant-entry{
  width:calc(100% - 20px);
  min-height:62px;
  margin:3px 10px 6px;
  padding:8px 10px;
  border-radius:15px;
}
.assistant-entry .avatar{width:38px;height:38px;min-width:38px}
.assistant-entry strong{font-size:.77rem}
.assistant-entry small{font-size:.63rem}
#users{
  min-height:130px;
  padding:1px 6px 3px;
}
#users .user{
  min-height:57px;
  margin:2px 2px;
  padding:7px 8px;
  gap:9px;
  border-radius:14px;
}
#users .user .avatar{
  width:37px;height:37px;min-width:37px;min-height:37px;flex-basis:37px;
}
#users .user strong{font-size:.76rem}
#users .user small{font-size:.62rem}
.groups-list{max-height:185px}
.group-row{
  min-height:55px;
  margin:2px 6px;
  padding:6px 8px;
  border-radius:13px;
}
.group-row .group-settings{width:28px;height:28px;padding:3px}
.group-search{
  min-height:38px;
  margin:1px 8px 4px;
  padding-inline:9px;
  border-radius:12px;
}
.group-search input{min-height:31px;font-size:.66rem}
aside footer{
  padding:7px 8px 9px;
  font-size:.59rem;
}
@media(max-width:700px){
  aside{
    width:min(94vw,390px);
    transform:translateX(105%);
    border-inline-start:1px solid rgba(60,213,222,.35);
    box-shadow:-24px 0 65px rgba(0,0,0,.5);
  }
  .profile{
    height:68px;min-height:68px;max-height:68px;
    padding:8px 10px;
  }
  .profile .avatar.big{width:40px;height:40px;min-width:40px;min-height:40px;flex-basis:40px}
  .sidebar-tabs{padding:8px 10px 6px}
  .sidebar-tabs button{min-height:38px;font-size:.7rem}
  .search-wrap{margin-inline:10px}
  .sidebar-search-toggle{margin-inline:10px}
  .assistant-entry{width:calc(100% - 18px);margin-inline:9px}
  #users .user{margin-inline:2px}
}
@media(max-width:480px){
  aside{width:100vw}
  .profile{grid-template-columns:auto minmax(0,1fr) repeat(3,auto);padding-inline:8px}
  .profile .icon-button{width:30px;height:30px;min-width:30px;font-size:13px}
}

/* Final message action placement:
   keep copy/reply/forward controls above the bubble, away from reactions and metadata. */
.message{
  overflow:visible;
}
.message:hover,
.message:focus-within{
  z-index:20;
}
.message-footer{
  position:static!important;
}
.message-actions{
  position:absolute!important;
  top:auto!important;
  right:8px!important;
  left:auto!important;
  bottom:calc(100% + 7px)!important;
  z-index:30;
  display:flex;
  align-items:center;
  gap:4px;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  padding:4px;
  border:1px solid rgba(91,190,235,.24);
  border-radius:13px;
  background:rgba(5,14,27,.96);
  box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 18px rgba(0,217,239,.08);
  backdrop-filter:blur(14px);
}
.message.mine .message-actions{
  right:auto!important;
  left:8px!important;
}
.message:hover .message-actions,
.message:focus-within .message-actions{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.message-actions button.message-action{
  position:static!important;
  width:29px;
  height:29px;
  min-width:29px;
  min-height:29px;
  margin:0;
}

@media(max-width:700px){
  .message-actions{
    right:4px!important;
    left:auto!important;
    bottom:calc(100% + 5px)!important;
    opacity:1;
    transform:none;
    pointer-events:auto;
    padding:3px;
  }
  .message.mine .message-actions{
    right:auto!important;
    left:4px!important;
  }
  .message-actions button.message-action{
    width:28px;
    height:28px;
    min-width:28px;
    min-height:28px;
  }
}

/* Unified sidebar: chats, contacts, groups and channels share one compact list. */
#sidebar > .sidebar-tabs,
#sidebar > .group-section-title,
#sidebar > .group-search,
#sidebar > #groups,
#sidebar > .section-title,
#sidebar > .call-logs,
#sidebar > .assistant-entry{
  display:none!important;
}
#sidebar > .search-wrap,
#sidebar > .sidebar-search-toggle,
#sidebar > #users,
#sidebar > footer{
  position:relative;
  z-index:2;
}
#sidebar > #users{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
  overflow-y:auto;
  padding:8px 8px 12px;
  scrollbar-gutter:stable;
}
#sidebar > #users .user{
  flex:0 0 auto;
}
#sidebar > footer{
  flex:0 0 34px;
}
#sidebar .search-wrap{
  order:1;
}
#sidebar > #users{
  order:2;
}
#sidebar > footer{
  order:3;
}

.sidebar-create-button{
  flex:0 0 42px;
  width:42px;
  height:42px;
  margin:8px 12px 2px;
  border:1px solid rgba(0,225,239,.5);
  border-radius:14px;
  color:#eafcff;
  background:linear-gradient(145deg,#08a9c8,#6544ee 72%);
  box-shadow:0 8px 22px rgba(0,217,239,.16), inset 0 1px rgba(255,255,255,.22);
  font-size:25px;
  line-height:1;
  display:grid;
  place-items:center;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sidebar-search-toolbar{
  order:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-height:44px;
  margin:7px 12px 1px;
}
.sidebar-search-toolbar .sidebar-search-toggle,
.sidebar-search-toolbar .sidebar-create-button{
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  margin:0;
}
.sidebar-search-toolbar + .search-wrap{
  transition:max-height .22s ease,opacity .18s ease,margin .22s ease,padding .22s ease;
}
.message-reactions{
  display:flex!important;
  align-items:center;
  flex-wrap:nowrap!important;
  gap:8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.message-reaction{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:3px 4px!important;
  min-width:30px;
}
.message-reaction:hover,
.message-reaction.active{
  border:0!important;
  background:rgba(0,217,239,.12)!important;
}
.message-reaction.reaction-heart{
  color:#ff8caf;
}
.sidebar-search-toolbar .sidebar-create-button{
  border-radius:12px;
  font-size:22px;
}
.sidebar-search-toolbar .sidebar-assistant-button{
  display:grid;
  place-items:center;
  padding:0;
  overflow:hidden;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  border:1px solid rgba(168,85,255,.55);
  border-radius:12px;
  color:#f4eaff;
  background:linear-gradient(145deg,#633ee8,#d044c7);
  box-shadow:0 7px 18px rgba(149,61,224,.22),inset 0 1px rgba(255,255,255,.24);
  font-size:21px;
  cursor:pointer;
}
.sidebar-search-toolbar .sidebar-assistant-button>.avatar{
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  max-width:30px;
  max-height:30px;
  flex:0 0 30px;
  margin:0;
  border:1px solid rgba(255,224,153,.85);
  box-shadow:0 0 0 2px rgba(255,181,70,.18),0 4px 10px rgba(0,0,0,.22);
}
.sidebar-search-toolbar .sidebar-assistant-button>.avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}
.sidebar-search-toolbar .sidebar-assistant-button:hover,
.sidebar-search-toolbar .sidebar-assistant-button:focus-visible{
  transform:translateY(-1px);
  filter:brightness(1.1);
  box-shadow:0 9px 22px rgba(149,61,224,.34),0 0 0 3px rgba(168,85,255,.12);
}
.sidebar-search-toolbar + .search-wrap{
  order:2;
}
#sidebar > #users{
  order:3;
}
#sidebar > footer{
  order:4;
}
.sidebar-search-toolbar + .search-wrap{
  order:2;
}
aside .profile{
  direction:rtl;
}
aside .profile .avatar.big{
  order:1!important;
}
aside .profile>div:not(.avatar){
  order:2!important;
  text-align:right;
}
aside .profile #accountSettings{
  order:3!important;
}
aside .profile .mobile-menu-button,
aside .profile .home-button{
  order:4!important;
}
aside .profile .presence-status{
  position:static!important;
  display:inline-flex!important;
  align-items:center;
  min-height:10px;
  margin:0!important;
}
.message-reaction.reaction-heart{
  color:#ff9bbb;
  border-color:rgba(255,111,160,.3);
}
.message-reaction.reaction-heart:hover,
.message-reaction.reaction-heart.active{
  color:#ff5f9b;
  border-color:rgba(255,95,155,.7);
  background:rgba(255,95,155,.14);
  box-shadow:0 0 14px rgba(255,95,155,.16);
}
#sidebar .user .presence-status{
  position:static!important;
  display:inline-flex!important;
  align-items:center;
  min-height:10px;
  margin:0!important;
  line-height:1;
}
#sidebar .user>div{
  min-width:0;
}
aside .profile .avatar.big{
  order:1!important;
}
aside .profile>div:not(.avatar){
  order:2!important;
  text-align:right;
}
aside .profile #accountSettings{
  order:3!important;
}
.sidebar-create-button:hover,
.sidebar-create-button:focus-visible{
  transform:translateY(-1px) scale(1.03);
  filter:brightness(1.08);
  box-shadow:0 10px 28px rgba(101,68,238,.3), 0 0 0 3px rgba(0,225,239,.1);
}

/* Message action dock matches the reference: directly below each bubble. */
.message-actions{
  top:calc(100% + 6px)!important;
  bottom:auto!important;
  right:10px!important;
  left:auto!important;
  z-index:30;
  opacity:0;
  transform:translateY(-3px);
}
.message.mine .message-actions{
  right:auto!important;
  left:10px!important;
}
.message:hover .message-actions,
.message:focus-within .message-actions{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.message-actions .delete-action::before{
  content:"🗑";
  font-size:15px!important;
  line-height:1;
}
.message-actions .delete-action:hover{
  color:#ff91a2;
  border-color:rgba(255,103,132,.65)!important;
  background:rgba(255,57,93,.15)!important;
}
.message-reactions,
.reaction-display{
  position:relative;
  z-index:4;
  align-self:flex-start;
}
.message.mine .reaction-display{
  align-self:flex-end;
}

@media(max-width:700px){
  .message-actions{
    top:calc(100% + 5px)!important;
    bottom:auto!important;
    right:4px!important;
    left:auto!important;
    opacity:1;
    transform:none;
  }
  .message.mine .message-actions{
    right:auto!important;
    left:4px!important;
  }
}

/* Desktop layout correction: sidebar and chat must share one full-height grid row. */
@media(min-width:701px){
  html,body{
    min-height:100%;
  }
  .app{
    display:grid!important;
    grid-template-columns:var(--sidebar-width) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    align-items:stretch;
    direction:rtl;
  }
  .app>aside{
    grid-column:1;
    grid-row:1;
    width:auto!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    align-self:stretch;
  }
  .app>.chat{
    grid-column:2;
    grid-row:1;
    width:auto!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    align-self:stretch;
  }
  .app>.sidebar-backdrop{
    display:none!important;
  }
  .app>aside>.sidebar-tabs{
    position:relative;
    top:auto;
    flex:0 0 auto;
  }
  .app>.chat>.messages{
    min-height:0;
  }
}

/* Public channel pages should occupy the same full viewport height as the app shell. */
body:has(> main.public-channel-page),
body:has(> .public-channel-page){
  min-height:100dvh;
}

/* Reference-style action dock: compact, floating and visually separate from reactions. */
.message-actions{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:38px;
  padding:4px;
  border:1px solid rgba(122,183,255,.42);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(7,18,34,.98),rgba(28,18,63,.97));
  box-shadow:0 10px 22px rgba(0,0,0,.46),0 0 16px rgba(73,142,255,.12);
  backdrop-filter:blur(16px) saturate(130%);
}
.message-actions::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:11px;
  pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.1);
}
.message-actions button.message-action{
  position:relative!important;
  z-index:1;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  border:1px solid rgba(133,190,255,.3)!important;
  border-radius:50%!important;
  background:rgba(13,29,50,.86)!important;
  color:#b7d2ed;
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.message-actions button.message-action::before{
  font-size:15px!important;
  text-shadow:0 0 7px currentColor;
}
.message-actions button.message-action:hover,
.message-actions button.message-action:focus-visible{
  transform:translateY(-1px) scale(1.08)!important;
  border-color:rgba(0,225,239,.72)!important;
  background:linear-gradient(145deg,rgba(0,157,190,.44),rgba(91,52,191,.5))!important;
  color:#f2ffff;
  outline:none;
  box-shadow:0 0 14px rgba(0,217,239,.22),inset 0 1px rgba(255,255,255,.12);
}
.message-actions .reply-action:focus-visible{border-color:rgba(188,135,255,.8)!important}
.message-actions .forward-action:focus-visible{border-color:rgba(115,164,255,.8)!important}
.message-footer{
  position:static!important;
  isolation:isolate;
}
.message-reactions,
.reaction-display{
  position:relative;
  z-index:2;
}

/* Reference-style right rail: one aligned panel with clear compact rows. */
aside{
  position:relative;
  z-index:30;
  overflow:hidden;
  background:
    radial-gradient(300px 240px at 0 0,rgba(0,217,239,.11),transparent 72%),
    linear-gradient(180deg,#071625 0%,#030a13 100%);
  border-inline-start:1px solid rgba(70,184,237,.34);
}
aside::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:1px;
  background:linear-gradient(180deg,rgba(0,217,239,.7),transparent 32%,rgba(168,85,255,.55));
  opacity:.55;
  pointer-events:none;
}
aside .profile,
aside .sidebar-tabs,
aside .search-wrap,
aside .section-title,
aside .assistant-entry,
aside #users,
aside .group-search,
aside .groups-list,
aside .call-logs,
aside footer{
  position:relative;
  z-index:1;
}
aside .profile{
  flex:0 0 72px;
  min-height:72px;
  height:72px;
  padding:9px 12px;
  gap:8px;
  background:linear-gradient(180deg,rgba(8,22,38,.98),rgba(4,12,22,.92));
  border-bottom:1px solid rgba(93,192,235,.22);
}
aside .profile .avatar.big{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  flex-basis:42px;
}
aside .profile .icon-button{
  width:36px;
  height:36px;
  min-width:36px;
  border:1px solid rgba(104,179,238,.24);
  border-radius:12px;
  background:rgba(10,28,46,.72);
}
aside .profile .icon-button:hover{
  background:linear-gradient(145deg,rgba(0,174,195,.24),rgba(103,52,196,.3));
  border-color:rgba(0,225,239,.62);
}
aside .sidebar-tabs{
  flex:0 0 auto;
  padding:10px 12px 8px;
  gap:6px;
  background:rgba(3,11,21,.78);
}
aside .sidebar-tabs button{
  min-height:40px;
  border-radius:14px;
  background:rgba(7,24,41,.78);
}
aside .sidebar-tabs button.active{
  background:linear-gradient(135deg,rgba(12,97,142,.64),rgba(91,41,155,.72));
  border-color:rgba(0,225,239,.72);
  box-shadow:0 0 18px rgba(0,217,239,.12),inset 0 1px rgba(255,255,255,.1);
}
aside .search-wrap,
aside .group-search{
  min-height:43px;
  border-radius:14px;
  background:rgba(4,17,30,.84);
}
aside .section-title{
  padding:7px 14px 3px;
}
aside .assistant-entry{
  min-height:66px;
  margin:4px 10px 7px;
  border-radius:17px;
}
aside #users .user,
aside .group-row{
  min-height:59px;
  margin:2px 7px;
  padding:7px 9px;
  border-radius:15px;
}
aside #users .user .avatar,
aside .group-row .avatar{
  width:39px;
  height:39px;
  min-width:39px;
  min-height:39px;
  flex-basis:39px;
}
aside #users .user.active,
aside .group-row.active{
  background:linear-gradient(100deg,rgba(11,75,104,.8),rgba(55,28,111,.74));
  border-color:rgba(0,225,239,.58);
  box-shadow:0 8px 20px rgba(0,0,0,.25),0 0 16px rgba(0,217,239,.09);
}
aside footer{
  flex:0 0 auto;
  padding:8px 8px 10px;
  background:rgba(2,9,17,.86);
}

@media(max-width:700px){
  .message-actions{
    min-height:36px;
    gap:2px;
    padding:3px;
    border-radius:12px;
  }
  .message-actions button.message-action{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
  }
  aside .profile{
    flex-basis:68px;
    min-height:68px;
    height:68px;
  }
  aside #users .user,
  aside .group-row{
    margin-inline:6px;
  }
}

/* Final visual pass: neon message tools and a compact glass sidebar. */
.message{
  isolation:isolate;
}
.message-actions{
  min-height:42px;
  gap:6px;
  padding:5px;
  border:1px solid rgba(83,211,255,.34);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(10,30,53,.96),rgba(28,16,65,.95));
  box-shadow:
    0 13px 30px rgba(0,0,0,.42),
    0 0 0 1px rgba(168,85,255,.08) inset,
    0 0 22px rgba(0,217,239,.12);
}
.message-actions::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:16px;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(0,217,239,.08),transparent 42%,rgba(168,85,255,.1));
}
.message-actions button.message-action{
  position:relative!important;
  z-index:1;
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  border:1px solid rgba(124,190,255,.28);
  border-radius:50%;
  background:rgba(3,13,28,.72);
  color:#b8d8ed;
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.message-actions button.message-action::before{
  font-size:16px;
  text-shadow:0 0 8px currentColor;
}
.message-actions button.message-action:hover{
  transform:translateY(-2px) scale(1.06);
  border-color:rgba(0,230,239,.7);
  background:linear-gradient(135deg,rgba(0,177,201,.3),rgba(96,57,221,.35));
  color:#eaffff;
  box-shadow:0 0 16px rgba(0,217,239,.25);
}
.message-actions .copy-action:hover{color:#7ffaff}
.message-actions .reply-action:hover{color:#c8a6ff}
.message-actions .forward-action:hover{color:#8fb7ff}
.message.mine .message-actions{
  background:linear-gradient(135deg,rgba(17,22,66,.97),rgba(46,17,79,.95));
}

/* Sidebar: dense, card-like conversation rail matching the chat surface. */
aside{
  background:
    radial-gradient(420px 300px at 12% -5%,rgba(0,217,239,.1),transparent 68%),
    radial-gradient(420px 360px at 100% 45%,rgba(137,69,255,.09),transparent 70%),
    linear-gradient(180deg,#061321 0%,#030912 100%);
  border-inline-start:1px solid rgba(75,192,235,.3);
  box-shadow:-20px 0 65px rgba(0,0,0,.38),inset 1px 0 rgba(168,85,255,.08);
}
aside .profile{
  background:linear-gradient(180deg,rgba(8,22,38,.98),rgba(4,12,23,.94));
  border-bottom:1px solid rgba(91,196,238,.2);
}
aside .profile .avatar.big{
  order:3;
  border:1px solid rgba(0,217,239,.64);
  box-shadow:0 0 0 3px rgba(0,217,239,.06),0 0 22px rgba(0,217,239,.2);
}
aside .profile>div{
  order:2;
}
aside .profile .icon-button{
  order:1;
  border-color:rgba(114,185,242,.24);
  background:rgba(255,255,255,.025);
}
aside .profile .icon-button:hover{
  background:linear-gradient(135deg,rgba(0,217,239,.2),rgba(168,85,255,.2));
}
.sidebar-tabs{
  padding:11px 13px 9px;
  background:rgba(3,11,21,.7);
  border-bottom:1px solid rgba(91,196,238,.15);
}
.sidebar-tabs button{
  min-height:40px;
  border-radius:14px;
  background:rgba(8,24,40,.62);
  border-color:rgba(104,184,238,.22);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.sidebar-tabs button.active{
  background:linear-gradient(135deg,rgba(0,148,187,.42),rgba(112,44,194,.58));
  border-color:rgba(0,225,239,.68);
  box-shadow:0 0 22px rgba(0,217,239,.12),inset 0 1px rgba(255,255,255,.1);
}
.search-wrap,.group-search{
  min-height:44px;
  margin:9px 12px 5px;
  border-radius:16px;
  background:rgba(4,17,30,.78);
  border-color:rgba(97,178,230,.22);
}
.search-wrap:focus-within,.group-search:focus-within{
  border-color:rgba(0,224,239,.66);
  box-shadow:0 0 0 3px rgba(0,217,239,.08),0 0 18px rgba(0,217,239,.1);
}
.section-title{
  padding:8px 14px 4px;
  color:#7196ac;
}
.assistant-entry{
  width:calc(100% - 20px);
  min-height:68px;
  margin:4px 10px 8px;
  border:1px solid rgba(126,84,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(13,58,91,.72),rgba(59,25,112,.72));
  box-shadow:0 12px 26px rgba(13,17,65,.32),inset 0 1px rgba(255,255,255,.08);
}
.assistant-entry:hover{
  transform:translateY(-1px);
  border-color:rgba(0,225,239,.66);
  box-shadow:0 15px 30px rgba(0,0,0,.25),0 0 20px rgba(0,217,239,.12);
}
#users .user,.group-row{
  min-height:61px;
  margin:2px 8px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:16px;
  background:linear-gradient(100deg,rgba(8,24,39,.5),rgba(7,17,31,.2));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
#users .user:hover,.group-row:hover{
  transform:translateX(-2px);
  border-color:rgba(0,217,239,.3);
  background:linear-gradient(100deg,rgba(12,65,89,.56),rgba(42,24,82,.42));
}
#users .user.active,.group-row.active{
  border-color:rgba(0,225,239,.56);
  background:linear-gradient(100deg,rgba(10,73,101,.78),rgba(57,26,109,.7));
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 20px rgba(0,217,239,.08),inset 0 1px rgba(255,255,255,.1);
}
#users .user .avatar,.group-row .avatar{
  border-color:rgba(87,218,255,.45);
  box-shadow:0 0 0 2px rgba(0,217,239,.05),0 5px 15px rgba(0,0,0,.25);
}
#users .user strong,.group-row strong{
  color:#edfaff;
}
#users .user.active strong,.group-row.active strong{
  color:#72f6f4;
}
aside footer{
  background:rgba(2,9,17,.8);
  border-top:1px solid rgba(91,196,238,.14);
}

@media(max-width:700px){
  .message-actions{
    min-height:38px;
    border-radius:16px;
  }
  .message-actions button.message-action{
    width:29px;
    height:29px;
    min-width:29px;
    min-height:29px;
  }
  aside{
    border-inline-start:1px solid rgba(0,217,239,.48);
  }
  #users .user,.group-row{
    margin-inline:6px;
  }
}

/* Canonical message action dock.
   Keep this as the final source of truth: one horizontal row, no hover gap,
   and a pointer bridge so desktop buttons remain clickable. */
.message-actions{
  position:absolute!important;
  top:calc(100% + 2px)!important;
  bottom:auto!important;
  right:8px!important;
  left:auto!important;
  z-index:40!important;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:calc(100% - 16px);
  min-height:38px;
  gap:4px;
  padding:4px;
  direction:ltr;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-2px);
  pointer-events:none;
}
.message.mine .message-actions{
  right:auto!important;
  left:8px!important;
}
.message-actions::before{
  content:"";
  position:absolute;
  top:-7px;
  left:0;
  right:0;
  height:9px;
  pointer-events:auto;
}
.message:hover .message-actions,
.message:focus-within .message-actions,
.message-actions:hover,
.message-actions:focus-within{
  opacity:1!important;
  transform:none;
  pointer-events:auto;
}
.message-actions button.message-action{
  position:relative!important;
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
}
.message-actions button.message-action::before{
  display:block;
  line-height:1;
}

@media(max-width:700px){
  .message-actions{
    top:calc(100% + 2px)!important;
    right:4px!important;
    left:auto!important;
    min-height:36px;
    gap:3px;
    padding:3px;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .message.mine .message-actions{
    right:auto!important;
    left:4px!important;
  }
  .message-actions button.message-action{
    flex-basis:28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
  }
}

/* Final message action placement:
   keep the controls inside their own message footer so they never overlap
   the next message or the audio waveform. */
.message-footer{
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  position:relative!important;
  min-height:28px;
  padding-bottom:0;
}
.message-actions{
  position:static!important;
  inset:auto!important;
  z-index:2!important;
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center;
  justify-content:center;
  width:max-content!important;
  max-width:100%;
  min-height:34px;
  margin:4px 0 0!important;
  padding:3px!important;
  gap:3px;
  opacity:0;
  transform:none!important;
  pointer-events:none;
  border:1px solid rgba(100,150,255,.2);
  border-radius:13px;
  background:rgba(5,15,25,.8);
  box-shadow:0 7px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
}
.message.mine .message-actions{
  margin-inline-start:auto!important;
}
.message:hover .message-actions,
.message:focus-within .message-actions,
.message-actions:hover,
.message-actions:focus-within{
  opacity:1!important;
  pointer-events:auto;
}
.message-actions::before,
.message-actions::after{
  display:none!important;
}
.message-actions button.message-action{
  position:static!important;
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
}
.message-reactions,
.reaction-display{
  position:static!important;
  flex:0 0 auto;
  margin-top:4px!important;
}
.message-footer .message-meta{
  margin-top:4px!important;
}
@media(max-width:700px){
  .message-actions{
    min-height:32px;
    padding:2px!important;
    border-radius:12px;
    opacity:1;
    pointer-events:auto;
  }
  .message-actions button.message-action{
    flex-basis:28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
  }
}

/* Compact audio footer: keep reactions and message tools aligned in one
   predictable row under the player. */
.message-body .audio-message-card + .message-footer{
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  min-height:30px!important;
  padding-top:5px!important;
  padding-inline:2px!important;
}
.message-body .audio-message-card + .message-footer .message-meta{
  order:1!important;
  flex:0 0 auto!important;
  margin:0!important;
  min-height:24px;
  gap:5px!important;
  color:#8fb7c4;
}
.message-body .audio-message-card + .message-footer .message-actions{
  order:2!important;
  flex:0 0 auto!important;
  margin:0!important;
  min-height:30px;
  padding:2px!important;
  gap:2px!important;
  border:1px solid rgba(103,190,224,.22);
  border-radius:999px;
  background:rgba(3,15,28,.72);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.message-body .audio-message-card + .message-footer .message-reactions,
.message-body .audio-message-card + .message-footer .reaction-display{
  order:3!important;
  display:flex!important;
  align-items:center;
  gap:3px!important;
  flex:0 0 auto!important;
  margin:0!important;
  margin-inline-start:auto!important;
}

/* Compact side-aligned bubbles: keep the conversation centered and leave
   the opposite side clear, matching the Telegram-style message rhythm. */
.messages .message{
  width:fit-content!important;
  max-width:min(46%,420px)!important;
  padding:10px 12px 9px!important;
}
.messages .message.mine{margin-inline-start:auto!important;margin-inline-end:0!important}
.messages .message:not(.mine){margin-inline-start:0!important;margin-inline-end:auto!important}
@media(max-width:700px){
  .messages .message{max-width:min(84%,360px)!important}
}
.message-body .audio-message-card + .message-footer .message-reaction,
.message-body .audio-message-card + .message-footer .reaction-display{
  min-height:26px;
  padding:2px 7px!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  font-size:.7rem;
  line-height:1.2;
}
.message-body .audio-message-card + .message-footer .message-actions button.message-action{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.message-body .audio-message-card + .message-footer .message-actions button.message-action:hover,
.message-body .audio-message-card + .message-footer .message-actions button.message-action:focus-visible{
  background:rgba(0,217,239,.15)!important;
  transform:scale(1.08)!important;
}
.message.mine .audio-message-card + .message-footer .message-reactions,
.message.mine .audio-message-card + .message-footer .reaction-display{
  margin-inline-start:0!important;
  margin-inline-end:auto!important;
}
@media(max-width:700px){
  .message-body .audio-message-card + .message-footer{
    gap:4px!important;
  }
  .message-body .audio-message-card + .message-footer .message-actions{
    min-height:28px;
  }
  .message-body .audio-message-card + .message-footer .message-actions button.message-action{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    min-height:25px!important;
  }
  .message-body .audio-message-card + .message-footer .message-reaction,
  .message-body .audio-message-card + .message-footer .reaction-display{
    padding-inline:5px!important;
    font-size:.64rem;
  }
}

/* Reaction indicators: three independent counters, aligned to the physical
   left edge of every message footer. Keep this block last so legacy footer
   rules cannot move or hide the controls. */
.message-footer{
  direction:ltr!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
}
.message-footer .message-reactions,
.message-footer .message-reactions-static,
.message-footer .reaction-display{
  order:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  gap:3px!important;
  margin:0 auto 0 0!important;
  direction:rtl!important;
}
.message-footer .message-actions{
  order:2!important;
  margin:0!important;
}
.message-actions{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  width:auto!important;
  min-height:30px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.message-action-toggle{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border:1px solid rgba(100,180,220,.32)!important;
  border-radius:50%!important;
  background:rgba(9,30,49,.72)!important;
  color:#b9e9f2!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:transform .18s ease,background .18s ease,color .18s ease!important;
}
.message-action-toggle .ui-icon{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:currentColor;transition:transform .18s ease,opacity .18s ease}
.message-action-toggle.is-open .ui-icon{transform:scale(.9);opacity:.82}
.message-action-toggle[aria-expanded="true"]{
  background:linear-gradient(135deg,#17cbd3,#5b52ee)!important;
  color:#fff!important;
}
.message-action-toggle:hover,.message-action-toggle:focus-visible{
  background:linear-gradient(135deg,rgba(23,203,211,.72),rgba(91,82,238,.8))!important;
  color:#fff!important;
  outline:none!important;
}
.attachment-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px;max-width:330px}.attachment-collection-image,.attachment-collection-file{min-width:0;min-height:58px;border:1px solid rgba(100,210,220,.25);border-radius:10px;overflow:hidden;background:rgba(5,25,42,.5);color:#c9f8fa;font-size:.68rem;text-decoration:none;display:grid;place-items:center;padding:5px}.attachment-collection-image img{width:100%;height:100%;min-height:58px;object-fit:cover}.attachment-collection-file{word-break:break-word;text-align:center}
.file-album-viewer{position:relative;display:grid;place-items:center;width:100%;max-width:100%}.file-album-viewer .file-preview-image{max-width:100%;max-height:calc(100dvh - 310px)}.file-album-nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:40px;height:40px;border:1px solid rgba(173,247,255,.55);border-radius:50%;background:rgba(4,15,29,.74);color:#fff;font-size:32px;line-height:1;cursor:pointer}.file-album-nav.previous{right:12px}.file-album-nav.next{left:12px}.file-album-nav:hover,.file-album-nav:focus-visible{background:#17cbd3;outline:none}.file-album-counter{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:999px;background:rgba(4,15,29,.78);color:#fff;font-size:.72rem;direction:ltr}

/* File viewing and upload confirmation: a compact, touch-friendly dark sheet. */
#fileModal.file-viewer-modal,.upload-confirm-modal{padding:clamp(12px,3vh,30px);background:radial-gradient(circle at 50% 0,rgba(49,217,220,.14),transparent 34%),rgba(2,8,14,.84);backdrop-filter:blur(16px);animation:fileViewerOverlayIn .22s ease both}
#fileModal .file-viewer-panel,.upload-confirm-modal .upload-confirm-panel{width:min(100%,780px);max-height:min(850px,calc(100dvh - 24px));border:1px solid rgba(123,223,231,.22);border-radius:26px;background:linear-gradient(150deg,#102534 0%,#0a1725 54%,#07131f 100%);box-shadow:0 32px 96px rgba(0,0,0,.6),0 0 0 1px rgba(200,252,255,.04) inset;isolation:isolate;animation:fileViewerPanelIn .26s cubic-bezier(.2,.8,.2,1) both}
#fileModal .file-viewer-header,.upload-confirm-modal .upload-confirm-header{position:relative;min-height:76px;padding:17px 20px 14px;border-bottom:1px solid rgba(140,223,231,.12);background:linear-gradient(120deg,rgba(40,212,214,.15),rgba(100,80,235,.1) 56%,transparent)}
#fileModal .file-viewer-heading{min-width:0}
#fileModal .file-modal-kicker,.upload-confirm-modal .file-modal-kicker{margin-bottom:5px;color:#79eff0;font-size:.68rem;font-weight:800;letter-spacing:.02em}
#fileModal .file-modal-header h3,.upload-confirm-modal .file-modal-header h3{max-width:min(61vw,590px);color:#effcff;font-size:1rem;line-height:1.35}
#fileModal .close-btn,.upload-confirm-modal .close-btn{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid rgba(143,228,235,.2);border-radius:12px;background:rgba(3,18,30,.46);color:#c3edf1;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
#fileModal .close-btn:hover,.upload-confirm-modal .close-btn:hover{transform:rotate(90deg);border-color:rgba(112,240,241,.64);background:rgba(43,211,214,.16);color:#fff}
#fileModal .close-btn:focus-visible,.upload-confirm-modal .close-btn:focus-visible{outline:2px solid #80f3f4;outline-offset:3px}
#fileModal .file-viewer-stage,.upload-confirm-modal .upload-confirm-stage{min-height:0;padding:14px 18px;background:linear-gradient(180deg,rgba(4,16,27,.72),rgba(6,18,29,.3))}
#fileModal .file-preview,.upload-confirm-modal .file-preview{position:relative;min-height:clamp(210px,39dvh,420px);max-height:calc(100dvh - 330px);padding:12px;border:1px solid rgba(116,214,226,.14);border-radius:18px;background:radial-gradient(circle at 50% 38%,rgba(47,111,129,.2),transparent 53%),#06121d;overflow:auto;scrollbar-color:rgba(91,221,225,.42) transparent}
#fileModal .file-preview[aria-busy=true]::after,.upload-confirm-modal .file-preview[aria-busy=true]::after{content:'';position:absolute;inset:0;margin:auto;width:27px;height:27px;border:3px solid rgba(132,236,239,.22);border-top-color:#72eff0;border-radius:50%;animation:filePreviewSpin .8s linear infinite;pointer-events:none}
#fileModal .file-preview-image,.upload-confirm-modal .file-preview-image{max-height:calc(100dvh - 365px);border:1px solid rgba(190,246,251,.13);border-radius:13px;box-shadow:0 16px 42px rgba(0,0,0,.36)}
#fileModal .file-preview-media,.upload-confirm-modal .file-preview-media{max-height:calc(100dvh - 365px);border:1px solid rgba(190,246,251,.13);border-radius:13px;box-shadow:0 16px 42px rgba(0,0,0,.32)}
#fileModal .file-preview-audio,.upload-confirm-modal .file-preview-audio{width:min(100%,560px);padding:10px;border-radius:14px;background:rgba(21,61,78,.42)}
#fileModal .file-preview-document{height:min(56dvh,560px);border:0;border-radius:13px;background:#fff;box-shadow:0 12px 36px rgba(0,0,0,.3)}
#fileModal .file-preview-empty,.upload-confirm-modal .file-preview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:170px;max-width:360px;margin:auto;color:#a9cbd1;text-align:center;line-height:1.7}
#fileModal .file-preview-empty strong,.upload-confirm-modal .file-preview-empty strong{color:#e7f9fb;font-size:.9rem}
#fileModal .file-preview-empty small,.upload-confirm-modal .file-preview-empty small{font-size:.74rem}
.file-preview-empty-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(96,221,227,.25);border-radius:17px;background:linear-gradient(135deg,rgba(35,205,209,.15),rgba(96,80,223,.14));font-size:1.35rem;box-shadow:0 10px 28px rgba(0,0,0,.2)}
#fileModal .file-viewer-details,.upload-confirm-modal .upload-confirm-details{position:relative;gap:11px;padding:13px 20px;border-top:1px solid rgba(137,222,230,.12);background:rgba(5,17,28,.64)}
#fileModal .file-detail-icon,.upload-confirm-modal .file-detail-icon{width:40px;height:40px;flex:0 0 40px;border:1px solid rgba(112,230,232,.22);border-radius:13px;background:linear-gradient(135deg,rgba(32,205,209,.2),rgba(91,75,220,.18));font-size:1.05rem}
#fileModal .file-detail-text strong,.upload-confirm-modal .file-detail-text strong{color:#edfbfd;font-size:.82rem;line-height:1.45}
#fileModal .file-detail-text small,.upload-confirm-modal .file-detail-text small{color:#91bbc3;font-size:.68rem;line-height:1.45}
#fileModal .file-viewer-footer,.upload-confirm-modal .upload-confirm-footer{display:flex;align-items:center;gap:9px;padding:13px 20px 17px;border-top:1px solid rgba(137,222,230,.1);background:linear-gradient(180deg,rgba(7,22,34,.22),rgba(4,14,24,.78))}
#fileModal .file-action,.upload-confirm-modal .file-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:43px;border-radius:13px;font-size:.78rem;font-weight:800;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease}
#fileModal .file-action.secondary,.upload-confirm-modal .file-action.secondary{border-color:rgba(118,216,226,.22);background:rgba(12,42,57,.54);color:#c8e8ec}
#fileModal .file-action.primary,.upload-confirm-modal .file-action.primary{border:0;background:linear-gradient(135deg,#2ad1d4,#6470ed);color:#071f27;box-shadow:0 8px 22px rgba(42,205,211,.2)}
#fileModal .file-action:not(:disabled):hover,.upload-confirm-modal .file-action:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.08)}
#fileModal .file-action:focus-visible,.upload-confirm-modal .file-action:focus-visible{outline:2px solid #8cf8f8;outline-offset:3px}
#fileModal .file-album-viewer{min-height:0}
#fileModal .file-album-nav{width:42px;height:42px;border-color:rgba(173,247,255,.38);background:rgba(3,18,30,.7);box-shadow:0 8px 24px rgba(0,0,0,.24);transition:transform .16s ease,background .16s ease,border-color .16s ease}
#fileModal .file-album-nav:hover,#fileModal .file-album-nav:focus-visible{transform:translateY(-50%) scale(1.06);background:#26d0d3;border-color:#9af7f8}
#fileModal .file-album-counter{bottom:14px;border:1px solid rgba(165,238,240,.2);background:rgba(3,18,30,.8);box-shadow:0 4px 15px rgba(0,0,0,.22);font-variant-numeric:tabular-nums}
.upload-confirm-modal .upload-caption-label{padding:0 20px 13px;color:#b9d9de;font-size:.73rem;font-weight:700;background:rgba(5,17,28,.64)}
.upload-confirm-modal .upload-caption-label textarea{min-height:70px;margin-top:7px;border-color:rgba(111,211,222,.18);border-radius:13px;background:rgba(3,16,27,.72);color:#ecfbfd;line-height:1.65;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.upload-confirm-modal .upload-caption-label textarea::placeholder{color:#71959d}
.upload-confirm-modal .upload-caption-label textarea:focus{border-color:rgba(100,235,236,.76);background:rgba(4,22,34,.9);box-shadow:0 0 0 3px rgba(59,212,215,.12)}
.upload-confirm-modal .file-preview[data-kind=collection]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;justify-items:stretch;gap:9px;place-items:stretch}
.upload-file-card{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid rgba(107,212,223,.17);border-radius:13px;background:rgba(10,37,51,.56);transition:transform .16s ease,border-color .16s ease,background .16s ease}
.upload-file-card:hover{transform:translateY(-1px);border-color:rgba(93,231,233,.45);background:rgba(18,65,81,.54)}
.upload-file-card-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:rgba(35,204,209,.13);font-size:1rem}
.upload-file-card-info{display:flex;flex-direction:column;gap:2px;min-width:0}.upload-file-card-info strong{overflow:hidden;color:#e8f9fb;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.upload-file-card-info small{color:#8cb7bf;font-size:.65rem}
@keyframes fileViewerOverlayIn{from{opacity:0}to{opacity:1}}@keyframes fileViewerPanelIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes filePreviewSpin{to{transform:rotate(360deg)}}
@media(max-width:600px){#fileModal.file-viewer-modal,.upload-confirm-modal{align-items:end;padding:0}#fileModal .file-viewer-panel,.upload-confirm-modal .upload-confirm-panel{width:100%;max-height:calc(100dvh - 8px);border-radius:25px 25px 0 0}#fileModal .file-viewer-header,.upload-confirm-modal .upload-confirm-header{min-height:72px;padding:17px 16px 12px}#fileModal .file-viewer-header::before,.upload-confirm-modal .upload-confirm-header::before{content:'';position:absolute;top:8px;left:50%;width:42px;height:4px;border-radius:99px;background:rgba(185,245,247,.28);transform:translateX(-50%)}#fileModal .file-viewer-stage,.upload-confirm-modal .upload-confirm-stage{padding:11px 13px}#fileModal .file-preview,.upload-confirm-modal .file-preview{min-height:clamp(185px,36dvh,360px);max-height:calc(100dvh - 355px);border-radius:16px}#fileModal .file-preview-image,.upload-confirm-modal .file-preview-image,#fileModal .file-preview-media,.upload-confirm-modal .file-preview-media{max-height:calc(100dvh - 390px)}#fileModal .file-viewer-details,.upload-confirm-modal .upload-confirm-details{padding:11px 16px}#fileModal .file-viewer-footer,.upload-confirm-modal .upload-confirm-footer{padding:11px 16px calc(12px + env(safe-area-inset-bottom))}#fileModal .file-modal-header h3,.upload-confirm-modal .file-modal-header h3{max-width:69vw}.upload-confirm-modal .upload-caption-label{padding-inline:16px}.upload-confirm-modal .file-preview[data-kind=collection]{grid-template-columns:1fr;gap:7px}.upload-file-card{padding:8px 9px}.upload-file-card-icon{width:31px;height:31px;flex-basis:31px}#fileModal .file-album-nav{width:37px;height:37px;font-size:27px}#fileModal .file-album-nav.previous{right:8px}#fileModal .file-album-nav.next{left:8px}}
@media(max-height:620px) and (min-width:601px){#fileModal .file-viewer-stage,.upload-confirm-modal .upload-confirm-stage{padding-block:10px}#fileModal .file-preview,.upload-confirm-modal .file-preview{min-height:150px;max-height:calc(100dvh - 260px)}#fileModal .file-preview-image,.upload-confirm-modal .file-preview-image,#fileModal .file-preview-media,.upload-confirm-modal .file-preview-media{max-height:calc(100dvh - 290px)}.upload-confirm-modal .upload-caption-label textarea{min-height:54px}}
@media(prefers-reduced-motion:reduce){#fileModal.file-viewer-modal,.upload-confirm-modal,#fileModal .file-viewer-panel,.upload-confirm-modal .upload-confirm-panel,#fileModal .file-action,.upload-confirm-modal .file-action,#fileModal .close-btn,.upload-confirm-modal .close-btn,#fileModal .file-album-nav,.upload-file-card{animation:none!important;transition:none!important}}
.forward-panel{isolation:isolate}.forward-source{position:relative;overflow:hidden}.forward-source::after{content:'';position:absolute;inset:auto -22px -30px auto;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(36,218,216,.18),transparent 68%);pointer-events:none}.forward-attachments{margin:0 20px 14px;padding:12px;border:1px solid rgba(113,217,225,.22);border-radius:16px;background:linear-gradient(145deg,rgba(10,32,47,.46),rgba(10,32,47,.22))}.forward-attachments-head{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:0 2px 10px;color:var(--ink);font-size:.75rem;font-weight:800}.forward-attachments-head>div{display:flex;align-items:center;gap:8px;white-space:nowrap}.forward-attachments-head small{color:var(--muted);font-size:.68rem;font-weight:600}.forward-attachments-toggle{border:0;border-radius:8px;padding:4px 7px;background:rgba(40,207,211,.12);color:var(--brand);font:inherit;font-size:.68rem;font-weight:800;cursor:pointer;transition:background .16s ease,color .16s ease}.forward-attachments-toggle:hover,.forward-attachments-toggle:focus-visible{background:var(--brand);color:#06212a;outline:none}.forward-attachment-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:158px;overflow:auto;padding:2px}.forward-attachment{display:grid;grid-template-columns:auto 32px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:8px;border:1px solid rgba(116,219,224,.16);border-radius:12px;color:var(--muted);font-size:.72rem;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}.forward-attachment:hover{transform:translateY(-1px);border-color:rgba(86,222,224,.48);box-shadow:0 5px 16px rgba(0,0,0,.12)}.forward-attachment.selected{border-color:rgba(57,211,215,.72);color:var(--text);background:rgba(25,210,213,.12)}.forward-attachment:focus-within{outline:2px solid rgba(66,220,223,.55);outline-offset:2px}.forward-attachment input{accent-color:#1bd6d7;margin:0}.forward-attachment-preview{display:grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:8px;background:rgba(22,197,205,.12);color:#81f3f4;font-size:.95rem}.forward-attachment-preview img{width:100%;height:100%;object-fit:cover}.forward-attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forward-footer{position:relative;box-shadow:0 -9px 20px rgba(5,18,30,.05)}.forward-footer small{line-height:1.55}.forward-target:focus-within{outline:2px solid rgba(62,211,215,.42);outline-offset:-2px}.forward-search:focus-within{border-color:rgba(65,214,217,.8);box-shadow:0 0 0 3px rgba(52,205,210,.12)}@media(max-width:460px){.forward-panel{border-radius:20px}.forward-attachment-list{grid-template-columns:1fr}.forward-header{padding:18px 16px 12px}.forward-source,.forward-attachments,.forward-search{margin-inline:16px}.forward-footer{padding-inline:16px}.forward-attachments-head{align-items:flex-start}.forward-attachments-head>div{flex-direction:column;align-items:flex-end;gap:3px}}
.forward-modal{background:radial-gradient(circle at 50% 0,rgba(26,113,139,.18),transparent 38%),rgba(2,9,17,.78);padding:clamp(12px,3vh,28px);backdrop-filter:blur(12px);animation:forwardOverlayIn .24s ease both}.forward-panel{width:min(100%,580px);max-height:min(800px,calc(100dvh - 24px));border-color:rgba(119,226,232,.2);border-radius:26px;background:linear-gradient(150deg,#102334 0%,#091725 58%,#07131f 100%);box-shadow:0 30px 90px rgba(0,0,0,.56),0 0 0 1px rgba(153,245,255,.04) inset;animation:forwardPanelIn .28s cubic-bezier(.2,.8,.2,1) both}.forward-header{position:relative;min-height:82px;padding:21px 22px 17px;border-bottom:1px solid rgba(142,224,232,.1);background:linear-gradient(125deg,rgba(36,213,216,.16),rgba(100,80,235,.09) 55%,transparent)}.forward-header h3{color:#f1fbff;letter-spacing:-.01em}.forward-kicker{color:#78f1f1}.forward-header .close-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(141,224,234,.18);border-radius:12px;background:rgba(4,19,31,.45);color:#bfe9ef;transition:transform .16s ease,background .16s ease,border-color .16s ease}.forward-header .close-btn:hover{transform:rotate(90deg);background:rgba(44,213,216,.16);border-color:rgba(110,242,244,.56)}.forward-header .close-btn:focus-visible{outline:2px solid #69edf0;outline-offset:3px}.forward-source{margin:16px 20px 13px;padding:12px 14px;border-color:rgba(95,218,228,.2);background:linear-gradient(130deg,rgba(32,196,205,.12),rgba(85,74,207,.1))}.forward-source-content{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-width:0}.forward-source-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:10px;background:rgba(89,228,229,.15);color:#8af4f2;font-size:1rem}.forward-source strong{color:#e8f9fc;line-height:1.55}.forward-source-label{color:#90b8c1}.forward-attachments{margin-bottom:13px;border-color:rgba(113,217,225,.18);background:rgba(6,23,36,.44)}.forward-attachments-head{color:#e6f8fb}.forward-attachments-head small{color:#9fc2c9}.forward-attachment-list{scrollbar-color:rgba(84,224,226,.48) transparent}.forward-attachment{min-height:50px;border-color:rgba(116,219,224,.13);background:rgba(10,31,46,.38);color:#a9c8ce}.forward-attachment.selected{border-color:rgba(78,225,226,.7);background:linear-gradient(130deg,rgba(28,201,204,.18),rgba(82,74,208,.11));color:#f0ffff}.forward-attachment:hover{background:rgba(37,125,138,.2)}.forward-search{margin-bottom:10px;border-color:rgba(116,218,227,.2);background:rgba(3,17,28,.56);color:#84b7c1}.forward-search input{color:#edfaff!important}.forward-search input::placeholder{color:#7898a1}.forward-destinations-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px 7px;color:#d9f3f6;font-size:.78rem;font-weight:800}.forward-destinations-head small{font-size:.66rem;color:#7ea9b2;font-weight:600}.forward-list{position:relative;min-height:196px;padding:4px 14px 14px;scrollbar-color:rgba(84,224,226,.48) transparent}.forward-list::before,.forward-list::after{content:'';position:sticky;display:block;left:0;right:0;height:10px;z-index:1;pointer-events:none}.forward-list::before{top:0;margin-bottom:-10px;background:linear-gradient(#091725,transparent)}.forward-list::after{bottom:0;margin-top:-10px;background:linear-gradient(transparent,#091725)}.forward-target{min-height:62px;margin:3px 0;padding:10px 11px;border:1px solid transparent;border-radius:16px;color:#d9f4f7}.forward-target:hover{background:rgba(41,139,153,.16);transform:translateY(-1px)}.forward-target.selected{border-color:rgba(79,222,223,.46);background:linear-gradient(125deg,rgba(31,204,207,.17),rgba(94,80,224,.12));box-shadow:0 7px 20px rgba(0,0,0,.12)}.forward-target input{width:19px;height:19px}.forward-target.selected .forward-avatar{box-shadow:0 0 0 2px rgba(103,243,244,.72),0 0 0 5px rgba(80,225,226,.1)}.forward-avatar{width:43px;height:43px;min-width:43px;border:1px solid rgba(185,250,255,.16)}.forward-target-info{gap:4px}.forward-target-info strong{color:#edfbfd;line-height:1.2}.forward-target-info small{color:#8db4bd;line-height:1.25}.forward-empty{gap:7px;align-content:center;min-height:196px;color:#afcbd0;text-align:center}.forward-empty strong{color:#e2f7f9;font-size:.9rem}.forward-empty small{max-width:230px;line-height:1.65}.forward-empty-icon{display:grid;place-items:center;width:46px;height:46px;margin:auto;border:1px solid rgba(100,219,226,.22);border-radius:16px;background:rgba(29,139,153,.12);color:#87f0f1;font-size:1.4rem}.forward-loading{display:flex;align-items:center;justify-content:center;gap:7px;min-height:196px}.forward-loading span{width:7px;height:7px;border-radius:50%;background:#6ce9ea;animation:forwardLoading 1s ease-in-out infinite}.forward-loading span:nth-child(2){animation-delay:.13s}.forward-loading span:nth-child(3){animation-delay:.26s}.forward-footer{min-height:74px;padding:14px 20px 17px;border-top-color:rgba(127,224,230,.14);background:linear-gradient(180deg,rgba(5,19,31,.24),rgba(4,14,24,.78));box-shadow:0 -14px 30px rgba(0,0,0,.14)}.forward-footer small{color:#b0ced4}.forward-footer .primary{min-height:42px;min-width:136px;border-radius:13px;background:linear-gradient(135deg,#2bd4d5,#6370ed);box-shadow:0 8px 22px rgba(41,201,210,.18);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.forward-footer .primary:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 11px 26px rgba(41,201,210,.3)}.forward-footer .primary:disabled{background:rgba(82,113,127,.3);color:#7898a2;box-shadow:none}.forward-footer .primary:focus-visible{outline:2px solid #9afbfa;outline-offset:3px}@keyframes forwardOverlayIn{from{opacity:0}to{opacity:1}}@keyframes forwardPanelIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes forwardLoading{0%,80%,100%{transform:scale(.7);opacity:.42}40%{transform:scale(1.18);opacity:1}}@media(max-width:560px){.forward-modal{align-items:end;padding:0}.forward-panel{width:100%;max-height:calc(100dvh - 8px);border-radius:25px 25px 0 0}.forward-header{min-height:76px;padding:17px 16px 13px}.forward-header::before{content:'';position:absolute;top:8px;left:50%;width:42px;height:4px;border-radius:99px;background:rgba(183,245,248,.3);transform:translateX(-50%)}.forward-source,.forward-attachments,.forward-search{margin-inline:16px}.forward-destinations-head{padding-inline:18px}.forward-list{min-height:168px;padding-inline:10px}.forward-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:9px}.forward-footer .primary{min-width:124px;font-size:.78rem}}@media(prefers-reduced-motion:reduce){.forward-modal,.forward-panel,.forward-loading span,.forward-target,.forward-attachment,.forward-header .close-btn,.forward-footer .primary{animation:none!important;transition:none!important}}
.forward-attachment-list{grid-template-columns:1fr;max-height:246px}.forward-attachment{grid-template-columns:20px 76px minmax(0,1fr) 24px;min-height:68px;padding:7px 8px;cursor:pointer}.forward-attachment input{width:18px;height:18px;align-self:center}.forward-attachment-preview{width:76px;height:54px;padding:0;border:1px solid rgba(125,229,234,.18);border-radius:10px;background:rgba(3,18,30,.76);color:#9bf3f2;cursor:zoom-in;transition:transform .16s ease,border-color .16s ease,filter .16s ease}.forward-attachment-preview:hover{transform:scale(1.035);border-color:rgba(116,243,243,.72);filter:brightness(1.08)}.forward-attachment-preview:focus-visible{outline:2px solid #86f5f5;outline-offset:2px}.forward-attachment-preview img{display:block;width:100%;height:100%;object-fit:cover}.forward-attachment-preview.preview-unavailable{font-size:.66rem;cursor:default}.forward-attachment-info{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}.forward-attachment-name{overflow:hidden;color:#e9fbfd;font-size:.76rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.forward-attachment-detail{overflow:hidden;color:#91bbc3;font-size:.65rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.forward-attachment-state{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(141,190,198,.3);border-radius:50%;color:transparent;font-size:.72rem;font-weight:900;transition:background .16s ease,border-color .16s ease,color .16s ease}.forward-attachment.selected .forward-attachment-state{border-color:#65eced;background:#2bd3d4;color:#06222a}.forward-attachment:not(.selected){opacity:.64}.forward-attachment:not(.selected) .forward-attachment-preview{filter:saturate(.45) brightness(.72)}@media(max-width:460px){.forward-attachment{grid-template-columns:19px 68px minmax(0,1fr) 22px}.forward-attachment-preview{width:68px;height:52px}.forward-attachment-list{max-height:230px}}
.message-action-menu{
  position:absolute!important;
  z-index:80!important;
  top:50%!important;
  inset-inline-end:calc(100% + 7px)!important;
  bottom:auto!important;
  inset-inline-start:auto!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:4px!important;
  padding:5px!important;
  border:1px solid rgba(91,190,235,.28)!important;
  border-radius:13px!important;
  background:rgba(5,14,27,.97)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 18px rgba(0,217,239,.1)!important;
  backdrop-filter:blur(14px)!important;
}
.message.mine .message-action-menu{inset-inline-end:calc(100% + 7px)!important;inset-inline-start:auto!important}
.message-action-menu[hidden]{display:none!important}
.message-action-menu .message-action{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(100,150,255,.2)!important;
  border-radius:9px!important;
  background:rgba(13,29,50,.86)!important;
  color:#b7d2ed!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.message-action-menu .message-action:hover,.message-action-menu .message-action:focus-visible{
  transform:translateY(-1px) scale(1.08)!important;
  border-color:rgba(0,225,239,.72)!important;
  background:linear-gradient(145deg,rgba(0,157,190,.44),rgba(91,52,191,.5))!important;
  color:#f2ffff!important;
  outline:none!important;
}
.message-action-menu .message-action::before{font-size:15px!important}
.message-footer-incoming{
  direction:ltr!important;
}
.message-footer-incoming .message-reactions,
.message-footer-incoming .message-reactions-static,
.message-footer-incoming .reaction-display{
  order:2!important;
  margin:0!important;
  margin-inline-start:0!important;
  margin-inline-end:auto!important;
}
.message-footer-incoming .message-actions{
  order:1!important;
  margin:0!important;
  margin-inline-start:0!important;
  margin-inline-end:0!important;
}
.message-footer-incoming .message-meta{
  order:3!important;
  margin:0!important;
  margin-inline-start:auto!important;
  margin-inline-end:0!important;
  direction:rtl!important;
}
.message-footer-incoming .message-action-menu{
  inset-inline-start:calc(100% + 7px)!important;
  inset-inline-end:auto!important;
}
.message-footer-outgoing{
  direction:ltr!important;
}
.message-footer-outgoing .message-meta{
  order:1!important;
  margin:0!important;
  margin-inline-start:0!important;
  margin-inline-end:auto!important;
  direction:rtl!important;
}
.message-footer-outgoing .message-actions{
  order:3!important;
  margin:0 0 0 auto!important;
}
.message-footer-outgoing .message-reactions,
.message-footer-outgoing .message-reactions-static,
.message-footer-outgoing .reaction-display{
  order:2!important;
  margin:0 0 0 7px!important;
}
.message-footer-outgoing .message-action-menu{
  inset-inline-start:calc(100% + 7px)!important;
  inset-inline-end:auto!important;
}
.message:has(.message-action-toggle){
  min-width:min(230px,calc(100% - 10px));
}
.message-body{min-width:0;width:100%}
.message-footer{
  min-width:206px;
  width:100%;
}
.message-action-menu{
  max-width:calc(100vw - 24px)!important;
  overflow-x:auto!important;
  scrollbar-width:thin;
}
@media(max-width:700px){
  .message:has(.message-action-toggle){
    min-width:min(230px,calc(100% - 8px));
  }
  .message-footer{min-width:0;width:100%}
  .message-action-menu{max-width:calc(100vw - 20px)!important}
}
.message-footer .message-meta{
  order:3!important;
  margin:0!important;
  direction:rtl!important;
  flex:0 0 auto!important;
}
.message-footer .message-reaction{
  white-space:nowrap!important;
  min-width:28px!important;
  min-height:25px!important;
  padding:2px 6px!important;
  border-radius:999px!important;
  line-height:1!important;
}
.message-footer .message-reactions-static .message-reaction{
  pointer-events:none!important;
  cursor:default!important;
  opacity:.9;
}
.message-footer .message-reaction.reaction-heart.active,
.message-footer .message-reaction.reaction-heart:not(button):not(:empty){
  color:#ff6fae!important;
}
@media(max-width:700px){
  .message-footer{gap:4px!important}
  .message-footer .message-reaction{min-width:25px!important;padding-inline:5px!important;font-size:.68rem!important}
}

/* While the reaction picker is open, keep message operations out of the way.
   The state is removed by the reaction controller when the picker closes. */
.message.reactions-open .message-actions,
.message.reactions-open .message-actions button{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Open message menus must escape the stacking context of neighbouring
   bubbles. Keep every action visible in one non-scrolling row. */
.message:has(.message-action-menu:not([hidden])),
.message:has(.reaction-picker-menu:not([hidden])){
  z-index:2147483000!important;
  isolation:isolate!important;
}
.message:has(.message-action-menu:not([hidden])) .message-action-menu,
.message:has(.reaction-picker-menu:not([hidden])) .reaction-picker-menu{
  z-index:2147483647!important;
}
.message-action-menu{
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  overflow:visible!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
}
.message-action-menu .message-action{
  flex:0 0 30px!important;
}
@media(max-width:700px){
  .message-action-menu{
    max-width:none!important;
    overflow:visible!important;
  }
  .message-action-menu .message-action{flex-basis:28px!important}
}

/* Mobile-safe native fallback for voice messages. */
.audio-message-player-native{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:34px!important;
  border-radius:10px;
  accent-color:var(--chat-accent,#22d8d7);
}
.audio-message-player-native::-webkit-media-controls-panel{
  background:rgba(7,24,38,.9);
}

/* Authentication boundary: the private application shell must never paint
   while the session is unknown or unauthenticated. Keep this rule last so
   later theme/layout rules cannot override the native hidden attribute. */
#app[hidden],
#auth[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
@media(max-width:700px){
  .audio-message-player-native{height:32px!important;min-height:32px}
  .audio-message-card{touch-action:manipulation}
  .waveform-play{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
}

/* Audio surfaces are isolated so recording previews and sent audio messages
   cannot leak layout rules into the chat, composer, or message actions. */
.inline-audio-recorder{
  position:relative!important;
  z-index:3!important;
  isolation:isolate!important;
  contain:layout paint!important;
  width:calc(100% - 28px)!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.inline-audio-recorder *{box-sizing:border-box!important}
.inline-audio-preview,.inline-audio-preview .waveform-player,.inline-audio-preview .waveform-controls{min-width:0!important;max-width:100%!important}
.inline-audio-preview .compact-audio-preview{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:5px!important}
.audio-source-hidden{display:none!important;width:0!important;height:0!important;visibility:hidden!important;pointer-events:none!important}
.audio-message-card{position:relative!important;isolation:isolate!important;contain:layout paint!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.audio-message-card *{box-sizing:border-box!important}
.audio-message-card .waveform-player{min-width:0!important;max-width:100%!important}
.audio-message-card .waveform{min-width:0!important;max-width:100%!important;overflow:hidden!important}
.message-body .audio-message-card + .message-footer{position:relative!important;z-index:1!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.message-body .audio-message-card + .message-footer .message-actions,
.message-body .audio-message-card + .message-footer .message-reactions{max-width:100%!important;min-width:0!important}
@media(max-width:700px){
  .inline-audio-recorder{width:calc(100% - 14px)!important;margin-inline:7px!important}
  .audio-message-card{width:min(238px,100%)!important}
}

/* Unified audio card visual language: recording, preview and sent playback
   share the same compact messenger surface. */
.inline-audio-recorder{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:7px!important;
  min-height:48px!important;
  margin:0 14px 6px!important;
  padding:7px 9px!important;
  border:1px solid rgba(34,211,216,.22)!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,rgba(13,46,59,.88),rgba(14,31,51,.9))!important;
  box-shadow:0 8px 24px rgba(0,0,0,.2)!important;
}
.inline-audio-status{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  max-width:88px!important;
  direction:rtl!important;
}
.inline-audio-status strong{font-size:.68rem!important;color:#eafcff!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline-audio-status small{display:none!important}
.inline-audio-status time{font-size:.58rem!important;color:#9fc4cc!important;min-width:34px!important}
.inline-audio-dot{width:7px!important;height:7px!important;box-shadow:0 0 0 3px rgba(255,83,112,.1)!important}
.inline-audio-preview{display:block!important;min-width:0!important;width:100%!important;overflow:hidden!important}
.inline-audio-preview .waveform-player,
.inline-audio-preview .compact-audio-preview{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:4px!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  background:transparent!important;
}
.inline-audio-preview .waveform{height:27px!important;padding:2px 0!important;min-width:0!important}
.inline-audio-preview .waveform-controls{display:flex!important;align-items:center!important;gap:3px!important;direction:ltr!important}
.inline-audio-preview .waveform-play{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;font-size:10px!important}
.inline-audio-preview .waveform-time{min-width:52px!important;font-size:.55rem!important;color:#9fc4cc!important}
.inline-audio-actions{display:flex!important;align-items:center!important;gap:4px!important;flex:none!important}
.inline-audio-actions button{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;border:1px solid rgba(125,198,255,.3)!important;background:rgba(10,30,49,.8)!important}
.inline-audio-actions button:hover{border-color:#55eff0!important;box-shadow:0 0 12px rgba(0,217,239,.22)!important}
.inline-audio-recorder.has-preview .inline-audio-dot{background:#8a83ff!important;animation:none!important}
.inline-audio-recorder.is-recording .inline-audio-preview .waveform{opacity:.82!important}
.inline-audio-recorder .live-waveform-player .waveform{height:27px!important}
@media(max-width:700px){
  .inline-audio-recorder{grid-template-columns:auto minmax(0,1fr) auto!important;margin:0 7px 5px!important;padding:6px 8px!important;gap:5px!important;border-radius:15px!important}
  .inline-audio-status{max-width:68px!important}
  .inline-audio-status strong{font-size:.62rem!important}
  .inline-audio-status time{min-width:32px!important;font-size:.52rem!important}
  .inline-audio-preview .waveform-play{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
  .inline-audio-preview .waveform-time{min-width:47px!important;font-size:.51rem!important}
  .inline-audio-actions button{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}
}

/* Delete confirmation modal */
.delete-confirm-panel{width:min(100%,390px)!important;max-width:390px!important;padding:22px!important}
.delete-confirm-text{margin:14px 0 4px;color:var(--muted);line-height:1.9;text-align:center}
.delete-confirm-panel .account-actions{display:flex;flex-direction:row;gap:8px;margin-top:18px}
.delete-confirm-panel .account-actions button{flex:1 1 0;width:0;min-width:0;box-sizing:border-box;justify-content:center;text-align:center}
.delete-confirm-panel .danger-button{background:linear-gradient(135deg,#ef476f,#b91c4c)!important;box-shadow:0 9px 18px rgba(185,28,76,.28)!important}
.delete-confirm-panel .danger-button:hover{filter:brightness(1.08)}
@media(max-width:700px){
  .delete-confirm-panel{width:calc(100% - 24px)!important;border-radius:20px!important;padding:18px!important}
  .delete-confirm-panel .account-actions{flex-direction:row!important}
}

/* The recorder uses a late grid rule; keep the native hidden contract
   stronger so canceling recording really removes the panel on every device. */
.inline-audio-recorder[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* Destructive actions stay reachable on touch screens. */
@media(max-width:700px){
  .chat-actions #deleteConversation{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  #groupManageModal .group-panel{
    overflow-y:auto!important;
    max-height:96dvh!important;
  }
  #groupManageModal #deleteGroup{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    width:100%!important;
    min-height:44px!important;
    margin-top:10px!important;
  }
}

/* Fixed application header rhythm. */
.profile,.chat-header{
  min-height:72px!important;
  max-height:72px!important;
  height:72px!important;
}

/* Reaction picker: the same anchored, fixed-size interaction contract as the
   message-tools (+) menu. */
.message-footer .message-reactions{position:relative!important;overflow:visible!important;isolation:isolate}
.message-footer .reaction-add{position:relative!important;z-index:3!important;display:grid!important;place-items:center!important;cursor:pointer!important}
.message-footer .reaction-add[aria-expanded="true"]{background:linear-gradient(135deg,#17cbd3,#5b52ee)!important;color:#fff!important;transform:rotate(45deg)!important}
.message-footer .reaction-picker-menu{position:absolute!important;top:50%!important;inset-inline-start:calc(100% + 7px)!important;inset-inline-end:auto!important;bottom:auto!important;transform:translateY(-50%)!important;z-index:90!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:4px!important;width:116px!important;max-width:116px!important;height:40px!important;min-height:40px!important;padding:4px!important;box-sizing:border-box!important;border:1px solid rgba(91,190,235,.28)!important;border-radius:13px!important;background:rgba(5,14,27,.97)!important;box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 18px rgba(0,217,239,.1)!important;backdrop-filter:blur(14px)!important;overflow:hidden!important;direction:ltr!important}
.message.mine .message-footer .reaction-picker-menu{inset-inline-start:auto!important;inset-inline-end:calc(100% + 7px)!important}
.message-footer .reaction-picker-menu[hidden]{display:none!important}
.message-footer .reaction-picker-option{position:static!important;display:grid!important;place-items:center!important;flex:0 0 32px!important;width:32px!important;height:30px!important;min-width:32px!important;min-height:30px!important;margin:0!important;padding:0!important;border:1px solid rgba(100,150,255,.2)!important;border-radius:9px!important;background:rgba(13,29,50,.86)!important;color:#b7d2ed!important;font-size:16px!important;line-height:1!important;opacity:1!important;pointer-events:auto!important}
.message-footer .reaction-picker-option:hover,.message-footer .reaction-picker-option:focus-visible{transform:translateY(-1px) scale(1.08)!important;border-color:rgba(0,225,239,.72)!important;background:linear-gradient(145deg,rgba(0,157,190,.44),rgba(91,52,191,.5))!important;color:#f2ffff!important;outline:none!important}
@media(max-width:700px){
  .message-footer .reaction-picker-menu{width:110px!important;max-width:110px!important;height:36px!important;min-height:36px!important;padding:3px!important;gap:3px!important}
  .message-footer .reaction-picker-option{flex-basis:30px!important;width:30px!important;height:28px!important;min-width:30px!important;min-height:28px!important;font-size:15px!important}
}

/* Reaction trigger: compact circular control with a menu anchored to the
   trigger itself, never to the whole reaction strip. */
.message-footer .reaction-add-wrap{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:32px!important;
  height:30px!important;
  overflow:visible!important;
}
.message-footer .reaction-add{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  padding:0!important;
  border:1px solid rgba(111,225,237,.42)!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,rgba(9,40,61,.98),rgba(20,31,61,.98))!important;
  color:#bdeff5!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.18)!important;
  transform:none!important;
}
.message-footer .reaction-add:hover,
.message-footer .reaction-add:focus-visible{
  border-color:#67f4f1!important;
  color:#fff!important;
  background:linear-gradient(145deg,#0d6b83,#413fa0)!important;
  box-shadow:0 0 0 3px rgba(52,222,228,.12),0 6px 15px rgba(0,0,0,.24)!important;
  outline:none!important;
}
.message-footer .reaction-add-icon{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  transition:transform .18s ease!important;
}
.message-footer .reaction-add[aria-expanded="true"]{
  background:linear-gradient(145deg,#16bfc8,#574fe9)!important;
}
.message-footer .reaction-add[aria-expanded="true"] .reaction-add-icon{
  transform:rotate(45deg)!important;
}
.message-footer .reaction-add-wrap .reaction-picker-menu{
  top:50%!important;
  inset-inline-start:calc(100% + 7px)!important;
  inset-inline-end:auto!important;
  transform:translateY(-50%)!important;
  margin:0!important;
}
.message.mine .message-footer .reaction-add-wrap .reaction-picker-menu{
  inset-inline-start:auto!important;
  inset-inline-end:calc(100% + 7px)!important;
}
@media(max-width:700px){
  .message-footer .reaction-add-wrap{width:30px!important;height:28px!important}
  .message-footer .reaction-add{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
  .message-footer .reaction-add-icon{width:15px!important;height:15px!important}
}

/* Keep message metadata, reactions and the reaction trigger in one stable
   footer row. This is especially important for compact audio bubbles where
   flex wrapping used to lift the reaction strip above the metadata. */
.message-footer{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  min-height:28px!important;
  gap:6px!important;
  overflow:visible!important;
}
.message-footer .message-meta{
  order:1!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:0!important;
  margin:0!important;
  white-space:nowrap!important;
}
.message-footer .message-reactions{
  order:2!important;
  display:flex!important;
  flex:0 1 auto!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
  height:30px!important;
  margin:0!important;
  gap:4px!important;
  white-space:nowrap!important;
}
.message-footer .message-reaction{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  margin:0!important;
}
.message-footer .message-actions{
  order:3!important;
  flex:0 0 auto!important;
}
.message-footer .reaction-picker-menu{
  height:40px!important;
  min-height:40px!important;
  flex-wrap:nowrap!important;
}
.audio-message-card + .message-footer{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
}
@media(max-width:700px){
  .message-footer{gap:5px!important;min-height:27px!important}
  .message-footer .message-reactions{height:28px!important;gap:3px!important}
  .message-footer .message-reaction{padding-inline:6px!important;font-size:.65rem!important}
}

/* One unified message menu: reaction choices live beside reply/forward/delete
   and the footer keeps only one trigger button. */
.message-footer .reaction-add,
.message-footer .reaction-add-wrap,
.message-footer .reaction-picker-menu{
  display:none!important;
}
.message-action-menu .reaction-action{
  display:grid!important;
  place-items:center!important;
  font-size:16px!important;
  line-height:1!important;
  color:#ffd46e!important;
}
.message-action-menu .reaction-action::before{
  display:none!important;
  content:none!important;
}
.message-action-menu .reaction-action.reaction-dislike{color:#ffcf7b!important}
.message-action-menu .reaction-action.reaction-heart{color:#ff8caf!important}
.message-action-menu .reaction-action:hover,
.message-action-menu .reaction-action:focus-visible{
  color:#fff!important;
}

/* Phase boundary UI normalization.
   These are the final contracts for message footers, audio cards and menus;
   legacy theme layers above may style colors, but cannot change geometry. */
.message,
.message-body,
.message-footer{
  overflow:visible!important;
}
.message{
  position:relative!important;
  isolation:isolate!important;
}
.message-footer{
  position:relative!important;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  gap:6px!important;
  padding-block:3px 0!important;
  overflow:visible!important;
}
.message-footer .message-meta{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
}
.message-footer .message-reactions,
.message-footer .message-reactions-static,
.message-footer .reaction-display{
  display:flex!important;
  flex:0 1 auto!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
  height:28px!important;
  gap:3px!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.message-footer .message-actions{
  position:relative!important;
  inset:auto!important;
  z-index:4!important;
  display:flex!important;
  flex:0 0 auto!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  overflow:visible!important;
}
.message-footer .message-action-toggle{
  position:relative!important;
  z-index:5!important;
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
}
.message-footer .message-action-menu{
  position:absolute!important;
  top:50%!important;
  inset-inline-start:calc(100% + 7px)!important;
  inset-inline-end:auto!important;
  bottom:auto!important;
  z-index:2147483647!important;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  gap:4px!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  min-height:36px!important;
  padding:3px!important;
  transform:translateY(-50%)!important;
  border:1px solid rgba(91,190,235,.3)!important;
  border-radius:14px!important;
  background:rgba(5,14,27,.98)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 20px rgba(0,217,239,.12)!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.message-footer .message-action-menu[hidden]{display:none!important}
.message.mine .message-footer .message-action-menu{
  inset-inline-start:auto!important;
  inset-inline-end:calc(100% + 7px)!important;
}
.message:has(.message-action-menu:not([hidden])),
.message:has(.reaction-picker-menu:not([hidden])){
  z-index:2000!important;
}
.message-body .audio-message-card + .message-footer{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  min-width:0!important;
  width:100%!important;
  gap:6px!important;
  overflow:visible!important;
}
.message-body .audio-message-card + .message-footer .message-actions{
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
}
.message-body .audio-message-card + .message-footer .message-reactions,
.message-body .audio-message-card + .message-footer .reaction-display{
  flex:0 1 auto!important;
  min-width:0!important;
  margin:0!important;
}
@media(max-width:700px){
  .message-footer{gap:4px!important;min-height:28px!important}
  .message-footer .message-actions,
  .message-footer .message-action-toggle{width:28px!important;min-width:28px!important}
  .message-footer .message-action-toggle{height:28px!important;min-height:28px!important}
  .message-footer .message-action-menu{min-height:34px!important;gap:3px!important;padding:2px!important}
  .message-footer .message-action-menu .message-action{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
}

/* Keep the jump-to-latest control above the message stack and composer. */
.chat > #scrollToLatest{
  position:absolute!important;
  z-index:2147483000!important;
  pointer-events:auto!important;
  isolation:isolate;
  transform:translateZ(0);
}
.chat > #scrollToLatest[hidden]{display:none!important}
.chat > #scrollToLatest:focus-visible{
  outline:3px solid rgba(124,251,255,.8);
  outline-offset:3px;
}
/* Unread conversations: clear, compact and accessible visual cue. */
#users .user.has-new-message,
#users .group-row.has-new-message{
  position:relative;
  border-color:rgba(0,225,239,.62);
  background:linear-gradient(100deg,rgba(0,151,184,.22),rgba(87,48,170,.2));
  box-shadow:inset 3px 0 #00d9ef,0 8px 20px rgba(0,217,239,.12);
}
#users .user.has-new-message::after,
#users .group-row.has-new-message::after{
  content:"";
  position:absolute;
  inset:7px auto 7px 0;
  width:3px;
  border-radius:0 4px 4px 0;
  background:#7cfbff;
  box-shadow:0 0 12px rgba(0,225,239,.9);
  pointer-events:none;
}
#users .has-new-message strong{color:#eaffff;font-weight:800}
#users .has-new-message small{color:#9beff4}
#users .unread-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:22px;
  height:22px;
  padding:0 6px;
  margin-inline-start:auto;
  border-radius:999px;
  color:#041522;
  background:linear-gradient(135deg,#7cfbff,#40d9c8);
  box-shadow:0 0 0 3px rgba(64,217,200,.12),0 4px 12px rgba(0,217,239,.24);
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  direction:ltr;
  z-index:2;
}
#users .has-new-message .unread-badge{animation:unreadPulse 2.2s ease-in-out infinite}
.conversation-pin-indicator{
  position:absolute;
  inset-inline-start:10px;
  top:9px;
  z-index:4;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid rgba(255,220,121,.72);
  border-radius:9px;
  background:linear-gradient(145deg,rgba(255,205,83,.3),rgba(177,111,20,.22));
  color:#ffe28a;
  font-size:.92rem;
  font-style:normal;
  line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.75);
  box-shadow:0 4px 12px rgba(0,0,0,.3),0 0 0 3px rgba(255,198,72,.08);
  pointer-events:none;
}
html[data-theme="light"] .conversation-pin-indicator{border-color:#d9a93d;background:linear-gradient(145deg,#fff4bd,#ffe18a);color:#825900;text-shadow:none;box-shadow:0 3px 10px rgba(122,88,0,.2),0 0 0 3px rgba(217,169,61,.12)}
html[data-theme="classic"] .conversation-pin-indicator{border-color:#d39a45;background:linear-gradient(145deg,#5a3b1e,#3c2918);color:#ffd27a}
@keyframes unreadPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(64,217,200,.12),0 4px 12px rgba(0,217,239,.24)}
  50%{box-shadow:0 0 0 6px rgba(64,217,200,.05),0 4px 18px rgba(0,217,239,.42)}
}
@media (prefers-reduced-motion:reduce){#users .has-new-message .unread-badge{animation:none}}

/* Public landing refresh: clearer discovery layout, stronger contrast and
   touch-safe controls while preserving the existing landing markup. */
.public-landing{position:relative;isolation:isolate;max-width:none!important;padding-top:24px;background:radial-gradient(900px 500px at 8% 0,rgba(32,217,220,.14),transparent 62%),linear-gradient(180deg,#071018,#0a1018 60%,#08141b)}
.public-landing:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 0 55%,rgba(91,114,255,.08));pointer-events:none}
.public-landing>*{max-width:1160px}
.landing-header{position:sticky;top:0;z-index:15;padding:10px 0 14px;border-bottom-color:rgba(66,212,208,.24);background:rgba(7,14,22,.9);backdrop-filter:blur(14px)}
.landing-brand strong{color:#efffff}.landing-brand small{color:#8faeb9}
.landing-actions button{min-height:42px;padding-inline:16px;border-radius:12px}.landing-login{color:#9ef2ef;border-color:rgba(66,212,208,.45);background:rgba(9,30,39,.8)}
.landing-register{background:linear-gradient(135deg,#20d9dc,#5c72ff);box-shadow:0 10px 22px rgba(32,217,220,.18)}
.landing-hero{min-height:350px;margin-top:22px;padding:clamp(34px,6vw,72px) clamp(22px,6vw,70px);border:1px solid rgba(66,212,208,.25);border-radius:28px;background:linear-gradient(120deg,rgba(15,38,49,.96),rgba(10,22,34,.9));box-shadow:0 24px 60px rgba(0,0,0,.3)}
.landing-hero small,.landing-section-title small{color:#63edef}.landing-hero h1{color:#f0ffff}.landing-hero h1 span{color:#63edef}.landing-hero p{color:#aac2c9;max-width:56ch}
.landing-orbit{border-color:rgba(66,212,208,.35);background:radial-gradient(circle,rgba(32,217,220,.18),transparent 64%);box-shadow:inset 0 0 45px rgba(32,217,220,.1),0 22px 50px rgba(0,0,0,.2)}
.landing-orbit span{background:#12303b;color:#bffffb;border-color:rgba(99,237,239,.25)}.landing-orbit span:nth-child(3){background:linear-gradient(145deg,#20d9dc,#5c72ff)}
.landing-channels{padding-top:44px}.landing-section-title h2{color:#efffff}.landing-section-title>span{color:#9bb4bb;border-color:rgba(66,212,208,.25);background:rgba(9,29,38,.65)}
.public-channel-cards{gap:16px}.public-channel-card{min-height:164px;border-color:rgba(66,212,208,.25);background:linear-gradient(145deg,rgba(19,44,54,.9),rgba(11,23,34,.96));box-shadow:0 14px 30px rgba(0,0,0,.25);transition:transform .2s,border-color .2s,box-shadow .2s}
.public-channel-card:hover{transform:translateY(-4px);border-color:rgba(99,237,239,.65);box-shadow:0 20px 38px rgba(0,0,0,.34),0 0 22px rgba(32,217,220,.08)}
.public-channel-avatar{border:1px solid rgba(99,237,239,.35);box-shadow:0 10px 22px rgba(0,0,0,.25)}
.public-channel-card-body h3{color:#efffff}.public-channel-card-body small{color:#63edef}.public-channel-card-body p{color:#a4bbc1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.public-channel-card-link{background:linear-gradient(135deg,#20d9dc,#5c72ff);min-height:38px;display:inline-flex;align-items:center;justify-content:center}
.landing-loading,.landing-empty{padding:48px 24px;color:#9bb4bb;border-color:rgba(66,212,208,.3);background:rgba(9,25,34,.55)}
@media(max-width:700px){.public-landing{padding:10px 14px 30px}.landing-header{padding-bottom:12px}.landing-hero{min-height:280px;margin-top:14px;padding:28px 18px;border-radius:22px}.landing-hero p{font-size:.84rem}.landing-channels{padding-top:30px}.public-channel-card{min-height:150px;padding:15px}}

/* Stable dark public/auth surface. These final rules deliberately do not
   follow system colour preferences, keeping MiniGap's public experience dark. */
:root{color-scheme:dark}
html,body{background:#070c13!important;color:#eaf7fb}
body{overflow:hidden}
.public-landing,
.auth{
  background:
    radial-gradient(920px 560px at 7% -10%,rgba(27,211,220,.15),transparent 64%),
    radial-gradient(760px 520px at 98% 100%,rgba(91,114,255,.14),transparent 66%),
    #070c13!important;
}
.public-landing{overflow:auto;scrollbar-gutter:stable}
.landing-logo,.brand-mark{background-image:url('/assets/minigap-logo-192.png')!important;background-color:#0b1b27}
.landing-orbit{display:grid;place-items:center;overflow:visible}
.landing-orbit>img{width:64px;height:64px;object-fit:cover;border:1px solid rgba(139,247,246,.56);border-radius:21px;box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 28px rgba(31,216,220,.2)}
.landing-orbit span{animation:orbitFloat 5.6s cubic-bezier(.45,.05,.3,1) infinite}
.landing-orbit span:nth-of-type(2){animation-delay:-1.8s}.landing-orbit span:nth-of-type(3){animation-delay:-3.5s}
@keyframes orbitFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.landing-header,.landing-hero,.public-channel-card,.landing-public-stats span{animation:surfaceReveal .48s cubic-bezier(.2,.8,.2,1) both}
.landing-hero{animation-delay:.06s}.landing-channels{animation:surfaceReveal .52s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes surfaceReveal{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.auth{
  min-height:100dvh!important;
  height:100dvh!important;
  display:grid!important;
  place-items:center!important;
  padding:clamp(14px,3vw,30px)!important;
  overflow:hidden!important;
}
.auth-card{
  max-height:none!important;
  overflow:visible!important;
  width:min(100%,420px)!important;
  padding:clamp(20px,3.2vw,32px)!important;
  animation:authReveal .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes authReveal{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.auth-card form{animation:formFade .22s ease-out both}
@keyframes formFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.brand-mark{width:58px;height:58px;border-radius:18px;box-shadow:0 14px 32px rgba(0,0,0,.3),0 0 24px rgba(31,216,220,.2)}
.auth h1{color:#f0ffff}.auth p{color:#9bb4bd}
.tabs{background:rgba(4,14,22,.72)}
.tabs .active{background:linear-gradient(135deg,rgba(25,205,211,.22),rgba(92,76,255,.42));color:#edffff}
.auth input{background:rgba(6,17,26,.82);color:#eefcff;border-color:rgba(86,164,181,.34)}
.auth input:focus{border-color:#4fdcdb;box-shadow:0 0 0 4px rgba(32,217,220,.12)}
@media(max-height:720px){
  .auth{place-items:start center!important;overflow:auto!important;padding-block:12px!important}
  .auth-card{margin:auto 0!important;padding:18px 22px!important}
  .brand-mark{width:46px;height:46px;border-radius:14px}
  .auth h1{margin-top:10px;font-size:24px}.auth p{margin-bottom:12px}
  .tabs{margin-bottom:11px}.tabs button{min-height:38px}
  .auth label{margin-top:8px}.auth input{min-height:41px}.auth .primary{min-height:42px;margin-top:13px}
}
@media(max-width:700px) and (min-height:721px){
  .auth-card{width:min(100%,390px)!important}
}
@media(prefers-reduced-motion:reduce){
  .landing-header,.landing-hero,.landing-channels,.public-channel-card,.auth-card,.auth-card form,.landing-orbit span{animation:none!important}
}

/* Main public landing quality pass: discovery, conversion and responsive
   navigation are intentionally refined here without affecting the chat UI. */
.public-landing{padding-bottom:56px!important}
.landing-brand{text-decoration:none}.landing-brand:focus-visible{outline:3px solid rgba(99,237,239,.6);outline-offset:5px;border-radius:14px}
.landing-header{gap:14px}.landing-actions button{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.landing-actions button:focus-visible,.landing-hero-actions button:focus-visible,.landing-channel-search:focus-within{outline:3px solid rgba(99,237,239,.45);outline-offset:3px}
.landing-hero{align-items:center}.landing-hero-copy{max-width:650px}.landing-hero h1{text-wrap:balance}.landing-hero p{max-width:54ch}
.landing-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.landing-explore,.landing-hero-register{min-height:44px;border-radius:12px;padding:10px 15px;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}.landing-explore{border:1px solid rgba(99,237,239,.48);background:linear-gradient(135deg,#20d9dc,#5c72ff);color:#04121a;box-shadow:0 10px 24px rgba(32,217,220,.18)}.landing-explore span{margin-inline-start:5px;font-size:1.05rem}.landing-explore:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(32,217,220,.27)}.landing-hero-register{border:1px solid rgba(99,237,239,.28);background:rgba(8,27,37,.72);color:#dffffe}.landing-hero-register:hover{border-color:#63edef;background:rgba(18,55,66,.8)}
.landing-trust{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:16px;color:#96b9bf;font-size:.73rem}.landing-trust span{display:inline-flex;align-items:center;gap:5px}.landing-trust span::first-letter{color:#63edef}
.landing-public-stats{margin-top:2px!important;margin-bottom:24px!important}.landing-public-stats span{min-height:76px;align-content:center;transition:transform .2s ease,border-color .2s ease}.landing-public-stats span:hover{transform:translateY(-3px);border-color:rgba(99,237,239,.58)}
.landing-channel-toolbar{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:12px;align-items:center;margin:-3px 0 18px}.landing-channel-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:46px;padding:4px 7px 4px 13px;border:1px solid rgba(66,212,208,.29);border-radius:13px;background:rgba(6,22,31,.82);box-shadow:0 10px 22px rgba(0,0,0,.16);color:#63edef}.landing-channel-search input{min-width:0;min-height:36px;margin:0;padding:6px;border:0!important;background:transparent!important;box-shadow:none!important;color:#ecffff}.landing-channel-search input::placeholder{color:#74999f}.landing-channel-search button{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#91b9bd;font-size:1.15rem}.landing-channel-search button:hover{background:rgba(99,237,239,.11);color:#eaffff}.landing-channel-toolbar p{margin:0;color:#8eaeb3;font-size:.73rem}
.public-channel-card{grid-template-columns:auto minmax(0,1fr);align-items:start;isolation:isolate;overflow:hidden}.public-channel-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(125deg,rgba(99,237,239,.05),transparent 48%);pointer-events:none}.public-channel-member-badge{position:absolute;top:13px;left:13px;padding:5px 8px;border:1px solid rgba(99,237,239,.22);border-radius:999px;background:rgba(5,18,27,.62);color:#9deeed;font-size:.63rem;line-height:1}.public-channel-card-body{padding-inline-end:48px}.public-channel-card-body p{min-height:2.8em}.public-channel-card-link{grid-column:1/-1;width:100%;margin-top:2px}.landing-loading,.landing-empty{display:grid;place-items:center;min-height:170px;background:rgba(7,25,34,.56)}
@media(max-width:700px){
  .landing-header{position:sticky;top:0;z-index:20;background:rgba(7,14,22,.94);backdrop-filter:blur(14px)}
  .landing-brand small{display:none}.landing-actions{gap:6px}.landing-actions button{min-height:38px;padding-inline:10px}
  .landing-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.landing-hero-copy{grid-column:1/-1}.landing-orbit{grid-column:2;grid-row:1;justify-self:end;margin-top:-4px}.landing-hero-actions{margin-top:18px}.landing-explore,.landing-hero-register{flex:1 1 calc(50% - 5px);padding-inline:10px}.landing-trust{font-size:.67rem}
  .landing-channel-toolbar{grid-template-columns:1fr;margin-bottom:14px}.landing-channel-toolbar p{min-height:18px}.landing-public-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.public-channel-card-body{padding-inline-end:42px}.public-channel-member-badge{top:11px;left:11px}
}
@media(max-width:390px){.landing-login{display:none}.landing-hero-actions{display:grid;grid-template-columns:1fr}.landing-explore,.landing-hero-register{width:100%}}

/* Public landing final polish: channel avatars are always perfect circles. */
.public-channel-avatar{
  width:66px!important;height:66px!important;
  min-width:66px!important;min-height:66px!important;
  max-width:66px!important;max-height:66px!important;
  flex:0 0 66px!important;aspect-ratio:1 / 1!important;
  border-radius:50%!important;overflow:hidden!important;
}
.public-channel-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important}
.landing-header:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,237,239,.42),transparent);opacity:.8}
.landing-hero{overflow:hidden}.landing-hero:before{content:"";position:absolute;inset:auto -9% -52% auto;width:300px;height:220px;border:1px solid rgba(99,237,239,.17);border-radius:50%;box-shadow:0 0 0 30px rgba(99,237,239,.025),0 0 0 62px rgba(92,114,255,.02);pointer-events:none}
.landing-section-title{align-items:center}.landing-section-title>span{white-space:nowrap}
.landing-channel-search{transition:border-color .2s ease,box-shadow .2s ease}.landing-channel-search:hover{border-color:rgba(99,237,239,.56)}
.public-channel-card{border-radius:18px}.public-channel-card-link{transition:transform .2s ease,box-shadow .2s ease}.public-channel-card-link:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(32,217,220,.22)}
.landing-empty{border-style:dashed}.landing-loading{position:relative;overflow:hidden}.landing-loading:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(99,237,239,.07) 45%,transparent 70%);transform:translateX(-100%);animation:landingShimmer 1.9s ease-in-out infinite}
@keyframes landingShimmer{to{transform:translateX(100%)}}
@media(max-width:700px){.public-channel-avatar{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;max-width:54px!important;max-height:54px!important;flex-basis:54px!important}.landing-section-title>span{white-space:normal}.landing-hero:before{width:190px;height:150px}}
@media(prefers-reduced-motion:reduce){.landing-loading:after{animation:none!important}}

/* Second public-landing audit: improves hierarchy, empty/loading feedback,
   card density, small screens and keyboard/mobile interactions. */
.public-landing{min-width:320px!important}
.landing-header{min-height:66px!important}.landing-brand{min-width:0!important}.landing-brand strong{white-space:nowrap}
.landing-logo{flex:0 0 auto!important}.landing-actions{flex:0 0 auto!important}
.landing-hero{min-height:360px!important;align-items:center!important}.landing-hero-copy{min-width:0!important}
.landing-hero h1{max-width:12ch!important}.landing-hero p{overflow-wrap:anywhere!important}
.landing-hero-actions button{transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important}
.landing-trust span{padding:4px 7px;border:1px solid rgba(99,237,239,.13);border-radius:999px;background:rgba(8,27,37,.36)}
.landing-section-title{padding-top:2px}.landing-section-title h2{text-wrap:balance!important}.landing-section-title>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.landing-public-stats span{position:relative;overflow:hidden}.landing-public-stats span:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(#63edef,#5c72ff)}
.landing-channel-toolbar{align-items:start!important}.landing-channel-toolbar p{padding-top:13px;line-height:1.6}
.landing-channel-search{position:relative}.landing-channel-search:after{content:"برای مشاهده، روی کارت هر کانال بزنید";position:absolute;top:calc(100% + 6px);right:2px;color:#739ca2;font-size:.63rem;opacity:0;pointer-events:none;transition:opacity .2s ease}.landing-channel-search:focus-within:after{opacity:1}
.public-channel-cards{align-items:stretch!important}.public-channel-card{height:100%;min-width:0!important}.public-channel-card-body h3{line-height:1.45}.public-channel-card-body small{line-height:1.6}.public-channel-card-link{font-weight:800!important}
.public-channel-member-badge{font-variant-numeric:tabular-nums}.landing-empty strong,.landing-loading{font-size:.88rem}.landing-empty:before{content:"⌁";display:grid;place-items:center;width:42px;height:42px;margin:0 auto 10px;border:1px solid rgba(99,237,239,.28);border-radius:50%;color:#63edef;font-size:1.4rem}
@media(max-width:700px){
  .landing-header{min-height:58px!important}.landing-hero{min-height:0!important}.landing-hero h1{max-width:none!important}
  .landing-section-title{align-items:start!important}.landing-channel-toolbar p{padding-top:0}.landing-channel-search:after{display:none}
  .landing-public-stats span{min-height:68px!important}.public-channel-card{grid-template-columns:auto minmax(0,1fr)!important}.public-channel-card-link{grid-column:1/-1!important}
}
@media(max-width:390px){.landing-brand strong{font-size:.9rem!important}.landing-register{font-size:.68rem!important}.landing-public-stats{grid-template-columns:1fr 1fr!important}}

/* Authentication redesign: compact, accessible and captcha-aware. */
.auth-card{position:relative!important;border-color:rgba(79,211,216,.32)!important}
.auth-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#20d9dc,#5c72ff);opacity:.9}
.auth-card>.brand-mark{margin-inline:auto}.auth-card>h1,.auth-card>p{text-align:center}
.auth-form-note{margin:0 0 12px!important;padding:9px 11px;border:1px solid rgba(79,211,216,.16);border-radius:11px;background:rgba(8,28,38,.54);color:#9fc0c7!important;font-size:.74rem!important;line-height:1.7}
.auth form label{position:relative;color:#dff7fa;font-size:.79rem}
.field-hint{float:left;color:#789da5;font-size:.63rem;font-weight:500}
.auth form input{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.auth form input:hover{border-color:rgba(99,237,239,.45)}
.auth form label.field-invalid input{border-color:#ff657a!important;box-shadow:0 0 0 4px rgba(255,101,122,.1)!important}
.auth form label.field-invalid:after{content:"این فیلد را صحیح وارد کنید";display:block;margin-top:4px;color:#ff9baa;font-size:.62rem;font-weight:500}
.password-field{position:relative;margin-top:7px}.password-field input{margin-top:0!important;padding-left:48px!important}.password-toggle{position:absolute;left:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:35px;height:35px;border:1px solid rgba(91,170,185,.25);border-radius:9px;background:rgba(8,27,38,.78);color:#95bbc2;font-size:1rem}.password-toggle:hover,.password-toggle.is-visible{border-color:#63edef;color:#eaffff;background:rgba(34,91,102,.64)}
.captcha-box{position:relative;margin-top:14px!important;padding:11px!important;border-color:rgba(66,212,208,.3)!important;background:linear-gradient(145deg,rgba(8,30,40,.8),rgba(8,19,30,.86))!important}
.captcha-box:before{content:"سؤال با هر تلاش مصرف می‌شود";display:block;margin-bottom:7px;color:#799ba2;font-size:.61rem}
.captcha-question{min-height:34px!important}.captcha-question>span{color:#98b8bf}.captcha-question strong{padding:5px 9px;border:1px solid rgba(99,237,239,.2);border-radius:8px;background:rgba(5,16,25,.66);color:#eaffff!important;font-size:1rem!important}
.captcha-refresh{width:34px!important;height:34px!important;border-color:rgba(99,237,239,.34)!important;background:rgba(9,33,43,.9)!important;color:#63edef!important;transition:transform .2s ease,background .2s ease}.captcha-refresh:hover{transform:rotate(45deg);background:rgba(32,111,119,.62)!important;color:#fff!important}.captcha-refresh:active{transform:rotate(90deg) scale(.94)}
.captcha-box input[name="captchaAnswer"]{text-align:center;letter-spacing:.08em;font-size:1rem}
.auth .primary{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}.auth .primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 13px 25px rgba(32,217,220,.22)}.auth .primary:disabled{opacity:.68;cursor:wait}.auth .primary.is-loading .submit-label{opacity:.55}.auth .primary.is-loading .submit-arrow{font-size:0}.auth .primary.is-loading .submit-arrow:after{content:"";display:block;width:17px;height:17px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:authSpin .7s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}
.auth-privacy-note{display:flex!important;align-items:center;justify-content:center;gap:5px}.auth-privacy-note:before{content:"⌁";color:#63edef}
.tabs button{transition:background .18s ease,color .18s ease,transform .18s ease}.tabs button:hover{color:#eaffff}.tabs button:active{transform:scale(.98)}
@media(max-height:760px){.auth-form-note{display:none}.captcha-box{margin-top:9px!important;padding:8px!important}.captcha-box:before{display:none}.auth-card{padding-block:16px!important}}
@media(max-width:420px){.auth{padding:10px!important}.auth-card{padding:17px 15px!important;border-radius:18px!important}.auth-card:before{border-radius:18px 18px 0 0}.field-hint{font-size:.59rem}.captcha-question{gap:5px!important}}
@media(prefers-reduced-motion:reduce){.captcha-refresh,.auth .primary,.tabs button{transition:none!important}.auth .primary.is-loading .submit-arrow:after{animation-duration:1.4s!important}}

/* Authentication v2: genuine split-screen redesign on desktop, focused
   single-column flow on mobile. Captcha and form behavior remain unchanged. */
.auth{padding:clamp(16px,3vw,38px)!important}
.auth-card{
  display:grid!important;
  grid-template-columns:minmax(320px,.9fr) minmax(390px,1fr)!important;
  width:min(100%,920px)!important;
  max-width:920px!important;
  min-height:min(670px,calc(100dvh - 48px))!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:30px!important;
  background:#09131e!important;
}
.auth-card:before{display:none!important}
.auth-showcase{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:36px 34px;overflow:hidden;background:radial-gradient(420px 340px at 15% 5%,rgba(32,217,220,.2),transparent 68%),linear-gradient(155deg,#102b38,#111934 58%,#0b1221);border-left:1px solid rgba(104,194,210,.2)}
.auth-showcase:before{content:"";position:absolute;inset:auto -25% -26% auto;z-index:-1;width:330px;height:330px;border:1px solid rgba(99,237,239,.17);border-radius:50%;box-shadow:0 0 0 38px rgba(99,237,239,.025),0 0 0 76px rgba(92,114,255,.025)}
.auth-showcase:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(120deg,transparent 42%,rgba(92,114,255,.08))}
.auth-showcase-brand{display:flex;align-items:center;gap:12px}.auth-showcase-brand .brand-mark{width:48px;height:48px;border-radius:15px;margin:0!important}.auth-showcase-brand strong{display:block;color:#f1ffff;font-size:1.05rem}.auth-showcase-brand small{display:block;margin-top:2px;color:#83a9b2;font-size:.68rem}
.auth-showcase-copy{margin:auto 0}.auth-eyebrow{display:inline-flex;padding:6px 9px;border:1px solid rgba(99,237,239,.24);border-radius:999px;background:rgba(6,28,38,.45);color:#82e9e7;font-size:.67rem;font-weight:700}.auth-showcase-copy h2{margin:16px 0 13px;color:#efffff;font-size:clamp(2rem,3.8vw,3.15rem);line-height:1.25;letter-spacing:-.055em}.auth-showcase-copy h2 em{color:#63edef;font-style:normal}.auth-showcase-copy p{max-width:37ch;margin:0;color:#9ab9c0;font-size:.83rem;line-height:2}
.auth-feature-list{display:grid;gap:9px;color:#b9d2d7;font-size:.71rem}.auth-feature-list span{display:flex;align-items:center;gap:7px}.auth-feature-list b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(32,217,220,.13);color:#63edef;font-size:.66rem}
.auth-showcase-art{position:absolute;left:26px;bottom:28px;width:96px;height:96px}.auth-showcase-art img{position:absolute;inset:19px;width:58px;height:58px;border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.3),0 0 24px rgba(32,217,220,.2)}.auth-showcase-art i{position:absolute;inset:0;border:1px solid rgba(99,237,239,.16);border-radius:50%;animation:authOrbit 8s linear infinite}.auth-showcase-art i:nth-of-type(2){inset:12px;animation-direction:reverse;animation-duration:6s}.auth-showcase-art i:nth-of-type(3){inset:-14px;animation-duration:11s}
@keyframes authOrbit{to{transform:rotate(360deg)}}
.auth-panel{display:flex;flex-direction:column;min-width:0;padding:clamp(25px,4vw,42px);background:linear-gradient(145deg,rgba(15,27,40,.98),rgba(7,15,24,.99))}
.auth-mobile-brand{display:none;align-items:center;gap:11px;margin-bottom:18px}.auth-mobile-brand .brand-mark{width:48px;height:48px;margin:0!important;border-radius:15px}.auth-mobile-brand h1{margin:0;font-size:1.35rem}.auth-mobile-brand p{margin:2px 0 0!important;font-size:.68rem!important}
.auth-panel .tabs{margin-bottom:18px!important;padding:4px!important;border:1px solid rgba(86,164,181,.2);border-radius:13px!important}.auth-panel .tabs button{min-height:42px!important}
.auth-panel form{display:flex;flex-direction:column;min-height:0}.auth-panel form[hidden]{display:none!important}
.auth-panel .auth-form-note{margin-bottom:4px!important;background:transparent!important;border:0!important;padding:0!important}
.auth-panel label{margin-top:13px!important}.auth-panel .captcha-box{margin-top:16px!important}
.auth-panel .primary{margin-top:18px!important}.auth-panel-footer{margin-top:auto;padding-top:16px;color:#6f9098;font-size:.62rem;line-height:1.7;text-align:center}
@media(max-width:760px){
  .auth{padding:10px!important;overflow:auto!important;place-items:start center!important}
  .auth-card{grid-template-columns:1fr!important;width:min(100%,430px)!important;min-height:0!important;margin:auto 0!important;border-radius:22px!important;overflow:visible!important}
  .auth-showcase{display:none!important}.auth-panel{padding:22px 18px 18px!important;border-radius:22px!important}.auth-mobile-brand{display:flex!important}
  .auth-panel .tabs{margin-bottom:14px!important}.auth-panel-footer{margin-top:14px}
}
@media(max-width:390px){.auth-panel{padding:18px 14px 15px!important}.auth-mobile-brand{margin-bottom:13px}.auth-mobile-brand .brand-mark{width:43px;height:43px}.auth-panel label{margin-top:10px!important}}
@media(max-height:720px) and (min-width:761px){
  .auth-card{min-height:0!important}.auth-showcase{padding:24px 28px}.auth-showcase-copy h2{font-size:2.15rem;margin-block:11px}.auth-showcase-art{display:none}.auth-panel{padding:20px 32px}.auth-panel label{margin-top:8px!important}.auth-panel .captcha-box{margin-top:9px!important}.auth-panel-footer{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.auth-showcase-art i{animation:none!important}}

/* Final message alignment: incoming on the left, outgoing on the right. */
#messages .message:not(.mine){
  align-self:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}
#messages .message.mine{
  align-self:flex-end!important;
  margin-left:auto!important;
  margin-right:0!important;
}

/* Private chats use the tighter 20px horizontal gutter. Groups retain the
   established wider gutter so avatars and group context remain visible. */
#messages.messages-private{padding-inline:20px!important}
#messages.messages-group{padding-inline:62px!important}
@media(max-width:700px){
  #messages.messages-private{padding-inline:20px!important}
  #messages.messages-group{padding-inline:50px!important}
}

/* Edited message marker and action icon. */
.edited-label{
  color:var(--chat-muted,#8da8b3);
  font-size:.62rem;
  white-space:nowrap;
}
.message-actions .edit-action::before{content:"✎"}

.message-edit-editor{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  min-width:0;
}
.message-edit-editor textarea{
  width:100%;
  min-height:42px;
  max-height:180px;
  resize:vertical;
  box-sizing:border-box;
  border:1px solid rgba(34,211,216,.55);
  border-radius:12px;
  padding:9px 11px;
  background:rgba(3,14,25,.78);
  color:var(--chat-text,#e9f7fb);
  font:inherit;
  line-height:1.75;
  outline:none;
}
.message-edit-editor textarea:focus{box-shadow:0 0 0 3px rgba(34,211,216,.13)}
.message-edit-controls{display:flex;gap:6px;justify-content:flex-start;direction:rtl}
.message-edit-controls button{
  min-width:58px;
  min-height:30px;
  padding:4px 10px;
  border-radius:9px;
  border:1px solid rgba(105,211,224,.3);
  color:#eaffff;
  background:rgba(11,44,61,.82);
  cursor:pointer;
  font:inherit;
  font-size:.72rem;
}
.message-edit-controls .message-edit-save{background:linear-gradient(135deg,#0dbbc6,#5260ed);border-color:rgba(119,246,246,.65)}
.message-edit-controls .message-edit-cancel{background:rgba(69,35,55,.72);color:#ffc7d4}
.message-edit-controls button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}
.message-edit-controls button:disabled{opacity:.55;cursor:wait}
.message.is-editing{z-index:2001!important}
.forward-modal{position:fixed!important;inset:0!important;z-index:1600!important}
.file-modal{position:fixed!important;inset:0!important;z-index:1700!important}
.blocked-panel{width:min(100%,520px);max-height:min(680px,calc(100dvh - 28px));overflow:hidden;background:linear-gradient(150deg,#102334,#091725 70%,#07131f);border:1px solid rgba(119,226,232,.2);color:#eafcff}.blocked-kicker{display:block;margin-bottom:3px;color:#76eeee;font-size:.68rem;font-weight:800}.blocked-help{margin:0 20px 14px;padding:11px 12px;border:1px solid rgba(102,218,224,.18);border-radius:12px;background:rgba(16,65,77,.2);color:#a9cdd2;font-size:.74rem;line-height:1.8}.blocked-list{min-height:150px;max-height:calc(100dvh - 230px);overflow:auto;padding:0 20px 18px}.blocked-row{display:flex;align-items:center;gap:11px;min-height:62px;margin:5px 0;padding:9px 10px;border:1px solid rgba(106,214,221,.13);border-radius:15px;background:rgba(7,27,41,.55);transition:background .16s ease,border-color .16s ease}.blocked-row:hover{border-color:rgba(104,231,232,.42);background:rgba(29,105,116,.2)}.blocked-avatar{width:42px;height:42px;min-width:42px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(135deg,#2cd5d5,#645eed);color:#fff;font-weight:800}.blocked-avatar img{width:100%;height:100%;object-fit:cover}.blocked-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.blocked-info strong{overflow:hidden;color:#efffff;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.blocked-info small{color:#8fb9c1;font-size:.67rem}.unblock-button{min-height:34px;padding:6px 10px;border:1px solid rgba(103,231,232,.35);border-radius:9px;background:rgba(31,171,178,.13);color:#a8f4f3;font:inherit;font-size:.68rem;font-weight:800;white-space:nowrap;cursor:pointer}.unblock-button:hover,.unblock-button:focus-visible{background:#2acfd0;color:#06242c;outline:none}.blocked-empty{display:grid;place-items:center;gap:7px;min-height:190px;text-align:center;color:#aacbd0}.blocked-empty span{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(102,225,226,.25);border-radius:15px;background:rgba(38,173,178,.12);color:#88eff0;font-size:1.3rem}.blocked-empty strong{color:#e8fbfc;font-size:.88rem}.blocked-empty small{max-width:260px;color:#8eb5bc;font-size:.7rem;line-height:1.7}@media(max-width:560px){.blocked-panel{width:100%;max-height:calc(100dvh - 8px);border-radius:24px 24px 0 0}.blocked-help{margin-inline:16px}.blocked-list{padding-inline:16px;max-height:calc(100dvh - 210px)}.blocked-row{min-height:60px;padding-inline:8px}.unblock-button{min-width:74px}}
.decision-panel{width:min(100%,470px);background:linear-gradient(150deg,#102334,#091725 72%,#07131f);border:1px solid rgba(119,226,232,.22);color:#edffff}.decision-kicker{display:block;margin-bottom:3px;color:#76eeee;font-size:.68rem;font-weight:800}.decision-message{margin:0;padding:0 20px 20px;color:#b5d3d8;font-size:.82rem;line-height:2;white-space:pre-line}.decision-actions{display:flex;gap:10px;padding:14px 20px 19px;border-top:1px solid rgba(127,224,230,.14)}.decision-actions button{flex:1;min-height:42px;margin:0;border-radius:12px}.decision-actions .primary{background:linear-gradient(135deg,#2bd4d5,#6370ed)}.decision-actions .secondary{border:1px solid rgba(125,210,218,.22);background:rgba(8,27,40,.74);color:#b8dce0}@media(max-width:560px){.decision-panel{width:100%;border-radius:24px 24px 0 0}.decision-message{padding-inline:16px}.decision-actions{padding-inline:16px}}
.account-blocked-section{margin:16px 0 4px;padding:13px 14px;border:1px solid rgba(102,218,224,.2);border-radius:15px;background:linear-gradient(145deg,rgba(14,54,65,.32),rgba(8,25,38,.45))}.account-blocked-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.account-blocked-heading h4{margin:0;color:#e8fbfc;font-size:.84rem}.account-blocked-heading p{max-width:36ch;margin:5px 0 0;color:#8fb9c1;font-size:.68rem;line-height:1.75}.account-blocked-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:rgba(231,105,116,.12);font-size:1rem}.account-blocked-list{max-height:220px;min-height:0;margin-top:10px;padding:0 1px 2px}.account-blocked-list:empty{display:none}.account-blocked-list .blocked-row{margin:4px 0;min-height:54px;padding:7px 8px;background:rgba(5,24,36,.5)}.account-blocked-list .blocked-avatar{width:34px;height:34px;min-width:34px}.account-blocked-list .blocked-info strong{font-size:.76rem}.account-blocked-list .unblock-button{min-height:30px;padding:5px 8px;font-size:.64rem}.account-blocked-list .blocked-empty{min-height:72px;padding:8px}.account-blocked-list .blocked-empty span{width:32px;height:32px;font-size:.9rem}.account-blocked-list .blocked-empty small{display:none}@media(max-width:560px){.account-blocked-section{margin-inline:0}.account-blocked-heading p{font-size:.64rem}.account-blocked-list{max-height:180px}}
.forward-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 20px 12px;padding:4px;border:1px solid rgba(113,220,229,.15);border-radius:14px;background:rgba(4,20,32,.56)}
.forward-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 10px;border:0;border-radius:10px;background:transparent;color:#91b6bf;font-size:.74rem;font-weight:800;transition:background .17s ease,color .17s ease,box-shadow .17s ease}
.forward-tabs button[aria-selected="true"]{background:linear-gradient(135deg,rgba(39,211,213,.28),rgba(91,102,235,.26));color:#edffff;box-shadow:0 4px 12px rgba(0,0,0,.17)}
.forward-tabs button:focus-visible{outline:2px solid #86f5f5;outline-offset:2px}
.forward-tabs span{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:rgba(132,233,235,.14);color:#a9f8f7;font-size:.62rem;direction:ltr}
.forward-destinations{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}.forward-destinations[hidden]{display:none!important}
.forward-attachments:not([hidden]){display:flex;flex:1 1 auto;min-height:0;flex-direction:column;margin:0 20px 12px}
.forward-attachments:not([hidden]) .forward-attachment-list{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));flex:1;max-height:none;overflow-x:hidden;overflow-y:auto;padding:3px}
.forward-attachments:not([hidden]) .forward-attachment{height:auto;min-height:76px}.forward-attachments:not([hidden]) .forward-attachment-preview{width:70px;height:58px}
@media(max-width:560px){.forward-tabs{margin-inline:16px;margin-bottom:10px}.forward-attachments:not([hidden]){margin-inline:16px}.forward-attachments:not([hidden]) .forward-attachment-list{grid-template-columns:1fr}.forward-attachments:not([hidden]) .forward-attachment{min-height:72px}.forward-attachments:not([hidden]) .forward-attachment-preview{width:68px;height:54px}}
.forward-panel{height:min(760px,calc(100dvh - 32px));max-height:calc(100dvh - 24px)}
.forward-attachments{padding:10px 11px;margin-bottom:10px}
.forward-attachments-head{padding-bottom:7px}
.forward-attachment-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(184px,220px);grid-template-columns:none;gap:8px;max-height:82px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 5px;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity}
.forward-attachment{grid-template-columns:18px 62px minmax(0,1fr) 20px;min-height:68px;height:72px;padding:6px 7px;scroll-snap-align:start}
.forward-attachment-preview{width:62px;height:52px}
.forward-attachment-name{font-size:.72rem}
.forward-attachment-detail{font-size:.61rem}
.forward-attachment-state{width:20px;height:20px}
.forward-destinations-head{padding-top:2px}
.forward-list{flex:1 1 auto;min-height:0;padding-bottom:12px;overscroll-behavior:contain}
.forward-target{min-height:64px}

/* Banner editor: visual preview for create and manage forms. */
.group-banner-editor{display:grid;gap:8px;margin:5px 0 3px;padding:8px;border:1px solid rgba(104,224,229,.2);border-radius:17px;background:linear-gradient(145deg,rgba(17,52,67,.42),rgba(7,22,35,.64));cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.group-banner-editor:hover,.group-banner-editor:focus-visible{border-color:rgba(105,239,239,.6);box-shadow:0 12px 28px rgba(0,0,0,.2),0 0 0 3px rgba(57,218,222,.08);outline:none;transform:translateY(-1px)}
.group-banner-preview{position:relative;display:grid;place-items:end start;min-height:132px;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,rgba(50,133,158,.32),rgba(10,28,44,.9));background-size:cover;background-position:center;box-shadow:inset 0 -70px 70px rgba(3,12,21,.65)}
.group-banner-preview:not(.has-image){background-image:radial-gradient(circle at 75% 20%,rgba(80,233,229,.2),transparent 33%),linear-gradient(135deg,#173949,#0a1b2a)}
.group-banner-preview-overlay{display:grid;gap:2px;width:100%;padding:13px 15px;background:linear-gradient(180deg,transparent,rgba(2,11,20,.88));color:#efffff}
.group-banner-preview-overlay strong{font-size:.82rem;font-weight:850}.group-banner-preview-overlay small,.group-banner-editor-hint{color:#9dc7ce;font-size:.66rem;line-height:1.7}
.group-banner-editor-hint{padding-inline:4px}.group-banner-editor.has-new-image{border-color:rgba(68,238,194,.62);box-shadow:0 0 0 3px rgba(68,238,194,.08)}
.group-banner-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important}
.chat-header{position:relative;isolation:isolate;overflow:hidden}.chat-header.has-group-banner:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(4,15,25,.96) 0%,rgba(7,22,33,.72) 46%,rgba(7,22,33,.5)),var(--chat-banner-image);background-size:cover;background-position:center 42%;filter:saturate(.9)}.chat-header.has-group-banner:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,10,18,.1),rgba(2,10,18,.72));pointer-events:none}.chat-header.has-group-banner{box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 -1px rgba(154,247,245,.18)}
.banner-background-toggle{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px!important;padding:11px 12px;border:1px solid rgba(104,224,229,.18);border-radius:13px;background:rgba(12,43,56,.24);line-height:1.8}.banner-background-toggle small{grid-column:2;color:#8fbcc3;font-size:.66rem;line-height:1.7}
@media(max-width:560px){.group-banner-preview{min-height:112px}.group-banner-editor{padding:6px;border-radius:15px}}
@media(max-width:560px){.forward-panel{height:min(88dvh,calc(100dvh - 8px));max-height:calc(100dvh - 8px)}.forward-attachment-list{grid-auto-columns:minmax(172px,76vw)}.forward-attachment{grid-template-columns:18px 58px minmax(0,1fr) 20px}.forward-attachment-preview{width:58px;height:50px}.forward-list{padding-bottom:10px}.forward-footer{flex-shrink:0}}
.forward-search{position:relative;min-height:48px;padding-inline:13px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.forward-search>span{font-size:1.15rem;line-height:1}.forward-search input{min-width:0;padding-block:10px}.forward-search button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:rgba(103,214,219,.12);color:#9bdde1;font-size:1.15rem;line-height:1;transition:background .16s ease,color .16s ease}.forward-search button:hover{background:rgba(91,225,227,.3);color:#fff}.forward-search button:focus-visible{outline:2px solid #86f5f5;outline-offset:2px}.forward-destinations-head>div{display:flex;align-items:center;gap:8px;min-width:0}.forward-destinations-head button{border:0;border-radius:8px;padding:4px 7px;background:rgba(111,208,218,.1);color:#8fdfe5;font-size:.63rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .16s ease,color .16s ease}.forward-destinations-head button:hover,.forward-destinations-head button:focus-visible{background:rgba(91,223,225,.24);color:#eaffff;outline:none}.forward-attachment-list::-webkit-scrollbar{height:5px}.forward-attachment-list::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(106,225,228,.46)}.forward-list::-webkit-scrollbar{width:6px}.forward-list::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(106,225,228,.4)}.forward-target{position:relative;border-color:rgba(117,215,222,0);transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}.forward-target::after{content:'';position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:3px;border-radius:0 99px 99px 0;background:#68e9e9;transform:scaleY(0);transition:transform .16s ease}.forward-target.selected::after{transform:scaleY(1)}.forward-target-name-line{display:flex;align-items:center;gap:6px;min-width:0}.forward-target-name-line strong{min-width:0}.forward-target-kind{flex:0 0 auto;padding:2px 5px;border:1px solid rgba(121,223,228,.18);border-radius:6px;background:rgba(93,201,211,.09);color:#92dfe4;font-size:.56rem;font-style:normal;font-weight:700;line-height:1.2}.forward-target.selected .forward-target-kind{border-color:rgba(114,243,243,.35);background:rgba(48,221,222,.16);color:#c4ffff}.forward-target:hover .forward-target-kind{color:#d7ffff}.forward-footer small{max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forward-footer .primary{white-space:nowrap}.forward-target:has(input:focus-visible){outline:2px solid #81f1f3;outline-offset:2px}@media(max-width:560px){.forward-destinations-head{gap:8px}.forward-destinations-head>div{gap:5px}.forward-destinations-head small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forward-target-kind{font-size:.53rem}.forward-footer small{max-width:45%}}

/* Mobile UI stabilization pass: touch-first spacing, safe-area handling and
   predictable stacking for the chat shell and overlays. */
@media (max-width:700px){
  html,body{width:100%;min-width:0;overflow-x:hidden}
  #app{width:100%;min-width:0;max-width:100vw;overflow:hidden}
  button,[role="button"],a,input,textarea,select{touch-action:manipulation}
  button,.icon-button,.action-btn,.mobile-close{min-width:40px;min-height:40px}

  /* 1. Prevent the drawer from stealing horizontal space when closed. */
  #sidebar,aside{max-width:100vw;min-width:0}
  body:not(.sidebar-open) aside{transform:translateX(110%)}
  body.sidebar-open aside{transform:translateX(0)}

  /* 2. Keep the chat header readable when names/statuses are long. */
  .chat-header{min-height:60px;padding:8px 12px!important;gap:8px;overflow:hidden}
  .chat-header>*{min-width:0}
  .chat-header h1,.chat-header strong,.chat-header .chat-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chat-header small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* 3. Message bubbles no longer force a wide mobile layout. */
  #messages{min-width:0;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable}
  #messages .message{max-width:min(86%,520px);min-width:0;overflow-wrap:anywhere}
  #messages .message-content,#messages .message-text{min-width:0;overflow-wrap:anywhere}
  #messages .message img,#messages .message video{max-width:100%;height:auto}

  /* 4. Composer remains above the home indicator and keyboard. */
  #sendForm,.composer,.chat-composer{padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
  #sendForm textarea,.composer textarea,.chat-composer textarea{min-height:42px;max-height:128px;line-height:1.6}
  #sendForm .send-button,.composer .send-button,.chat-composer .send-button{flex:0 0 42px;width:42px;height:42px}

  /* 5. Reply/edit bars cannot push the composer off-screen. */
  .reply-bar,.message-edit-editor,.editing-bar{max-width:100%;min-width:0;overflow:hidden}
  .reply-bar strong,.reply-bar small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* 6. Bottom navigation has a compact, consistent hit area. */
  .mobile-bottom-nav,.bottom-nav{min-height:58px;padding:5px 8px calc(5px + env(safe-area-inset-bottom))!important;gap:4px}
  .mobile-bottom-nav button,.bottom-nav button{min-width:0;min-height:48px;padding:5px 8px;border-radius:12px;font-size:.68rem}
  .mobile-bottom-nav svg,.bottom-nav svg,.mobile-bottom-nav i,.bottom-nav i{font-size:1.12rem;line-height:1}

  /* 7. All dialogs behave as sheets on small screens without clipped actions. */
  .modal,.account-modal,.profile-modal,.call-modal,.decision-modal{padding:0!important;align-items:flex-end!important}
  .modal>*,.account-modal>*,.profile-modal>*,.call-modal>*,.decision-modal>*{width:100%;max-width:100%;max-height:calc(100dvh - 8px);border-radius:24px 24px 0 0;overflow:hidden}
  .modal-header,.account-modal header,.profile-modal header{padding-top:18px!important}
  .modal-footer,.account-modal footer,.profile-modal footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}

  /* 8. File/upload cards get a calmer grid and readable metadata. */
  .upload-confirm-modal .file-preview[data-kind=collection],.file-list,.upload-file-list{grid-template-columns:1fr!important}
  .upload-file-card,.file-card{min-width:0;max-width:100%;padding:9px!important}
  .upload-file-card-info,.file-card-info{min-width:0;overflow:hidden}
  .upload-file-card-info strong,.file-card-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* 9. Toasts stay above navigation and respect the notch. */
  #toast,.toast{right:12px!important;left:12px!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important}
  #toastText,.toast-message{overflow-wrap:anywhere}

  /* 10. Keyboard focus and reduced-motion behavior are explicit on touch UI. */
  :where(button,a,input,textarea,select):focus-visible{outline:2px solid #86f5f5;outline-offset:2px}
}

/* Pinned conversations stay at the top and can be reordered with drag/drop. */
#users .user[draggable="true"]{cursor:grab}
#users .user[draggable="true"]:active{cursor:grabbing}
#users .user.is-dragging{opacity:.52;transform:scale(.985)}
#users .user.is-drag-over{
  border-color:rgba(0,225,239,.82)!important;
  box-shadow:0 0 0 2px rgba(0,225,239,.2),0 8px 22px rgba(0,217,239,.16)!important;
}
#users .pin-chat{
  border:0;background:transparent;color:rgba(151,181,255,.62);width:29px;height:29px;
  border-radius:8px;display:grid;place-items:center;flex:0 0 auto;font-size:13px;
  opacity:.72;padding:0;transition:background .18s ease,color .18s ease,transform .18s ease;
}
#users .pin-chat:hover,#users .pin-chat:focus-visible{background:rgba(93,126,255,.14);color:#9cb8ff;opacity:1}
#users .pin-chat.is-pinned{color:#ffd66e;opacity:1}
#users .pin-chat.is-pinned:hover{transform:rotate(-8deg) scale(1.06)}
@media (max-width:700px){
  #users .pin-chat{width:34px;height:34px;font-size:14px;opacity:.86}
  /* Draggable rows must still allow a vertical finger gesture to scroll the
     conversation list. Native drag-and-drop is not reliable on touch screens. */
  #users .user[draggable="true"]{touch-action:pan-y}
}

/* Final mobile sidebar scroll contract. Keep the drawer as a bounded flex
   column and make only the conversation list consume vertical overflow. */
@media (max-width:700px){
  #sidebar{
    display:flex!important;
    flex-direction:column!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  #sidebar > #users{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }
  #sidebar > #users .user[draggable="true"]{touch-action:pan-y!important}
}

/* Conversation folders: compact, touch-friendly and independently reorderable. */
.folder-section{display:none}
.folder-section-title{padding:8px 8px 5px}
.folder-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 2px 4px}
.folder-list::-webkit-scrollbar{display:none}
.folder-chip{display:flex;align-items:center;gap:3px;flex:0 0 auto;min-height:34px;padding:3px 5px 3px 7px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--muted)}
.folder-chip.active{border-color:rgba(91,75,255,.55);background:rgba(91,75,255,.1);color:var(--brand)}
.folder-chip.is-dragging{opacity:.5}
.folder-chip.is-drag-over{outline:2px solid rgba(91,75,255,.4)}
.folder-open,.folder-pin,.folder-edit{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:4px;min-height:26px;padding:2px 4px;cursor:pointer}
.folder-open strong{font-size:.72rem;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.folder-open small{font-size:.62rem;opacity:.7}
.folder-pin,.folder-edit{font-size:.75rem;opacity:.65}
.folder-pin.is-pinned{color:#e7a51e;opacity:1}
.folder-edit{font-size:1rem}
.folder-assignment-list{display:grid;gap:6px;max-height:35dvh;overflow:auto;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:12px}
.folder-assignment-list label{display:flex;align-items:center;gap:8px;margin:0;padding:7px;border-radius:8px;font-size:.78rem}
.folder-assignment-list label:hover{background:rgba(91,75,255,.08)}
.folder-assignment-list input{width:auto;min-height:0;margin:0;accent-color:var(--brand)}
.folder-row{display:flex;align-items:center;gap:4px;min-height:50px;margin:3px 8px;padding:5px 7px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);cursor:grab}
.folder-row.active{border-color:rgba(91,75,255,.55);background:rgba(91,75,255,.1)}
.folder-row.is-dragging{opacity:.48}
.folder-row.is-drag-over,.folder-row.is-drop-target{outline:2px solid rgba(91,75,255,.48);background:rgba(91,75,255,.12)}
.folder-row-open{display:flex;align-items:center;gap:7px;min-width:0;flex:1;border:0;background:transparent;color:inherit;text-align:start;padding:4px;cursor:pointer}
.folder-row-icon{font-size:18px;flex:0 0 auto}.folder-row-open strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.folder-row-open small{margin-inline-start:auto;color:var(--muted);font-size:.66rem}
.folder-row-pin,.folder-row-edit,.folder-remove-chat{border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;padding:0;cursor:pointer}
.folder-row-pin.is-pinned{color:#d59616}.folder-row-pin:hover,.folder-row-edit:hover,.folder-remove-chat:hover{background:rgba(91,75,255,.1);color:var(--brand)}
.folder-add-row{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);min-height:38px;margin:2px 8px 7px;padding:7px 10px;border:1px dashed rgba(91,75,255,.35);border-radius:12px;background:transparent;color:var(--brand);font-size:.76rem;cursor:pointer;text-align:start}
.folder-add-row:hover{background:rgba(91,75,255,.08);border-style:solid}
.folder-all-row{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);min-height:42px;margin:3px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--muted);text-align:start;font-size:.78rem;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.folder-all-row.active,.folder-all-row:hover{border-color:rgba(91,75,255,.45);background:rgba(91,75,255,.08);color:var(--brand)}
.folder-remove-chat{color:#9a8be8;flex:0 0 auto}
.folder-editor-panel #deleteFolderButton:disabled{cursor:not-allowed;opacity:.48;filter:saturate(.35)}
.folder-editor-panel .account-header>div{min-width:0}
.folder-editor-panel .account-header small{display:block;margin-top:3px;color:var(--muted);font-size:.68rem}
.folder-editor-panel #folderEditorForm{display:flex;flex-direction:column;gap:13px;min-height:0;overflow:auto;padding:16px}
.folder-editor-panel #folderEditorForm>label{display:grid;gap:6px;color:var(--muted);font-size:.76rem;font-weight:700}
.folder-editor-panel #folderEditorForm input,.folder-editor-panel #folderEditorForm select{width:100%;box-sizing:border-box;min-height:44px}
.folder-assignment-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--ink);font-size:.78rem}
.folder-assignment-heading small{color:var(--muted);font-size:.66rem;font-weight:500}
.folder-editor-panel .folder-assignment-list{max-height:34vh;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:13px}
.folder-editor-panel .account-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;bottom:0;margin:0 -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
@media(max-width:700px){.folder-editor-panel .folder-assignment-list{max-height:30vh}.folder-editor-panel .account-actions{flex-wrap:wrap}.folder-editor-panel .account-actions button{flex:1 1 140px;min-height:44px}}
@media(max-width:700px){
  .folder-section{padding-inline:10px}
  .folder-list{padding-bottom:6px}
  .folder-chip{min-height:38px;border-radius:14px}
  .folder-open strong{font-size:.75rem}
  .folder-assignment-list{max-height:38dvh}
}
@media (max-width:380px){
  .chat-header{padding-inline:8px!important}
  #messages .message{max-width:91%}
  .mobile-bottom-nav button,.bottom-nav button{font-size:.61rem;padding-inline:4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Folder management polish: keep the sidebar calm and make the editor feel
   like a focused sheet instead of a second crowded settings page. */
#users>.folder-all-row{margin:7px 8px 9px;min-height:44px;font-weight:750;box-shadow:0 4px 14px rgba(0,0,0,.08)}
#users>.folder-row{margin:4px 8px;min-height:52px;border-color:color-mix(in srgb,var(--line) 78%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 92%,#5b4bff 8%),var(--paper));box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#users>.folder-row:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.11)}
#users>.folder-row.active{box-shadow:0 8px 22px rgba(91,75,255,.14)}
#users>.folder-add-row{margin:6px 8px 10px;min-height:42px;background:rgba(91,75,255,.035)}
#users>.folder-row + .user,#users>.folder-add-row + .user{margin-top:8px}
#folderEditorModal:not([hidden]){display:flex!important;align-items:center;justify-content:center;padding:20px;background:rgba(3,8,18,.72);backdrop-filter:blur(10px)}
#folderEditorModal .folder-editor-panel{width:min(560px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 28px));overflow:hidden;border:1px solid rgba(137,168,255,.24);border-radius:24px;background:linear-gradient(155deg,#17243d 0%,#10192d 52%,#0b1324 100%);box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.035) inset}
#folderEditorModal .account-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 22px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(120deg,rgba(92,112,255,.2),rgba(41,211,209,.08),transparent)}
#folderEditorModal .account-header h3{margin:0;color:#f1f5ff;font-size:1.08rem;letter-spacing:-.02em}
#folderEditorModal .account-header small{color:#9eafd0!important}
#folderEditorModal #folderEditorForm{color:#e8efff;background:transparent}
#folderEditorModal #folderEditorForm>label{color:#b9c8e8}
#folderEditorModal #folderEditorForm input,#folderEditorModal #folderEditorForm select{border-color:rgba(153,180,255,.2);background:rgba(7,14,30,.62);color:#edf4ff;border-radius:12px}
#folderEditorModal #folderEditorForm input:focus,#folderEditorModal #folderEditorForm select:focus{border-color:#78c6ff;box-shadow:0 0 0 3px rgba(89,167,255,.14)}
#folderEditorModal .folder-assignment-heading{padding-top:3px;color:#eaf2ff}
#folderEditorModal .folder-assignment-heading small{color:#91a5ca}
#folderEditorModal .folder-assignment-toolbar{display:flex;align-items:center;gap:8px}
#folderEditorModal .folder-assignment-toolbar input{flex:1;min-width:0}
#folderEditorModal .folder-assignment-toolbar button{flex:0 0 auto;min-height:42px;padding-inline:11px;font-size:.72rem}
#folderEditorModal .folder-assignment-list{border-color:rgba(153,180,255,.16);background:rgba(5,12,26,.42);scrollbar-color:rgba(117,160,255,.55) transparent}
#folderEditorModal .folder-assignment-list label{color:#dbe7ff;min-height:38px;padding:7px 9px;border:1px solid transparent;transition:background .16s ease,border-color .16s ease}
#folderEditorModal .folder-assignment-list label:hover{border-color:rgba(112,176,255,.25);background:rgba(93,126,255,.11)}
#folderEditorModal .account-actions{background:linear-gradient(180deg,rgba(16,25,45,.76),#10192d 32%);border-top-color:rgba(153,180,255,.16)}
#folderEditorModal .account-actions .primary{min-height:44px;box-shadow:0 8px 20px rgba(83,121,255,.2)}
#folderEditorModal .account-actions .danger-outline{min-height:44px}
@media(max-width:700px){
  #folderEditorModal:not([hidden]){align-items:flex-end;padding:0}
  #folderEditorModal .folder-editor-panel{width:100%;max-height:calc(100dvh - 8px);border-radius:24px 24px 0 0}
  #folderEditorModal .account-header{padding:18px 16px 14px}
  #folderEditorModal .folder-editor-panel #folderEditorForm{padding:14px 16px}
  #folderEditorModal .folder-editor-panel .account-actions{margin-inline:-16px;padding-inline:16px}
  #folderEditorModal .folder-assignment-toolbar{align-items:stretch;flex-direction:column}
  #folderEditorModal .folder-assignment-toolbar button{width:100%}
}

/* Upload confirmation refinement: clearer hierarchy, safer long-file handling,
   comfortable touch targets and a calmer collection review surface. */
#uploadConfirmModal.upload-confirm-modal{
  background:radial-gradient(circle at 82% 8%,rgba(62,224,226,.17),transparent 26%),radial-gradient(circle at 14% 96%,rgba(102,89,238,.14),transparent 34%),rgba(2,8,14,.88);
}
#uploadConfirmModal .upload-confirm-panel{
  width:min(100%,720px);
  max-height:min(820px,calc(100dvh - 28px));
  border-color:rgba(126,236,238,.28);
  background:linear-gradient(155deg,#102b38 0%,#0a1c2a 48%,#07131f 100%);
  box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 0 1px rgba(196,255,255,.055) inset;
}
/* 1-2: a distinct preparation header with a non-intrusive status marker. */
#uploadConfirmModal .upload-confirm-header{min-height:82px;padding-inline:22px;background:linear-gradient(112deg,rgba(42,218,219,.2),rgba(89,89,238,.13) 58%,transparent)}
#uploadConfirmModal .upload-confirm-header>div{position:relative;min-width:0;padding-inline-start:13px}
#uploadConfirmModal .upload-confirm-header>div::before{content:'';position:absolute;inset-inline-start:0;top:5px;width:5px;height:34px;border-radius:99px;background:linear-gradient(#76f4f3,#7276f1);box-shadow:0 0 16px rgba(79,231,232,.55)}
#uploadConfirmModal .upload-confirm-header h3{max-width:min(58vw,520px);font-size:1.04rem;letter-spacing:-.015em}

/* 3-4: preview is bounded and supports visual media without a cramped crop. */
#uploadConfirmModal .upload-confirm-stage{padding:14px 20px 10px;overflow:auto;overscroll-behavior:contain}
#uploadConfirmModal .file-preview{min-height:190px;max-height:min(390px,42dvh);padding:13px;border-color:rgba(124,230,235,.18);border-radius:19px;background:radial-gradient(circle at 50% 32%,rgba(47,141,158,.23),transparent 48%),linear-gradient(145deg,#071722,#06111c)}
#uploadConfirmModal .file-preview-image,#uploadConfirmModal .file-preview-media{display:block;max-width:100%;max-height:min(350px,37dvh);margin:auto;object-fit:contain}
#uploadConfirmModal .file-preview-audio{box-sizing:border-box;width:min(100%,540px);margin:auto}
#uploadConfirmModal .upload-audio-preview{
  display:block!important;
  width:min(100%,560px)!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:10px 12px!important;
  border:1px solid rgba(112,222,230,.22)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(13,54,70,.9),rgba(12,31,50,.92))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}
#uploadConfirmModal .upload-audio-preview .waveform-player,
#uploadConfirmModal .upload-audio-preview.compact-audio-preview{
  width:100%!important;
  min-width:0!important;
}
#uploadConfirmModal .upload-file-card-audio{
  display:grid!important;
  grid-template-columns:auto minmax(100px,1fr)!important;
  gap:8px 10px!important;
}
#uploadConfirmModal .upload-file-card-audio .upload-audio-preview{
  grid-column:1 / -1;
  width:100%!important;
  padding:7px 9px!important;
}
.file-modal-audio-preview{
  width:min(100%,620px)!important;
  min-height:74px;
  padding:14px 16px!important;
  border:1px solid rgba(112,222,230,.24)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(13,54,70,.9),rgba(10,27,45,.94))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.2)!important;
}
.file-modal-audio-preview.audio-stream-loading{position:relative}
.file-modal-audio-preview.audio-stream-loading::after{
  content:'';position:absolute;inset:auto 14px 7px; height:2px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#38e1df,transparent);
  background-size:180px 100%;animation:audioStreamSweep 1.25s linear infinite;opacity:.7;pointer-events:none
}
.file-modal-audio-preview .waveform{height:42px!important}
.file-modal-audio-preview .waveform-play{width:38px!important;height:38px!important}
.file-modal-audio-preview .waveform-time{min-width:82px!important;font-size:.66rem!important}
.file-modal-audio-mode #downloadFile span:last-child{display:none}
.file-modal-audio-mode #downloadFile{width:46px;min-width:46px;padding-inline:0;justify-content:center}
@keyframes audioStreamSweep{from{background-position:-180px 0}to{background-position:180px 0}}

/* Deferred audio keeps the bubble quiet: an inline stream surface replaces the
   old full-width text button and opens the player only on deliberate tap. */
.audio-stream-placeholder{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr) 24px!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:48px!important;
  padding:6px 8px!important;
  border:1px solid rgba(112,222,230,.2)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,rgba(10,43,61,.72),rgba(13,31,53,.66))!important;
  cursor:pointer!important;
  transition:border-color .18s ease,background .18s ease,transform .18s ease!important;
}
.audio-stream-placeholder:hover,.audio-stream-placeholder:focus-visible{
  border-color:rgba(108,239,239,.55)!important;
  background:linear-gradient(135deg,rgba(14,61,77,.84),rgba(16,39,67,.78))!important;
  transform:translateY(-1px);
  outline:none;
}
.audio-stream-placeholder .audio-stream-play{
  width:31px!important;height:31px!important;min-width:31px!important;
  border:1px solid rgba(115,247,242,.5)!important;
  box-shadow:0 5px 14px rgba(0,217,239,.18)!important;
  font-size:10px!important;
}
.audio-stream-bars{display:flex;align-items:center;gap:3px;height:30px;min-width:0;opacity:.65}
.audio-stream-bars i{display:block;width:3px;height:var(--bar-height);min-height:5px;border-radius:99px;background:linear-gradient(180deg,#7cf8ef,#6675ed);animation:audioPlaceholderPulse 1.4s ease-in-out infinite alternate}
.audio-stream-bars i:nth-child(2n){animation-delay:.18s}.audio-stream-bars i:nth-child(3n){animation-delay:.34s}.audio-stream-bars i:nth-child(4n){animation-delay:.52s}
.audio-stream-state{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#70eee9;font-size:10px;letter-spacing:1px;background:rgba(82,220,218,.1);opacity:.72}
@keyframes audioPlaceholderPulse{from{transform:scaleY(.62);opacity:.42}to{transform:scaleY(1);opacity:.9}}
.message.mine .audio-stream-placeholder{background:linear-gradient(135deg,rgba(19,54,94,.72),rgba(22,49,82,.65));border-color:rgba(127,207,255,.22)}
.message.mine .audio-stream-placeholder .audio-stream-state{color:#b7d7ff}
@media(max-width:700px){
  .audio-stream-placeholder{grid-template-columns:30px minmax(0,1fr) 22px!important;min-height:45px!important;padding:5px 7px!important;gap:6px!important}
  .audio-stream-placeholder .audio-stream-play{width:29px!important;height:29px!important;min-width:29px!important}
}

/* Keep the quick-action buttons outside the scrolling conversation viewport. */
#sidebar{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
#sidebar>.profile{order:0;flex:0 0 auto}
#sidebar>#sidebarQuickActions{order:1;flex:0 0 auto;position:relative;z-index:20;overflow:visible!important;max-height:none!important;min-height:0!important;background:var(--paper)}
#sidebar>#sidebarQuickActions .sidebar-search-toolbar{overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important;flex:0 0 auto!important;max-height:none!important;min-height:52px!important}
#sidebar>.search-wrap{order:2;flex:0 0 auto}
#sidebar>#users{order:3;flex:1 1 auto;min-height:0;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
#sidebar>footer{order:4;flex:0 0 34px}
#sidebar .folder-remove-chat{display:none}
.row-actions-modal .folder-remove-chat{display:flex!important;width:100%!important;height:46px!important;min-width:0!important;min-height:46px!important;align-items:center!important;justify-content:flex-start!important;padding-inline:12px!important;border:1px solid transparent!important;border-radius:12px!important;background:rgba(255,255,255,.045)!important;color:#ffb8c2!important;font-size:1.05rem!important}
.row-actions-modal .folder-remove-chat::after{content:attr(data-label);font-size:.78rem;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-actions-modal .folder-remove-chat:hover,.row-actions-modal .folder-remove-chat:focus-visible{background:rgba(255,91,117,.14)!important;border-color:rgba(255,137,153,.4)!important;color:#fff!important}
@media(max-width:700px){
  #sidebar>#users{
    flex:1 1 0%!important;
    flex-basis:0!important;
    height:0!important;
    max-height:none!important;
    min-height:0!important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
    overscroll-behavior-y:contain!important;
    scroll-padding-block:10px 28px;
    touch-action:pan-y!important;
    scrollbar-width:thin;
  }
  #sidebar>#users::-webkit-scrollbar{width:7px}
  #sidebar>#users::-webkit-scrollbar-thumb{background:rgba(125,186,205,.48);border-radius:99px}
  #sidebar>#users::-webkit-scrollbar-track{background:transparent}
}

/* 5-6: collection items have reliable truncation, scan-friendly rhythm and focus feedback. */
#uploadConfirmModal .file-preview[data-kind=collection]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;overflow:auto;scrollbar-color:rgba(96,227,230,.48) transparent}
#uploadConfirmModal .upload-file-card{min-height:62px;padding:10px 11px;border-color:rgba(112,222,230,.2);border-radius:15px;background:linear-gradient(135deg,rgba(20,65,80,.72),rgba(10,35,50,.68));box-shadow:0 6px 16px rgba(0,0,0,.11)}
#uploadConfirmModal .upload-file-card:hover{border-color:rgba(107,242,240,.56);background:linear-gradient(135deg,rgba(28,85,98,.86),rgba(17,47,70,.8))}
#uploadConfirmModal .upload-file-card:focus-within{outline:2px solid rgba(128,246,245,.76);outline-offset:2px}
#uploadConfirmModal .upload-file-card-icon{width:38px;height:38px;flex-basis:38px;border:1px solid rgba(118,235,237,.19);border-radius:12px;background:linear-gradient(135deg,rgba(43,216,218,.22),rgba(103,96,232,.17))}
#uploadConfirmModal .upload-file-card-info strong,#uploadConfirmModal .upload-file-card-info small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 7: long file names and type metadata no longer stretch the sheet. */
#uploadConfirmModal .upload-confirm-details{align-items:center;padding:13px 20px 12px;border-top-color:rgba(136,228,233,.14)}
#uploadConfirmModal .file-detail-text{min-width:0;flex:1}
#uploadConfirmModal .file-detail-text strong,#uploadConfirmModal .file-detail-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#uploadConfirmModal .file-detail-text small{margin-top:3px}

/* 8-9: caption has its own readable surface and an always-visible length indicator. */
#uploadConfirmModal .upload-caption-label{display:grid;gap:7px;margin:0 20px 13px;padding:12px 13px 11px;border:1px solid rgba(111,219,228,.18);border-radius:16px;background:rgba(5,24,37,.54);color:#bfe1e6;font-size:.74rem;font-weight:750}
#uploadConfirmModal .upload-caption-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#dff9fb}
#uploadConfirmModal #uploadCaptionCount{direction:ltr;color:#83c8d1;font-size:.66rem;font-weight:700;white-space:nowrap}
#uploadConfirmModal .upload-caption-label textarea{box-sizing:border-box;min-height:68px;max-height:128px;margin:0;padding:10px 11px;border-color:rgba(111,213,224,.18);border-radius:12px;background:rgba(3,15,25,.72);color:#eefeff;line-height:1.75;resize:vertical}
#uploadConfirmModal .upload-caption-label textarea::placeholder{color:#7298a2}
#uploadConfirmModal .upload-caption-label textarea:focus{border-color:rgba(108,240,239,.72);box-shadow:0 0 0 3px rgba(62,221,223,.13)}
#uploadConfirmModal .upload-caption-hint{color:#82aab3;font-size:.64rem;font-weight:500;line-height:1.55}

/* 10: actions stay distinct, stable and easy to reach on every viewport. */
#uploadConfirmModal .upload-confirm-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px 18px;border-top-color:rgba(130,224,231,.14);box-shadow:0 -12px 26px rgba(1,10,18,.18)}
#uploadConfirmModal .upload-confirm-summary{min-width:0;color:#91c4ca;font-size:.68rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#uploadConfirmModal .upload-confirm-actions{display:flex;flex:0 0 auto;gap:9px}
#uploadConfirmModal .upload-confirm-actions .file-action{min-width:112px}
#uploadConfirmModal .upload-confirm-actions .primary{box-shadow:0 10px 25px rgba(39,204,211,.26)}
#uploadConfirmModal .upload-confirm-actions .primary:disabled{cursor:wait;filter:saturate(.55);box-shadow:none}

@media(max-width:600px){
  #uploadConfirmModal .upload-confirm-panel{max-height:calc(100dvh - 8px)}
  #uploadConfirmModal .upload-confirm-header{min-height:76px;padding:18px 16px 12px}
  #uploadConfirmModal .upload-confirm-header h3{max-width:66vw;font-size:.98rem}
  #uploadConfirmModal .upload-confirm-stage{padding:11px 16px 8px}
  #uploadConfirmModal .file-preview{min-height:156px;max-height:31dvh;padding:10px;border-radius:16px}
  #uploadConfirmModal .file-preview-image,#uploadConfirmModal .file-preview-media{max-height:27dvh}
  #uploadConfirmModal .file-preview[data-kind=collection]{grid-template-columns:1fr;gap:7px}
  #uploadConfirmModal .upload-file-card{min-height:57px;padding:8px 9px}
  #uploadConfirmModal .upload-confirm-details{padding:10px 16px}
  #uploadConfirmModal .upload-caption-label{margin:0 16px 10px;padding:10px 11px;border-radius:14px}
  #uploadConfirmModal .upload-caption-label textarea{min-height:58px;max-height:92px}
  #uploadConfirmModal .upload-confirm-footer{align-items:stretch;flex-direction:column;padding:10px 16px calc(11px + env(safe-area-inset-bottom));gap:8px}
  #uploadConfirmModal .upload-confirm-summary{max-width:100%;padding-inline:2px}
  #uploadConfirmModal .upload-confirm-actions{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);width:100%}
  #uploadConfirmModal .upload-confirm-actions .file-action{width:100%;min-width:0}
}
@media(max-height:650px) and (min-width:601px){
  #uploadConfirmModal .file-preview{min-height:132px;max-height:27dvh}
  #uploadConfirmModal .upload-caption-label textarea{min-height:48px;max-height:72px}
}

/* User-selectable themes. Dark keeps the existing messenger surface as the default. */
.account-theme-section{margin:16px 0;padding:14px;border:1px solid rgba(105,220,226,.16);border-radius:16px;background:rgba(16,54,69,.22)}
.account-theme-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:#e9fbff}.account-theme-heading h4{margin:0 0 3px;font-size:.86rem}.account-theme-heading p{margin:0;color:#91b6bf;font-size:.7rem;font-weight:500}.account-theme-heading>span{font-size:1.25rem}.account-theme-section label{margin-top:12px;color:#bfe0e4}.account-theme-section select{width:100%;min-height:44px;margin-top:7px;padding:9px 11px;border:1px solid rgba(105,220,226,.2);border-radius:11px;background:rgba(3,18,29,.72);color:#efffff}

html[data-theme="light"]{--ink:#192235;--muted:#657188;--line:#dfe6ef;--paper:#ffffff;--bg:#eef3f8;--brand:#3268d8;--brand2:#5d8ee8}
html[data-theme="light"] body{background:#eef3f8;color:#192235}
html[data-theme="light"] .app{background:linear-gradient(135deg,#eef4fb,#e6edf6)}
html[data-theme="light"] aside,html[data-theme="light"] .chat{background:#f9fbfe;color:#192235;border-color:#d9e2ee;box-shadow:none}
html[data-theme="light"] .profile,html[data-theme="light"] .chat-header,html[data-theme="light"] .sidebar-tabs{background:#fff;border-color:#dfe6ef;color:#192235}
html[data-theme="light"] .user,html[data-theme="light"] .group-row{background:#fff;border-color:#e2e8f0;color:#24324a}
html[data-theme="light"] .user:hover,html[data-theme="light"] .group-row:hover{background:#edf4ff}
html[data-theme="light"] .user.active,html[data-theme="light"] .group-row.active{background:linear-gradient(135deg,#e2edff,#f3f7ff);border-color:#b8cff3}
html[data-theme="light"] .messages{background:radial-gradient(circle at 95% 0,#e4efff,transparent),#f2f6fb}
html[data-theme="light"] .message{background:#fff;color:#1e2a3d;border-color:#d9e3ef;box-shadow:0 5px 15px rgba(40,70,110,.08)}
html[data-theme="light"] .message.mine{background:linear-gradient(135deg,#dbe8ff,#cbdcff);border-right-color:#4d7fe2}
html[data-theme="light"] .composer,html[data-theme="light"] .chat-composer{background:#fff;border-color:#dce5ef}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{background:#fff;color:#1d2a3d;border-color:#cfdbe8}
html[data-theme="light"] .account-theme-section{background:#edf5ff;border-color:#c9dcef}.account-theme-heading{color:#21324b}.account-theme-heading p{color:#69809b}.account-theme-section label{color:#3b5470}

html[data-theme="classic"]{--ink:#f5ead2;--muted:#b9aa8d;--line:#55432d;--paper:#2a2118;--bg:#17120d;--brand:#d39b43;--brand2:#f0c36e}
html[data-theme="classic"] body{background:#17120d;color:#f5ead2}
html[data-theme="classic"] .app{background:linear-gradient(135deg,#17120d,#2a1d12)}
html[data-theme="classic"] aside,html[data-theme="classic"] .chat{background:#20170f;color:#f5ead2;border-color:#55432d;box-shadow:none}
html[data-theme="classic"] .profile,html[data-theme="classic"] .chat-header,html[data-theme="classic"] .sidebar-tabs{background:#2a2118;border-color:#55432d;color:#f5ead2}
html[data-theme="classic"] .user,html[data-theme="classic"] .group-row{background:#2d2319;border-color:#59452e;color:#f4e8ce}
html[data-theme="classic"] .user:hover,html[data-theme="classic"] .group-row:hover{background:#3a2b1b}
html[data-theme="classic"] .user.active,html[data-theme="classic"] .group-row.active{background:linear-gradient(135deg,#4b341c,#362719);border-color:#a87431}
html[data-theme="classic"] .messages{background:radial-gradient(circle at 95% 0,#3a2917,transparent),#1d150e}
html[data-theme="classic"] .message{background:#30251a;color:#f6ead2;border-color:#604a2e}.message.mine{background:linear-gradient(135deg,#57401f,#684c24);border-right-color:#e0a647}
html[data-theme="classic"] .composer,html[data-theme="classic"] .chat-composer{background:#2a2118;border-color:#59452e}
html[data-theme="classic"] input,html[data-theme="classic"] textarea,html[data-theme="classic"] select{background:#33271b;color:#f5ead2;border-color:#6a5230}
html[data-theme="classic"] .account-theme-section{background:#392918;border-color:#76562e}html[data-theme="classic"] .account-theme-heading{color:#f6e7c6}html[data-theme="classic"] .account-theme-heading p{color:#c1aa82}html[data-theme="classic"] .account-theme-section label{color:#e2c995}

/* Chat color surfaces must follow the selected theme even where the legacy
   messenger layer used fixed dark gradients. */
html[data-theme="light"] #messages{background:linear-gradient(145deg,#f2f6fb,#e8f0f8)!important;color:#1e2a3d}
html[data-theme="light"] #messages .message{background:#fff!important;color:#1e2a3d!important;border-color:#d5e0ec!important;border-left-color:#d5e0ec!important}
html[data-theme="light"] #messages .message.mine{background:linear-gradient(135deg,#dbe8ff,#cbdcff)!important;border-right-color:#4d7fe2!important}
html[data-theme="light"] #messages .message time,html[data-theme="light"] #messages .message small{color:#6c7e94!important}
html[data-theme="light"] #chatHeader{background:linear-gradient(180deg,#fff,#f3f7fc)!important;color:#1e2a3d;border-color:#d7e2ee!important}
html[data-theme="light"] #sendForm,html[data-theme="light"] .composer{background:#fff!important;border-color:#d7e2ee!important}
html[data-theme="light"] #text,html[data-theme="light"] .composer input{background:#f5f8fc!important;color:#1e2a3d!important;border-color:#cbd8e6!important}

html[data-theme="classic"] #messages{background:linear-gradient(145deg,#21170e,#302116)!important;color:#f5ead2}
html[data-theme="classic"] #messages .message{background:#30251a!important;color:#f5ead2!important;border-color:#654c2d!important;border-left-color:#654c2d!important}
html[data-theme="classic"] #messages .message.mine{background:linear-gradient(135deg,#5b421f,#704e24)!important;border-right-color:#dba044!important}
html[data-theme="classic"] #messages .message time,html[data-theme="classic"] #messages .message small{color:#cbb58e!important}
html[data-theme="classic"] #chatHeader{background:linear-gradient(180deg,#30251a,#21170f)!important;color:#f5ead2;border-color:#654c2d!important}
html[data-theme="classic"] #sendForm,html[data-theme="classic"] .composer{background:#2a2118!important;border-color:#654c2d!important}
html[data-theme="classic"] #text,html[data-theme="classic"] .composer input{background:#382a1b!important;color:#f5ead2!important;border-color:#76552d!important}

html[data-theme="dark"] #messages{background:radial-gradient(circle at 84% 8%,rgba(74,94,255,.07),transparent 28%),linear-gradient(145deg,#071625,#08131d)!important}
html[data-theme="dark"] #messages .message{background:linear-gradient(145deg,#102a42,#0b1e32)!important;color:#ecf7ff!important;border-color:rgba(100,177,231,.2)!important}
html[data-theme="dark"] #messages .message.mine{background:linear-gradient(135deg,#172653,#203b72)!important;border-right-color:rgba(91,170,255,.3)!important}

.account-chat-background-section{margin:16px 0;padding:14px;border:1px solid rgba(105,220,226,.16);border-radius:16px;background:rgba(16,54,69,.22)}
.chat-background-actions{display:flex;gap:9px;margin-top:12px}.chat-background-picker{display:flex;align-items:center;justify-content:center;flex:1;min-height:42px;margin:0;padding:9px 12px;border:1px solid rgba(105,220,226,.24);border-radius:11px;background:rgba(5,25,37,.65);color:#d9f8fa!important;font-size:.75rem;cursor:pointer}.chat-background-actions button{flex:0 0 auto;min-height:42px;margin:0;padding-inline:12px;font-size:.72rem}
#chatBackgroundPreview{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid rgba(105,220,226,.22);border-radius:12px;background-size:cover;background-position:center;color:#baf5f4;font-size:1.2rem;overflow:hidden}.account-chat-background-section #chatBackgroundPreview.has-image{font-size:0}
#messages{position:relative;background-image:linear-gradient(rgba(3,9,17,.6),rgba(3,9,17,.72)),var(--user-chat-background),radial-gradient(circle at 84% 8%,rgba(74,94,255,.07),transparent 28%),linear-gradient(145deg,#071625,#08131d)!important;background-size:cover,cover,auto,auto;background-position:center,center,center,center}
#messages.has-user-background{background-image:linear-gradient(rgba(3,9,17,.38),rgba(3,9,17,.58)),var(--user-chat-background-image),linear-gradient(145deg,#071625,#08131d)!important;background-size:cover,cover,cover!important}
html[data-theme="light"] #messages{background-image:linear-gradient(rgba(242,246,251,.72),rgba(232,240,248,.78)),var(--user-chat-background),linear-gradient(145deg,#f2f6fb,#e8f0f8)!important}
html[data-theme="light"] #messages.has-user-background{background-image:linear-gradient(rgba(242,246,251,.38),rgba(232,240,248,.58)),var(--user-chat-background-image),linear-gradient(145deg,#f2f6fb,#e8f0f8)!important}
html[data-theme="classic"] #messages{background-image:linear-gradient(rgba(33,23,14,.62),rgba(48,33,22,.72)),var(--user-chat-background),linear-gradient(145deg,#21170e,#302116)!important}
html[data-theme="classic"] #messages.has-user-background{background-image:linear-gradient(rgba(33,23,14,.4),rgba(48,33,22,.62)),var(--user-chat-background-image),linear-gradient(145deg,#21170e,#302116)!important}
@media(max-width:600px){.chat-background-actions{flex-direction:column}.chat-background-actions button,.chat-background-picker{width:100%}}

/* Telegram-like emphasis for messages made only of emoji. */
#messages .message.emoji-only-message{padding-block:5px!important}
#messages .message.emoji-only-message .emoji-only-text{font-size:5em!important;line-height:1.08!important;letter-spacing:.02em;display:block;white-space:pre-wrap}
@media(max-width:600px){#messages .message.emoji-only-message .emoji-only-text{font-size:4.25em!important}}

html[data-theme="light"] .app,
html[data-theme="light"] .app *{--ui-text:#1e2a3d;--ui-muted:#607089}
html[data-theme="light"] .profile strong,html[data-theme="light"] .profile small,
html[data-theme="light"] .header-info strong,html[data-theme="light"] .header-info small,
html[data-theme="light"] .chat-header strong,html[data-theme="light"] .chat-header small,
html[data-theme="light"] .user strong,html[data-theme="light"] .group-row strong,
html[data-theme="light"] .user small,html[data-theme="light"] .group-row small,
html[data-theme="light"] .folder-row,html[data-theme="light"] .folder-all-row,
html[data-theme="light"] .folder-add-row{color:#1e2a3d!important}
html[data-theme="light"] .profile small,html[data-theme="light"] .header-info small,
html[data-theme="light"] .chat-header small,html[data-theme="light"] .user small,
html[data-theme="light"] .group-row small{color:#607089!important}
html[data-theme="light"] .action-btn,html[data-theme="light"] .icon-button,
html[data-theme="light"] .mobile-close,html[data-theme="light"] .back{color:#263b58!important;background:#edf3fa!important;border-color:#c9d7e6!important}
html[data-theme="light"] .action-btn:hover:not(:disabled),html[data-theme="light"] .icon-button:hover{background:#dce9fa!important;color:#194f9e!important}
html[data-theme="light"] .send,html[data-theme="light"] .attach,html[data-theme="light"] .record-audio{color:#fff!important}
html[data-theme="light"] #messages .message .message-text,html[data-theme="light"] #messages .message p,
html[data-theme="light"] #messages .message span,html[data-theme="light"] #messages .message strong,
html[data-theme="light"] #messages .message a{color:#1e2a3d!important}
html[data-theme="light"] #messages .message.mine .message-text,html[data-theme="light"] #messages .message.mine p,
html[data-theme="light"] #messages .message.mine span,html[data-theme="light"] #messages .message.mine strong,
html[data-theme="light"] #messages .message.mine a{color:#172b4d!important}
html[data-theme="light"] #messages .message time,html[data-theme="light"] #messages .message .message-time,
html[data-theme="light"] #messages .message .message-footer{color:#5d718b!important}
html[data-theme="light"] .reply-bar,html[data-theme="light"] .reply-quote,html[data-theme="light"] .forwarded-label,
html[data-theme="light"] .message-action-menu,html[data-theme="light"] .reaction-picker-menu{color:#243850!important;background:#f4f8fc!important;border-color:#cbd9e8!important}
html[data-theme="light"] .toast,html[data-theme="light"] .account-panel,html[data-theme="light"] .profile-card,
html[data-theme="light"] .decision-panel,html[data-theme="light"] .forward-panel{color:#1e2a3d!important}
html[data-theme="light"] .toast *,html[data-theme="light"] .account-panel *,html[data-theme="light"] .profile-card *,
html[data-theme="light"] .decision-panel *,html[data-theme="light"] .forward-panel *{color:inherit}
html[data-theme="light"] .account-panel label,html[data-theme="light"] .account-panel h3,
html[data-theme="light"] .account-panel h4,html[data-theme="light"] .account-panel p,
html[data-theme="light"] .account-panel small{color:#30445d!important}
html[data-theme="light"] .account-panel .primary,html[data-theme="light"] .forward-panel .primary,
html[data-theme="light"] .toast .toast-icon{color:#fff!important}

/* Final mobile scrolling contract: one scroll owner per surface. */
@media(max-width:700px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  #app{height:100dvh;min-height:0;overflow:hidden}
  #sidebar,aside{height:100dvh;max-height:100dvh;min-height:0;overflow:hidden}
  #sidebar>#users{flex:1 1 auto;min-height:0;height:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding-bottom:calc(18px + env(safe-area-inset-bottom));touch-action:pan-y}
  #sidebar>#users>*{flex-shrink:0}
  #sidebar>.search-wrap,#sidebarQuickActions{flex:0 0 auto}
  .account-modal,.profile-modal,.modal,.forward-modal,.file-modal,.call-modal{overflow:hidden!important;overscroll-behavior:contain;touch-action:none}
  .account-modal>*,.profile-modal>*,.modal>*,.forward-modal>*,.file-modal>*,.call-modal>*{min-height:0;max-height:calc(100dvh - 8px);overflow:hidden}
  .account-modal form,.profile-modal .profile-card,.group-panel,.decision-panel,.blocked-panel{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y}
  #folderEditorModal .folder-editor-panel,#folderEditorModal #folderEditorForm{min-height:0}
  #folderEditorModal #folderEditorForm{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y}
  #forwardModal .forward-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  #forwardModal .forward-destinations,#forwardModal .forward-attachments{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y}
  #forwardModal .forward-list{min-height:120px;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  #fileModal .file-viewer-panel,#uploadConfirmModal .upload-confirm-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  #fileModal .file-viewer-stage,#uploadConfirmModal .upload-confirm-stage{min-height:0;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y}
  #fileModal .file-preview,#uploadConfirmModal .file-preview{max-height:none;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  #groupManageModal .group-panel{max-height:calc(100dvh - 8px);overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  .modal-footer,.account-actions,.forward-footer,.file-viewer-footer{flex-shrink:0}
}

/* Final quick-actions structure: four equal icon cells in one RTL row. */
#sidebarQuickActions{display:block;direction:rtl;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
#sidebarQuickActions .sidebar-search-toolbar{display:flex!important;flex-direction:row;flex-wrap:nowrap!important;align-items:center;justify-content:flex-start;gap:7px;min-width:0;width:calc(100% - 24px);min-height:52px;margin:7px 12px 1px;overflow:hidden}
#sidebarQuickActions .sidebar-search-toolbar .sidebar-search-toggle,
#sidebarQuickActions .sidebar-search-toolbar .sidebar-create-button,
#sidebarQuickActions .sidebar-search-toolbar .sidebar-assistant-button,
#sidebarQuickActions .sidebar-search-toolbar .folder-quick{display:grid;place-items:center;box-sizing:border-box;width:38px;height:38px;min-width:38px;min-height:38px;margin:0;padding:0;border-radius:12px}
#sidebarQuickActions .sidebar-search-toolbar .folder-quick{border:1px solid rgba(117,126,255,.32);background:rgba(117,126,255,.14);color:#d9ddff;font-size:1.1rem}
#sidebarQuickActions .sidebar-search-toolbar .folder-quick .sidebar-quick-icon{width:28px;height:28px;flex:0 0 28px;margin:0}
#sidebarQuickActions .sidebar-search-toolbar>button{flex:0 0 38px!important}
#sidebarQuickActions .sidebar-search-toolbar .sidebar-search-toggle{align-self:center!important;line-height:1!important;transform:none!important}
#sidebarQuickActions .sidebar-search-toolbar .sidebar-home-button{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;min-width:38px;min-height:38px;padding:0;border:1px solid rgba(101,215,202,.24);border-radius:12px;background:rgba(60,190,177,.12);color:#b8fff4;font-size:1.06rem;line-height:1;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
#sidebarQuickActions .sidebar-search-toolbar .sidebar-home-button:hover,#sidebarQuickActions .sidebar-search-toolbar .sidebar-home-button.is-active{border-color:rgba(101,235,221,.55);background:rgba(50,207,190,.22);box-shadow:0 6px 16px rgba(35,202,184,.16)}
#users>.folder-all-row{display:none!important}

/* Mobile account settings: the form owns its scroll area so the bottom actions
   remain reachable while the application shell stays locked in the background. */
@media (max-width:700px){
  #accountModal.account-modal:not([hidden]){
    display:flex!important;align-items:flex-end!important;justify-content:stretch;
    overflow:hidden;overscroll-behavior:contain;
  }
  #accountModal .account-panel{
    display:flex!important;flex-direction:column!important;width:100%!important;
    height:min(92dvh,calc(100dvh - 8px))!important;max-height:calc(100dvh - 8px)!important;
    padding:0!important;overflow:hidden!important;border-radius:24px 24px 0 0!important;
  }
  #accountModal .account-header{
    flex:0 0 auto;margin:0!important;padding:18px 16px 12px!important;
    background:linear-gradient(180deg,rgba(25,34,52,.98),rgba(20,28,44,.96));
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  #accountModal #accountForm{
    flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto!important;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom))!important;
    -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
    scrollbar-width:thin;scrollbar-color:rgba(151,181,255,.48) transparent;
  }
  #accountModal #accountForm::-webkit-scrollbar{width:5px}
  #accountModal #accountForm::-webkit-scrollbar-thumb{background:rgba(151,181,255,.48);border-radius:999px}
  #accountModal .account-actions{
    position:sticky;bottom:-1px;z-index:2;margin:8px -16px -18px!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,rgba(20,28,44,.88),rgba(20,28,44,.99) 30%);
    border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -10px 22px rgba(0,0,0,.2);
  }
  #accountModal .account-actions .primary,#accountModal .account-actions .secondary{min-height:46px}
}

/* Absolute final modal-row contract: action buttons stay side by side on
   every breakpoint, including legacy mobile overrides. */
.account-modal .account-actions,
.account-modal .decision-actions,
.account-modal .upload-confirm-actions,
.account-modal .folder-editor-actions,
.file-modal .upload-confirm-actions,
.delete-confirm-panel .account-actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important}
.account-modal .account-actions>button,
.account-modal .decision-actions>button,
.account-modal .upload-confirm-actions>button,
.account-modal .folder-editor-actions>button,
.file-modal .upload-confirm-actions>button,
.delete-confirm-panel .account-actions>button{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important;margin:0!important}

/* Upload confirmation has its own roomy action row; do not let the global
   modal sizing contract collapse these two primary controls. */
#uploadConfirmModal .upload-confirm-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-direction:row!important;gap:14px!important}
#uploadConfirmModal .upload-confirm-actions{display:flex!important;align-items:center!important;flex:0 0 auto!important;width:auto!important;min-width:220px;gap:10px!important}
#uploadConfirmModal .upload-confirm-actions .file-action{flex:1 1 0!important;width:auto!important;min-width:108px!important;height:48px!important;min-height:48px!important;box-sizing:border-box!important;padding:0 16px!important;white-space:nowrap!important;font-size:.8rem!important}
#uploadConfirmModal .upload-confirm-summary{flex:1 1 auto;min-width:0}
@media(max-width:600px){
  #uploadConfirmModal .upload-confirm-footer{align-items:stretch!important;flex-direction:column!important;gap:9px!important}
  #uploadConfirmModal .upload-confirm-summary{width:100%;padding-inline:2px}
  #uploadConfirmModal .upload-confirm-actions{width:100%!important;min-width:0!important;gap:9px!important}
  #uploadConfirmModal .upload-confirm-actions .file-action{min-width:0!important;height:50px!important;min-height:50px!important;font-size:.82rem!important}
}
#forwardModal:not([hidden]){position:fixed!important;inset:0!important;z-index:2147483000!important;isolation:isolate}
#fileModal:not([hidden]){position:fixed!important;inset:0!important;z-index:2147483600!important;isolation:isolate}

/* Rich emoji picker with search, categories, gifts and animated highlights. */
.emoji-picker{display:block!important;padding:10px!important}
.emoji-picker-toolbar{display:grid;gap:8px;margin-bottom:9px}
.emoji-picker-search{box-sizing:border-box;width:100%;height:38px;padding:0 11px;border:1px solid rgba(105,220,226,.28);border-radius:11px;background:rgba(4,17,28,.78);color:#eaffff;font:inherit;font-size:.72rem;outline:0}
.emoji-picker-search:focus{border-color:rgba(105,240,240,.72);box-shadow:0 0 0 3px rgba(59,216,220,.12)}
.emoji-picker-tabs{display:flex;gap:5px;overflow-x:auto;padding:1px 2px 7px 2px;scroll-padding-inline:12px;scrollbar-width:thin;scrollbar-color:rgba(101,224,226,.62) transparent;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x;direction:rtl}
.emoji-picker-tabs::-webkit-scrollbar{height:5px}
.emoji-picker-tabs::-webkit-scrollbar-track{background:transparent}
.emoji-picker-tabs::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(101,224,226,.62)}
.emoji-category{flex:0 0 auto;height:29px;padding:0 9px;border:1px solid rgba(105,220,226,.18);border-radius:9px;background:rgba(255,255,255,.045);color:#9fcdd2;font:inherit;font-size:.63rem;cursor:pointer;white-space:nowrap}
.emoji-category.active,.emoji-category:hover{border-color:rgba(105,240,240,.62);background:rgba(44,205,211,.17);color:#eaffff}
.emoji-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-height:270px;overflow-y:auto;padding:2px}
.emoji-option{display:grid;place-items:center;width:100%;height:38px;padding:0;border:0;border-radius:10px;background:transparent;font-size:1.42rem;line-height:1;cursor:pointer;transition:transform .14s ease,background .14s ease}
.emoji-option:hover,.emoji-option:focus-visible{background:rgba(32,217,220,.14);transform:scale(1.12);outline:0}
.emoji-option.is-animated{animation:emojiFloat 1.8s ease-in-out infinite}
.emoji-empty{grid-column:1/-1;padding:20px 8px;color:#96b5bb;text-align:center;font-size:.72rem}
.attachment-load-error{opacity:.72;filter:grayscale(.7);background:rgba(255,95,121,.08)}
.attachment-thumbnail{filter:blur(1.8px) saturate(.72) contrast(.9);opacity:.88;transition:filter .2s ease,opacity .2s ease}
.attachment-low-quality{filter:blur(3.5px) saturate(.62) contrast(.86)!important;image-rendering:pixelated;opacity:.78!important}
.media-deferred-preview{min-height:110px;background:linear-gradient(135deg,rgba(50,91,112,.34),rgba(12,28,43,.82));opacity:.58}
.image-attachment img:not([src]),.attachment-collection-image img:not([src]){min-height:120px;background:linear-gradient(135deg,rgba(50,91,112,.34),rgba(12,28,43,.82));filter:blur(5px);opacity:.58}
.image-attachment:hover .attachment-thumbnail,.attachment-collection-image:hover .attachment-thumbnail{filter:blur(1px) saturate(.86) contrast(.96);opacity:.96}
.emoji-picker[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
@keyframes emojiFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-4deg)}}
html[data-theme="light"] .emoji-picker-search{background:#f3f7fb;color:#1e2a3d;border-color:#cbd9e8}
html[data-theme="light"] .emoji-category{background:#f1f5fa;color:#294568;border-color:#cbd9e8}
html[data-theme="light"] .emoji-category.active,html[data-theme="light"] .emoji-category:hover{background:#e0effc;color:#1d5daf;border-color:#9fc4e8}
@media(max-width:700px){.emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr));max-height:38dvh}.emoji-option{height:40px;font-size:1.48rem}.emoji-picker-search{height:40px}}

/* Final conversation-action placement: the ellipsis stays on the physical
   left edge of every row, independent of title length or direction. */
.user .row-actions-menu{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:40!important;
  margin:0!important;
}
.user .row-actions-menu:not(.has-pin){
  display:block!important;
  width:29px!important;
  min-width:29px!important;
  height:29px!important;
}
.user .row-actions-menu:not(.has-pin) .row-actions-toggle{
  display:grid!important;
  width:29px!important;
  min-width:29px!important;
  max-width:29px!important;
  height:29px!important;
  min-height:29px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.user .row-actions-menu.has-pin{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:3px!important;
  width:66px!important;
  min-width:66px!important;
  height:30px!important;
  direction:ltr!important;
  overflow:visible!important;
}
.user .row-actions-menu.has-pin .row-actions-toggle{
  order:1!important;
  flex:0 0 29px!important;
  width:29px!important;
  min-width:29px!important;
  max-width:29px!important;
  height:29px!important;
  min-height:29px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.user .row-actions-menu.has-pin .conversation-pin-indicator{
  order:2!important;
  position:static!important;
  inset:auto!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 26px!important;
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
  border:1px solid rgba(255,220,121,.56)!important;
  border-radius:7px!important;
  background:linear-gradient(145deg,rgba(255,205,83,.25),rgba(177,111,20,.18))!important;
  color:#ffe28a!important;
  font-size:12px!important;
  line-height:1!important;
  text-shadow:0 1px 3px rgba(0,0,0,.7)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.22)!important;
  pointer-events:none!important;
}
.user{padding-left:44px!important}
.user:has(.row-actions-menu.has-pin){padding-left:74px!important}

/* Last-resort mobile sidebar scroll fix: this block intentionally lives at
   the end so legacy responsive rules cannot disable touch scrolling. */
@media(max-width:700px){
  #sidebar{
    display:flex!important;
    flex-direction:column!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  #sidebar > #users{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
  #sidebar > #users .user[draggable="true"],
  #sidebar > #users .group-row[draggable="true"]{touch-action:pan-y!important}
}

/* Sidebar conversation rows: final 10-point visual contract. */
#users .user,
#users .group-row{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  padding-left:48px!important;
  overflow:visible!important;
  transform:none!important;
}
#users .user:has(.row-actions-menu.has-pin),
#users .group-row:has(.row-actions-menu.has-pin){padding-left:78px!important}
#users .user:hover,
#users .group-row:hover{transform:none!important}
#users .user>div:not(.row-actions-menu),
#users .group-row>div:not(.row-actions-menu){min-width:0!important;overflow:hidden!important}
#users .user>div:not(.row-actions-menu) strong,
#users .user>div:not(.row-actions-menu) small,
#users .group-row>div:not(.row-actions-menu) strong,
#users .group-row>div:not(.row-actions-menu) small{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#users .row-actions-menu{
  position:absolute!important;
  inset:50% auto auto 0!important;
  left:0!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:3px!important;
  width:29px!important;
  min-width:29px!important;
  height:30px!important;
  margin:0!important;
  overflow:visible!important;
  z-index:12!important;
}
#users .row-actions-menu.has-pin{width:65px!important;min-width:65px!important;direction:ltr!important;flex-wrap:nowrap!important}
#users .row-actions-toggle{
  display:grid!important;
  place-items:center!important;
  flex:0 0 29px!important;
  width:29px!important;
  min-width:29px!important;
  max-width:29px!important;
  height:29px!important;
  min-height:29px!important;
  padding:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(105,220,226,.28)!important;
  border-radius:9px!important;
  background:rgba(8,28,43,.82)!important;
  color:#bdeff2!important;
  font-size:.95rem!important;
  line-height:1!important;
  box-shadow:0 3px 9px rgba(0,0,0,.2)!important;
  overflow:hidden!important;
}
#users .row-actions-toggle:hover,
#users .row-actions-toggle:focus-visible{border-color:rgba(105,240,240,.72)!important;background:rgba(35,180,190,.28)!important;outline:2px solid rgba(105,240,240,.16)!important;outline-offset:1px!important}
#users .row-actions-menu .conversation-pin-indicator{
  position:static!important;
  inset:auto!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 26px!important;
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
  border:1px solid rgba(255,220,121,.58)!important;
  border-radius:7px!important;
  background:linear-gradient(145deg,rgba(255,205,83,.25),rgba(177,111,20,.18))!important;
  color:#ffe28a!important;
  font-size:12px!important;
  line-height:1!important;
  box-shadow:0 3px 9px rgba(0,0,0,.2)!important;
  pointer-events:none!important;
}
#users .unread-badge{z-index:5!important;pointer-events:none!important}
@media(max-width:700px){
  #users .user,#users .group-row{padding-left:46px!important}
  #users .user:has(.row-actions-menu.has-pin),#users .group-row:has(.row-actions-menu.has-pin){padding-left:76px!important}
  #users .row-actions-menu{inset:50% auto auto 0!important;left:0!important;right:auto!important}
}
.user{padding-left:44px!important}
.user:has(.row-actions-menu.has-pin){padding-left:74px!important}