/* The app already tracks the visual viewport, including the software keyboard.
   Keep the single grid column shrinkable: a reply preview's nowrap text must
   truncate inside the screen, never enlarge every row via an auto min-content track. */
#social-detail-layer.is-chat{--chat-voice-bg:#305d77;--chat-voice-border:#8ba9ba;inset:0;padding:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;z-index:100;touch-action:pan-y}
:root[data-theme=light] #social-detail-layer.is-chat{--chat-voice-bg:#25485e;--chat-voice-border:#25485e}
.social-chat-status-space{display:none}
#social-detail-layer.is-chat .social-chat-status-space{display:block;flex:none;height:max(env(safe-area-inset-top,0px),var(--safe-top,0px));background:var(--surface)}
#social-detail-layer.is-chat>.picker-sheet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;box-sizing:border-box;overflow:hidden;width:100%;height:100%;max-width:none;max-height:100%;border:0;border-radius:0;box-shadow:none;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
#social-detail-layer.is-chat>.picker-sheet::before{display:none}
#social-detail-layer.is-chat .favorites-head{flex:none;display:grid;grid-template-columns:minmax(72px,1fr) auto minmax(72px,1fr);gap:8px;min-height:56px;box-sizing:border-box;padding:6px max(12px,var(--safe-right)) 6px max(12px,var(--safe-left));border-bottom:1px solid var(--line);background:var(--surface)}
#social-detail-layer.is-chat #social-detail-close{justify-self:start;border:0;background:transparent;color:var(--text);font-size:16px;min-height:44px;padding:8px}
#social-detail-layer.is-chat #social-detail-title{font-size:18px;text-align:center}
#social-detail-layer.is-chat #social-detail-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding:20px max(14px,var(--safe-right)) 24px max(14px,var(--safe-left));scrollbar-width:thin}
#social-detail-layer.is-chat #social-detail-content{max-width:860px;margin:auto}
#social-detail-status:empty{display:none}
#social-detail-layer .social-chat-message{display:flex;gap:10px;border:0;padding:0;margin:0 0 24px}
#social-detail-layer .social-chat-message>.social-avatar{margin-top:22px;width:38px;height:38px;flex-basis:38px;border-radius:11px}
.social-chat-body{min-width:0;max-width:min(78%,620px)}
#social-detail-layer .social-chat-message.is-own{flex-direction:row-reverse}
.social-chat-message.is-own .social-author-meta{justify-content:flex-end}
#social-detail-layer .social-chat-message .social-post-head{margin-bottom:6px}
#social-detail-layer .social-chat-message .social-name{font-size:14px;color:var(--muted)}
#social-detail-layer .social-chat-message .social-time{font-size:12px;color:var(--muted)}
.social-chat-bubble{padding:12px 14px;border-radius:4px 16px 16px 16px;background:var(--surface);border:1px solid var(--line);color:var(--text)}
.social-chat-message.is-own .social-chat-bubble{background:color-mix(in srgb,var(--gold) 19%,var(--surface));border-color:color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:16px 4px 16px 16px}
#social-detail-layer .social-chat-bubble .social-text{margin:0;font-size:16px;line-height:1.65;color:var(--text)}
#social-detail-layer .social-chat-bubble .social-context{font-size:12px;margin:0 0 8px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line)}
#social-detail-layer .social-chat-bubble .social-trade{margin:0 0 10px;padding:0 0 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
#social-detail-layer .social-chat-bubble .social-trade strong{font-size:16px}
#social-detail-layer .social-chat-bubble .social-trade span{font-size:14px}
#social-detail-layer .social-chat-bubble .social-trade small{font-size:12px;color:var(--muted)}
#social-detail-layer .social-chat-message .social-post-actions{margin-top:3px;gap:20px}
#social-detail-layer .social-chat-message .social-action{font-size:14px;min-height:32px;color:var(--muted)}
.social-chat-message.is-own .social-post-actions{justify-content:flex-end}
.social-history-more{display:block;margin:0 auto 20px;background:none;border:0;color:var(--accent);font:inherit;font-size:14px;min-height:44px;cursor:pointer}
#social-detail-layer #social-detail-composer{box-sizing:border-box;min-width:0;flex:none;border-top:1px solid var(--line);background:var(--surface);padding:12px max(14px,var(--safe-right)) calc(12px + var(--safe-bottom)) max(14px,var(--safe-left));max-height:calc(var(--viewport-height,100dvh) * .48);overflow-y:auto}
#social-detail-layer #social-detail-composer[hidden]{display:none}
:root[data-keyboard=open] #social-detail-layer #social-detail-composer{padding-bottom:8px}
#social-detail-layer #social-detail-composer .social-composer{display:flex;flex-direction:column;gap:6px;max-width:860px;margin:0 auto;padding:0;border:0;border-radius:0;background:transparent}
#social-detail-layer #social-detail-composer .dao-composer{grid-column:1;min-width:0}
#social-detail-layer #social-detail-composer .dao-composer-row{display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
#social-detail-layer #social-detail-composer textarea{min-width:0;min-height:44px;max-height:120px;width:100%;padding:10px 12px;resize:none;font-family:inherit;font-size:16px;line-height:24px;border-radius:12px;border:1px solid var(--line);background:var(--surface-input);color:var(--text);box-shadow:none;box-sizing:border-box}
#social-detail-layer #social-detail-composer .dao-composer-toggle{flex:0 0 44px;width:44px;height:48px;min-height:48px;padding:8px;border:1px solid var(--line);border-radius:14px;box-shadow:none;background:var(--surface-input);color:var(--text)}
#social-detail-layer #social-detail-composer .social-composer-actions{flex:none;align-self:center;margin:0}
#social-detail-layer #social-detail-composer .social-composer-actions .btn{height:48px;min-height:48px;padding:8px 16px;border-radius:14px;font-size:16px;white-space:nowrap}
#social-detail-layer #social-detail-composer .social-suggestions,#social-detail-layer #social-detail-composer .dao-note,.social-reply-target{grid-column:1/-1;font-size:14px;margin:0}
#social-detail-layer #social-detail-composer :is(.dao-note,.social-suggestions):empty{display:none}
.social-reply-target{display:flex;align-items:center;gap:12px;padding:0 4px 4px;color:var(--muted);min-width:0}
.social-reply-target>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.social-reply-target button{flex-shrink:0;font-size:22px;min-width:32px;min-height:32px}
#social-detail-layer #social-detail-composer .dao-voice-hold{flex:1 1 0;min-width:0;min-height:48px;height:48px;margin:0;padding:8px 12px;border:1px solid var(--chat-voice-border);border-radius:14px;background:var(--chat-voice-bg);color:#fff;font-weight:650;box-shadow:inset 0 1px 0 #ffffff20;font-size:16px;line-height:24px;white-space:nowrap}
#social-detail-layer #social-detail-composer .dao-voice-hold.recording{background:#b5e3b4;border-color:#7bad7a;color:#163b24}
#social-detail-layer #social-detail-composer .dao-voice-hold.cancel{background:#f2b3bd;border-color:#c78190;color:#5b1728}
#social-detail-layer #social-detail-composer :is(textarea,.dao-voice-hold)[hidden]{display:none}
#social-detail-layer #social-detail-composer textarea{flex:1 1 0;min-height:48px}
#social-detail-layer :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.social-selected-mentions{display:flex;gap:8px;flex-wrap:wrap}
.social-selected-mentions:empty{display:none}
.social-mentioned-user,.social-mention-option{display:flex;align-items:center;gap:8px;min-width:0;color:var(--text);font-size:14px}
#social-detail-layer #social-detail-composer :is(.social-mentioned-user,.social-mention-option,.social-reply-target) .social-avatar{width:28px;height:28px;flex-basis:28px;border-radius:8px;font-size:14px}
.social-mentioned-user{padding:4px 8px;border-radius:10px;background:var(--surface-soft)}
.social-mentioned-user>span{overflow-wrap:anywhere}
#social-detail-layer #social-detail-composer .social-suggestions{padding:0;gap:8px}
#social-detail-layer.is-chat #social-detail-scroll{touch-action:pan-y}
#social-detail-layer.is-chat.is-swiping>.picker-sheet{transform:translateX(var(--chat-swipe-x,0px))}
/* Use the actual viewport safe area: browser chrome already reserves its status
   bar, while edge-to-edge Home Screen apps report an inset. Never infer a
   status-bar height from screen width; landscape and non-overlay apps differ. */
