/* Approved P01 panel: desktop material shift and three mobile positions, shared by the home and the theory screen. */
#app:is([data-screen=home],[data-screen=theory]) .workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 0;position:relative;overflow:hidden;transition:grid-template-columns var(--motion-panel) var(--ease-drawer)}
#app:is([data-screen=home],[data-screen=theory])[data-panel]:not([data-panel=closed]) .workspace{grid-template-columns:minmax(0,1fr) 384px}
#app:is([data-screen=home],[data-screen=theory]) .d02-slot{display:contents}

#app:is([data-screen=home],[data-screen=theory]) .companion-home{flex-direction:column;justify-content:center;gap:8px;color:var(--blue);font-size:var(--text-label)}
#app:is([data-screen=home],[data-screen=theory]) .companion-home[hidden]{display:none}

#app:is([data-screen=home],[data-screen=theory]) .chat-panel{min-width:0;min-height:0;border-left:1px solid var(--line);background:var(--canvas);display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
#app:is([data-screen=home],[data-screen=theory]) .chat-panel[hidden]{display:flex!important}
#app:is([data-screen=home],[data-screen=theory])[data-panel]:not([data-panel=closed]) .chat-panel{visibility:visible}
#app:is([data-screen=home],[data-screen=theory]) .panel-header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:20px 18px 17px;border-bottom:1px solid var(--line);min-height:72px;flex:none}
#app:is([data-screen=home],[data-screen=theory]) .panel-header h2{font-size:var(--text-control);font-weight:550}
#app:is([data-screen=home],[data-screen=theory]) .panel-header p{font-size:var(--text-label);color:var(--muted);margin-top:2px}
#app:is([data-screen=home],[data-screen=theory]) .panel-header [data-chat-context]:empty{display:none}
#app:is([data-screen=home],[data-screen=theory]) .panel-close{border:0;background:none;border-radius:7px;display:grid;place-items:center;min-width:44px;width:44px;min-height:44px;color:var(--muted)}
#app:is([data-screen=home],[data-screen=theory]) .panel-close svg{width:19px;height:19px}
#app:is([data-screen=home],[data-screen=theory]) .panel-handle{display:none}
#app:is([data-screen=home],[data-screen=theory]) .material-strip{display:none}

#app:is([data-screen=home],[data-screen=theory]) .chat-history{flex:1;overflow:auto;min-height:0;padding:24px 16px;scrollbar-width:thin;overscroll-behavior:contain}
#app:is([data-screen=home],[data-screen=theory]) .chat-empty{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:100%;padding:24px 12px}
#app:is([data-screen=home],[data-screen=theory]) .chat-empty h3{font-size:var(--text-subtitle);font-weight:500;letter-spacing:-0.02em;line-height:1.35;margin:0 0 10px}
#app:is([data-screen=home],[data-screen=theory]) .chat-empty p{font-size:var(--text-body);line-height:1.65;color:var(--muted);max-width:290px}
#app:is([data-screen=home],[data-screen=theory]) .chat-loading{font-size:var(--text-body);line-height:1.65;color:var(--muted);padding:12px}

/* Approved .chat-message values mapped onto the shared message node. */
#app:is([data-screen=home],[data-screen=theory]) .chat-panel .message{display:flex;flex-direction:column;align-items:flex-start;margin:0 14px 19px 0;max-width:100%}
#app:is([data-screen=home],[data-screen=theory]) .chat-panel .message.student{align-items:flex-end;margin:0 0 19px 26px}

#app:is([data-screen=home],[data-screen=theory]) .chat-panel .ai-status{width:auto;margin:0 14px 19px 0;padding:0;font-size:var(--text-label);line-height:1.6}
#app:is([data-screen=home],[data-screen=theory]) .chat-panel .ai-status p{margin-bottom:8px}
#app:is([data-screen=home],[data-screen=theory]) .chat-panel .ai-status small{font-size:var(--text-label);color:var(--muted);margin-top:6px}
#app:is([data-screen=home],[data-screen=theory]) .chat-panel .ai-status .preview{font-size:var(--text-body);line-height:1.6;padding:12px 14px;background:var(--blue-pale);border-radius:13px 13px 13px 3px;max-width:100%;margin-bottom:6px;white-space:pre-wrap;overflow-wrap:anywhere}

