.caption-bar{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;min-height:50px;border:1px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--accent-soft) 78%,var(--white));padding:6px 8px;box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 9%,transparent),0 1px 3px #00000005;transition:background 220ms,box-shadow 220ms}
.caption-paw{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--white);box-shadow:0 1px 4px #00000008}
.caption-paw img{display:block;width:28px;height:28px;object-fit:contain}
.caption-bar::after{content:"";position:absolute;inset:-4px;z-index:-1;pointer-events:none;border:2px solid color-mix(in srgb,var(--accent) 85%,var(--accent-text));border-radius:inherit;opacity:0;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 32%,transparent);transition:opacity 220ms,box-shadow 220ms}
.caption-bar:has(.caption-input:not(:placeholder-shown)){box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 16%,transparent),0 1px 4px #00000008}
.caption-bar:has(.caption-input:not(:placeholder-shown))::after{opacity:.85;animation:caption-ring-glow 5s ease-in-out infinite}
@keyframes caption-ring-glow{0%,100%{opacity:.65}50%{opacity:.95}}
.caption-bar:focus-within:has(.caption-input){box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 24%,transparent),0 1px 4px #00000008}
.caption-bar:focus-within:has(.caption-input)::after{opacity:1;animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 0 16px color-mix(in srgb,var(--accent) 45%,transparent),0 0 26px color-mix(in srgb,var(--accent) 22%,transparent)}
.caption-bar .caption-clear{width:32px;height:32px;background:none;font-size:22px}
.caption-bar .caption-clear:hover{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-text)}
.caption-bar .caption-input{flex:1;min-width:0;min-height:30px;height:30px;max-height:90px;resize:none;border:0;border-radius:0;background:transparent;padding:2px 0;color:var(--ink);font-size:18px;line-height:26px;box-shadow:none}
.caption-bar .caption-input::placeholder{font-size:16px;color:var(--muted)}.caption-bar .caption-input:focus-visible{outline:none}

.caption-clear{display:grid;place-items:center;flex:none;border:0;border-radius:50%;color:var(--muted);cursor:pointer;padding:0}
.caption-clear[hidden]{display:none}
.caption-action-icon{display:inline-block;width:20px;height:20px;flex:none;background:currentColor;mask:var(--editor-icon) center/contain no-repeat}
.sparkles-symbol{--editor-icon:url('/design/icons/lucide/sparkles.svg')}.edit-symbol{--editor-icon:url('/design/icons/lucide/square-pen.svg')}.close-symbol{--editor-icon:url('/design/icons/lucide/x.svg')}
@media(max-width:620px){.caption-bar .caption-input{font-size:16px}.caption-bar .caption-input::placeholder{font-size:14px}}
@media(max-width:360px){.caption-bar{gap:7px;padding-inline:7px}.caption-paw{width:30px;height:30px}.caption-paw img{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.caption-bar,.caption-bar::after{transition:none}.caption-bar:has(.caption-input:not(:placeholder-shown))::after{animation:none;opacity:.85}}