@media(max-width:360px){#social-detail-layer #social-detail-composer .dao-composer-row{gap:8px}#social-detail-layer #social-detail-composer .social-composer-actions .btn{padding-inline:12px}}
@media(min-width:900px){#social-detail-layer.is-chat #social-detail-scroll{padding-top:28px}.social-chat-body{max-width:72%}}
@media(max-width:360px){.social-chat-body{max-width:calc(100% - 48px)}#social-detail-layer #social-detail-composer{padding-inline:8px}#social-detail-layer #social-detail-composer .social-composer{column-gap:6px}}

#social-detail-layer.is-chat.is-swiping {background:transparent}
#social-detail-layer.is-chat.is-swiping>.picker-sheet {box-shadow:-8px 0 28px #0002;transition:none}
#social-detail-layer #social-detail-composer .dao-composer-toggle{min-width:44px!important;padding:8px!important}
#social-detail-layer #social-detail-composer .social-composer-actions .btn.primary{background:#e9c778;color:#30260f;border:1px solid #b29145;font-weight:700}
#social-detail-layer #social-detail-composer .dao-voice-hold:active{filter:brightness(.9)}

/* Vovry quiet-glass discussion, 2026-09-25.
   Shared visual skin: retain the grid tracks, scrolling, native
   viewport/keyboard insets, voice states and swipe transform above. Scope the
   skin to chat, never to profile dialogs or the shared app chrome. */
:root #social-detail-layer.is-chat {
  --chat-canvas:#161a1b;--chat-ink:#eef1f1;--chat-muted:#a4adae;
  --chat-hairline:#ffffff14;--chat-control:#ffffff0d;
  --chat-glass:#262d2ef0;--chat-solid:#262d2e;--chat-own:#253b3f;
  --chat-edge:#ffffff20;--chat-shadow:0 6px 22px #00000028;
  --chat-accent:#8ccbd3;--chat-accent-ink:#133337;
  --chat-voice-bg:#305d67;--chat-voice-border:#6b989f;
  color:var(--chat-ink);
}
:root[data-theme=light] #social-detail-layer.is-chat {
  --chat-canvas:#f7f8f7;--chat-ink:#222a2c;--chat-muted:#697577;
  --chat-hairline:#233a4312;--chat-control:#253b4309;
  --chat-glass:#ffffffeb;--chat-solid:#fff;--chat-own:#eaf3f5;
  --chat-edge:#ffffffd9;--chat-shadow:0 6px 22px #263a4310;
  --chat-accent:#206b7a;--chat-accent-ink:#fff;
  --chat-voice-bg:#206b7a;--chat-voice-border:#206b7a;
}
:root #social-detail-layer.is-chat>.picker-sheet,
:root #social-detail-layer.is-chat .social-chat-status-space {
  background:var(--chat-canvas);
}
:root #social-detail-layer.is-chat .favorites-head {
  grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;
  gap:12px;min-height:76px;margin:0;
  padding:10px max(18px,var(--safe-right)) 14px max(18px,var(--safe-left));
  border:0;background:var(--chat-canvas);
}
:root #social-detail-layer.is-chat #social-detail-title {
  min-width:0;max-width:100%;font-size:18px;font-weight:650;line-height:1.4;
  letter-spacing:-.3px;color:var(--chat-ink);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
