/* Projeto A+ — tutor.css : a professora de IA por voz */

/* botão "I have a question" (exercício e aula) */
.askbtn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;color:#3A2600;
  background:linear-gradient(135deg,#7FD8FF,#4FA6E8);border-radius:16px;padding:12px 14px;
  margin-top:14px;box-shadow:0 8px 20px -8px rgba(44,111,176,.65)}
.askbtn:active{transform:translateY(1px)}
.askbtn.hidden{display:none!important}
.askbtn .ab-face{font-size:26px;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.askbtn .ab-txt{flex:1;display:flex;flex-direction:column;line-height:1.25;color:#0A2540}
.askbtn .ab-txt b{font-size:14.5px}
.askbtn .ab-txt small{font-size:11px;opacity:.72}
.askbtn .ab-mic{font-size:22px;flex:0 0 auto}

/* cartão da conversa */
.tutor-card{background:linear-gradient(180deg,#12395F,#0B2843);border:1px solid rgba(255,255,255,.14);
  border-radius:26px;padding:18px 16px 16px;width:380px;max-width:94vw;max-height:92vh;
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75)}
.tutor-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;padding-right:26px}
.tutor-face{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  flex:0 0 auto;background:radial-gradient(circle at 35% 30%,#7FC5FF,#2C6FB0);
  transition:box-shadow .25s}
.tutor-face.speaking{box-shadow:0 0 0 4px rgba(127,197,255,.35);animation:tface 1.4s infinite}
@keyframes tface{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.tutor-nm{font-weight:800;font-size:16px}
.tutor-sub{font-size:11.5px;color:var(--soft)}

.tutor-chat{flex:1;overflow-y:auto;min-height:120px;max-height:44vh;display:flex;
  flex-direction:column;gap:9px;padding:4px 2px 8px}
.tb{max-width:88%;font-size:14px;line-height:1.55;border-radius:16px;padding:10px 13px;
  animation:fade .25s}
.tb-t{align-self:flex-start;background:rgba(127,197,255,.14);border:1px solid rgba(127,197,255,.3);
  border-bottom-left-radius:5px;display:flex;gap:8px;align-items:flex-start}
.tb-k{align-self:flex-end;background:rgba(255,194,75,.16);border:1px solid rgba(255,194,75,.32);
  border-bottom-right-radius:5px;color:#FFF3D6}
.tb-txt{flex:1}
.tb-say{background:none;font-size:15px;opacity:.65;flex:0 0 auto;padding:0 2px;color:var(--ink)}
.tb-say:active{opacity:1}

.tutor-state{font-size:12.5px;color:var(--soft);text-align:center;min-height:34px;
  display:flex;align-items:center;justify-content:center;padding:4px 6px}
.tutor-state.hot{color:var(--coral);font-weight:700}
.tutor-state.think{color:var(--gold)}
.tutor-state.warn{color:var(--gold)}

.tutor-mic{display:block;margin:2px auto 12px;width:86px;height:86px;border-radius:50%;
  font-size:38px;color:#3A2600;background:linear-gradient(180deg,var(--gold),var(--goldD));
  box-shadow:0 10px 26px -8px rgba(233,163,36,.7);transition:transform .12s}
.tutor-mic:active{transform:scale(.94)}
.tutor-mic:disabled{opacity:.5}
.tutor-mic.listening{background:linear-gradient(180deg,var(--coral),var(--coralD));
  animation:micpulse 1.2s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,143,107,.55)}
  50%{box-shadow:0 0 0 16px rgba(255,143,107,0)}}

.tutor-alt{display:flex;gap:7px;align-items:center}
.tutor-alt input{flex:1;font-family:inherit;font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.07);border:1.5px solid var(--line);border-radius:12px;
  padding:11px 12px}
.tutor-alt input:focus{outline:none;border-color:var(--gold)}
.tutor-alt button{width:44px;height:44px;border-radius:12px;font-size:17px;color:#3A2600;
  background:linear-gradient(180deg,var(--gold),var(--goldD));flex:0 0 auto}
.tutor-foot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;
  font-size:10.5px;color:var(--soft)}
.tutor-hint{opacity:.8}

/* painel dos pais: as conversas */
.tchat{border:1px solid var(--line);border-radius:14px;margin-bottom:9px;overflow:hidden;
  background:rgba(255,255,255,.03)}
.tchat-h{display:flex;justify-content:space-between;align-items:center;width:100%;
  text-align:left;background:rgba(255,255,255,.05);color:var(--ink);font-size:12.5px;
  font-weight:700;padding:10px 12px}
.tchat-h small{color:var(--soft);font-weight:500;display:block;font-size:11px}
.tchat-b{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tchat-b.hidden{display:none}
.tq,.ta{font-size:12.5px;line-height:1.5;border-radius:11px;padding:8px 11px}
.tq{background:rgba(255,194,75,.12);border-left:3px solid var(--gold)}
.ta{background:rgba(127,197,255,.10);border-left:3px solid #4FA6E8}
.tq b,.ta b{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.7;
  display:block;margin-bottom:2px}
.tflag{font-size:10.5px;color:var(--coral);font-weight:700}
@media (max-width:400px){
  .tutor-card{padding:16px 12px 12px}
  .tutor-mic{width:74px;height:74px;font-size:32px}
}

/* ====== estados da BOLA (modo conversa, estilo ChatGPT voz) ====== */
.tutor-mic.thinking{background:linear-gradient(180deg,#7FC5FF,#2C6FB0);color:#062038;
  animation:orbthink 1.6s infinite ease-in-out}
@keyframes orbthink{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.tutor-mic.speaking{background:linear-gradient(180deg,#4FE3C4,#159C82);color:#03291F;
  animation:orbspeak 1.1s infinite ease-in-out}
@keyframes orbspeak{0%,100%{box-shadow:0 0 0 0 rgba(79,227,196,.55)}
  50%{box-shadow:0 0 0 18px rgba(79,227,196,0)}}

/* ====== MODO VOZ: a tela da BOLA GRANDE (pedido: "igual ao ChatGPT") ====== */
/* trava de layout: sem isso o texto de estado subia por cima do cabeçalho
   quando o teclado do iPhone espremia o cartão */
.tutor-head,.tutor-state,.tutor-mic,.tutor-alt,.tutor-foot{flex:0 0 auto}
.tutor-view{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid var(--line);
  border-radius:11px;width:38px;height:38px;font-size:17px;color:var(--ink);flex:0 0 auto}
.tutor-view:active{transform:scale(.94)}

.tutor-card.voice{min-height:72vh;justify-content:center}
.tutor-card.voice .tutor-chat{display:none}
.tutor-card.voice .tutor-alt{display:none}
.tutor-card.voice .tutor-hint{display:none}
.tutor-card.voice .tutor-mic{width:170px;height:170px;font-size:64px;margin:auto auto 10px;
  box-shadow:0 18px 50px -12px rgba(233,163,36,.55)}
.tutor-card.voice .tutor-state{font-size:15px;font-weight:650;min-height:52px;
  order:5;margin-bottom:6px}
.tutor-card.voice .tutor-foot{justify-content:center}
@keyframes orbidleV{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.tutor-card.voice .tutor-mic{animation:orbidleV 3.2s infinite ease-in-out}
.tutor-card.voice .tutor-mic.listening{animation:micpulse 1.2s infinite}
.tutor-card.voice .tutor-mic.thinking{animation:orbthink 1.6s infinite ease-in-out}
.tutor-card.voice .tutor-mic.speaking{animation:orbspeak 1.1s infinite ease-in-out}