:root { --caption-glass:rgba(255,255,255,.6); --caption-edge:rgba(255,255,255,.65); --caption-solid:#f4f6f9; --caption-link:#527399; }
:root[data-theme="dark"] { --caption-glass:rgba(34,34,40,.65); --caption-edge:rgba(255,255,255,.08); --caption-solid:#27272d; --caption-link:#91add0; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --caption-glass:rgba(34,34,40,.65); --caption-edge:rgba(255,255,255,.08); --caption-solid:#27272d; --caption-link:#91add0; }
}
#caption-preview { grid-area:1 / 1; align-self:center; justify-self:center; position:relative; width:44px; height:44px; min-width:0; text-align:left; color:var(--ink); transform:translate(calc(var(--viewer-photo-width)/2 + 36px),calc(22px - var(--viewer-photo-width)*2/3)); z-index:3; }
.caption-panel { position:absolute; top:0; left:56px; width:400px; height:max(340px,calc(var(--viewer-photo-width)*4/3)); max-height:calc(100dvh - 100px); min-height:0; display:flex; flex-direction:column; background:var(--caption-glass); border:1px solid var(--caption-edge); border-radius:30px; box-shadow:0 18px 44px #0002; backdrop-filter:blur(28px) saturate(1.2); -webkit-backdrop-filter:blur(28px) saturate(1.2); animation:caption-arrive 200ms ease-out; }
.caption-panel-header { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:14px 14px 8px; flex:none; }
.caption-panel-header strong { text-align:center; font-size:17px; }
.caption-panel button { background:transparent; border:0; color:var(--muted); }
.caption-panel button:hover { color:var(--ink); background:var(--pill); }
.caption-panel-header button { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; }
.caption-panel-header button svg { width:24px; height:24px; pointer-events:none; }
.caption-panel-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:12px 20px 20px; }
.caption-post { display:flex; align-items:flex-start; gap:12px; }
.caption-avatar { display:inline-grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--pill); color:var(--muted); font-size:13px; }
.caption-post-content { flex:1; min-width:0; }
.caption-byline { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.caption-byline strong { overflow-wrap:anywhere; font-size:14px; }
.caption-byline small { color:var(--muted); font-size:11px; }
.caption-text { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.5 Onest,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin-top:5px; cursor:text; }
.caption-text.collapsed { display:-webkit-box; -webkit-line-clamp:60; -webkit-box-orient:vertical; overflow:hidden; }
.caption-empty .caption-text { color:var(--muted); }
.caption-tag { color:var(--caption-link); }
.caption-post-content>button { font-size:12px; padding:4px 0; min-height:32px; }
.caption-inline-editor { width:100%; margin-top:5px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .caption-panel,.caption-inline-editor .emoji-picker { background:var(--caption-solid); } }
@keyframes caption-arrive { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@media(max-width:1100px) {
  #caption-preview { grid-area:1 / 1; align-self:start; justify-self:center; left:calc(var(--viewer-photo-width)/2 + 30px); transform:none; }
  .caption-panel { left:auto; right:0; top:56px; width:min(400px,calc(100vw - 40px)); }
}
@media(max-width:650px) {
  .caption-panel { width:calc(100vw - 32px); min-height:340px; max-height:60dvh; border-radius:30px 30px 22px 22px; padding-top:14px; margin-bottom:var(--caption-keyboard,0px); }
  .caption-panel::before { content:''; position:absolute; width:36px; height:4px; border-radius:8px; top:9px; left:calc(50% - 18px); background:var(--muted); opacity:.4; }
  .caption-panel-header { padding-top:0; }
  .caption-panel-body { padding:8px 14px 16px; }
}
@media(prefers-reduced-motion:reduce) { .caption-panel { animation:none; } }
.caption-toggle { display:grid; place-items:center; position:relative; width:44px; height:44px; min-height:44px; padding:9px; border:0; border-radius:50%; background:transparent; color:var(--muted); }
.caption-toggle:hover { background:var(--line); color:var(--ink); }
.caption-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.caption-toggle svg { width:26px; height:26px; }
.caption-empty .caption-toggle svg { opacity:.65; }
.caption-dot { position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .caption-inline-editor .emoji-picker { background:var(--caption-solid); } }

.caption-post-content>.caption-more,.caption-edit-row>button { display:block; width:max-content; min-height:32px; line-height:24px; padding:4px 0; border-radius:8px; font-size:12px; }
.caption-post-content>.caption-more { margin-top:12px; }
.caption-edit-row { margin-top:12px; }
.viewer .caption-edit-row>button:focus-visible { background:color-mix(in srgb,var(--accent) 12%,transparent); outline:none; outline-offset:0; box-shadow:none; }