/* phonePi RP ("chat") mode. Reuses the palette declared in index.html.
   Kept in its own file so the coding UI's stylesheet stays untouched. */

#rpapp { display:flex; flex-direction:column; height:100dvh; }
#rp-view { flex:1; overflow-y:auto; padding:12px; -webkit-overflow-scrolling:touch; }
#rp-composer { display:flex; gap:8px; padding:10px; background:var(--panel); flex:none;
               padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
#rp-composer textarea { flex:1; resize:none; background:var(--panel2); color:var(--fg);
                        border:0; border-radius:12px; padding:10px 12px; font:inherit;
                        max-height:120px; }
#rp-jump { position:fixed; right:14px; bottom:calc(84px + env(safe-area-inset-bottom));
           border-radius:20px; padding:7px 13px; background:var(--acc); color:#06131f;
           font-weight:600; box-shadow:0 3px 12px #0008; z-index:5; }

/* the mode toggle that sits in both headers */
.modebtn { font-size:14px; padding:7px 10px; flex:none; min-width:38px; }
#rp-tts.on { background:var(--acc); color:#06131f; }
#rp-lock.locked { background:#4a2a2a; color:#ff9a9a; }

/* ---- session list ---- */
.rprow { background:var(--panel); border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.rprow .rname { font-weight:600; }
.rprow .rmeta { color:var(--dim); font-size:12px; margin-top:3px;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rprow .rprev { color:var(--dim); font-size:13px; margin-top:6px; overflow:hidden;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rpdev { background:var(--panel2); border-radius:12px; padding:10px 13px; margin-bottom:12px;
         font-size:13px; color:var(--dim); text-align:center; }

/* ---- messages ---- */
.illbtn { background:var(--panel2); font-size:17px; padding:8px 11px; flex:none; }
.illbtn:disabled { opacity:.5; }

.rpmsg { border-radius:14px; padding:10px 14px; margin:8px 0; max-width:92%;
         white-space:pre-wrap; word-break:break-word; }
.rpmsg.user { background:var(--user); margin-left:auto; }
.rpmsg.bot  { background:var(--panel); margin-right:auto; }
.rpmsg.err  { background:var(--err); }
.rpmsg.live { border-left:2px solid var(--acc); }
/* a reply the user cut short: kept, but visibly incomplete */
.rpmsg.stopped { border-left:2px solid var(--dim); }
/* the compacted view: a folded note, visually distinct from the prose around it */
.rpmsg.sum { background:var(--panel2); border:1px dashed var(--dim); max-width:92%; }
.rpmsg.sum summary { cursor:pointer; color:var(--acc); font-size:13px; }
.rpmsg.sum .sumtext { color:var(--dim); font-size:13px; line-height:1.5;
                      margin-top:8px; white-space:pre-wrap; }
.rpmsg em   { color:#d8c9a8; font-style:italic; }
.rptext     { white-space:pre-wrap; word-break:break-word; }

/* ---- generated illustrations ---- */
.imgbubble { background:var(--panel); border-radius:14px; margin:8px 0; max-width:92%;
             overflow:hidden; }
.imgbubble > summary { cursor:pointer; list-style:none; padding:11px 14px;
                       -webkit-tap-highlight-color:transparent; }
.imgbubble > summary::-webkit-details-marker { display:none; }
.imgbubble > summary::before { content:"\25B8 "; color:var(--dim); }
.imgbubble[open] > summary::before { content:"\25BE "; }
.imgbubble .imgprompt { color:var(--dim); font-size:12px; display:block; margin-top:4px;
                        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imgbubble .imgwrap { padding:0 10px 10px; }
.imgbubble .imgwrap img { width:100%; border-radius:10px; display:block; cursor:zoom-in; }
.imgbubble .imgcap { color:var(--dim); font-size:12px; margin-top:8px; line-height:1.4; }
.imgbar { margin-top:9px; border-top:1px solid var(--panel2); padding-top:8px; }
.imgbar button { font-size:13px; padding:6px 10px; background:var(--panel2); }

/* tap the picture to fill the screen, tap again to come back */
.imgmax { position:fixed; inset:0; background:#000e; z-index:40; display:flex;
          flex-direction:column; align-items:center; justify-content:center; padding:8px; }
.imgmax img { max-width:100%; max-height:92%; object-fit:contain; border-radius:6px; }
.imgmax .closehint { color:#c8d2dc; font-size:13px; margin-top:10px; }

/* illustration progress */
.illprog .illstatus { color:var(--acc); }
.illprog .illprompt { color:var(--dim); font-size:12px; margin-top:7px; line-height:1.4; }
.vidbubble .vidmeta { color:var(--dim); font-size:12px; display:block; margin-top:4px; }
.vidbubble .imgwrap video { width:100%; border-radius:10px; display:block; background:#000; }
.vidprog .illstatus { color:var(--acc); }

/* ---- tap-a-message action bar (fork / edit / regenerate / speak) ---- */
.msgbar { margin-top:9px; border-top:1px solid var(--panel2); padding-top:8px;
          display:flex; flex-wrap:wrap; gap:6px; }
.msgbar button { font-size:13px; padding:6px 10px; background:var(--panel2);
                 transition:background .15s, color .15s; }
/* Kokoro takes a moment, so the speak button shows its two live states:
   pulsing while synthesising, solid while the audio is actually playing. */
.msgbar button.synth { color:var(--acc); animation:rpPulse 1s ease-in-out infinite; }
.msgbar button.speaking { background:var(--acc); color:#06131f; font-weight:600; }
@keyframes rpPulse { 0%, 100% { opacity:1; } 50% { opacity:.4; } }

/* inline message editor */
.editform { margin-top:4px; }
.editform .sname { font-size:13px; color:var(--dim); margin-top:8px; }
.editform textarea { width:100%; background:var(--panel2); color:var(--fg); border:0;
                     border-radius:9px; padding:9px 10px; font:inherit; margin-top:5px;
                     resize:vertical; }
.editrow { display:flex; gap:8px; margin-top:9px; }
.editrow button { flex:1; font-size:14px; }

/* ---- drawer (session settings / device settings / new session) ---- */
.drawer { position:fixed; inset:0; background:var(--bg); z-index:20;
          display:flex; flex-direction:column; }
.drawer header { border-bottom:1px solid var(--panel2); }
.drawer .dbody { flex:1; overflow-y:auto; padding:12px;
                 padding-bottom:calc(24px + env(safe-area-inset-bottom));
                 /* A dead strip down the right edge. On a phone every other
                    part of this panel is a control, so dragging to scroll
                    tends to toggle a checkbox or scrub a slider instead;
                    this is somewhere safe to put a thumb. */
                 padding-right:48px; }
.sect { margin:0 0 18px; }
.sect h3 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.07em;
           color:var(--dim); font-weight:600; }
.set { background:var(--panel); border-radius:12px; padding:11px 13px; margin-bottom:7px; }
.set.overridden { border-left:3px solid var(--acc); }
.set .shead { display:flex; align-items:center; gap:8px; }
.set .sname { flex:1; font-size:15px; }
.set .sval { color:var(--acc); font-variant-numeric:tabular-nums; font-size:14px; }
.set .ssrc { font-size:11px; color:var(--dim); }
.set .sreset { background:none; color:var(--dim); padding:0 6px; font-size:18px; line-height:1; }
.set .shelp { color:var(--dim); font-size:12px; margin-top:5px; }
.set input[type=range] { width:100%; margin-top:9px; accent-color:var(--acc);
                         /* let a vertical drag scroll the drawer rather than
                            scrubbing the slider */
                         touch-action:pan-y; }
.set input[type=number], .set input[type=text], .set textarea, .set select {
  width:100%; background:var(--panel2); color:var(--fg); border:0; border-radius:9px;
  padding:9px 10px; font:inherit; margin-top:8px; }
.switchrow { display:flex; align-items:center; gap:10px; margin-top:8px; }
.switchrow input { width:22px; height:22px; accent-color:var(--acc); flex:none; }

/* ---- unlock / generic card ---- */
.rpcard { background:var(--panel); border-radius:14px; padding:18px;
          margin:16vh auto 0; max-width:420px; }
.rpcard h2 { margin:0 0 8px; }
.rpcard .hint { color:var(--dim); font-size:13px; margin-top:12px; line-height:1.4; }

/* ---- music tab. The header/button rules are global (index.html), so this is
   only the pane layout and the song bubble. ---- */
#musicapp { display:flex; flex-direction:column; height:100dvh; }
#mu-view { flex:1; overflow-y:auto; padding:12px; -webkit-overflow-scrolling:touch; }
#mu-composer { display:flex; gap:8px; padding:10px; background:var(--panel); flex:none;
               padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
#mu-composer textarea { flex:1; resize:none; background:var(--panel2); color:var(--fg);
                        border:0; border-radius:12px; padding:10px 12px; font:inherit;
                        max-height:120px; }

.musong { background:var(--panel); border-radius:14px; padding:12px 14px; margin:8px 0; }
.musong .muhead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.musong .mutitle { font-size:15px; }
.musong .mumeta { color:var(--dim); font-size:12px; flex:none; }
.musong .mustyle { color:var(--dim); font-size:12px; margin-top:6px; line-height:1.4; }
.musong .mubar { display:flex; gap:8px; margin-top:10px; }
.musong .mubar button { flex:1; font-size:13px; padding:8px 10px; background:var(--panel2);
                        color:var(--fg); border:0; border-radius:10px; font:inherit; }
.musong .mubar button.danger { flex:none; padding:8px 12px; }
.musong .muaudio audio { width:100%; margin-top:10px; }
/* width is set from the websocket's step/total, so it grows as it renders */
.muprog { height:4px; background:var(--acc); border-radius:2px; margin:10px 0 4px;
          width:0; transition:width .3s; }