:root #social-detail-layer.is-chat #social-detail-close {
  position:relative;display:grid;place-items:center;width:48px;height:48px;
  min-width:48px;padding:0;border:1px solid var(--chat-edge);border-radius:50%;
  background:var(--chat-glass);color:var(--chat-ink);box-shadow:var(--chat-shadow);
}
/* Keep the translated accessible name; only the visible label becomes a chevron. */
:root #social-detail-layer.is-chat #social-detail-close>span {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
:root #social-detail-layer.is-chat #social-detail-close::before {
  content:"";width:12px;height:12px;border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateX(3px) rotate(45deg);
}
:root #social-detail-layer.is-chat #social-detail-scroll {
  padding:18px max(20px,var(--safe-right)) 8px max(20px,var(--safe-left));
  scrollbar-color:var(--chat-hairline) transparent;
}
:root #social-detail-layer.is-chat .social-chat-message {gap:12px;margin-bottom:30px}
:root #social-detail-layer.is-chat .social-chat-message>.social-avatar {
  margin-top:2px;width:34px;height:34px;flex-basis:34px;border-radius:12px;
}
:root #social-detail-layer.is-chat .social-chat-body {
  max-width:min(calc(100% - 46px),660px);min-width:0;
}
:root #social-detail-layer.is-chat .social-chat-message .social-post-head {margin-bottom:8px}
:root #social-detail-layer.is-chat .social-chat-message .social-name {
  font-size:14px;font-weight:650;color:var(--chat-ink);
}
:root #social-detail-layer.is-chat .social-chat-message :is(.social-time,.social-post-stamp) {
  font-size:11px;color:var(--chat-muted);
}
:root #social-detail-layer.is-chat .social-chat-bubble {
  padding:0;border:0;border-radius:0;background:transparent;color:var(--chat-ink);
  box-shadow:none;overflow-wrap:anywhere;
}
:root #social-detail-layer.is-chat .social-chat-message.is-own .social-chat-bubble {
  padding:14px 17px;border:0;border-radius:22px 6px 22px 22px;background:var(--chat-own);
}
:root #social-detail-layer.is-chat .social-chat-bubble .social-text {
  font-size:16px;line-height:1.8;color:var(--chat-ink);letter-spacing:.1px;
}
:root #social-detail-layer.is-chat .social-chat-bubble :is(.social-context,.social-trade) {
  border-bottom-color:var(--chat-hairline);
}
:root #social-detail-layer.is-chat .social-chat-bubble :is(.social-context,.social-trade small) {
  color:var(--chat-muted);
}
:root #social-detail-layer.is-chat .social-post-actions {gap:20px;margin-top:8px}
:root #social-detail-layer.is-chat .social-chat-message .social-action {
  font-size:12px;min-height:36px;color:var(--chat-muted);
}
:root #social-detail-layer.is-chat :is(.social-mention,.social-history-more) {color:var(--chat-accent)}
/* Base composer material. Progressive glass below lets the message scroller
   extend beneath it while measured padding preserves access to every message. */
