#app[data-page="chat"]{padding:12px clamp(20px,2vw,36px) 0}
#app[data-page="chat"] .chat-layout{grid-template-columns:clamp(180px,14vw,216px) minmax(0,1fr);gap:18px}
#app[data-page="chat"] .chat-history{padding:16px 10px 8px}
#app[data-page="chat"] .history-top{padding:0 8px 12px}
#app[data-page="chat"] .history-top h2{font-size:16px}
#app[data-page="chat"] .new-chat{padding:9px 10px;margin-bottom:18px;gap:8px}
#app[data-page="chat"] .thread{padding:10px 8px}
#app[data-page="chat"] .history-bottom{margin-top:8px;padding:8px 6px 0}
#app[data-page="chat"] .thread-date-group{min-width:0;flex-shrink:0}
#app[data-page="chat"] .thread-date-group+.thread-date-group{margin-top:10px;padding-top:8px}
#app[data-page="chat"] .thread-date-group h3{font:inherit;font-size:12px;font-weight:600;letter-spacing:.025em;color:color-mix(in srgb,var(--ink) 72%,transparent);margin:4px 8px 7px}
#app[data-page="chat"] .thread-date-group .thread-row+.thread-row{margin-top:3px}
#app[data-page="chat"] .chat-workspace{padding-right:0}
#app[data-page="chat"] .chat-workspace .chatstudio{max-width:none;margin:0;width:100%}
#app[data-page="chat"] .chat-toolbar{padding:8px max(0px,calc(var(--chat-side-space) - 88px)) 16px;flex-shrink:0}
#app[data-page="chat"] .studio-log{gap:clamp(18px,2vw,30px);padding:clamp(14px,2vw,30px) 8px 24px;overflow-anchor:none}
#app[data-page="chat"] .studio-log .message{font-size:16px;line-height:1.65}
#app[data-page="chat"] .studio-log .message.user{padding:12px 16px;max-width:85%}
#app[data-page="chat"] .studio-log .message.assistant{max-width:100%;width:100%;box-sizing:border-box;padding-top:8px;padding-bottom:8px}
#app[data-page="chat"] .course-tutor-response{margin-top:12px}
#app[data-page="chat"] .course-tutor-response>p{font-size:17px;line-height:1.65;max-width:none;margin:0 0 16px}
#app[data-page="chat"] .course-tutor-response .punc-example-card{width:100%;min-width:0;box-sizing:border-box;padding:12px 15px;margin-top:10px;border-radius:12px}
#app[data-page="chat"] .course-tutor-response .punc-example-word{font-size:18px;line-height:1.45;margin:0 0 6px;letter-spacing:normal}
#app[data-page="chat"] .course-tutor-response .punc-example-reason{font-size:15px;line-height:1.6;margin:0}
#app[data-page="chat"] .chatstudio{--chat-reading-width:clamp(560px,58vw,920px);--chat-side-space:max(12px,calc((100% - var(--chat-reading-width)) / 2))}
#app[data-page="chat"] .studio-bottom{width:calc(100% - 2 * var(--chat-side-space));align-self:center;box-sizing:border-box;padding:12px 0 max(24px,env(safe-area-inset-bottom))}
#app[data-page="chat"] .chatstudio.has-messages .studio-log{align-items:stretch;padding-inline:var(--chat-side-space);scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent}
#app[data-page="chat"] .chatstudio.has-messages .studio-log>.message.user{align-self:flex-end;width:fit-content;box-sizing:border-box}
#app[data-page="chat"] .studio-log .message.assistant{padding-inline:0;min-width:0;overflow-wrap:anywhere}
#app[data-page="chat"] .studio-composer{display:flex;align-items:flex-end;gap:8px;padding:8px 10px;border-radius:20px}
#app[data-page="chat"] .studio-composer textarea{flex:1;min-width:0;width:100%;height:44px;min-height:44px;max-height:128px;box-sizing:border-box;padding:10px 6px;resize:none;overflow-y:auto;font-size:15px;line-height:1.5}
#app[data-page="chat"] .composer-tools{flex:0 0 auto;gap:6px;margin:0;align-items:center}
#app[data-page="chat"] .composer-tip{display:none}
#app[data-page="chat"] .voice-button,#app[data-page="chat"] .send-button{width:38px;height:38px;border-radius:12px}
#app[data-page="chat"] .studio-disclaimer{font-size:10px;margin:5px 0 0}
#app[data-page="chat"] .studio-welcome h1{font-size:30px}
@media(max-width:760px){
  #app[data-page="chat"]{padding:8px 14px 0}
  #app[data-page="chat"] .chat-layout{display:flex;gap:0}
  #app[data-page="chat"] .chatstudio{--chat-side-space:0px}
  #app[data-page="chat"] .chat-history{padding:12px;margin-bottom:8px;max-height:220px}
  #app[data-page="chat"] .studio-log{padding:8px 0 14px}
  #app[data-page="chat"] .course-tutor-response>p{font-size:16px}
  #app[data-page="chat"] .course-tutor-response .punc-example-card{padding:12px 14px}
  #app[data-page="chat"] .course-tutor-response .punc-example-word{font-size:19px}
  #app[data-page="chat"] .studio-composer textarea{font-size:16px;padding-left:2px}
  #app[data-page="chat"] .voice-button,#app[data-page="chat"] .send-button{width:44px;height:44px}
  #app[data-page="chat"] .studio-bottom{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}