/* Siize Film app: Carol's dock (bk477, Film MVP 2/8; from the approved prototype v16 shell.css). Desktop: a panel on the right under the
 * top bar. Phones (below 960 px): full screen, 100dvh, safe areas, 16 px input, 44 px targets. Every class starts with cr-. */
#carol[hidden]{display:none!important}
#carol{position:fixed;right:16px;top:72px;bottom:16px;width:min(380px,calc(100vw - 32px));z-index:90;background:rgba(22,26,38,.97);border:1px solid var(--line2);border-radius:22px;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);backdrop-filter:blur(16px);color:var(--ink)}
body.full #carol{top:16px}
/* chain: on desktop the open panel pushes the app over instead of covering it (the prototype pushed the Film Room the same way); below 1280 px (too narrow to share) it floats over as before */
@media (min-width:1280px){body.carol-on #app{right:396px}body.carol-on #app>*{min-width:0}body.carol-on #carol{top:16px}body.carol-on #view .ed{right:0}body.carol-on #top .inst-pill{display:none}body.carol-on #top .search{min-width:0}body.carol-on .feedtabs{right:0}}
.cr-h{display:flex;align-items:center;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line)}.cr-h>div{flex:1;min-width:0}.cr-h .muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-av{width:34px;height:34px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--violetd));color:#fff}.cr-av svg{width:18px;height:18px}
.cr-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:10px}
.cr-m{background:var(--raise);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:13.5px;line-height:1.5;max-width:92%;overflow-wrap:anywhere}
.cr-m p{margin:0}.cr-m p+p{margin-top:8px}.cr-li{display:block;padding-left:12px;position:relative}.cr-li::before{content:"";position:absolute;left:2px;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--ink2)}
.cr-m.me{align-self:flex-end;background:rgba(149,129,248,.18);border-color:rgba(149,129,248,.35);border-radius:16px 16px 4px 16px}
.cr-m.think{width:62px}.cr-dots{display:inline-flex;gap:4px}.cr-dots i{width:6px;height:6px;border-radius:50%;background:var(--violet2);animation:crd 1s infinite}.cr-dots i:nth-child(2){animation-delay:.15s}.cr-dots i:nth-child(3){animation-delay:.3s}
@keyframes crd{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.cr-cost{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:11.5px;color:var(--mut)}.cr-cost svg{width:12px;height:12px}
.cr-m.card{max-width:100%;width:100%}
.cr-prop{display:flex;flex-direction:column;gap:6px}.cr-prop .eyebrow{font-size:11px;color:var(--gold)}.cr-pa{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.cr-m.done .cr-prop{opacity:.7}
.cr-err{color:var(--bad);font-size:12.5px}.cr-errline{color:var(--bad)}
.cr-tries{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.cr-m .chip{white-space:normal;height:auto;min-height:36px;padding:6px 12px;text-align:left;line-height:1.3;max-width:100%}
.cr-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;scrollbar-width:none}.cr-chips::-webkit-scrollbar{display:none}.cr-chips .chip{flex:none}.cr-chips:empty{display:none}
.cr-in{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line)}.cr-in input{flex:1;min-width:0;height:40px;border-radius:999px;background:var(--raise);border:1px solid var(--line2);padding:0 14px;color:var(--ink)}
.cr-in input:disabled{opacity:.6}
.cr-gate{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px solid var(--line2);border-radius:18px;background:var(--raise)}.cr-gate p{margin:0;font-size:13.5px}
/* the top bar spark shows on phones too (bk476 hid it with .hide-m); the Menu keeps Ask Carol */
@media (max-width:959px){
  .topr [data-act="carol"].hide-m{display:inline-grid}
  #carol,body.full #carol{inset:0;top:0;left:0;right:0;bottom:0;width:auto;height:100dvh;border-radius:0;border:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);z-index:160;background:var(--deck)}
  #carol .cr-h{padding:12px 14px}#carol .cr-h .iconbtn{width:44px;height:44px}
  #carol .cr-log{padding:16px}
  #carol .cr-m{font-size:15px;max-width:88%}#carol .cr-m.card{max-width:100%}
  #carol .cr-in input{height:46px;font-size:16px}#carol .cr-in .iconbtn{width:46px;height:46px}
  #carol .cr-chips .chip,#carol .cr-m .chip{min-height:40px;font-size:13.5px}
  #carol .cr-pa .btn{min-height:44px}
  body.carol-on{overflow:hidden}
  body.carol-on .timerchip{display:none}
}