:root{--buzz-accent:#F2A900;--buzz-dark-bg:#0E1116;--buzz-dark-surface:#171B21;--buzz-dark-elevated:#20262E}
*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif}body{background:#eef1f4;color:#15191e}button,input,textarea{font:inherit}
.app-root{min-height:100vh;background:#fff;color:#15191e;padding-bottom:76px}.app-root.dark{background:var(--buzz-dark-bg);color:#f3f5f7}.app-root.dark .content,.app-root.dark .theme-page,.app-root.dark .timeline{background:var(--buzz-dark-bg)}.app-root.dark .chat,.app-root.dark .settings-card,.app-root.dark .search,.app-root.dark .profile-card{background:var(--buzz-dark-surface);border-color:var(--buzz-dark-elevated)}.app-root.dark input,.app-root.dark textarea{color:#fff}
@media(prefers-color-scheme:dark){.app-root.system{background:var(--buzz-dark-bg);color:#f3f5f7}.app-root.system .content,.app-root.system .theme-page,.app-root.system .timeline{background:var(--buzz-dark-bg)}.app-root.system .chat,.app-root.system .settings-card,.app-root.system .search,.app-root.system .profile-card{background:var(--buzz-dark-surface);border-color:var(--buzz-dark-elevated)}.app-root.system input,.app-root.system textarea{color:#fff}}
.topbar{height:74px;background:#0f1318;color:#fff;display:flex;align-items:center;gap:12px;padding:8px 18px;position:sticky;top:0;z-index:20}.brand-bee{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:12px;padding:2px}.brand-copy{display:flex;flex:1;flex-direction:column}.brand-copy strong{font-size:1.3rem}.brand-copy strong span,.login-page h1 span{color:var(--buzz-accent)}.brand-copy small{font-size:.6rem;letter-spacing:.14em;color:#b8c0ca}.icon-button{border:0;background:transparent;color:inherit;font-size:1.45rem}.icon-button.dark{color:#15191e}
.content,.theme-page{max-width:760px;margin:auto;padding:20px;background:#fff;min-height:calc(100vh - 150px)}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.page-head h1{margin:0;font-size:2rem}.page-head p{margin:4px 0 0;color:#7b838d}.hex-button,.center-hex{clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%)}.hex-button{width:54px;height:54px;border:0;background:var(--buzz-accent);font-size:1.8rem;font-weight:800}
.search{display:flex;gap:8px;align-items:center;background:#f0f2f4;border:1px solid #e4e7ea;border-radius:14px;padding:11px 14px;margin:20px 0}.search input{border:0;outline:0;background:transparent;width:100%}.chat{display:flex;align-items:center;gap:14px;padding:14px 8px;border-bottom:1px solid #ebedf0;cursor:pointer}.avatar{width:54px;height:54px;display:grid;place-items:center;background:#15191e;color:var(--buzz-accent);font-weight:800;clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%)}.avatar.small{width:42px;height:42px}.avatar.profile{width:96px;height:96px;font-size:2rem}.chat-main{display:flex;flex:1;flex-direction:column;gap:5px}.chat-main span{color:#818892}.chat-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.chat-meta time{font-size:.78rem;color:#858c95}.chat-meta b{background:var(--buzz-accent);min-width:24px;height:24px;border-radius:12px;display:grid;place-items:center;color:#111}
.bottom-nav{height:72px;position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background:#0f1318;z-index:30}.bottom-nav button{background:transparent;border:0;color:#aab0b8;display:flex;flex-direction:column;align-items:center;gap:4px}.bottom-nav button span{font-size:.7rem}.bottom-nav .active{color:var(--buzz-accent)}.center-hex{background:var(--buzz-accent)!important;color:#111!important;width:52px;height:52px;justify-content:center}
.login-page{max-width:420px;margin:auto;min-height:100vh;padding:34px 24px;text-align:center;background:#fff;color:#15191e}.login-page h1{font-size:2.25rem;margin:0;color:#15191e}.login-page p{color:#5f6873}.login-page input{width:100%;padding:14px;border:1px solid #d0d6dc;border-radius:13px;margin:7px 0;background:#fff;color:#111;caret-color:#111}.login-page input::placeholder{color:#68727d}.password-field{position:relative;display:block}.password-field input{padding-right:58px}.password-field button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:#252a31;color:#fff}.eye-icon{position:relative;width:20px;height:13px;border:2px solid currentColor;border-radius:70% 20%;transform:rotate(45deg)}.eye-icon::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}.eye-icon.visible::before{content:"";position:absolute;left:-3px;top:5px;width:26px;height:2px;background:currentColor;transform:rotate(-90deg);transform-origin:center}.primary,.secondary{width:100%;padding:14px;border-radius:13px;border:0;font-weight:800;margin-top:8px}.primary{background:var(--buzz-accent);color:#111}.secondary{background:#252a31;color:#fff}.split{display:flex;align-items:center;gap:10px;color:#9ca2aa;margin:16px 0}.split span{height:1px;background:#e0e3e6;flex:1}.error{color:#b51d1d;margin-top:12px}
.link-button{border:0;background:transparent;color:#252a31;font-weight:800;margin-top:12px;text-decoration:underline;text-underline-offset:3px}
.chat-page{min-height:100vh;background:#f4f1eb;padding-bottom:70px}.chat-header{height:68px;background:#0f1318;color:#fff;display:flex;align-items:center;gap:10px;padding:8px 12px;position:sticky;top:0;z-index:20}.chat-title{display:flex;flex:1;flex-direction:column}.chat-title span{font-size:.72rem;color:#b8c0ca}.timeline{max-width:760px;margin:auto;padding:18px;min-height:calc(100vh - 138px);background:#f4f1eb}.bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;margin:8px 0}.bubble-wrap.mine{align-items:flex-end}.bubble{max-width:78%;padding:10px 12px;border-radius:16px 16px 16px 5px;background:#fff;box-shadow:0 2px 6px #00000010}.mine .bubble{background:var(--buzz-accent);color:#111;border-radius:16px 16px 5px 16px}.bubble small{display:block;text-align:right;font-size:.65rem;opacity:.65;margin-top:4px}.quick-react{display:flex;gap:4px;margin-top:3px}.quick-react button{border:0;background:#fff;border-radius:18px;padding:5px 8px}.composer{height:70px;position:fixed;left:0;right:0;bottom:0;background:#0f1318;display:flex;align-items:center;gap:8px;padding:9px 12px;z-index:25}.composer button{border:0;background:transparent;color:#fff;font-size:1.35rem}.composer textarea{flex:1;resize:none;height:44px;border:0;border-radius:18px;padding:11px 14px;outline:0}.composer .send{color:var(--buzz-accent)}
.settings-card,.profile-card{background:#fff;border:1px solid #e7e9ec;border-radius:18px;padding:18px;margin:18px 0}.profile-card{text-align:center}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mode{border:1px solid #d9dde2;background:transparent;border-radius:14px;padding:16px 8px;display:flex;flex-direction:column;gap:7px;align-items:center;color:inherit}.mode.active{border-color:var(--buzz-accent);box-shadow:0 0 0 2px var(--buzz-accent)}.settings-card label{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eceef1}.settings-card input[type=color]{width:52px;height:34px;border:0;background:transparent}.theme-preview{margin:18px 0;border-radius:18px;padding:16px;background:var(--p-bg);color:#fff}.preview-top{background:var(--p-surface);padding:12px;border-radius:12px;margin-bottom:14px;font-weight:800}.preview-top span{color:var(--p-accent)}.preview-bubble{max-width:78%;padding:10px 12px;border-radius:14px;margin:8px 0;background:var(--p-up)}.preview-bubble.right{margin-left:auto;background:var(--p-accent);color:#111}

.attachment-sheet{position:fixed;left:12px;right:12px;bottom:76px;z-index:40;max-width:620px;margin:auto;background:#171b21;color:#fff;border-radius:20px;padding:12px;box-shadow:0 15px 45px #0008;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.attachment-sheet button{border:0;border-radius:14px;padding:16px;background:#252b33;color:#fff}
.media-card{border:0;border-radius:13px;padding:14px;background:#222831;color:#fff;min-width:180px}
.media-card.image,.media-card.video{background:#1d252c}
.media-card.voice{background:#242a31}
.media-preview{position:relative;display:block;width:min(280px,64vw);max-width:100%;padding:0;border:0;border-radius:10px;overflow:hidden;background:#151a20;color:#fff;box-shadow:0 1px 2px #00000026}
button.media-preview{cursor:pointer}
.media-preview img,.media-preview video{display:block;width:100%;max-height:320px;object-fit:cover;background:#101418}
.media-preview.image-preview img{aspect-ratio:4/3}
.media-preview.video-preview video{aspect-ratio:16/9}
.play-badge{position:absolute;left:50%;top:50%;width:48px;height:48px;display:grid!important;place-items:center;transform:translate(-50%,-50%);border-radius:24px;background:#0009;color:#fff;font-size:1.15rem;box-shadow:0 3px 14px #0008}
.media-open{position:absolute;right:8px;top:8px;border:0;border-radius:12px;padding:7px 10px;background:#0009;color:#fff;font-size:.78rem;font-weight:800}
.media-preview-wrap{position:relative;width:max-content;max-width:100%}
.media-download{position:absolute;right:8px;bottom:8px;z-index:3;border:0;border-radius:12px;padding:7px 10px;background:#0009;color:#fff;font-size:.78rem;font-weight:800}
.media-download:disabled,.file-card .secondary:disabled{opacity:.45;cursor:default}
.media-viewer-download{position:absolute;right:22px;bottom:22px;z-index:4;border:0;border-radius:12px;padding:10px 13px;background:#f2a900;color:#111820;font-weight:900}
.file-list{display:grid;gap:8px;min-width:min(320px,70vw)}
.file-card{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #303943;border-radius:10px;background:#202832;color:#f7f9fb}
.file-card strong,.file-card small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card small{color:#aeb8c2}
.file-card .secondary{width:auto;margin:0;padding:8px 10px;border-radius:8px}
.chat-drop-hint{position:fixed;inset:84px 18px 86px;z-index:90;display:grid;place-items:center;border:2px dashed var(--buzz-accent);border-radius:14px;background:#111820cc;color:#fff;font-weight:900;font-size:1.25rem;pointer-events:none;backdrop-filter:blur(4px)}
.chat-page.drag-hover .timeline{filter:brightness(.86)}
.voice-player{min-width:240px;max-width:100%}
.voice-player audio{display:block;width:100%;height:36px}
.media-card:disabled{opacity:.68;cursor:default}
.chat-link{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;font-weight:700;overflow-wrap:anywhere}.mine .chat-link{color:#111820}
.media-unavailable{display:grid;place-items:center;gap:5px;min-height:118px;padding:14px;color:#d5dde7;text-align:center;font-weight:650}.media-unavailable small{max-width:210px;color:#aab5c2;font-weight:400;line-height:1.25}
.record.recording{background:#ff5252!important;color:#fff!important;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
.call-overlay{position:fixed;inset:0;z-index:100;background:#0b0e12;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.call-duration{position:absolute;top:18px;left:50%;z-index:20;transform:translateX(-50%);min-width:74px;padding:7px 12px;border:1px solid #ffffff33;border-radius:999px;background:#05070bcc;color:#fff;text-align:center;font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:850;letter-spacing:.04em;backdrop-filter:blur(8px)}
.call-overlay.meet-chat-docked{--meet-chat-width:min(420px,32vw)}
.incoming-call-overlay{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;padding:18px;background:#05070bcc;backdrop-filter:blur(8px)}
.incoming-call-card{width:min(380px,100%);display:grid;gap:12px;padding:20px;border:1px solid #303943;border-radius:16px;background:#111820;color:#f7f9fb;text-align:center;box-shadow:0 24px 80px #000c}
.incoming-call-card span{color:var(--buzz-accent);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.incoming-call-card strong{font-size:1.45rem}
.incoming-call-card p{margin:0;color:#aeb8c2}
.incoming-call-card div{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.news-alert{position:fixed;left:84px;right:18px;top:14px;z-index:120;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid #2f3943;border-radius:8px;background:#111820;color:#f7f9fb;box-shadow:0 18px 48px #0006}
.news-alert div{min-width:0}.news-alert span,.news-priority{display:block;color:var(--buzz-accent);font-size:.75rem;font-weight:900;text-transform:uppercase}.news-alert strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.news-alert p{margin:4px 0 0;color:#c8d0d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.news-alert.critical{border-color:#d74242}.news-alert.critical span{color:#ff6a6a}.news-alert .primary{width:auto;min-width:112px;margin:0;padding:11px 14px}
.update-alert{position:fixed;left:84px;right:18px;top:102px;z-index:119;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid #3b4752;border-radius:8px;background:#202832;color:#f7f9fb;box-shadow:0 18px 48px #0005}.update-alert.required,.update-alert.blocked{border-color:#d74242}.update-alert div{min-width:0}.update-alert span{display:block;color:var(--buzz-accent);font-size:.75rem;font-weight:900;text-transform:uppercase}.update-alert.required span,.update-alert.blocked span{color:#ff6a6a}.update-alert strong,.update-alert p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.update-alert p{margin:4px 0 0;color:#c8d0d8}.update-alert .primary{display:inline-grid;place-items:center;width:auto;min-width:112px;margin:0;padding:11px 14px;text-decoration:none}
.news-page{display:grid;gap:18px}.news-layout{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:16px;min-height:0}.news-list{display:grid;align-content:start;gap:10px}.news-list-item{display:grid;gap:5px;width:100%;min-height:92px;padding:13px 14px;border:1px solid #d9dee4;border-radius:8px;background:#fff;color:#111820;text-align:left}.news-list-item.active,.news-list-item:hover{border-color:var(--buzz-accent);box-shadow:0 8px 24px #1118201a}.news-list-item.requires-ack{border-left:4px solid #d74242}.news-list-item span{color:#6d7782;font-size:.75rem;font-weight:900;text-transform:uppercase}.news-list-item strong,.news-list-item small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.news-list-item small{color:#66717d}.news-detail{display:grid;align-content:start;gap:12px;min-height:320px}.news-detail h2{margin:0;font-size:1.55rem}.news-summary{margin:0;color:#5f6873}.news-content{white-space:pre-wrap;line-height:1.55;color:#1a2027}.news-acknowledged{font-weight:800;color:#277a42}.news-empty{display:grid;gap:6px}
.video-call-stage{position:absolute;inset:0;background:#05070b;overflow:hidden}
.remote-video{position:absolute;inset:0}
.remote-video video{width:100%;height:100%;object-fit:cover}
.local-video{position:absolute;top:20px;right:20px;width:150px;height:132px;padding:3px;clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);border-radius:0;overflow:hidden;z-index:8;background:linear-gradient(145deg,var(--buzz-accent),#222831 48%);box-shadow:0 12px 34px #0009;cursor:grab;touch-action:none;user-select:none}
.local-video.dragging{cursor:grabbing}
.local-video video{width:100%;height:100%;object-fit:cover;clip-path:inherit;background:#111820}
.local-video::after{content:attr(data-name);position:absolute;left:50%;bottom:10px;z-index:3;max-width:72%;transform:translateX(-50%);padding:4px 8px;border-radius:999px;background:#05070bcc;color:#fff;font-size:.7rem;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.local-video-initials{position:absolute;inset:0;display:grid;place-items:center;clip-path:inherit;color:var(--buzz-accent);font-size:1.2rem;font-weight:900;background:#111820}
.local-video-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inherit;background:#111820}
.local-video video+.local-video-initials{display:none}
.video-call-title{position:absolute;left:20px;top:18px;z-index:7;display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:14px;background:#05070b99;backdrop-filter:blur(8px);box-shadow:0 10px 30px #0007}
.video-call-title span{color:var(--buzz-accent);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.video-call-title strong{font-size:1rem}
.call-overlay>strong,.call-overlay>.hangup{z-index:3}
.hangup{position:absolute;bottom:40px;z-index:12;background:#c62a2a;color:#fff;border:0;border-radius:30px;padding:14px 24px;font-weight:800}
.hangup.inline{position:static;border-radius:999px;padding:12px 18px}
.call-controls{
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:18;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transform:translateX(-50%);
  padding:9px;
  border:1px solid #ffffff1f;
  border-radius:999px;
  background:#05070bcc;
  box-shadow:0 16px 44px #0009;
  backdrop-filter:blur(10px);
}
.call-control{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:#202832;
  color:#f7f9fb;
  font-size:1rem;
  font-weight:900;
}
.call-control.off{position:relative;background:#4b5563;color:#cbd5e1}
.call-control.off::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:50%;
  height:3px;
  border-radius:3px;
  background:#e53935;
  transform:rotate(-35deg);
  box-shadow:0 0 0 1px #0007;
}

/* A call owns the entire viewport. Leaving the chat composer above it hid the
   reaction/control rail on compact mobile screens. */
.chat-page.call-active>.composer{display:none!important}
.app-root.native-client:not(.native-windows) .call-overlay{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.app-root.native-client:not(.native-windows) .call-controls.meet-controls{
  left:8px;
  right:8px;
  bottom:max(12px,env(safe-area-inset-bottom,0px));
  justify-content:flex-start;
  gap:7px;
  max-width:none;
  padding:7px;
  overflow-x:auto;
  scrollbar-width:none;
  transform:none;
}
.app-root.native-client:not(.native-windows) .call-controls.meet-controls::-webkit-scrollbar{display:none}
.app-root.native-client:not(.native-windows) .call-control{flex:0 0 42px;width:42px;height:42px}
.app-root.native-client:not(.native-windows) .hangup.inline{flex:0 0 auto;white-space:nowrap}
.app-root.native-client:not(.native-windows) .call-controls.direct-call-controls{
  left:50%;right:auto;max-width:calc(100vw - 24px);justify-content:center;overflow:visible;transform:translateX(-50%);
}
.call-control.active{background:var(--buzz-accent);color:var(--buzz-on-accent,#111820);box-shadow:0 0 0 4px color-mix(in srgb,var(--buzz-accent) 22%,transparent)}
.call-control.danger{background:#c62a2a!important;color:#fff!important;box-shadow:0 0 0 4px #c62a2a33}
.call-control:disabled{opacity:.58;cursor:not-allowed}
.call-notice{
  position:absolute;
  left:50%;
  bottom:100px;
  z-index:18;
  max-width:min(520px,calc(100vw - 28px));
  transform:translateX(-50%);
  padding:9px 12px;
  border:1px solid #ffffff24;
  border-radius:14px;
  background:#05070bd9;
  color:#f7f9fb;
  text-align:center;
  font-weight:800;
  box-shadow:0 12px 36px #0009;
}
.meet-time-notice{
  position:absolute;
  left:18px;
  top:78px;
  z-index:18;
  max-width:min(340px,calc(100vw - 36px));
  padding:8px 11px;
  border:1px solid #ffffff20;
  border-radius:8px;
  background:#05070bbf;
  color:#f7f9fb;
  font-size:.86rem;
  font-weight:800;
  box-shadow:0 12px 34px #0008;
}
.meet-chat-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:21;
  width:var(--meet-chat-width,min(420px,32vw));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border-left:1px solid #ffffff24;
  border-radius:0;
  background:#111820f2;
  box-shadow:-20px 0 54px #0009;
  backdrop-filter:blur(12px);
  animation:meet-chat-slide-in .18s ease-out;
}
@keyframes meet-chat-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.meet-chat-panel header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-bottom:1px solid #ffffff14;
}
.meet-chat-panel header div{min-width:0;display:grid;gap:2px}
.meet-chat-panel header span{color:var(--buzz-accent);font-size:.72rem;font-weight:900;text-transform:uppercase}
.meet-chat-panel header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.meet-chat-messages{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px}
.meet-chat-message{max-width:86%;display:grid;gap:3px;padding:9px 10px;border-radius:8px;background:#202832;color:#f7f9fb}
.meet-chat-message.mine{align-self:flex-end;background:var(--buzz-accent);color:#111820}
.meet-chat-message.theirs{align-self:flex-start}
.meet-chat-message span,.meet-chat-message small{font-size:.7rem;font-weight:800;opacity:.72}
.meet-chat-message p{margin:0;overflow-wrap:anywhere;line-height:1.35}
.meet-chat-empty{margin:auto;color:#9aa6b2;font-weight:800}
.meet-chat-compose{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:12px;border-top:1px solid #ffffff14}
.meet-chat-compose textarea{min-height:44px;max-height:96px;resize:vertical;border:1px solid #303943;border-radius:8px;padding:10px 12px;background:#f7f9fb;color:#111820;outline:0}
.meet-chat-compose .primary{width:auto;margin:0;padding:10px 14px;border-radius:8px}
.meet-chat-input-host{position:relative;display:grid;place-items:center}
.meet-chat-emoji-button{width:42px;height:42px;border:0;border-radius:999px;background:#202832;color:#f7f9fb;font-size:1.1rem}
.meet-chat-emoji-picker{right:auto;left:0;bottom:52px}
.meet-chat-control{position:relative}
.meet-chat-control[data-unread]:not([data-unread="0"])::after{
  content:attr(data-unread);
  position:absolute;
  right:-4px;
  top:-6px;
  min-width:18px;
  height:18px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:999px;
  background:#e53935;
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  box-shadow:0 0 0 2px #05070b;
}
.screen-share-badge{
  position:absolute;
  left:50%;
  top:78px;
  z-index:19;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  transform:translateX(-50%);
  padding:9px 14px;
  border:1px solid #ffffff24;
  border-radius:14px;
  background:#05070bd9;
  color:#f7f9fb;
  box-shadow:0 12px 36px #0009;
  backdrop-filter:blur(10px);
}
.screen-share-badge span{color:var(--buzz-accent);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.screen-share-badge strong{font-size:.95rem}
.call-invite-panel{
  position:absolute;
  right:24px;
  bottom:104px;
  z-index:20;
  width:min(320px,calc(100vw - 32px));
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid #ffffff24;
  border-radius:14px;
  background:#05070be6;
  box-shadow:0 16px 44px #0009;
  backdrop-filter:blur(10px);
}
.call-invite-panel input{
  width:100%;
  border:1px solid #303943;
  border-radius:10px;
  background:#10161d;
  color:#f7f9fb;
  padding:10px 11px;
}
.call-invite-panel button{
  border:0;
  border-radius:10px;
  padding:10px 11px;
  background:#202832;
  color:#f7f9fb;
  text-align:left;
  font-weight:800;
}
.call-invite-selected{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding-top:6px;
}
.call-invite-selected button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  border:1px solid color-mix(in srgb,var(--buzz-accent) 60%,#303943);
  border-radius:999px;
  background:#111820;
  color:#f7f9fb;
  padding:7px 10px;
}
.call-invite-selected span{
  color:var(--buzz-accent);
  font-weight:900;
}
.call-invite-submit{
  width:100%;
  margin-top:4px;
  text-align:center!important;
}
.call-reaction-burst{
  position:absolute;
  inset:0;
  z-index:17;
  pointer-events:none;
  display:grid;
  place-items:center;
}
.call-reaction-burst span{
  position:absolute;
  font-size:clamp(2.4rem,8vw,6rem);
  filter:drop-shadow(0 12px 24px #000b);
  animation:meet-reaction-pop 2.2s ease forwards;
}
.call-reaction-burst span:nth-child(2n){transform:translate(-22vw,8vh)}
.call-reaction-burst span:nth-child(3n){transform:translate(20vw,-10vh)}
@keyframes meet-reaction-pop{
  0%{opacity:0;scale:.5;translate:0 40px}
  18%{opacity:1;scale:1;translate:0 0}
  100%{opacity:0;scale:1.35;translate:0 -120px}
}
.screen-draw-tools{
  position:fixed;
  left:50%;
  top:14px;
  z-index:21001;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
  padding:8px;
  border-radius:999px;
  background:#05070bd9;
  box-shadow:0 12px 36px #0009;
}
.screen-draw-tools button{
  min-width:32px;
  height:32px;
  padding:0 10px;
  border:2px solid #fff9;
  border-radius:999px;
  background:#202832;
  color:#fff;
  font-weight:900;
}
.screen-draw-tools button[data-c]{
  width:32px;
  padding:0;
}
.audio-call-avatar{z-index:3;width:180px;height:180px;border-radius:50%;display:grid;place-items:center;background:#202832;border:1px solid #3a4652;box-shadow:0 20px 60px #0008;overflow:hidden}
.audio-call-avatar img{width:100%;height:100%;object-fit:cover}
.audio-call-avatar span{font-size:4rem;font-weight:800;color:var(--buzz-accent)}

.buzz-meet{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
  padding:18px clamp(14px,3vw,34px) 92px;
  background:
    radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--buzz-accent) 18%,transparent),transparent 28%),
    #0b0e12;
}
.call-overlay.meet-chat-docked .buzz-meet,
.call-overlay.meet-chat-docked .video-call-stage{
  right:var(--meet-chat-width,min(420px,32vw));
}
.call-overlay.meet-chat-docked .call-controls{
  left:calc((100% - var(--meet-chat-width,min(420px,32vw))) / 2);
}
.call-overlay.meet-chat-docked .call-notice{
  left:calc((100% - var(--meet-chat-width,min(420px,32vw))) / 2);
}
.call-overlay.meet-chat-docked .meet-time-notice{
  right:calc(var(--meet-chat-width,min(420px,32vw)) + 18px);
}
.buzz-meet.sharing-screen{
  grid-template-rows:auto minmax(0,1fr) auto;
}
.buzz-meet-header{
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  color:#f7f9fb;
}
.buzz-meet-header div{display:flex;min-width:0;flex-direction:column;gap:2px}
.buzz-meet-header span{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--buzz-accent)}
.buzz-meet-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem}
.buzz-meet-header small,.buzz-meet-pager span{
  padding:5px 9px;
  border:1px solid #34404b;
  border-radius:999px;
  background:#171d24d9;
  color:#d7dee6;
  font-weight:800;
}
.buzz-meet-grid{
  --meet-tile:clamp(132px,min(22vw,30vh),300px);
  z-index:4;
  align-self:stretch;
  width:min(1640px,100%);
  height:100%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  align-content:center;
  gap:0;
  padding:18px calc(var(--meet-tile) * .08) calc(var(--meet-tile) * .45);
}
.buzz-meet-grid.single{--meet-tile:clamp(360px,min(58vw,66vh),720px)}
.buzz-meet-grid.pair{--meet-tile:clamp(300px,min(42vw,56vh),560px)}
.buzz-meet-grid.few{--meet-tile:clamp(210px,min(29vw,40vh),390px)}
.buzz-meet-grid.single,
.buzz-meet-grid.pair{
  align-content:center;
  padding-bottom:calc(var(--meet-tile) * .18);
}
.buzz-meet-screen-stage{
  position:relative;
  z-index:4;
  align-self:stretch;
  justify-self:center;
  width:min(1540px,100%);
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #26323d;
  border-radius:14px;
  background:#05070b;
  box-shadow:0 20px 60px #000a;
}
.buzz-meet-screen-host{
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
}
.buzz-meet-screen-host video{
  width:100%;
  height:100%;
}
.buzz-meet-screen-host video{
  display:block;
  object-fit:contain;
  background:#05070b;
}
.buzz-meet-screen-host canvas{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
}
.buzz-meet-screen-title{
  position:absolute;
  left:14px;
  top:14px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 11px;
  border:1px solid #ffffff24;
  border-radius:12px;
  background:#05070bd9;
  color:#f7f9fb;
  box-shadow:0 10px 30px #0008;
}
.buzz-meet-screen-title span{
  color:var(--buzz-accent);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.buzz-meet-screen-title strong{font-size:.9rem}
.buzz-meet.sharing-screen .buzz-meet-grid{
  --meet-tile:clamp(86px,min(11vw,14vh),138px);
  align-self:end;
  height:auto;
  width:min(920px,100%);
  padding:0 calc(var(--meet-tile) * .08) calc(var(--meet-tile) * .42);
}
.buzz-meet.sharing-screen .buzz-meet-grid.single,
.buzz-meet.sharing-screen .buzz-meet-grid.pair,
.buzz-meet.sharing-screen .buzz-meet-grid.few{--meet-tile:clamp(86px,min(11vw,14vh),138px)}
.buzz-meet.sharing-screen .buzz-meet-tile{width:var(--meet-tile)}
.buzz-meet.sharing-screen .buzz-meet-name{
  bottom:8px;
  padding:4px 7px;
}
.buzz-meet.sharing-screen .buzz-meet-name span{font-size:.68rem}
.buzz-meet.sharing-screen .buzz-meet-placeholder span{
  width:46px;
  height:46px;
  font-size:.85rem;
}
.buzz-meet-tile{
  position:relative;
  width:var(--meet-tile);
  flex:0 0 var(--meet-tile);
  aspect-ratio:1.16;
  min-height:0;
  height:auto;
  align-self:center;
  justify-self:center;
  margin:calc(var(--meet-tile) * -.035) calc(var(--meet-tile) * -.075);
  display:grid;
  place-items:center;
  clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);
  background:linear-gradient(145deg,#2d3742,#111820 48%);
  box-shadow:0 18px 44px #000a;
  isolation:isolate;
  transition:filter .16s ease, transform .16s ease;
}
.buzz-meet-tile:nth-child(even){transform:translateY(calc(var(--meet-tile) * .43))}
.buzz-meet-tile.speaking{
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--buzz-accent) 78%,transparent));
  transform:translateY(-4px) scale(1.025);
}
.buzz-meet-tile:nth-child(even).speaking{transform:translateY(calc(var(--meet-tile) * .43)) scale(1.025)}
.buzz-meet-local{top:20px;right:20px;z-index:18}
.buzz-meet-tile.speaking::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  clip-path:inherit;
  border:5px solid var(--buzz-accent);
  pointer-events:none;
}
.buzz-meet-video-host,
.buzz-meet-video-host video,
.buzz-meet-placeholder{
  width:100%;
  height:100%;
  clip-path:inherit;
}
.buzz-meet-video-host{position:relative;background:linear-gradient(145deg,#252d36,#111820)}
.buzz-meet-video-host video{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  object-fit:cover;
  aspect-ratio:1.16;
  background:#05070b;
}
.buzz-meet-video-host video~.meet-video-fallback{display:none}
.buzz-meet-video-host img,
.buzz-meet-placeholder img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  clip-path:inherit;
  background:#111820;
}
.meet-video-fallback.initials{
  position:absolute;
  left:50%;
  top:50%;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  clip-path:inherit;
  background:var(--buzz-accent);
  color:var(--buzz-on-accent,#111820);
  font-size:1.25rem;
  font-weight:900;
}
.buzz-meet-placeholder{
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#252d36,#111820);
}
.buzz-meet-placeholder span{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  clip-path:inherit;
  background:var(--buzz-accent);
  color:var(--buzz-on-accent,#111820);
  font-size:1.25rem;
  font-weight:900;
}
.buzz-meet-name{
  position:absolute;
  left:50%;
  bottom:9%;
  z-index:12;
  max-width:min(68%,320px);
  transform:translateX(-50%);
  padding:7px 12px;
  border:1px solid #ffffff38;
  border-radius:999px;
  background:#05070bf0;
  color:#fff;
  box-shadow:0 8px 24px #0009;
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.buzz-meet-name span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.82rem;
  font-weight:900;
}
.buzz-meet-pager{
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.buzz-meet-pager button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #34404b;
  border-radius:21px;
  background:#171d24e6;
  color:#f7f9fb;
  font-size:1.5rem;
}
.buzz-meet-pager button:disabled{opacity:.42}
.buzzmeets-invite-card{
  display:grid;
  gap:12px;
}
.buzzmeets-invite-card h2{
  margin:4px 0 0;
  font-size:1.05rem;
}
.buzzmeets-invite-card input{
  width:100%;
  border:1px solid #303943;
  border-radius:12px;
  padding:11px 12px;
  background:#10161d;
  color:#f7f9fb;
}
.buzzmeets-participant-picker,
.buzzmeets-external-mail{
  display:grid;
  gap:8px;
}
.buzzmeets-participant-results{
  display:grid;
  gap:6px;
  max-height:180px;
  overflow:auto;
}
.buzzmeets-participant-results button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-radius:10px;
  padding:9px 10px;
  background:#202832;
  color:#f7f9fb;
  text-align:left;
}
.buzzmeets-participant-results small{color:#aeb8c2}
.buzzmeets-selected-participants{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.buzzmeets-selected-participants button{
  width:auto;
  border:1px solid #3b4652;
  border-radius:999px;
  padding:7px 10px;
  background:#171d24;
  color:#f7f9fb;
  font-weight:800;
}
.buzzmeets-selected-participants span{color:#ffb4b4}
.buzzmeets-qr{
  display:grid;
  place-items:center;
  padding:12px;
  border-radius:12px;
  background:#fff;
}
.buzzmeets-qr svg{
  width:min(240px,72vw);
  height:auto;
}
.buzzmeets-lobby-panel{
  position:absolute;
  right:24px;
  top:82px;
  z-index:20;
  width:min(300px,calc(100vw - 32px));
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid #ffffff24;
  border-radius:14px;
  background:#05070be6;
  color:#f7f9fb;
  box-shadow:0 16px 44px #0009;
  backdrop-filter:blur(10px);
}
.buzzmeets-lobby-panel button{
  border:0;
  border-radius:10px;
  padding:10px 11px;
  background:var(--buzz-accent);
  color:var(--buzz-on-accent,#111820);
  font-weight:900;
}
.guest-meet-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:#0b0e12;
  color:#f7f9fb;
}
.guest-meet-card{
  width:min(420px,100%);
  display:grid;
  justify-items:center;
  gap:12px;
  padding:22px;
  border:1px solid #252d36;
  border-radius:18px;
  background:#111820;
  text-align:center;
  box-shadow:0 18px 54px #0009;
}
.guest-meet-card img{
  width:112px;
  height:112px;
  object-fit:contain;
  background:#fff;
}
.guest-meet-card input{
  width:100%;
  border:1px solid #303943;
  border-radius:12px;
  padding:12px;
  background:#10161d;
  color:#f7f9fb;
}
.guest-meet-error{color:#ffb4b4}

@media(max-width:720px),(max-height:560px){
  .call-overlay.meet-chat-docked{--meet-chat-width:min(100vw,420px)}
  .call-overlay.meet-chat-docked .buzz-meet,
  .call-overlay.meet-chat-docked .video-call-stage{right:0}
  .call-overlay.meet-chat-docked .call-controls,
  .call-overlay.meet-chat-docked .call-notice{left:50%}
  .meet-chat-panel{width:min(100vw,420px)}
  .buzz-meet{padding:14px 12px 86px}
  .buzz-meet.sharing-screen{
    grid-template-rows:auto minmax(0,1fr) minmax(86px,18vh) auto;
  }
  .buzz-meet-screen-stage{min-height:260px}
  .buzz-meet-grid{
    --meet-tile:clamp(132px,46vw,260px);
    flex-wrap:wrap;
    justify-content:center;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .buzz-meet-grid::-webkit-scrollbar{display:none}
  .buzz-meet-tile{
    width:var(--meet-tile);
    flex-basis:var(--meet-tile);
    min-height:0;
    scroll-snap-align:center;
  }
  .buzz-meet-tile:nth-child(n){transform:none}
  .buzz-meet-tile:nth-child(even){transform:translateY(calc(var(--meet-tile) * .38))}
  .buzz-meet-tile.speaking{transform:scale(1.02)}
  .buzz-meet-tile:nth-child(even).speaking{transform:translateY(calc(var(--meet-tile) * .38)) scale(1.02)}
  .buzz-meet-name{bottom:18px;max-width:68%}
  .buzz-meet.sharing-screen .buzz-meet-grid{
    --meet-tile:clamp(78px,26vw,118px);
    width:100%;
    overflow-x:auto;
  }
  .buzz-meet.sharing-screen .buzz-meet-tile:nth-child(n){margin-top:0}
  .buzz-meet.sharing-screen .buzz-meet-tile:nth-child(even){transform:translateY(calc(var(--meet-tile) * .34))}
  .buzz-meet.sharing-screen .buzz-meet-tile:nth-child(even).speaking{transform:translateY(calc(var(--meet-tile) * .34)) scale(1.02)}
}

.event-card{display:flex;gap:14px;padding:16px;margin:14px 0;border:1px solid #e5e8ec;border-radius:18px;background:#fff}
.app-root.dark .event-card,.app-root.system .event-card{background:var(--buzz-dark-surface);border-color:var(--buzz-dark-elevated)}
.event-date{width:64px;min-width:64px;height:72px;background:var(--buzz-accent);color:#111;clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.event-date strong{font-size:1.45rem;line-height:1}
.event-date span{font-size:.65rem;font-weight:800;margin-top:4px}
.event-main{flex:1}
.event-main h3{margin:0 0 5px}
.event-main>span,.event-main>small{display:block;color:#7f8790;margin-top:3px}
.event-status{display:flex;gap:12px;margin:12px 0;color:#7f8790}
.event-actions{display:flex;flex-wrap:wrap;gap:7px}
.event-actions button,.event-chat{border:0;border-radius:12px;padding:9px 11px;background:#252b33;color:#fff}
.event-chat{margin-top:8px;background:var(--buzz-accent);color:#111;font-weight:800}
.event-input{width:100%;padding:12px 13px;border:1px solid #dce0e4;border-radius:12px;margin:6px 0;background:transparent;color:inherit}
textarea.event-input{min-height:90px;resize:vertical}
.event-label,.event-switch{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0}
.event-label input{padding:9px;border:1px solid #dce0e4;border-radius:10px;background:transparent;color:inherit}
.event-contact-head{margin-top:14px}
.event-contact-list{max-height:280px;overflow:auto}
.event-contact{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #eceef1}
.event-contact span{flex:1}

.group-selected{margin:12px 0;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--buzz-accent) 16%,transparent)}
.group-nav-button{display:flex;flex-direction:column;align-items:center;gap:2px}

.contact-permission-card{max-width:520px;margin:30px auto;text-align:center;padding:24px;border:1px solid #e5e8ec;border-radius:20px;background:#fff}
.app-root.dark .contact-permission-card,.app-root.system .contact-permission-card{background:var(--buzz-dark-surface);border-color:var(--buzz-dark-elevated)}
.contact-permission-card img{width:150px;height:150px;object-fit:contain}
.contact-permission-card p{color:#7f8790;line-height:1.5}
.contact-section-title{font-size:.72rem;letter-spacing:.14em;color:#8a929b;margin:24px 4px 8px}
.buzz-pill{padding:6px 9px;border-radius:12px;background:color-mix(in srgb,var(--buzz-accent) 18%,transparent);color:var(--buzz-accent);font-size:.72rem;font-weight:800}
.invite-button{border:0;border-radius:12px;padding:9px 12px;background:var(--buzz-accent);color:#111;font-weight:800}
.verified-phone{margin:10px 0;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--buzz-accent) 16%,transparent);color:#2e7d32;font-weight:800}

.message-meta{display:flex!important;align-items:center;justify-content:flex-end;gap:4px;font-size:.64rem;opacity:.58;margin-top:5px}
.message-meta .direction{font-size:.68rem;opacity:.72}
.message-meta .delivery{font-size:.68rem;letter-spacing:0;padding-right:0}
.delivery-checks{display:inline-flex!important;align-items:center;gap:0;line-height:1;white-space:nowrap}
.delivery-check{display:inline-block;position:relative;width:8px;height:10px;min-width:8px;color:color-mix(in srgb,currentColor 35%,transparent);font-size:0;line-height:1;opacity:.55}
.delivery-check::before{content:"";position:absolute;left:1px;top:0;width:4px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transform-origin:center}
.delivery-check::after{content:none}
.delivery-check:last-child{margin-left:-1px}
.delivery-check.active{color:var(--buzz-on-accent,#111820);opacity:1}
.mine .message-meta{color:#111}
.theirs .message-meta{color:inherit}
.quick-react{opacity:.95}
.quick-react button{width:34px;height:34px;display:grid;place-items:center;border:1px solid #e2e6ea;background:#fff;color:#111;border-radius:17px;font-size:1rem;box-shadow:0 2px 8px #00000012}
.quick-react button:hover{border-color:var(--buzz-accent);transform:translateY(-1px)}
.reaction-summary button{border:0;border-radius:14px;background:#fff;color:#111;padding:4px 8px;box-shadow:0 2px 8px #00000014}
.call-history{display:flex;flex-direction:column;gap:3px;min-width:190px}
.call-history strong{font-size:.98rem}
.call-history span{font-size:.78rem;opacity:.72}

.security-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eceef1}
.security-device{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #eceef1}
.security-device-main{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.security-device-main span{font-size:.75rem;color:#7f8790}
.security-device-main code{font-size:.67rem;word-break:break-all;color:#8a929b}
.current-device{display:inline-block;margin-left:6px;padding:3px 6px;border-radius:8px;background:color-mix(in srgb,var(--buzz-accent) 18%,transparent);color:var(--buzz-accent)!important}
.revoke-button{border:0;border-radius:10px;padding:8px 10px;background:#7d2020;color:#fff}
.revoked-device{font-size:.72rem;color:#b44}
.conversation-security-panel{position:fixed;top:78px;left:12px;right:12px;z-index:55;max-width:620px;margin:auto;padding:16px;border-radius:18px;background:#171b21;color:#fff;box-shadow:0 15px 45px #0008}
.conversation-security-panel p{font-family:monospace;line-height:1.6;word-spacing:.3em;color:var(--buzz-accent)}
.conversation-security-panel small{display:block;color:#b9c0c8;line-height:1.4}
.participants-panel{position:fixed;right:18px;top:82px;z-index:45;width:min(340px,calc(100vw - 36px));display:grid;gap:10px;padding:14px;border:1px solid #303943;border-radius:14px;background:#111820;color:#f7f9fb;box-shadow:0 18px 54px #0009}
.participants-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.participants-panel p{margin:0;color:#aeb8c2}
.participant-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:#171d24}
.participant-row>div:last-child{display:flex;min-width:0;flex-direction:column;gap:2px}
.participant-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.participant-row span{color:#aeb8c2;font-size:.78rem}
.conversation-security-panel button{width:100%;margin-top:12px;border:0;border-radius:12px;padding:10px;background:var(--buzz-accent);font-weight:800}

.reaction-summary{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.reaction-summary button{border:1px solid #dfe3e7;border-radius:13px;padding:3px 7px;background:#fff;font-size:.72rem}
.event-countdown{margin:18px 0;padding:18px;border-radius:20px;background:#15191e;color:#fff;text-align:center}
.event-countdown small{display:block;color:#aeb5bd;text-transform:uppercase;letter-spacing:.12em}
.event-countdown strong{display:block;margin-top:5px;font-size:1.8rem;color:var(--buzz-accent)}
.event-countdown.running{box-shadow:0 0 0 2px var(--buzz-accent)}
.event-countdown.ended,.event-countdown.archived{opacity:.7}
.event-countdown.cancelled{background:#5f1f1f}
.workspace-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:8px}
.workspace-tabs button{border:0;border-radius:12px;padding:10px 12px;background:#e9ecef;color:#333;white-space:nowrap}
.workspace-tabs button.active{background:var(--buzz-accent);font-weight:800}
.workspace-card{display:flex;align-items:center;gap:12px;padding:14px;margin:10px 0;border:1px solid #e5e8ec;border-radius:16px;background:#fff}
.workspace-card>div{display:flex;flex:1;flex-direction:column;gap:3px}
.workspace-card span,.workspace-card small{color:#7f8790}
.workspace-card button{border:0;width:42px;height:42px;border-radius:21px;background:var(--buzz-accent);font-weight:800}
.poll-card{padding:16px;margin:12px 0;border:1px solid #e5e8ec;border-radius:18px;background:#fff}
.poll-card h3{margin-top:0}
.poll-option{display:flex;width:100%;justify-content:space-between;gap:12px;margin:7px 0;padding:12px;border:1px solid #dfe3e7;border-radius:12px;background:transparent;color:inherit}
.poll-option.selected{border-color:var(--buzz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--buzz-accent) 40%,transparent)}
.app-root.dark .workspace-card,.app-root.dark .poll-card,.app-root.system .workspace-card,.app-root.system .poll-card{background:var(--buzz-dark-surface);border-color:var(--buzz-dark-elevated)}

.login-page{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;max-width:420px;padding:24px 24px 36px}
.login-hero{width:100%;height:190px;display:grid;place-items:center;overflow:visible}
.login-bee{width:min(190px,68vw);height:min(190px,68vw);object-fit:contain;object-position:center}
.login-page h1{font-size:2.35rem;line-height:1;margin:2px 0 0;color:#15191e}
.login-page p{margin:0 0 10px;color:#5f6873}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin:2px 0 8px;border:1px solid #dce0e4;border-radius:13px;background:#f4f6f8}
.login-tabs button{height:42px;border:0;border-radius:9px;background:transparent;color:#5d6670;font-weight:800}
.login-tabs button.active{background:#fff;color:#111;box-shadow:0 1px 4px #00000014}
.login-page label{display:block;text-align:left;margin:4px 0}
.login-page label span{display:block;margin:0 0 5px 4px;color:#26313d;font-size:.82rem;font-weight:700}
.login-page input{height:48px;margin:0;background:#fff;color:#111;outline:none}
.app-root.dark .login-page{background:var(--buzz-dark-bg);color:#eef3f7}
.app-root.dark .login-page h1{color:#f7f9fb}
.app-root.dark .login-page p,.app-root.dark .login-page label span{color:#aeb8c2}
.app-root.dark .login-tabs{border-color:var(--buzz-dark-elevated);background:var(--buzz-dark-surface)}
.app-root.dark .login-tabs button{color:#b7c1ca}
.app-root.dark .login-tabs button.active{background:var(--buzz-dark-elevated);color:#f7f9fb;box-shadow:none}
.app-root.dark .login-page input{background:#10161d;color:#f7f9fb;border-color:var(--buzz-dark-elevated);caret-color:#f7f9fb}
.app-root.dark .login-page input::placeholder{color:#9aa6b2}
@media(prefers-color-scheme:dark){
  .app-root.system .login-page{background:var(--buzz-dark-bg);color:#eef3f7}
  .app-root.system .login-page h1{color:#f7f9fb}
  .app-root.system .login-page p,.app-root.system .login-page label span{color:#aeb8c2}
  .app-root.system .login-tabs{border-color:var(--buzz-dark-elevated);background:var(--buzz-dark-surface)}
  .app-root.system .login-tabs button{color:#b7c1ca}
  .app-root.system .login-tabs button.active{background:var(--buzz-dark-elevated);color:#f7f9fb;box-shadow:none}
  .app-root.system .login-page input{background:#10161d;color:#f7f9fb;border-color:var(--buzz-dark-elevated);caret-color:#f7f9fb}
  .app-root.system .login-page input::placeholder{color:#9aa6b2}
}
.login-page input:focus{border-color:var(--buzz-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--buzz-accent) 22%,transparent)}
.login-page .primary,.login-page .secondary{margin-top:8px}
.app-root.dark .composer textarea,.app-root.system .composer textarea,.composer textarea{background:#fff;color:#111;caret-color:#111}
.app-root.dark .composer textarea::placeholder,.app-root.system .composer textarea::placeholder,.composer textarea::placeholder{color:#68727d}
.bubble span{color:inherit}
.text-message{display:grid;gap:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.text-more{justify-self:start;border:0;border-radius:999px;padding:5px 9px;background:#1118201f;color:inherit;font-size:.78rem;font-weight:900}
.mine .text-more{background:#1118202e}
.theirs .bubble{color:#15191e}
.composer button[hidden]{display:none!important}
.composer .send:disabled{opacity:.42;cursor:default}
.composer .discard-voice{background:#7f1d1d!important;color:#fff!important}
.composer .discard-voice:hover{background:#b91c1c!important}
.chat-header .icon-button,.composer .icon-button,.composer .record,.composer .send{line-height:1}
.meet-entry{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.meet-entry .avatar{width:42px;height:42px}
.meet-entry .chat-main{min-width:0}
.meet-entry .chat-main strong{font-size:.96rem}
.meet-entry .chat-main span{font-size:.78rem}
.meet-entry-start{
  border:0;
  border-radius:999px;
  padding:7px 10px;
  background:var(--buzz-accent);
  color:var(--buzz-on-accent,#111820);
  font-size:.82rem;
  font-weight:900;
  line-height:1;
}
.meet-entry-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-start}
.meet-entry-action{
  border:0;
  border-radius:999px;
  padding:7px 10px;
  background:var(--buzz-accent);
  color:var(--buzz-on-accent,#111820);
  font-size:.82rem;
  font-weight:900;
  line-height:1;
}
.meet-entry-action:hover,.meet-entry-start:hover{filter:brightness(1.04)}
.meet-entry-action:disabled,.meet-entry-start:disabled{opacity:.5;cursor:not-allowed}
.meet-invite-toast{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:30000;
  width:min(380px,calc(100vw - 32px));
  pointer-events:none;
}
.meet-invite-toast section{
  pointer-events:auto;
  display:grid;
  gap:8px;
  padding:14px;
  border:1px solid #303943;
  border-radius:14px;
  background:#111820;
  color:#f7f9fb;
  box-shadow:0 18px 54px #0009;
}
.meet-invite-toast span{color:var(--buzz-accent);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.meet-invite-toast strong{font-size:1.05rem}
.meet-invite-toast p{margin:0;color:#aeb8c2}
.meet-invite-toast div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.meet-invite-toast .primary,.meet-invite-toast .secondary{margin-top:0;padding:11px 12px;border-radius:999px}
.buzzmeets-view-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:12px 0;
  padding:4px;
  border:1px solid #2b333d;
  border-radius:12px;
  background:#171d24;
}
.buzzmeets-view-tabs button{
  height:36px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#aab4be;
  font-weight:800;
}
.buzzmeets-view-tabs button.active{
  background:var(--buzz-accent);
  color:var(--buzz-on-accent,#111820);
}
.buzzmeets-calendar{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.meet-list-panel>.buzzmeets-calendar{display:none}
.meet-calendar-page{
  max-width:none;
  width:100%;
  min-height:100%;
}
.meet-calendar-page .buzzmeets-view-tabs{
  grid-template-columns:repeat(3,minmax(120px,1fr));
}
.buzzmeets-calendar.large .calendar-cell{
  min-height:132px;
}
.buzzmeets-calendar.large .calendar-day-section{
  padding:14px;
}
.buzzmeets-calendar.large .calendar-agenda-item{
  padding:12px;
}
.buzzmeets-calendar>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.buzzmeets-calendar>header strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar-grid.month{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}
.calendar-cell{
  min-height:92px;
  padding:7px;
  border:1px solid #303943;
  border-radius:8px;
  background:#10161d;
}
.calendar-cell.muted{opacity:.48}
.calendar-cell.today{border-color:var(--buzz-accent)}
.calendar-day{
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:#202832;
  color:#f7f9fb;
  font-weight:900;
}
.calendar-item{
  display:grid;
  width:100%;
  margin-top:6px;
  padding:6px 7px;
  border:0;
  border-radius:8px;
  background:var(--buzz-accent);
  color:var(--buzz-on-accent,#111820);
  text-align:left;
}
.calendar-item span{font-size:.68rem;font-weight:900}
.calendar-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}
.calendar-item:disabled{opacity:.58}
.calendar-list{display:grid;gap:10px}
.calendar-day-section{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid #303943;
  border-radius:10px;
  background:#10161d;
}
.calendar-day-section h3{margin:0;font-size:1rem}
.calendar-day-section p{margin:0;color:#aeb8c2}
.calendar-agenda-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px;
  border-radius:10px;
  background:#171d24;
}
.calendar-agenda-item div{display:grid;gap:2px;min-width:0}
.calendar-agenda-item strong,.calendar-agenda-item span,.calendar-agenda-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-agenda-item span,.calendar-agenda-item small{color:#aeb8c2}
@media(max-width:620px){
  .meet-entry{align-items:flex-start;flex-wrap:wrap}
  .meet-entry-actions{width:100%;justify-content:flex-start;padding-left:68px}
  .calendar-grid.month{grid-template-columns:1fr}
  .calendar-cell{min-height:auto}
}
.composer .send{
  position:relative;
  display:grid!important;
  place-items:center;
  overflow:hidden;
}
.send-icon::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:20px;
  transform:translate(-45%,-50%) rotate(-18deg);
  clip-path:polygon(0 0,100% 50%,0 100%,22% 56%,60% 50%,22% 44%);
  background:var(--buzz-on-accent,#111820)!important;
  z-index:1;
}
.send-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:2px;
  transform:translate(-58%,-50%) rotate(-18deg);
  background:var(--buzz-accent)!important;
  opacity:.8;
  z-index:2;
}
.chat-error{position:fixed;left:12px;right:12px;bottom:82px;z-index:40120;max-width:620px;margin:auto;padding:12px 14px;border-radius:12px;background:#fff3f3;color:#b51d1d;border:1px solid #ffd4d4;box-shadow:0 8px 24px #0007;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.chat-error span{min-width:0;overflow-wrap:anywhere}.chat-error button{width:32px;height:32px;flex:0 0 32px;border:0;border-radius:50%;background:#b51d1d;color:#fff;font-size:1.35rem;line-height:1;cursor:pointer}

.messenger-shell{min-height:100vh;background:#f6f7f8;color:#111820}
.nav-rail{position:fixed;left:0;right:0;bottom:0;height:72px;z-index:40;display:flex;align-items:center;justify-content:space-around;background:#11161b;border-top:1px solid #242a31}
.nav-rail button{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#aab2bc;font-size:1.25rem;font-weight:800}
.nav-rail .security-nav-button{position:relative}
.nav-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border:2px solid #11161b;border-radius:999px;background:#df3030;color:#fff;font-size:.65rem;line-height:1;font-weight:900}
.nav-rail button.active,.nav-rail button:hover{background:#25303a;color:var(--buzz-accent)}
.rail-create-host{position:relative;display:grid;place-items:center}
.rail-create-menu{position:absolute;left:54px;bottom:0;z-index:80;display:grid;gap:6px;min-width:190px;padding:8px;border:1px solid #303943;border-radius:12px;background:#20272f;color:#eef3f7;box-shadow:0 14px 36px #0008}
.nav-rail .rail-create-menu button{width:100%;height:auto;min-height:38px;border-radius:9px;padding:10px 12px;background:transparent;color:inherit;text-align:left;font-size:.92rem}
.nav-rail .rail-create-menu button:hover{background:#303944;color:var(--buzz-accent)}
@media(max-width:899px){
  .rail-create-menu{left:50%;bottom:56px;transform:translateX(-50%)}
}
.rail-logo{display:none}
.rail-spacer{display:none}
.conversation-pane{background:#fff}
.event-side-placeholder{display:grid;align-content:start;gap:8px;padding:18px;color:#d7dee6}
.event-side-placeholder strong{font-size:1.15rem}
.event-side-placeholder span{color:#9aa6b2;line-height:1.35}
.workspace-pane{min-height:100vh;padding-bottom:72px;background:#eef1f4}
.chat-list-panel{max-width:none;margin:0;min-height:auto;padding:20px;background:#fff}
.chat-list-panel .page-head{min-height:50px}
.chat-list-panel .page-head h1{font-size:1.85rem}
.chat-list-panel .page-head p{font-size:.86rem}
.chat-list-panel .search{border-radius:22px;margin:18px 0 10px;background:#f0f2f4}
.chat{border-bottom:0;border-radius:14px;padding:12px;margin:3px 0}
.chat:hover{background:#f3f5f6}
.chat.selected{background:#e8edf1}
.chat.unread{background:color-mix(in srgb,var(--buzz-accent) 13%,transparent);box-shadow:inset 4px 0 0 var(--buzz-accent)}
.chat.blocked{opacity:.68}
.chat.unread .chat-main strong{font-weight:900}
.chat.unread .chat-main span{color:#3f4852;font-weight:700}
.chat-meta .unread-dot{min-width:12px;width:12px;height:12px;border-radius:6px;padding:0}
.list-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px;padding:4px;border:1px solid #2b333d;border-radius:12px;background:#171d24}
.list-tabs button{height:36px;border:0;border-radius:9px;background:transparent;color:#aab4be;font-weight:800}
.list-tabs button.active{background:var(--buzz-accent);color:#111820}
.chat-menu-button{width:30px;height:30px;border:0;border-radius:15px;background:transparent;color:inherit;font-size:1.2rem;display:grid;place-items:center}
.chat-menu-button:hover{background:#00000012}
.nav-rail button,
.chat-menu-button,
.chat-header .icon-button,
.composer .icon-button,
.call-control,
.hex-button{
    color:#fff!important;
}
.nav-rail button{
    display:grid;
    place-items:center;
}
.line-icon{
    width:19px;
    height:19px;
    display:inline-block;
    position:relative;
    color:#fff;
}
.line-icon::before,
.line-icon::after{
    content:"";
    position:absolute;
    box-sizing:border-box;
    border:2px solid currentColor;
}
.line-icon.chats::before{inset:2px;border-radius:6px}
.line-icon.chats::after{width:7px;height:7px;border-top:0;border-left:0;right:2px;bottom:0;transform:rotate(45deg)}
.line-icon.contacts::before{width:8px;height:8px;border-radius:50%;left:5px;top:1px}
.line-icon.contacts::after{left:2px;right:2px;bottom:1px;height:9px;border-radius:10px 10px 4px 4px}
.line-icon.events::before{inset:3px 2px 1px;border-radius:4px}
.line-icon.events::after{left:5px;right:5px;top:0;height:6px;border-width:0 2px}
.line-icon.meet::before{inset:3px;border-radius:50%}
.line-icon.meet::after{right:0;top:7px;width:8px;height:6px;border-left:0;transform:skewY(-25deg)}
.line-icon.play::before{left:5px;top:3px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid currentColor;border-right:0}
.line-icon.play::after{display:none}
.line-icon.video::before{left:2px;top:4px;width:12px;height:11px;border-radius:3px}
.line-icon.video::after{right:1px;top:6px;width:7px;height:7px;border-left:0;transform:skewY(-24deg)}
.line-icon.phone::before{left:5px;top:2px;width:10px;height:15px;border-width:0 0 2px 2px;border-radius:0 0 0 10px;transform:rotate(-35deg)}
.line-icon.phone::after{left:3px;top:1px;width:5px;height:5px;border-radius:2px;box-shadow:10px 10px 0 -1px currentColor}
.line-icon.communities::before{inset:4px;border-radius:50%}
.line-icon.communities::after{left:0;right:0;top:8px;border-width:2px 0 0}
.line-icon.link::before{left:1px;top:7px;width:10px;height:7px;border-radius:8px;transform:rotate(-32deg)}
.line-icon.link::after{right:1px;top:5px;width:10px;height:7px;border-radius:8px;transform:rotate(-32deg)}
.line-icon.plus::before{left:8px;top:2px;width:0;height:15px;border-width:0 0 0 2px}
.line-icon.plus::after{left:2px;top:8px;width:15px;height:0;border-width:2px 0 0}
.line-icon.repeat::before{inset:3px;border-radius:50%;border-left-color:transparent}
.line-icon.repeat::after{right:1px;top:1px;width:7px;height:7px;border-left:0;border-bottom:0;transform:rotate(16deg)}
.line-icon.news::before{left:5px;top:2px;width:9px;height:12px;border-radius:8px 8px 4px 4px}
.line-icon.news::after{left:7px;right:7px;bottom:1px;border-width:2px 0 0}
.line-icon.download::before{left:8px;top:1px;width:0;height:12px;border-width:0 0 0 2px}
.line-icon.download::after{left:4px;top:9px;width:10px;height:8px;border-width:0 2px 2px 0;transform:rotate(45deg)}
.line-icon.security::before{left:4px;right:4px;bottom:2px;height:10px;border-radius:3px}
.line-icon.security::after{left:6px;top:1px;width:7px;height:9px;border-bottom:0;border-radius:8px 8px 0 0}
.line-icon.profile::before{width:8px;height:8px;border-radius:50%;left:5px;top:1px}
.line-icon.profile::after{left:3px;right:3px;bottom:1px;height:8px;border-radius:10px 10px 4px 4px}
.line-icon.theme::before{inset:2px;border-radius:50%}
.line-icon.theme::after{top:2px;bottom:2px;right:2px;width:8px;border-left:0;border-radius:0 10px 10px 0;background:currentColor}
.line-icon.more::before{left:8px;top:2px;width:3px;height:3px;border:0;border-radius:50%;background:currentColor;box-shadow:0 6px 0 currentColor,0 12px 0 currentColor}
.line-icon.more::after{display:none}
.line-icon.file::before{left:4px;top:1px;width:11px;height:16px;border-radius:2px}
.line-icon.file::after{right:3px;top:1px;width:6px;height:6px;border-left:0;border-bottom:0}
.line-icon.poll::before{left:3px;right:3px;top:4px;height:3px;border-width:2px 0 0}
.line-icon.poll::after{left:3px;right:3px;top:10px;height:7px;border-width:2px 0 2px}
.line-icon.sticker::before{left:3px;top:3px;width:13px;height:13px;border-radius:4px}
.line-icon.sticker::after{right:3px;bottom:3px;width:6px;height:6px;border-left:0;border-top:0;border-radius:0 0 4px 0;background:currentColor}
.line-icon.camera::before{left:2px;right:2px;top:5px;height:11px;border-radius:3px}
.line-icon.camera::after{left:7px;top:8px;width:5px;height:5px;border-radius:50%;box-shadow:-4px -5px 0 -1px currentColor}
.line-icon.image::before{inset:3px;border-radius:2px}
.line-icon.image::after{left:5px;bottom:5px;width:10px;height:7px;border-width:0 0 2px 2px;transform:skewY(-38deg)}
.line-icon.smile::before{inset:1px;border-radius:50%}
.line-icon.smile::after{left:5px;top:6px;width:3px;height:3px;border:0;border-radius:50%;background:currentColor;box-shadow:7px 0 0 currentColor}
.line-icon.microphone::before{left:6px;top:1px;width:7px;height:12px;border-radius:6px}
.line-icon.microphone::after{left:3px;top:8px;width:13px;height:9px;border-width:0 2px 2px;border-radius:0 0 8px 8px}

.chat-poll-composer{
  position:absolute;
  left:64px;
  right:76px;
  bottom:calc(100% + 10px);
  display:grid;
  gap:8px;
  padding:12px;
  background:var(--buzz-dark-elevated);
  border:1px solid #2b3541;
  border-radius:8px;
  box-shadow:0 18px 36px #0008;
  z-index:15;
}
.composer:has(.chat-poll-composer){position:relative!important}
.chat-poll-composer>strong{font-size:.9rem;color:#f7f9fb}

.chat-poll-composer input,
.chat-poll-composer textarea{
  width:100%;
  background:#0d141b;
  color:#eef3f7;
  border:1px solid #24303c;
  border-radius:8px;
  padding:10px 12px;
}

.chat-poll-composer textarea{
  min-height:92px;
  resize:vertical;
}

.chat-poll-composer label,
.chat-poll-composer>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.chat-poll{
  display:grid;
  gap:8px;
  min-width:min(280px,70vw);
}

.chat-poll>strong{
  font-size:1rem;
}

.chat-poll>small{
  color:#8d9aa7;
}

.chat-poll .poll-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  width:100%;
  padding:10px 12px;
  border:1px solid #2b3541;
  border-radius:8px;
  background:#101821;
  color:#eef3f7;
}

.mine .chat-poll .poll-option{
  background:#e8a100;
  color:#111820;
  border-color:#11182022;
}

.chat-poll .poll-option.selected{
  outline:2px solid currentColor;
}

.call-history{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 12px;
  align-items:center;
}

.call-history .secondary{
  grid-row:1 / span 3;
  grid-column:2;
}

.event-workspace .event-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}

.event-member-strip,
.event-checklist{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.event-member-strip span{
  padding:7px 10px;
  border-radius:999px;
  background:#202a35;
  color:#d7e0ea;
}

.event-task-composer,
.event-task-card{
  display:grid;
  gap:10px;
}

.event-task-card header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.event-task-card header>div{
  display:grid;
  gap:4px;
}

.event-checklist{
  flex-direction:column;
}

.event-checklist label,
.event-checklist-add{
  display:flex;
  align-items:center;
  gap:10px;
}

.event-checklist-add input{
  flex:1;
  background:#0d141b;
  color:#eef3f7;
  border:1px solid #24303c;
  border-radius:8px;
  padding:10px 12px;
}
.event-date.compact{width:44px;min-width:44px;height:50px;border-radius:8px}
.event-date.compact strong{font-size:1rem}
.event-date.compact span{font-size:.64rem}
.context-menu{position:absolute;z-index:70;min-width:190px;padding:7px;border:1px solid #303943;border-radius:12px;background:#20272f;color:#eef3f7;box-shadow:0 14px 36px #0008}
.context-menu button{width:100%;border:0;border-radius:9px;padding:10px 11px;background:transparent;color:inherit;text-align:left;font-weight:700}
.context-menu button:hover{background:#303944}
.context-menu button.danger{color:#ffb4b4}
.chat{position:relative}
.chat-context-menu{right:8px;top:48px}
.header-context-menu{right:12px;top:58px}
.emoji-grid{display:grid;grid-template-columns:repeat(8,34px);gap:6px;padding:8px;border:1px solid #303943;border-radius:14px;background:#20272f;box-shadow:0 14px 36px #0008}
.emoji-grid button{width:34px;height:34px;border:0;border-radius:10px;background:#f5f7f9;color:#111820;font-size:1.08rem}
.emoji-grid button:hover{background:var(--buzz-accent)}
.reaction-picker{
  position:relative;
  z-index:75;
  margin-top:8px;
  width:max-content;
  max-width:min(360px,72vw);
  grid-template-columns:repeat(8,34px);
}
.reaction-picker::before{
  content:"";
  position:absolute;
  top:-8px;
  left:22px;
  width:16px;
  height:16px;
  transform:rotate(45deg);
  background:#20272f;
  border-left:1px solid #303943;
  border-top:1px solid #303943;
}
.composer-emoji-picker{
  position:absolute;
  left:0;
  bottom:54px;
  z-index:75;
  display:grid;
  gap:10px;
  width:min(360px,82vw);
  background:#20272f;
  border:1px solid #303943;
  border-radius:14px;
  padding:12px;
  max-height:310px;
  overflow:hidden;
}
.composer-emoji-picker::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:-8px;
  width:16px;
  height:16px;
  transform:rotate(45deg);
  background:#20272f;
  border-right:1px solid #303943;
  border-bottom:1px solid #303943;
}
.composer-emoji-picker .emoji-grid{
  display:grid;
  grid-template-columns:repeat(8,34px);
  gap:6px;
  max-height:230px;
  overflow-y:auto;
}
.emoji-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.emoji-tabs button{
  width:100%!important;
  min-width:0;
  height:34px;
  border:1px solid #303943!important;
  border-radius:8px!important;
  background:#151c24!important;
  color:#d7dee6!important;
  font-size:.7rem!important;
  font-weight:900;
}
.emoji-tabs button.active{
  background:var(--buzz-accent)!important;
  color:#111820!important;
  border-color:transparent!important;
}
.chat-media-picker{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  max-height:230px;
  overflow-y:auto;
}
.chat-media-picker button{
  width:100%!important;
  min-width:0;
  height:76px!important;
  border:1px solid #303943!important;
  border-radius:10px!important;
  background:#151c24!important;
  overflow:hidden;
}
.chat-media-picker img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gif-picker{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.chat-media-picker.gif-picker button{
  position:relative;
  height:112px!important;
  padding:0!important;
  border-radius:9px!important;
  background:#111820!important;
}
.chat-media-picker.gif-picker img{object-position:center}
.gif-picker-label{
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  padding:4px 7px;
  border-radius:6px;
  background:#0b0f14d9;
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-media-picker.gif-picker button:hover{border-color:var(--buzz-accent)!important}
.sticker-picker button span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:2.15rem;
  line-height:1;
}
.sticker-art{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  background-image:var(--sticker-sheet);
  background-size:400% 400%;
  background-position:var(--sticker-x) var(--sticker-y);
  background-repeat:no-repeat;
}
.text-sticker::after{
  content:attr(data-sticker-text);
  position:absolute;
  left:50%;
  bottom:4%;
  width:84%;
  transform:translateX(-50%);
  padding:3px 5px;
  border:1px solid #fff9;
  border-radius:999px;
  background:#111820de;
  color:#fff;
  font-family:inherit;
  font-size:.72rem;
  font-weight:900;
  line-height:1.05;
  text-align:center;
  overflow-wrap:anywhere;
  text-shadow:none;
}
.sticker-picker .text-sticker::after{font-size:.5rem;padding:2px 3px}
.chat-gif{
  display:block;
  width:min(320px,70vw);
  max-height:320px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 14px 30px #0008;
}
.chat-sticker{
  font-size:4rem;
  line-height:1;
  filter:drop-shadow(0 12px 20px #0008);
}
.chat-sticker .sticker-art{width:132px;height:132px}
.chat-sticker .text-sticker::after{font-size:.8rem;opacity:0;transition:opacity .16s ease}
.chat-sticker:hover .text-sticker::after{opacity:1}

.composer-emoji-picker .emoji-grid{
  width:100%;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:7px!important;
  padding:8px!important;
  box-sizing:border-box;
  scrollbar-gutter:stable;
}
.composer-emoji-picker .emoji-grid button{
  width:100%!important;
  height:40px!important;
  border-color:#35414c!important;
  border-radius:10px!important;
  background:#1b242d!important;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  font-size:1.22rem!important;
}
.buzz-emoji-art{
  display:block;
  width:100%;
  height:100%;
  background-image:var(--buzz-emoji-sheet);
  background-size:400% 400%;
  background-position:var(--buzz-emoji-x) var(--buzz-emoji-y);
  background-repeat:no-repeat;
}
.quick-react .buzz-emoji-art{width:24px;height:24px}
.reaction-summary .buzz-emoji-art{display:inline-block;width:16px;height:16px;vertical-align:middle}
.composer-emoji-picker .emoji-grid button:hover{
  border-color:var(--buzz-accent)!important;
  background:#293541!important;
  transform:translateY(-1px) scale(1.04);
}
.emoji-picker-empty{
  display:grid;
  place-items:center;
  min-height:120px;
  color:#aeb8c2;
  font-size:.86rem;
}
.selected-contact-chips img{
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
}
.chat-main{min-width:0}
.chat-main strong,.chat-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-main strong{display:flex;align-items:center;gap:7px;min-width:0}
.chat-main strong .chat-kind{flex:0 0 auto;padding:2px 7px;border-radius:999px;background:#11182014;color:#59636f;font-size:.68rem;font-weight:900;text-transform:uppercase}
.empty-chat-state{min-height:calc(100vh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;color:#66707a}
.empty-chat-state img{width:170px;height:170px;object-fit:contain;margin-bottom:20px}
.empty-chat-state h2{margin:0 0 8px;color:#15191e;font-size:1.8rem}
.empty-chat-state p{max-width:420px;line-height:1.5;margin:0}
.communities-page{max-width:none;width:100%;min-height:100vh}
.community-create-panel{display:grid;gap:16px;max-width:840px;margin:0 auto}
.community-create-form{display:grid;gap:12px}
.community-create-form .primary{justify-self:start;width:auto;min-width:190px}
.community-create-form .event-contact-list{display:grid;gap:8px;max-height:300px;overflow:auto}
.selected-contact-chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 8px}
.selected-contact-chips button{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--buzz-accent) 62%,#303943);border-radius:999px;background:#111820;color:#f7f9fb;padding:7px 10px;font-weight:800}
.selected-contact-chips button span{color:var(--buzz-accent);font-weight:900}
.community-member-picker{display:grid;gap:8px;max-height:260px;overflow:auto}
.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:18px}
.community-tile{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:86px;padding:14px;border:1px solid #d8dde2;border-radius:8px;background:#fff;color:#111820;text-align:left;cursor:pointer}
.community-tile:hover{border-color:var(--buzz-accent);box-shadow:0 10px 26px #1118201a}
.community-tile span{grid-row:1 / span 2;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#111820;color:var(--buzz-accent);font-weight:900}
.community-tile-avatar{grid-row:1 / span 2;width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;background:#111820}
.community-tile strong,.community-tile small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-tile small{color:#5f6873}
.community-tile button{grid-column:3;grid-row:1 / span 2;border:0;border-radius:999px;padding:8px 10px;background:var(--buzz-accent);color:var(--buzz-on-accent,#111820);font-size:.82rem;font-weight:900}
.community-overview-head{align-items:flex-start}
.community-detail-head{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto;gap:14px;align-items:center;position:relative}
.community-detail-head>div:not(.community-profile-avatar){min-width:0}
.community-detail-head h2,.community-detail-head p,.community-detail-head small{overflow:hidden;text-overflow:ellipsis}
.community-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.community-actions .primary,.community-actions .secondary{width:auto!important;margin-top:0!important;white-space:nowrap}
.community-menu-host{position:relative;display:grid;place-items:center}
.community-context-menu{right:0;top:44px}
.community-settings-form{display:grid;gap:12px}
.community-settings-form .primary{justify-self:start;width:auto;min-width:140px}
.settings-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-card-head h3{margin:0}
.settings-card-head .icon-button{width:36px;height:36px;border:0;border-radius:10px;background:#20272f;color:#fff}
.profile-editor-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.profile-editor-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-editor-actions .secondary{width:auto!important;margin-top:0!important}
.community-profile-avatar{width:54px;height:54px;display:grid;place-items:center;clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);background:#111820;color:var(--buzz-accent);font-weight:900;overflow:hidden;flex:0 0 auto}
.community-profile-avatar.large{width:96px;height:96px;font-size:1.7rem}
.community-profile-avatar img{width:100%;height:100%;object-fit:cover}
.chat-header{min-width:0}
.chat-header .avatar{flex:0 0 auto}
.chat-title{min-width:0;overflow:hidden}
.chat-title strong,.chat-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-community-link{flex:0 0 auto;width:auto!important;min-width:0!important;margin:0!important;padding:8px 12px!important}
.chat-header>.icon-button{flex:0 0 auto}
.community-empty{display:grid;gap:6px}
.invite-share-card{display:grid;gap:12px}
.invite-share-card h2{margin:0;font-size:1.25rem}
.invite-share-card p{margin:4px 0 0;color:#5f6873}
.copy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.copy-row input{min-width:0}
.copy-row .secondary,.qr-share .secondary{width:auto;margin-top:0;padding:10px 12px;border-radius:8px}
.qr-share{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.qr-share .buzzmeets-qr{margin:0}
.buzzmeets-qr svg{max-width:180px;height:auto}

@media (min-width: 900px){
  html,body,#app{height:100%;overflow:hidden}
  .app-root{height:100vh;min-height:100vh;padding-bottom:0;background:#0f1318}
  .messenger-shell{height:100vh;display:grid;grid-template-columns:72px minmax(320px,420px) minmax(0,1fr);background:#0f1318;overflow:hidden}
  .messenger-shell.no-list{grid-template-columns:72px minmax(0,1fr)}
  .messenger-shell.no-list .conversation-pane{display:none}
  .messenger-shell.no-list .workspace-pane{grid-column:2}
  .nav-rail{position:static;grid-column:1;height:100vh;flex-direction:column;justify-content:flex-start;gap:12px;padding:12px 10px;border-top:0;border-right:1px solid #252b31;background:#171b20}
  .rail-logo{display:block;width:44px;height:44px;object-fit:contain;background:#fff;border-radius:12px;padding:2px;margin-bottom:4px}
  .rail-spacer{display:block;flex:1}
  .conversation-pane{grid-column:2;min-width:0;height:100vh;border-right:1px solid #d8dde2;background:#fff;overflow:auto}
  .workspace-pane{grid-column:3;min-width:0;height:100vh;padding-bottom:0;background:#eef1f4;overflow:hidden}
  .workspace-pane>.content,.workspace-pane>.theme-page{max-width:none;height:100vh;min-height:100vh;overflow:auto;margin:0;padding:28px 34px}
  .chat-list-panel{height:100vh;min-height:100vh;overflow:auto;padding:24px 18px 18px}
  .chat-list-panel .page-head h1{font-size:1.9rem}
  .chat-list-panel .page-head p{display:none}
  .chat{min-height:72px}
  .avatar{width:50px;height:50px;clip-path:none;border-radius:50%;background:#222a31;color:var(--buzz-accent)}
  .avatar.small{width:44px;height:44px}
  .chat-page{position:relative;height:100vh;min-height:100vh;display:grid;grid-template-rows:72px minmax(0,1fr) 76px;padding-bottom:0;background:#e9edf0;overflow:hidden}
  .chat-header{position:static;height:72px;background:#20262d;color:#fff;border-bottom:1px solid #111820;padding:10px 18px}
  .chat-back{display:none}
  .timeline{max-width:none;width:100%;min-height:0;height:100%;overflow:auto;margin:0;padding:24px 7vw;background:#e9edf0;background-image:radial-gradient(#cbd1d6 1px,transparent 1px);background-size:22px 22px}
  .bubble{max-width:min(68%,720px);font-size:.98rem;line-height:1.38;box-shadow:0 1px 2px #00000018}
  .composer{position:static;height:76px;background:#20262d;padding:12px 18px}
  .composer textarea{height:48px;border-radius:24px;background:#fff;color:#111}
  .composer button{width:44px;height:44px;border-radius:22px;background:#2b323a;display:grid;place-items:center}
  .composer .send{background:var(--buzz-accent);color:#111}
  .attachment-sheet{left:auto;right:24px;bottom:88px;width:420px}
  .empty-chat-state{height:100vh;min-height:100vh;background:#eef1f4;border-bottom:6px solid var(--buzz-accent)}
}

@media (max-width: 899px){
  .messenger-shell{display:block}
  /* The mobile navigation is a persistent footer.  Keep every page and the
     message composer above it, including Android and iOS WebViews. */
  .messenger-shell{min-height:100dvh;padding-bottom:72px;background:#0f1318}
  .nav-rail{position:fixed!important;left:0;right:0;bottom:0;z-index:100}
  .workspace-pane{min-height:calc(100dvh - 72px);padding-bottom:0}
  .conversation-pane{min-height:calc(100dvh - 72px)}
  .chat-page{min-height:calc(100dvh - 72px);padding-bottom:0}
  .chat-page .composer{position:sticky;bottom:0;z-index:20}
  .news-alert{left:12px;right:12px;top:10px;grid-template-columns:1fr;padding:12px}.news-alert .primary{width:100%}.update-alert{left:12px;right:12px;top:118px;grid-template-columns:1fr;padding:12px}.update-alert .primary{width:100%}.news-layout{grid-template-columns:1fr}.news-detail{min-height:220px}
  .messenger-shell.show-list .conversation-pane{display:block}
  .messenger-shell.show-list .workspace-pane{display:none}
  .messenger-shell.show-workspace .conversation-pane{display:none}
  .messenger-shell.show-workspace .workspace-pane{display:block}
  .workspace-pane>.content{padding-bottom:88px}
  .chat-page{min-height:100vh}
  .chat-header{top:0}
}

/* Never fall back to light surfaces when the selected theme is dark.  These
   generic cards cover views shared by desktop, Android and iOS. */
.app-root.dark .login-page,
.app-root.dark .app-startup,
.app-root.dark .content,
.app-root.dark .communities-page,
.app-root.dark .settings-card,
.app-root.dark .workspace-card,
.app-root.dark .event-card,
.app-root.dark .community-tile,
.app-root.dark .contact-permission-card,
.app-root.system .login-page,
.app-root.system .app-startup,
.app-root.system .content,
.app-root.system .communities-page,
.app-root.system .settings-card,
.app-root.system .workspace-card,
.app-root.system .event-card,
.app-root.system .community-tile,
.app-root.system .contact-permission-card{background:#111820!important;color:#eef3f7!important}

.app-root.dark .content p,.app-root.dark .content small,
.app-root.system .content p,.app-root.system .content small{color:#aeb8c2!important}

@media (min-width: 900px){
  .messenger-shell{grid-template-columns:60px minmax(340px,392px) minmax(0,1fr);background:#0b0f14}
  .messenger-shell.no-list{grid-template-columns:60px minmax(0,1fr)}
  .messenger-shell.no-list .conversation-pane{display:none}
  .messenger-shell.no-list .workspace-pane{grid-column:2}
  .nav-rail{background:#171c22;border-right:1px solid #29313a;padding:10px 8px}
  .nav-rail button{width:40px;height:40px;border-radius:10px;color:#d3d9df;font-size:1.05rem}
  .nav-rail button.active,.nav-rail button:hover{background:#252d36;color:var(--buzz-accent)}
  .rail-logo{width:40px;height:40px;border-radius:10px}
  .conversation-pane{background:#11161d;border-right:1px solid #323b45}
  .chat-list-panel{background:#11161d;color:#eef2f5;padding:28px 16px 18px}
  .chat-list-panel .page-head h1{color:#eef2f5;font-size:1.65rem}
  .chat-list-panel .search{height:46px;border:1px solid #2b333d;background:#171d24;color:#c9d0d7}
  .chat-list-panel .search input{color:#eef2f5}
  .chat-list-panel .search input::placeholder{color:#8f99a3}
  .chat{min-height:70px;padding:12px;border-radius:10px;color:#eef2f5}
  .chat:hover{background:#171e26}
  .chat.selected{background:#1d252e}
  .chat.unread{background:#202812;box-shadow:inset 4px 0 0 var(--buzz-accent)}
  .chat.unread:hover{background:#263018}
  .chat.blocked{opacity:.64}
  .chat-menu-button:hover{background:#2c3540}
  .chat-main strong{color:#f4f7fa;font-size:.98rem}
  .chat-main span{color:#aab4be;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:205px}
  .chat.unread .chat-main span{color:#e3d39e}
  .chat-meta time{color:#aeb7c0;font-size:.72rem}
  .avatar{width:46px;height:46px;background:#222b34;color:var(--buzz-accent)}
  .workspace-pane{background:#0b0f14}
  .chat-page{height:100vh;min-height:100vh;display:grid;grid-template-rows:68px minmax(0,1fr) 72px;background:#0b0f14;padding-bottom:0}
  .chat-header{height:68px;background:#20272f;border-bottom:1px solid #303943;padding:10px 20px}
  .chat-title strong{font-size:1rem;color:#f3f6f8}
  .chat-title span{font-size:.72rem;color:#b7c1ca}
  .chat-header .icon-button{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:#eef3f7;font-size:1.18rem}
  .chat-header .icon-button:hover{background:#2c3540}
  .timeline{height:100%;padding:30px clamp(28px,6vw,86px) 26px;background:#0b0f14;background-image:none}
  .bubble-wrap{margin:10px 0;max-width:min(560px,62%)}
  .bubble-wrap.mine{margin-left:auto}
  .bubble-wrap.theirs{margin-right:auto}
  .bubble{max-width:100%;padding:10px 12px 7px;border-radius:9px;background:#f7f8fa;color:#111820;box-shadow:0 1px 2px #0005;font-size:.95rem;line-height:1.35}
  .mine .bubble{background:var(--buzz-accent);color:#111820;border-radius:9px}
  .bubble>span{display:block;overflow-wrap:anywhere}
  .message-meta{gap:6px;margin-top:5px;font-size:.68rem;line-height:1;color:#5c6470!important;opacity:1}
  .message-meta .direction{display:none}
  .message-meta .delivery{letter-spacing:0;padding-right:0;max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5c6470}
  .quick-react{display:flex;gap:6px;margin-top:5px;align-items:center}
  .quick-react button{width:30px;height:30px;border-radius:15px;border:1px solid #d8dee5;background:#fff;font-size:.95rem;box-shadow:0 2px 7px #0004}
  .reaction-summary{display:flex;gap:5px;margin-top:4px}
  .reaction-summary button{height:22px;border:1px solid #d8dee5;background:#fff;color:#111820;border-radius:11px;padding:1px 7px;font-size:.72rem;box-shadow:0 1px 4px #0003}
  .call-history{min-width:210px}
  .media-preview{width:min(360px,52vw)}
  .media-preview img,.media-preview video{max-height:360px}
  .voice-player{width:min(320px,52vw)}
  .voice-player audio{height:38px}
  .composer{height:72px;background:#20272f;border-top:1px solid #303943;padding:12px 20px}
  .composer textarea{height:46px;border-radius:20px;padding:11px 16px;background:#f7f8fa;color:#111820;font-size:1rem}
  .composer button{width:42px;height:42px;border-radius:21px;background:#303944;color:#eef3f7}
  .composer .send{background:var(--buzz-accent);color:#111820}
}

.app-root.dark .timeline,.app-root.system .timeline{background:#0b0f14}
.app-root.dark .bubble,.app-root.system .bubble{background:#202832;color:#eef3f7;box-shadow:0 1px 2px #0007}
.app-root.dark .mine .bubble,.app-root.system .mine .bubble{background:#8f6a16;color:#fff8e6}
.app-root.dark .message-meta,.app-root.system .message-meta{color:#b7c0ca!important}
.app-root.dark .mine .message-meta,.app-root.system .mine .message-meta{color:#f3ddb0!important}
.app-root.dark .quick-react button,.app-root.system .quick-react button,.app-root.dark .reaction-summary button,.app-root.system .reaction-summary button{background:#f5f7f9;color:#111820;border-color:#d8dee5}
.app-root.dark .media-preview,.app-root.system .media-preview{background:#111820;box-shadow:0 1px 2px #0008}
.profile-image{width:112px;height:112px;margin:0 auto 12px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.profile-image img{width:100%;height:100%;object-fit:cover}
.profile-image .avatar.profile{width:112px;height:112px;clip-path:none;border-radius:50%}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.profile-actions .secondary{margin-top:0}
.profile-message{margin-top:12px;color:#137333;font-weight:700}
@media(max-width:520px){.profile-actions{grid-template-columns:1fr}}
.avatar,.profile-image,.profile-image img,.profile-image .avatar.profile,.audio-call-avatar,.audio-call-avatar img{clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);border-radius:0}
.avatar-image{object-fit:cover;display:block}
.profile-image{background:#202832}
.profile-form{display:grid;gap:12px;text-align:left;margin-top:12px}
.profile-form label{display:grid;gap:6px;font-weight:800;color:inherit}
.profile-form input,.profile-form textarea{width:100%;border:1px solid #303943;border-radius:10px;background:#10161d;color:#f7f9fb;padding:11px 12px;outline:0}
.profile-form textarea{min-height:76px;resize:vertical}
.profile-form input:focus,.profile-form textarea:focus{border-color:var(--buzz-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--buzz-accent) 22%,transparent)}
.profile-crop-overlay{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;background:#05070bcc;backdrop-filter:blur(6px);padding:18px}
.profile-crop-panel{width:min(430px,calc(100vw - 28px));display:grid;gap:16px;padding:18px;border:1px solid #303943;border-radius:14px;background:#111820;color:#f7f9fb;box-shadow:0 24px 80px #000c}
.profile-crop-frame{width:min(340px,76vw);height:min(340px,76vw);justify-self:center;overflow:hidden;touch-action:none;cursor:grab;background:#05070b;clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%)}
.profile-crop-frame img{width:100%;height:100%;object-fit:cover;transform-origin:center;user-select:none;pointer-events:none}
.profile-crop-zoom{width:100%;accent-color:var(--buzz-accent)}
.profile-crop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.audio-call-avatar{border-radius:0}

.attachment-sheet{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:54px!important;
  width:min(390px,calc(100vw - 28px))!important;
  max-width:none!important;
  margin:0!important;
  padding:10px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  border:1px solid #303943;
  border-radius:16px!important;
  background:#171d24!important;
  box-shadow:0 16px 42px #0009!important;
}
.attachment-sheet::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:-8px;
  width:16px;
  height:16px;
  transform:rotate(45deg);
  background:#171d24;
  border-right:1px solid #303943;
  border-bottom:1px solid #303943;
}
.attachment-sheet button{
  min-height:66px;
  display:grid;
  grid-template-columns:38px minmax(84px,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  padding:10px!important;
  border-radius:12px!important;
  background:#252d36!important;
  color:#eef3f7!important;
  text-align:left;
}
.attachment-sheet button:hover{background:#303944!important}
.attachment-sheet .attach-icon{
  grid-row:1/3;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:color-mix(in srgb,var(--buzz-accent) 22%,#111820);
  color:var(--buzz-accent);
  font-size:1.08rem;
}
.attachment-sheet .attach-icon .line-icon{color:#fff}
.attachment-sheet strong{display:block;min-width:0;font-size:.88rem;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-sheet small{display:block;min-width:0;font-size:.7rem;color:#aeb8c2;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-root.native-windows .attachment-sheet{width:min(440px,calc(100vw - 32px))!important;grid-template-columns:1fr!important}.app-root.native-windows .attachment-sheet button{grid-template-columns:42px minmax(0,1fr)!important;min-height:76px}.app-root.native-windows .attachment-sheet .attach-icon{width:42px;height:42px}
.media-open{
  top:10px;
  right:10px;
  border-radius:999px;
  padding:6px 9px;
  background:#111820d9;
  color:#fff;
  backdrop-filter:blur(8px);
}

@media (min-width:900px){
  .attachment-sheet{
    left:0!important;
    bottom:54px!important;
  }
}
.composer-menu-host{position:relative;display:grid;place-items:center}
.load-older{
  display:block;
  margin:0 auto 18px;
  border:1px solid #303943;
  border-radius:999px;
  padding:9px 14px;
  background:#171d24;
  color:#d7dee6;
  font-weight:800;
}
.load-older:hover{border-color:var(--buzz-accent);color:var(--buzz-accent)}
.media-deck{position:relative;width:min(300px,62vw);height:230px;margin:2px 0 6px}
.media-deck:has(.video-preview){width:min(360px,82vw);height:min(320px,72vw)}
.media-deck-card{
  position:absolute;
  inset:0;
  transform:translate(calc(var(--deck-index) * -7px),calc(var(--deck-index) * 7px));
  z-index:calc(20 - var(--deck-index));
  display:grid;
  place-items:center;
  border:0;
  border-radius:12px;
  overflow:hidden;
  background:#151a20;
  color:#d7dee6;
  box-shadow:0 8px 22px #0006;
}
.media-deck-card img,.media-deck-card video{width:100%;height:100%;object-fit:cover}
.media-deck-card span{font-weight:800}
.media-loading{display:grid!important;place-items:center;width:100%;height:100%;min-height:72px}
.buzz-spinner{
  width:24px;
  height:24px;
  display:inline-block;
  border-radius:50%;
  border:3px solid #4a5562;
  border-top-color:var(--buzz-accent);
  animation:buzz-spin .8s linear infinite;
}
@keyframes buzz-spin{to{transform:rotate(360deg)}}
.app-startup{
  min-height:100vh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:14px;
  padding:28px;
  background:#0b0f14;
  color:#f7f9fb;
  text-align:center;
}
.app-startup img{
  width:min(240px,68vw);
  height:min(240px,68vw);
  object-fit:contain;
  filter:drop-shadow(0 24px 60px #0008);
}
.app-startup h1{
  margin:0;
  font-size:2.4rem;
  line-height:1;
  letter-spacing:0;
}
.chat-loading{
  position:sticky;
  top:8px;
  z-index:10;
  width:max-content;
  margin:0 auto 12px;
  padding:10px 14px;
  border:1px solid #303943;
  border-radius:999px;
  background:#171d24e6;
  box-shadow:0 8px 24px #0007;
}
.deck-count{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:30;
  padding:5px 8px;
  border-radius:999px;
  background:#111820d9;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
}
.media-viewer-overlay{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  background:#05070bcc;
  backdrop-filter:blur(6px);
}
.media-viewer-overlay img,.media-viewer-overlay video{
  max-width:min(92vw,1200px);
  max-height:86vh;
  border-radius:12px;
  background:#000;
  box-shadow:0 20px 70px #000b;
}
.media-viewer-close,.media-viewer-prev,.media-viewer-next{
  position:fixed;
  border:0;
  display:grid;
  place-items:center;
  background:#20272fd9;
  color:#fff;
  box-shadow:0 8px 28px #0008;
}
.media-viewer-close{right:22px;top:22px;width:44px;height:44px;border-radius:22px;font-size:1.4rem}
.media-viewer-prev,.media-viewer-next{top:50%;width:48px;height:64px;border-radius:14px;font-size:2rem}
.media-viewer-prev{left:22px}.media-viewer-next{right:22px}
.media-viewer-count{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  background:#20272fd9;
  color:#fff;
  font-weight:800;
}

@media(max-width:520px){
  .attachment-sheet{
    width:calc(100vw - 24px)!important;
    grid-template-columns:1fr!important;
  }
  .media-deck{width:70vw;height:210px}
}

.bubble:has(.media-deck){
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}
.bubble:has(.media-deck) .message-meta{
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:3px 7px;
  border-radius:999px;
  background:#20272fd9;
  color:#d7dee6!important;
  box-shadow:0 4px 14px #0006;
}
.mine .bubble:has(.media-deck) .message-meta{
  margin-left:auto;
}
.media-deck{
  width:min(330px,58vw);
  height:245px;
  margin:8px 18px 4px;
  overflow:visible;
  transform:translateZ(0);
}
.media-deck-card{
  border:1px solid #38424d;
  border-radius:13px;
  background:#151a20;
  box-shadow:0 14px 30px #0008;
  transition:transform .16s ease, box-shadow .16s ease;
}
.media-deck-card:nth-child(1){transform:translate(0,0) rotate(0deg);z-index:30}
.media-deck-card:nth-child(2){transform:translate(-20px,10px) rotate(-5deg);z-index:29}
.media-deck-card:nth-child(3){transform:translate(-38px,22px) rotate(-9deg);z-index:28}
.media-deck-card:nth-child(4){transform:translate(-54px,36px) rotate(-13deg);z-index:27}
.media-deck-card:nth-child(n+5){transform:translate(-66px,48px) rotate(-16deg);z-index:26}
.bubble-wrap.mine .media-deck-card:nth-child(2){transform:translate(20px,10px) rotate(5deg)}
.bubble-wrap.mine .media-deck-card:nth-child(3){transform:translate(38px,22px) rotate(9deg)}
.bubble-wrap.mine .media-deck-card:nth-child(4){transform:translate(54px,36px) rotate(13deg)}
.bubble-wrap.mine .media-deck-card:nth-child(n+5){transform:translate(66px,48px) rotate(16deg)}
.media-deck:hover .media-deck-card:nth-child(1){
  transform:translate(0,-4px) rotate(0deg);
  box-shadow:0 18px 38px #0009;
}
.deck-count{
  right:12px;
  bottom:12px;
  background:#20272fe6;
  border:1px solid #44505c;
  color:#f7f9fb;
}
.quick-react{
  gap:5px;
  opacity:1;
}
.quick-react button,
.reaction-summary button{
  border:1px solid #3a4652!important;
  background:#20272f!important;
  color:#f4f7fa!important;
  box-shadow:0 5px 16px #0006!important;
}
.quick-react button{
  width:30px;
  height:30px;
  padding:0;
  border-radius:15px;
  font-size:.92rem;
}
.reaction-summary button{
  height:24px;
  border-radius:12px;
  padding:2px 8px;
}
.quick-react button:hover,
.reaction-summary button:hover{
  border-color:var(--buzz-accent)!important;
  background:#2a333d!important;
  transform:translateY(-1px);
}
.composer{
  height:auto!important;
  min-height:70px;
  align-items:flex-end!important;
}
.composer textarea{
  min-height:44px!important;
  max-height:25vh!important;
  height:auto;
  overflow-y:hidden;
  resize:none;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.35;
}
.chat-page{
  grid-template-rows:68px minmax(0,1fr) auto!important;
}
.voice-player{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.voice-transcript-toggle{
  align-self:flex-start;
  border:0;
  border-radius:999px;
  padding:6px 10px;
  background:#e4e9ee;
  color:#1b242d;
  font-size:.8rem;
  font-weight:800;
  cursor:pointer;
}
.voice-transcript{
  margin:0;
  padding:8px 10px;
  border-radius:10px;
  background:#eef1f4;
  color:#1b242d;
  font-size:.88rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.voice-transcript.muted{
  color:#7a838d;
  font-style:italic;
}
.app-root.dark .voice-transcript,
.app-root.system .voice-transcript{
  background:#151b22;
  color:#e3e9ef;
}
.app-root.dark .voice-transcript-toggle,
.app-root.system .voice-transcript-toggle{
  background:#202832;
  color:#e3e9ef;
}
.app-root.dark .voice-transcript.muted,
.app-root.system .voice-transcript.muted{
  color:#9aa6b2;
}

.bubble-wrap:has(.media-deck){
  max-width:min(620px,72%);
  padding-bottom:8px;
}
.bubble-wrap:has(.media-deck) .quick-react{
  position:relative;
  z-index:60;
  margin-top:12px;
}
.media-deck{
  width:min(350px,58vw);
  height:310px;
  margin:10px 74px 2px 10px;
  isolation:isolate;
}
.bubble-wrap.mine .media-deck{
  margin:10px 10px 2px 74px;
}
.media-deck-card{
  transform-origin:center center;
  will-change:transform;
}
.media-deck-card:nth-child(1){transform:translate(0,0) rotate(0deg);z-index:20}
.media-deck-card:nth-child(2){transform:translate(34px,20px) rotate(5deg);z-index:19}
.media-deck-card:nth-child(3){transform:translate(66px,46px) rotate(10deg);z-index:18}
.media-deck-card:nth-child(4){transform:translate(94px,76px) rotate(15deg);z-index:17}
.media-deck-card:nth-child(n+5){transform:translate(116px,102px) rotate(19deg);z-index:16}
.bubble-wrap.mine .media-deck-card:nth-child(2){transform:translate(-34px,20px) rotate(-5deg)}
.bubble-wrap.mine .media-deck-card:nth-child(3){transform:translate(-66px,46px) rotate(-10deg)}
.bubble-wrap.mine .media-deck-card:nth-child(4){transform:translate(-94px,76px) rotate(-15deg)}
.bubble-wrap.mine .media-deck-card:nth-child(n+5){transform:translate(-116px,102px) rotate(-19deg)}
.media-deck-card:hover,
.bubble-wrap.mine .media-deck-card:hover{
  z-index:80;
  transform:translate(0,-10px) scale(1.04) rotate(0deg);
  box-shadow:0 24px 54px #000c;
}
@media(max-width:700px){
  .bubble-wrap:has(.media-deck){max-width:92%}
  .media-deck{width:70vw;height:285px;margin-right:42px}
  .bubble-wrap.mine .media-deck{margin-left:42px}
  .media-deck-card:nth-child(2){transform:translate(22px,18px) rotate(5deg)}
  .media-deck-card:nth-child(3){transform:translate(42px,40px) rotate(10deg)}
  .media-deck-card:nth-child(4){transform:translate(58px,64px) rotate(14deg)}
  .media-deck-card:nth-child(n+5){transform:translate(72px,84px) rotate(18deg)}
  .bubble-wrap.mine .media-deck-card:nth-child(2){transform:translate(-22px,18px) rotate(-5deg)}
  .bubble-wrap.mine .media-deck-card:nth-child(3){transform:translate(-42px,40px) rotate(-10deg)}
  .bubble-wrap.mine .media-deck-card:nth-child(4){transform:translate(-58px,64px) rotate(-14deg)}
  .bubble-wrap.mine .media-deck-card:nth-child(n+5){transform:translate(-72px,84px) rotate(-18deg)}
}

.bubble:has(.media-preview),
.bubble:has(.media-deck),
.bubble:has(.media-card.image),
.bubble:has(.media-card.video){
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}
.bubble:has(.media-preview) .message-meta,
.bubble:has(.media-deck) .message-meta,
.bubble:has(.media-card.image) .message-meta,
.bubble:has(.media-card.video) .message-meta{
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:3px 7px;
  border-radius:999px;
  background:#20272fd9;
  color:#d7dee6!important;
  box-shadow:0 4px 14px #0006;
}
.mine .bubble:has(.media-preview) .message-meta,
.mine .bubble:has(.media-deck) .message-meta,
.mine .bubble:has(.media-card.image) .message-meta,
.mine .bubble:has(.media-card.video) .message-meta{
  margin-left:auto;
}
.bubble-wrap:has(.media-preview),
.bubble-wrap:has(.media-card.image),
.bubble-wrap:has(.media-card.video){
  max-width:min(420px,64%);
}
.bubble-wrap:has(.media-preview) .quick-react,
.bubble-wrap:has(.media-card.image) .quick-react,
.bubble-wrap:has(.media-card.video) .quick-react{
  margin-top:8px;
}
.media-preview{
  border:0!important;
  border-radius:10px;
  box-shadow:0 14px 30px #0008;
}
.mine .media-preview.image-preview,
.mine .media-card.image{
  background:transparent!important;
}
.media-card.image,
.media-card.video{
  min-width:220px;
  min-height:150px;
  display:grid;
  place-items:center;
  border:1px solid #38424d;
  border-radius:13px;
  background:#151a20;
  box-shadow:0 14px 30px #0008;
}
.media-preview.video-preview,
.media-card.video,
.media-deck-card.video-preview{
  clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%)!important;
  border-radius:0!important;
}
.media-preview.video-preview{
  width:min(360px,82vw);
  height:min(320px,72vw);
  background:linear-gradient(145deg,var(--buzz-accent),#151a20 44%)!important;
  border:0!important;
  padding:3px!important;
}
.media-preview.video-preview video{
  width:100%;
  height:100%;
  max-height:none;
  aspect-ratio:auto;
  clip-path:inherit;
  background:#101418;
}
.media-preview.video-preview .media-open{
  top:auto;
  right:50%;
  bottom:16px;
  transform:translateX(50%);
  max-width:58%;
  white-space:nowrap;
}
.media-card.video{
  width:min(360px,82vw);
  height:min(320px,72vw);
  min-width:0;
  min-height:0;
  background:linear-gradient(145deg,var(--buzz-accent),#151a20 44%);
  padding:3px;
}
.media-card.video .media-loading{
  clip-path:inherit;
}
.media-deck-card.video-preview{
  border:0;
  background:linear-gradient(145deg,#f2a900,#151a20 44%);
  padding:3px;
}
.media-deck-card.video-preview video,
.media-deck-card.video-preview .media-loading{
  clip-path:inherit;
}
.media-preview.video-preview .media-uploading,
.media-card.video .media-uploading,
.media-deck-card.video-preview .media-uploading{
  clip-path:inherit;
  border-radius:0;
}
.media-uploading{
  position:absolute;
  inset:0;
  z-index:90;
  display:flex!important;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  border-radius:inherit;
  background:#0b0f148c;
  backdrop-filter:blur(2px);
  pointer-events:none;
}
.media-uploading::after{
  content:"Wird gesendet";
  padding:5px 8px;
  border-radius:999px;
  background:#20272fe6;
  color:#f7f9fb;
  font-size:.72rem;
  font-weight:800;
  box-shadow:0 6px 18px #0008;
}
.deck-uploading{
  inset:0;
  border-radius:16px;
}
@media(max-width:700px){
  .bubble-wrap:has(.media-preview),
  .bubble-wrap:has(.media-card.image),
  .bubble-wrap:has(.media-card.video){
    max-width:88%;
  }
}

.bubble-wrap{
  position:relative;
  overflow:visible;
}
.reaction-picker{
  position:absolute!important;
  left:0;
  right:auto;
  bottom:36px;
  z-index:95;
  margin:0!important;
  max-height:min(290px,42vh);
  overflow-y:auto;
}
.bubble-wrap.mine .reaction-picker{
  left:auto;
  right:0;
}
.reaction-picker.opens-down{
  top:36px;
  bottom:auto;
}
.reaction-picker.opens-down::after{
  top:-8px;
  bottom:auto;
  border-right:0;
  border-bottom:0;
  border-left:1px solid #303943;
  border-top:1px solid #303943;
}
.reaction-picker::before{
  display:none;
}
.reaction-picker::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:-8px;
  width:16px;
  height:16px;
  transform:rotate(45deg);
  background:#20272f;
  border-right:1px solid #303943;
  border-bottom:1px solid #303943;
}
.bubble-wrap.mine .reaction-picker::after{
  left:auto;
  right:22px;
}

.emoji-grid{
  grid-template-columns:repeat(7,32px)!important;
  gap:5px!important;
  width:286px;
  max-width:calc(100vw - 28px);
  padding:10px 14px 10px 10px!important;
  border-color:#34404b!important;
  border-radius:16px!important;
  background:#171d24!important;
  box-shadow:0 18px 42px #000a!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#6d7783 #20272f;
}
.emoji-grid::-webkit-scrollbar{width:8px;height:0}
.emoji-grid::-webkit-scrollbar-track{background:#20272f;border-radius:999px}
.emoji-grid::-webkit-scrollbar-thumb{background:#6d7783;border-radius:999px}
.emoji-grid button{
  width:32px!important;
  height:32px!important;
  border:1px solid #303943!important;
  border-radius:10px!important;
  background:#252d36!important;
  color:#f7f9fb!important;
  font-size:1rem!important;
  box-shadow:none!important;
}
.emoji-grid button:hover{
  border-color:var(--buzz-accent)!important;
  background:#303944!important;
  transform:translateY(-1px);
}
.composer-emoji-picker{
  left:-46px!important;
  bottom:56px!important;
  height:min(310px,calc(100vh - 150px));
  max-height:min(310px,calc(100vh - 150px))!important;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden!important;
}
.composer-emoji-picker:has(.media-picker-search){grid-template-rows:auto auto minmax(0,1fr)}
.composer-emoji-picker::after{
  left:64px!important;
  background:#171d24!important;
  border-right:1px solid #34404b!important;
  border-bottom:1px solid #34404b!important;
}
.composer-emoji-picker .emoji-grid,
.composer-emoji-picker .chat-media-picker{
  min-height:0;
  max-height:calc(100vh - 230px);
  overflow-y:auto;
}
.media-picker-search{
  width:100%;
  min-width:0;
  height:34px;
  border:1px solid #303943;
  border-radius:8px;
  padding:7px 10px;
  background:#151c24;
  color:#eef3f7;
  outline:0;
}
.media-picker-search:focus{border-color:var(--buzz-accent)}
.reaction-picker{
  max-height:min(246px,42vh)!important;
  width:286px!important;
  max-width:calc(100vw - 28px)!important;
  padding-right:14px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable;
}
.reaction-picker::after{
  background:#171d24!important;
  border-right:1px solid #34404b!important;
  border-bottom:1px solid #34404b!important;
}
@media(max-width:420px){
  .emoji-grid{
    grid-template-columns:repeat(6,32px)!important;
    width:249px;
  }
  .reaction-picker{width:249px!important}
  .composer-emoji-picker{left:-44px!important}
}

.workspace-pane>.content:not(.chat-list-panel),
.workspace-pane>.theme-page{
  background:#0b0f14!important;
  color:#eef3f7!important;
}
.workspace-pane>.content:not(.chat-list-panel) .page-head h1,
.workspace-pane>.theme-page .page-head h1{
  color:#f7f9fb;
}
.workspace-pane>.content:not(.chat-list-panel) .page-head p,
.workspace-pane>.theme-page .page-head p{
  color:#aeb8c2;
}
.workspace-pane .settings-card,
.workspace-pane .event-card,
.workspace-pane .workspace-card,
.workspace-pane .poll-card,
.workspace-pane .contact-permission-card{
  background:#171d24!important;
  border-color:#303943!important;
  color:#eef3f7!important;
  box-shadow:none;
}
.workspace-pane .event-input,
.workspace-pane .event-label input,
.workspace-pane .search input,
.workspace-pane input,
.workspace-pane textarea{
  background:#10161d!important;
  border-color:#303943!important;
  color:#f7f9fb!important;
  caret-color:#f7f9fb;
}
.workspace-pane .event-input::placeholder,
.workspace-pane input::placeholder,
.workspace-pane textarea::placeholder{
  color:#8f99a3!important;
}
.workspace-pane .event-label,
.workspace-pane .event-switch,
.workspace-pane .event-contact,
.workspace-pane .security-row,
.workspace-pane .security-device{
  border-color:#303943!important;
  color:#eef3f7!important;
}
.workspace-pane .event-main>span,
.workspace-pane .event-main>small,
.workspace-pane .event-status,
.workspace-pane .workspace-card span,
.workspace-pane .workspace-card small,
.workspace-pane .contact-permission-card p{
  color:#aeb8c2!important;
}
.workspace-pane .workspace-tabs button{
  background:#20272f!important;
  color:#d7dee6!important;
}
.workspace-pane .workspace-tabs button.active{
  background:var(--buzz-accent)!important;
  color:#111820!important;
}
.workspace-pane .poll-option{
  background:#10161d!important;
  border-color:#303943!important;
  color:#eef3f7!important;
}
.workspace-pane .secondary{
  background:#252d36!important;
  color:#eef3f7!important;
}

/* Contrast layer: keep user-selected theme colors while guaranteeing readable text. */
.primary,
.hex-button,
.center-hex,
.chat-meta b,
.event-date,
.event-chat,
.invite-button,
.conversation-security-panel button,
.workspace-card button,
.list-tabs button.active,
.workspace-tabs button.active,
.composer .send,
.mine .bubble{
  color:var(--buzz-on-accent,#111820)!important;
}

.brand-copy strong span,
.bottom-nav .active,
.nav-rail button.active,
.nav-rail button:hover,
.composer .send:not(.primary),
.audio-call-avatar span,
.conversation-security-panel p,
.event-countdown strong,
.load-older:hover{
  color:var(--buzz-accent-on-dark,var(--buzz-accent))!important;
}

.login-page h1 span,
.buzz-pill,
.current-device{
  color:var(--buzz-accent-on-light,#5f4200)!important;
}

.avatar{
  color:var(--buzz-accent-on-dark,var(--buzz-accent))!important;
}

.composer .send{
  color:var(--buzz-on-accent,#111820)!important;
}

.page-head p,
.login-page p,
.chat-main span,
.chat-meta time,
.event-main>span,
.event-main>small,
.event-status,
.contact-permission-card p,
.workspace-card span,
.workspace-card small,
.security-device-main span,
.security-device-main code,
.contact-section-title,
.empty-chat-state{
  color:#5f6873;
}

.chat.blocked{
  opacity:1;
}

.chat.blocked .chat-main,
.chat.blocked .chat-meta{
  opacity:.72;
}

.verified-phone{
  background:#e8f5e9;
  color:#17612b;
}

.profile-message{
  color:#17612b;
}

.revoked-device{
  color:#a92f2f;
}

.message-meta{
  opacity:.82;
}

.workspace-pane>.content:not(.chat-list-panel),
.workspace-pane>.theme-page{
  background:#eef1f4!important;
  color:#111820!important;
}

.workspace-pane>.content:not(.chat-list-panel) .page-head h1,
.workspace-pane>.theme-page .page-head h1{
  color:#111820;
}

.workspace-pane>.content:not(.chat-list-panel) .page-head p,
.workspace-pane>.theme-page .page-head p{
  color:#5f6873;
}

.workspace-pane .settings-card,
.workspace-pane .event-card,
.workspace-pane .workspace-card,
.workspace-pane .poll-card,
.workspace-pane .contact-permission-card{
  background:#fff!important;
  border-color:#d8dde2!important;
  color:#111820!important;
}

.workspace-pane .event-input,
.workspace-pane .event-label input,
.workspace-pane .search,
.workspace-pane .search input,
.workspace-pane input,
.workspace-pane textarea{
  background:#fff!important;
  border-color:#cfd6dd!important;
  color:#111820!important;
  caret-color:#111820;
}

.workspace-pane .event-input::placeholder,
.workspace-pane input::placeholder,
.workspace-pane textarea::placeholder{
  color:#68727d!important;
}

.workspace-pane .event-label,
.workspace-pane .event-switch,
.workspace-pane .event-contact,
.workspace-pane .security-row,
.workspace-pane .security-device{
  border-color:#d8dde2!important;
  color:#111820!important;
}

.workspace-pane .event-main>span,
.workspace-pane .event-main>small,
.workspace-pane .event-status,
.workspace-pane .workspace-card span,
.workspace-pane .workspace-card small,
.workspace-pane .contact-permission-card p{
  color:#5f6873!important;
}

.workspace-pane .workspace-tabs button{
  background:#e9ecef!important;
  color:#333!important;
}

.workspace-pane .poll-option{
  background:#fff!important;
  border-color:#d8dde2!important;
  color:#111820!important;
}

.workspace-pane .secondary{
  background:#252d36!important;
  color:#fff!important;
}

.app-root.dark .workspace-pane,
.app-root.system .workspace-pane{
  background:var(--buzz-dark-bg)!important;
}

.app-root.dark .chat-list-panel,
.app-root.system .chat-list-panel{
  background:var(--buzz-dark-surface)!important;
  color:#eef3f7!important;
}

.app-root.dark .workspace-pane>.content:not(.chat-list-panel),
.app-root.dark .workspace-pane>.theme-page,
.app-root.system .workspace-pane>.content:not(.chat-list-panel),
.app-root.system .workspace-pane>.theme-page{
  background:var(--buzz-dark-bg)!important;
  color:#eef3f7!important;
}

.app-root.dark .workspace-pane>.content:not(.chat-list-panel) .page-head h1,
.app-root.dark .workspace-pane>.theme-page .page-head h1,
.app-root.system .workspace-pane>.content:not(.chat-list-panel) .page-head h1,
.app-root.system .workspace-pane>.theme-page .page-head h1{
  color:#f7f9fb;
}

.app-root.dark .workspace-pane>.content:not(.chat-list-panel) .page-head p,
.app-root.dark .workspace-pane>.theme-page .page-head p,
.app-root.system .workspace-pane>.content:not(.chat-list-panel) .page-head p,
.app-root.system .workspace-pane>.theme-page .page-head p{
  color:#aeb8c2;
}

.app-root.dark .workspace-pane .settings-card,
.app-root.dark .workspace-pane .event-card,
.app-root.dark .workspace-pane .workspace-card,
.app-root.dark .workspace-pane .poll-card,
.app-root.dark .workspace-pane .community-tile,
.app-root.dark .workspace-pane .contact-permission-card,
.app-root.system .workspace-pane .settings-card,
.app-root.system .workspace-pane .event-card,
.app-root.system .workspace-pane .workspace-card,
.app-root.system .workspace-pane .poll-card,
.app-root.system .workspace-pane .community-tile,
.app-root.system .workspace-pane .contact-permission-card{
  background:var(--buzz-dark-surface)!important;
  border-color:var(--buzz-dark-elevated)!important;
  color:#eef3f7!important;
}

.app-root.dark .workspace-pane .event-input,
.app-root.dark .workspace-pane .event-label input,
.app-root.dark .workspace-pane .search,
.app-root.dark .workspace-pane .search input,
.app-root.dark .workspace-pane input,
.app-root.dark .workspace-pane textarea,
.app-root.system .workspace-pane .event-input,
.app-root.system .workspace-pane .event-label input,
.app-root.system .workspace-pane .search,
.app-root.system .workspace-pane .search input,
.app-root.system .workspace-pane input,
.app-root.system .workspace-pane textarea{
  background:#10161d!important;
  border-color:var(--buzz-dark-elevated)!important;
  color:#f7f9fb!important;
  caret-color:#f7f9fb;
}

.app-root.dark .workspace-pane .event-input::placeholder,
.app-root.dark .workspace-pane input::placeholder,
.app-root.dark .workspace-pane textarea::placeholder,
.app-root.system .workspace-pane .event-input::placeholder,
.app-root.system .workspace-pane input::placeholder,
.app-root.system .workspace-pane textarea::placeholder{
  color:#9aa6b2!important;
}

.app-root.dark .workspace-pane .event-label,
.app-root.dark .workspace-pane .event-switch,
.app-root.dark .workspace-pane .event-contact,
.app-root.dark .workspace-pane .security-row,
.app-root.dark .workspace-pane .security-device,
.app-root.system .workspace-pane .event-label,
.app-root.system .workspace-pane .event-switch,
.app-root.system .workspace-pane .event-contact,
.app-root.system .workspace-pane .security-row,
.app-root.system .workspace-pane .security-device{
  border-color:var(--buzz-dark-elevated)!important;
  color:#eef3f7!important;
}

.app-root.dark .workspace-pane .event-main>span,
.app-root.dark .workspace-pane .event-main>small,
.app-root.dark .workspace-pane .event-status,
.app-root.dark .workspace-pane .workspace-card span,
.app-root.dark .workspace-pane .workspace-card small,
.app-root.dark .workspace-pane .contact-permission-card p,
.app-root.system .workspace-pane .event-main>span,
.app-root.system .workspace-pane .event-main>small,
.app-root.system .workspace-pane .event-status,
.app-root.system .workspace-pane .workspace-card span,
.app-root.system .workspace-pane .workspace-card small,
.app-root.system .workspace-pane .contact-permission-card p{
  color:#aeb8c2!important;
}

.app-root.dark .workspace-pane .workspace-tabs button,
.app-root.system .workspace-pane .workspace-tabs button{
  background:#20272f!important;
  color:#d7dee6!important;
}

.app-root.dark .workspace-pane .poll-option,
.app-root.system .workspace-pane .poll-option{
  background:#10161d!important;
  border-color:var(--buzz-dark-elevated)!important;
  color:#eef3f7!important;
}

.app-root.dark .workspace-pane .secondary,
.app-root.system .workspace-pane .secondary{
  background:#252d36!important;
  color:#eef3f7!important;
}

.reaction-summary{position:relative;z-index:6}
.reaction-summary .reaction-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  overflow:visible;
}
.reaction-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  display:block;
  width:max-content;
  max-width:240px;
  padding:7px 9px;
  border:1px solid #303943;
  border-radius:8px;
  background:#111820;
  color:#f7f9fb;
  font-size:.72rem;
  font-weight:800;
  line-height:1.25;
  white-space:normal;
  box-shadow:0 10px 28px #0008;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
}
.reaction-summary .reaction-chip:hover .reaction-tooltip,
.reaction-summary .reaction-chip:focus-visible .reaction-tooltip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.app-root.dark .login-page h1 span,
.app-root.system .login-page h1 span{
  color:var(--buzz-accent-on-light,#5f4200)!important;
}

.sync-device-button{
  width:auto!important;
  min-width:76px;
  margin-top:0!important;
  padding:8px 10px!important;
  border-radius:10px!important;
}

.security-device{
  flex-wrap:wrap;
}

.security-device>button,
.security-device>.revoked-device{
  flex:0 0 auto;
}

.security-device-main{
  flex:1 1 220px;
}

.pairing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0;
}

.pairing-actions .primary,
.pairing-actions .secondary{
  width:auto!important;
  min-width:120px;
  margin-top:0!important;
}

.pairing-actions button:disabled,
.sync-device-button:disabled{
  opacity:.52;
  cursor:not-allowed;
}

.pairing-label{
  display:block!important;
  padding:8px 0!important;
  border-bottom:0!important;
  color:inherit!important;
}

.pairing-qr,
.pairing-review{
  margin:12px 0;
  padding:12px;
  border:1px solid #d8dde2;
  border-radius:12px;
  background:#f7f8fa;
  color:#111820;
}

.pairing-qr-code{
  display:grid;
  place-items:center;
  background:#fff!important;
}

.pairing-qr-code svg{
  width:min(280px,82vw);
  height:auto;
  display:block;
}

.pairing-raw{
  margin:10px 0;
  color:#5f6873;
}

.pairing-raw summary{
  cursor:pointer;
  font-weight:800;
}

.pairing-raw code{
  display:block;
  margin-top:8px;
  padding:10px;
  border-radius:10px;
  background:#f7f8fa;
  color:#111820;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:140px;
  overflow:auto;
}

.pairing-qr code,
.pairing-review code{
  display:block;
  max-height:150px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.pairing-review{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.security-concept p{
  color:#5f6873;
  line-height:1.55;
}

.pairing-status{
  margin:8px 0;
  color:#5f6873;
  line-height:1.4;
}

.pairing-manual-code{
  display:inline-block;
  margin:.2rem 0 .8rem;
  padding:.45rem .7rem;
  border-radius:.5rem;
  background:var(--surface-strong);
  color:var(--accent);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:1.45rem;
  letter-spacing:.16em;
}

.app-root.dark .pairing-qr,
.app-root.dark .pairing-review,
.app-root.system .pairing-qr,
.app-root.system .pairing-review{
  background:#10161d;
  border-color:#303943;
  color:#eef3f7;
}

.app-root.dark .pairing-qr-code,
.app-root.system .pairing-qr-code{
  background:#fff!important;
}

.app-root.dark .pairing-raw,
.app-root.system .pairing-raw{
  color:#aeb8c2;
}

.app-root.dark .pairing-status,
.app-root.system .pairing-status{
  color:#aeb8c2;
}

.app-root.dark .pairing-raw code,
.app-root.system .pairing-raw code{
  background:#10161d;
  color:#eef3f7;
}

@media(max-width:520px){
  .security-device{
    align-items:flex-start;
  }

  .security-device>button,
  .security-device>.revoked-device{
    margin-left:58px;
  }

  .pairing-actions .primary,
  .pairing-actions .secondary{
    flex:1 1 140px;
  }
}

@media (prefers-color-scheme: light){
  .app-root.system{
    background:#fff!important;
    color:#15191e!important;
  }

  .app-root.system .workspace-pane{
    background:#eef1f4!important;
  }

  .app-root.system .workspace-pane>.content:not(.chat-list-panel),
  .app-root.system .workspace-pane>.theme-page{
    background:#eef1f4!important;
    color:#111820!important;
  }

  .app-root.system .workspace-pane>.content:not(.chat-list-panel) .page-head h1,
  .app-root.system .workspace-pane>.theme-page .page-head h1{
    color:#111820!important;
  }

  .app-root.system .workspace-pane>.content:not(.chat-list-panel) .page-head p,
  .app-root.system .workspace-pane>.theme-page .page-head p{
    color:#5f6873!important;
  }

  .app-root.system .workspace-pane .settings-card,
  .app-root.system .workspace-pane .event-card,
  .app-root.system .workspace-pane .workspace-card,
  .app-root.system .workspace-pane .poll-card,
  .app-root.system .workspace-pane .contact-permission-card{
    background:#fff!important;
    border-color:#d8dde2!important;
    color:#111820!important;
  }

  .app-root.system .workspace-pane .event-input,
  .app-root.system .workspace-pane .event-label input,
  .app-root.system .workspace-pane .search,
  .app-root.system .workspace-pane .search input,
  .app-root.system .workspace-pane input,
  .app-root.system .workspace-pane textarea{
    background:#fff!important;
    border-color:#cfd6dd!important;
    color:#111820!important;
    caret-color:#111820;
  }

  .app-root.system .workspace-pane .event-input::placeholder,
  .app-root.system .workspace-pane input::placeholder,
  .app-root.system .workspace-pane textarea::placeholder{
    color:#68727d!important;
  }

  .app-root.system .workspace-pane .event-label,
  .app-root.system .workspace-pane .event-switch,
  .app-root.system .workspace-pane .event-contact,
  .app-root.system .workspace-pane .security-row,
  .app-root.system .workspace-pane .security-device{
    border-color:#d8dde2!important;
    color:#111820!important;
  }

  .app-root.system .workspace-pane .event-main>span,
  .app-root.system .workspace-pane .event-main>small,
  .app-root.system .workspace-pane .event-status,
  .app-root.system .workspace-pane .workspace-card span,
  .app-root.system .workspace-pane .workspace-card small,
  .app-root.system .workspace-pane .contact-permission-card p{
    color:#5f6873!important;
  }

  .app-root.system .workspace-pane .workspace-tabs button{
    background:#e9ecef!important;
    color:#333!important;
  }

  .app-root.system .workspace-pane .poll-option{
    background:#fff!important;
    border-color:#d8dde2!important;
    color:#111820!important;
  }

  .app-root.system .workspace-pane .secondary{
    background:#252d36!important;
    color:#fff!important;
  }

  .app-root.system .timeline{
    background:#e9edf0!important;
    color:#111820!important;
  }

  .app-root.system .bubble{
    background:#f7f8fa!important;
    color:#111820!important;
    box-shadow:0 1px 2px #00000018;
  }

  .app-root.system .mine .bubble{
    background:var(--buzz-accent)!important;
    color:var(--buzz-on-accent,#111820)!important;
  }

  .app-root.system .message-meta{
    color:#5c6470!important;
  }

  .app-root.system .mine .message-meta{
    color:var(--buzz-on-accent,#111820)!important;
  }

.app-root.system .quick-react button,
.app-root.system .reaction-summary button{
  background:#fff!important;
  color:#111820!important;
  border-color:#d8dee5!important;
}

/* Keep the common reactions within reach while the plus button opens the complete set. */
.quick-react{
  align-items:flex-end;
  min-height:66px;
}
.quick-react-more-host{
  position:relative;
  width:30px;
  height:30px;
  flex:0 0 30px;
}
.quick-react-suggestions{
  position:absolute;
  left:0;
  bottom:38px;
  z-index:61;
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  padding:4px;
  border:1px solid #3a4652;
  border-radius:18px;
  background:#171d24;
  box-shadow:0 8px 22px #0008;
  opacity:0;
  pointer-events:none;
  transform:translateY(5px) scale(.96);
  transform-origin:bottom left;
  transition:opacity .14s ease,transform .14s ease;
}
.bubble-wrap.mine .quick-react-suggestions{
  left:auto;
  right:0;
  transform-origin:bottom right;
}
.quick-react-more-host:hover .quick-react-suggestions,
.quick-react-more-host:focus-within .quick-react-suggestions{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.quick-react .quick-react-suggestions button{
  flex:0 0 30px;
}
.quick-react .quick-react-more{
  position:relative;
  z-index:62;
}

  .app-root.system .pairing-qr,
  .app-root.system .pairing-review{
    background:#f7f8fa!important;
    border-color:#d8dde2!important;
    color:#111820!important;
  }

  .app-root.system .pairing-qr-code{
    background:#fff!important;
  }

  .app-root.system .pairing-raw,
  .app-root.system .pairing-status{
    color:#5f6873!important;
  }

  .app-root.system .pairing-raw code{
    background:#f7f8fa!important;
    color:#111820!important;
  }
}

.app-root.dark .security-device-main span,
.app-root.dark .security-device-main code{
  color:#aeb8c2!important;
}

.app-root.dark .verified-phone{
  background:#12351f;
  color:#7ee89a;
}

.app-root.dark .profile-message{
  color:#7ee89a;
}

.app-root.dark .revoked-device{
  color:#ffb4b4;
}

.app-root.dark .security-concept p{
  color:#aeb8c2;
}

@media(prefers-color-scheme:dark){
  .app-root.system .security-device-main span,
  .app-root.system .security-device-main code{
    color:#aeb8c2!important;
  }

  .app-root.system .verified-phone{
    background:#12351f;
    color:#7ee89a;
  }

  .app-root.system .profile-message{
    color:#7ee89a;
  }

  .app-root.system .revoked-device{
    color:#ffb4b4;
  }

  .app-root.system .security-concept p{
    color:#aeb8c2;
  }
}

@media (min-width:900px){
  .app-root.light .messenger-shell{background:#f7f8fa}
  .app-root.light .nav-rail{background:#f7f8fa!important;border-right:1px solid #d8dde2}
  .app-root.light .nav-rail button{color:#2d3640}
  .app-root.light .conversation-pane,
  .app-root.light .chat-list-panel{background:#fff!important;color:#111820!important;border-color:#d8dde2}
  .app-root.light .chat-list-panel .page-head h1{color:#111820!important}
  .app-root.light .chat-list-panel .search{background:#f3f5f7!important;border-color:#d8dde2!important;color:#111820!important}
  .app-root.light .chat-list-panel .search input{color:#111820!important}
  .app-root.light .workspace-pane,
  .app-root.light .empty-chat-state{background:#eef1f4!important;color:#111820!important}
  .app-root.light .chat-page,
  .app-root.light .timeline{background:#e9edf0!important;color:#111820!important}
  .app-root.light .chat-header,
  .app-root.light .composer{background:#f7f8fa!important;color:#111820!important;border-color:#d8dde2!important}
  .app-root.light .chat-title strong,
  .app-root.light .chat-header .icon-button{color:#111820!important}
  .app-root.light .bubble{background:#fff!important;color:#111820!important}
  .app-root.light .mine .bubble{background:var(--buzz-accent)!important;color:var(--buzz-on-accent,#111820)!important}

  .app-root.dark .messenger-shell,
  .app-root.system .messenger-shell{background:var(--buzz-dark-bg)!important}
  .app-root.dark .nav-rail,
  .app-root.system .nav-rail,
  .app-root.dark .conversation-pane,
  .app-root.system .conversation-pane,
  .app-root.dark .chat-list-panel,
  .app-root.system .chat-list-panel{background:var(--buzz-dark-surface)!important}
  .app-root.dark .workspace-pane,
  .app-root.system .workspace-pane,
  .app-root.dark .chat-page,
  .app-root.system .chat-page,
  .app-root.dark .timeline,
  .app-root.system .timeline{background:var(--buzz-dark-bg)!important}
  .app-root.dark .chat-header,
  .app-root.system .chat-header,
  .app-root.dark .composer,
  .app-root.system .composer{background:var(--buzz-dark-elevated)!important;border-color:color-mix(in srgb,var(--buzz-dark-elevated) 74%,#ffffff)!important}
  .app-root.dark .bubble,
  .app-root.system .bubble{background:var(--buzz-dark-elevated)!important;color:#eef3f7!important}
  .app-root.dark .mine .bubble,
  .app-root.system .mine .bubble{background:var(--buzz-accent)!important;color:var(--buzz-on-accent,#111820)!important}
}

.app-root .bubble:has(.media-preview),
.app-root .bubble:has(.media-deck),
.app-root .bubble:has(.media-card.image),
.app-root .bubble:has(.media-card.video),
.app-root .bubble:has(.chat-gif),
.app-root .bubble:has(.chat-sticker){
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:inherit!important;
}

.app-root .bubble:has(.chat-gif) .message-meta,
.app-root .bubble:has(.chat-sticker) .message-meta{
  width:max-content;
  max-width:100%;
  margin-top:6px;
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  background:#20272fd9;
  color:#d7dee6!important;
  box-shadow:0 4px 14px #0006;
}
.app-root .bubble:has(.chat-sticker),
.app-root .mine .bubble:has(.chat-sticker){
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Final theme boundary: it intentionally sits after every component rule so
   a dark selection can never reveal a light workspace/card on mobile. */
.app-root.dark,
.app-root.dark .messenger-shell,
.app-root.dark .workspace-pane,
.app-root.dark .conversation-pane,
.app-root.dark .content,
.app-root.dark .communities-page,
.app-root.dark .empty-chat-state,
.app-root.dark .theme-page,
.app-root.dark .chat-page,
.app-root.dark .timeline,
.app-root.system,
.app-root.system .messenger-shell,
.app-root.system .workspace-pane,
.app-root.system .conversation-pane,
.app-root.system .content,
.app-root.system .communities-page,
.app-root.system .empty-chat-state,
.app-root.system .theme-page,
.app-root.system .chat-page,
.app-root.system .timeline{background:#0b0f14!important;color:#eef3f7!important}

.app-root.dark .settings-card,
.app-root.dark .workspace-card,
.app-root.dark .event-card,
.app-root.dark .community-tile,
.app-root.dark .poll-card,
.app-root.dark .contact-permission-card,
.app-root.system .settings-card,
.app-root.system .workspace-card,
.app-root.system .event-card,
.app-root.system .community-tile,
.app-root.system .poll-card,
.app-root.system .contact-permission-card{background:#171d24!important;color:#eef3f7!important;border-color:#303943!important}

/* A touch device always receives the persistent bottom navigation, even when
   its WebView reports a tablet-sized viewport. */
@media (hover:none) and (pointer:coarse){
  .messenger-shell{display:block!important;min-height:100dvh!important;padding-bottom:72px!important}
  .nav-rail{position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:72px!important;z-index:100!important;flex-direction:row!important;justify-content:space-around!important;border-top:1px solid #242a31!important;border-right:0!important}
  .rail-logo,.rail-spacer{display:none!important}
  .conversation-pane,.workspace-pane{height:auto!important;min-height:calc(100dvh - 72px)!important;padding-bottom:0!important}
}

/* Long names, links and descriptions cannot make cards wider than a phone. */
.settings-card,.workspace-card,.event-card,.community-tile,.contact-permission-card,
.settings-card *,.workspace-card *,.event-card *,.community-tile *,.contact-permission-card *{min-width:0;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:620px){
  .workspace-card,.event-card{align-items:flex-start;flex-wrap:wrap}
  .community-tile{grid-template-columns:48px minmax(0,1fr)}
  .community-tile button{grid-column:2;grid-row:auto;justify-self:start}
  .community-tile strong,.community-tile small{white-space:normal;overflow:visible;text-overflow:clip}
}

/* Hover-only quick reactions: a single horizontal row above the plus button. */
.quick-react{
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-end!important;
  min-height:30px!important;
  margin-top:6px!important;
}
.quick-react-more-host{
  position:relative!important;
  display:block!important;
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
}
.quick-react-suggestions{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:38px!important;
  z-index:61!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:5px!important;
  width:max-content!important;
  padding:4px!important;
  border:1px solid #3a4652!important;
  border-radius:18px!important;
  background:#171d24!important;
  box-shadow:0 8px 22px #0008!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(5px) scale(.96)!important;
  transform-origin:bottom left!important;
  transition:opacity .14s ease .28s,transform .14s ease .28s!important;
}
.bubble-wrap.mine .quick-react-suggestions{
  left:auto!important;
  right:0!important;
  transform-origin:bottom right!important;
}
.quick-react-more-host:hover .quick-react-suggestions,
.quick-react-more-host:focus-within .quick-react-suggestions,
.quick-react-suggestions:hover{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
  transition-delay:0s!important;
}
.quick-react-more-host.picker-open .quick-react-suggestions{
  opacity:0!important;
  pointer-events:none!important;
}
.quick-react-suggestions button{
  display:grid!important;
  flex:0 0 30px!important;
}
.reaction-picker{
  z-index:100!important;
}

/* A sticker has one deliberate hover label, independent of its visual caption. */
.chat-sticker{
  position:relative!important;
  display:inline-block!important;
}
.chat-sticker .text-sticker::after{
  display:none!important;
}
.chat-sticker::after{
  content:attr(data-sticker-label);
  position:absolute;
  left:50%;
  bottom:4px;
  z-index:4;
  max-width:calc(100% - 12px);
  padding:4px 9px;
  overflow:hidden;
  border:1px solid #aeb8c2;
  border-radius:999px;
  background:#171d24eb;
  color:#f7f9fb;
  font-size:.76rem;
  font-weight:800;
  line-height:1.1;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity .14s ease,transform .14s ease;
}
.chat-sticker:hover::after{
  opacity:1;
  transform:translate(-50%,0);
}

/* Standalone Buzz emojis are expressive messages, not tiny text inside a bubble. */
.app-root .bubble:has(.emoji-only-message),
.app-root .mine .bubble:has(.emoji-only-message){
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.emoji-only-message{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  min-height:88px;
}
.chat-message-emoji{
  display:block;
  width:88px;
  height:88px;
  background-image:var(--buzz-emoji-sheet);
  background-size:400% 400%;
  background-position:var(--buzz-emoji-x) var(--buzz-emoji-y);
  background-repeat:no-repeat;
  filter:drop-shadow(0 10px 16px #0008);
}
.emoji-kiss-arrive{animation:buzz-kiss-arrive .62s cubic-bezier(.16,.84,.33,1.25) both}
.emoji-heart-pulse{animation:buzz-heart-pulse .9s ease-in-out both}
.emoji-fire-flicker{animation:buzz-fire-flicker .82s ease-in-out both}
@keyframes buzz-kiss-arrive{
  0%{opacity:0;transform:translate(34px,18px) scale(.25) rotate(12deg)}
  70%{opacity:1;transform:translate(-4px,-3px) scale(1.12) rotate(-3deg)}
  100%{transform:translate(0) scale(1) rotate(0)}
}
@keyframes buzz-heart-pulse{
  0%,100%{transform:scale(1)}
  28%{transform:scale(1.22)}
  52%{transform:scale(.96)}
  74%{transform:scale(1.12)}
}
@keyframes buzz-fire-flicker{
  0%{transform:translateY(7px) scale(.78);opacity:.2}
  48%{transform:translateY(-3px) scale(1.1);opacity:1}
  70%{transform:translateY(1px) scale(.95)}
  100%{transform:translateY(0) scale(1)}
}

/* A resized desktop client must never cut off a page (notably login and setup).
   The messenger panes keep their own scroll areas; other views use the window. */
@media (min-width:900px){
  html,body,#app{overflow-x:hidden;overflow-y:auto}
  .app-root:not(:has(.messenger-shell)){overflow-y:auto}
}

/* Android WebView can report a desktop-sized viewport. Native clients always
   use the mobile shell so the footer remains fixed and pages scroll normally. */
.app-root.native-client:not(.native-windows) .messenger-shell{display:block!important;min-height:100dvh!important;padding-bottom:calc(72px + max(24px,env(safe-area-inset-bottom,0px)))!important}
.app-root.native-client:not(.native-windows) .nav-rail{position:fixed!important;left:0!important;right:0!important;bottom:var(--buzz-keyboard-offset,0px)!important;height:calc(72px + max(24px,env(safe-area-inset-bottom,0px)))!important;padding-bottom:max(24px,env(safe-area-inset-bottom,0px))!important;z-index:100!important;flex-direction:row!important;justify-content:space-around!important;border-top:1px solid #242a31!important;border-right:0!important}
.app-root.native-client:not(.native-windows) .rail-logo,.app-root.native-client:not(.native-windows) .rail-spacer{display:none!important}
.mobile-settings-nav{display:none}
.mobile-settings-links{display:grid;gap:10px;max-width:620px}.mobile-settings-links button{display:flex;align-items:center;gap:14px;width:100%;padding:15px;border:1px solid #27313b;border-radius:14px;background:#151b22;color:inherit;text-align:left}.mobile-settings-links .line-icon{flex:0 0 28px}.mobile-settings-links span:last-child{display:grid;gap:3px}.mobile-settings-links small{opacity:.68}
.app-root.native-client:not(.native-windows) .nav-rail>button[title="Mitteilungen"],.app-root.native-client:not(.native-windows) .nav-rail>button[title="Sicherheit"],.app-root.native-client:not(.native-windows) .nav-rail>button[title="Profil"],.app-root.native-client:not(.native-windows) .nav-rail>button[title="Theme"]{display:none!important}.app-root.native-client:not(.native-windows) .nav-rail>.mobile-settings-nav{display:flex!important}
.app-root.native-client:not(.native-windows) .conversation-pane,.app-root.native-client:not(.native-windows) .workspace-pane{height:auto!important;min-height:calc(100dvh - 72px - max(24px,env(safe-area-inset-bottom,0px)))!important;padding-bottom:0!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-list .conversation-pane{display:block!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-list .workspace-pane{display:none!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace .conversation-pane{display:none!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace .workspace-pane{display:block!important}
.app-root.native-client:not(.native-windows) .workspace-pane>.content{padding-bottom:88px!important}
.app-root.native-client:not(.native-windows) .chat-page{min-height:100dvh!important;padding-bottom:142px!important}
.app-root.native-client:not(.native-windows) .chat-page .timeline{padding-bottom:82px!important}
.app-root.native-client:not(.native-windows) .chat-page .composer{position:fixed!important;left:0!important;right:0!important;bottom:calc(72px + var(--buzz-keyboard-offset,0px))!important;z-index:110!important}
.app-root.native-client:not(.native-windows) .chat-page .composer{display:grid!important;grid-template-columns:42px 42px minmax(0,1fr) 42px 44px!important;gap:6px!important;padding:10px 8px!important;align-items:center!important}
.app-root.native-client:not(.native-windows) .chat-page .composer textarea{width:100%!important;min-width:0!important;margin:0!important}
.app-root.native-client:not(.native-windows) .chat-page .composer .record,.app-root.native-client:not(.native-windows) .chat-page .composer .send{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;margin:0!important;flex-shrink:0!important}
.app-root.native-client:not(.native-windows) .chat-page .composer .send{display:grid!important;visibility:visible!important;opacity:1!important;background:var(--buzz-accent)!important;border:0!important}
/* A chat owns the full bottom area.  Showing the global footer beneath the
   composer wastes space and lets it peek through on Android and iPhone. */
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace:has(.chat-page) .nav-rail{display:none!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace:has(.chat-page){padding-bottom:0!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace:has(.chat-page) .chat-page{padding-bottom:86px!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace:has(.chat-page) .chat-page .timeline{
  /* The composer is already fixed to the chat's bottom edge. The general
     180px mobile reserve left a visible dead zone and made the last sticker
     appear clipped above the input row. */
  padding-bottom:82px!important;
}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace:has(.chat-page) .chat-page .composer{
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  grid-template-columns:36px 36px minmax(0,1fr) 38px 46px!important;
  gap:3px!important;
  padding:8px 6px!important;
}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace:has(.chat-page) .chat-page .composer .record{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
.app-root.native-client:not(.native-windows) .messenger-shell.show-workspace:has(.chat-page) .chat-page .composer .send{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
.app-root.native-client .chat-page .composer .record.recording{
  position:relative;
  overflow:visible;
  clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);
  background-color:#d92d3b!important;
  background-image:linear-gradient(30deg,#ffb900 12%,transparent 12.5%,transparent 87%,#ffb900 87.5%,#ffb900),linear-gradient(150deg,#ffb900 12%,transparent 12.5%,transparent 87%,#ffb900 87.5%,#ffb900),linear-gradient(30deg,#ffb900 12%,transparent 12.5%,transparent 87%,#ffb900 87.5%,#ffb900),linear-gradient(150deg,#ffb900 12%,transparent 12.5%,transparent 87%,#ffb900 87.5%,#ffb900)!important;
  background-size:16px 28px!important;
  background-position:0 0,0 0,8px 14px,8px 14px!important;
  box-shadow:0 0 0 3px #f2a900,0 0 20px #f2a90099!important;
  animation:buzz-native-recording-hive 1.05s ease-in-out infinite!important;
}
@keyframes buzz-native-recording-hive{50%{transform:scale(1.1);box-shadow:0 0 0 5px #f2a900,0 0 28px #f2a900bb!important}}
.app-root.native-client .community-detail-head{grid-template-columns:auto 54px minmax(0,1fr)!important;gap:10px!important;padding:12px!important}
.app-root.native-client .community-detail-head .community-actions{grid-column:1 / -1!important;justify-content:flex-start!important;width:100%!important}
.app-root.native-client .community-detail-head .community-actions .primary,.app-root.native-client .community-detail-head .community-actions .secondary{flex:1 1 120px!important;min-width:0!important}
/* Android's three-button system navigation is not reported as a CSS safe-area
   inset by some WebViews. Keep all Buzz controls above it unconditionally. */
.app-root.native-android .messenger-shell{padding-bottom:calc(72px + max(48px,env(safe-area-inset-bottom,0px)))!important}
.app-root.native-android .nav-rail{bottom:max(48px,env(safe-area-inset-bottom,0px))!important;height:72px!important;padding-bottom:0!important}
.app-root.native-android .conversation-pane,.app-root.native-android .workspace-pane{min-height:calc(100dvh - 120px)!important}
.app-root.native-android .chat-page{padding-bottom:190px!important}
.app-root.native-android .chat-page .composer{bottom:calc(120px + var(--buzz-keyboard-offset,0px))!important}
/* Fallback for WebViews that still report zero safe-area insets although the
   status bar overlays their viewport. Native insets normally make this a
   no-op, but the fallback keeps the first actionable row visible. */
.app-root.native-android .workspace-pane>.content,.app-root.native-android .conversation-pane>.content{padding-top:max(44px,calc(env(safe-area-inset-top,0px) + 18px))!important}
.app-root.native-android .chat-page .chat-header{min-height:max(76px,calc(68px + env(safe-area-inset-top,0px)))!important;padding-top:max(20px,calc(env(safe-area-inset-top,0px) + 8px))!important}
/* Every Android area uses the same bounded workspace as Chats.  Pages such as
   Events and BuzzMeets scroll inside this space instead of pushing the global
   navigation out of the viewport. */
.app-root.native-client:not(.native-windows),.app-root.native-client:not(.native-windows) body{min-height:100svh!important;height:auto!important;overflow:hidden!important}
.app-root.native-client:not(.native-windows) .messenger-shell{min-height:100svh!important;height:auto!important;overflow:hidden!important}
.app-root.native-client:not(.native-windows) .conversation-pane,.app-root.native-client:not(.native-windows) .workspace-pane{height:calc(100svh - 120px)!important;max-height:calc(100svh - 120px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
.app-root.native-client:not(.native-windows) .workspace-pane>.content,.app-root.native-client:not(.native-windows) .conversation-pane>.content{
  min-height:100%!important;
  padding-top:max(28px,calc(env(safe-area-inset-top,0px) + 18px))!important;
  padding-bottom:112px!important;
}
/* Chat has its own header instead of a .content page, so it receives the
   same breathing room independently of the active Android screen. */
.app-root.native-client:not(.native-windows) .chat-page .chat-header{
  height:auto!important;
  min-height:calc(68px + env(safe-area-inset-top,0px))!important;
  padding-top:max(8px,calc(env(safe-area-inset-top,0px) + 8px))!important;
}
.app-root.native-client:not(.native-windows) .chat-page .chat-header{gap:5px!important;padding-left:8px!important;padding-right:8px!important}.app-root.native-client:not(.native-windows) .chat-page .chat-header .avatar{width:38px!important;height:38px!important}.app-root.native-client:not(.native-windows) .chat-page .chat-title{min-width:0!important;max-width:none!important}.app-root.native-client:not(.native-windows) .chat-page .chat-header>.icon-button{width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;font-size:1rem!important}.app-root.native-client:not(.native-windows) .chat-page .chat-header .chat-back{width:30px!important;min-width:30px!important}

/* On Android the IME consumes a large part of the WebView.  Do not leave the
   app navigation between the composer and the keyboard; give the text editor
   its own full-width row instead. */
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .nav-rail{display:none!important}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .messenger-shell{padding-bottom:0!important}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .conversation-pane,
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .workspace-pane{height:100dvh!important;max-height:100dvh!important}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page{padding-bottom:122px!important}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page .timeline{padding-bottom:220px!important}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page .composer{
  bottom:var(--buzz-keyboard-offset)!important;
  grid-template-columns:42px 42px minmax(0,1fr) 42px 48px!important;
  grid-template-areas:
    "input input input input input"
    "attachment emoji spacer record send"!important;
  min-height:124px!important;
  align-items:center!important;
}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page .composer .attachment-menu{grid-area:attachment}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page .composer .emoji-menu{grid-area:emoji}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page .composer textarea{
  grid-area:input;
  min-height:58px!important;
  max-height:30vh!important;
  padding:12px 16px!important;
  font-size:1.05rem!important;
}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page .composer .record{grid-area:record}
.buzz-keyboard-open .app-root.native-client:not(.native-windows) .chat-page .composer .send{grid-area:send}

/* The global desktop picker rules cap every emoji tile at 32px.  Native
   Android needs square, touch-sized cells so sprite sheets retain their
   intended proportions. */
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid{
  grid-template-columns:repeat(6,44px)!important;
  justify-content:center;
  width:100%!important;
  max-width:100%!important;
  gap:7px!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid button{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  aspect-ratio:1 / 1!important;
  padding:5px!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .buzz-emoji-art{
  width:100%!important;
  height:100%!important;
  aspect-ratio:1 / 1!important;
  background-size:400% 400%!important;
}
/* Five generous tiles fit consistently on narrow Android and iPhone screens;
   six fixed 44px tiles overflowed and squeezed the emoji artwork. */
.app-root.native-client:not(.native-windows) .composer-emoji-picker{
  width:min(calc(100vw - 18px),340px)!important;
  max-width:calc(100vw - 18px)!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid button{
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:48px!important;
  aspect-ratio:1 / 1!important;
  padding:5px!important;
}
.chat-popover-dismiss{position:fixed!important;inset:0!important;z-index:35!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;cursor:default!important}

/* The dismissal layer must sit behind the open control.  A child z-index
   cannot escape the composer/header stacking context, so elevate the host. */
.chat-page:has(.composer-emoji-picker)>.composer,
.chat-page:has(.attachment-sheet)>.composer,
.chat-page:has(.chat-poll-composer)>.composer,
.chat-header:has(.context-menu){z-index:80!important}
.chat-page:has(.composer-emoji-picker)>.composer,
.chat-page:has(.attachment-sheet)>.composer,
.chat-page:has(.chat-poll-composer)>.composer{z-index:80!important}
.composer-emoji-picker,.attachment-sheet,.chat-poll-composer,.context-menu,.reaction-picker{z-index:90!important}

/* Keep the sprite canvas square.  The previous fluid cell height could be
   enlarged by the touch minimum while its width stayed fractional. */
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid{
  grid-template-columns:repeat(5,minmax(48px,1fr))!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid button{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  display:grid!important;
  place-items:center!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .buzz-emoji-art{
  width:calc(100% - 8px)!important;
  height:calc(100% - 8px)!important;
  aspect-ratio:1 / 1!important;
  margin:auto!important;
  background-size:400% 400%!important;
}

/* Voice recording is a mode of the complete mobile composer, rather than a
   red microphone next to otherwise unrelated controls. */
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording{
  border-top:2px solid var(--buzz-accent)!important;
  background-color:#3a1118!important;
  background-image:linear-gradient(30deg,#f2a9002e 12%,transparent 12.5%,transparent 87%,#f2a9002e 87.5%,#f2a9002e),linear-gradient(150deg,#f2a9002e 12%,transparent 12.5%,transparent 87%,#f2a9002e 87.5%,#f2a9002e)!important;
  background-size:22px 38px!important;
  animation:buzz-voice-composer 1.1s ease-in-out infinite!important;
}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording textarea{
  background:#230f14!important;
  color:#fff4f4!important;
  border:1px solid #f2a90088!important;
  font-weight:700;
}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .attachment-menu,
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .emoji-menu{opacity:.38;pointer-events:none}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .record,
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .discard-voice{
  display:grid!important;
  place-items:center;
  background:#f2a900!important;
  color:#171018!important;
  border:2px solid #fff4cf!important;
  box-shadow:0 0 0 3px #f2a90055,0 0 18px #f2a90099!important;
}
.voice-send-icon{position:relative;display:block;width:22px;height:20px}
.voice-send-icon::after{background:#fff4cf!important}
.voice-trash-icon{position:relative;width:15px;height:15px;display:block;border:2px solid currentColor;border-top:0;border-radius:1px}
.voice-trash-icon::before{content:"";position:absolute;left:-3px;top:-5px;width:17px;height:2px;border-radius:2px;background:currentColor}
.voice-trash-icon::after{content:"";position:absolute;left:4px;top:-8px;width:4px;height:3px;border:2px solid currentColor;border-bottom:0;border-radius:2px 2px 0 0}
@keyframes buzz-voice-composer{50%{border-top-color:#fff2b8!important;box-shadow:inset 0 4px 18px #f2a90038}}
.composer.voice-recording textarea{display:none!important}
.voice-recording-timer{flex:1;min-width:0;height:46px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 15px;border:2px solid var(--buzz-accent);border-radius:20px;background:#241a07;color:#fff4cf;font-variant-numeric:tabular-nums;font-weight:850;letter-spacing:.02em;box-shadow:0 0 0 2px #f2a90044,0 0 22px #f2a90088;animation:buzz-voice-input 1.1s ease-in-out infinite}
.voice-recording-dot{width:9px;height:9px;border-radius:50%;background:var(--buzz-accent);box-shadow:0 0 10px var(--buzz-accent);animation:buzz-voice-dot 1.1s ease-in-out infinite}
@keyframes buzz-voice-input{50%{border-color:#fff4cf;box-shadow:0 0 0 5px #f2a90033,0 0 30px #f2a900aa}}
@keyframes buzz-voice-dot{50%{opacity:.35;transform:scale(.72)}}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .voice-recording-timer{grid-column:3;background:#230f14!important;border-color:var(--buzz-accent)!important;color:#fff4cf!important}
/* Native WebViews can create a stacking context above fixed children.  Calls
   and their controls must always cover the message composer. */
.app-root.native-client:not(.native-windows) .call-overlay{z-index:40000!important;padding:18px 12px max(18px,env(safe-area-inset-bottom,0px))!important}
.app-root.native-client:not(.native-windows) .call-controls.meet-controls{z-index:40001!important;max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important}
.app-root.native-client:not(.native-windows) .call-controls.direct-call-controls{z-index:40001!important;overflow:visible!important;flex-wrap:nowrap!important}
/* A poll is a compact modal on phone-sized screens; the desktop anchored form
   otherwise overflows the composer and leaves its controls unreachable. */
@media(max-width:700px){
  .app-root.native-client:not(.native-windows) .chat-poll-composer{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-height:calc(100dvh - 132px)!important;overflow:auto!important;z-index:40010!important}
  .app-root.native-client:not(.native-windows) .chat-poll-composer>div{flex-wrap:wrap!important}
  .app-root.native-client:not(.native-windows) .chat-poll-composer .primary,.app-root.native-client:not(.native-windows) .chat-poll-composer .secondary{flex:1 1 130px!important;min-width:0!important}
}
@media(max-width:700px){.community-detail-head{grid-template-columns:auto 54px minmax(0,1fr)!important;gap:10px!important;padding:12px!important}.community-detail-head .community-actions{grid-column:1 / -1!important;justify-content:flex-start!important;width:100%!important}.community-detail-head .community-actions .primary,.community-detail-head .community-actions .secondary{flex:1 1 120px!important;min-width:0!important}}
/* Native event and BuzzMeet pages must remain interactive above the fixed
   mobile navigation shell. */
.app-root.native-client:not(.native-windows) .event-workspace,
.app-root.native-client:not(.native-windows) .meet-list-panel{position:relative!important;z-index:2!important;pointer-events:auto!important}
.app-root.native-client:not(.native-windows) .event-workspace button,
.app-root.native-client:not(.native-windows) .event-workspace input,
.app-root.native-client:not(.native-windows) .event-workspace textarea,
.app-root.native-client:not(.native-windows) .meet-list-panel button,
.app-root.native-client:not(.native-windows) .meet-list-panel input{pointer-events:auto!important;touch-action:manipulation}
.search .search-submit{width:auto;margin:0;padding:8px 12px;border:0;border-radius:10px;background:var(--buzz-accent);color:#111820;font-weight:800;white-space:nowrap}

/* Touch devices have no hover state. Open quick reactions only after tapping
   the plus button; otherwise the default heart looked like a reaction that
   had already been sent. */
.app-root.native-client:not(.native-windows) .quick-react-more-host.quick-open .quick-react-suggestions{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
  transition:none!important;
}

/* The generated CSS escape was rendered literally (\\2713) in Android WebView.
   Use the entity supplied by the DOM and never synthesize another glyph. */
.delivery-check{font-size:0!important;line-height:1!important}
.delivery-check::after{content:none!important}

/* Fixed square tiles preserve the honeycomb sprite aspect ratio.  Fluid
   fractional columns were squeezing the art in the Android WebView. */
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid,
.app-root.native-client:not(.native-windows) .reaction-picker.emoji-grid,
.app-root.native-client:not(.native-windows) .meet-chat-emoji-picker.emoji-grid{
  grid-template-columns:repeat(6,38px)!important;
  grid-auto-rows:38px!important;
  justify-content:center!important;
  gap:6px!important;
  width:min(282px,calc(100vw - 30px))!important;
  max-width:calc(100vw - 30px)!important;
  padding:10px!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid button,
.app-root.native-client:not(.native-windows) .reaction-picker.emoji-grid button,
.app-root.native-client:not(.native-windows) .meet-chat-emoji-picker.emoji-grid button{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:4px!important;
  aspect-ratio:1 / 1!important;
}
.app-root.native-client:not(.native-windows) .composer-emoji-picker .emoji-grid .buzz-emoji-art,
.app-root.native-client:not(.native-windows) .reaction-picker.emoji-grid .buzz-emoji-art,
.app-root.native-client:not(.native-windows) .meet-chat-emoji-picker.emoji-grid .buzz-emoji-art{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  margin:auto!important;
  background-size:400% 400%!important;
}

/* Recording is intentionally only an input-state.  Preserve the selected
   composer skin and its controls; the timer's pulsing outline is the signal. */
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording{
  border-top-color:inherit!important;
  background-color:inherit!important;
  background-image:none!important;
  background-size:auto!important;
  box-shadow:none!important;
  animation:none!important;
}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .attachment-menu,
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .emoji-menu{opacity:1!important}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .record.recording{
  clip-path:none!important;
  background:#303944!important;
  background-image:none!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .record,
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .discard-voice{
  display:grid!important;
  place-items:center;
  border:0!important;
  box-shadow:none!important;
}
.app-root.native-client:not(.native-windows) .chat-page .composer.voice-recording .voice-recording-timer{
  background:#10161d!important;
  color:#f7f9fb!important;
}

/* Native Android is laid out below the system status bar by MainActivity.
   Do not add a second safe-area header or a desktop-sized bottom reserve. */
.app-root.native-android .chat-page .chat-header{
  height:60px!important;
  min-height:60px!important;
  padding:6px 8px!important;
}
.app-root.native-android .messenger-shell.show-workspace:has(.chat-page) .chat-page{
  padding-bottom:64px!important;
}
.app-root.native-android .messenger-shell.show-workspace:has(.chat-page) .chat-page .timeline{
  padding-bottom:62px!important;
}
.app-root.native-android .messenger-shell.show-workspace:has(.chat-page) .chat-page .composer{
  bottom:0!important;
  min-height:62px!important;
  height:62px!important;
  padding:7px 6px!important;
}
/* Autoscroll must never reserve the IME area once the editor lost focus. */
.app-root.native-android .messenger-shell.show-workspace{padding-bottom:0!important}
.app-root.native-android .messenger-shell.show-workspace .chat-page{padding-bottom:62px!important}
.app-root.native-android .messenger-shell.show-workspace .chat-page .timeline{padding-bottom:62px!important}
.app-root.native-android .messenger-shell.show-workspace .chat-page .composer{bottom:0!important;min-height:62px!important;height:62px!important;padding:7px 6px!important}
.app-root.native-android .chat-page .composer.voice-recording .record.recording,
.app-root.native-android .chat-page .composer.voice-recording .discard-voice{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:50%!important;
  background:#303944!important;
  color:#f7f9fb!important;
  clip-path:none!important;
  box-shadow:none!important;
  animation:none!important;
}
.app-root.native-android .chat-page .composer.voice-recording .record.recording .line-icon{color:#f7f9fb!important}
.voice-trash-icon{
  display:grid!important;
  place-items:center;
  width:22px!important;
  height:22px!important;
  border:0!important;
  font-family:"Segoe UI Symbol",sans-serif!important;
  font-size:20px!important;
  line-height:1!important;
  color:#f7f9fb!important;
}
.voice-trash-icon::before,.voice-trash-icon::after{display:none!important}
.settings-gear{font-size:1.7rem;line-height:1;color:currentColor}

/* Keep native capture in the conversation instead of opening a separate
   full-window surface. The review below is the only send/discard decision. */
.chat-page{position:relative}
.buzz-hive-capture{min-height:0!important}
.captured-media-review{
  position:fixed;left:12px;right:12px;bottom:78px;z-index:40100;
  max-width:560px;margin:auto;padding:12px;border:1px solid #303943;
  border-radius:18px;background:#171d24;color:#eef3f7;box-shadow:0 20px 55px #000b;
}
.captured-media-review-preview{max-height:min(58vh,520px);display:grid;place-items:center;overflow:hidden;border-radius:12px;background:#090d12}
.captured-media-review-preview img,.captured-media-review-preview video{display:block;max-width:100%;max-height:min(58vh,520px);object-fit:contain}
.captured-media-review-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.captured-media-review-actions button{min-height:42px;padding:0 16px;border-radius:21px}
.captured-media-review-actions .send{display:flex;align-items:center;gap:8px;background:var(--buzz-accent);color:var(--buzz-on-accent,#111820)}
.captured-media-review-actions .send .send-icon{width:20px;height:20px}
.app-root.native-windows .attachment-sheet{grid-template-columns:1fr!important;width:min(440px,calc(100vw - 32px))!important}
.app-root.native-windows .attachment-sheet button{display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;grid-template-rows:auto auto!important;min-height:76px!important;text-align:left!important}
.app-root.native-windows .attachment-sheet .attach-icon{width:42px!important;height:42px!important}