.workspace { display:flex; flex:1; min-height:0; min-width:0; overflow:hidden; }
.pet-panel[hidden] { display:none; }
.workspace > .output { min-width:0; }
.pet-panel { width:310px; flex:0 0 auto; max-width:42%; overflow:auto; border-left:1px solid var(--border); background:color-mix(in srgb,var(--accent) 3%,var(--panel)); scrollbar-color:var(--border) var(--panel); }
.pet-panel:not([open]) { width:auto; }
.pet-panel summary { cursor:pointer; padding:16px 20px; font-size:.72em; letter-spacing:.07em; border-bottom:1px solid var(--border); }
#pet-mood { margin-left:8px; color:var(--dim); letter-spacing:0; }
.pet-room { padding:22px; }
.pet-eyebrow { font-size:.57em; letter-spacing:.08em; color:var(--dim); margin:0 0 12px; }
#pet-name { font-weight:500; font-size:1.6em; overflow-wrap:anywhere; }
.cat-stage { position:relative; display:grid; place-items:center; padding:25px 0 20px; min-height:170px; }
#pet-art { position:relative; z-index:1; width:18ch; font-family:"Areal Mono","Hiragino Kaku Gothic ProN","Yu Gothic",monospace; font-size:23px; line-height:1.35; letter-spacing:0; margin:0; white-space:pre; text-align:left; text-shadow:0 0 20px color-mix(in srgb,var(--accent) 20%,transparent); }
.roaming-cat { position:absolute; z-index:100; left:0; bottom:82px; width:18ch; margin:0; padding:5px 8px; pointer-events:none; white-space:pre; overflow:visible; color:var(--accent); font-family:"Areal Mono",monospace; font-size:16px; line-height:1.15; text-align:left; text-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent); filter:drop-shadow(0 5px 9px color-mix(in srgb,var(--accent) 18%,transparent)); will-change:transform; }
.cat-ground { position:absolute; bottom:10px; width:125px; height:22px; border:1px solid var(--border); border-radius:50%; background:color-mix(in srgb,var(--accent) 4%,var(--panel)); }
.pet-message { min-height:3.2em; color:var(--dim); font-size:.8em; line-height:1.6; }
.pet-stats label { display:flex; justify-content:space-between; font-size:.72em; margin-top:10px; }
.pet-stats label span { color:var(--dim); }
.pet-stats progress { display:block; width:100%; height:5px; border:0; border-radius:3px; overflow:hidden; margin:6px 0 12px; appearance:none; background:var(--border); accent-color:var(--accent); }
.pet-stats progress::-webkit-progress-bar { background:var(--border); }
.pet-stats progress::-webkit-progress-value { background:var(--accent); }
.pet-stats progress::-moz-progress-bar { background:var(--accent); }
.pet-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; }
.pet-actions button { font-size:.78em; padding:9px; }
.pet-actions button:disabled { cursor:default; }
.pet-note { color:var(--dim); font-size:.65em; line-height:1.6; }
.pet-foot { border-top:1px solid var(--border); padding-top:14px; margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.62em; }
.pet-foot button { padding:5px 8px; }
@media(max-width:760px) {
  .workspace { flex-direction:column; }
  .pet-panel { order:-1; flex:none; width:100%; max-width:none; max-height:38vh; max-height:38dvh; border-left:0; border-bottom:1px solid var(--border); }
  .pet-panel:not([open]) { width:100%; }
  .pet-panel summary { padding:10px 16px; }
  .pet-room { padding:16px; }
  .pet-actions { grid-template-columns:repeat(3,1fr); }
}