#chatProductionToggle { position:relative }
#chatProductionToggle[aria-expanded="true"] { color:var(--accent); background:var(--accent-soft) }
#chatProductionToggle i { position:absolute; inset:6px 5px auto auto; width:6px; height:6px; border-radius:50%; background:var(--accent) }
.chatpage.production-open:not(.production-drawer) { padding-inline-end:var(--production-width,380px); --chat-width:calc(100% - 40px) }
.chatpage.production-open:not(.production-drawer) #chatTasks { display:none }
.chatpage.production-open:not(.production-drawer) .chat-head { max-width:100% }
#chatProductionPanel {
  position:absolute; z-index:8; inset:0 0 0 auto; width:var(--production-width,380px); min-height:0;
  display:flex; flex-direction:column; background:var(--bg-2); color:var(--ink); border-inline-start:1px solid var(--line);
  overflow-wrap:anywhere; box-sizing:border-box; font-size:13px;
}
#chatProductionPanel[hidden], #chatProductionShade[hidden], #chatProductionGrip[hidden] { display:none }
#chatProductionGrip { position:absolute; z-index:2; inset:0 auto 0 -5px; width:10px; cursor:col-resize; touch-action:none }
#chatProductionGrip:hover,#chatProductionGrip:focus-visible,.production-resizing #chatProductionGrip { background:color-mix(in srgb,var(--accent) 40%,transparent); outline:none }
.production-resizing { user-select:none; cursor:col-resize }
#chatProductionShade { display:none }
.production-drawer #chatProductionPanel { position:fixed; z-index:85; inset:0 0 0 auto; width:min(440px,100vw); padding-block:env(safe-area-inset-top) env(safe-area-inset-bottom); box-shadow:var(--pop-shadow) }
.production-drawer #chatProductionShade:not([hidden]) { display:block; position:fixed; inset:0; z-index:84; background:#10172270 }
@media (max-width:600px) { .production-drawer #chatProductionPanel { width:100vw; border:0 } }
.ppanel-header { display:flex; align-items:center; gap:9px; min-height:57px; padding:8px 14px; flex:none; border-bottom:1px solid var(--line) }
.ppanel-header h2 { flex:1; margin:0; font-size:15px; font-weight:650 }
.ppanel-header .ic { width:18px; height:18px }
.ppanel-picker { flex:none; padding:10px 14px; border-bottom:1px solid var(--line) }
.ppanel-picker:empty { display:none }
.ppanel-picker label { display:flex; align-items:center; gap:10px; color:var(--dim) }
.ppanel-picker span { white-space:nowrap }
.ppanel-picker select { flex:1; min-width:0 }
.ppanel-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable }
.ppanel-section { padding:0 14px; border-bottom:1px solid var(--line) }
.ppanel-section > summary,.ppanel-step > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; padding:11px 0 }
.ppanel-section > summary::-webkit-details-marker,.ppanel-step > summary::-webkit-details-marker { display:none }
.ppanel-section > summary > .ic { width:16px; height:16px; color:var(--muted) }
.ppanel-section > summary > b { flex:1; font-size:14px }
.ppanel-section > summary small,.ppanel-step > summary small { color:var(--dim); font-size:11px }
.ppanel-chevron { flex:none; width:14px; height:14px; color:var(--dim); transform:none }
details[open] > summary .ppanel-chevron { transform:rotate(90deg) }
.ppanel-section > [data-pp-body] { padding-bottom:12px }
.ppanel-empty,.ppanel-stage { color:var(--muted); margin:2px 0 7px; font-size:12px }
.ppanel-next { margin:12px 14px; padding:10px; border:1px solid var(--line); border-inline-start:3px solid var(--accent); border-radius:8px; background:var(--bg) }
.ppanel-next p { margin:5px 0; line-height:1.5 }
.ppanel-step { border:1px solid transparent; border-radius:8px }
.ppanel-step[aria-current="step"] { background:var(--accent-soft) }
.ppanel-step > summary { padding:7px 8px }
.ppanel-step > summary b { flex:1; font-weight:550 }
.ppanel-step-body { padding:0 9px 8px 23px }
.ppanel-step-body p { margin:5px 0; white-space:pre-wrap }
.ppanel-dot { flex:none; border:1px solid var(--line-2); width:9px; height:9px; border-radius:50% }
.ppanel-dot[data-status="doing"],.ppanel-dot[data-status="done"] { border-color:var(--accent); background:var(--accent) }
.ppanel-dot[data-status="failed"] { border-color:#bd4545; background:#bd4545 }
.ppanel-dot[data-status="you"],.ppanel-dot[data-status="redo"] { border-color:#ae7a22; background:#ae7a22 }
.ppanel-events,.ppanel-shots { padding-inline-start:17px; margin:7px 0; font-size:12px }
.ppanel-events time { color:var(--dim) }
.ppanel-events li,.ppanel-shots li { margin:4px 0 }
.ppanel-actions,.ppanel-filters { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px }
.ppanel-actions .btn { white-space:normal; text-align:left }
.ppanel-filters select,.ppanel-picker select { padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); max-width:100% }
.ppanel-files { list-style:none; padding:0; margin:5px 0 0 }
.ppanel-file { display:flex; align-items:center; gap:8px; width:100%; border:0; padding:6px; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer }
.ppanel-file:hover,.ppanel-file:focus-visible { background:var(--bg-3) }
.ppanel-file > span:nth-child(2) { flex:1; min-width:0 }
.ppanel-file b,.ppanel-file small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.ppanel-file small { color:var(--dim); margin-top:2px }
.ppanel-file img,.ppanel-file-icon { display:grid; place-items:center; width:36px; height:32px; border-radius:5px; object-fit:cover; background:var(--bg-3); color:var(--muted); flex:none }
.ppanel-file-icon .ic { width:17px; height:17px }
.ppanel-preview { border:1px solid var(--line); padding:9px; margin-bottom:6px; border-radius:9px; background:var(--bg) }
.ppanel-preview-head { display:flex; align-items:center; justify-content:space-between; gap:6px }
.ppanel-preview-head .btn { flex:none }
.ppanel-preview p { margin:4px 0 7px }
.ppanel-preview video,.ppanel-preview img { display:block; width:100%; max-height:min(42vh,440px); object-fit:contain; background:var(--bg-3); border-radius:6px }
.ppanel-preview audio { width:100% }
.ppanel-preview pre,.ppanel-long { max-height:300px; overflow:auto; white-space:pre-wrap; margin:5px 0; line-height:1.65 }
.ppanel-plan-kind { margin:0 0 8px; color:var(--accent); font-weight:600 }
.ppanel-spec { display:grid; grid-template-columns:minmax(62px,max-content) minmax(0,1fr); gap:5px 10px; margin:7px 0 }
.ppanel-spec dt { color:var(--dim) }
.ppanel-spec dd { margin:0 }
.ppanel-inner { margin:8px 0 }
.ppanel-inner summary { cursor:pointer; font-weight:550 }
.ppanel-shots p { margin:2px 0 8px; white-space:pre-wrap }
.ppanel-ref { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; color:var(--accent); font-size:12px }
.ppanel-ref .icon-btn { width:26px; height:26px }
/* Container queries remove the reserved column during the resize itself,
   before ResizeObserver converts the panel to a drawer. */
.main:has(#chatPage) { container-name:production-chat; container-type:inline-size }
#chatPage { width:100% }
@container production-chat (max-width:799px) {
  #chatPage.production-open { padding-inline-end:0; --chat-width:calc(100% - 24px) }
}