/* ══════════════════════════════════════════════
   EduGuide AI — Classroom Theme v2.1
   TestCrate.com · Navy #0d1b3e · Orange #FF6B00
   ══════════════════════════════════════════════ */
:root {
  --tc-navy:   #0d1b3e;
  --tc-blue:   #1a3a6e;
  --tc-orange: #FF6B00;
  --tc-gold:   #f5a623;
  --tc-green:  #22c55e;
  --tc-red:    #ef4444;
  --tc-white:  #ffffff;
  --tc-bg:     #f4f6fb;
  --tc-border: #dde3ef;
  --tc-text:   #1e293b;
  --tc-text2:  #64748b;
  --tc-text3:  #94a3b8;
  --cls-wall:  #f0ebe0;
  --radius:    14px;
  --shadow:    0 4px 24px rgba(13,27,62,.10);
  --shadow-sm: 0 2px 10px rgba(13,27,62,.07);
}

/* ── Root ── */
.eg-root {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  max-height: none;
  background: var(--tc-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--tc-border);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════
   TOP BAR  (topmost element)
   ═══════════════════════════════════ */
.eg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(90deg, var(--tc-navy) 0%, var(--tc-blue) 100%);
  color: #fff;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(13,27,62,.25);
}
.eg-topbar-left { display:flex; align-items:center; gap:12px; }
.eg-avatar-sm {
  width:40px; height:40px;
  background: linear-gradient(145deg, var(--tc-orange), var(--tc-gold));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  box-shadow:0 2px 10px rgba(255,107,0,.45);
}
.eg-topbar-name { font-size:15px; font-weight:700; color:#fff; letter-spacing:-.2px; }
.eg-topbar-status {
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:rgba(255,255,255,.6); margin-top:3px;
}
.eg-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--tc-green);
  box-shadow:0 0 7px var(--tc-green);
  animation:pulse 2s infinite;
}
.eg-dot.thinking { background:var(--tc-gold); box-shadow:0 0 7px var(--tc-gold); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.eg-topbar-right { display:flex; align-items:center; gap:10px; }
.eg-model-badge {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.82);
  padding:3px 11px; border-radius:20px;
  font-size:11px; font-family:monospace;
  max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.eg-clear-btn {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.72);
  border-radius:8px; padding:5px 11px;
  font-size:14px; cursor:pointer; transition:all .2s;
}
.eg-clear-btn:hover { background:rgba(239,68,68,.28); color:#fff; }

/* ═══════════════════════════════════
   CLASSROOM SCENE
   ═══════════════════════════════════ */
.eg-classroom {
  position:relative;
  background: linear-gradient(180deg, #f5efe0 0%, #ede5d0 100%);
  height:360px;
  flex-shrink:0;
  overflow:hidden;
  border-bottom:3px solid #d4c4a8;
}
/* Wall texture bricks */
.eg-classroom::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(0,0,0,.028) 60px),
    repeating-linear-gradient(transparent,transparent 29px,rgba(0,0,0,.028) 30px);
  pointer-events:none;
}
/* Floor */
.eg-classroom::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:48px;
  background:linear-gradient(180deg,#c8945a,#9a6635);
  border-top:2.5px solid #8a5828;
}

