/* Scene Chat (scenechat.js): down the right of the Show and Stage Shots pages. Wide screens: beside the page, shut to its
   button at the right edge. Tablets: over the page from the right. Phones: a sheet from the bottom, above the bottom bar. */
:root { --chat:320px; }
#scene-chat { position:fixed; top:0; right:0; bottom:0; width:var(--chat); box-sizing:border-box; display:flex; flex-direction:column; background:#0b1218; border-left:1px solid var(--edge, #2c3e4f);
  z-index:31; color:#eef4f8; transform:translateX(105%); transition:transform .2s ease; }
body.chat-open #scene-chat { transform:none; }
#scene-chat[hidden], #scene-chat-toggle[hidden] { display:none; }
#scene-chat .chat-head { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; padding:12px 12px 8px 16px; border-bottom:1px solid var(--edge, #2c3e4f); }
#scene-chat h2 { display:flex; align-items:center; gap:8px; margin:0; font-size:1.05rem; flex:1 1 auto; } #scene-chat h2 .icon { color:#5fb4ee; }
#scene-chat .chat-show { order:3; flex:1 1 100%; font-size:.78rem; color:#7d93a8; }
#scene-chat .chat-new { min-height:36px; padding:4px 10px; margin:0; font-size:.85rem; background:#16222d; border-color:var(--edge, #2c3e4f); }
#scene-chat .chat-close { min-height:36px; min-width:36px; padding:0 8px; margin:0; font-size:1.2rem; background:transparent; border-color:transparent; color:#b7c6d4; }
#scene-chat .chat-brief { padding:6px 16px; border-bottom:1px solid var(--edge, #2c3e4f); }
#scene-chat .chat-brief summary { cursor:pointer; padding:8px 0; font-weight:600; color:#cfe0ee; } #scene-chat .chat-brief summary span { font-weight:400; color:#7d93a8; }
#scene-chat .brief-text { margin:2px 0 8px; color:#cfe0ee; font-size:.92rem; white-space:pre-wrap; } #scene-chat .brief-text.empty { color:#7d93a8; font-style:italic; }
#scene-chat .chat-brief textarea { width:100%; box-sizing:border-box; font:inherit; font-size:.92rem; background:#16222d; color:#fff; border:1px solid var(--edge, #2c3e4f); border-radius:8px; padding:8px; }
#scene-chat .chat-brief small { display:block; color:#7d93a8; margin:4px 0; }
#scene-chat .chat-brief button { min-height:36px; padding:4px 12px; margin:0 6px 6px 0; }
#scene-chat .chat-wishes:not(:empty) { padding:8px 16px; border-bottom:1px solid var(--edge, #2c3e4f); }
#scene-chat .wishes-head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.78rem; letter-spacing:.04em; color:#7d93a8; }
#scene-chat .wishes-head button { min-height:32px; padding:2px 10px; margin:0; font-size:.8rem; background:#16222d; border-color:var(--edge, #2c3e4f); }
#scene-chat .chat-wishes ul { list-style:none; max-height:24vh; overflow-y:auto; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
#scene-chat .chat-wishes li { display:flex; align-items:center; gap:6px; padding:2px 2px 2px 10px; border-radius:8px; background:#173247; color:#cfe8fa; font-size:.88rem; }
#scene-chat .chat-wishes li:first-child { border-left:3px solid #5fb4ee; }
#scene-chat .chat-wishes li span { flex:1 1 auto; overflow-wrap:anywhere; }
#scene-chat .chat-wishes li button { min-height:32px; min-width:32px; padding:0; margin:0; background:transparent; border-color:transparent; color:#b7c6d4; font-size:1.05rem; }
#scene-chat .chat-log { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; list-style:none; margin:0; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
#scene-chat .msg { max-width:85%; padding:7px 10px 5px; border-radius:12px; font-size:.92rem; line-height:1.3; overflow-wrap:anywhere; }
#scene-chat .msg time { display:block; font-size:.7rem; color:#7d93a8; margin-top:2px; }
#scene-chat .msg.you { align-self:flex-end; background:#1d3a50; color:#fff; border-bottom-right-radius:4px; } #scene-chat .msg.you time { text-align:right; color:#9db7cc; }
#scene-chat .msg.director { align-self:flex-start; background:#1e2c39; border-bottom-left-radius:4px; }
#scene-chat .msg.system { align-self:center; max-width:95%; background:transparent; color:#8aa0b4; font-size:.82rem; font-style:italic; text-align:center; padding:2px 6px; }
#scene-chat .msg.system time { display:inline; margin-left:6px; }
#scene-chat .msg.brief { font-style:italic; }
#scene-chat .chat-note { margin:0; padding:8px 16px; font-size:.85rem; color:#b7c6d4; border-top:1px solid var(--edge, #2c3e4f); } #scene-chat .chat-note.warn { color:#ffd17a; }
#scene-chat .chat-say { display:flex; gap:6px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--edge, #2c3e4f); }
#scene-chat .chat-say { align-items:flex-end; }
#scene-chat .chat-say textarea { flex:1 1 auto; min-width:0; min-height:4.6em; max-height:160px; margin:0; font:inherit; line-height:1.35; resize:none; box-sizing:border-box; background:#16222d; color:#fff; border:1px solid var(--edge, #2c3e4f); border-radius:8px; padding:8px 10px; }
#scene-chat .chat-say button { min-height:48px; }
#scene-chat .chat-say button { margin:0; }
#scene-chat .chat-say textarea:disabled { opacity:.6; }

