:root { --caption-field-bg:#fff; --warn:#8a5a12; }
:root[data-theme="dark"] { --caption-field-bg:rgba(255,255,255,.06); --warn:#e0a020; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --caption-field-bg:rgba(255,255,255,.06); --warn:#e0a020; }
}
.caption-field { border:1px solid var(--line); border-radius:16px; background:var(--caption-field-bg); overflow:hidden; transition:border-color 120ms,box-shadow 120ms; }
.caption-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.caption-field textarea { display:block; width:100%; min-height:120px; max-height:var(--caption-field-max,252px); margin:0; padding:12px 13px; border:0; border-radius:16px; outline:none; background:transparent; color:var(--ink); caret-color:var(--accent); resize:none; overflow:auto; overflow-x:hidden; font:14px/1.5 Onest,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.caption-field textarea:focus-visible { outline:none; }
.caption-field textarea::placeholder { color:var(--muted); opacity:1; }
.caption-editor-tools { display:flex; align-items:center; gap:8px; margin-top:10px; }
.caption-editor-tools button { display:grid; place-items:center; flex:none; width:32px; height:32px; min-height:32px; padding:0; border:0; border-radius:50%; background:var(--pill); color:var(--muted); transition:transform 120ms,background 120ms,color 120ms; }
.caption-editor-tools button:hover:not(:disabled) { transform:scale(1.04); background:color-mix(in srgb,var(--pill) 70%,var(--card)); }
.caption-editor-tools button:active:not(:disabled) { transform:scale(.97); }
.caption-editor-tools button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.caption-editor-tools svg { width:16px; height:16px; pointer-events:none; }
.caption-editor-tools [data-testid="caption-cancel"] svg { width:14px; height:14px; }
.caption-editor-tools [data-testid="emoji-button"] svg { width:19px; height:19px; }
.caption-editor-tools [data-testid="caption-done"]:not(:disabled) { background:var(--accent); color:#fff; }
.caption-editor-tools [data-testid="caption-done"]:disabled { opacity:1; background:var(--pill); color:var(--muted); }
.caption-editor-tools [data-testid="emoji-button"][aria-expanded="true"] { color:var(--accent); background:var(--accent-bg); }
.caption-counter { flex:1; text-align:right; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.caption-counter[data-level="warn"] { color:var(--warn); }
.caption-counter[data-level="bad"] { color:var(--bad); }
.caption-panel-body,.caption-field textarea { scrollbar-width:thin; scrollbar-color:transparent transparent; overflow-x:hidden; }
.caption-panel-body:hover,.caption-panel-body:focus-within,.caption-field textarea:hover { scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent; }
.caption-panel-body::-webkit-scrollbar,.caption-field textarea::-webkit-scrollbar { width:6px; height:0; }
.caption-panel-body::-webkit-scrollbar-track,.caption-field textarea::-webkit-scrollbar-track { background:transparent; }
.caption-panel-body::-webkit-scrollbar-thumb,.caption-field textarea::-webkit-scrollbar-thumb { border-radius:9px; background:transparent; }
.caption-panel-body:hover::-webkit-scrollbar-thumb,.caption-field textarea:hover::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--muted) 35%,transparent); }
.caption-panel-body::-webkit-scrollbar-button,.caption-field textarea::-webkit-scrollbar-button { display:none; width:0; height:0; }
@media(max-width:1100px) {
  .caption-panel { position:fixed; top:auto; bottom:16px; right:16px; min-height:340px; max-height:calc(100dvh - 100px); }
}
@media(max-width:650px) {
  .caption-panel { max-height:calc(100dvh - 100px - var(--caption-keyboard,0px)); }
}
@media(prefers-reduced-motion:reduce) { .caption-field,.caption-editor-tools button { transition:none; } }

.caption-panel:has(.emoji-picker) { min-height:min(640px,calc(100dvh - 100px - var(--caption-keyboard,0px))); }