/* ── Гараж 24 — светлая современная тема ──────────────────────────── */
*{box-sizing:border-box;}
html{overflow-y:scroll;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;}
body{margin:0;background:#F5F6F8;color:#16181D;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;}
button{font-family:inherit;}

.page{width:760px;max-width:100%;margin:0 auto;padding:0 16px 120px;position:relative;}

/* Учебный баннер */
#promo{margin:16px 0 2px;padding:12px 16px;border-radius:14px;
  background:linear-gradient(180deg,#FFF6F1,#FFF1E8);border:1px solid #FFE0CC;
  color:#7A4B34;font-size:13px;line-height:1.55;}
#promo b{color:#E4571F;font-weight:700;}

/* Шапка */
#toprow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 4px 0;}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.gicon{width:44px;height:44px;flex:0 0 auto;border-radius:13px;
  box-shadow:0 6px 16px rgba(255,90,40,.28);}
.lockup .name{font-weight:800;font-size:18px;color:#16181D;letter-spacing:-.01em;line-height:1;}
.lockup .sub{margin-top:3px;font-size:12px;color:#8A9099;}

/* Переключатель языка RU/EN */
#langtoggle{display:inline-flex;gap:2px;border:1px solid #E6E8EC;border-radius:999px;
  background:#FFFFFF;padding:3px;box-shadow:0 1px 2px rgba(16,24,40,.05);flex:0 0 auto;}
#langtoggle button{border:none;border-radius:999px;cursor:pointer;background:transparent;
  color:#8A9099;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.08em;padding:5px 13px;transition:.15s;}
#langtoggle button.active{background:linear-gradient(90deg,#FF7A1A,#FF4D2E);color:#fff;}

/* Хиро */
#hero{padding:6px 0 2px;}
.hi{margin-top:22px;font-size:15px;color:#8A9099;font-weight:600;}
.headline{margin:4px 0 22px;font-size:34px;line-height:1.08;font-weight:800;
  letter-spacing:-.02em;color:#16181D;}

/* Раскрывающиеся панели */
.panel{margin-top:16px;border:1px solid #ECEEF1;border-radius:18px;background:#FFFFFF;
  box-shadow:0 6px 24px rgba(16,24,40,.05);overflow:hidden;}
.panel>summary{list-style:none;cursor:pointer;padding:15px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.panel>summary::-webkit-details-marker{display:none;}
.ptxt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ptitle{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A9099;}
.psub{font-size:12.5px;color:#B2B7BF;font-weight:500;}
.panel .chev{font-size:16px;color:#B5BAC2;transition:transform .2s;flex:0 0 auto;}
.panel[open] .chev{transform:rotate(180deg);}
.pbody{padding:0 18px 14px;}
.plist{display:flex;flex-direction:column;}
.prow{display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid #F0F1F4;}
.prow:first-child{padding-top:2px;}
.prow:last-child{border-bottom:none;}
.pn{font-size:15px;color:#22252B;font-weight:500;}
.pp{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:15px;color:#E4571F;}
.meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;padding-top:14px;
  border-top:1px dashed #EBEDF0;color:#8A9099;font-size:12.5px;}
.exrow{display:flex;flex-wrap:wrap;gap:8px;padding:2px 18px 16px;}
.exchip{border:1px solid #E6E8EC;border-radius:999px;background:#F7F8FA;color:#3A3F47;
  font-size:13.5px;padding:9px 15px;cursor:pointer;transition:.15s;line-height:1.2;}
.exchip:hover{border-color:#FF7A1A;color:#16181D;background:#FFFFFF;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,90,40,.14);}

/* Окно чата */
#chatwin{margin:16px 0 0;border:1px solid #E4E7EB;border-radius:20px;background:#FFFFFF;
  box-shadow:0 10px 30px rgba(16,24,40,.07);min-height:220px;padding:18px;
  display:flex;flex-direction:column;}
#messages{display:flex;flex-direction:column;gap:12px;}
.msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.5;
  color:#22252B;word-wrap:break-word;overflow-wrap:anywhere;}
.msg.user{align-self:flex-end;background:#FFF1E8;border:1px solid #FFE0CC;
  border-bottom-right-radius:6px;}
.msg.bot{align-self:flex-start;background:#F3F4F6;border:1px solid #E9EBEF;
  border-bottom-left-radius:6px;}
.msg a{color:#E4571F;font-weight:600;}
.msg.typing{color:#9AA0A8;}
.msg.typing span{display:inline-block;animation:blink 1.2s infinite;}
.msg.typing span:nth-child(2){animation-delay:.2s;}
.msg.typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.25;}30%{opacity:1;}}
.hello{margin:auto;text-align:center;color:#9AA0A8;font-size:14px;padding:40px 10px;}
#messages:not(:empty)+.hello{display:none;}

/* Поле ввода: textarea + микрофон + отправка */
#composer{position:relative;margin:14px 0 0;border:1px solid #E6E8EC;border-radius:16px;
  background:#FFFFFF;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .15s;
  display:flex;align-items:stretch;}
#composer:focus-within{border-color:#FF7A1A;}
#msgbox{flex:1;border:none;outline:none;resize:none;background:transparent;color:#16181D;
  font-size:15px;line-height:1.5;padding:14px 108px 14px 16px;border-radius:16px;
  max-height:160px;font-family:inherit;}
#msgbox::placeholder{color:#9AA0A8;}
#voicefab{position:absolute;right:62px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;background:transparent;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s;}
#voicefab:hover{background:#F1F2F4;}
#voicefab svg{width:20px;height:20px;}
#sendbtn{position:absolute;right:0;top:0;bottom:0;width:54px;border:none;cursor:pointer;
  background:linear-gradient(90deg,#FF7A1A,#FF4D2E);border-radius:0 15px 15px 0;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:filter .15s;}
#sendbtn:hover{filter:brightness(1.05);}
#sendbtn:disabled{opacity:.5;cursor:default;filter:none;}
#sendbtn svg{width:18px;height:18px;}

/* ── Полноэкранный голосовой режим ── */
#voiceovl{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,rgba(24,26,32,.82),rgba(12,13,16,.95));
  backdrop-filter:blur(8px);}
#voiceovl[hidden]{display:none;}
.vo-inner{display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:32px;max-width:560px;width:90%;}
#vo-orb{width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFC489,#F97316 60%,#EA580C);
  box-shadow:0 0 0 0 rgba(249,115,22,.55);transition:transform .2s ease;}
#vo-orb.idle{opacity:.6;}
#vo-orb.listening{animation:vopulse 1.8s ease-in-out infinite;}
#vo-orb.speaking{animation:vospeak .5s ease-in-out infinite;transform:scale(1.08);}
@keyframes vopulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.5);}
  50%{box-shadow:0 0 0 26px rgba(249,115,22,0);}}
@keyframes vospeak{0%,100%{transform:scale(1.05);}50%{transform:scale(1.16);}}
#vo-status{color:#F3F4F6;font-size:16px;font-weight:600;letter-spacing:.2px;text-align:center;}
#vo-transcript{width:100%;max-height:38vh;overflow-y:auto;color:#D1D5DB;font-size:15px;
  line-height:1.5;display:flex;flex-direction:column;gap:8px;padding:4px 2px;}
.vo-line{background:rgba(255,255,255,.06);border-radius:12px;padding:8px 12px;}
.vo-line.you{background:rgba(249,115,22,.18);color:#FFE7D1;align-self:flex-end;max-width:85%;}
#vo-end{margin-top:6px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  color:#fff;font-size:15px;font-weight:600;padding:11px 26px;border-radius:999px;
  cursor:pointer;transition:background .15s;}
#vo-end:hover{background:rgba(255,255,255,.16);}
#vo-debug{color:#9AA0A8;font-family:'JetBrains Mono',monospace;font-size:12px;
  text-align:center;min-height:16px;}

@media (max-width:640px){
  .headline{font-size:27px;}
  .lockup .sub{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .exchip:hover{transform:none;}
}