:root{--red:#8c1d18;--gold:#d5a44b;--paper:#f7f0e2;--ink:#251f1c}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:Microsoft YaHei,system-ui,sans-serif;background:radial-gradient(circle at 15% 0,#ead5ab,#d3c1a2)}button{font:inherit}.app-shell{width:min(100%,840px);min-height:100vh;margin:auto;background:var(--paper);box-shadow:0 0 45px #4b2d1b33;display:flex;flex-direction:column}.hero{padding:28px clamp(20px,6vw,52px);min-height:190px;color:#fff8e9;background:linear-gradient(120deg,#63110fee,#9c2921ee);display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden}.school-tag{margin:0 0 9px;color:#f0d18d;font-weight:700;letter-spacing:.1em}.hero h1{margin:0;font:800 clamp(32px,7vw,52px)/1.15 KaiTi,serif;letter-spacing:.07em}.subtitle{margin:12px 0 0;opacity:.88}.portrait-wrap{width:clamp(108px,22vw,148px);height:clamp(108px,22vw,148px);padding:5px;border:2px solid #efd28d;border-radius:50%;background:#eee0be;position:relative;flex:0 0 auto;box-shadow:0 10px 30px #0005}.portrait-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:sepia(.2)}.portrait-wrap i{position:absolute;right:7px;bottom:9px;width:18px;height:18px;border:3px solid white;border-radius:50%;background:#aaa}.portrait-wrap.active i{background:#31b96b}.portrait-wrap.speaking{animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 13px #d5a44b33,0 10px 30px #0005}}.identity{padding:18px clamp(18px,5vw,42px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #80634322}.identity span{color:var(--red);font-size:12px;font-weight:700}.identity h2{margin:2px 0;font:800 27px KaiTi,serif}.identity p{margin:0;color:#6c5e55;font-size:13px}.status{padding:7px 11px;border-radius:16px;background:#e5ddd0;color:#675d55;font-size:12px}.status.online{color:#177842;background:#dff4e6}.status.connecting{color:#90651a;background:#f8e9c5}.status.error{color:#a21d18;background:#f8dddd}.chat{flex:1;min-height:270px;max-height:52vh;padding:20px clamp(16px,5vw,42px);overflow:auto}.notice{padding:11px 14px;border-left:3px solid var(--gold);color:#76685f;background:#fff8e9;font-size:12px;line-height:1.6}.message{display:flex;gap:9px;align-items:flex-start;margin-top:17px}.message.user{justify-content:flex-end}.message img{width:36px;height:36px;border-radius:50%;object-fit:cover}.message small{display:block;margin-bottom:4px;color:#786a60}.user small{text-align:right}.message p{max-width:590px;margin:0;padding:10px 13px;border:1px solid #856b4c22;border-radius:4px 15px 15px;background:#fff;line-height:1.7;white-space:pre-wrap}.user p{color:#fff;background:var(--red);border-color:var(--red);border-radius:15px 4px 15px 15px}.welcome{text-align:center;padding:20px 18px 26px}.welcome h3{margin:0 0 7px;font-size:20px}.welcome p{margin:0 0 16px;color:#70635b}.welcome button{padding:13px 28px;border:0;border-radius:28px;color:#fff;background:linear-gradient(135deg,#a92e25,#791712);box-shadow:0 8px 18px #8c1d1833;cursor:pointer;font-weight:700}.welcome button:disabled{opacity:.65}.welcome small{display:block;margin-top:12px;color:#8b7f76}.controls{padding:12px 24px 25px;display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,52px)}.control{width:62px;border:0;background:none;display:grid;gap:5px;place-items:center;cursor:pointer}.control span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#2e8f5c}.control em{font-style:normal;font-size:12px}.control.mic-off span{background:#8b827b}.control.end span{background:#be2b24}.speaking{min-width:125px;text-align:center;color:#6c5d54}.speaking b{display:inline-block;width:4px;height:13px;margin:0 2px;border-radius:3px;background:var(--gold);animation:wave .7s infinite alternate}.speaking b:nth-child(2),.speaking b:nth-child(4){animation-delay:.2s}.speaking b:nth-child(3){animation-delay:.4s}.speaking span{display:block;margin-top:6px;font-size:12px}@keyframes wave{to{height:27px}}footer{padding:0 22px 20px;text-align:center;color:#8b7c71;font-size:11px}.toast{position:fixed;left:50%;bottom:95px;transform:translate(-50%,15px);max-width:calc(100% - 30px);padding:10px 15px;border-radius:8px;color:#fff;background:#241f1eee;opacity:0;pointer-events:none;transition:.2s;z-index:9}.toast.show{opacity:1;transform:translate(-50%)}[hidden]{display:none!important}@media(max-width:560px){.hero{min-height:165px;padding:22px 18px}.portrait-wrap{width:98px;height:98px}.subtitle{font-size:12px}.identity{padding-inline:17px}.identity p{max-width:230px}.chat{max-height:none}.message p{font-size:14px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}.app-shell{position:relative;overflow:hidden}.barrage-layer{position:absolute;z-index:8;top:205px;left:0;width:100%;height:190px;overflow:hidden;pointer-events:none}.barrage-item{--lane: 0;position:absolute;top:calc(10px + var(--lane) * 42px);left:100%;width:max-content;max-width:78%;padding:7px 13px;border:1px solid rgb(255 255 255 / 55%);border-radius:18px;color:#fff;background:#251f1cd6;box-shadow:0 3px 12px #0003;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:barrage-move 10s linear forwards}.barrage-item.assistant{background:#8c1d18e5}@keyframes barrage-move{0%{transform:translate(0)}to{transform:translate(calc(-100vw - 100%))}}.live-subtitle{margin:0 clamp(16px,5vw,42px) 10px;padding:12px 16px;border:1px solid #d5a44b66;border-radius:13px;background:#1f1916eb;color:#fff8e9;box-shadow:0 6px 18px #3724172e}.live-subtitle strong{display:block;margin-bottom:4px;color:#f0d18d;font-size:12px}.live-subtitle p{margin:0;font-size:clamp(16px,3.5vw,20px);font-weight:700;line-height:1.55}.live-subtitle.user{background:#63110feb}@media(max-width:560px){.barrage-layer{top:170px;height:170px}.barrage-item{max-width:88%;font-size:13px}}@media(prefers-reduced-motion:reduce){.barrage-item{animation-duration:18s!important}}html,body{width:100%;min-width:100%;height:100%;min-height:100%;overflow:hidden}body{background:radial-gradient(circle at 12% 18%,rgb(213 164 75 / 20%),transparent 28%),linear-gradient(135deg,#68130f,#9b2820 52%,#5f100d)}.app-shell{width:100vw;max-width:none;height:100vh;min-height:0;display:grid;grid-template-columns:minmax(360px,42vw) 1fr;overflow:hidden;background:#f8f1e4;box-shadow:none}.profile-panel{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:clamp(24px,4vw,64px);color:#fff8e9;text-align:center;background:radial-gradient(circle at 50% 32%,rgb(242 210 141 / 26%),transparent 34%),linear-gradient(145deg,#68130f,#9b2820 65%,#69120f)}.profile-panel .portrait-wrap{width:min(31vw,45vh,430px);height:min(31vw,45vh,430px);min-width:260px;min-height:260px;padding:9px;border-width:4px;box-shadow:0 22px 60px #00000061}.profile-panel h1{margin:clamp(18px,3vh,32px) 0 4px;font:900 clamp(42px,5vw,74px) / 1.05 KaiTi,"Microsoft YaHei",serif;letter-spacing:.12em}.profile-panel p{margin:8px 0 18px;color:#f0d18d;font-size:clamp(20px,2vw,32px);font-weight:700;letter-spacing:.08em}.profile-panel .status{margin-top:2px;border:1px solid rgb(255 255 255 / 18%);color:#f6ead4;background:#1e0a084d}.profile-panel .status.online{color:#dbffe6;background:#18724085}.interaction-panel{min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(24px,3vw,52px);background:linear-gradient(#ffffffc7,#ffffffc7),radial-gradient(circle at 80% 10%,#ead5ab,#f7f0e2 58%)}.interaction-panel .chat{flex:1;min-height:0;max-height:none;padding:0 8px 18px;overflow-y:auto}.interaction-panel .notice{display:inline-block;padding:7px 12px;border:0;border-radius:16px;color:#8a776a;background:#efe5d4;font-size:12px}.interaction-panel .message p{max-width:min(620px,47vw);font-size:clamp(17px,1.45vw,23px);line-height:1.65}.interaction-panel .message img{width:48px;height:48px}.interaction-panel .live-subtitle{margin:0 0 18px;padding:clamp(15px,2vw,24px)}.interaction-panel .live-subtitle p{font-size:clamp(21px,2.1vw,34px)}.interaction-panel .welcome{flex:1;display:grid;place-items:center;padding:0}.interaction-panel .welcome button{min-width:min(340px,70%);padding:19px 42px;font-size:clamp(20px,2vw,30px);box-shadow:0 14px 35px #8c1d1847}.interaction-panel .controls{flex:0 0 auto;padding:8px 0 2px}.barrage-layer{z-index:10;top:5vh;left:43vw;width:56vw;height:36vh}.barrage-item{font-size:clamp(15px,1.4vw,22px)}@media(orientation:portrait),(max-width:820px){html,body{overflow:auto}.app-shell{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:auto minmax(55vh,1fr)}.profile-panel{padding:22px 18px 18px}.profile-panel .portrait-wrap{width:min(48vw,220px);height:min(48vw,220px);min-width:160px;min-height:160px}.profile-panel h1{margin-top:13px;font-size:38px}.profile-panel p{margin:3px 0 10px;font-size:19px}.interaction-panel{min-height:55vh;padding:18px 16px}.interaction-panel .message p{max-width:72vw}.barrage-layer{top:44vh;left:0;width:100%}}