/* The app already tracks the visual viewport, including the software keyboard. */
#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-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{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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.social-reply-target button{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 pinch-zoom}
#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)}