:root{color-scheme:dark;--bg:#000000;--panel:#191b25;--line:#ffffff16;--text:#f2f0f8;--muted:#9b9caf;--accent:#b6a9ff;--accent-strong:#9583ef;--accent-ink:#211d35;--accent-soft:#302d47;--accent-border:#b6a9ff55;--accent-text:#ded7ff;--accent-badge:#39344e;--accent-surface:#28263a;--accent-hover:#2b2a3a;--accent-outline-soft:#b6a9ff33;--accent-outline:#b6a9ff66;--accent-outline-strong:#b6a9ff88;--accent-avatar:#564b7b;--accent-avatar-text:#e5deff;--accent-gradient-light:#d0c8ff;--font-scale:1;font-family:system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}button{cursor:pointer}[hidden]{display:none!important}
.brand{display:flex;align-items:center;gap:10px;font-size:calc(21px * var(--font-scale,1));font-weight:750}.brand-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;color:var(--accent-ink);background:linear-gradient(145deg,var(--accent),var(--accent-strong));font:700 calc(27px * var(--font-scale,1)) Georgia}
.eyebrow{margin:0 0 8px;color:var(--accent);font-size:calc(10px * var(--font-scale,1));font-weight:750;letter-spacing:1.5px}.muted{color:var(--muted)}.tiny{font-size:calc(11px * var(--font-scale,1));line-height:1.6}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent-strong) 22%,#11131a),#11131a 70%)}.auth-card{width:min(100%,420px);padding:32px;border:1px solid var(--line);border-radius:22px;background:#1a1c27;box-shadow:0 25px 90px #0005}.auth-card>.eyebrow{margin-top:34px}.auth-card h1{margin:0 0 8px;font-size:calc(30px * var(--font-scale,1))}.auth-card>.muted{margin:0 0 22px;font-size:calc(12px * var(--font-scale,1))}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:19px;border-radius:10px;background:#11131a}.tab{padding:10px;border:0;border-radius:8px;color:var(--muted);background:transparent;font-size:calc(12px * var(--font-scale,1))}.tab.active{color:var(--accent-text);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-border)}
label{display:grid;gap:7px;margin:13px 0;color:#d0cede;font-size:calc(11px * var(--font-scale,1));font-weight:650}input,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;outline:none;color:var(--text);background:#11131a;font-size:calc(12px * var(--font-scale,1))}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}input::placeholder,textarea::placeholder{color:#6f7182}label small{color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:400}
.primary{display:flex;justify-content:center;align-items:center;width:100%;padding:13px;border:0;border-radius:10px;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-strong));font-size:calc(12px * var(--font-scale,1));font-weight:750}.status{min-height:15px;margin:7px 0;color:var(--muted);font-size:calc(11px * var(--font-scale,1));line-height:1.5}.status.error{color:#ef9aa3}.status.success{color:#85d1b3}.auth-card>.tiny{text-align:center;margin:19px 0 0;color:#85879a;font-size:calc(10px * var(--font-scale,1))}
.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#151720}.topbar .brand-icon{width:33px;height:33px;font-size:calc(23px * var(--font-scale,1))}.topbar .brand{font-size:calc(18px * var(--font-scale,1))}.profile-pill{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;border:1px solid var(--line);border-radius:24px;color:#dedce8;background:#20222d;font-size:calc(11px * var(--font-scale,1))}.avatar{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid #ffffff18;border-radius:13px;color:var(--accent-avatar-text);background:linear-gradient(145deg,var(--accent-avatar),#292d42);font-size:calc(13px * var(--font-scale,1));font-weight:700;text-transform:uppercase}.profile-pill .avatar{width:27px;height:27px;border-radius:50%;font-size:calc(10px * var(--font-scale,1))}
.layout{height:calc(100vh - 66px);min-height:440px;display:grid;grid-template-columns:305px minmax(0,1fr)}.sidebar{display:flex;flex-direction:column;min-height:0;padding:24px 15px 15px;border-right:1px solid var(--line);background:#151720}.side-title{display:flex;align-items:center;justify-content:space-between;padding:0 7px}.side-title h2{margin:0;font-size:calc(21px * var(--font-scale,1))}.plus{width:35px;height:35px;border:0;border-radius:10px;color:var(--accent-ink);background:var(--accent);font-size:calc(22px * var(--font-scale,1))}.search{margin:20px 0 23px;background:#1d202b}.list-label{display:flex;justify-content:space-between;margin:0 7px 9px;color:#818397;font-size:calc(9px * var(--font-scale,1));letter-spacing:1.3px}.chat-list{flex:1;min-height:0;display:grid;align-content:start;gap:4px;overflow:auto}.chat-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px;border:1px solid transparent;border-radius:11px;color:inherit;background:transparent;text-align:left}.chat-item:hover{background:#20222d}.chat-item.active{border-color:var(--accent-border);background:var(--accent-surface)}.chat-item .avatar{width:38px;height:38px}.chat-copy{flex:1;min-width:0}.chat-copy strong,.chat-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-copy strong{font-size:calc(11px * var(--font-scale,1))}.chat-copy span{margin-top:5px;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}.chat-time{align-self:flex-start;color:#818397;font-size:calc(9px * var(--font-scale,1))}.privacy{margin:14px 0 0;padding:12px;border:1px solid var(--line);border-radius:11px;color:#aaa5bd;background:#1c1e29;font-size:calc(10px * var(--font-scale,1));line-height:1.5}
.main{position:relative;min-width:0;min-height:0;background:#11131a}.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center}.empty-mark{width:67px;height:67px;display:grid;place-items:center;margin-bottom:25px;border-radius:22px;color:var(--accent-ink);background:linear-gradient(145deg,var(--accent-gradient-light),var(--accent-strong));font:700 calc(39px * var(--font-scale,1)) Georgia}.empty h2{max-width:430px;margin:0 0 8px;font-size:calc(29px * var(--font-scale,1))}.empty>p:not(.eyebrow){max-width:390px;margin:0 0 22px;font-size:calc(12px * var(--font-scale,1));line-height:1.7}.empty .primary{width:auto;padding:12px 20px}
.chat{height:100%;min-height:0;display:flex;flex-direction:column}.chat-head{display:flex;align-items:center;gap:11px;min-height:72px;padding:10px 21px;border-bottom:1px solid var(--line);background:#191b25}.chat-head .avatar{width:39px;height:39px}.chat-title{flex:1;min-width:0}.chat-title strong,.chat-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-title strong{font-size:calc(12px * var(--font-scale,1))}.chat-title small{margin-top:5px;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}.back{display:none;width:32px;height:32px;border:1px solid var(--line);border-radius:9px;color:var(--text);background:#242633}.outline{padding:8px 11px;border:1px solid var(--line);border-radius:9px;color:#dedbea;background:#222431;font-size:calc(10px * var(--font-scale,1))}
@keyframes gather-loading-fade{from{opacity:.72}to{opacity:1}}
.messages{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:auto;padding:22px clamp(14px,5vw,66px)}#messages>.messages-loading{position:absolute;inset:0;display:grid;place-items:center;width:auto;max-width:none;min-height:0;margin:0;padding:18px;font-size:calc(16px * var(--font-scale,1));font-weight:650;line-height:1.5;text-align:center;pointer-events:none;animation:gather-loading-fade 1.8s ease-in-out infinite alternate}.message{display:flex;max-width:75%;align-self:flex-start}.message.mine{align-self:flex-end}.bubble{padding:10px 13px;border:1px solid var(--line);border-radius:13px 13px 13px 4px;background:#222531}.mine .bubble{border-color:var(--accent-outline-soft);border-radius:13px 13px 4px 13px;background:var(--accent-soft)}
.message.group-continued{margin-top:-5px}
.message.group-first:not(.mine) .bubble{border-bottom-left-radius:10px}
.message.group-middle:not(.mine) .bubble{border-top-left-radius:10px;border-bottom-left-radius:10px}
.message.group-last:not(.mine) .bubble{border-top-left-radius:10px}
.message.mine.group-first .bubble{border-bottom-right-radius:10px}
.message.mine.group-middle .bubble{border-top-right-radius:10px;border-bottom-right-radius:10px}
.message.mine.group-last .bubble{border-top-right-radius:10px}.meta{display:flex;gap:10px;margin-bottom:6px}.meta strong{color:var(--accent-text);font-size:calc(9px * var(--font-scale,1))}.meta time{color:#9092a4;font-size:calc(9px * var(--font-scale,1))}.body-text{font-size:calc(12px * var(--font-scale,1));line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.delete-message{display:none;float:right;margin-left:8px;border:0;color:#e9a4ac;background:transparent}.bubble:hover .delete-message{display:inline-block}
.composer{flex:none;width:calc(100% - 42px);max-width:900px;margin:0 auto 17px;padding:9px 12px 8px;border:1px solid var(--line);border-radius:13px;background:#1d202b}.composer textarea{display:block;min-height:32px;max-height:120px;padding:6px 0;border:0;resize:none;background:transparent;line-height:1.5}.composer textarea:focus{box-shadow:none}.composer>div{display:flex;align-items:center;justify-content:space-between;color:var(--accent-muted);font-size:calc(11px * var(--font-scale,1));line-height:1.45;letter-spacing:.05px}.composer button{width:31px;height:30px;border:0;border-radius:9px;color:var(--accent-ink);background:var(--accent);font-size:calc(19px * var(--font-scale,1))}
.overlay{position:fixed;z-index:5;inset:0;display:grid;place-items:center;padding:16px;background:#07080dc9;backdrop-filter:blur(8px)}.modal{position:relative;width:min(100%,440px);max-height:90vh;overflow:auto;padding:27px;border:1px solid var(--line);border-radius:18px;background:#1b1d28}.modal h2{margin:0 35px 7px 0;font-size:calc(22px * var(--font-scale,1))}.modal>.muted{margin:0 0 17px}.close{position:absolute;top:15px;right:15px;width:29px;height:29px;border:1px solid var(--line);border-radius:8px;color:#ddd;background:#292b38;font-size:calc(18px * var(--font-scale,1))}.people-results{display:grid;gap:5px;max-height:235px;overflow:auto;margin:10px 0}.person{display:flex;align-items:center;gap:10px;width:100%;padding:9px;border:1px solid transparent;border-radius:10px;color:inherit;background:#242633;text-align:left}.person:hover{border-color:var(--accent-border)}.person .avatar{width:33px;height:33px}.person-copy{flex:1;min-width:0}.person-copy strong,.person-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person-copy strong{font-size:calc(11px * var(--font-scale,1))}.person-copy small{margin-top:4px;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}.signout{width:100%;margin-top:17px;padding:11px;border:1px solid #ef9aa333;border-radius:9px;color:#efa3aa;background:#ef9aa30b;font-size:calc(11px * var(--font-scale,1))}
.toast{position:fixed;z-index:9;right:18px;bottom:18px;max-width:calc(100vw - 36px);padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:#292b39;box-shadow:0 10px 35px #0008;font-size:calc(11px * var(--font-scale,1));opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}
@media(max-width:720px){.topbar{height:60px;padding:0 13px}.layout{height:calc(100vh - 60px);grid-template-columns:1fr}.sidebar{padding:19px 13px 12px;border:0}.main{display:none}.layout.show-chat .sidebar,.layout.show-home .sidebar{display:none}.layout.show-chat .main,.layout.show-home .main{display:block}.back{display:grid;place-items:center}.chat-head{min-height:65px;padding:8px 11px;gap:8px;flex-wrap:wrap}.chat-head .chat-title{flex:1 1 110px;min-width:80px}.messages{padding:16px 11px}.message{max-width:86%}.composer{width:calc(100% - 18px);margin-bottom:9px}.modal{padding:23px 19px}.auth-card{padding:28px 22px}.empty h2{font-size:calc(24px * var(--font-scale,1))}}

.requests-button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:#dedbea;background:#20222d;text-align:left;font-size:calc(11px * var(--font-scale,1))}
.requests-button span{min-width:21px;padding:3px 6px;border-radius:12px;color:var(--accent-text);background:var(--accent-badge);text-align:center;font-size:calc(10px * var(--font-scale,1))}
.requests-button.has-requests{border-color:var(--accent-outline-soft);background:var(--accent-surface)}
.request-section{margin-top:20px}.request-section h3{margin:0 0 9px;color:#aaaabd;font-size:calc(10px * var(--font-scale,1));letter-spacing:1px;text-transform:uppercase}
.request-list{display:grid;gap:7px}.request-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#222531}
.request-item .avatar{width:34px;height:34px}.request-copy{flex:1;min-width:0}.request-copy strong,.request-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-copy strong{font-size:calc(11px * var(--font-scale,1))}.request-copy small{margin-top:4px;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}
.request-actions{display:flex;gap:6px}.request-actions button{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:calc(10px * var(--font-scale,1))}.request-accept{color:var(--accent-ink);background:var(--accent);border-color:transparent!important}.request-decline{color:#e0aab0;background:#34252d}.request-pending{color:var(--accent-text);font-size:calc(10px * var(--font-scale,1))}
.person-disabled{opacity:.65;cursor:not-allowed}.person:disabled:hover{border-color:transparent}
.chat-notice{flex:none;margin:0 22px 8px;padding:10px 12px;border:1px solid #e2a4a455;border-radius:9px;color:#efc1c5;background:#3a252d;font-size:calc(10px * var(--font-scale,1));line-height:1.5}
.chat-head #block-user{color:#efb0b7;border-color:#ef9aa333;background:#34252d}
.chat-head #block-user:disabled{opacity:.5;cursor:wait}
.composer textarea:disabled{opacity:.55;cursor:not-allowed}.composer button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:720px){.requests-button{margin-top:10px}.request-item{align-items:flex-start;flex-wrap:wrap}.request-actions{width:100%;padding-left:44px}.chat-notice{margin:0 10px 8px}.chat-head #block-user{padding:7px 9px}}

/* Separate private-message and group-chat navigation */
.new-chat-actions{display:grid;gap:7px;margin:16px 0 0}
.new-chat-action{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;text-align:left;font-size:calc(11px * var(--font-scale,1));font-weight:700;transition:background .15s,border-color .15s}
.direct-action{color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-color:transparent}
.group-action{color:#dedbea;background:#252735}
.new-chat-action:hover{border-color:var(--accent-outline-strong)}
.requests-button{margin-top:10px}
.chat-section{margin-top:17px}
.chat-section summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 7px 9px;color:#aaaabd;font-size:calc(10px * var(--font-scale,1));font-weight:750;letter-spacing:1px;text-transform:uppercase;cursor:pointer;list-style:none}
.chat-section summary::-webkit-details-marker{display:none}
.chat-section summary::after{content:"⌄";order:1;margin-left:3px;color:#85879a;font-size:calc(13px * var(--font-scale,1));transition:transform .15s}
.chat-section:not([open]) summary::after{transform:rotate(-90deg)}
.chat-section summary>span:first-child{flex:1}
.section-count{min-width:19px;padding:2px 6px;border-radius:12px;color:var(--accent-text);background:var(--accent-badge);text-align:center;font-size:calc(9px * var(--font-scale,1));letter-spacing:0}
.chat-section .chat-list{display:grid;align-content:start;gap:4px}
.section-empty{margin:0 7px 4px;padding:5px 0;color:#888a9c}
.empty-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:min(100%,430px)}
.empty-actions .primary,.secondary-action{width:100%;min-height:43px;padding:11px 12px;border-radius:10px;font-size:calc(11px * var(--font-scale,1))}
.secondary-action{border:1px solid var(--line);color:#e5e0f2;background:#242633;font-weight:700}
.secondary-action:hover{border-color:var(--accent-outline);background:var(--accent-hover)}
@media(max-width:720px){
  .new-chat-actions{grid-template-columns:1fr 1fr;gap:6px}
  .new-chat-action{padding:10px 8px;font-size:calc(10px * var(--font-scale,1));text-align:center}
  .chat-section{margin-top:13px}
  .empty-actions{grid-template-columns:1fr;width:min(100%,300px)}
}

/* Keep each conversation list independently scrollable in the sidebar. */
.chat-section{display:flex;flex:1;flex-direction:column;min-height:72px}
.chat-section:not([open]){flex:0 0 auto;min-height:0}
.chat-section[open] .chat-list{flex:1;min-height:0;overflow:auto}

/* Clear startup feedback and a direct retry when chat data cannot load. */
.chat-load-status{display:flex;align-items:flex-start;gap:9px;margin:12px 2px 0;padding:10px;border:1px solid var(--accent-outline-soft);border-radius:10px;color:var(--accent-text);background:var(--accent-surface);font-size:calc(10px * var(--font-scale,1));line-height:1.5}
.chat-load-status.error{border-color:#ef9aa355;color:#f1c0c4;background:#34252d}
.chat-load-status span{flex:1;min-width:0;overflow-wrap:anywhere}
.chat-load-status button{flex:none;padding:5px 8px;border:1px solid #ffffff22;border-radius:7px;color:var(--text);background:#262837;font-size:calc(10px * var(--font-scale,1));font-weight:700}

/* Persistent Home navigation in the signed-in header. */
.topbar-left{display:flex;align-items:center;gap:18px;min-width:0}
.home-button{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:#dedbea;background:#20222d;font-size:calc(11px * var(--font-scale,1));font-weight:700;transition:background .15s,border-color .15s}
.home-button:hover{border-color:var(--accent-outline);background:var(--accent-hover)}
.home-glyph{color:var(--accent);font-size:calc(18px * var(--font-scale,1));line-height:1}
@media(max-width:720px){.topbar-left{gap:9px}.home-button{padding:7px 9px;font-size:calc(10px * var(--font-scale,1))}}
@media(max-width:380px){.topbar-left{gap:6px}.home-button{gap:4px;padding:7px 7px}.topbar .brand{gap:6px;font-size:calc(16px * var(--font-scale,1))}.topbar .brand-icon{width:29px;height:29px;font-size:calc(20px * var(--font-scale,1))}}

/* Friend request and friends-list layout. */
#friends-find{margin-top:4px}
#friends-error{margin:6px 0;color:#ef9aa3;overflow-wrap:anywhere}
#friends-error:empty{display:none}
#friends-modal .request-section{margin-top:19px}
#friends-modal .request-item{min-width:0}
#friends-modal .request-actions{flex:none}
#friends-modal .request-actions button{white-space:nowrap}
@media(max-width:720px){
  #friends-modal .request-actions{width:auto;padding-left:0;margin-left:auto}
  #friends-modal .request-item{align-items:center;flex-wrap:nowrap}
}

/* Four inbox folders and recoverable message list. */
.folder-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:5px 0 10px;padding:4px;border:1px solid var(--line);border-radius:11px;background:#11131a}
.folder-tab{min-width:0;min-height:34px;padding:6px 3px;border:0;border-radius:8px;color:#a7a8ba;background:transparent;font-size:calc(9px * var(--font-scale,1));font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.folder-tab.active{color:var(--accent-contrast,var(--accent-text));background:var(--accent-soft);font-weight:800;text-shadow:0 1px 0 #0002}
.folder-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.folder-panel{display:flex;flex:1;flex-direction:column;min-height:100px;margin:0 0 10px}
.folder-panel[hidden]{display:none!important}
.folder-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 7px 8px;color:#aaaabd;font-size:calc(10px * var(--font-scale,1));font-weight:750;letter-spacing:.8px;text-transform:uppercase}
.folder-panel .chat-list{flex:1;min-height:45px;overflow:auto}
.folder-panel-note{margin:0 3px 10px;padding:9px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:#1c1e29;font-size:calc(10px * var(--font-scale,1));line-height:1.5}
.deleted-item{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#222531}
.deleted-item>.avatar{width:32px;height:32px}
.deleted-copy{flex:1;min-width:0}
.deleted-copy strong,.deleted-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deleted-copy strong{font-size:calc(11px * var(--font-scale,1))}
.deleted-copy small{margin-top:3px;color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.deleted-preview{margin:6px 0 0;color:#d2d0de;font-size:calc(10px * var(--font-scale,1));line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.deleted-item>.request-accept{flex:none;padding:7px 9px;border:0;border-radius:8px;color:var(--accent-ink);background:var(--accent);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.delete-message{display:inline-block;opacity:.65;padding:2px 5px;border:1px solid #ef9aa333;border-radius:6px;cursor:pointer}
.delete-message:hover,.delete-message:focus-visible{opacity:1;background:#49313a}
#blocked-list .request-item{align-items:center;flex-wrap:nowrap}
#blocked-list .request-actions{width:auto;padding-left:0;margin-left:auto}
@media(max-width:720px){
  .folder-tabs{gap:3px;margin-top:7px}
  .folder-tab{font-size:calc(8px * var(--font-scale,1));min-height:37px;padding:5px 2px}
  .folder-panel{min-height:90px}
  .deleted-item{gap:7px;padding:8px}
  .deleted-item>.request-accept{padding:7px 8px}
}

/* Main home workspace: folders and lists use the large reading area. */
.topbar-actions{display:flex;align-items:center;gap:10px}
.sidebar-hint{margin:20px 4px;color:var(--muted);font-size:calc(11px * var(--font-scale,1));line-height:1.6}
.home-workspace{height:100%;min-height:0;display:flex;flex-direction:column;gap:17px;overflow:auto;padding:clamp(18px,3vw,34px)}
.workspace-header{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.workspace-header h1{margin:0 0 7px;font-size:calc(29px * var(--font-scale,1));font-weight:760;letter-spacing:-.7px}
.workspace-subtitle{margin:0;max-width:520px;font-size:calc(12px * var(--font-scale,1));line-height:1.6}
.workspace-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;max-width:440px}
.workspace-actions button{width:auto;min-height:38px;padding:9px 13px;font-size:calc(11px * var(--font-scale,1))}
.workspace-search{display:block;max-width:560px;margin:0;color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:650}
.workspace-search .search{margin:6px 0 0;background:#1d202b}
.workspace-tabs{margin:0;max-width:720px;grid-template-columns:repeat(4,minmax(0,1fr))}
.workspace-folder{flex:1;min-height:170px;padding:15px;border:1px solid var(--line);border-radius:15px;background:#191b25}
.workspace-folder-note{margin:0 0 12px}
.workspace-folder .folder-panel-heading,.workspace-group-section .folder-panel-heading{padding:0 2px 11px}
.workspace-chat-list{display:grid;align-content:start;gap:7px;min-height:60px;max-height:340px;overflow:auto;padding-right:3px}
.workspace-group-section{display:flex;flex-direction:column;min-height:90px;padding:15px;border:1px solid var(--line);border-radius:15px;background:#191b25}
.chat-row{display:flex;align-items:center;gap:8px;min-width:0;padding:3px;border:1px solid var(--line);border-radius:12px;background:#20222d}
.chat-row .chat-item{flex:1;min-width:0;width:auto;border:0;background:transparent}
.chat-row .chat-item:hover{background:#292b39}
.chat-row .chat-item.active{border:0;background:#302d3d}
.chat-row .chat-item.has-unread .chat-copy strong{color:var(--accent-text)}
.chat-row .chat-item.has-unread .chat-copy span{color:#dedbea;font-weight:600}
.unread-badge{display:inline-flex!important;align-self:flex-start;width:max-content;margin-top:5px;padding:2px 7px;border-radius:999px;color:var(--accent-ink);background:var(--accent);font-size:calc(9px * var(--font-scale,1));font-weight:800;line-height:1.4}
.chat-copy{flex:1;min-width:0}
.chat-copy strong{font-size:calc(12px * var(--font-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-copy span{display:-webkit-box;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.4;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;font-size:calc(11px * var(--font-scale,1))}
.chat-time{flex:none;padding:3px 2px 0 0}
.conversation-delete{flex:none;min-width:54px;padding:8px 9px;border:1px solid #ef9aa333;border-radius:9px;color:#efb0b7;background:#34252d;font-size:calc(10px * var(--font-scale,1));font-weight:700}
.conversation-delete:hover{border-color:#ef9aa377;background:#482d36}
#blocked-list .request-item{align-items:center;flex-wrap:nowrap}
#blocked-list .request-actions{width:auto;padding-left:0;margin-left:auto}
#deleted-list .deleted-item{max-width:900px}
.chat-row:focus-within{border-color:var(--accent-border)}
.chat-item:focus-visible,.conversation-delete:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.settings-section{margin-top:20px}
.settings-section h3{margin:0 0 10px;color:#aaaabd;font-size:calc(11px * var(--font-scale,1));letter-spacing:1px;text-transform:uppercase}
.accent-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.accent-choice{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:#222531;font-size:calc(11px * var(--font-scale,1));text-align:left}
.accent-choice[aria-pressed="true"],.font-choice[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.accent-swatch{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid #ffffff44}
.accent-swatch.lavender{background:#b6a9ff}.accent-swatch.blue{background:#9bcfff}.accent-swatch.mint{background:#9be2c4}.accent-swatch.rose{background:#ffb6ca}.accent-swatch.amber{background:#ffd48c}.accent-swatch.teal{background:#9be2e4}
.font-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.font-choice{padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:#222531;font-size:calc(11px * var(--font-scale,1))}
#settings-note{margin-top:17px}
@media(max-width:1000px){
  .workspace-header{flex-direction:column}
  .workspace-actions{justify-content:flex-start;max-width:none}
}
@media(max-width:720px){
  .topbar-actions{gap:6px}
  .topbar-actions .home-button{padding:7px 8px;font-size:calc(10px * var(--font-scale,1))}
  .home-workspace{gap:13px;padding:16px 12px 22px}
  .workspace-header{gap:13px;padding-bottom:13px}
  .workspace-header h1{font-size:calc(23px * var(--font-scale,1))}
  .workspace-subtitle{font-size:calc(11px * var(--font-scale,1))}
  .workspace-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:6px}
  .workspace-actions button{width:100%;min-width:0;padding:9px 6px;font-size:calc(10px * var(--font-scale,1))}
  .workspace-tabs{width:100%;gap:3px}
  .folder-tab{font-size:calc(9px * var(--font-scale,1));padding:6px 3px;overflow-wrap:anywhere}
  .workspace-folder{padding:10px;min-height:135px}
  .workspace-chat-list{max-height:none;overflow:visible}
  .chat-row{gap:5px;padding:3px}
  .chat-row .chat-item{gap:8px;padding:8px 6px}
  .chat-row .chat-item .avatar{width:34px;height:34px;border-radius:10px}
  .chat-copy strong{font-size:calc(11px * var(--font-scale,1))}
  .chat-copy span{font-size:calc(10px * var(--font-scale,1));line-height:1.35;max-height:2.7em;-webkit-line-clamp:2}
  .chat-time{display:none}
  .conversation-delete{min-width:49px;padding:8px 6px;font-size:calc(9px * var(--font-scale,1))}
  .workspace-group-section{padding:10px}
  .accent-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:380px){
  .topbar-actions{gap:4px}
  .topbar-actions .home-button{gap:4px;padding:6px 7px;font-size:calc(9px * var(--font-scale,1))}
  .profile-pill #user-name{display:none}
}

/* Theme every selected, highlighted and identity accent from the active palette. */
.requests-button.has-requests{border-color:var(--accent-border);background:var(--accent-surface)}
.chat-load-status{border-color:var(--accent-outline-soft);color:var(--accent-text);background:var(--accent-surface)}
.chat-item.active{border-color:var(--accent-border);background:var(--accent-surface)}
.chat-item:focus-visible,.conversation-delete:focus-visible{outline-color:var(--accent)}
.request-pending{color:var(--accent-text)}
.folder-tab.active{color:var(--accent-contrast,var(--accent-text));background:var(--accent-soft);font-weight:800;text-shadow:0 1px 0 #0002}
.section-count{color:var(--accent-text);background:var(--accent-badge)}
.new-chat-action:hover,.secondary-action:hover,.home-button:hover{border-color:var(--accent-outline);background:var(--accent-hover)}
.mine .bubble{border-color:var(--accent-outline-soft);background:var(--accent-soft)}
.meta strong{color:var(--accent-text)}
.person:hover{border-color:var(--accent-border)}
.topbar .brand-icon{color:var(--accent-ink);background:linear-gradient(145deg,var(--accent-gradient-light),var(--accent-strong))}
.eyebrow{color:var(--accent)}
.empty-mark{color:var(--accent-ink);background:linear-gradient(145deg,var(--accent-gradient-light),var(--accent-strong))}
/* Keep the iPhone header controls in their own compact, non-overlapping slots. */
@media(max-width:720px){
  .topbar{height:60px;min-height:60px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:0 10px}
  .topbar-left{min-width:0;gap:7px}
  .topbar .brand{gap:7px;font-size:16px}
  .topbar .brand-icon{width:30px;height:30px;font-size:21px}
  .topbar-actions{min-width:0;gap:5px;justify-content:flex-end}
  #settings-open{width:38px;height:38px;min-width:38px;justify-content:center;gap:0;padding:0}
  #settings-open .home-glyph{font-size:19px}
  #settings-open span:last-child{display:none}
  #home-open{width:36px;height:36px;justify-content:center;gap:0;padding:0}
  #home-open span:last-child{display:none}
  .profile-pill{min-width:0;max-width:124px;gap:5px;padding:4px 7px 4px 4px}
  .profile-pill #user-name{display:block;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:380px){
  .topbar{gap:4px;padding:0 7px}
  .topbar-left{gap:5px}
  .topbar-actions{gap:4px}
  .topbar .brand{gap:5px;font-size:15px}
  .topbar .brand-icon{width:28px;height:28px;font-size:20px}
  #settings-open,#home-open{width:34px;height:34px;min-width:34px}
  .profile-pill #user-name{display:none}
}

/* Full accent-color theme: the selected hue tints the whole app, with deeper surfaces for contrast. */
:root{
  --accent-deep:#171823;--accent-panel:#1a1b26;--accent-panel-raised:#1e202c;
  --accent-input:#13141d;--accent-chat:#20212d;--accent-chat-border:#343646;
  --accent-muted:#aaa5bd;--accent-contrast:#ded7ff;
}
body{background:var(--accent-deep)}
.topbar,.sidebar{background:var(--accent-panel);border-color:var(--accent-outline-soft)}
.main{background:var(--accent-deep)}
.chat-head{background:var(--accent-panel);border-color:var(--accent-outline-soft)}
.chat,.messages{background:transparent}
.composer{background:var(--accent-panel-raised);border-color:var(--accent-chat-border)}
.composer textarea{background:transparent;color:var(--text)}
input,textarea{background:var(--accent-input);border-color:var(--accent-chat-border)}
.search{background:var(--accent-panel-raised)}
.profile-pill,.back,.outline,.group-action,.secondary-action,.chat-item:hover,
.person,.request-item,.new-chat-action.group-action,.toast,.close{
  background:var(--accent-panel-raised);border-color:var(--accent-chat-border)
}
.privacy,.chat-section,.workspace-folder,.workspace-group-section{background:var(--accent-panel)}
.chat-item.active,.folder-tab.active,.tab.active{background:var(--accent-soft)}
.bubble{background:var(--accent-chat);border-color:var(--accent-chat-border)}
.mine .bubble{background:var(--accent-chat);border-color:var(--accent-chat-border)}
.chat-notice{background:color-mix(in srgb,var(--accent) 15%,#251c23);border-color:color-mix(in srgb,var(--accent) 35%,#3a252d)}
.modal,.auth-card{background:var(--accent-panel);border-color:var(--accent-outline-soft)}
.overlay{background:color-mix(in srgb,var(--accent-deep) 86%,black)}
.tabs{background:var(--accent-deep)}
input::placeholder,textarea::placeholder{color:var(--accent-muted)}
.profile-pill,.outline,.requests-button,.secondary-action,.group-action{color:var(--accent-contrast)}
.chat-time,.meta time,.chat-title small,.chat-copy span{color:var(--accent-muted)}
.chat-item.active,.person:hover,.request-item:hover{border-color:var(--accent-outline)}
.composer:focus-within{border-color:var(--accent-chat-border)}
.composer textarea:focus{background:transparent}
@media(max-width:720px){
  .chat-head{background:var(--accent-panel)}
  .messages{background:var(--accent-deep)}
  .composer{background:var(--accent-panel-raised)}
}

/* Message selection: one Select control, then checkboxes and one bulk action. */
.chat-head{flex-wrap:wrap}
#select-messages,#delete-selected{flex:none}
#delete-selected{color:var(--accent-ink);background:var(--accent);border-color:transparent}
.message.selected .bubble{outline:2px solid var(--accent);outline-offset:2px}
.message-select{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:max-content;max-width:100%;margin:10px 0 0;padding:7px 10px;border:1px solid var(--accent-outline);border-radius:8px;color:var(--accent-contrast);background:var(--accent-surface);font-size:calc(12px * var(--font-scale,1));cursor:pointer}
.message-select input{appearance:auto;accent-color:var(--accent);width:18px;height:18px;flex:none;margin:0;padding:0;box-shadow:none}
@media(max-width:720px){
  .chat-head{gap:7px;row-gap:7px}
  #select-messages,#delete-selected,#block-user,#add-people,#edit-group-photo,#group-settings-open,#search-messages-open{padding:7px 9px;font-size:calc(10px * var(--font-scale,1))}
  .chat-head .chat-title{flex:1 1 80px}
}


/* Desktop: keep the navigation rail stationary and scroll only the workspace. */
@media(min-width:721px){
  html,body{height:100%;min-height:0;overflow:hidden}
  .layout{height:calc(100dvh - 66px);min-height:0;overflow:hidden}
  .sidebar{position:relative;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain}
  .main{height:100%;min-height:0;overflow:hidden}
  .home-workspace{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-items:stretch}
  .workspace-folder,.workspace-group-section{flex:0 0 auto;min-width:0}
  .workspace-chat-list{width:100%;min-width:0;max-height:none;overflow:visible}
  .chat-row{width:100%;min-width:0;flex:0 0 auto;align-items:center}
  .chat-row .chat-item{min-width:0;flex:1 1 auto}
  .chat-row .chat-copy{min-width:0}
}

/* Account profile pictures and password management. */
.avatar.has-picture{overflow:hidden;padding:0;background:var(--accent-panel-raised)}
.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.profile-modal{max-height:92vh}
.profile-photo-editor{display:flex;align-items:center;gap:15px;margin:12px 0 19px;padding:12px;border:1px solid var(--accent-outline-soft);border-radius:13px;background:var(--accent-panel-raised)}
.profile-avatar-preview{width:76px;height:76px;border-radius:50%;font-size:calc(25px * var(--font-scale,1))}
.profile-photo-actions{display:grid;justify-items:start;gap:8px;min-width:0}
.photo-upload-label{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;margin:0!important;padding:8px 11px;border:1px solid var(--accent-border);border-radius:9px;color:var(--accent-contrast);background:var(--accent-surface);font-size:calc(11px * var(--font-scale,1));font-weight:700;cursor:pointer}
.photo-upload-label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.profile-photo-actions .outline{padding:6px 9px;font-size:calc(10px * var(--font-scale,1))}
.profile-photo-actions small{max-width:280px;color:var(--muted);font-size:calc(9px * var(--font-scale,1));line-height:1.5}
.password-form{display:grid;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.password-form h3{margin:0;color:var(--accent-contrast);font-size:calc(13px * var(--font-scale,1))}
.password-form>p{margin:0}
.password-form label{display:grid;gap:6px;color:#aaaabd;font-size:calc(10px * var(--font-scale,1));font-weight:650}
.password-form label input{width:100%}
.password-form .secondary-action{width:100%;min-height:39px}
.password-form .auth-security-note{margin-top:4px;padding:9px;border:1px solid var(--accent-outline-soft);border-radius:9px;background:var(--accent-panel-raised);line-height:1.5}
.auth-security-note{line-height:1.5}
@media(max-width:500px){
  .profile-photo-editor{align-items:flex-start;gap:11px;padding:10px}
  .profile-avatar-preview{width:64px;height:64px}
  .profile-photo-actions small{max-width:205px}
}

.group-photo-modal{max-width:460px}
.group-photo-modal>p.tiny{margin:0 0 12px;line-height:1.55}
#group-avatar-save{width:100%;margin-top:6px}

.group-settings-modal,.message-search-modal{max-width:560px}
.group-settings-modal label,.message-search-modal label{display:grid;gap:6px;margin:12px 0;color:#b7b5c7;font-size:calc(11px * var(--font-scale,1));font-weight:650}
.group-settings-modal textarea{width:100%;min-height:72px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--accent-input);color:var(--text);resize:vertical}
.group-settings-members-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 9px;padding-top:15px;border-top:1px solid var(--line)}
.group-settings-members-head h3{margin:0;font-size:calc(13px * var(--font-scale,1))}
.group-settings-members{display:grid;gap:7px}
.group-member-row{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--accent-panel)}
.group-member-row .avatar{width:35px;height:35px;flex:none}
.group-member-copy{display:grid;gap:3px;flex:1;min-width:0}
.group-member-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(11px * var(--font-scale,1))}
.group-member-copy small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.group-member-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.group-member-actions button{padding:6px 7px;font-size:calc(9px * var(--font-scale,1))}
.group-member-actions .group-remove{color:#f0b0b7;border-color:#ef9aa344}
#group-settings-save{width:100%}
.message-search-results{display:grid;gap:7px;max-height:48vh;overflow:auto}
.message-search-result{display:grid;gap:5px;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--accent-panel);color:var(--text);text-align:left}
.message-search-result strong{font-size:calc(10px * var(--font-scale,1))}
.message-search-result span{font-size:calc(11px * var(--font-scale,1));line-height:1.45;overflow-wrap:anywhere}
.message-search-result small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.typing-indicator{flex:none;min-height:20px;padding:0 24px 4px;color:var(--accent-text);font-size:calc(10px * var(--font-scale,1))}
.reply-compose{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 8px;padding:8px 10px;border-left:3px solid var(--accent);border-radius:8px;background:var(--accent-panel)}
.reply-compose>div{display:grid;gap:3px;min-width:0}
.reply-compose small{color:var(--accent-text);font-size:calc(9px * var(--font-scale,1));font-weight:750}
.reply-compose span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}
.reply-compose button{flex:none;width:26px;height:26px;color:var(--text);background:var(--accent-surface)}
.reply-preview{display:grid;gap:3px;margin-bottom:8px;padding:7px 9px;border-left:3px solid var(--accent);border-radius:7px;background:#00000018}
.reply-preview strong{color:var(--accent-text);font-size:calc(9px * var(--font-scale,1))}
.reply-preview span{font-size:calc(10px * var(--font-scale,1));opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-actions{display:flex;justify-content:flex-end;margin-top:5px}
.message-reply{padding:3px 6px;border:0;border-radius:6px;background:transparent;color:var(--accent-text);font-size:calc(9px * var(--font-scale,1))}
.message-receipts{margin-top:6px;color:var(--muted);font-size:calc(9px * var(--font-scale,1));font-weight:600;text-align:right;letter-spacing:.01em}
.message-receipts.is-seen{color:var(--accent-text)}
.message-receipts.is-sent{opacity:.82}
.message.search-highlight .bubble{outline:2px solid var(--accent);outline-offset:3px}
.messages .message[data-message-id]{scroll-margin-top:18px}

.message-search-modal{max-width:620px}
@media(max-width:720px){.chat-head{column-gap:6px;row-gap:6px}.chat-head button{flex:0 0 auto}.group-member-row{align-items:flex-start}.group-member-actions{max-width:150px}}

.chat-actions-modal{max-width:470px}
.chat-actions-modal h2{margin-bottom:18px}
.chat-action-section{margin-top:17px;padding-top:14px;border-top:1px solid var(--line)}
.chat-action-section h3{margin:0 0 10px;color:var(--accent-text);font-size:calc(11px * var(--font-scale,1));letter-spacing:.04em;text-transform:uppercase}
.chat-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chat-action{min-height:43px;text-align:left;white-space:normal}
.chat-action-trigger{flex:none;white-space:nowrap}
.chat-actions-trigger span{margin-left:5px;color:var(--accent-text)}
@media(max-width:720px){.chat-head{flex-wrap:nowrap;min-height:64px}.chat-head .chat-title{flex:1 1 auto;min-width:0}.chat-actions-trigger{padding:7px 9px;font-size:calc(10px * var(--font-scale,1))}.chat-actions-modal{width:min(100%,470px)}}

.about-blank-sidebar{margin-top:8px}

.friend-online-dot{flex:none;width:9px;height:9px;margin:0 1px;border:1px solid #87939a;border-radius:50%;background:transparent}
.friend-online-dot.online{border-color:#54c78c;background:#54c78c;box-shadow:0 0 0 3px #54c78c22}
.online-privacy-section{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.online-status-setting{display:flex;align-items:flex-start;gap:10px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--accent-panel);cursor:pointer}
.online-status-setting input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.online-status-setting span{display:grid;gap:4px}
.online-status-setting strong{color:var(--text);font-size:calc(11px * var(--font-scale,1))}
.online-status-setting small{color:var(--muted);font-size:calc(9px * var(--font-scale,1));line-height:1.5}


/* Home workspace lists: let sections grow around their cards instead of overlapping. */
.home-workspace>.workspace-folder,
.home-workspace>.workspace-group-section{
  flex:0 0 auto;
  min-height:0;
  width:100%;
}
.home-workspace .workspace-chat-list{
  max-height:none;
  min-height:0;
  overflow:visible;
}

.message-receipt-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:6px}
.message-receipts-button{appearance:none;border:0;background:transparent;padding:2px 0;color:var(--accent-text);font:inherit;font-size:calc(9px * var(--font-scale,1));font-weight:700;cursor:pointer;text-align:right}
.message-receipts-button:hover{text-decoration:underline}
.message-receipts-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.message-readers-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:100%}
.message-readers-list[hidden]{display:none}
.message-reader-name{padding:4px 8px;border:1px solid var(--accent-outline-soft);border-radius:999px;color:var(--accent-text);background:var(--accent-surface);font-size:calc(9px * var(--font-scale,1));line-height:1.3}

.unread-total-badge{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:25px;padding:0 7px;border-radius:999px;color:var(--accent-ink);background:var(--accent);font-size:calc(10px * var(--font-scale,1));font-weight:850}
.workspace-unread-summary{margin:7px 0 0;color:var(--accent-text);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.unread-count-badge{display:inline-flex!important;align-items:center;justify-content:center;align-self:flex-start;width:max-content;min-width:20px;margin-top:5px;padding:2px 7px;border-radius:999px;color:var(--accent-ink);background:var(--accent);font-size:calc(9px * var(--font-scale,1));font-weight:850;line-height:1.4}
.auth-link-button{display:block;width:max-content;margin:10px auto 0;padding:7px 10px;border:0;color:var(--accent-text);background:transparent;font-size:calc(11px * var(--font-scale,1));font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-link-button:hover{color:var(--accent)}
.reset-password-modal{max-width:460px}
.reset-password-modal>p.tiny{line-height:1.55;margin-bottom:16px}
#recovery-password-save{width:100%;margin-top:8px}
.recovery-cancel{width:100%;margin-top:10px}


/* Clickable in-app alerts for messages arriving in other conversations. */
.message-notifications{position:fixed;z-index:8;top:78px;right:18px;display:grid;gap:9px;width:min(390px,calc(100vw - 36px));max-height:70vh;overflow-y:auto;pointer-events:none}
.message-notification{display:flex;align-items:stretch;gap:8px;padding:9px;border:1px solid var(--accent-outline);border-radius:13px;background:#202330;box-shadow:0 14px 42px #0009;pointer-events:auto;animation:message-notification-in .2s ease-out}
.message-notification-open{display:grid;flex:1;min-width:0;gap:5px;padding:3px 5px;border:0;color:var(--text);background:transparent;text-align:left}
.message-notification-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.message-notification-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent-text);font-size:calc(11px * var(--font-scale,1))}
.message-notification-heading small{flex:none;color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.message-notification-preview{display:-webkit-box;overflow:hidden;color:#e2dfeb;font-size:calc(10px * var(--font-scale,1));line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.message-notification-dismiss{flex:none;align-self:flex-start;width:27px;height:27px;border:1px solid var(--line);border-radius:8px;color:#c9c6d4;background:#2b2e3d;font-size:calc(18px * var(--font-scale,1));line-height:1}
.message-notification-open:hover .message-notification-heading strong{text-decoration:underline}
.message-notification-dismiss:hover{border-color:var(--accent-outline);color:var(--text)}
.notification-mode-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.notification-mode-choices .font-choice{min-height:43px;padding:9px;white-space:normal;line-height:1.4}
.notification-settings-section>p{margin:0}
@keyframes message-notification-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){.message-notifications{top:70px;right:10px;width:calc(100vw - 20px);max-height:58vh}.message-notification{padding:8px}.message-notification-heading{align-items:flex-start;flex-direction:column;gap:2px}.notification-mode-choices{grid-template-columns:1fr}}


/* One compact typing label with every active participant listed beneath it. */
.typing-indicator{flex:none;min-height:0;padding:3px 24px 8px;color:var(--accent-text);font-size:calc(10px * var(--font-scale,1));line-height:1.4}
.typing-indicator-label{display:block;margin-bottom:3px;font-size:calc(9px * var(--font-scale,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.typing-indicator-names{display:flex;flex-wrap:wrap;gap:5px 7px;align-items:center}
.typing-name{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--accent-outline-soft);border-radius:999px;background:var(--accent-panel);color:#e5e0f2;font-size:calc(10px * var(--font-scale,1))}
@media(max-width:720px){.typing-indicator{padding:3px 12px 7px}}


/* Clear, prominent Hide tab control and its school reminder. */
.hide-tab-wrap{display:grid;gap:7px;margin-top:12px}
.requests-button.about-blank-sidebar{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin:0;padding:15px 16px;border:1px solid var(--accent-outline);border-radius:12px;color:var(--accent-contrast);background:var(--accent-surface);font-size:calc(13px * var(--font-scale,1));font-weight:800;letter-spacing:.01em;box-shadow:0 5px 16px #0002;transition:background .16s,border-color .16s,transform .16s}
.requests-button.about-blank-sidebar:hover{border-color:var(--accent-outline-strong);background:var(--accent-hover);transform:translateY(-1px)}
.hide-tab-note{margin:0 4px;color:var(--accent-muted);font-size:calc(10px * var(--font-scale,1));font-weight:600;line-height:1.5;text-align:center}


/* Image messages and the composer attachment picker. */
.composer-actions{display:flex;align-items:center;gap:10px;min-width:0}
.composer-actions>small{flex:1;min-width:0}
.message-image-picker{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:7px 11px;border:1px solid var(--accent-outline-soft);border-radius:9px;color:var(--accent-text);background:var(--accent-surface);font-size:calc(10px * var(--font-scale,1));font-weight:750;white-space:nowrap;cursor:pointer}
.message-image-picker:hover{border-color:var(--accent-outline);background:var(--accent-hover)}
.message-image-file{position:absolute;width:1px;height:1px;padding:0;opacity:0;pointer-events:none}
.message-image-preview{display:flex;align-items:center;gap:10px;margin:0 0 9px;padding:8px;border:1px solid var(--accent-outline-soft);border-radius:10px;background:var(--accent-panel)}
.message-image-thumb{width:54px;height:54px;flex:none;border-radius:8px;object-fit:cover}
.message-image-details{display:grid;flex:1;min-width:0;gap:3px}
.message-image-details strong{color:var(--accent-text);font-size:calc(10px * var(--font-scale,1))}
.message-image-details small{overflow:hidden;color:var(--muted);font-size:calc(9px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.message-image-remove{flex:none;padding:6px 8px;border:1px solid var(--line);border-radius:8px;color:#efb0b7;background:#34252d;font-size:calc(9px * var(--font-scale,1))}
.message-image-link{display:block;max-width:min(100%,420px);margin:5px 0 8px;overflow:hidden;border:1px solid var(--accent-outline-soft);border-radius:11px;background:var(--accent-panel)}
.message-image{display:block;width:auto;height:auto;max-width:100%;max-height:380px;object-fit:contain}
.message-image-unavailable{margin:7px 0;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}
.message-image-link:focus-visible,.message-image-picker:focus-within{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:520px){
  .composer-actions{gap:7px}
  .composer-actions>small{font-size:calc(9px * var(--font-scale,1))}
  .message-image-picker{padding:7px 8px}
  .message-image{max-height:300px}
}


/* Resumable image upload progress. */
.message-image-progress{display:block;color:var(--accent-text)!important;font-weight:700}
.message-image-picker{white-space:nowrap}


/* Refined message notification shape, spacing, and responsive alignment. */
.message-notifications{padding:2px;box-sizing:border-box;overscroll-behavior:contain}
.message-notification{
  box-sizing:border-box;
  align-items:center;
  gap:10px;
  padding:11px;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(135deg,#292b3b 0%,#252738 100%);
  box-shadow:0 12px 32px #0005;
}
.message-notification-open{
  align-self:stretch;
  align-content:center;
  gap:6px;
  padding:4px 7px;
  border-radius:11px;
  overflow:hidden;
}
.message-notification-heading{align-items:center;gap:8px}
.message-notification-heading strong{min-width:0}
.message-notification-heading small{white-space:nowrap}
.message-notification-preview{line-height:1.5}
.message-notification-dismiss{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:11px;
  line-height:1;
  transition:background .15s,border-color .15s,transform .15s;
}
.message-notification-dismiss:hover{background:#3a3d50;transform:scale(1.04)}
.message-notification-open:focus-visible,.message-notification-dismiss:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:720px){
  .message-notifications{top:70px;right:10px;width:calc(100vw - 20px);max-height:58vh}
  .message-notification{gap:7px;padding:9px;border-radius:16px}
  .message-notification-heading{align-items:flex-start;flex-direction:column;gap:3px}
  .message-notification-heading small{white-space:normal}
  .message-notification-dismiss{width:30px;height:30px;border-radius:10px}
  .notification-mode-choices{grid-template-columns:1fr}
}


/* Force the notification fill itself to follow the rounded card silhouette (Safari/iOS). */
.message-notification{
  position:relative;
  border-radius:20px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#292b3b 0%,#252738 100%) padding-box!important;
  background-clip:padding-box!important;
  -webkit-background-clip:padding-box!important;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  isolation:isolate;
}
.message-notification::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:inherit;
  pointer-events:none;
}
.message-notification-open{
  background:transparent!important;
  border-radius:13px;
}
.message-notification-dismiss{
  border-radius:12px!important;
}
@media(max-width:720px){
  .message-notification{border-radius:18px!important}
}


/* Private feedback threads and administrator inbox. */
.feedback-admin-identity{margin:0;padding:9px 11px;border:1px solid var(--accent-outline);border-radius:10px;color:var(--muted);background:var(--accent-surface);font-size:calc(10px * var(--font-scale,1));line-height:1.45}
.feedback-admin-identity strong{color:var(--accent-text)}
.feedback-request-actions{display:flex;justify-content:flex-end;gap:8px;flex:none}
.feedback-request-actions button{min-height:34px;padding:7px 10px}
.feedback-edit-form{display:grid;gap:10px;flex:1;min-height:0;align-content:start}
.feedback-edit-form h3{margin:0;font-size:calc(15px * var(--font-scale,1))}
.feedback-edit-form label{display:grid;gap:6px;font-size:calc(11px * var(--font-scale,1))}
.feedback-edit-form textarea{min-height:120px;resize:vertical}
.feedback-edit-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.feedback-edit-actions button{min-height:36px}
.feedback-admin-mode .feedback-sidebar{border-color:var(--accent-outline-soft)}
.feedback-admin-mode .feedback-sidebar-actions{justify-content:flex-end}
.feedback-admin-mode .feedback-sidebar-actions #feedback-refresh{min-width:40px}
.feedback-settings-actions{display:flex;gap:8px;flex-wrap:wrap}
.feedback-modal{width:min(100%,900px);height:min(84vh,760px);max-height:calc(100dvh - 24px);display:flex;flex-direction:column}
.feedback-layout{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:14px;flex:1;min-height:0;margin-top:12px}
.feedback-sidebar,.feedback-content{min-width:0;min-height:0;border:1px solid var(--line);border-radius:13px;background:#171923}
.feedback-sidebar{display:flex;flex-direction:column;overflow:hidden}
.feedback-sidebar-actions{display:flex;gap:7px;padding:9px;border-bottom:1px solid var(--line)}
.feedback-sidebar-actions .primary{flex:1}
.feedback-sidebar-actions button{min-height:35px}
.feedback-thread-list{display:grid;align-content:start;gap:6px;padding:8px;overflow:auto}
.feedback-thread-card{display:grid;gap:4px;width:100%;padding:10px;border:1px solid transparent;border-radius:10px;color:var(--text);background:#222532;text-align:left}
.feedback-thread-card:hover,.feedback-thread-card.active{border-color:var(--accent-outline);background:var(--accent-surface)}
.feedback-thread-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(11px * var(--font-scale,1))}
.feedback-thread-meta,.feedback-thread-member{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.feedback-thread-member{color:var(--accent-text)}
.feedback-content{display:flex;flex-direction:column;overflow:hidden;padding:14px}
.feedback-empty{display:grid;place-items:center;flex:1;min-height:120px;color:var(--muted);font-size:calc(11px * var(--font-scale,1));text-align:center}
.feedback-compose,.feedback-detail{display:flex;flex:1;min-height:0;flex-direction:column;gap:12px}
.feedback-compose h3,.feedback-detail h3{margin:0;font-size:calc(15px * var(--font-scale,1))}
.feedback-compose label{display:grid;gap:6px}
.feedback-compose textarea{min-height:130px;resize:vertical}
.feedback-compose .primary{align-self:flex-end;min-width:130px}
.feedback-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.feedback-detail-heading{min-width:0}
.feedback-detail-heading h3{overflow-wrap:anywhere}
.feedback-detail-heading p{margin:5px 0 0}
.feedback-status-control{flex:none;display:flex;align-items:center;gap:7px}
.feedback-status-label{color:var(--accent-text);font-size:calc(10px * var(--font-scale,1));white-space:nowrap}
.feedback-status-control select{width:auto;min-width:115px;padding:7px 8px;font-size:calc(10px * var(--font-scale,1))}
.feedback-message-list{display:grid;align-content:start;gap:9px;flex:1;min-height:0;overflow:auto;padding:10px 2px}
.feedback-message{width:min(88%,520px);padding:10px 12px;border:1px solid var(--line);border-radius:12px 12px 12px 4px;background:#242735}
.feedback-message.mine{justify-self:end;border-color:var(--accent-outline);border-radius:12px 12px 4px 12px;background:var(--accent-surface)}
.feedback-message-meta{margin-bottom:6px;color:var(--accent-text);font-size:calc(9px * var(--font-scale,1))}
.feedback-message-body{margin:0;color:var(--text);font-size:calc(11px * var(--font-scale,1));line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.feedback-reply-form{flex:none;display:grid;gap:8px;padding-top:9px;border-top:1px solid var(--line)}
.feedback-reply-form textarea{min-height:64px;max-height:130px;resize:vertical}
.feedback-reply-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.feedback-reply-footer .status{flex:1;margin:0}
.feedback-reply-footer button{flex:none}
.feedback-content [hidden],.feedback-modal [hidden]{display:none!important}
@media(max-width:720px){
  .feedback-modal{height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);padding:20px 14px}
  .feedback-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(115px,30%) minmax(0,1fr);gap:9px}
  .feedback-sidebar-actions{padding:6px}
  .feedback-thread-list{grid-auto-flow:column;grid-auto-columns:minmax(150px,65%);grid-template-rows:1fr;overflow-x:auto;overflow-y:hidden}
  .feedback-thread-card{height:100%;align-content:center}
  .feedback-content{padding:10px}
  .feedback-message{width:min(94%,520px)}
  .feedback-detail-head{flex-wrap:wrap}
}

/* Sidebar shortcut placed with the Hide tab control. */
.requests-button.feedback-sidebar-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  margin-top:auto;
  margin-right:0;
  margin-bottom:0;
  margin-left:0;
  flex:0 0 auto;
  padding:11px 14px;
  border:1px solid var(--accent-outline-soft);
  border-radius:11px;
  color:var(--accent-text);
  background:var(--accent-panel);
  font-size:calc(12px * var(--font-scale,1));
  font-weight:700;
  transition:background .16s,border-color .16s,transform .16s;
}
.requests-button.feedback-sidebar-button:hover{
  border-color:var(--accent-outline);
  background:var(--accent-hover);
  transform:translateY(-1px);
}
@media(max-width:720px){
  .requests-button.feedback-sidebar-button{min-height:44px}
}

/* Notification center, message editing and profile/privacy tools. */
.notification-open{position:relative}
.notification-badge{min-width:17px;padding:2px 5px;border-radius:10px;color:#171923;background:var(--accent);font-size:9px;font-weight:800;text-align:center}
.notifications-modal{width:min(100%,580px);max-height:88vh;display:flex;flex-direction:column}
.notifications-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.notifications-toolbar button{flex:none}
.notifications-list{display:grid;gap:7px;max-height:62vh;overflow:auto}
.notification-center-item{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;color:var(--text);background:#222532;text-align:left}
.notification-center-item.unread{border-color:var(--accent-outline);background:var(--accent-surface)}
.notification-center-icon{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--accent-text);background:var(--accent-panel-raised);font-size:17px}
.notification-center-copy{display:grid;gap:3px;flex:1;min-width:0}
.notification-center-copy strong{font-size:calc(11px * var(--font-scale,1))}
.notification-center-copy small{overflow:hidden;color:var(--muted);font-size:calc(10px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.notification-center-copy time{color:var(--muted);font-size:9px}
.notification-unread-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent)}
.message-profile-link{padding:0;border:0;color:var(--accent-text);background:transparent;font:inherit;font-weight:750;cursor:pointer}
.message-profile-link:hover{text-decoration:underline}
.message-edited-label{color:var(--muted);font-size:9px;font-style:italic}
.message-actions .message-edit,.message-actions .message-report{margin-left:9px;padding:0;border:0;color:var(--muted);background:transparent;font-size:calc(9px * var(--font-scale,1));cursor:pointer}
.message-actions .message-edit:hover{color:var(--accent-text)}
.message-actions .message-report:hover{color:#ef9aa3}
.member-profile-modal{width:min(100%,430px);overflow:hidden;padding:0}
.member-profile-banner{height:112px;background:linear-gradient(120deg,#7763b6,#302b54)}
.banner-violet{background:linear-gradient(120deg,#8874d2,#302b54)}
.banner-blue{background:linear-gradient(120deg,#579cce,#253c62)}
.banner-mint{background:linear-gradient(120deg,#54b58c,#24473d)}
.banner-rose{background:linear-gradient(120deg,#e8799d,#512e45)}
.banner-amber{background:linear-gradient(120deg,#e8a94b,#50401f)}
.banner-teal{background:linear-gradient(120deg,#50b9be,#234649)}
.member-profile-main{padding:0 24px 24px}
.member-profile-avatar{width:78px;height:78px;margin-top:-39px;border:4px solid #1b1d28;border-radius:23px;font-size:24px}
.member-profile-main h2{margin:12px 0 2px}
.member-profile-main p{overflow-wrap:anywhere}
.member-profile-pronouns{margin:6px 0;color:var(--accent-text);font-size:calc(10px * var(--font-scale,1))}
.member-profile-presence{margin:4px 0 0}
.member-profile-bio{min-height:34px;margin:14px 0;line-height:1.6;white-space:pre-wrap}
.report-modal form{display:grid;gap:11px}
.report-modal textarea{resize:vertical}
.danger-action{width:100%;margin-top:9px;padding:10px;border:1px solid #ef9aa344;border-radius:10px;color:#f0a6ad;background:#ef9aa30b;font-size:calc(11px * var(--font-scale,1));font-weight:700}
.reports-admin-modal{width:min(100%,680px)}
.reports-admin-list{display:grid;gap:9px;max-height:65vh;overflow:auto}
.admin-report-card{display:grid;gap:7px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#20232f}
.admin-report-heading{display:flex;justify-content:space-between;gap:10px}
.admin-report-heading strong{color:var(--accent-text);text-transform:capitalize}
.admin-report-heading small,.admin-report-card>small{color:var(--muted);font-size:9px}
.admin-report-details{margin:0;font-size:calc(11px * var(--font-scale,1));line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-report-status{max-width:160px}
@media(max-width:720px){
  .notifications-modal{max-height:calc(100dvh - 26px);padding:22px 16px}
  .notifications-list{max-height:68dvh}
  .notification-center-item{padding:10px;gap:8px}
  .member-profile-main{padding:0 19px 20px}
}

@media(max-width:720px){
  .topbar-actions .notification-open span:nth-child(2){display:none}
  .topbar-actions .notification-open{min-width:37px;justify-content:center;gap:5px}
  .notification-badge{position:absolute;top:-5px;right:-5px;border:1px solid var(--accent-panel)}
}

/* Discoverable profile access anywhere a member can chat. */
.chat-title-profile{
  display:inline-flex;align-items:center;max-width:100%;padding:0;border:0;
  color:var(--text);background:transparent;font:inherit;font-weight:800;
  text-align:left;cursor:pointer;
}
.chat-title-profile:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.conversation-profile{
  align-self:center;flex:none;padding:8px 10px;border:1px solid var(--accent-outline-soft);
  border-radius:9px;color:var(--accent-text);background:var(--accent-panel);
  font-size:calc(10px * var(--font-scale,1));font-weight:700;
}
.conversation-profile:hover,.friend-profile-button:hover{border-color:var(--accent-outline);background:var(--accent-hover)}
.friend-profile-button{padding:7px 9px;font-size:calc(9px * var(--font-scale,1))}
.group-member-profile{
  padding:0;border:0;color:var(--text);background:transparent;font:inherit;
  font-weight:750;text-align:left;cursor:pointer;
}
.group-member-profile:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){
  .conversation-profile{padding:7px 8px}
  .request-actions{gap:5px}
}

.chat-title .chat-title-profile{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--font-scale,1))}

/* Consecutive messages show the sender only on the first bubble. */
.message.group-continued .meta.meta-continued{margin-bottom:3px}

/* Official Gather Admin broadcasts. */
#announcement-compose-modal{z-index:8}
.announcement-modal{width:min(100%,560px)}
.announcement-modal form{display:grid;gap:11px}
.announcement-modal form label{display:grid;gap:6px}
.announcement-modal textarea{resize:vertical;min-height:130px}
.announcement-modal #announcement-publish{width:100%}
.announcement-view-modal{width:min(100%,560px)}
.announcement-sender{display:flex;align-items:center;gap:10px;margin:5px 0 17px;padding:11px 12px;border:1px solid var(--accent-outline-soft);border-radius:12px;background:var(--accent-panel)}
.announcement-admin-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--accent-contrast);background:var(--accent);font-size:19px;font-weight:850}.announcement-admin-mark.brand-mark,.home-announcement-mark.brand-mark{font-family:Georgia,serif;font-weight:800;line-height:1;text-transform:lowercase}
.announcement-sender>span:last-child{display:grid;gap:3px}
.announcement-sender strong{color:var(--accent-text);font-size:calc(11px * var(--font-scale,1))}
.announcement-sender small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.announcement-view-body{margin-top:15px;padding-top:15px;border-top:1px solid var(--line);font-size:calc(12px * var(--font-scale,1));line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.announcement-view-actions{display:flex;justify-content:flex-end;margin-top:16px}
#announcement-edit-open{width:auto;padding:9px 13px;font-size:calc(10px * var(--font-scale,1))}
@media(max-width:720px){.announcement-modal,.announcement-view-modal{max-height:calc(100dvh - 24px);overflow:auto}}

/* Light appearance — surfaces, controls, and text are tuned for a bright theme. */
html[data-theme="light"]{color-scheme:light;--bg:#f3f5fa;--panel:#fff;--line:rgba(43,48,68,.13);--text:#272b3b;--muted:#74798d}
html[data-theme="light"] body{background:var(--accent-deep);color:var(--text)}
html[data-theme="light"] .auth-shell{background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent-strong) 14%,#f4f6fb),#f4f6fb 72%)}
html[data-theme="light"] .auth-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .topbar,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .main,
html[data-theme="light"] .chat-head,
html[data-theme="light"] .workspace-folder,
html[data-theme="light"] .workspace-group-section,
html[data-theme="light"] .feedback-sidebar,
html[data-theme="light"] .feedback-content,
html[data-theme="light"] .feedback-message,
html[data-theme="light"] .admin-report-card{background:#fff;border-color:var(--line);color:var(--text)}
html[data-theme="light"] .main,
html[data-theme="light"] .home-workspace,
html[data-theme="light"] .messages{background:#f5f6fa}
html[data-theme="light"] .profile-pill,
html[data-theme="light"] .outline,
html[data-theme="light"] .back,
html[data-theme="light"] .requests-button,
html[data-theme="light"] .person,
html[data-theme="light"] .request-item,
html[data-theme="light"] .chat-row,
html[data-theme="light"] .font-choice,
html[data-theme="light"] .accent-choice,
html[data-theme="light"] .chat-item:hover,
html[data-theme="light"] .close,
html[data-theme="light"] .notification-center-item,
html[data-theme="light"] .feedback-thread-card,
html[data-theme="light"] .message-search-result,
html[data-theme="light"] .message-notification{background:#f1f3f8;border-color:var(--line);color:var(--text)}
html[data-theme="light"] .chat-item.active,
html[data-theme="light"] .folder-tab.active,
html[data-theme="light"] .tab.active,
html[data-theme="light"] .notification-center-item.unread,
html[data-theme="light"] .feedback-thread-card.active{background:var(--accent-surface);border-color:var(--accent-outline)}
html[data-theme="light"] .chat-copy span,
html[data-theme="light"] .chat-time,
html[data-theme="light"] .meta time,
html[data-theme="light"] .muted,
html[data-theme="light"] .tiny,
html[data-theme="light"] .request-section h3,
html[data-theme="light"] .settings-section h3,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .folder-panel-note,
html[data-theme="light"] .workspace-search,
html[data-theme="light"] .workspace-subtitle,
html[data-theme="light"] .notification-center-copy small,
html[data-theme="light"] .notification-center-copy time{color:var(--muted)}
html[data-theme="light"] label{color:#404558}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .search,
html[data-theme="light"] .composer,
html[data-theme="light"] .composer textarea{background:#fff;border-color:#dfe2eb;color:var(--text)}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#969bad}
html[data-theme="light"] .composer{background:#fff}
html[data-theme="light"] .bubble{background:var(--accent-chat);border-color:var(--accent-chat-border)}
html[data-theme="light"] .mine .bubble{background:var(--accent-surface);border-color:var(--accent-outline-soft)}
html[data-theme="light"] .message-actions .message-edit,
html[data-theme="light"] .message-actions .message-report{color:var(--muted)}
html[data-theme="light"] .requests-button,
html[data-theme="light"] .profile-pill,
html[data-theme="light"] .outline,
html[data-theme="light"] .secondary-action,
html[data-theme="light"] .group-action,
html[data-theme="light"] .font-choice,
html[data-theme="light"] .accent-choice,
html[data-theme="light"] .close{color:var(--text)}
html[data-theme="light"] .privacy{background:#f1f3f8;color:#62687d;border-color:var(--line)}
html[data-theme="light"] .chat-notice{color:#7c4a56;background:#fff0f2;border-color:#f0cbd2}
html[data-theme="light"] .toast{background:#fff;color:var(--text);border-color:var(--line);box-shadow:0 12px 35px #30385022}
html[data-theme="light"] .feedback-thread-card{background:#f4f5f9;color:var(--text)}
html[data-theme="light"] .feedback-message.mine{background:var(--accent-surface)}
html[data-theme="light"] .feedback-message{background:#f4f5f9}
html[data-theme="light"] .feedback-content,
html[data-theme="light"] .feedback-sidebar{background:#fff}
html[data-theme="light"] .message-notification{background:#fff!important;box-shadow:0 10px 32px #30385022}
html[data-theme="light"] .message-notification-preview{color:#4b5064}
html[data-theme="light"] .message-notification-dismiss{background:#f1f3f8;color:#4d5265;border-color:var(--line)}
html[data-theme="light"] .request-decline{background:#fff0f2;color:#9b4654}
html[data-theme="light"] .accent-swatch{border-color:#0002}
html[data-theme="light"] .member-profile-avatar{border-color:#fff}
html[data-theme="light"] .admin-report-details{color:var(--text)}
html[data-theme="light"] .message-select{color:#393e55;background:var(--accent-surface)}
html[data-theme="light"] .message-reader-name{background:var(--accent-surface)}
html[data-theme="light"] .overlay{background:#1d233366}
html[data-theme="light"] .chat-time,
html[data-theme="light"] .meta time{color:#73798e}
html[data-theme="light"] .message-edited-label{color:#777d91}

/* Appearance controls. */
.theme-mode-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.theme-mode-choice{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px;color:var(--text);background:var(--accent-panel-raised);font-size:calc(11px * var(--font-scale,1));font-weight:700}
.theme-mode-choice[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-surface);box-shadow:inset 0 0 0 1px var(--accent-outline-soft)}
.theme-mode-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:var(--accent-badge);font-size:17px}

/* Homepage latest announcement card. */
.home-announcement-card{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid var(--accent-outline-soft);border-radius:15px;background:var(--accent-panel);box-shadow:0 7px 22px #0000000a}
.home-announcement-mark{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;color:var(--accent-text);background:var(--accent-surface);font-size:23px;font-weight:800}
.home-announcement-copy{flex:1;min-width:0}
.home-announcement-copy .eyebrow{margin:0 0 5px;color:var(--accent-text);font-size:9px;letter-spacing:1.1px}
.home-announcement-copy strong{display:block;overflow:hidden;color:var(--text);font-size:calc(13px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.home-announcement-copy p:not(.eyebrow){display:-webkit-box;margin:5px 0;color:var(--muted);font-size:calc(11px * var(--font-scale,1));line-height:1.5;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.home-announcement-copy small{color:var(--muted);font-size:9px}
.home-announcement-actions{display:flex;flex:none;align-items:center;gap:7px}
.home-announcement-actions button{width:auto;padding:9px 11px;font-size:calc(10px * var(--font-scale,1))}
.announcement-all-button{padding:9px 11px;border:1px solid var(--accent-outline-soft);border-radius:9px;color:var(--accent-text);background:var(--accent-surface);font-weight:700}

/* Announcements as a dedicated in-app page. */
.announcements-page-modal{width:min(100%,820px);height:min(82vh,760px);max-height:calc(100dvh - 28px);display:flex;flex-direction:column;gap:15px}
.announcements-page-header{padding:1px 40px 15px 0;border-bottom:1px solid var(--line)}
.announcements-page-header h2{margin:0 0 6px}
.announcements-page-header p:last-child{margin:0}
.announcements-history-list{display:grid;align-content:start;gap:9px;min-height:0;overflow:auto;padding:2px 3px 4px 0}
.announcement-history-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:var(--accent-panel-raised);text-align:left;transition:border-color .16s,background .16s}
.announcement-history-item:hover{border-color:var(--accent-outline);background:var(--accent-surface)}
.announcement-history-mark{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;color:var(--accent-text);background:var(--accent-badge);font-size:20px}
.announcement-history-copy{display:grid;gap:4px;flex:1;min-width:0}
.announcement-history-copy strong{font-size:calc(12px * var(--font-scale,1))}
.announcement-history-copy small{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:calc(10px * var(--font-scale,1));line-height:1.5;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.announcement-history-copy time{color:var(--muted);font-size:9px}
.announcement-history-arrow{flex:none;color:var(--accent-text);font-size:25px}
@media(max-width:720px){
  .home-announcement-card{align-items:flex-start;flex-wrap:wrap;gap:10px;padding:12px}
  .home-announcement-copy{flex:1 1 calc(100% - 55px)}
  .home-announcement-actions{width:100%;padding-left:52px}
  .home-announcement-actions button{flex:1}
  .announcements-page-modal{height:calc(100dvh - 22px);max-height:calc(100dvh - 22px);padding:22px 15px}
  .announcement-history-item{padding:10px;gap:9px}
}


/* Keep the selected accent unmistakable in light appearance. */
html[data-theme="light"] .accent-choice[aria-pressed="true"]{
  border-color:var(--accent-strong);
  background:var(--accent-surface);
  color:var(--accent-text);
  box-shadow:inset 0 0 0 1px var(--accent-outline-soft),0 0 0 1px var(--accent-outline-soft);
}
html[data-theme="light"] .accent-choice[aria-pressed="true"] .accent-swatch{
  border-color:var(--accent-strong);
  box-shadow:0 0 0 2px var(--accent-outline-soft);
}


/* Formatting controls for official admin announcements. */
.announcement-message-field{display:grid;gap:7px}
.announcement-message-field>label{color:var(--text);font-size:calc(11px * var(--font-scale,1));font-weight:650}
.announcement-format-hint{margin:0;color:var(--muted);font-size:calc(10px * var(--font-scale,1));line-height:1.45}
.announcement-view-body strong,.announcement-history-copy strong,.home-announcement-copy p strong{font-weight:800;color:inherit}


/* Defensive fallback: profile-name links never appear inside one-to-one chat bubbles. */
#layout.direct-chat .message .meta .message-profile-link{
  display:none !important;
}


/* Online status and live typing indicators. */
.presence-label{display:block;margin-top:4px;color:var(--muted);font-size:calc(9px * var(--font-scale,1));line-height:1.35}
.presence-label.is-online{color:#58c897}
.presence-label.is-online::before{content:"";display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;background:#58c897}
.chat-title #chat-presence-status{margin-top:3px}
.chat-title .chat-typing-indicator{color:var(--accent-text);font-size:calc(9px * var(--font-scale,1));font-style:italic}
.online-status-settings{padding-top:14px;border-top:1px solid var(--line)}
.presence-setting-toggle{display:flex;align-items:flex-start;gap:11px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--accent-panel);cursor:pointer}
.presence-setting-toggle input{width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--accent)}
.presence-setting-toggle span{display:grid;gap:4px}
.presence-setting-toggle strong{color:var(--text);font-size:calc(11px * var(--font-scale,1))}
.presence-setting-toggle small{color:var(--muted);font-size:calc(10px * var(--font-scale,1));line-height:1.45}

 
/* Message reactions. */
.message-reaction-area{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 2px;max-width:100%}
.message-reactions{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%}
.message-reaction,.message-reaction-add,.message-reaction-option{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:27px;
  padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--text);
  background:var(--accent-panel);font-size:calc(10px * var(--font-scale,1));line-height:1.2;
}
.message-reaction{font-weight:700}
.message-reaction[aria-pressed="true"],.message-reaction.is-mine{
  border-color:var(--accent-outline);color:var(--accent-text);background:var(--accent-surface)
}
.message-reaction-add{color:var(--muted);font-size:calc(9px * var(--font-scale,1));cursor:pointer}
.message-reaction-add:hover,.message-reaction-option:hover{border-color:var(--accent-outline);background:var(--accent-hover);color:var(--accent-text)}
.message-reaction-picker{display:flex;flex-wrap:wrap;gap:5px;max-width:100%;padding:5px;border:1px solid var(--accent-outline-soft);border-radius:12px;background:var(--accent-panel-raised);box-shadow:0 8px 22px #00000016}
.message-reaction-picker[hidden]{display:none}
.message-reaction-option{width:33px;min-width:33px;padding:5px;font-size:17px;cursor:pointer}
.message-reaction:disabled{opacity:.65}
.mine .message-reaction-area{justify-content:flex-end}
html[data-theme="light"] .message-reaction,
html[data-theme="light"] .message-reaction-add,
html[data-theme="light"] .message-reaction-option{background:#fff;border-color:var(--line);color:var(--text)}
html[data-theme="light"] .message-reaction.is-mine{background:var(--accent-surface);border-color:var(--accent-outline);color:var(--accent-text)}


/* Notification center sections and shortcuts. */
.notifications-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.notification-shortcut-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--accent-outline-soft);border-radius:10px;color:var(--accent-text);background:var(--accent-panel);font-size:calc(10px * var(--font-scale,1));font-weight:750;text-align:left}
.notification-shortcut-button:hover{border-color:var(--accent-outline);background:var(--accent-hover)}
.notification-section-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:2px 0 10px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--accent-panel)}
.notification-section-tab{min-width:0;padding:8px 5px;border:1px solid transparent;border-radius:8px;color:var(--muted);background:transparent;font-size:calc(9px * var(--font-scale,1));font-weight:750;line-height:1.3;cursor:pointer}
.notification-section-tab:hover{color:var(--text);background:var(--accent-hover)}
.notification-section-tab.active,.notification-section-tab[aria-pressed="true"]{border-color:var(--accent-outline-soft);color:var(--accent-text);background:var(--accent-surface)}
.notification-group-setting{margin-top:12px}
.notification-group-setting input{accent-color:var(--accent)}
@media(max-width:520px){
  .notifications-shortcuts{grid-template-columns:1fr}
  .notification-section-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notification-section-tab{padding:9px 6px;font-size:calc(10px * var(--font-scale,1))}
}
html[data-theme="light"] .notification-shortcut-button{background:#f7f8fc;color:var(--accent-text)}
html[data-theme="light"] .notification-section-tabs{background:#f6f7fb}

/* Compact message controls and the single chat-level reaction flow. */
.meta{align-items:center}
.message-menu-wrap{position:relative;display:inline-flex;align-items:center;margin-left:auto;flex:none}
.message-action-trigger{display:inline-grid;place-items:center;width:24px;height:21px;padding:0;border:0;border-radius:6px;color:var(--muted);background:transparent;font-size:19px;line-height:1;cursor:pointer}
.message-action-trigger:hover,.message-action-trigger[aria-expanded="true"]{color:var(--accent-text);background:var(--accent-hover)}
.message-action-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.message-action-menu{position:fixed;z-index:50;top:10px;left:10px;right:auto;bottom:auto;display:grid;width:max-content;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);gap:2px;padding:5px;border:1px solid var(--accent-outline-soft);border-radius:10px;background:var(--accent-panel-raised);box-shadow:0 10px 26px #00000035;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain}
.message-action-menu[hidden]{display:none}
.message-action-menu button{width:100%;min-width:0;padding:8px 10px;border:0;border-radius:7px;color:var(--text);background:transparent;font-size:calc(10px * var(--font-scale,1));font-weight:650;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.message-action-menu button:hover{color:var(--accent-text);background:var(--accent-hover)}
.message.reaction-selectable{cursor:pointer}
.message.reaction-selectable .bubble{transition:outline-color .15s,background .15s}
.message.reaction-target .bubble{outline:2px solid var(--accent);outline-offset:3px}
.message-reaction-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:8px 10px;border:1px solid var(--accent-outline-soft);border-radius:10px;background:var(--accent-panel)}
.message-reaction-status[hidden]{display:none}
.message-reaction-hint{flex:1;min-width:130px;color:var(--accent-text);font-size:calc(10px * var(--font-scale,1));font-weight:650}
.message-reaction-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.message-reaction-toolbar[hidden]{display:none}
.message-reaction-cancel{width:auto!important;height:auto!important;padding:5px 8px!important;border:1px solid var(--line)!important;border-radius:7px!important;color:var(--muted)!important;background:transparent!important;font-size:calc(9px * var(--font-scale,1))!important;cursor:pointer}
.composer-actions .message-react-mode{flex:none;margin-right:auto;width:auto;height:29px;padding:0 10px;border:1px solid var(--accent-outline-soft);border-radius:9px;color:var(--accent-text);background:var(--accent-surface);font-size:calc(10px * var(--font-scale,1));font-weight:750;cursor:pointer}
.composer-actions .message-react-mode:hover,.composer-actions .message-react-mode[aria-pressed="true"]{border-color:var(--accent-outline);background:var(--accent-hover)}
html[data-theme="light"] .message-action-menu{background:#fff;border-color:var(--line);box-shadow:0 10px 26px #30385022}
html[data-theme="light"] .message-action-menu button{color:var(--text)}
html[data-theme="light"] .message-action-menu button:hover{color:var(--accent-text);background:var(--accent-surface)}
@media(max-width:520px){
  .composer-actions>small{display:none}
  .composer-actions .message-react-mode{padding:0 8px}
}


/* One compact overflow menu for composer attachments and reactions. */
.composer-more-wrap{position:relative;display:inline-flex;align-items:center;flex:none}
.composer-actions .composer-more-trigger{display:inline-grid;place-items:center;flex:none;width:36px;height:31px;padding:0;border:1px solid var(--accent-outline-soft);border-radius:9px;color:var(--accent-text);background:var(--accent-surface);font-size:22px;font-weight:800;line-height:1;cursor:pointer}
.composer-actions .composer-more-trigger:hover,.composer-actions .composer-more-trigger[aria-expanded="true"]{border-color:var(--accent-outline);background:var(--accent-hover)}
.composer-more-menu{position:absolute;z-index:12;bottom:calc(100% + 9px);left:0;display:grid;min-width:190px;gap:3px;padding:6px;border:1px solid var(--accent-outline-soft);border-radius:11px;background:var(--accent-panel-raised);box-shadow:0 12px 30px #00000035}
.composer-more-menu[hidden]{display:none}
.composer-actions .composer-menu-item{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;margin:0;padding:8px 10px;border:0;border-radius:7px;color:var(--text);background:transparent;font-size:calc(10px * var(--font-scale,1));font-weight:700;text-align:left;white-space:nowrap;cursor:pointer}
.composer-actions .composer-menu-item:hover{color:var(--accent-text);background:var(--accent-hover)}
html[data-theme="light"] .composer-more-menu{background:#fff;border-color:var(--line);box-shadow:0 12px 30px #30385022}
html[data-theme="light"] .composer-actions .composer-menu-item{color:var(--text)}
html[data-theme="light"] .composer-actions .composer-menu-item:hover{color:var(--accent-text);background:var(--accent-surface)}

/* Message tools: polls, pins, saved items and forwarding. */
.message-forwarded-label{color:var(--muted);font-size:calc(8px * var(--font-scale,1));font-weight:700}
.pinned-message-banner{display:flex;align-items:center;gap:10px;width:100%;flex:none;padding:9px 12px;border:1px solid var(--accent-outline-soft);border-radius:11px;color:var(--text);background:var(--accent-panel);text-align:left;cursor:pointer}
.pinned-message-banner:hover{border-color:var(--accent-outline);background:var(--accent-surface)}
.pinned-message-mark{display:grid;place-items:center;width:27px;height:27px;flex:none;border-radius:8px;color:var(--accent-text);background:var(--accent-badge);font-size:17px}
.pinned-message-copy{display:grid;gap:3px;flex:1;min-width:0}
.pinned-message-copy strong{color:var(--accent-text);font-size:calc(10px * var(--font-scale,1))}
.pinned-message-copy small{overflow:hidden;color:var(--muted);font-size:calc(9px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.pinned-message-arrow{color:var(--accent-text);font-size:21px}
.message-poll-card{display:grid;gap:9px;min-width:min(280px,100%);max-width:360px;margin:10px 0 3px;padding:10px;border:1px solid var(--accent-outline-soft);border-radius:11px;background:var(--accent-panel)}
.message-poll-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}
.message-poll-heading strong{color:var(--accent-text);font-size:calc(10px * var(--font-scale,1))}
.message-poll-heading small,.message-poll-footer{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.message-poll-question{margin:0;color:var(--text);font-size:calc(11px * var(--font-scale,1));font-weight:700;line-height:1.45}
.message-poll-options{display:grid;gap:6px}
.message-poll-option{display:grid;gap:5px;width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--accent-panel-raised);text-align:left;cursor:pointer}
.message-poll-option:hover,.message-poll-option.is-voted{border-color:var(--accent-outline);background:var(--accent-surface)}
.message-poll-option-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:calc(10px * var(--font-scale,1))}
.message-poll-option-top strong{color:var(--accent-text);font-size:calc(9px * var(--font-scale,1))}
.message-poll-track{display:block;height:5px;overflow:hidden;border-radius:999px;background:var(--line)}
.message-poll-fill{display:block;height:100%;border-radius:999px;background:var(--accent-strong);transition:width .18s ease}
.message-poll-footer{margin:0}
.poll-create-modal{width:min(100%,480px)}
.poll-create-modal form{display:grid;gap:12px}
.poll-options-inputs{display:grid;gap:8px}
.poll-option-entry{display:grid;grid-template-columns:70px minmax(0,1fr) 28px;align-items:center;gap:8px}
.poll-option-entry>span{color:var(--muted);font-size:calc(10px * var(--font-scale,1))}
.poll-option-entry input{min-width:0}
.poll-option-remove{width:28px;height:30px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--accent-panel);font-size:17px}
.poll-add-option{width:auto;justify-self:start}
.poll-form-actions{display:flex;justify-content:flex-end;gap:8px}
.forward-message-modal,.saved-messages-modal{width:min(100%,560px)}
.forward-message-list,.saved-message-list{display:grid;gap:8px;max-height:65vh;overflow:auto}
.forward-message-choice{display:flex;flex-direction:column;gap:4px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--accent-panel);text-align:left;cursor:pointer}
.forward-message-choice:hover{border-color:var(--accent-outline);background:var(--accent-surface)}
.forward-message-choice strong{font-size:calc(11px * var(--font-scale,1))}
.forward-message-choice small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.saved-message-card{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--accent-panel)}
.saved-message-open{display:grid;gap:4px;flex:1;min-width:0;padding:2px;border:0;color:var(--text);background:transparent;text-align:left;cursor:pointer}
.saved-message-open strong{overflow:hidden;color:var(--accent-text);font-size:calc(10px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.saved-message-open small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.saved-message-open span{overflow:hidden;font-size:calc(10px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.saved-message-remove{padding:6px 8px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:transparent;font-size:calc(9px * var(--font-scale,1))}
html[data-theme="light"] .message-poll-card,html[data-theme="light"] .pinned-message-banner,html[data-theme="light"] .saved-message-card{background:#fff}
html[data-theme="light"] .message-poll-option{background:#f7f8fc}
@media(max-width:520px){.message-poll-card{min-width:min(240px,100%)}.saved-message-card{align-items:flex-start}}

/* Conversation preferences: pinned chats, muting and per-chat appearance. */
.pinned-chat-section{margin:0 0 16px;padding:0 0 13px;border-bottom:1px solid var(--line)}
.pinned-chat-section .folder-panel-heading{margin-top:0}
.conversation-pin{flex:none;min-width:31px;min-height:34px;padding:5px;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:transparent;font-size:calc(15px * var(--font-scale,1));line-height:1}
.conversation-pin[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-outline-soft);background:var(--accent-surface)}
.conversation-pin:hover{border-color:var(--accent-outline);color:var(--accent-text)}
.conversation-pin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chat-muted-label{width:max-content;max-width:100%;padding:2px 6px;border-radius:5px;color:var(--muted);background:var(--accent-panel);font-size:calc(8px * var(--font-scale,1));letter-spacing:.04em}
.chat-appearance-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.chat-appearance-controls label{display:grid;gap:6px;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}
.chat-appearance-controls select{width:100%;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;color:var(--text);background:var(--accent-input);font-size:calc(10px * var(--font-scale,1))}
.chat.chat-appearance-custom .messages{background:var(--conversation-background)!important}
.chat.chat-appearance-custom .chat-head{border-bottom-color:var(--conversation-accent-border);background:color-mix(in srgb,var(--conversation-background) 82%,var(--conversation-accent) 5%)}
.chat.chat-appearance-custom .messages .mine .bubble{border-color:var(--conversation-accent-border);background:var(--conversation-accent-soft)}
.chat.chat-appearance-custom .messages .new-messages-divider{color:var(--conversation-accent);border-color:var(--conversation-accent-border)}
.new-messages-divider{display:flex;align-items:center;gap:10px;align-self:stretch;margin:7px 0;padding:5px 2px;color:var(--accent-text);font-size:calc(10px * var(--font-scale,1));font-weight:750;letter-spacing:.04em;text-align:center}
.new-messages-divider::before,.new-messages-divider::after{content:"";height:1px;flex:1;background:var(--accent-outline)}
.new-messages-divider::before{max-width:24%}
.new-messages-divider::after{max-width:24%}
@media(max-width:720px){
  .pinned-chat-section{margin-bottom:12px;padding-bottom:10px}
  .conversation-pin{min-width:29px;min-height:33px}
  .chat-appearance-controls{grid-template-columns:minmax(0,1fr)}
}

/* Bulk conversation selection controls. */
.conversation-selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:720px;margin:12px 0 14px}
.conversation-select-toggle{width:auto;min-height:36px;padding:8px 12px}
.conversation-selection-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}
.conversation-selection-count{color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:700;white-space:nowrap}
.conversation-selection-actions .danger-action{width:auto;min-width:150px;min-height:36px;margin:0;padding:8px 12px}
.conversation-selection-actions .danger-action:disabled{opacity:.48;cursor:not-allowed}
.conversation-select-control{display:flex;flex:none;align-items:center;justify-content:center;width:34px;min-height:42px;padding:0 5px;cursor:pointer}
.conversation-select-control input{width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer}
.chat-row.conversation-row-selecting{border-color:var(--accent-outline-soft)}
.chat-row.conversation-row-selecting .chat-item{cursor:pointer}
@media(max-width:720px){
  .conversation-selection-toolbar{align-items:stretch;flex-direction:column;gap:7px;margin:10px 0 12px}
  .conversation-select-toggle{width:100%}
  .conversation-selection-actions{justify-content:space-between}
  .conversation-selection-actions .danger-action{min-width:0;flex:1}
  .conversation-select-control{width:30px}
}


/* Refined pinned conversations: one clean card per chat, without a second enclosing box. */
.pinned-chat-section{
  display:flex;
  flex-direction:column;
  min-height:0;
  margin:0 0 14px;
  padding:0 0 14px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.pinned-chat-section .folder-panel-heading{
  margin:0;
  padding:0 2px 10px;
}
.pinned-chat-section .workspace-chat-list{
  display:grid;
  gap:8px;
  min-height:0;
  padding:0;
  overflow:visible;
}
.pinned-chat-section .chat-row{
  align-items:center;
  gap:9px;
  padding:5px;
  border:1px solid var(--accent-outline-soft);
  border-radius:14px;
  background:var(--accent-panel-raised);
  box-shadow:0 3px 12px #0000000a;
}
.pinned-chat-section .chat-row .chat-item{
  min-width:0;
  padding:8px 9px;
  border-radius:10px;
}
.pinned-chat-section .conversation-pin{
  min-width:42px;
  min-height:42px;
  border-radius:11px;
  border-color:var(--accent-outline-soft);
  background:var(--accent-surface);
}
.pinned-chat-section .conversation-profile{
  min-height:42px;
  padding:8px 13px;
}
.pinned-chat-section .conversation-delete{
  min-height:42px;
  padding:8px 12px;
}
@media(max-width:720px){
  .pinned-chat-section{margin-bottom:12px;padding-bottom:11px}
  .pinned-chat-section .chat-row{gap:6px;padding:4px}
  .pinned-chat-section .chat-row .chat-item{padding:7px 6px}
  .pinned-chat-section .conversation-pin{min-width:36px;min-height:38px}
  .pinned-chat-section .conversation-profile,
  .pinned-chat-section .conversation-delete{min-height:38px;padding:7px 8px}
}
html[data-theme="light"] .pinned-chat-section{
  border-bottom-color:var(--line);
  background:transparent;
  box-shadow:none;
}
html[data-theme="light"] .pinned-chat-section .chat-row{
  background:#f1f3f8;
  border-color:var(--line);
}
html[data-theme="light"] .pinned-chat-section .conversation-pin{
  background:var(--accent-surface);
  border-color:var(--accent-outline);
}
html[data-theme="light"] .pinned-chat-section .conversation-delete{
  color:#9b4654;
  background:#fff0f2;
  border-color:#f0cbd2;
}

/* Keep the settings scrollbar visually inset within the rounded panel. */
.settings-modal{
  width:min(100%,580px);
  max-height:min(90vh,820px);
  max-height:min(90dvh,820px);
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 62%,transparent) transparent;
  overscroll-behavior:contain;
  background:color-mix(in srgb,var(--accent-panel) 86%,transparent);
  background-clip:padding-box;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.settings-modal::-webkit-scrollbar{width:10px}
.settings-modal::-webkit-scrollbar-track{margin:12px 0;background:transparent}
.settings-modal::-webkit-scrollbar-thumb{
  border:3px solid transparent;
  border-radius:999px;
  background-color:color-mix(in srgb,var(--accent) 62%,transparent);
  background-clip:padding-box;
}
.settings-modal::-webkit-scrollbar-thumb:hover{background-color:var(--accent)}
html[data-theme="light"] .settings-modal{
  background:color-mix(in srgb,#ffffff 86%,transparent);
  border-color:var(--line);
}
html[data-theme="light"] .settings-modal::-webkit-scrollbar-thumb{
  background-color:color-mix(in srgb,var(--accent) 48%,#aeb4c2);
}

/* Selected settings must remain unmistakable in both appearance modes. */
.settings-modal .accent-choice[aria-pressed="true"],
.settings-modal .font-choice[aria-pressed="true"],
.settings-modal .theme-mode-choice[aria-pressed="true"]{
  border-color:var(--accent-strong);
  background:var(--accent-surface);
  color:var(--accent-contrast);
  box-shadow:inset 0 0 0 1px var(--accent-outline-soft),0 0 0 1px var(--accent-outline-soft);
  font-weight:800;
}
.settings-modal .accent-choice:focus-visible,
.settings-modal .font-choice:focus-visible,
.settings-modal .theme-mode-choice:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
html[data-theme="light"] .settings-modal .accent-choice[aria-pressed="true"],
html[data-theme="light"] .settings-modal .font-choice[aria-pressed="true"],
html[data-theme="light"] .settings-modal .theme-mode-choice[aria-pressed="true"]{
  border-color:var(--accent-strong);
  background:color-mix(in srgb,var(--accent) 14%,#ffffff);
  color:#34364a;
  box-shadow:inset 0 0 0 1px var(--accent-outline-soft),0 0 0 1px var(--accent-outline-soft);
}
html[data-theme="light"] .settings-modal .accent-choice[aria-pressed="true"] .accent-swatch{
  border-color:var(--accent-strong);
  box-shadow:0 0 0 2px var(--accent-outline-soft);
}


/* The settings scrollbar lives in an inset scroll viewport, not on the panel edge. */
.settings-modal{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:min(100%,580px);
  max-height:min(90vh,820px);
  max-height:min(90dvh,820px);
  padding:0;
  overflow:hidden;
  background:color-mix(in srgb,var(--accent-panel) 86%,transparent);
  background-clip:padding-box;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.settings-scroll-content{
  flex:0 1 auto;
  min-height:0;
  max-height:calc(90vh - 20px);
  max-height:calc(90dvh - 20px);
  margin:0 14px 0 0;
  padding:27px 13px 27px 27px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 58%,transparent) transparent;
}
.settings-scroll-content::-webkit-scrollbar{width:9px}
.settings-scroll-content::-webkit-scrollbar-track{margin:10px 0;background:transparent}
.settings-scroll-content::-webkit-scrollbar-thumb{
  min-height:36px;
  border:3px solid transparent;
  border-radius:999px;
  background-color:color-mix(in srgb,var(--accent) 58%,transparent);
  background-clip:padding-box;
}
.settings-scroll-content::-webkit-scrollbar-thumb:hover{background-color:var(--accent)}
.settings-modal>.close{z-index:2;top:13px;right:13px}
.settings-scroll-content>.eyebrow,
.settings-scroll-content>h2,
.settings-scroll-content>p:first-of-type{padding-right:32px}
html[data-theme="light"] .settings-modal{
  background:color-mix(in srgb,#ffffff 86%,transparent);
  border-color:var(--line);
}
html[data-theme="light"] .settings-scroll-content::-webkit-scrollbar-thumb{
  background-color:color-mix(in srgb,var(--accent) 48%,#aeb4c2);
}
@media(max-width:720px){
  .settings-modal{
    max-height:calc(90vh - 8px);
    max-height:calc(90dvh - 8px);
  }
  .settings-scroll-content{
    max-height:calc(90vh - 8px);
    max-height:calc(90dvh - 8px);
    margin-right:12px;
    padding:23px 10px 23px 19px;
  }
  .settings-modal>.close{top:10px;right:10px}
}


/* Profile shortcuts are part of the conversation identity, not extra row actions. */
.chat-row .chat-item{cursor:pointer}
.chat-row .chat-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chat-peer-profile-target{appearance:none;padding:0;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.chat-peer-profile-target:hover{border-color:var(--accent-outline-strong);box-shadow:0 0 0 2px var(--accent-outline-soft);transform:translateY(-1px)}
.chat-peer-profile-target:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chat-copy .chat-peer-profile-name{display:block;width:max-content;max-width:100%;overflow:hidden;padding:0;border:0;color:var(--text);background:transparent;font:inherit;font-size:calc(12px * var(--font-scale,1));font-weight:750;line-height:1.35;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.chat-copy .chat-peer-profile-name:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.chat-copy .chat-peer-profile-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}



/* Pin and delete actions share the homepage conversation-selection toolbar. */
.conversation-selection-actions{flex-wrap:wrap}
.conversation-selection-actions .conversation-pin-selected{
  width:auto;
  min-width:132px;
  min-height:36px;
  margin:0;
  padding:8px 12px;
  font-size:calc(10px * var(--font-scale,1));
}
.conversation-selection-actions .conversation-pin-selected:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:720px){
  .conversation-selection-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .conversation-selection-count{grid-column:1/-1}
  .conversation-selection-actions .conversation-pin-selected,
  .conversation-selection-actions .danger-action{width:100%;min-width:0}
}


/* Emoji picker appears only after choosing React from a message's three-dot menu. */
.message-reaction-picker{
  
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  width:max-content;
  max-width:min(100%,280px);
  padding:5px;
  border:1px solid var(--accent-outline-soft);
  border-radius:12px;
  background:var(--accent-panel-raised);
  box-shadow:0 8px 22px #00000016;
}
.message-reaction-picker[hidden]{display:none}



/* In-conversation navigation rail. */
.layout{position:relative}
.sidebar-home-content[hidden],.in-chat-sidebar[hidden]{display:none!important}
.in-chat-sidebar{display:flex;flex:1;flex-direction:column;min-height:0;margin-top:12px}
.in-chat-search{display:grid;gap:6px;margin:0 2px 14px;color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.in-chat-search .search{width:100%;margin:0}
.in-chat-sidebar-scroll{display:flex;flex:1;flex-direction:column;gap:16px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 1px 10px}
.in-chat-list-section{display:flex;flex:0 0 auto;flex-direction:column;gap:7px;min-height:0}
.in-chat-list-heading{display:flex;flex:none;align-items:center;justify-content:space-between;gap:8px;padding:0 6px 2px;color:var(--muted);font-size:calc(9px * var(--font-scale,1));font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.in-chat-conversation-list{display:grid;flex:none;align-content:start;gap:7px;min-width:0;overflow:visible}
.in-chat-conversation-list>.chat-row{flex:none;min-height:62px;margin:0}
.in-chat-sidebar-scroll{align-items:stretch}
.in-chat-conversation-list .chat-row{display:flex;width:100%;min-width:0;gap:0;padding:2px;border:1px solid transparent;border-radius:11px;background:transparent;box-shadow:none}
.in-chat-conversation-list .chat-row:hover{border-color:var(--line);background:var(--accent-panel)}
.in-chat-conversation-list .chat-row .chat-item{display:flex;flex:1;min-width:0;width:100%;gap:9px;padding:8px;border:1px solid transparent;border-radius:9px;background:transparent}
.in-chat-conversation-list .chat-row .chat-item:hover{background:transparent}
.in-chat-conversation-list .chat-row .chat-item.active{border-color:var(--accent-outline-soft);background:var(--accent-surface)}
.in-chat-conversation-list .chat-row .chat-item .avatar{width:36px;height:36px;flex:none}
.in-chat-conversation-list .chat-copy{min-width:0}
.in-chat-conversation-list .chat-copy strong,.in-chat-conversation-list .chat-copy .chat-peer-profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-chat-conversation-list .chat-copy span{display:block;margin-top:3px;overflow:hidden;color:var(--muted);font-size:calc(9px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.in-chat-conversation-list .chat-time{display:none}
.in-chat-conversation-list .unread-count-badge{margin-top:4px}
.in-chat-empty{margin:5px 7px;padding:8px 0;font-size:calc(10px * var(--font-scale,1));line-height:1.45}
.conversation-drawer-toggle{display:none;flex:none;width:34px;height:34px;align-items:center;justify-content:center;padding:0;font-size:18px}
.conversation-drawer-backdrop{display:none}
html[data-theme="light"] .in-chat-conversation-list .chat-row:hover{background:#f3f5fa}
html[data-theme="light"] .in-chat-conversation-list .chat-row .chat-item.active{background:var(--accent-surface)}
@media(max-width:720px){
  .layout{overflow:hidden}
  .conversation-drawer-toggle{display:inline-flex}
  .layout.show-chat .sidebar{display:none}
  .layout.show-chat .main{display:block}
  .layout.show-chat.conversation-drawer-open .sidebar{
    position:absolute;z-index:12;top:0;bottom:0;left:0;
    display:flex;width:min(86vw,330px);height:auto;max-height:100%;
    padding:18px 13px 12px;overflow:hidden;border-right:1px solid var(--line);
    background:var(--accent-panel);box-shadow:14px 0 40px #0005;
  }
  .layout.show-chat.conversation-drawer-open .sidebar .side-title{flex:none}
  .layout.show-chat.conversation-drawer-open .in-chat-sidebar{overflow:hidden}
  .conversation-drawer-backdrop:not([hidden]){
    position:absolute;z-index:11;inset:0;display:block;width:100%;height:100%;
    padding:0;border:0;border-radius:0;background:#070912aa;
  }
  .in-chat-search{margin-bottom:10px}
  .in-chat-sidebar-scroll{gap:12px}
  .chat-head{flex-wrap:nowrap}
}
@media(min-width:721px){
  .layout.in-chat-mode{grid-template-columns:285px minmax(0,1fr)}
  .layout.in-chat-mode .sidebar{padding-top:20px}
  .layout.in-chat-mode .side-title h2{font-size:calc(18px * var(--font-scale,1))}
  .layout.in-chat-mode .in-chat-sidebar{margin-top:13px}
}


/* High-contrast text for dark outgoing bubbles in light-theme custom chats. */
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble{
  color:#f7f9fc;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .meta strong,
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-profile-link{
  color:#ffffff;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .meta time,
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-edited-label,
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-forwarded-label{
  color:#dce5ef;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-action-trigger{
  color:#e5edf5;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-action-trigger:hover,
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-action-trigger[aria-expanded="true"]{
  color:#ffffff;
  background:#ffffff20;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .reply-preview{
  color:#f7f9fc;
  border-left-color:#dce5ef;
  background:#ffffff18;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .reply-preview strong{
  color:#ffffff;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-receipts{
  color:#e5edf5;
}
html[data-theme="light"] .chat.chat-appearance-custom .messages .mine .bubble .message-receipts.is-seen{
  color:#a9edc4;
}


/* Use the available rail height so the feedback shortcut stays at the bottom. */
#sidebar-home-content:not([hidden]){
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
}


/* Keep the image attachment remove control sized to its label, not the composer icon buttons. */
.composer .message-image-preview{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.composer .message-image-details{
  flex:1 1 0;
  min-width:0;
}
.composer .message-image-remove{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:max-content;
  height:auto;
  min-height:32px;
  padding:7px 10px;
  line-height:1.2;
  white-space:nowrap;
}
@media(max-width:420px){
  .composer .message-image-preview{gap:8px;padding:7px;}
  .composer .message-image-thumb{width:48px;height:48px;}
  .composer .message-image-remove{min-height:30px;padding:6px 8px;}
}


/* Extend each conversation's selected appearance through the full chat panel and composer. */
.chat.chat-appearance-custom{
  background:var(--conversation-background);
}
.chat.chat-appearance-custom .messages{
  background:var(--conversation-background)!important;
}
.chat.chat-appearance-custom .composer{
  border-color:var(--conversation-accent-border);
  background:color-mix(in srgb,var(--conversation-background) 92%,var(--conversation-accent) 8%);
}
.chat.chat-appearance-custom .composer textarea{
  color:var(--text);
  background:transparent;
}



/* Sent-message bubbles use the conversation accent, not the site-wide accent. */
.chat.chat-appearance-custom .messages .mine .bubble{
  background:var(--conversation-accent)!important;
  border-color:var(--conversation-accent)!important;
  color:var(--conversation-accent-ink)!important;
}
.chat.chat-appearance-custom .messages .mine .bubble .meta strong,
.chat.chat-appearance-custom .messages .mine .bubble .meta time,
.chat.chat-appearance-custom .messages .mine .bubble .body-text,
.chat.chat-appearance-custom .messages .mine .bubble .message-profile-link,
.chat.chat-appearance-custom .messages .mine .bubble .message-edited-label,
.chat.chat-appearance-custom .messages .mine .bubble .message-forwarded-label,
.chat.chat-appearance-custom .messages .mine .bubble .message-receipts,
.chat.chat-appearance-custom .messages .mine .bubble .message-receipts-button{
  color:var(--conversation-accent-ink)!important;
}
.chat.chat-appearance-custom .messages .mine .bubble .message-action-trigger{
  color:var(--conversation-accent-ink)!important;
}
.chat.chat-appearance-custom .messages .mine .bubble .reply-preview{
  color:var(--conversation-accent-ink);
  border-left-color:color-mix(in srgb,var(--conversation-accent-ink) 45%,transparent);
  background:color-mix(in srgb,var(--conversation-accent-ink) 9%,transparent);
}


/* Incoming messages use the softer shade of the selected conversation accent. */
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble{
  background:var(--conversation-accent-soft)!important;
  border-color:var(--conversation-accent-border)!important;
  color:#f5f4fb!important;
}
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .meta strong,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .meta time,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .body-text,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .message-profile-link,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .message-edited-label,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .message-forwarded-label,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .message-receipts,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .message-receipts-button,
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .message-action-trigger{
  color:#f5f4fb!important;
}
.chat.chat-appearance-custom .messages .message:not(.mine) .bubble .reply-preview{
  color:#f5f4fb;
  border-left-color:var(--conversation-accent-border);
  background:#ffffff12;
}


/* Center the New messages divider symmetrically across the conversation width. */
.messages > .new-messages-divider{
  align-self:stretch;
  width:100%;
  box-sizing:border-box;
  justify-content:center;
}
.messages > .new-messages-divider::before,
.messages > .new-messages-divider::after{
  flex:1 1 0;
  min-width:0;
  max-width:none;
}


/* Dedicated Admin Mode workspace. */
.admin-mode-launch{border-color:var(--accent-outline-soft);color:var(--accent-text)}
.admin-mode-modal{
  width:min(100%,1120px);
  max-height:calc(100dvh - 28px);
  display:flex;
  flex-direction:column;
  gap:15px;
  overflow:hidden;
  padding:22px;
}
.admin-mode-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-right:34px}
.admin-mode-header h2{margin:0 0 4px;font-size:calc(24px * var(--font-scale,1))}
.admin-mode-header p:last-child{margin:0}
.admin-mode-nav{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.admin-mode-tab{flex:0 0 auto;padding:9px 13px;border:1px solid transparent;border-radius:9px;color:var(--muted);background:transparent;font-size:calc(10px * var(--font-scale,1));font-weight:750}
.admin-mode-tab:hover{background:var(--accent-surface);color:var(--text)}
.admin-mode-tab.active{border-color:var(--accent-outline-soft);background:var(--accent-surface);color:var(--accent-text)}
.admin-mode-body{flex:1;min-height:0;overflow:auto;padding:2px 3px 8px;overscroll-behavior:contain}
.admin-mode-panel[hidden]{display:none!important}
.admin-mode-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.admin-summary-card{display:grid;gap:5px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:13px;color:var(--text);background:var(--accent-panel);text-align:left}
.admin-summary-card:hover{border-color:var(--accent-outline);background:var(--accent-surface)}
.admin-summary-card span{color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.admin-summary-card strong{font-size:calc(26px * var(--font-scale,1));line-height:1.15}
.admin-summary-card small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.admin-overview-grid{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:12px}
.admin-mode-card{min-width:0;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--accent-panel)}
.admin-mode-card h3{margin:0 0 12px;font-size:calc(14px * var(--font-scale,1))}
.admin-mode-card>.secondary-action{margin-top:7px}
.admin-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 14px}
.admin-section-heading h3{margin:0 0 4px;font-size:calc(16px * var(--font-scale,1))}
.admin-section-heading p{margin:0}
.admin-security-note{margin:12px 2px 0;color:var(--muted);font-size:calc(9px * var(--font-scale,1));line-height:1.5}
.admin-feature-card{max-width:680px;padding:22px}
.admin-feature-card h3{margin:5px 0 7px;font-size:calc(20px * var(--font-scale,1))}
.admin-feature-card p{max-width:560px;line-height:1.6}
.admin-feature-card .primary{width:auto;margin-top:8px;padding:10px 15px}
.admin-account-search{display:grid;gap:6px;max-width:430px;margin:0 0 12px;color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.admin-account-search input{width:100%;margin:0}
.admin-account-layout{display:grid;grid-template-columns:minmax(245px,.85fr) minmax(330px,1.15fr);gap:12px;align-items:start}
.admin-account-list{display:grid;gap:6px;max-height:52vh;min-height:120px;overflow:auto;overscroll-behavior:contain;padding:1px}
.admin-account-item{display:grid;gap:4px;width:100%;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--accent-panel);text-align:left}
.admin-account-item:hover,.admin-account-item.active{border-color:var(--accent-outline);background:var(--accent-surface)}
.admin-account-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(11px * var(--font-scale,1))}
.admin-account-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.admin-account-item .admin-account-item-status{color:var(--accent-text);font-weight:750}
.admin-load-more{margin-top:8px}
.admin-account-detail{min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--accent-panel)}
.admin-account-detail h4{margin:0 0 4px;font-size:calc(15px * var(--font-scale,1))}
.admin-account-detail .admin-account-email{margin:0 0 12px;color:var(--muted);font-size:calc(10px * var(--font-scale,1));overflow-wrap:anywhere}
.admin-account-meta{display:grid;gap:4px;margin-bottom:12px;padding:9px;border-radius:9px;background:var(--accent-panel-raised);color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.admin-account-form{display:grid;gap:9px}
.admin-account-form label{display:grid;gap:5px;color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.admin-account-form input,.admin-account-form textarea,.admin-account-form select{width:100%;min-width:0;margin:0;padding:9px 10px;font-size:calc(11px * var(--font-scale,1))}
.admin-account-form textarea{min-height:68px;resize:vertical}
.admin-account-form-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.admin-account-form-actions button{width:auto;min-width:0;margin:0;padding:8px 11px}
.admin-danger-button{border-color:#d66b7d!important;border-radius:12px!important;color:#f3b1bc!important;background:#492d37!important}
.admin-empty-state{display:grid;min-height:130px;align-content:center;justify-items:center;gap:6px;text-align:center}
.admin-empty-state strong{font-size:calc(13px * var(--font-scale,1))}
.admin-empty-state p{max-width:250px;margin:0;line-height:1.5}
.admin-activity-list{display:grid;gap:7px}
.admin-activity-item{display:grid;gap:4px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--accent-panel-raised)}
.admin-activity-item strong{font-size:calc(10px * var(--font-scale,1))}
.admin-activity-item small{color:var(--muted);font-size:calc(9px * var(--font-scale,1));overflow-wrap:anywhere}
@media(max-width:820px){
  .admin-mode-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-overview-grid{grid-template-columns:minmax(0,1fr)}
  .admin-account-layout{grid-template-columns:minmax(0,1fr)}
  .admin-account-list{max-height:32vh}
}
@media(max-width:720px){
  .admin-mode-launch{width:36px;height:36px;min-width:36px;justify-content:center;gap:0;padding:0;font-size:0}
  .admin-mode-launch .home-glyph{font-size:19px}
  .admin-mode-modal{width:100%;max-height:calc(100dvh - 12px);padding:18px 13px 12px;gap:11px}
  .admin-mode-header{gap:8px;padding-right:29px}
  .admin-mode-header h2{font-size:calc(21px * var(--font-scale,1))}
  .admin-mode-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding-bottom:9px}
  .admin-mode-tab{padding:8px 4px;font-size:calc(9px * var(--font-scale,1))}
  .admin-mode-summary-grid{gap:7px}
  .admin-summary-card{padding:11px}
  .admin-summary-card strong{font-size:calc(22px * var(--font-scale,1))}
  .admin-section-heading{align-items:flex-start}
  .admin-section-heading button{flex:none;padding:7px 9px}
  .admin-account-detail{padding:11px}
}


/* Keep the admin launcher icon-only on compact headers. */
@media(max-width:720px){
  .topbar-actions .admin-mode-launch{
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:36px;
    justify-content:center;
    gap:0;
    padding:0;
  }
  .topbar-actions .admin-mode-launch > span:not(.home-glyph){display:none}
  .topbar-actions .admin-mode-launch .home-glyph{font-size:19px}
}

/* Admin announcements actions stay grouped and wrap cleanly on narrow screens. */
.admin-announcement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.admin-announcement-actions .primary,.admin-announcement-actions .secondary-action{width:auto;margin:0;padding:10px 13px}
@media(max-width:420px){
  .admin-announcement-actions{display:grid;grid-template-columns:1fr}
  .admin-announcement-actions button{width:100%}
}


/* Back navigation for child screens opened from Admin Mode. */
.admin-child-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-width:76px;
  min-height:34px;
  margin:0 0 12px;
  padding:6px 11px;
  border:1px solid var(--accent-outline-soft);
  border-radius:9px;
  color:var(--accent-text);
  background:var(--accent-surface);
  font-size:calc(11px * var(--font-scale,1));
  font-weight:750;
  cursor:pointer;
}
.admin-child-back:hover{border-color:var(--accent-outline);background:var(--accent-hover)}
.admin-child-back span:first-child{font-size:19px;line-height:1}
.admin-child-back[hidden]{display:none!important}


/* Gather approved-account badge. */
.approved-account-badge{
  display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;
  margin-left:6px;padding:2px 7px;border:1px solid #43a06e66;border-radius:999px;
  color:#66c58e;background:#43a06e18;font-size:calc(9px * var(--font-scale,1));
  font-weight:800;line-height:1.35;vertical-align:middle;white-space:nowrap
}
.account-approval-status{
  margin:8px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  color:var(--muted);background:var(--accent-panel);font-size:calc(11px * var(--font-scale,1));line-height:1.5
}
.account-approval-status.approved{border-color:#43a06e66;color:#66c58e;background:#43a06e12}
.account-approval-status.pending{border-color:var(--accent-outline);color:var(--accent-text);background:var(--accent-surface)}
.account-approval-status.declined{border-color:#d99b5b66}
.account-approval-settings textarea{width:100%;margin-top:6px}
.account-approval-settings .primary{width:auto;margin-top:9px;padding:10px 14px}
.admin-approval-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.admin-approval-list{display:grid;gap:8px}
.admin-approval-card{display:grid;gap:9px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--accent-panel-raised)}
.admin-approval-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:7px}
.admin-approval-heading strong{font-size:calc(12px * var(--font-scale,1))}
.admin-approval-heading small,.admin-approval-card>small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.admin-approval-message{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:calc(11px * var(--font-scale,1));line-height:1.5}
.admin-approval-note-label{display:grid;gap:5px;color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.admin-approval-note-label textarea{width:100%;margin:0;min-height:55px;padding:8px}
.admin-approval-approved-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--accent-panel-raised)}
.admin-approval-approved-copy{display:grid;gap:3px;min-width:0}
.admin-approval-approved-copy strong{font-size:calc(11px * var(--font-scale,1));overflow-wrap:anywhere}
.admin-approval-approved-copy small{font-size:calc(9px * var(--font-scale,1))}
.admin-approval-approved-row button{width:auto;min-width:68px;margin:0;padding:7px 9px}
.admin-mode-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:820px){
  .admin-approval-layout{grid-template-columns:1fr}
  .admin-mode-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Consistent back navigation for modal and nested views. */
.modal-back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:max-content;
  min-height:35px;
  margin:0 0 13px;
  padding:7px 12px;
  border:1px solid var(--accent-outline-soft);
  border-radius:9px;
  color:var(--accent-text);
  background:var(--accent-surface);
  font-family:inherit;
  font-size:calc(11px * var(--font-scale,1));
  font-weight:750;
  line-height:1.2;
  cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s;
}
.modal-back-button:hover{
  border-color:var(--accent-outline);
  background:var(--accent-hover);
  transform:translateX(-1px);
}
.modal-back-button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.modal-back-button[hidden]{display:none!important}
@media(max-width:720px){
  .modal-back-button{min-height:38px;margin-bottom:11px;padding:8px 12px}
}


/* Lightweight, touch-friendly interaction polish. */
@keyframes gather-modal-enter{from{opacity:0;transform:translateY(7px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gather-typing-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@keyframes gather-online-pulse{0%,100%{box-shadow:0 0 0 0 rgba(88,200,151,0)}50%{box-shadow:0 0 0 3px rgba(88,200,151,.16)}}
@keyframes gather-skeleton-shimmer{to{background-position:-220% 0}}
@keyframes gather-profile-highlight-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.overlay:not([hidden])>.modal{animation:gather-modal-enter .18s ease-out both}
button:not(:disabled){transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
button:not(:disabled):active{transform:translateY(1px) scale(.985)}
.chat-title .chat-typing-indicator{display:inline-flex;align-items:center;gap:6px}
.typing-indicator-copy{min-width:0}
.typing-indicator-dots{display:inline-flex;align-items:center;gap:3px}
.typing-indicator-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;animation:gather-typing-dot .95s ease-in-out infinite}
.typing-indicator-dots span:nth-child(2){animation-delay:.14s}
.typing-indicator-dots span:nth-child(3){animation-delay:.28s}
.presence-label.is-online::before{animation:gather-online-pulse 2.5s ease-in-out infinite}
.message-reaction{transition:transform .14s ease,border-color .14s ease,background .14s ease}
.message-reaction:active{transform:scale(.92)}
.message-reaction-picker{animation:gather-modal-enter .14s ease-out both}
.message-skeleton-row{display:flex;align-self:flex-start;max-width:78%}
.message-skeleton-row.is-mine{align-self:flex-end}
.message-skeleton-bubble{display:grid;gap:9px;min-width:112px;padding:13px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(110deg,var(--accent-panel) 25%,color-mix(in srgb,var(--accent-panel) 72%,white 8%) 42%,var(--accent-panel) 60%);background-size:220% 100%;animation:gather-skeleton-shimmer 1.45s linear infinite}
.message-skeleton-row.is-mine .message-skeleton-bubble{border-color:var(--accent-outline-soft);background-color:var(--accent-soft)}
.message-skeleton-line{display:block;width:100%;height:7px;border-radius:5px;background:color-mix(in srgb,var(--muted) 24%,transparent)}
.message-skeleton-line.short{width:58%}
.profile-status-message{width:max-content;max-width:100%;margin:9px auto 5px;padding:7px 11px;border:1px solid var(--accent-outline-soft);border-radius:999px;color:var(--accent-text);background:var(--accent-surface);font-size:calc(11px * var(--font-scale,1));font-weight:650;overflow-wrap:anywhere}
.member-profile-highlights{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0}
.profile-highlight{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border:1px solid var(--accent-outline-soft);border-radius:999px;color:var(--accent-text);background:var(--accent-panel);font-size:calc(10px * var(--font-scale,1));font-weight:700;animation:gather-profile-highlight-enter .16s ease-out both}
.profile-highlight:nth-child(2){animation-delay:.035s}
.profile-highlight:nth-child(3){animation-delay:.07s}
@media (prefers-reduced-motion:reduce){
  .overlay:not([hidden])>.modal,.typing-indicator-dots span,.presence-label.is-online::before,.message-reaction-picker,.message-skeleton-bubble,.profile-highlight{animation:none!important}
  button:not(:disabled),.message-reaction{transition:none!important}
  button:not(:disabled):active,.message-reaction:active{transform:none}
}

@keyframes gather-notification-enter{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes gather-view-enter{
  from{opacity:.88;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
.layout.show-chat .main,.layout.show-home .main{animation:gather-view-enter .17s ease-out both}
#notifications-list .notification-center-item:nth-child(-n+5){animation:gather-notification-enter .16s ease-out both}
#notifications-list .notification-center-item:nth-child(2){animation-delay:.025s}
#notifications-list .notification-center-item:nth-child(3){animation-delay:.05s}
#notifications-list .notification-center-item:nth-child(4){animation-delay:.075s}
#notifications-list .notification-center-item:nth-child(5){animation-delay:.1s}
@media (prefers-reduced-motion:reduce){
  .layout.show-chat .main,.layout.show-home .main,
  #notifications-list .notification-center-item{animation:none!important}
}

/* Accessibility and supporting controls for the November 2026 improvements. */
:where(button,a,input,textarea,select,[role="button"],[tabindex]):focus-visible{
  outline:3px solid var(--accent-contrast,var(--accent));
  outline-offset:3px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent);
}
.workspace-search-controls{display:block;margin:4px 0 12px}
.chat-draft-label{display:inline-flex;width:max-content;max-width:100%;margin-top:4px;padding:2px 7px;border:1px solid var(--accent-outline);border-radius:999px;color:var(--accent-text);background:var(--accent-surface);font-size:calc(9px * var(--font-scale,1));font-weight:750}
.draft-save-status{color:var(--muted);font-size:calc(9px * var(--font-scale,1));min-width:0}
.quiet-hours-toggle{margin-top:10px}
.quiet-hours-times{display:flex;gap:12px;margin:10px 0 2px 31px}
.quiet-hours-times[hidden]{display:none!important}
.quiet-hours-times label{display:grid;gap:5px;flex:1;min-width:0;color:var(--muted);font-size:calc(10px * var(--font-scale,1));font-weight:650}
.quiet-hours-times input{width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--accent-input);color:var(--text);font:inherit}
@media(max-width:520px){
  .workspace-search-controls{align-items:stretch;flex-direction:column}
  .quiet-hours-times{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Inline message-formatting guidance in the composer. */
.message-format-hint{display:block;margin:2px 0 7px;color:var(--muted);font-size:calc(9px * var(--font-scale,1));line-height:1.35}


/* iOS Safari zooms focused text controls below 16px; keep this adjustment iOS-only. */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):not([type="range"]),
    textarea {
      font-size: max(16px, calc(12px * var(--font-scale, 1))) !important;
    }
  }
}


/* Keep the message composer visually steady while typing; remove accent focus rings here only. */
.composer:focus-within{border-color:var(--line)}
.composer textarea:focus,.composer textarea:focus-visible{outline:none;outline-offset:0;box-shadow:none}


.request-item.is-favorite-friend{border-color:var(--accent-outline-soft)}
.favorite-friend-toggle{
  flex:none;width:32px;min-width:32px;min-height:32px;margin:0;padding:0;
  border:1px solid var(--accent-outline-soft);border-radius:8px;
  color:var(--accent-muted);background:var(--accent-panel-raised);
  font-size:21px;line-height:1;
}
.favorite-friend-toggle.active{border-color:#e4bb5b88;color:#f2c96b;background:#e4bb5b16}
.favorite-friend-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:720px){
  .request-actions{flex-wrap:wrap}
}

/* Compact post-send undo control beside the composer overflow button. */
.composer-utility-actions{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:none;
  min-width:0;
}
.message-undo-bar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:none;
  width:auto;
  max-width:min(52vw,190px);
  margin:0;
  padding:3px 5px;
  border:1px solid var(--accent-outline-soft);
  border-radius:9px;
  color:var(--text);
  background:var(--accent-panel);
  font-size:calc(9px * var(--font-scale,1));
  white-space:nowrap;
}
.message-undo-bar[hidden]{display:none!important}
.message-undo-bar small{
  flex:none;
  color:var(--muted);
  font-size:calc(9px * var(--font-scale,1));
  font-variant-numeric:tabular-nums;
}
.message-undo-bar button{
  flex:none;
  width:auto;
  height:26px;
  min-height:26px;
  margin:0;
  padding:3px 7px;
  border:1px solid var(--accent-outline-soft);
  border-radius:7px;
  color:var(--accent-text);
  background:var(--accent-surface);
  font-size:calc(9px * var(--font-scale,1));
  font-weight:800;
  line-height:1;
}
.message-undo-bar .message-undo-dismiss{
  display:grid;
  place-items:center;
  width:22px;
  min-width:22px;
  height:24px;
  min-height:24px;
  padding:0;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--muted);
  background:transparent;
  font-size:17px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
}
.message-undo-bar .message-undo-dismiss:hover{border-color:var(--line);color:var(--text);background:var(--accent-hover)}
.message-undo-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:520px){
  .composer-utility-actions{gap:5px}
  .message-undo-bar{gap:4px;padding:3px 4px}
  .message-undo-bar button{padding-inline:6px}
}


/* On desktop, keep the four home shortcuts in the left sidebar only. */
@media(min-width:721px){
  #empty .workspace-actions{display:none}
}


/* Unified home search: separate message and profile result sections. */
.home-search-results{display:grid;gap:12px;min-height:0;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--accent-panel)}
.home-search-results[hidden],.home-search-panel[hidden]{display:none!important}
.home-search-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:9px}
.home-search-tab{display:flex;align-items:center;gap:8px;width:auto;margin:0;padding:8px 13px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:var(--accent-panel-raised);font-size:calc(11px * var(--font-scale,1));font-weight:750}
.home-search-tab span{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--accent-badge);color:var(--accent-text);font-size:calc(9px * var(--font-scale,1))}
.home-search-tab.active{border-color:var(--accent-outline);color:var(--accent-text);background:var(--accent-surface)}
.home-search-panel{min-height:110px}
.home-search-results-list{display:grid;gap:8px;max-height:55vh;overflow:auto}
.home-search-empty{margin:0;padding:14px 4px}
.home-search-message-result{width:100%;text-align:left}
.home-search-message-result span{white-space:normal;overflow-wrap:anywhere}
.home-search-profile-result{display:flex;align-items:center;gap:11px;min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--accent-panel-raised)}
.home-search-profile-result>.avatar{width:38px;height:38px}
.home-search-profile-copy{display:grid;gap:4px;flex:1;min-width:0}
.home-search-profile-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(11px * var(--font-scale,1))}
.home-search-profile-copy small{font-size:calc(10px * var(--font-scale,1))}
.home-search-profile-result>button:last-child{flex:none;width:auto;min-height:34px;margin:0;padding:7px 10px;font-size:calc(10px * var(--font-scale,1))}
@media(max-width:720px){.home-search-results{padding:11px}.home-search-results-list{max-height:none;overflow:visible}.home-search-profile-result{gap:8px;padding:9px}.home-search-profile-result>button:last-child{padding:7px 8px}}


/* Friends list: protect profile details from action-button overflow. */
.request-list,#friends-list{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.friend-list-item{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;gap:12px;width:100%;min-width:0;max-width:100%;
  box-sizing:border-box;overflow:hidden;padding:12px;
  touch-action:pan-y;transition:border-color .15s,background .15s;
}
.friend-list-item>.friend-list-avatar{width:46px;height:46px;grid-column:1;grid-row:1}
.friend-list-copy{grid-column:2;grid-row:1;min-width:0;max-width:100%;display:grid;align-content:center;gap:4px}
.friend-list-copy .friend-list-name{display:block;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.3}
.friend-list-copy .friend-list-username,.friend-list-copy .presence-label{
  display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.friend-list-copy .friend-list-username{margin:0}
.friend-list-copy .presence-label{margin:0}
.friend-swipe-instructions{
  margin:12px 0 14px;padding:10px 12px;border:1px solid var(--accent-outline-soft);
  border-radius:10px;color:var(--accent-muted);background:var(--accent-panel);
  font-size:calc(10px * var(--font-scale,1));line-height:1.45
}
.friend-list-actions{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;width:auto;padding:0}
.friend-list-actions .friend-profile-button{flex:none;min-width:62px;min-height:36px;padding:7px 9px}
.friend-icon-button{
  display:grid;place-items:center;flex:none;width:38px;min-width:38px;height:38px;min-height:38px;
  margin:0;padding:0;border-radius:9px;font-size:22px;line-height:1;
}
.friend-message-button{color:var(--accent-ink);background:var(--accent)}
.friend-message-icon{position:relative;display:block;width:16px;height:12px;border:2px solid currentColor;border-radius:4px}
.friend-message-icon::after{content:"";position:absolute;left:2px;bottom:-5px;width:5px;height:5px;border-left:2px solid currentColor;transform:skewY(-38deg);background:var(--accent)}
.friend-remove-button{color:#e7aab3;background:#34252d;border-color:#7c4b58}
.friend-remove-button:hover{background:#482e37;border-color:#d66b7d}
.friend-list-item.is-favorite-friend{border-color:var(--accent-outline-soft)}
.friend-list-item.swipe-favorite-complete{background:var(--accent-surface);border-color:var(--accent-outline-strong)}
.friend-list-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:720px){
  .friend-list-item{grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"avatar copy" "actions actions";gap:9px 10px;padding:11px}
  .friend-list-item>.friend-list-avatar{grid-area:avatar;width:42px;height:42px}
  .friend-list-copy{grid-area:copy}
  .friend-list-actions{grid-area:actions;justify-content:flex-end;padding:2px 0 0}
}
@media(max-width:380px){
  .friend-list-actions{gap:5px}
  .friend-list-actions .friend-profile-button{min-width:58px;padding:6px 7px}
  .friend-list-actions .friend-icon-button{width:36px;min-width:36px;height:36px;min-height:36px}
}


/* The home workspace is a flex column; prevent the results card from shrinking
   shorter than its full contents when several matches are returned. */
#empty #home-search-results:not([hidden]){
  display:grid;
  flex:0 0 auto;
  align-self:stretch;
  height:auto;
  min-height:max-content;
}
#empty #home-search-results .home-search-panel:not([hidden]){
  display:block;
  flex:0 0 auto;
  height:auto;
  min-height:max-content;
}
#empty #home-search-results .home-search-results-list{
  display:grid;
  flex:0 0 auto;
  height:auto;
  min-height:max-content;
  max-height:none;
  overflow:visible;
}

/* Search results must remain inside the results panel on narrow screens. */
.home-search-results{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:visible}
.home-search-panel{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:visible}
.home-search-results-list{display:grid;width:100%;min-width:0;max-width:100%;box-sizing:border-box;max-height:none;overflow:visible;overscroll-behavior:auto}
.home-search-message-result{display:grid;width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.home-search-message-result strong,.home-search-message-result span{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.home-search-profile-result{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.home-search-profile-copy{min-width:0;overflow:hidden}
.home-search-profile-result>button:last-child{white-space:normal;overflow-wrap:anywhere}


/* Official Gather Admin messages and targeted Admin composer. */
.message-admin-label{
  display:inline-flex;align-items:center;flex:none;margin-left:2px;padding:2px 7px;
  border:1px solid var(--accent-outline-soft);border-radius:999px;
  color:var(--accent-text);background:var(--accent-surface);
  font-size:calc(8px * var(--font-scale,1));font-weight:800;letter-spacing:.04em;
  line-height:1.35;white-space:nowrap
}
@media(max-width:520px){
  }


.message-restriction-banner{
  flex:none;margin:12px 18px 10px;padding:12px 14px;border:1px solid #d49a5255;
  border-radius:12px;color:var(--text);background:var(--accent-panel);
  box-shadow:0 8px 24px #00000012
}
.message-restriction-banner strong{display:block;color:var(--accent-text);font-size:calc(11px * var(--font-scale,1));font-weight:800}
.message-restriction-banner p{margin:5px 0 0;color:var(--text);font-size:calc(10px * var(--font-scale,1));line-height:1.5;overflow-wrap:anywhere}
.message-restriction-banner button{margin-top:8px;width:auto;padding:6px 10px}
.admin-message-restriction-card{
  display:grid;gap:10px;margin:14px 0;padding:14px;border:1px solid var(--accent-outline-soft);
  border-radius:12px;background:var(--accent-panel)
}
.admin-message-restriction-card h4{margin:0;font-size:calc(12px * var(--font-scale,1))}
.admin-message-restriction-card p{margin:0;line-height:1.5}
.admin-message-restriction-card .admin-restriction-active{color:#e3b46f}
.admin-restriction-field{display:grid;gap:6px;color:var(--text);font-size:calc(10px * var(--font-scale,1));font-weight:700}
.admin-restriction-field select,.admin-restriction-field textarea{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  color:var(--text);background:var(--input-bg,var(--panel));font:inherit;font-weight:450
}
.admin-restriction-field textarea{min-height:70px;resize:vertical;line-height:1.45}
.admin-restriction-actions{display:flex;flex-wrap:wrap;gap:8px}
.admin-restriction-actions button{width:auto;min-width:130px}
@media(max-width:520px){
  .message-restriction-banner{margin:8px 9px;padding:10px 11px}
  .admin-restriction-actions{display:grid;grid-template-columns:1fr 1fr}
  .admin-restriction-actions button{width:100%;min-width:0}
}


.age-verification-overlay{z-index:20}
.age-verification-modal{width:min(100%,460px);max-height:calc(100dvh - 28px);overflow:auto}
.age-verification-modal h2{margin:0 0 8px}
.age-verification-note{margin:12px 0;padding:10px 12px;border:1px solid var(--accent-outline-soft);border-radius:10px;background:var(--accent-panel);font-size:calc(10px * var(--font-scale,1));line-height:1.5}
.age-verification-modal form{display:grid;gap:12px;margin-top:14px}
.age-verification-modal label{display:grid;gap:7px;font-size:calc(11px * var(--font-scale,1));font-weight:700}
.age-verification-modal input{width:100%;min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;color:var(--text);background:var(--input-bg,var(--panel));font:inherit}
.age-verification-modal>button{margin-top:10px}
@media(max-width:520px){.age-verification-modal{width:100%;max-height:calc(100dvh - 14px);padding:18px 14px}}


.admin-intergroup-request-list{display:grid;gap:10px}
.admin-intergroup-request{
  display:grid;gap:8px;padding:13px;border:1px solid var(--line);
  border-radius:11px;background:var(--card,var(--panel))
}
.admin-intergroup-request>strong{font-size:calc(11px * var(--font-scale,1));line-height:1.4;overflow-wrap:anywhere}
.admin-intergroup-request>small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.admin-intergroup-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-intergroup-actions button,.admin-intergroup-revoke{width:auto;min-width:96px;padding:7px 10px}
.admin-intergroup-revoke{justify-self:start}


/* Profile age confirmation and Admin-reviewed corrections. */
#profile-modal{z-index:21}
.profile-age-section{
  display:grid;gap:10px;margin:18px 0;padding:15px;
  border:1px solid var(--accent-outline-soft);border-radius:13px;
  background:var(--accent-panel)
}
.profile-age-section h3{margin:0;font-size:calc(14px * var(--font-scale,1))}
.profile-age-section form{display:grid;gap:10px}
.profile-age-section label{display:grid;gap:7px;font-size:calc(11px * var(--font-scale,1));font-weight:700}
.profile-age-section input{width:100%;min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;color:var(--text);background:var(--input-bg,var(--panel));font:inherit}
.profile-age-section button{width:100%}
.profile-age-section .status{margin:0}
.admin-age-change-heading{margin-top:22px}


/* Gather motion polish: give both entrances and exits the same calm timing. */
:root{
  --gather-motion-ease:cubic-bezier(.22,.68,0,1);
  --gather-motion-fast:160ms;
  --gather-motion:240ms;
}
button:not(:disabled){
  transition:
    color var(--gather-motion-fast) ease,
    background-color var(--gather-motion-fast) ease,
    border-color var(--gather-motion-fast) ease,
    box-shadow var(--gather-motion-fast) ease,
    opacity var(--gather-motion-fast) ease,
    transform var(--gather-motion-fast) var(--gather-motion-ease),
    filter var(--gather-motion-fast) ease;
}
:where(input,textarea,select){
  transition:
    border-color var(--gather-motion-fast) ease,
    background-color var(--gather-motion-fast) ease,
    box-shadow var(--gather-motion-fast) ease,
    opacity var(--gather-motion-fast) ease;
}
.chat-item,.person,.request-item,.friend-list-item,.folder-tab,
.notification-center-item,.pinned-message-banner,.composer,.bubble,
.profile-pill,.chat-section summary,.secondary-action,.outline{
  transition:
    color var(--gather-motion-fast) ease,
    background-color var(--gather-motion-fast) ease,
    border-color var(--gather-motion-fast) ease,
    box-shadow var(--gather-motion-fast) ease,
    opacity var(--gather-motion-fast) ease,
    transform var(--gather-motion-fast) var(--gather-motion-ease);
}

/* Modals fade out before their hidden state removes them from layout.
   Discrete display transitions are supported by current Safari and Chromium. */
.overlay{
  opacity:1;
  transition:
    opacity var(--gather-motion) var(--gather-motion-ease),
    display var(--gather-motion) allow-discrete;
  transition-behavior:allow-discrete;
}
.overlay[hidden]{
  opacity:0;
  pointer-events:none;
}
.overlay:not([hidden]){opacity:1}
.overlay>.modal{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:
    opacity var(--gather-motion) var(--gather-motion-ease),
    transform var(--gather-motion) var(--gather-motion-ease);
  will-change:opacity,transform;
}
.overlay[hidden]>.modal{
  opacity:0;
  transform:translateY(10px) scale(.985);
}
.overlay:not([hidden])>.modal{animation:none}
@starting-style{
  .overlay:not([hidden]){opacity:0}
  .overlay:not([hidden])>.modal{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
}

/* Floating menus now ease in and out instead of abruptly vanishing. */
.message-action-menu,.composer-more-menu{
  opacity:1;
  transform:translateY(0) scale(1);
  transform-origin:top center;
  transition:
    opacity var(--gather-motion-fast) var(--gather-motion-ease),
    transform var(--gather-motion-fast) var(--gather-motion-ease),
    display var(--gather-motion-fast) allow-discrete;
  transition-behavior:allow-discrete;
}
.message-action-menu[hidden],.composer-more-menu[hidden]{
  opacity:0;
  transform:translateY(6px) scale(.98);
  pointer-events:none;
}
@starting-style{
  .message-action-menu:not([hidden]),.composer-more-menu:not([hidden]){
    opacity:0;
    transform:translateY(6px) scale(.98);
  }
}

/* Notifications slide and fade away cleanly, including manual dismissal. */
.message-notifications{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity var(--gather-motion) var(--gather-motion-ease),
    transform var(--gather-motion) var(--gather-motion-ease),
    display var(--gather-motion) allow-discrete;
  transition-behavior:allow-discrete;
}
.message-notifications[hidden]{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
}
.message-notification{
  transition:
    opacity var(--gather-motion) var(--gather-motion-ease),
    transform var(--gather-motion) var(--gather-motion-ease),
    border-color var(--gather-motion-fast) ease,
    box-shadow var(--gather-motion-fast) ease;
}
.message-notification.is-dismissing{
  opacity:0;
  transform:translateX(12px) scale(.985);
  pointer-events:none;
}
@starting-style{
  .message-notifications:not([hidden]){
    opacity:0;
    transform:translateY(-8px);
  }
}

/* Keep the in-chat conversation drawer and its backdrop in sync. */
@media(max-width:720px){
  .layout.show-chat.conversation-drawer-open .sidebar{
    opacity:1;
    transform:translateX(0);
    transition:
      opacity var(--gather-motion) var(--gather-motion-ease),
      transform var(--gather-motion) var(--gather-motion-ease),
      display var(--gather-motion) allow-discrete;
    transition-behavior:allow-discrete;
  }
  .layout.show-chat:not(.conversation-drawer-open) .sidebar{
    opacity:0;
    transform:translateX(-12px);
  }
  .conversation-drawer-backdrop{
    opacity:0;
    transition:
      opacity var(--gather-motion) var(--gather-motion-ease),
      display var(--gather-motion) allow-discrete;
    transition-behavior:allow-discrete;
  }
  .conversation-drawer-backdrop:not([hidden]){opacity:1}
  @starting-style{
    .layout.show-chat.conversation-drawer-open .sidebar{
      opacity:0;
      transform:translateX(-12px);
    }
    .conversation-drawer-backdrop:not([hidden]){opacity:0}
  }
}

/* Toasts and selected controls respond with a softer, less abrupt motion. */
.toast{
  transition:
    opacity var(--gather-motion) var(--gather-motion-ease),
    transform var(--gather-motion) var(--gather-motion-ease),
    background-color var(--gather-motion-fast) ease;
}
.chat-item:hover,.person:hover,.request-item:hover,.pinned-message-banner:hover{
  transform:translateY(-1px);
}

/* Keep drawer transition declarations active in both open and closed states. */
@media(max-width:720px){
  .layout.show-chat .sidebar{
    transition:
      opacity var(--gather-motion) var(--gather-motion-ease),
      transform var(--gather-motion) var(--gather-motion-ease),
      display var(--gather-motion) allow-discrete;
    transition-behavior:allow-discrete;
  }
}


/* Broader motion system for content panels and in-app state changes. */
.main{view-transition-name:gather-main}
::view-transition-group(gather-main){
  animation-duration:280ms;
  animation-timing-function:var(--gather-motion-ease);
}
::view-transition-old(gather-main){
  animation:gather-main-out 230ms ease both;
}
::view-transition-new(gather-main){
  animation:gather-main-in 280ms var(--gather-motion-ease) both;
}
@keyframes gather-main-out{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-5px) scale(.997)}
}
@keyframes gather-main-in{
  from{opacity:0;transform:translateY(8px) scale(.997)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes gather-fallback-screen-in{
  from{opacity:0;transform:translateY(8px) scale(.997)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.main.gather-screen-enter{animation:gather-fallback-screen-in 280ms var(--gather-motion-ease) both}

/* Panels toggled with the hidden attribute get a real fade in both directions.
   Discrete display transitions let them finish fading before leaving layout. */
:where(#empty,#chat,#sidebar-home-content,#in-chat-sidebar,
  #home-search-results,#home-browse-content,#home-search-messages-panel,
  #home-search-profiles-panel,#private-folder-panel,#blocked-panel,#deleted-panel,
  #pinned-chat-section,#conversation-selection-actions,
  #chat-load-status,#chat-notice,#message-undo-bar,#reply-compose,
  #message-image-preview,#home-announcement-card,#home-message-restriction,
  #chat-message-restriction,#message-create-poll,#home-open,#leave-chat,
  #chat-title,#chat-presence-status,#chat-typing-indicator,#quiet-hours-times,
  #feedback-admin-settings-section,#quiet-hours-times,.folder-panel,
  .workspace-folder,.workspace-group-section,.home-search-panel,.admin-section,
  .feedback-detail,.feedback-new-form,.settings-section,.request-section,
  .message-restriction-banner,.chat-typing-indicator,.conversation-selection-actions){
  opacity:1;
  transform:translateY(0);
  transition:
    opacity var(--gather-motion) var(--gather-motion-ease),
    transform var(--gather-motion) var(--gather-motion-ease),
    display var(--gather-motion) allow-discrete;
  transition-behavior:allow-discrete;
}
:where(#empty,#chat,#sidebar-home-content,#in-chat-sidebar,
  #home-search-results,#home-browse-content,#home-search-messages-panel,
  #home-search-profiles-panel,#private-folder-panel,#blocked-panel,#deleted-panel,
  #pinned-chat-section,#conversation-selection-actions,
  #chat-load-status,#chat-notice,#message-undo-bar,#reply-compose,
  #message-image-preview,#home-announcement-card,#home-message-restriction,
  #chat-message-restriction,#message-create-poll,#home-open,#leave-chat,
  #chat-title,#chat-presence-status,#chat-typing-indicator,#quiet-hours-times,
  #feedback-admin-settings-section,.folder-panel,.workspace-folder,
  .workspace-group-section,.home-search-panel,.admin-section,.feedback-detail,
  .feedback-new-form,.settings-section,.request-section,.message-restriction-banner,
  .chat-typing-indicator)[hidden]{
  opacity:0;
  transform:translateY(7px);
  pointer-events:none;
}
@starting-style{
  :where(#empty,#chat,#sidebar-home-content,#in-chat-sidebar,
    #home-search-results,#home-browse-content,#home-search-messages-panel,
    #home-search-profiles-panel,#private-folder-panel,#blocked-panel,#deleted-panel,
    #pinned-chat-section,#conversation-selection-actions,
    #chat-load-status,#chat-notice,#message-undo-bar,#reply-compose,
    #message-image-preview,#home-announcement-card,#home-message-restriction,
    #chat-message-restriction,#message-create-poll,#home-open,#leave-chat,
    #chat-title,#chat-presence-status,#chat-typing-indicator,#quiet-hours-times,
    #feedback-admin-settings-section,.folder-panel,.workspace-folder,
    .workspace-group-section,.home-search-panel,.admin-section,.feedback-detail,
    .feedback-new-form,.settings-section,.request-section,.message-restriction-banner,
    .chat-typing-indicator):not([hidden]){
    opacity:0;
    transform:translateY(7px);
  }
}

/* Sign-in and the authenticated workspace should not swap abruptly either. */
#auth,#app{
  opacity:1;
  transition:
    opacity 260ms var(--gather-motion-ease),
    display 260ms allow-discrete;
  transition-behavior:allow-discrete;
}
#auth[hidden],#app[hidden]{opacity:0;pointer-events:none}
@starting-style{
  #auth:not([hidden]),#app:not([hidden]){opacity:0}
}

/* Native expandable sections animate their height when the browser supports it. */
@supports selector(details::details-content){
  details{interpolate-size:allow-keywords}
  details::details-content{
    block-size:0;
    overflow:clip;
    opacity:0;
    transition:
      block-size var(--gather-motion) var(--gather-motion-ease),
      opacity var(--gather-motion-fast) ease,
      content-visibility var(--gather-motion) allow-discrete;
  }
  details[open]::details-content{block-size:auto;opacity:1}
  @starting-style{
    details[open]::details-content{block-size:0;opacity:0}
  }
}

/* Gentle arrival effects for genuinely new items, not every rerender. */
@keyframes gather-list-item-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes gather-message-in{
  from{opacity:0;transform:translateY(7px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.gather-list-enter{animation:gather-list-item-in 210ms var(--gather-motion-ease) both}
.gather-message-enter{animation:gather-message-in 220ms var(--gather-motion-ease) both}
/* Do not stagger a whole conversation's history as it first appears. */
#messages>.gather-message-enter:nth-child(2),
#messages>.gather-message-enter:nth-child(3),
#messages>.gather-message-enter:nth-child(4),
#messages>.gather-message-enter:nth-child(5),
#messages>.gather-message-enter:nth-child(6){animation-delay:0ms}
.gather-list-enter:nth-child(2){animation-delay:25ms}
.gather-list-enter:nth-child(3){animation-delay:45ms}
.gather-list-enter:nth-child(4){animation-delay:65ms}
.gather-list-enter:nth-child(5){animation-delay:85ms}
.gather-list-enter:nth-child(6){animation-delay:105ms}

/* Keep tab, segmented-control and disclosure selection changes fluid. */
.tab,.folder-tab,.notification-tab,[role="tab"],.segmented-control button,
.chat-section summary,.settings-tab,.admin-nav-button{
  transition:
    color var(--gather-motion-fast) ease,
    background-color var(--gather-motion-fast) ease,
    border-color var(--gather-motion-fast) ease,
    box-shadow var(--gather-motion-fast) ease,
    transform var(--gather-motion-fast) var(--gather-motion-ease);
}
:where(.tab,.folder-tab,.notification-tab,[role="tab"],.settings-tab,.admin-nav-button)[aria-selected="true"],
:where(.tab,.folder-tab,.notification-tab,[role="tab"],.settings-tab,.admin-nav-button).active{
  transition-duration:200ms;
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(gather-main),
  ::view-transition-old(gather-main),
  ::view-transition-new(gather-main){animation:none!important}
  .main.gather-screen-enter,.gather-list-enter,.gather-message-enter{animation:none!important}
}


/* Floating message action menus remain mounted just long enough to fade away. */
.message-action-menu.is-dismissing{
  opacity:0;
  transform:translateY(6px) scale(.98);
  pointer-events:none;
}


/* Deleted messages are organized into conversation groups with individual recovery. */
#deleted-list{
  display:grid;
  gap:11px;
  min-width:0;
  max-height:none;
  overflow:visible;
}
.deleted-conversation-group{
  min-width:0;
  border:1px solid var(--accent-outline-soft);
  border-radius:13px;
  background:var(--accent-panel-raised);
  overflow:hidden;
  box-shadow:0 3px 12px #0000000a;
}
.deleted-conversation-heading{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:12px 13px;
  color:var(--text);
  background:var(--accent-panel);
  cursor:pointer;
  list-style:none;
  transition:background-color var(--gather-motion-fast) ease,color var(--gather-motion-fast) ease;
}
.deleted-conversation-heading::-webkit-details-marker{display:none}
.deleted-conversation-heading::marker{content:""}
.deleted-conversation-heading::after{
  content:"⌄";
  flex:none;
  margin-left:3px;
  color:var(--muted);
  font-size:15px;
  transition:transform var(--gather-motion-fast) var(--gather-motion-ease);
}
.deleted-conversation-group:not([open])>.deleted-conversation-heading::after{transform:rotate(-90deg)}
.deleted-conversation-heading:hover{background:var(--accent-surface)}
.deleted-conversation-title{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:calc(11px * var(--font-scale,1));
  font-weight:750;
}
.deleted-conversation-messages{
  display:grid;
  gap:8px;
  min-width:0;
  padding:10px;
  border-top:1px solid var(--line);
}
.deleted-conversation-messages .deleted-item{
  min-width:0;
  align-items:flex-start;
  padding:10px;
  border-color:var(--line);
  border-radius:10px;
  background:var(--accent-panel);
}
.deleted-conversation-messages .deleted-copy{flex:1 1 auto;min-width:0}
.deleted-conversation-messages .deleted-copy small{
  overflow:visible;
  white-space:normal;
  line-height:1.45;
}
.deleted-conversation-messages .deleted-preview{
  display:block;
  max-height:9em;
  overflow:auto;
  -webkit-line-clamp:unset;
  -webkit-box-orient:initial;
  overscroll-behavior:contain;
  padding-right:2px;
}
.deleted-conversation-messages .deleted-item>.request-accept{
  min-height:33px;
  padding:7px 11px;
  transition:transform var(--gather-motion-fast) var(--gather-motion-ease),filter var(--gather-motion-fast) ease;
}
.deleted-conversation-messages .deleted-item>.request-accept:hover{filter:brightness(1.08)}
.deleted-conversation-messages .deleted-item>.request-accept:active{transform:scale(.97)}
@media(max-width:520px){
  .deleted-conversation-heading{padding:11px}
  .deleted-conversation-messages{gap:7px;padding:8px}
  .deleted-conversation-messages .deleted-item{gap:8px;padding:9px}
  .deleted-conversation-messages .deleted-item>.avatar{width:30px;height:30px}
  .deleted-conversation-messages .deleted-item>.request-accept{min-height:34px;padding:7px 9px}
}


/* Gather's shared brand mark follows the member's selected accent theme. */
.brand-icon{
  overflow:hidden;
  padding:0;
  border:1px solid var(--brand-mark-border,var(--accent));
  background:var(--accent);
  box-shadow:0 2px 10px var(--brand-mark-shadow,var(--accent-outline-soft)), inset 0 0 0 1px #ffffff30;
}
.brand-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.topbar .brand-icon{
  width:36px;
  height:36px;
  border-radius:12px;
}
.announcement-admin-mark.brand-mark,
.home-announcement-mark.brand-mark{
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:0;
  border:1px solid var(--brand-mark-border,var(--accent));
  border-radius:15px;
  background:var(--accent);
  box-shadow:0 3px 14px var(--brand-mark-shadow,var(--accent-outline-soft)), inset 0 0 0 1px #ffffff30;
}
.announcement-admin-mark.brand-mark img,
.home-announcement-mark.brand-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-announcement-mark.brand-mark{
  width:56px;
  height:56px;
}
.announcement-admin-mark.brand-mark{
  width:48px;
  height:48px;
  flex:none;
}
@media(max-width:720px){
  .topbar .brand-icon{width:34px;height:34px}
}


/* Use a true black canvas in dark mode while retaining contrast on cards and controls. */
html:not([data-theme="light"]){
  --bg:#000000;
}
html:not([data-theme="light"]) body,
html:not([data-theme="light"]) .main,
html:not([data-theme="light"]) .home-workspace,
html:not([data-theme="light"]) .messages{
  background-color:#000000;
}
html:not([data-theme="light"]) .auth-shell{
  background:radial-gradient(
    ellipse at top,
    color-mix(in srgb,var(--accent-strong) 18%,#000000),
    #000000 70%
  );
}


/* Compact the Gather home screen on phones without removing any actions. */
@media(max-width:720px){
  .home-workspace{
    gap:10px;
    padding:12px 11px 18px;
  }
  .workspace-header{
    gap:9px;
    padding-bottom:10px;
  }
  .workspace-header h1{
    margin-bottom:5px;
    font-size:calc(21px * var(--font-scale,1));
    letter-spacing:-.45px;
  }
  .workspace-subtitle{
    font-size:calc(10px * var(--font-scale,1));
    line-height:1.45;
  }
  .workspace-actions{
    gap:5px;
  }
  .workspace-actions button{
    min-height:35px;
    padding:7px 5px;
    font-size:calc(9px * var(--font-scale,1));
    line-height:1.2;
  }

  /* Keep the latest announcement as a compact preview rather than a tall card. */
  .home-announcement-card{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    align-items:center;
    gap:7px 9px;
    padding:9px;
    border-radius:13px;
  }
  .home-announcement-mark.brand-mark{
    grid-column:1;
    grid-row:1;
    width:40px;
    height:40px;
    border-radius:11px;
  }
  .home-announcement-copy{
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .home-announcement-copy .eyebrow{
    margin-bottom:3px;
    font-size:8px;
    letter-spacing:.8px;
  }
  .home-announcement-copy strong{
    font-size:calc(12px * var(--font-scale,1));
  }
  .home-announcement-copy p:not(.eyebrow){
    margin:3px 0;
    font-size:calc(10px * var(--font-scale,1));
    line-height:1.35;
    -webkit-line-clamp:1;
  }
  .home-announcement-copy small{
    font-size:8px;
  }
  .home-announcement-actions{
    grid-column:1 / -1;
    width:100%;
    padding:0;
    gap:6px;
  }
  .home-announcement-actions button{
    min-height:34px;
    padding:7px 9px;
    font-size:calc(9px * var(--font-scale,1));
  }

  .workspace-search-controls{
    margin:0;
  }
  .workspace-search{
    font-size:calc(9px * var(--font-scale,1));
  }
  .workspace-search .search{
    margin-top:4px;
    padding:9px 11px;
    font-size:16px;
  }
  .conversation-selection-toolbar{
    gap:6px;
    margin:4px 0 7px;
  }
  .conversation-select-toggle{
    min-height:35px;
    padding:7px 10px;
    font-size:calc(10px * var(--font-scale,1));
  }
}


/* More expressive fades: slow enough to notice, still quick enough to feel responsive. */
:root{
  --gather-motion-ease:cubic-bezier(.2,.72,.22,1);
  --gather-motion-fast:230ms;
  --gather-motion:460ms;
}

/* Make screen-to-screen changes visibly dissolve and settle into place. */
::view-transition-group(gather-main){
  animation-duration:480ms;
  animation-timing-function:var(--gather-motion-ease);
}
::view-transition-old(gather-main){
  animation:gather-main-out 390ms ease-in both;
}
::view-transition-new(gather-main){
  animation:gather-main-in 480ms var(--gather-motion-ease) both;
}
@keyframes gather-main-out{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-12px) scale(.99)}
}
@keyframes gather-main-in{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes gather-fallback-screen-in{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.main.gather-screen-enter{
  animation:gather-fallback-screen-in 460ms var(--gather-motion-ease) both;
}

/* The mobile/desktop workspace swap also gets a full fade instead of a quick flash. */
@keyframes gather-view-enter{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.layout.show-chat .main,.layout.show-home .main{
  animation:gather-view-enter 460ms var(--gather-motion-ease) both;
}

/* Give newly added messages and conversation rows a clearer entrance. */
@keyframes gather-list-item-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes gather-message-in{
  from{opacity:0;transform:translateY(13px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.gather-list-enter{animation:gather-list-item-in 350ms var(--gather-motion-ease) both}
.gather-message-enter{animation:gather-message-in 380ms var(--gather-motion-ease) both}

/* Clearer modal, popover, notification and drawer fades in both directions. */
.overlay{
  transition:
    opacity 460ms var(--gather-motion-ease),
    display 460ms allow-discrete;
  transition-behavior:allow-discrete;
}
.overlay>.modal{
  transition:
    opacity 460ms var(--gather-motion-ease),
    transform 460ms var(--gather-motion-ease);
}
.overlay[hidden]>.modal{
  opacity:0;
  transform:translateY(18px) scale(.975);
}
@starting-style{
  .overlay:not([hidden])>.modal{
    opacity:0;
    transform:translateY(18px) scale(.975);
  }
}
.message-action-menu,.composer-more-menu{
  transition:
    opacity 280ms var(--gather-motion-ease),
    transform 280ms var(--gather-motion-ease),
    display 280ms allow-discrete;
  transition-behavior:allow-discrete;
}
.message-action-menu[hidden],.composer-more-menu[hidden]{
  opacity:0;
  transform:translateY(12px) scale(.97);
}
@starting-style{
  .message-action-menu:not([hidden]),.composer-more-menu:not([hidden]){
    opacity:0;
    transform:translateY(12px) scale(.97);
  }
}
.message-notifications{
  transition:
    opacity 460ms var(--gather-motion-ease),
    transform 460ms var(--gather-motion-ease),
    display 460ms allow-discrete;
  transition-behavior:allow-discrete;
}
.message-notifications[hidden]{
  opacity:0;
  transform:translateY(-16px);
}
.message-notification{
  transition:
    opacity 460ms var(--gather-motion-ease),
    transform 460ms var(--gather-motion-ease),
    border-color 230ms ease,
    box-shadow 230ms ease;
}
.message-notification.is-dismissing{
  opacity:0;
  transform:translateX(22px) scale(.975);
  pointer-events:none;
}
@media(max-width:720px){
  .layout.show-chat.conversation-drawer-open .sidebar,
  .layout.show-chat:not(.conversation-drawer-open) .sidebar{
    transition:
      opacity 460ms var(--gather-motion-ease),
      transform 460ms var(--gather-motion-ease),
      display 460ms allow-discrete;
    transition-behavior:allow-discrete;
  }
  .layout.show-chat:not(.conversation-drawer-open) .sidebar{
    opacity:0;
    transform:translateX(-22px);
  }
  .conversation-drawer-backdrop{
    transition:
      opacity 460ms var(--gather-motion-ease),
      display 460ms allow-discrete;
    transition-behavior:allow-discrete;
  }
}

/* Toasts and notification-center entries should visibly appear and disappear. */
.toast{
  transition:
    opacity 420ms var(--gather-motion-ease),
    transform 420ms var(--gather-motion-ease),
    background-color 230ms ease;
}
@keyframes gather-notification-enter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
#notifications-list .notification-center-item:nth-child(-n+5){
  animation:gather-notification-enter 340ms var(--gather-motion-ease) both;
}

/* Respect the device's reduced-motion setting. */
@media(prefers-reduced-motion:reduce){
  :root{
    --gather-motion-fast:1ms;
    --gather-motion:1ms;
  }
  ::view-transition-group(gather-main),
  ::view-transition-old(gather-main),
  ::view-transition-new(gather-main){animation:none!important}
  .main.gather-screen-enter,
  .layout.show-chat .main,.layout.show-home .main,
  .gather-list-enter,.gather-message-enter,
  #notifications-list .notification-center-item{animation:none!important}
  .overlay,.overlay>.modal,
  .message-action-menu,.composer-more-menu,
  .message-notifications,.message-notification,.toast{
    transition:none!important;
  }
}


/* Keep iOS Safari's page/safe-area chrome aligned with the app's selected theme. */
html{background:var(--bg)}
html:not([data-theme="light"]){
  color-scheme:dark;
  background:#000000;
}
html:not([data-theme="light"]) body{
  background:#000000;
}
html:not([data-theme="light"]) .overlay{
  background:rgba(0,0,0,.84);
}
html[data-theme="light"]{
  color-scheme:light;
  background:#f3f5fa;
}

/* A pending private-chat check is informative, not a red error banner. */
.chat-notice.checking{
  border-color:var(--accent-outline-soft);
  color:var(--accent-text);
  background:var(--accent-surface);
}
.chat-notice.verification-error{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.chat-permission-retry{
  flex:none;
  min-height:29px;
  padding:5px 10px;
  border:1px solid var(--accent-outline);
  border-radius:8px;
  color:var(--accent-text);
  background:var(--accent-surface);
  font-size:inherit;
  font-weight:700;
}
.chat-permission-retry:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  .chat-permission-retry{transition:none}
}


/* Gather feature pack: compact archive, scheduling, events, shared media and history surfaces. */
.feature-modal{width:min(100%,560px);display:flex;flex-direction:column;gap:12px}
.feature-list{display:grid;gap:9px;max-height:56vh;overflow:auto}
.feature-list-item{display:grid;gap:7px;padding:11px;border:1px solid var(--accent-outline-soft);border-radius:11px;background:var(--accent-panel-raised)}
.feature-list-item p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.feature-list-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}
.feature-list-actions{display:flex;flex-wrap:wrap;gap:6px}
.feature-list-actions button{min-height:32px;width:auto;padding:6px 10px;font-size:calc(10px * var(--font-scale,1))}
.feature-list-item button{width:auto}
.search-filter-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.search-filter-grid label,.settings-select-label{display:grid;gap:5px;color:var(--text);font-size:calc(10px * var(--font-scale,1));font-weight:650}
.search-filter-grid input,.search-filter-grid select,.settings-select-label select{width:100%;min-width:0}
.shared-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:62vh;overflow:auto}
.shared-media-item{display:block;width:100%;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--accent-panel-raised);aspect-ratio:1}
.shared-media-item img{width:100%;height:100%;object-fit:cover}
.image-viewer-modal{width:min(96vw,1000px);max-height:92vh;padding:44px 12px 12px;display:grid;place-items:center}
.image-viewer-modal img{display:block;max-width:100%;max-height:80vh;object-fit:contain}
.message-link{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
#archived-panel .workspace-chat-list{margin-bottom:14px}
@media(max-width:520px){
  .search-filter-grid{grid-template-columns:1fr 1fr}
  .search-filter-grid label:first-child{grid-column:1/-1}
  .shared-media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .feature-modal{max-height:92vh;padding:20px}
}


/* Account session list. */
.session-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px;border:1px solid var(--accent-outline-soft);border-radius:11px;background:var(--accent-panel-raised)}
.session-row strong,.session-row small{display:block;overflow-wrap:anywhere}
.session-row small{margin-top:4px;color:var(--muted);font-size:calc(10px * var(--font-scale,1))}
.session-current{padding:4px 7px;border-radius:20px;color:var(--accent-text);background:var(--accent-surface);font-size:calc(9px * var(--font-scale,1));font-weight:750}

/* Make the Shared media back control an explicit, thumb-friendly tap target. */
#shared-media-back{
  z-index:2;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  font-size:24px;
  line-height:1;
  pointer-events:auto;
  touch-action:manipulation;
  cursor:pointer;
}
#shared-media-back:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* The image viewer back control returns to the surface that opened the image. */
#image-viewer-back{
  z-index:3;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  font-size:24px;
  line-height:1;
  touch-action:manipulation;
  cursor:pointer;
}
#image-viewer-back:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}


/* Scroll and spacing fixes for the home inbox and modal panels. */
#home-browse-content{
  display:flex;
  flex-direction:column;
  gap:13px;
  min-width:0;
}
#home-browse-content[hidden]{display:none!important}
#home-browse-content>.conversation-selection-toolbar,
#home-browse-content>.workspace-tabs{
  margin:0;
}
#home-browse-content>.workspace-tabs{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
#home-browse-content>.pinned-chat-section{
  margin:0;
}
#home-browse-content>.workspace-group-section,
#home-browse-content>.workspace-folder{
  flex:0 0 auto;
  min-width:0;
  margin:0;
}
.home-workspace{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

/* Give long modal content and nested panel lists a reliable scroll container. */
.overlay{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.overlay>.modal{
  min-height:0;
  max-height:calc(100dvh - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.feedback-modal{
  min-height:0;
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
}
.feedback-layout{
  min-height:0;
}
.feedback-sidebar,
.feedback-content{
  min-height:0;
}
.feedback-thread-list{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.feedback-compose{
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.feedback-detail{
  min-height:0;
}
.feedback-message-list{
  min-height:0;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

/* On phones, keep all five folders on one horizontally scrollable strip. */
@media(max-width:720px){
  .home-workspace{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  #home-browse-content{
    gap:11px;
  }
  #home-browse-content>.workspace-tabs{
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    max-width:100%;
    min-width:0;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    padding:4px;
  }
  #home-browse-content>.workspace-tabs::-webkit-scrollbar{
    display:none;
  }
  #home-browse-content>.workspace-tabs>.folder-tab{
    flex:0 0 auto;
    width:auto;
    min-width:84px;
    white-space:nowrap;
    overflow-wrap:normal;
    scroll-snap-align:start;
    padding:8px 11px;
    min-height:38px;
    font-size:calc(9px * var(--font-scale,1));
  }
  #home-browse-content>.workspace-tabs>[data-folder="nonfriends"]{
    min-width:98px;
  }
  #home-browse-content>.workspace-tabs>[data-folder="deleted"]{
    min-width:116px;
  }
  #home-browse-content>.workspace-tabs>[data-folder="archived"]{
    min-width:88px;
  }
  .feedback-modal{
    height:auto;
    min-height:min(520px,calc(100dvh - 24px));
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
    padding:20px 14px;
  }
  .feedback-layout{
    min-height:300px;
  }
  .feedback-content{
    min-height:0;
  }
  .feedback-compose{
    padding-bottom:4px;
  }
}

/* When the browser viewport is short (including with the iOS keyboard open),
   the overlay can scroll instead of trapping the lower part of a panel. */
@media(max-height:620px){
  .overlay{
    place-items:start center;
    padding-top:8px;
    padding-bottom:8px;
  }
  .overlay>.modal{
    margin-block:auto;
    max-height:calc(100dvh - 16px);
  }
  .feedback-modal{
    height:auto;
    min-height:0;
  }
}


/* A more expressive sidebar, tinted by each member's chosen accent. */
.sidebar{
  background:
    radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 58%),
    linear-gradient(165deg,color-mix(in srgb,var(--accent) 9%,#171923),#11131b 72%);
  border-right-color:color-mix(in srgb,var(--accent) 28%,var(--line));
}
.side-title h2{color:var(--accent-text)}
.sidebar .search{
  border-color:color-mix(in srgb,var(--accent) 26%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,#171923);
}
.sidebar .list-label,.in-chat-list-heading{
  color:color-mix(in srgb,var(--accent) 62%,var(--muted));
}
.chat-item{
  transition:background 180ms ease,border-color 180ms ease,transform 180ms ease;
}
.chat-item:hover{
  border-color:var(--accent-outline-soft);
  background:color-mix(in srgb,var(--accent) 12%,#191b25);
}
.chat-item.active{
  border-color:var(--accent-outline);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 24%,#191b25),color-mix(in srgb,var(--accent) 9%,#191b25));
  box-shadow:inset 3px 0 0 var(--accent);
}
.folder-tabs{
  padding:4px;
  border:1px solid var(--accent-outline-soft);
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 7%,#151720);
}
.folder-tab{color:color-mix(in srgb,var(--accent) 38%,#c0bfd0)}
.folder-tab:hover{background:var(--accent-hover);color:var(--accent-text)}
.folder-tab.active{
  color:var(--accent-contrast,var(--accent-text));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,#252333),color-mix(in srgb,var(--accent-strong) 25%,#252333));
  box-shadow:inset 0 0 0 1px var(--accent-outline);
}
.in-chat-sidebar-scroll .chat-item{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.in-chat-sidebar-scroll .chat-item:hover{background:color-mix(in srgb,var(--accent) 13%,#191b25)}
.privacy{
  border-color:var(--accent-outline-soft);
  color:color-mix(in srgb,var(--accent) 34%,var(--muted));
  background:color-mix(in srgb,var(--accent) 9%,#191b25);
}
html[data-theme="light"] .sidebar{
  background:
    radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 58%),
    linear-gradient(165deg,color-mix(in srgb,var(--accent) 7%,#fff),#f0f2f8 82%);
  border-right-color:var(--accent-outline-soft);
}
html[data-theme="light"] .chat-item:hover{background:color-mix(in srgb,var(--accent) 12%,#fff)}
html[data-theme="light"] .chat-item.active{
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 18%,#fff),color-mix(in srgb,var(--accent) 7%,#fff));
}
html[data-theme="light"] .folder-tabs{background:color-mix(in srgb,var(--accent) 6%,#fff)}
html[data-theme="light"] .folder-tab{color:color-mix(in srgb,var(--accent-strong) 50%,#55596b)}
html[data-theme="light"] .folder-tab.active{
  color:color-mix(in srgb,var(--accent-strong) 80%,#202235);
  background:color-mix(in srgb,var(--accent) 19%,#fff);
}
html[data-theme="light"] .privacy{background:color-mix(in srgb,var(--accent) 8%,#fff)}


/* iPhone Safari viewport and safe-area corrections. Dynamic viewport units keep
   the app fitted between Safari's changing browser chrome and the home indicator. */
html,body{width:100%;max-width:100%;overflow-x:clip}
body{min-height:100svh;min-height:100dvh}
#app{width:100%;min-width:0;max-width:100%;overflow-x:clip}
.topbar{
  background:linear-gradient(105deg,var(--accent-topbar,var(--accent-panel)) 0%,var(--accent-panel) 78%);
  border-bottom-color:var(--accent-outline-soft);
}
@media(max-width:720px){
  .topbar{
    height:calc(60px + env(safe-area-inset-top,0px));
    min-height:calc(60px + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
  }
  .layout{
    height:calc(100dvh - 60px - env(safe-area-inset-top,0px));
    min-height:0;
    width:100%;
    overflow:hidden;
  }
  .layout.show-chat,.layout.show-home{min-height:0}
  .sidebar,.main{min-width:0;min-height:0}
  .home-workspace{
    min-width:0;
    max-width:100%;
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
  }
  .chat{min-height:0;height:100%}
  .messages{min-width:0;overscroll-behavior:contain}
  .composer{
    margin-bottom:calc(9px + env(safe-area-inset-bottom,0px));
    max-width:calc(100% - 18px);
  }
  .topbar-actions{flex:none}
}
@media(max-width:430px){
  .topbar{padding-left:7px;padding-right:7px;column-gap:4px}
  .topbar-left{gap:5px}
  .topbar-actions{gap:3px}
  #notifications-open,#admin-mode-open{
    width:34px;height:34px;min-width:34px;
    justify-content:center;gap:0;padding:0;
  }
  #notifications-open .home-glyph,#admin-mode-open .home-glyph{font-size:18px}
  #notifications-open span:not(.home-glyph):not(#notification-badge),
  #admin-mode-open span:not(.home-glyph){display:none}
  .profile-pill{max-width:42px;gap:0;padding:4px}
  .profile-pill #user-name,.profile-pill>span:last-child{display:none}
  .profile-pill .avatar{width:27px;height:27px}
}
@media(max-width:360px){
  .topbar .brand{font-size:14px}
  .topbar .brand-icon{width:26px;height:26px}
  .topbar-left{gap:4px}
  #home-open,#settings-open,#notifications-open,#admin-mode-open{
    width:32px;height:32px;min-width:32px;
  }
}


/* Deleted messages open in a dedicated conversation-style recovery screen. */
.deleted-conversation-picker{display:grid;gap:10px;min-width:0}
.deleted-conversation-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;min-width:0;padding:14px 15px;border:1px solid var(--accent-outline-soft);border-radius:13px;color:var(--text);background:var(--accent-panel-raised);text-align:left;transition:background-color var(--gather-motion-fast) ease,border-color var(--gather-motion-fast) ease,transform var(--gather-motion-fast) ease}
.deleted-conversation-card:hover{border-color:var(--accent-outline);background:var(--accent-surface)}
.deleted-conversation-card:active{transform:scale(.99)}
.deleted-conversation-card-copy{display:grid;gap:5px;min-width:0}
.deleted-conversation-card-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--font-scale,1))}
.deleted-conversation-card-copy small{overflow:hidden;color:var(--muted);font-size:calc(10px * var(--font-scale,1));text-overflow:ellipsis;white-space:nowrap}
.deleted-conversation-card-count{min-width:27px;padding:4px 8px;border-radius:999px;color:var(--accent-text);background:var(--accent-badge);text-align:center;font-size:calc(10px * var(--font-scale,1));font-weight:800}
.deleted-conversation-card-arrow{color:var(--accent-text);font-size:25px;line-height:1}
.deleted-chat-screen{display:flex;flex-direction:column;gap:13px;min-width:0;min-height:0;width:100%}
.deleted-chat-toolbar{display:flex;align-items:center;gap:12px;min-width:0;padding:0 0 12px;border-bottom:1px solid var(--line)}
.deleted-chat-back{flex:none;white-space:nowrap}
.deleted-chat-heading{display:grid;gap:3px;min-width:0}
.deleted-chat-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(13px * var(--font-scale,1))}
.deleted-chat-heading small{font-size:calc(10px * var(--font-scale,1))}
.deleted-chat-message-list{display:flex;flex-direction:column;align-items:stretch;gap:11px;min-width:0;padding:4px 1px 14px}
.deleted-message-bubble{display:flex;align-items:flex-start;gap:10px;align-self:flex-start;width:max-content;max-width:min(88%,720px);min-width:min(230px,100%);padding:11px 13px;border:1px solid var(--accent-outline-soft);border-radius:15px 15px 15px 5px;color:var(--text);background:var(--accent-panel-raised);text-align:left;cursor:pointer;transition:background-color var(--gather-motion-fast) ease,border-color var(--gather-motion-fast) ease,transform var(--gather-motion-fast) ease}
.deleted-message-bubble.mine{align-self:flex-end;flex-direction:row-reverse;border-radius:15px 15px 5px 15px;background:var(--accent-soft)}
.deleted-message-bubble:hover{border-color:var(--accent-outline);background:var(--accent-surface)}
.deleted-message-bubble:active{transform:scale(.99)}
.deleted-message-bubble:disabled{opacity:.7;cursor:wait}
.deleted-message-bubble>.avatar{width:34px;height:34px;flex:none}
.deleted-message-copy{display:grid;gap:6px;min-width:0}
.deleted-message-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.deleted-message-meta strong{font-size:calc(10px * var(--font-scale,1))}
.deleted-message-meta small{color:var(--muted);font-size:calc(9px * var(--font-scale,1))}
.deleted-message-body{overflow-wrap:anywhere;white-space:pre-wrap;color:var(--text);font-size:calc(12px * var(--font-scale,1));line-height:1.55}
.deleted-message-hint{color:var(--accent-text);font-size:calc(9px * var(--font-scale,1));font-weight:750}
.deleted-message-bubble:focus-visible,.deleted-conversation-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:520px){.deleted-conversation-card{padding:12px;gap:8px}.deleted-chat-toolbar{align-items:flex-start;flex-direction:column;gap:8px}.deleted-chat-message-list{gap:9px}.deleted-message-bubble{max-width:96%;min-width:min(210px,100%);padding:10px;gap:8px}.deleted-message-bubble>.avatar{width:30px;height:30px}}


/* Give the selected inbox folder a clear inset from the outer tab rail. */
.folder-tabs{
  box-sizing:border-box;
  padding:8px 10px;
  gap:8px;
  overflow:hidden;
}
.folder-tabs>.folder-tab{
  min-width:0;
  min-height:38px;
  border-radius:10px;
}
@media(max-width:720px){
  .folder-tabs{padding:7px 9px;gap:6px}
  .folder-tabs>.folder-tab{min-height:38px;padding:6px 4px}
}


/* Conversation entry: one stable paint instead of stacked view and layout animations. */
@media (prefers-reduced-motion: no-preference){
  .layout.show-chat .main{animation:none!important}
  .main{view-transition-name:none}
}


/* Light mode gradient system: mirror dark mode's layered accent treatment
   while keeping surfaces bright and text contrast comfortable. */
html[data-theme="light"]{
  --accent-deep:color-mix(in srgb,var(--accent) 5%,#f0f2f8);
  --accent-panel:color-mix(in srgb,var(--accent) 3%,#ffffff);
  --accent-panel-raised:color-mix(in srgb,var(--accent) 6%,#ffffff);
  --accent-input:color-mix(in srgb,var(--accent) 3%,#ffffff);
  --accent-chat:color-mix(in srgb,var(--accent) 7%,#f4f5fa);
  --accent-chat-border:color-mix(in srgb,var(--accent) 19%,#dfe2eb);
  --accent-muted:#74798d;
  --accent-contrast:color-mix(in srgb,var(--accent-strong) 76%,#25283a);
}
html[data-theme="light"] body{
  background:
    radial-gradient(ellipse at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 42%),
    linear-gradient(145deg,#f8f9fd 0%,var(--accent-deep) 58%,#f4f5fa 100%);
}
html[data-theme="light"] .auth-shell{
  background:
    radial-gradient(ellipse at 12% 8%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 48%),
    radial-gradient(ellipse at 92% 88%,color-mix(in srgb,var(--accent-strong) 12%,transparent),transparent 42%),
    linear-gradient(145deg,#fbfcff,#eff1f8 78%);
}
html[data-theme="light"] .auth-card,
html[data-theme="light"] .modal{
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,#fff),#fff 58%,color-mix(in srgb,var(--accent-strong) 4%,#f8f9fd));
  border-color:var(--accent-outline-soft);
  box-shadow:0 16px 48px color-mix(in srgb,var(--accent-strong) 9%,transparent);
}
html[data-theme="light"] .topbar{
  background:
    radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 52%),
    linear-gradient(105deg,color-mix(in srgb,var(--accent) 11%,#fff) 0%,#fff 54%,color-mix(in srgb,var(--accent-strong) 7%,#fff) 100%);
  border-bottom-color:var(--accent-outline-soft);
}
html[data-theme="light"] .sidebar{
  background:
    radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--accent) 19%,transparent),transparent 56%),
    radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--accent-strong) 8%,transparent),transparent 48%),
    linear-gradient(165deg,color-mix(in srgb,var(--accent) 8%,#fff),#f4f5fa 70%,color-mix(in srgb,var(--accent-strong) 5%,#fff));
  border-right-color:var(--accent-outline-soft);
}
html[data-theme="light"] .main,
html[data-theme="light"] .home-workspace,
html[data-theme="light"] .messages{
  background:
    radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 46%),
    linear-gradient(145deg,#fafbfe 0%,color-mix(in srgb,var(--accent) 4%,#f4f5fa) 58%,#f7f8fc 100%);
}
html[data-theme="light"] .chat-head{
  background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 9%,#fff),#fff 72%,color-mix(in srgb,var(--accent-strong) 5%,#fff));
  border-bottom-color:var(--accent-outline-soft);
}
html[data-theme="light"] .composer{
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 7%,#fff),#fff 72%);
  border-color:var(--accent-outline-soft);
  box-shadow:0 7px 24px color-mix(in srgb,var(--accent-strong) 7%,transparent);
}
html[data-theme="light"] .composer textarea,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent) 3%,#fff));
  border-color:var(--accent-chat-border);
}
html[data-theme="light"] .chat-item.active{
  background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 20%,#fff),color-mix(in srgb,var(--accent-strong) 9%,#fff));
  box-shadow:inset 3px 0 0 var(--accent),0 3px 12px color-mix(in srgb,var(--accent-strong) 7%,transparent);
}
html[data-theme="light"] .chat-item:hover,
html[data-theme="light"] .in-chat-sidebar-scroll .chat-item:hover{
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,#fff),#fff);
}
html[data-theme="light"] .folder-tabs{
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 8%,#fff),#f7f8fc);
  border-color:var(--accent-outline-soft);
}
html[data-theme="light"] .folder-tab.active,
html[data-theme="light"] .tab.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 21%,#fff),color-mix(in srgb,var(--accent-strong) 11%,#fff));
  border-color:var(--accent-outline);
  box-shadow:inset 0 0 0 1px var(--accent-outline-soft);
}
html[data-theme="light"] .bubble{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,#fff),color-mix(in srgb,var(--accent-strong) 4%,#f5f6fb));
  border-color:var(--accent-chat-border);
}
html[data-theme="light"] .mine .bubble{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 19%,#fff),color-mix(in srgb,var(--accent-strong) 12%,#f5f4fc));
  border-color:var(--accent-outline-soft);
}
html[data-theme="light"] .workspace-folder,
html[data-theme="light"] .workspace-group-section,
html[data-theme="light"] .feedback-sidebar,
html[data-theme="light"] .feedback-content,
html[data-theme="light"] .feedback-message,
html[data-theme="light"] .admin-report-card,
html[data-theme="light"] .notification-center-item,
html[data-theme="light"] .feedback-thread-card,
html[data-theme="light"] .request-item,
html[data-theme="light"] .person,
html[data-theme="light"] .deleted-conversation-card,
html[data-theme="light"] .feature-list-item{
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 5%,#fff),#fff 72%);
  border-color:var(--accent-outline-soft);
}
html[data-theme="light"] .privacy,
html[data-theme="light"] .profile-pill,
html[data-theme="light"] .outline,
html[data-theme="light"] .back,
html[data-theme="light"] .secondary-action,
html[data-theme="light"] .group-action,
html[data-theme="light"] .close{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,#fff),#f5f6fa);
  border-color:var(--accent-outline-soft);
}
html[data-theme="light"] .primary,
html[data-theme="light"] .direct-action,
html[data-theme="light"] .request-accept{
  background:linear-gradient(125deg,var(--accent),var(--accent-strong));
}
html[data-theme="light"] .empty-mark,
html[data-theme="light"] .brand-icon{
  background:linear-gradient(145deg,var(--accent-gradient-light),var(--accent),var(--accent-strong));
}
html[data-theme="light"] .side-title h2,
html[data-theme="light"] .meta strong,
html[data-theme="light"] .deleted-message-meta strong{
  color:var(--accent-contrast);
}
html[data-theme="light"] .privacy{color:color-mix(in srgb,var(--accent-strong) 55%,#55596b)}


/* Keep the Friends shortcut text inset from the button's left edge. */
#friends-open.requests-button{
  box-sizing:border-box;
  padding-inline-start:18px!important;
  padding-inline-end:12px!important;
  text-indent:0;
}


/* Give neutral controls clearer contrast against white surfaces in light mode. */
html[data-theme="light"] .outline,
html[data-theme="light"] .secondary-action,
html[data-theme="light"] .requests-button,
html[data-theme="light"] .back,
html[data-theme="light"] .close,
html[data-theme="light"] .group-action,
html[data-theme="light"] .chat-action,
html[data-theme="light"] .home-button,
html[data-theme="light"] .folder-tab:not(.active),
html[data-theme="light"] .tab:not(.active),
html[data-theme="light"] .home-search-tab:not(.active),
html[data-theme="light"] .workspace-tabs button:not(.active){
  background:linear-gradient(180deg,#edf0f6 0%,#e5e9f1 100%);
  border-color:#cbd2df;
  color:#303648;
  box-shadow:0 1px 2px rgba(34,43,62,.07);
}
html[data-theme="light"] .outline:hover,
html[data-theme="light"] .secondary-action:hover,
html[data-theme="light"] .requests-button:hover,
html[data-theme="light"] .back:hover,
html[data-theme="light"] .close:hover,
html[data-theme="light"] .group-action:hover,
html[data-theme="light"] .chat-action:hover,
html[data-theme="light"] .home-button:hover,
html[data-theme="light"] .folder-tab:not(.active):hover,
html[data-theme="light"] .tab:not(.active):hover,
html[data-theme="light"] .home-search-tab:not(.active):hover,
html[data-theme="light"] .workspace-tabs button:not(.active):hover{
  background:linear-gradient(180deg,#e4e9f1 0%,#dce2ec 100%);
  border-color:#b8c2d2;
}

/* Progressive web app installation and connection status. */
.install-auth-button{width:100%;margin-top:11px;padding:11px 13px}
.install-modal{width:min(100%,520px)}
.install-instructions{display:grid;gap:8px;margin-top:16px}
.install-step{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border:1px solid var(--accent-outline-soft);border-radius:11px;background:var(--accent-panel-raised)}
.install-step-number{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:8px;color:var(--accent-ink);background:var(--accent);font-size:11px;font-weight:800}
.install-step p{margin:2px 0 0;color:var(--text);font-size:calc(11px * var(--font-scale,1));line-height:1.55}
.offline-status{position:fixed;z-index:9;top:74px;left:50%;width:min(560px,calc(100vw - 24px));padding:11px 14px;transform:translateX(-50%);border:1px solid #d6a34a66;border-radius:12px;color:#f3ddb5;background:#302719;box-shadow:0 10px 32px #0005;font-size:calc(11px * var(--font-scale,1));line-height:1.5;text-align:center}
html[data-theme="light"] .install-step{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,#fff),#f4f5f8);border-color:var(--accent-outline-soft)}
html[data-theme="light"] .install-step p{color:#303344}
html[data-theme="light"] .offline-status{color:#59421d;background:#fff4d8;border-color:#d8b66c}
@media(max-width:430px){
  #install-app-button{width:34px;height:34px;min-width:34px;justify-content:center;gap:0;padding:0}
  #install-app-button>span:not(.home-glyph){display:none}
  #install-app-button .home-glyph{font-size:19px}
  .offline-status{top:66px}
}