:root #social-detail-layer.is-chat #social-detail-composer {
  border:0;background:var(--chat-canvas);
  padding:12px max(16px,var(--safe-right)) calc(12px + var(--safe-bottom)) max(16px,var(--safe-left));
  overscroll-behavior:contain;
}
:root[data-keyboard=open] #social-detail-layer.is-chat #social-detail-composer {padding-bottom:8px}
:root #social-detail-layer.is-chat #social-detail-composer .social-composer {
  gap:6px;padding:6px;border:1px solid var(--chat-edge);border-radius:29px;
  background:var(--chat-glass);box-shadow:var(--chat-shadow);color:var(--chat-ink);
}
:root #social-detail-layer.is-chat #social-detail-composer .dao-composer-row {
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;column-gap:6px;row-gap:0;
}
:root #social-detail-layer.is-chat #social-detail-composer textarea {
  grid-column:2;grid-row:1;min-height:44px;max-height:120px;
  padding:10px 2px;border:0;border-radius:12px;background:transparent;
  color:var(--chat-ink);font-size:16px;line-height:24px;caret-color:var(--chat-accent);
}
:root #social-detail-layer.is-chat #social-detail-composer textarea::placeholder {color:var(--chat-muted);opacity:1}
:root #social-detail-layer.is-chat #social-detail-composer .dao-composer-toggle {
  grid-column:1;grid-row:1;width:44px;height:44px;min-height:44px;border:0;
  border-radius:50%;background:var(--chat-control);color:var(--chat-ink);
}
:root #social-detail-layer.is-chat #social-detail-composer .social-composer-actions {
  grid-column:3;grid-row:1;justify-self:end;
}
:root #social-detail-layer.is-chat #social-detail-composer .social-composer-actions .btn.primary {
  position:relative;display:grid;place-items:center;width:44px;min-width:44px;
  height:44px;min-height:44px;padding:0;border:0;border-radius:50%;
  background:var(--chat-accent);color:var(--chat-accent-ink);
  font-size:0;box-shadow:none;overflow:hidden;
}
:root #social-detail-layer.is-chat #social-detail-composer .social-composer-actions .btn.primary::after {
  content:"";width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M22 2 9 15m13-13-8 20-5-7-7-5 20-8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M22 2 9 15m13-13-8 20-5-7-7-5 20-8'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root #social-detail-layer.is-chat #social-detail-composer .social-composer-actions .btn.primary:disabled {opacity:.4}