#app:is([data-screen=home],[data-screen=theory]) .panel-compose-wrap{padding:12px 12px 18px;display:flex;align-items:flex-end;gap:5px;flex:none;flex-wrap:wrap}
#app:is([data-screen=home],[data-screen=theory]) .panel-compose-wrap .monomer{width:32px;height:36px;background-size:200px 200px;background-position:-11px -68px;margin-bottom:3px;flex:none}
#app:is([data-screen=home],[data-screen=theory]) .panel-compose{border:1px solid var(--line);border-radius:24px;background:var(--paper);padding:5px;display:flex;align-items:flex-end;gap:4px;flex:1;min-width:0;min-height:56px}
#app:is([data-screen=home],[data-screen=theory]) .panel-compose:focus-within{border-color:var(--blue)}
#app:is([data-screen=home],[data-screen=theory]) .panel-compose textarea{font-size:var(--text-body);line-height:1.6;background:none;border:0;outline:0;resize:none;flex:1 1 0%;width:0;min-width:0;height:44px;min-height:44px;max-height:150px;padding:10px 4px 10px 9px}
#app:is([data-screen=home],[data-screen=theory]) .panel-compose .send-question{width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0;aspect-ratio:1;border-radius:50%}
#app:is([data-screen=home],[data-screen=theory]) .panel-compose .send-question:disabled{background:var(--sand);color:var(--muted);opacity:1}
#app:is([data-screen=home],[data-screen=theory]) .chat-panel .composer-note{flex-basis:100%;width:auto;margin:0;padding:0 4px 0 45px;font-size:var(--text-label);color:var(--muted)}

/* Direct manipulation follows the pointer without easing lag. */
#app.panel-dragging .workspace,#app.panel-dragging .chat-panel{transition:none!important}

@media(min-width:601px) and (max-width:1000px){
  #app:is([data-screen=home],[data-screen=theory])[data-panel]:not([data-panel=closed]) .workspace{grid-template-columns:minmax(0,1fr) 340px}
}