/* ── Wall clock ── */
.eg-wall-clock {
  position:absolute; top:10px; right:12%;
  width:36px; height:36px;
  background:#f5f5f0;
  border:3px solid #8b7355;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.eg-clock-face { position:relative; width:100%; height:100%; }
.eg-clock-hand {
  position:absolute; bottom:50%; left:50%;
  transform-origin:bottom center;
  background:#333; border-radius:2px;
}
.eg-clock-hand.hour {
  width:2px; height:9px; margin-left:-1px;
  animation:clockHour 43200s linear infinite;
}
.eg-clock-hand.minute {
  width:1.5px; height:12px; margin-left:-.75px;
  animation:clockMin 3600s linear infinite;
}
.eg-clock-center {
  position:absolute; top:50%; left:50%;
  width:4px; height:4px; border-radius:50%;
  background:#c0392b; transform:translate(-50%,-50%);
}
@keyframes clockHour  { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes clockMin   { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }

/* ── Blackboard ── */
.eg-blackboard {
  position:absolute; top:12px; left:4%;
  width:63%; max-width:none;
  transform:none;
}
.eg-bb-frame {
  background:#1a4a2e;
  border:7px solid #5d3a1a;
  border-radius:4px;
  height:268px;
  position:relative; overflow:hidden;
  box-shadow:inset 0 0 24px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
}
/* subtle green texture */
.eg-bb-frame::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(
    90deg,rgba(0,0,0,0),rgba(0,0,0,0) 38px,rgba(0,0,0,.04) 40px
  );
}
/* Ruled lines like a real chalkboard */
.eg-bb-frame::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(
    180deg,transparent,transparent 27px,rgba(255,255,255,.04) 28px
  );
}
.eg-bb-text {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-start; gap:6px;
  padding:10px 14px 8px;
  overflow-y:auto; overflow-x:hidden;
  scroll-behavior:smooth; z-index:1;
  /* hide scrollbar but keep scroll */
  scrollbar-width:none;
}
.eg-bb-text::-webkit-scrollbar { display:none; }

/* Status / welcome mode: centred */
.eg-bb-text.status-mode {
  align-items:center; justify-content:center;
}

.eg-chalk-line {
  display:block; color:rgba(255,255,255,.90);
  font-family:'Segoe UI',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.3px; filter:blur(.3px);
  text-align:left; transition:opacity .45s; width:100%;
  text-shadow:0 0 10px rgba(255,255,255,.25);
  line-height:1.55;
}
.eg-chalk-line.small { font-size:11px; opacity:.72; text-align:center; }
.eg-chalk-line.centre { text-align:center; }
.eg-chalk-line.animating {
  animation:chalkWrite .9s ease forwards;
}

/* Answer content on the board */
/* ── Blackboard answer: single chalk font, uniform look ── */
.eg-bb-answer {
  display: block;
  width: 100%;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  color: #eee8d5 !important; /* warm chalk-white — one base colour for everything */
  word-break: break-word;
  white-space: normal;
  /* no blur — keeps all glyphs crisp and uniform */
  text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 0 8px rgba(255,255,255,.06);
}

/* Reset every child so theme CSS never bleeds through */
.eg-bb-answer * {
  font-family: inherit !important;
  box-sizing: border-box;
}

/* Paragraphs */
.eg-bb-p {
  margin: 0 0 8px;
  color: #eee8d5 !important;
}
.eg-bb-p:last-child { margin-bottom: 0; }

/* Headings — chalk-yellow, same font, only size & weight change */
.eg-bb-h1, .eg-bb-h2, .eg-bb-h3 {
  display: block;
  font-family: inherit;
  font-weight: 700;
  color: #ffe066 !important;
  margin: 10px 0 4px;
  line-height: 1.4;
  border-bottom: 1px dashed rgba(255,224,102,.3);
  padding-bottom: 2px;
}
.eg-bb-h1 { font-size: 15px; }
.eg-bb-h2 { font-size: 14px; }
.eg-bb-h3 { font-size: 13.5px; }