:root #social-detail-layer.is-chat #social-detail-composer .dao-voice-hold {
  grid-column:2;grid-row:1;border-radius:18px;white-space:normal;height:auto;min-height:44px;
  padding:8px 4px;border:0;background:var(--chat-control);color:var(--chat-ink);box-shadow:none;font-size:14px;line-height:20px;touch-action:none;user-select:none;-webkit-user-select:none;
}
:root #social-detail-layer.is-chat #social-detail-composer :is(.social-reply-target,.social-mentioned-user) {
  border-radius:16px;padding:8px 10px;background:var(--chat-control);color:var(--chat-muted);
}
:root #social-detail-layer.is-chat #social-detail-composer .social-mention-option {max-width:100%;color:var(--chat-ink)}
:root #social-detail-layer.is-chat #social-detail-composer .social-mention-option .social-mention {
  min-width:0;overflow-wrap:anywhere;white-space:normal;text-align:start;
}
:root #social-detail-layer.is-chat #social-detail-composer .dao-note {padding-inline:8px;color:var(--chat-muted);overflow-wrap:anywhere}
:root #social-detail-layer.is-chat :focus-visible {outline-color:var(--chat-accent)}
:root #social-detail-layer.is-chat #social-detail-composer textarea:focus-visible {outline-offset:-2px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root #social-detail-layer.is-chat #social-detail-close,
  :root #social-detail-layer.is-chat #social-detail-composer .social-composer {
    -webkit-backdrop-filter:blur(20px) saturate(125%);backdrop-filter:blur(20px) saturate(125%);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root #social-detail-layer.is-chat #social-detail-close,
  :root #social-detail-layer.is-chat #social-detail-composer .social-composer {background:var(--chat-solid)}
}
@media(min-width:1024px) {
  :root #social-detail-layer.is-chat #social-detail-scroll {padding-inline:28px}
  :root #social-detail-layer.is-chat #social-detail-composer {padding-inline:28px}
  :root #social-detail-layer.is-chat .social-chat-message {margin-bottom:28px}
}
@media(max-width:360px) {
  :root #social-detail-layer.is-chat .favorites-head {padding-inline:12px;gap:8px}
  :root #social-detail-layer.is-chat #social-detail-scroll {padding-inline:14px}
  :root #social-detail-layer.is-chat #social-detail-composer {padding-inline:12px}
  :root #social-detail-layer.is-chat .social-chat-message {gap:10px}
  :root #social-detail-layer.is-chat .social-chat-body {max-width:calc(100% - 44px)}
}
@media(prefers-reduced-transparency:reduce) {
  :root #social-detail-layer.is-chat #social-detail-close,
  :root #social-detail-layer.is-chat #social-detail-composer .social-composer {
    background:var(--chat-solid);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media(forced-colors:active) {
  :root #social-detail-layer.is-chat #social-detail-composer .social-composer-actions .btn.primary {
    forced-color-adjust:none;background:ButtonFace;color:ButtonText;outline:1px solid ButtonText;
  }
}

/* Progressive glass: the scroller fills the sheet, passing under both controls.
   Pseudo-elements never receive input; measured padding keeps edge messages reachable. */