/* Its button: at the right edge, half-way down, while the panel is shut. */
#scene-chat-toggle { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:28; display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; padding:12px 8px;
  border-radius:10px 0 0 10px; border:1px solid var(--edge, #2c3e4f); border-right:0; background:#173247; color:#cfe8fa; font-size:.72rem; }
#scene-chat-toggle .label { writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:.05em; }
#scene-chat-toggle .badge { font-size:.66rem; padding:1px 6px; }
body.chat-open #scene-chat-toggle { display:none; }
#chat-shade { display:none; }

/* Wide: beside the page, which makes room for it. */
body.has-chat.chat-docked.chat-open.has-sidebar { padding-right:calc(var(--chat) + 24px); }
body.has-chat.chat-docked.chat-open.has-sidebar.message-bar #result { left:calc(var(--bar) + (100vw - var(--bar) - var(--chat)) / 2); width:min(960px, calc(100vw - var(--bar) - var(--chat) - 48px)); }
body.has-chat.chat-docked.chat-open.has-sidebar #result-close { right:calc(var(--chat) + 22px); }
body.has-chat.chat-docked:not(.chat-open).has-sidebar { padding-right:56px; }

/* Tablets: over the page, with a shade behind it. */
@media (max-width: 1179px) {
  #scene-chat { width:min(380px, 88vw); box-shadow:-8px 0 32px rgba(0,0,0,.5); }
  body.chat-open #chat-shade { display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:30; }
}

/* Phones: a sheet from the bottom, and its button above the bottom bar. */
@media (max-width: 700px) {
  #scene-chat { top:auto; left:0; width:auto; height:min(78vh, 640px); border-left:0; border-top:1px solid var(--edge, #2c3e4f); border-radius:16px 16px 0 0; transform:translateY(105%); box-shadow:0 -8px 32px rgba(0,0,0,.5); z-index:32; }
  body.chat-open #scene-chat { transform:none; }
  #scene-chat .chat-head::before { content:''; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:#3a5166; }
  #scene-chat .chat-head { position:relative; padding-top:16px; }
  #scene-chat .chat-say textarea { font-size:16px; min-height:3.6em; }
  #scene-chat-toggle { top:auto; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); transform:none; flex-direction:row; gap:6px; padding:10px 14px; border-radius:999px; border:1px solid #3a6a8c; box-shadow:0 4px 16px rgba(0,0,0,.5); font-size:.85rem; }
  #scene-chat-toggle .label { writing-mode:horizontal-tb; transform:none; }
}
@media (prefers-reduced-motion: reduce) { #scene-chat { transition:none; } }