/* Bold / Italic — stay in chalk palette */
.eg-bb-answer strong,
.eg-bb-answer b    { font-weight: 700; color: #fff5c0 !important; }
.eg-bb-answer em,
.eg-bb-answer i    { font-style: italic; color: #d4f0d4 !important; }

/* Inline code */
.eg-bb-code {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 11.5px;
  background: rgba(0,0,0,.30);
  color: #ffd080 !important;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.1);
}

/* Code blocks */
.eg-bb-pre {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 6px 0;
  overflow-x: auto;
  font-size: 11.5px;
}
.eg-bb-pre code {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: inherit;
  color: #ffd080 !important;
  background: none;
  padding: 0;
}

/* Lists */
.eg-bb-ul, .eg-bb-ol {
  margin: 4px 0 8px;
  padding-left: 20px;
  color: #eee8d5 !important;
}
.eg-bb-ul { list-style-type: disc; }
.eg-bb-ol { list-style-type: decimal; }
.eg-bb-ul li,
.eg-bb-ol li {
  margin-bottom: 4px;
  color: #eee8d5 !important;
  line-height: 1.65;
  font-size: 13px;
}
.eg-bb-ul li::marker,
.eg-bb-ol li::marker { color: #ffe066 !important; }

/* Horizontal rule */
.eg-bb-hr {
  border: none;
  border-top: 1px dashed rgba(255,255,255,.25);
  margin: 8px 0;
}

/* Heading pill on board */
.eg-bb-heading {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: #ffe066 !important; letter-spacing: .6px; text-transform: uppercase;
  opacity: .85; margin-bottom: 5px; width: 100%;
  border-bottom: 1px dashed rgba(255,224,102,.25); padding-bottom: 4px;
}

@keyframes chalkWrite {
  from { clip-path:inset(0 100% 0 0); }
  to   { clip-path:inset(0 0% 0 0); }
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.eg-chalk-dust {
  position:absolute; bottom:4px; left:0; right:0;
  height:3px; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.eg-bb-text.updating .eg-chalk-line { opacity:0; }

/* Chalk tray */
.eg-bb-chalk-tray {
  height:9px; background:#7a5030;
  border-radius:0 0 3px 3px;
  display:flex; align-items:center; gap:5px; padding:0 8px;
  box-shadow:0 3px 5px rgba(0,0,0,.25);
}
.eg-chalk-piece {
  width:20px; height:5px; background:#f0f0f0; border-radius:3px;
}
.eg-chalk-piece.yellow { background:#f9d423; }
.eg-chalk-piece.pink   { background:#f9a; }

/* ── Teacher wrapper ── */
.eg-teacher-wrap {
  position:absolute; right:1.5%; bottom:48px;
  display:flex; flex-direction:column; align-items:center;
}

/* ── Teacher SVG ── */
.eg-teacher-svg {
  width:95px; height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.22));
}
.eg-teacher {
  animation:teacherBreathe 4s ease-in-out infinite;
  transform-origin:bottom center;
  position:relative; z-index:2;
}
@keyframes teacherBreathe {
  0%,100% { transform:scaleY(1) translateY(0); }
  50%      { transform:scaleY(1.008) translateY(-2px); }
}

/* Right arm idle & talking */
.eg-arm-right-g {
  transform-origin:114px 118px;
  animation:armIdle 5s ease-in-out infinite;
}
@keyframes armIdle {
  0%,100% { transform:rotate(-4deg); }
  50%      { transform:rotate(6deg); }
}
.eg-teacher.talking .eg-arm-right-g {
  animation:armPoint 0.9s ease-in-out infinite;
}
@keyframes armPoint {
  0%,100% { transform:rotate(-18deg); }
  50%      { transform:rotate(12deg); }
}

/* Head nod when talking */
.eg-teacher.talking { animation:teacherTalkBob 0.55s ease-in-out infinite; }
@keyframes teacherTalkBob {
  0%,100% { transform:translateY(0) rotate(-1.5deg); }
  50%      { transform:translateY(-3px) rotate(1.5deg); }
}

/* Eye blink */
#eg-teacher-svg .eye-blink {
  animation:svgBlink 5s infinite;
  transform-origin:center;
}
@keyframes svgBlink {
  0%,88%,100% { transform:scaleY(1); }
  93%          { transform:scaleY(.06); }
}

/* ── Desk ── */
.eg-desk { position:relative; width:160px; z-index:3; margin-top:-8px; }
.eg-desk-surface {
  height:12px;
  background:linear-gradient(180deg,#d4a060,#a87040);
  border-radius:4px 4px 0 0;
  box-shadow:0 -2px 8px rgba(0,0,0,.15);
  position:relative;
}
.eg-desk-items {
  position:absolute; bottom:12px; left:8px;
  display:flex; gap:10px; align-items:flex-end;
}
/* Book stack */
.eg-desk-book-stack { display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.eg-dbook { height:10px; border-radius:1px; box-shadow:1px 1px 2px rgba(0,0,0,.2); }
.eg-dbook.b1 { width:32px; background:#2471a3; }
.eg-dbook.b2 { width:28px; background:#c0392b; }
.eg-dbook.b3 { width:35px; background:#27ae60; }
/* Pencil cup */
.eg-desk-cup {
  width:16px; height:18px;
  background:#e0d8c8; border:1.5px solid #c4b89a;
  border-radius:2px 2px 3px 3px;
  display:flex; align-items:flex-end;
  justify-content:center; gap:2px; padding:2px;
  position:relative;
}
.eg-pencil { width:3px; border-radius:1px 1px 0 0; }
.eg-pencil.p1 { height:14px; background:linear-gradient(180deg,#f5c542,#e5a810); }
.eg-pencil.p2 { height:11px; background:linear-gradient(180deg,#e74c3c,#c0392b); }
.eg-pencil.p3 { height:16px; background:linear-gradient(180deg,#2ecc71,#27ae60); }
/* Nameplate */
.eg-nameplate-stand {
  display:flex; align-items:flex-end; padding-bottom:2px;
}
.eg-nameplate-plate {
  background:linear-gradient(135deg,#f5f5dc,#e8dfc0);
  border:1.5px solid #c8a86a;
  border-radius:3px;
  padding:3px 8px; font-size:7.5px; font-weight:800;
  color:#5d3a1a; letter-spacing:.3px; white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
/* Tea cup */
.eg-tea-cup {
  width:18px; height:14px;
  background:#e8d5b0; border:1.5px solid #c4a06a;
  border-radius:2px 2px 4px 4px;
  position:relative; overflow:visible;
}
.eg-tea-steam {
  position:absolute; bottom:15px;
  width:2px; height:8px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(200,200,200,.7));
  border-radius:2px; animation:steamRise 2s ease-in-out infinite;
}
.eg-tea-steam.s1 { left:4px; animation-delay:0s; }
.eg-tea-steam.s2 { left:10px; animation-delay:.7s; }
@keyframes steamRise {
  0%   { transform:translateY(0) scaleX(1); opacity:.7; }
  100% { transform:translateY(-10px) scaleX(1.5); opacity:0; }
}
/* Desk front panel */
.eg-desk-front {
  height:28px;
  background:linear-gradient(180deg,#c89050,#9a6830);
  border-radius:0 0 4px 4px;
}
.eg-desk-legs { display:flex; justify-content:space-between; padding:0 12px; }
.eg-desk-leg { width:10px; height:30px; background:#8b5e3c; border-radius:0 0 4px 4px; }

/* ── Floating decorations ── */
.eg-deco {
  position:absolute; font-size:18px; opacity:.3;
  animation:floatDeco 6s ease-in-out infinite;
}
@keyframes floatDeco {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-9px) rotate(8deg); }
}

/* ── Chalk dust particles ── */
.eg-particles { position:absolute; inset:0; pointer-events:none; }
.eg-particle {
  position:absolute; width:3px; height:3px;
  background:rgba(255,255,255,.65); border-radius:50%;
  animation:particleFly var(--dur,2s) ease-out forwards;
}
@keyframes particleFly {
  from { opacity:.8; transform:translate(0,0) scale(1); }
  to   { opacity:0;  transform:translate(var(--tx,20px),var(--ty,-30px)) scale(.2); }
}

/* ═══════════════════════════════════
   CHAT PANEL
   ═══════════════════════════════════ */
.eg-chat-panel {
  flex:none; display:flex; flex-direction:column;
  overflow:hidden; background:transparent;
  border-top:1.5px solid var(--tc-border);
}

/* ── Messages ── */
.eg-messages {
  display:none !important;
}
.eg-messages::-webkit-scrollbar { width:4px; }
.eg-messages::-webkit-scrollbar-thumb { background:var(--tc-border); border-radius:4px; }

/* ── Welcome card ── */
.eg-welcome { text-align:center; padding:22px 16px; animation:fadeUp .4s ease; }
.eg-welcome-icon {
  width:68px; height:68px;
  background:linear-gradient(145deg,var(--tc-orange),var(--tc-gold));
  border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-size:32px; margin:0 auto 14px;
  box-shadow:0 6px 24px rgba(255,107,0,.3);
  animation:welcomePop .55s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes welcomePop {
  from { transform:scale(.5); opacity:0; }
  to   { transform:scale(1);  opacity:1; }
}
.eg-welcome-title { font-size:21px; font-weight:800; color:var(--tc-navy); margin-bottom:6px; }
.eg-welcome-sub   { font-size:13.5px; color:var(--tc-text2); line-height:1.7; max-width:360px; margin:0 auto 18px; }
.eg-quick-pills   { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.eg-pill {
  padding:8px 15px; background:var(--tc-white);
  border:1.5px solid var(--tc-border); border-radius:24px;
  font-size:12.5px; color:var(--tc-navy); cursor:pointer;
  transition:all .2s; font-weight:500; box-shadow:var(--shadow-sm);
}
.eg-pill:hover {
  border-color:var(--tc-orange); color:var(--tc-orange);
  transform:translateY(-2px); box-shadow:0 4px 14px rgba(255,107,0,.18);
}

/* ── Message bubbles ── */
.eg-msg-wrap { margin-bottom:14px; animation:fadeUp .28s ease; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}
.eg-msg { display:flex; gap:10px; max-width:88%; }
.eg-msg.user { flex-direction:row-reverse; margin-left:auto; }
.eg-msg-avatar {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; margin-top:2px;
}
.eg-msg-avatar.ai   { background:linear-gradient(145deg,var(--tc-orange),var(--tc-gold)); box-shadow:0 2px 10px rgba(255,107,0,.3); }
.eg-msg-avatar.user { background:var(--tc-navy); border:1.5px solid var(--tc-blue); color:rgba(255,255,255,.7); font-size:13px; }
.eg-msg-body { flex:1; min-width:0; }
.eg-msg-name { font-size:10.5px; font-weight:700; color:var(--tc-text3); margin-bottom:4px; text-transform:uppercase; letter-spacing:.7px; }
.eg-msg.user .eg-msg-name { text-align:right; }
.eg-bubble {
  padding:12px 16px; border-radius:14px;
  font-size:14px; line-height:1.75; word-break:break-word;
}
.eg-msg.ai .eg-bubble {
  background:var(--tc-white); border:1.5px solid var(--tc-border);
  border-left:4px solid var(--tc-orange); box-shadow:var(--shadow-sm);
  color:var(--tc-text); border-radius:4px 14px 14px 14px;
}
.eg-msg.user .eg-bubble {
  background:linear-gradient(135deg,var(--tc-navy),var(--tc-blue));
  color:rgba(255,255,255,.92);
  border-radius:14px 4px 14px 14px;
  box-shadow:0 2px 12px rgba(13,27,62,.2);
}
.eg-cursor {
  display:inline-block; width:2px; height:1em;
  background:var(--tc-orange); vertical-align:text-bottom;
  animation:cursorBlink .7s step-end infinite;
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Thinking dots */
.eg-thinking-wrap { display:flex; align-items:center; gap:8px; color:var(--tc-text2); font-size:13px; font-style:italic; }
.eg-th-dots span {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--tc-orange); margin:0 2px;
  animation:thBounce 1.2s infinite;
}
.eg-th-dots span:nth-child(2) { animation-delay:.2s; background:var(--tc-gold); }
.eg-th-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes thBounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-6px);opacity:1} }

/* Markdown */
.eg-bubble pre { background:#0d1b3e; border:1px solid #263650; border-radius:8px; padding:12px; margin:10px 0; overflow-x:auto; font-family:'Courier New',monospace; font-size:12.5px; line-height:1.6; color:#d4cfc5; }
.eg-bubble code:not(pre code) { background:rgba(255,107,0,.1); color:var(--tc-orange); padding:2px 6px; border-radius:4px; font-size:12.5px; font-family:monospace; }
.eg-bubble p { margin-bottom:8px; }
.eg-bubble p:last-child { margin-bottom:0; }
.eg-bubble ul,.eg-bubble ol { margin:8px 0 8px 20px; }
.eg-bubble li { margin-bottom:4px; }
.eg-bubble h1,.eg-bubble h2,.eg-bubble h3 { margin:12px 0 6px; font-weight:700; color:var(--tc-navy); }
.eg-bubble strong { color:var(--tc-navy); }
.eg-msg.user .eg-bubble strong { color:#fff; }
.eg-file-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.eg-file-chip { display:flex; align-items:center; gap:4px; padding:3px 10px; background:rgba(255,107,0,.08); border:1px solid rgba(255,107,0,.25); border-radius:20px; font-size:11px; color:var(--tc-orange); font-weight:600; }

/* ── Attach bar ── */
.eg-attach-bar { display:flex; flex-wrap:wrap; gap:7px; padding:0 18px; }
.eg-attach-chip { display:flex; align-items:center; gap:5px; padding:4px 11px; background:#e8f0fe; border:1px solid rgba(26,58,110,.2); border-radius:20px; font-size:11.5px; color:var(--tc-blue); font-weight:600; }
.eg-attach-rm { cursor:pointer; opacity:.6; margin-left:3px; font-size:12px; }
.eg-attach-rm:hover { opacity:1; color:var(--tc-red); }

/* ── Input area ── */
.eg-input-area {
  padding:12px 18px 14px; border-top:1.5px solid var(--tc-border);
  background:#fafbff; flex-shrink:0;
}
.eg-input-box {
  display:flex; align-items:flex-end; gap:10px;
  background:var(--tc-white); border:1.5px solid var(--tc-border);
  border-radius:14px; padding:10px 12px;
  transition:border-color .2s,box-shadow .2s; box-shadow:var(--shadow-sm);
}
.eg-input-box:focus-within { border-color:var(--tc-orange); box-shadow:0 0 0 3px rgba(255,107,0,.12); }
.eg-textarea {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--tc-text); font-family:inherit; font-size:14px;
  resize:none; max-height:150px; min-height:24px; line-height:1.65;
}
.eg-textarea::placeholder { color:var(--tc-text3); }
.eg-input-actions { display:flex; align-items:center; gap:8px; }
.eg-attach-btn {
  width:34px; height:34px; border-radius:8px;
  background:#e8f0fe; border:1.5px solid var(--tc-border);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer; transition:all .2s;
}
.eg-attach-btn:hover { border-color:var(--tc-orange); background:rgba(255,107,0,.08); }
.eg-send-btn {
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(135deg,var(--tc-orange),#e85500);
  border:none; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  color:#fff; transition:opacity .2s,transform .15s;
  box-shadow:0 2px 10px rgba(255,107,0,.4);
}
.eg-send-btn svg { width:16px; height:16px; }
.eg-send-btn:hover { opacity:.88; transform:translateY(-1px); }
.eg-send-btn:active { transform:scale(.92); }
.eg-send-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; }
.eg-stop-btn {
  width:36px; height:36px; border-radius:9px;
  background:var(--tc-red); border:none; color:#fff;
  font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(239,68,68,.3);
}
.eg-input-hint { font-size:11px; color:var(--tc-text3); text-align:center; margin-top:7px; }

/* ── Toast ── */
.eg-toast {
  position:absolute; bottom:72px; left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--tc-navy); color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.12); border-radius:9px;
  padding:9px 18px; font-size:13px;
  opacity:0; pointer-events:none; transition:all .3s;
  white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; z-index:100;
}
.eg-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media (max-width:640px) {
  .eg-root { border-radius:0; border:none; }
  .eg-classroom { height:300px; }
  .eg-blackboard { left:3%; width:68%; top:10px; }
  .eg-bb-frame   { height:230px; }
  .eg-bb-text    { padding:8px 10px 6px; }
  .eg-bb-answer  { font-size:12px; }
  .eg-bb-h1 { font-size:14px; }
  .eg-bb-h2 { font-size:13px; }
  .eg-bb-h3 { font-size:12.5px; }
  .eg-teacher-wrap { right:0.5%; bottom:44px; }
  .eg-teacher-svg  { width:74px; }
  .eg-desk { width:105px; }
  .eg-topbar { padding:9px 12px; }
  .eg-topbar-name { font-size:13px; }
  .eg-model-badge { max-width:110px; font-size:10px; }
  .eg-input-area  { padding:8px 10px 10px; }
  .eg-input-hint  { font-size:10px; }
  .eg-wall-clock  { right:3%; }
}

@media (max-width:400px) {
  .eg-classroom  { height:270px; }
  .eg-blackboard { width:70%; }
  .eg-bb-frame   { height:200px; }
  .eg-teacher-svg { width:60px; }
  .eg-desk { width:88px; }
}