.school-simulation{color:#244237;background:#f1f5ef;min-height:100dvh;padding:20px 24px 32px;font-family:Arial,sans-serif}.school-simulation *{box-sizing:border-box}.school-simulation button{font:inherit;cursor:pointer;color:#29523e;background:#fff;border:1px solid #bccfc2;border-radius:8px;padding:8px 10px}.school-simulation button:disabled{opacity:.4;cursor:not-allowed}.school-simulation button:focus-visible{outline-offset:2px;outline:3px solid #4582b8}.school-simulation button.selected{color:#fff;background:#285443}.simulation-top{color:#6f8376;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;font-size:13px;display:flex}.simulation-top a{color:#234966;font-size:16px;text-decoration:none}.simulation-grid{grid-template-columns:minmax(240px,.85fr) minmax(400px,1.55fr) minmax(390px,1.25fr);gap:24px;max-width:2100px;margin:auto;display:grid}.device-label{flex-direction:column;gap:8px;margin-bottom:16px;font-size:18px;display:flex}.device-label small{color:#7e8f77;font-size:13px}.device-phone{background:#fff;border:5px solid #355342;border-radius:30px;flex-direction:column;min-width:0;display:flex;overflow:hidden;box-shadow:0 10px 30px #173a2010}.student-phone{height:750px}.phone-status{background:#f7faf4;flex-shrink:0;height:25px;padding:7px 15px;font-size:10px;position:relative}.phone-status i{background:#355342;border-radius:8px;width:24%;height:5px;position:absolute;top:8px;left:40%}.messenger-head{color:#fff;background:#087d65;justify-content:space-between;padding:18px 14px;font-size:18px;display:flex}.messenger-head small{font-size:12px}.school-contact{background:#fff;border-bottom:1px solid #d9e2d4;padding:17px}.school-contact small{color:#7b8d80;margin-top:6px;font-size:12px;display:block}.scenario-tabs{background:#f6f8f1;flex-wrap:wrap;gap:5px;padding:10px;display:flex}.scenario-tabs button{padding:6px;font-size:12px}.device-messages{background:#eff1e5;flex-direction:column;flex:1;gap:12px;min-height:0;padding:12px;display:flex;overflow:auto}.device-bubble{background:#fff;border:1px solid #dde5d7;border-radius:4px 14px 14px;padding:12px;font-size:14px;line-height:1.6}.device-bubble.outgoing{background:#dcebd7;border-radius:14px 4px 14px 14px}.device-bubble small{color:#63856d;font-size:11px}.device-bubble p{overflow-wrap:anywhere;margin:6px 0}.student-composer{background:#fafcf5;align-items:center;gap:10px;padding:14px;display:flex}.student-composer p{flex:1;max-height:140px;margin:0;font-size:14px;line-height:1.6;overflow:auto}.student-composer button{color:#fff;background:#087d65;border:0}.office-device{background:#fff;border:5px solid #35493d;border-radius:20px;flex-direction:column;height:750px;display:flex;overflow:hidden;box-shadow:0 10px 30px #173a2010}.browser-strip{background:#dce4dc;flex-shrink:0;align-items:center;gap:5px;height:38px;padding:10px;font-size:12px;display:flex}.browser-strip i{background:#91a897;border-radius:50%;width:7px;height:7px}.browser-strip i:first-child{background:#d29684}.browser-strip i:nth-child(2){background:#d5bf72}.browser-strip span{text-align:center;flex:1}.office-brand{color:#fff;background:linear-gradient(110deg,#173751,#285577);border-bottom:4px solid #cbb382;align-items:center;gap:16px;padding:26px;display:flex}.office-brand>span{color:#244437;background:#dce9be;border-radius:13px;place-items:center;width:50px;height:50px;font-size:28px;font-weight:700;display:grid}.office-brand h1{margin:0 0 7px;font-size:26px}.office-brand small{color:#cbdce6;font-size:13px}.office-tabs{border-bottom:1px solid #dbe4d6;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;font-size:13px;display:flex}.office-tabs label{align-items:center;gap:5px;margin-left:auto;display:flex}.office-messages{background:#f8faf5;flex:1;min-height:0;padding:20px;overflow:auto}.office-message{background:#fff;border:1px solid #d8e3d2;border-radius:13px;margin-bottom:14px;padding:15px;font-size:15px;line-height:1.6}.office-message small{color:#668467;font-size:12px;font-weight:700}.office-message p{margin:7px 0}.office-message.assignment{background:#eaf1df;font-size:13px}.office-message.reply{background:#e9f2fb;border-color:#c8dbe9}.office-message blockquote{color:#73858f;border-left:3px solid #a0b9cb;margin:12px 0 0;padding-left:10px;font-size:13px}.office-foot{color:#71896e;border-top:1px solid #d9e3d2;align-items:center;min-height:68px;padding:16px;font-size:12px;display:flex}.teacher-devices{grid-template-columns:1fr 1fr;gap:16px;display:grid}.teacher-phone{border-width:4px;border-radius:26px;height:367px}.teacher-phone:last-child{grid-column:1/-1}.teacher-brand{color:#fff;background:#183c2c;padding:12px;font-size:14px}.teacher-brand small{color:#c6d8b9;margin-top:5px;font-size:11px;display:block}.school-simulation .pinned-office{text-align:left;background:#e9f1db;border:0;border-radius:0;padding:8px 12px;font-size:11px}.teacher-phone .device-messages{background:#fbfcf8;gap:8px;padding:8px}.teacher-phone .device-bubble{padding:9px;font-size:12px}.teacher-phone .device-bubble small{font-size:10px}.teacher-composer{border-top:1px solid #e0e8d8;padding:9px}.teacher-composer p{max-height:65px;margin:0 0 7px;font-size:11px;line-height:1.5;overflow:auto}.teacher-composer button{padding:6px 9px;font-size:11px}.empty-chat{color:#82937b;font-size:13px;line-height:1.7}.office-messages>.empty-chat{text-align:center;max-width:300px;margin:65px auto}@media (max-width:1200px){.simulation-grid{grid-template-columns:280px minmax(0,1fr)}.simulation-grid>section:last-child{grid-column:1/-1}.teacher-devices{grid-template-columns:repeat(3,minmax(0,1fr))}.teacher-phone:last-child{grid-column:auto}.teacher-phone{height:450px}}@media (max-width:700px){.school-simulation{padding:16px}.simulation-top{flex-wrap:wrap}.simulation-top span{order:3;width:100%}.simulation-grid{grid-template-columns:1fr}.simulation-grid>section:last-child{grid-column:auto}.teacher-devices{grid-template-columns:1fr}.student-phone,.office-device{height:640px}.device-label{margin-top:12px}}.school-simulation .simulation-grid{grid-template-columns:minmax(260px,1fr) minmax(400px,1.45fr) minmax(260px,1fr)}.student-devices,.school-simulation .teacher-devices{grid-template-columns:1fr;gap:18px;display:grid}.school-simulation .student-phone,.school-simulation .teacher-phone{grid-column:auto;height:365px}.school-simulation .office-device{height:1131px}.student-devices .messenger-head{padding:10px 14px;font-size:15px}.student-devices .school-contact{border-radius:0;padding:9px 12px;font-size:12px}.student-devices .student-composer{padding:9px;font-size:12px}.student-devices .student-composer p{max-height:65px;font-size:12px}.student-devices .device-bubble{padding:9px;font-size:13px}.active-device{box-shadow:0 0 0 3px #a9c8aa,0 10px 30px #173a2010}.play-progress{background:#e6eee1;border:1px solid #c3d5c4;border-radius:10px;justify-content:space-between;gap:12px;margin-bottom:22px;padding:12px 18px;font-size:14px;display:flex}@media (max-width:1000px){.school-simulation .simulation-grid{grid-template-columns:1fr}.student-devices,.school-simulation .teacher-devices{grid-template-columns:repeat(3,minmax(0,1fr))}.school-simulation .office-device{height:600px}}@media (max-width:650px){.student-devices,.school-simulation .teacher-devices{grid-template-columns:1fr}}@media (min-width:701px){.school-simulation{flex-direction:column;height:100dvh;min-height:0;padding:12px 16px;display:flex;overflow:hidden}.school-simulation .simulation-top{flex-shrink:0;margin-bottom:8px}.school-simulation .play-progress{flex-shrink:0;margin-bottom:10px;padding:8px 12px}.school-simulation .simulation-grid{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:16px;width:100%;min-height:0}.school-simulation .simulation-grid>section,.school-simulation .simulation-grid>section:last-child{flex-direction:column;grid-column:auto;min-width:0;min-height:0;display:flex}.school-simulation .device-label{flex-shrink:0;gap:3px;margin:0 0 8px;font-size:14px}.school-simulation .device-label small{font-size:12px}.school-simulation .student-devices,.school-simulation .teacher-devices{flex:1;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:1fr;gap:10px;min-height:0}.school-simulation .student-phone,.school-simulation .teacher-phone,.school-simulation .office-device{height:100%;min-height:0}.school-simulation .office-device{flex:1}.school-simulation .device-phone{border-width:3px;border-radius:18px}.school-simulation .phone-status{height:15px;padding:3px 10px;font-size:9px}.school-simulation .phone-status i{height:4px;top:5px}.school-simulation .messenger-head,.school-simulation .teacher-brand{padding:6px 10px}.school-simulation .teacher-brand small{margin-top:2px}.school-simulation .student-devices .school-contact,.school-simulation .pinned-office{padding:4px 9px}.school-simulation .student-composer,.school-simulation .teacher-composer{padding:5px 8px}.school-simulation .student-composer p,.school-simulation .teacher-composer p{max-height:34px;margin:0;font-size:12px}.school-simulation .teacher-composer{align-items:center;gap:8px;display:flex}.school-simulation .teacher-composer p{flex:1}.school-simulation .teacher-composer button{flex-shrink:0}.school-simulation .device-messages{gap:5px;padding:6px}.school-simulation .office-brand{padding:14px}.school-simulation .office-brand h1{font-size:22px}.school-simulation .office-foot{min-height:40px;padding:10px}.school-simulation .office-messages{padding:12px}}.school-simulation{color:#24374b;background:#f3f6fb;font-family:Arial,sans-serif}.school-simulation .simulation-top{color:#8190a1;gap:12px}.school-simulation .simulation-top span{text-align:center;flex:1}.school-simulation button{color:#47627d;border-color:#dde5ef;border-radius:12px}.school-simulation button.selected{color:#0866df;background:#e7f0ff;border-color:#0000}.school-simulation .play-progress{color:#61758c;background:#fff;border-color:#e3e9f2;border-radius:12px;font-size:13px}.school-simulation .device-label{color:#44596e}.school-simulation .device-phone,.school-simulation .office-device{background:#fff;border:1px solid #dbe3ed;border-radius:20px;box-shadow:0 5px 18px #29456509}.school-simulation .phone-status i{background:#d4dde7;width:17%;left:42%}.school-simulation .messenger-head,.school-simulation .teacher-brand{color:#263e57;background:#fff;border-bottom:1px solid #f0f3f7}.school-simulation .messenger-head small,.school-simulation .teacher-brand small{color:#8a9aab}.school-simulation .school-contact,.school-simulation .pinned-office{color:#6b8198;background:#f8faff;border:0}.school-simulation .device-messages,.school-simulation .teacher-phone .device-messages,.school-simulation .office-messages{background:#fff}.school-simulation .device-bubble{color:#34465c;background:#f0f2f6;border:0;border-radius:16px 16px 16px 5px;align-self:flex-start;max-width:91%;line-height:1.55}.school-simulation .device-bubble.outgoing{color:#fff;background:linear-gradient(120deg,#1786ff,#0865e6);border-radius:16px 16px 5px;align-self:flex-end}.school-simulation .device-bubble small{color:#8796a8;font-size:10px}.school-simulation .device-bubble.outgoing small{color:#d5e7ff}.school-simulation .student-composer,.school-simulation .teacher-composer{background:#fff;border-top:1px solid #f0f3f8}.school-simulation .student-composer p,.school-simulation .teacher-composer p{color:#7b8da1;background:#f4f6f9;border-radius:12px;padding:6px 9px}.school-simulation .student-composer button,.school-simulation .teacher-composer button{color:#1871dd;background:#edf4ff;border:0;border-radius:14px}.school-simulation .office-brand>span{color:#1775db;background:#edf4ff;border-radius:12px;width:38px;height:38px;font-size:21px}.school-simulation .browser-strip{color:#a0acba;background:#fafbfd;height:25px;font-size:10px}.school-simulation .office-message{background:#f2f5f9;border:0;border-radius:15px;margin:0 20px 12px 0;padding:12px 15px;font-size:14px}.school-simulation .office-message.reply,.school-simulation .office-message.aiReply{background:#eaf3ff;margin:0 0 12px 20px}.school-simulation .office-message.assignment,.school-simulation .office-message.delivery{color:#7890a7;background:0 0;border-left:2px solid #c8ddf5;border-radius:0;margin-left:10px;padding:5px 12px;font-size:12px}.school-simulation .office-message small{color:#728ca6;font-size:11px}.school-simulation .office-foot{color:#91a0af;border-color:#edf1f6;font-size:11px}.school-simulation .empty-chat{color:#a2aebb;font-size:12px}@media (min-width:701px){.school-simulation{padding:20px 30px}.school-simulation .simulation-grid{gap:28px;max-width:1700px}.school-simulation .student-devices,.school-simulation .teacher-devices{gap:18px;padding:3px}.school-simulation .device-label{margin-bottom:12px}.school-simulation .device-phone{border-radius:18px}}@media (min-width:701px) and (max-width:1000px){.school-simulation{padding:12px}.school-simulation .simulation-grid{gap:14px}.school-simulation .student-devices,.school-simulation .teacher-devices{gap:12px}}.school-simulation{color:#233f58;background:linear-gradient(135deg,#dbeaf5 0%,#e8f1f5 48%,#dae9e5 100%)}.school-simulation .simulation-top a{color:#214c70;font-weight:600}.school-simulation .simulation-top span{color:#668096}.school-simulation .simulation-top button:first-of-type{color:#fff;background:#254e77;border-color:#254e77;box-shadow:0 3px 8px #24496a20}.school-simulation .play-progress{color:#315573;background:#d0e2ef;border:1px solid #b0cadc;box-shadow:inset 0 1px #ffffff80}.school-simulation .play-progress>span{white-space:nowrap;background:#f5f9fc;border-radius:12px;padding:2px 10px;font-weight:600}.school-simulation .device-label b{color:#214967;letter-spacing:.2px}.school-simulation .device-label small{color:#637f93}.school-simulation .device-phone{background:#edf5f8;border:1px solid #a9c1cd;box-shadow:0 7px 18px #1e4d6520,inset 0 1px #fff}.school-simulation .office-device{border:1px solid #95adbf;box-shadow:0 12px 28px #1d496925}.school-simulation .phone-status{color:#6c8695;background:#e7f0f3}.school-simulation .phone-status i{background:#99b3bf}.school-simulation .messenger-head{color:#205c4b;background:#d4ece3;border-bottom:1px solid #bddcce}.school-simulation .messenger-head small{color:#547b6b}.school-simulation .student-phone:nth-child(2) .messenger-head{color:#416032;background:#e0edcf;border-color:#c8dcb3}.school-simulation .student-phone:nth-child(3) .messenger-head{color:#2e6064;background:#d2e7e9;border-color:#b4d3d6}.school-simulation .school-contact{color:#547769;background:#edf6f2}.school-simulation .student-phone .device-messages{background:#edf5f6}.school-simulation .teacher-brand{color:#714736;background:#ebd7cc;border-bottom:1px solid #d8b9a8}.school-simulation .teacher-brand small{color:#926e5b}.school-simulation .teacher-phone:nth-child(2) .teacher-brand{color:#385975;background:#d8e5ef;border-color:#bdcddd}.school-simulation .teacher-phone:nth-child(2) .teacher-brand small{color:#68819a}.school-simulation .teacher-phone:nth-child(3) .teacher-brand{color:#476043;background:#dce7d8;border-color:#c1d3bb}.school-simulation .teacher-phone:nth-child(3) .teacher-brand small{color:#72866c}.school-simulation .pinned-office{color:#8b6d5d;background:#f7eee8}.school-simulation .teacher-phone .device-messages{background:#f6f2ee}.school-simulation .teacher-phone:nth-child(2) .device-messages{background:#edf3f8}.school-simulation .teacher-phone:nth-child(3) .device-messages{background:#eff5ed}.school-simulation .device-bubble{color:#344b61;background:#fff;box-shadow:0 2px 5px #2a50650b}.school-simulation .device-bubble.outgoing{color:#fff;background:linear-gradient(130deg,#2589f3,#1266d7);box-shadow:0 3px 8px #166ad51a}.school-simulation .student-composer,.school-simulation .teacher-composer{background:#f8fbfc;border-color:#dfe8ed}.school-simulation .office-brand{color:#fff;background:linear-gradient(110deg,#142d46 0%,#2a5279 58%,#193b5b 100%);border-bottom:3px solid #bca47a}.school-simulation .office-brand small{color:#b9cee0}.school-simulation .office-brand>span{color:#234768;background:#e2cea8;box-shadow:0 2px 8px #061b3030}.school-simulation .browser-strip{color:#587285;background:#c9dbe6}.school-simulation .office-tabs{background:#e9f1f8;border-color:#cdddea}.school-simulation .office-messages{background:#f3f7fa}.school-simulation .office-message{background:#fff;box-shadow:0 2px 8px #20496806}.school-simulation .office-message.aiReply{background:#e1eefb}.school-simulation .office-message.reply{background:#d5e8fd}.school-simulation .office-message.assignment,.school-simulation .office-message.delivery{color:#487066;box-shadow:none;background:#e6efec;border-left:3px solid #8eb8aa}.school-simulation .office-foot{color:#647f94;background:#e7eff5;border-color:#cbdce7}.school-simulation .device-phone.working-device{border:2px solid #18b86c;box-shadow:0 0 0 4px #26c47e30,0 8px 24px #138b5430}@media (min-width:701px){.school-simulation .simulation-grid{flex:none;gap:22px;width:72%;max-width:1500px;height:70dvh;margin:auto}.school-simulation .simulation-top{z-index:3;position:relative}.school-simulation .play-progress{z-index:5;text-align:center;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);color:#0000009e;pointer-events:none;background:#ffffffc7;border:1px solid #ffffff8c;border-radius:18px;width:min(560px,58vw);margin:0;padding:20px 28px;font-size:22px;font-weight:500;line-height:1.5;display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 36px #18395212}.school-simulation .play-progress>span{color:#00000061;background:0 0;padding:8px 0 0;font-size:12px;display:block}.school-simulation .office-brand{padding:10px}.school-simulation .office-brand h1{font-size:18px}.school-simulation .office-brand>span{width:30px;height:30px;font-size:18px}.school-simulation .office-tabs{gap:5px;padding:7px}.school-simulation .office-tabs button{padding:5px 8px;font-size:12px}.school-simulation .office-tabs label{font-size:11px}.school-simulation .device-label{font-size:13px}.school-simulation .device-label small{font-size:11px}.school-simulation .student-devices,.school-simulation .teacher-devices{gap:14px}}.school-simulation{background:linear-gradient(#9ed9f3 0%,#b5e3f6 70%,#88ba7c 70%,#70a965 100%) fixed}.school-simulation .play-progress{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#0000009e;background:#ffffff40;border:1px solid #4385be99;border-radius:32px;box-shadow:0 14px 42px #ffffff1f,0 8px 24px #27516c0d}