@media(max-width:600px){
  #app:is([data-screen=home],[data-screen=theory]) .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 0px;transition:grid-template-rows var(--motion-panel) var(--ease-drawer)}
  #app:is([data-screen=home],[data-screen=theory])[data-panel]:not([data-panel=closed]) .workspace{grid-template-columns:minmax(0,1fr)}
  #app:is([data-screen=home],[data-screen=theory])[data-panel=split] .workspace{grid-template-rows:minmax(140px,calc(42% + var(--drag-offset,0px))) minmax(0,1fr)}
  #app:is([data-screen=home],[data-screen=theory])[data-panel=expanded] .workspace{grid-template-rows:50px minmax(0,1fr)}
  #app.panel-dragging[data-panel=split] .workspace{grid-template-rows:minmax(50px,calc(42% + var(--drag-offset,0px))) minmax(0,1fr)}
  #app:is([data-screen=home],[data-screen=theory]) .main-scroll{grid-row:1;grid-column:1}
  #app:is([data-screen=home],[data-screen=theory])[data-panel=expanded] .main-scroll{visibility:hidden;pointer-events:none}
  #app:is([data-screen=home],[data-screen=theory]) .chat-panel{border-left:0;border-top:1px solid var(--line);grid-column:1;grid-row:2;display:none!important;position:relative}
  #app:is([data-screen=home],[data-screen=theory]) .chat-panel[hidden]{display:none!important}
  #app:is([data-screen=home],[data-screen=theory])[data-panel=split] .chat-panel,#app:is([data-screen=home],[data-screen=theory])[data-panel=expanded] .chat-panel{display:flex!important}
  #app:is([data-screen=home],[data-screen=theory]) .material-strip{grid-row:1;grid-column:1;min-height:50px;display:none;align-items:center;justify-content:space-between;padding:0 16px;background:var(--canvas);font-size:var(--text-label);z-index:3}
  #app:is([data-screen=home],[data-screen=theory])[data-panel=expanded] .material-strip{display:flex}
  #app:is([data-screen=home],[data-screen=theory]) .material-strip button{border:0;background:none;padding:3px 0 3px 14px;display:flex;align-items:center;gap:9px;font-size:var(--text-label);color:var(--blue);min-height:44px}
  #app:is([data-screen=home],[data-screen=theory]) .material-strip button::after{content:'';width:26px;height:4px;background:var(--line);border-radius:3px}
  #app:is([data-screen=home],[data-screen=theory]) .panel-handle{display:flex;position:absolute;left:calc(50% - 40px);top:0;width:80px;height:44px;min-height:44px;align-items:flex-start;justify-content:center;padding:9px 0 0;border:0;background:none;touch-action:none;color:var(--muted);z-index:2}
  #app:is([data-screen=home],[data-screen=theory]) .panel-handle::before{content:'';width:34px;height:4px;background:var(--line);border-radius:3px}
  #app:is([data-screen=home],[data-screen=theory]) .panel-handle:focus-visible{outline-offset:-3px}
  #app:is([data-screen=home],[data-screen=theory]) .panel-header{padding:13px 12px 7px 18px;min-height:68px}
  #app:is([data-screen=home],[data-screen=theory]) .panel-header h2{font-size:var(--text-control)}
  #app:is([data-screen=home],[data-screen=theory]) .panel-header p{display:none}
  #app:is([data-screen=home],[data-screen=theory]) .chat-history{padding:18px 14px}
  #app:is([data-screen=home],[data-screen=theory]) .chat-panel .message{margin-bottom:14px}
  #app:is([data-screen=home],[data-screen=theory]) .chat-empty{padding:12px 13px}
  #app:is([data-screen=home],[data-screen=theory]) .chat-empty h3{font-size:var(--text-subtitle)}
  #app:is([data-screen=home],[data-screen=theory]) .chat-empty p{font-size:var(--text-control)}
  #app:is([data-screen=home],[data-screen=theory]) .panel-compose-wrap{padding:8px 10px max(12px,env(safe-area-inset-bottom));gap:5px}
  #app:is([data-screen=home],[data-screen=theory]) .panel-compose-wrap .monomer{width:32px;height:36px;background-size:200px 200px;background-position:-11px -68px}
  #app:is([data-screen=home],[data-screen=theory]) .panel-compose{border-radius:25px}
  #app:is([data-screen=home],[data-screen=theory]) .chat-panel .composer-note{padding:0 4px 0 53px}
  #app:is([data-screen=home],[data-screen=theory]) .companion-home{gap:2px;font-size:var(--text-label)}
  #app:is([data-screen=home],[data-screen=theory])[data-panel]:not([data-panel=closed]) .home-welcome{min-height:131px}
}

/* Keep the outgoing pixels only; hidden controls become inert immediately. */
#app.panel-exiting .chat-panel{visibility:visible!important}
#app.motion-instant .workspace{transition:none!important}
#app.panel-dragging .main-scroll{visibility:visible!important}
@media(min-width:601px){
 #app:is([data-screen=home],[data-screen=theory]) .chat-panel{width:384px}
}
@media(min-width:601px) and (max-width:1000px){
 #app:is([data-screen=home],[data-screen=theory]) .chat-panel{width:340px}
}
@media(max-width:600px){
 #app.panel-exiting:is([data-screen=home],[data-screen=theory]) .chat-panel[hidden]{display:flex!important}
}

#app.panel-dragging .material-strip{display:none!important}