:root #social-detail-layer.is-chat .social-chat-status-space{grid-area:1/1;position:relative;z-index:3;background:transparent;pointer-events:none}
:root #social-detail-layer.is-chat .favorites-head{grid-area:2/1;position:relative;z-index:2;background:transparent}
:root #social-detail-layer.is-chat #social-detail-scroll{
 grid-area:1/1/5/2;box-sizing:border-box;
 padding-top:calc(max(env(safe-area-inset-top,0px),var(--safe-top,0px)) + var(--chat-header-height,76px) + 20px);
 padding-bottom:calc(var(--chat-composer-height,180px) + 24px);
 scroll-padding-top:calc(max(env(safe-area-inset-top,0px),var(--safe-top,0px)) + var(--chat-header-height,76px) + 12px);
 scroll-padding-bottom:calc(var(--chat-composer-height,180px) + 12px);
}
:root #social-detail-layer.is-chat #social-detail-composer{grid-area:4/1;position:relative;z-index:2;background:transparent;overflow:visible}
:root #social-detail-layer.is-chat #social-detail-composer .social-composer{box-sizing:border-box;max-height:calc(var(--viewport-height,100dvh) * .48 - 24px - var(--safe-bottom));overflow-y:auto;background:color-mix(in srgb,var(--chat-solid) 58%,transparent);-webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%)}
:root[data-keyboard=open] #social-detail-layer.is-chat #social-detail-composer .social-composer{max-height:calc(var(--viewport-height,100dvh) * .48 - 20px)}
:root #social-detail-layer.is-chat .favorites-head::before,
:root #social-detail-layer.is-chat .favorites-head::after,
:root #social-detail-layer.is-chat #social-detail-composer::before,
:root #social-detail-layer.is-chat #social-detail-composer::after{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 background:color-mix(in srgb,var(--chat-canvas) 35%,transparent);
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
:root #social-detail-layer.is-chat .favorites-head::before,
:root #social-detail-layer.is-chat .favorites-head::after{
 inset:calc(-1 * max(env(safe-area-inset-top,0px),var(--safe-top,0px))) 0 -36px;
 -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent);
}
:root #social-detail-layer.is-chat .favorites-head::after{
 -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
 -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 85%);mask-image:linear-gradient(to bottom,#000 30%,transparent 85%);
}
:root #social-detail-layer.is-chat #social-detail-composer::before,
:root #social-detail-layer.is-chat #social-detail-composer::after{
 inset:-44px 0 0;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 60px);mask-image:linear-gradient(to bottom,transparent,#000 60px);
}
:root #social-detail-layer.is-chat #social-detail-composer::after{
 -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
 -webkit-mask-image:linear-gradient(to bottom,transparent 12px,#000 110px);mask-image:linear-gradient(to bottom,transparent 12px,#000 110px);
}
/* The text field shares the glass material, including while the software keyboard is open. */
:root #social-detail-layer.is-chat #social-detail-composer textarea:focus,
:root #social-detail-layer.is-chat #social-detail-composer textarea:focus-visible{outline:none;border:0;box-shadow:none}
:root #social-detail-layer.is-chat #social-detail-composer .is-direct-voice .dao-composer-toggle{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
:root #social-detail-layer.is-chat #social-detail-composer .is-direct-voice .dao-composer-toggle.recording{background:var(--chat-accent);color:var(--chat-accent-ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--chat-accent) 18%,transparent)}
:root #social-detail-layer.is-chat #social-detail-composer .is-direct-voice .dao-composer-toggle.cancel{background:#a92b42;color:#fff;box-shadow:0 0 0 5px #a92b4226}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root #social-detail-layer.is-chat .favorites-head::before,
 :root #social-detail-layer.is-chat #social-detail-composer::before{background:var(--chat-canvas)}
 :root #social-detail-layer.is-chat #social-detail-composer .social-composer{background:var(--chat-solid)}
}
@media(prefers-reduced-transparency:reduce){
 :root #social-detail-layer.is-chat .favorites-head::before,
 :root #social-detail-layer.is-chat .favorites-head::after,
 :root #social-detail-layer.is-chat #social-detail-composer::before,
 :root #social-detail-layer.is-chat #social-detail-composer::after{background:var(--chat-canvas);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
 :root #social-detail-layer.is-chat #social-detail-composer .social-composer{background:var(--chat-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(forced-colors:active){:root #social-detail-layer.is-chat #social-detail-composer textarea:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}

/* Voice cards use the discussion palette in both themes. */
:root #social-detail-layer.is-chat .dao-voice-bubble {
  display:flex;flex-direction:row;align-items:center;gap:12px;max-width:100%;min-width:148px;height:48px;min-height:48px;max-height:48px;box-sizing:border-box;
  --voice-bubble-bg:color-mix(in srgb,var(--chat-canvas) 90%,var(--chat-ink));
  padding:6px 12px;border:0;border-radius:10px;background:var(--voice-bubble-bg);color:var(--chat-ink);
  box-shadow:0 2px 10px #00000006;font-size:13px;
}
:root #social-detail-layer.is-chat .dao-voice-bubble .dao-voice-wave {
  display:block;width:100%;height:32px;fill:currentColor;stroke:none;animation:none;
}
:root #social-detail-layer.is-chat .dao-voice-bubble .dao-voice-meta {display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:16px}
:root #social-detail-layer.is-chat .dao-voice-bubble .dao-voice-plays {font-size:11px;color:var(--chat-muted)}
:root #social-detail-layer.is-chat .dao-voice-bubble .dao-voice-wave {color:var(--chat-accent)}
:root #social-detail-layer.is-chat #social-detail-composer .dao-voice-hold.recording {background:#d9eadf;color:#214b32}
:root #social-detail-layer.is-chat #social-detail-composer .dao-voice-hold.cancel {background:#f6d9de;color:#7b2033}

:root #social-detail-layer.is-chat .social-chat-message.is-own .social-chat-bubble:has(.dao-voice-bubble) {background:transparent;padding:0}

:root #social-detail-layer.is-chat .social-chat-message.is-own .dao-voice-bubble {--voice-bubble-bg:var(--chat-own)}
:root #social-detail-layer.is-chat .social-chat-message.is-own .dao-voice-bubble::before {inset-inline-start:auto;inset-inline-end:-6px;clip-path:polygon(0 0,100% 50%,0 100%)}