/* Shared tutor output + chat chrome. v=20260818chat1 */

#tutor-page,
#tutor-page .tutor-shell,
#tutor-page .tutor-container,
#tutor-page #main-pane{
  background:var(--bg) !important;
}
#tutor-page .tutor-shell,
#tutor-page .tutor-container{
  display:flex !important;
  height:100%;
  min-height:0;
}
#tutor-page #sidebar:not(.collapsed){
  width:var(--toc-w,280px) !important;
  flex:0 0 var(--toc-w,280px) !important;
  min-width:0 !important;
}
#tutor-page #sidebar.collapsed{
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  flex:0 0 0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}
#tutor-page #main-pane{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
#tutor-page .chat-header,
#tutor-page header.chat-header{
  display:flex !important;
  min-height:58px;
  padding:12px 24px !important;
  border-bottom:1px solid var(--rule) !important;
  background:var(--bg) !important;
  box-shadow:none !important;
}
#tutor-page .chat-header h1,
#tutor-page header.chat-header h1{
  color:var(--ink-strong) !important;
  font-size:17px !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}
#tutor-page #msgs{
  flex:1 1 auto !important;
  overflow-y:auto !important;
  background:var(--bg) !important;
  padding:20px 0 !important;
}
#tutor-page .msg-wrap{
  width:min(760px,100%) !important;
  max-width:760px !important;
  margin:0 auto 8px !important;
  padding:0 20px !important;
}
#tutor-page .msg{
  white-space:pre-wrap !important;
}
#tutor-page .msg.user{
  display:block !important;
  margin-left:auto !important;
  max-width:78% !important;
  width:fit-content !important;
  padding:11px 16px !important;
  border:0 !important;
  border-radius:18px 18px 4px 18px !important;
  background:rgba(255,255,255,0.06) !important;
  color:var(--ink-strong) !important;
}
#tutor-page .msg.bot{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:4px 0 8px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--ink) !important;
}
#tutor-page .msg.bot h2,
#tutor-page .msg.bot h3{
  margin:22px 0 8px !important;
  padding-left:10px !important;
  border-left:3px solid var(--accent) !important;
  color:var(--ink-strong) !important;
  font-size:17px !important;
  letter-spacing:-.015em !important;
}
#tutor-page .msg.bot p{margin:0 0 10px !important;max-width:68ch}
#tutor-page .msg.bot table,
#tutor-page .ai-table{
  width:100% !important;
  margin:14px 0 18px !important;
  border:1px solid var(--rule) !important;
  border-radius:10px !important;
  background:var(--card-soft,var(--surface)) !important;
}
#tutor-page .msg.bot th,
#tutor-page .msg.bot td{
  padding:9px 11px !important;
  border-color:var(--rule) !important;
  color:var(--ink) !important;
}
#tutor-page .msg.bot th{
  background:var(--card-soft,var(--surface-2,var(--surface))) !important;
  color:var(--ink-strong) !important;
}
#tutor-page .msg.bot pre,
#tutor-page .msg.bot code{
  background:var(--card-soft,var(--surface)) !important;
  color:var(--ink-strong) !important;
  border-color:var(--rule) !important;
}
#tutor-page #composer,
#tutor-page #input-bar{
  position:static !important;
  background:var(--bg) !important;
  border-top:1px solid var(--rule) !important;
  padding:14px 24px 22px !important;
  margin:0 !important;
  max-width:none !important;
}
#tutor-page #input-wrap{
  width:min(760px,100%) !important;
  margin:0 auto !important;
  border:1px solid var(--rule) !important;
  border-radius:14px !important;
  background:var(--surface) !important;
  box-shadow:none !important;
}
#tutor-page #input-wrap:focus-within{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-fade) !important;
}
#tutor-page #input{
  background:transparent !important;
  color:var(--ink-strong) !important;
}
#tutor-page #send{
  background:var(--accent-strong,var(--accent)) !important;
  color:#fff !important;
  border:0 !important;
}


.msg.bot .katex,.msg.ai .katex,.ai-msg .katex{color:var(--ink-strong,#fff)}
.msg.bot .katex-display,.msg.ai .katex-display,.ai-msg .katex-display{
  margin:14px 0;padding:12px 15px;overflow-x:auto;overflow-y:hidden;
  background:rgba(0,0,0,.2);border-left:3px solid var(--accent,#6366f1);border-radius:8px
}
.diagram-wrap{
  box-sizing:border-box;width:min(100%,840px);margin:15px auto;padding:14px;overflow:auto;background:var(--card,rgba(255,255,255,.04));
  border:1px solid var(--rule,rgba(255,255,255,.1));border-radius:12px
}
.diagram-wrap.diagram-size-molecule,.diagram-wrap.molecule-diagram,
.diagram-wrap:has(>svg.organic-structure),.diagram-wrap:has(>.organic-structure){
  width:min(100%,680px);margin-left:auto;margin-right:auto
}
.diagram-wrap.diagram-size-standard{width:min(100%,840px);margin-left:auto;margin-right:auto}
.diagram-wrap.diagram-size-wide{width:min(100%,1040px);margin-left:auto;margin-right:auto}
.diagram-wrap svg,.diagram-wrap .diagram-svg{
  display:block;width:100%;max-width:100%;height:auto;max-height:560px;margin:auto;background:transparent
}
.diagram-wrap.diagram-size-molecule svg,.diagram-wrap.molecule-diagram svg{max-height:340px}
.diagram-wrap.diagram-size-wide svg{max-height:620px}
.diagram-wrap svg text{fill:var(--ink,#e2e8f0);font-family:Inter,Arial,sans-serif}
.diagram-wrap svg line,.diagram-wrap svg path,.diagram-wrap svg polyline,
.diagram-wrap svg rect,.diagram-wrap svg circle,.diagram-wrap svg ellipse,
.diagram-wrap svg polygon{vector-effect:non-scaling-stroke}
.msg.bot .ai-divider,.msg.ai .ai-divider,.ai-msg .ai-divider{
  height:0;margin:18px 0;border:0;border-top:1px solid var(--rule,rgba(255,255,255,.14))
}
@media(max-width:680px){
  .diagram-wrap,.diagram-wrap.diagram-size-molecule,.diagram-wrap.diagram-size-standard,.diagram-wrap.diagram-size-wide{
    width:100%;padding:8px
  }
  .diagram-wrap svg,.diagram-wrap.diagram-size-wide svg{max-height:430px}
}