/* IA rooms, futuristic skin: Tutor Steve list (#/tutor) and the role-play chat (#/roleplay/<id>).
   Visual only. Pink/violet neon from the app palette, glass, luminous borders, a soft orb and voice wave for the agent.
   Light/dark come from the theme variables. Motion is off under prefers-reduced-motion. No logic or copy is changed here. */
:root{--ai-pink:255,61,122;--ai-violet:139,92,246;--ai-neon:linear-gradient(135deg,rgba(var(--ai-pink),.85),rgba(var(--ai-violet),.8))}
:root[data-theme="light"]{--ai-pink:224,20,104;--ai-violet:109,40,217}
@media (prefers-color-scheme:light){:root:where(:not([data-theme="dark"])){--ai-pink:224,20,104;--ai-violet:109,40,217}}

/* luminous gradient border (1px) painted by a masked pseudo-element, so the glass fill stays untouched */
.tu-head,.tu-row,.rp-bubble,.rp-photo,.rp-suggest,.rp-notice,.rp-closed,.rp-report,.rp-fix-item{position:relative}
.tu-head::before,.tu-row::before,.rp-bubble::before,.rp-photo::before,button.rp-suggest::before,.rp-notice::before,.rp-closed::before,.rp-report::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(135deg,rgba(var(--ai-pink),.6),rgba(var(--ai-violet),.12) 45%,rgba(var(--ai-violet),.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.rp-bubble::after{display:none}

/* ---------- Tutor Steve list ---------- */
.tu-head{overflow:hidden;border-color:transparent;background:linear-gradient(160deg,rgba(var(--ai-pink),.16),rgba(var(--ai-violet),.12) 55%,transparent),var(--glass)}
.ai-orb{position:absolute;right:-26px;top:-30px;width:120px;height:120px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.55),rgba(var(--ai-pink),.55) 28%,rgba(var(--ai-violet),.45) 62%,transparent 72%);
  filter:blur(1px);opacity:.75;animation:ai-float 7s ease-in-out infinite}
.tu-head>*:not(.ai-orb){position:relative;z-index:2}
@keyframes ai-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6px,8px,0) scale(1.06)}}
.tu-chip{transition:box-shadow .2s,border-color .2s,transform .12s}
.tu-chip.on{background:var(--ai-neon);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 20px -8px rgba(var(--ai-pink),.9)}
.tu-chip:not(.on):hover{border-color:rgba(var(--ai-pink),.55)}
.tu-sec h2{display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tu-sec h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--ai-pink),.45),transparent)}
.tu-row{border-color:transparent;overflow:hidden;transition:transform .18s,box-shadow .25s}
.tu-row::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--ai-pink),.2),transparent 55%)}
a.tu-row:hover,a.tu-row:focus-visible{border-color:transparent;transform:translateY(-1px);box-shadow:0 12px 30px -16px rgba(var(--ai-pink),.9),var(--sh-sm)}
a.tu-row:hover::after,a.tu-row:focus-visible::after{opacity:1}
.tu-row>*{position:relative;z-index:2}
.tu-ic{border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 8px 20px -8px rgba(var(--ai-pink),.95)}
.tu-ic,.tu-ic.rp{background:linear-gradient(150deg,rgba(var(--ai-violet),1),rgba(var(--ai-pink),1))}
.tu-ic.cp{background:linear-gradient(150deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),1))}
.tu-bars i{background:var(--line)}
.tu-bars.b1 i:nth-child(1),.tu-bars.b2 i:nth-child(-n+2),.tu-bars.b3 i{background:linear-gradient(180deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),1));box-shadow:0 0 6px rgba(var(--ai-pink),.55)}
.tu-done{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 0 10px rgba(34,197,94,.5)}

/* ---------- Role-play chat ---------- */
.rp-chatbar{gap:10px;background:linear-gradient(to bottom,var(--bg),rgba(var(--ai-violet),.06));border-bottom:0;position:sticky}
.rp-chatbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--ai-pink),.65),rgba(var(--ai-violet),.65),transparent)}
.rp-chat-back{color:var(--acc-tx);transition:background .2s}
.rp-chat-back:hover{background:var(--glass-3)}
.rp-orb{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center}
.rp-orb .rp-chat-avatar{position:relative;z-index:2;width:36px;height:36px;border:2px solid var(--bg)}
.rp-orb-ring{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),1),rgba(var(--ai-pink),.15),rgba(var(--ai-pink),1));
  box-shadow:0 0 14px rgba(var(--ai-pink),.55),0 0 28px -4px rgba(var(--ai-violet),.55);animation:ai-spin 9s linear infinite;will-change:transform}
@keyframes ai-spin{to{transform:rotate(360deg)}}
.rp-speaking .rp-orb-ring{animation-duration:2.6s;box-shadow:0 0 18px rgba(var(--ai-pink),.85),0 0 36px -2px rgba(var(--ai-violet),.8)}
.rp-chat-name{letter-spacing:.01em}
.rp-wave{flex:none;margin-left:auto;margin-right:4px;display:inline-flex;align-items:center;gap:3px;height:22px}
.rp-wave i{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),1));transform:scaleY(.2);transform-origin:center;opacity:.45;transition:opacity .3s}
.rp-speaking .rp-wave i{opacity:1;animation:ai-wave .9s ease-in-out infinite}
.rp-speaking .rp-wave i:nth-child(2){animation-delay:.12s}.rp-speaking .rp-wave i:nth-child(3){animation-delay:.24s}
.rp-speaking .rp-wave i:nth-child(4){animation-delay:.36s}.rp-speaking .rp-wave i:nth-child(5){animation-delay:.48s}
@keyframes ai-wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.rp-wave i:nth-child(2){transform:scaleY(.35)}.rp-wave i:nth-child(3){transform:scaleY(.5)}.rp-wave i:nth-child(4){transform:scaleY(.3)}

.rp-write-badge{color:#fff;background:var(--ai-neon);border:0;box-shadow:0 0 12px -2px rgba(var(--ai-pink),.8)}
.rp-write-title{color:var(--violet)}
.rp-task{color:var(--tx)}
.rp-photo.scene-photo{border:0;border-radius:22px;box-shadow:0 18px 40px -24px rgba(var(--ai-pink),.6),0 0 0 .5px var(--ring)}
.rp-photo.scene-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(to top,rgba(20,9,16,.55),transparent 45%),linear-gradient(135deg,rgba(var(--ai-pink),.14),rgba(var(--ai-violet),.14))}

.rp-face{background:rgba(var(--ai-violet),.16);box-shadow:0 0 0 1px rgba(var(--ai-violet),.45),0 0 12px -2px rgba(var(--ai-pink),.55)}
.rp-bubble{border-color:transparent;border-radius:18px 18px 18px 6px;background:var(--glass-2);box-shadow:0 10px 24px -16px rgba(var(--ai-violet),.9)}
.rp-you{border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),.95));box-shadow:0 10px 26px -12px rgba(var(--ai-pink),.95),0 0 0 1px rgba(255,255,255,.14) inset}
.rp-you::after,.rp-heard::after{display:none}
.rp-heard{border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),.95));box-shadow:0 10px 26px -12px rgba(var(--ai-pink),.95)}
.rp-typing i{background:rgba(var(--ai-pink),1);box-shadow:0 0 8px rgba(var(--ai-pink),.8)}
.rp-typing i:nth-child(2){background:rgba(var(--ai-violet),1);box-shadow:0 0 8px rgba(var(--ai-violet),.8)}

/* hint cards: were hard-coded light pink; now glass that follows the theme */
button.rp-suggest,button.rp-tip-use,.rp-fix-card{background:linear-gradient(160deg,rgba(var(--ai-pink),.14),rgba(var(--ai-violet),.12)),var(--glass-2);border:1px solid transparent;color:var(--tx);border-radius:16px;overflow:hidden}
button.rp-suggest{box-shadow:0 10px 26px -16px rgba(var(--ai-pink),.9)}
.rp-suggest-kicker,.rp-fix-kicker,.rp-tip-kicker{color:rgba(var(--ai-pink),1);letter-spacing:.1em}
.rp-suggest-line,.rp-fix-why,.rp-tip-starter{color:var(--violet)}
button.rp-suggest:hover,button.rp-tip-use:hover{box-shadow:0 12px 30px -14px rgba(var(--ai-pink),1)}
.rp-notice,.rp-closed{border-color:transparent;background:linear-gradient(165deg,rgba(var(--ai-pink),.12),rgba(var(--ai-violet),.1)),var(--glass)}
.rp-q{display:table;margin:0 auto 8px;padding:3px 12px;border-radius:999px;color:var(--tx);background:var(--glass-2);box-shadow:0 0 0 1px rgba(var(--ai-violet),.4),0 0 14px -4px rgba(var(--ai-violet),.6);font-size:.72rem;letter-spacing:.04em}

/* dock: the composer from 3d1e6fd, with a neon focus ring */
.rp-dock{background:linear-gradient(to top,var(--bg) 62%,transparent)}
.rp-field{border-color:rgba(var(--ai-violet),.4)}
.rp-field:focus-within{border-color:rgba(var(--ai-pink),.9);box-shadow:0 0 0 3px rgba(var(--ai-pink),.18),0 0 24px -6px rgba(var(--ai-pink),.7),inset 0 1px 0 rgba(255,255,255,.14)}
.rp-compose.has-text .rp-send,.rp-recording .rp-send{background:linear-gradient(135deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),1));box-shadow:0 0 18px -2px rgba(var(--ai-pink),.8)}
.rp-dock .speakbig{border-color:rgba(var(--ai-violet),.45);box-shadow:0 0 16px -6px rgba(var(--ai-violet),.9)}
.rp-start{background:linear-gradient(135deg,rgba(var(--ai-pink),1),rgba(var(--ai-violet),1));box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 28px -10px rgba(var(--ai-pink),1);animation:ai-glow 2.8s ease-in-out infinite}
@keyframes ai-glow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 28px -10px rgba(var(--ai-pink),.9)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 12px 34px -6px rgba(var(--ai-pink),1)}}
.rp-report{border-color:transparent}
.rp-report h3,.rp-rubric b,.rp-level b{color:rgba(var(--ai-pink),1)}

/* light mode: softer glows, same structure */
:root[data-theme="light"] .rp-photo.scene-photo::after{background:linear-gradient(to top,rgba(60,20,40,.28),transparent 45%),linear-gradient(135deg,rgba(var(--ai-pink),.1),rgba(var(--ai-violet),.1))}
:root[data-theme="light"] .rp-orb-ring{box-shadow:0 0 10px rgba(var(--ai-pink),.4)}
:root[data-theme="light"] .ai-orb{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .ai-orb,.rp-orb-ring,.rp-speaking .rp-orb-ring,.rp-speaking .rp-wave i,.rp-start{animation:none!important}
  .tu-row,.tu-chip{transition:none}
  a.tu-row:hover{transform:none}
}

/* Tutor Steve scene art over the futuristic skin: the picture is the tile, with the same glow ring. */
.tu-row .tu-ic.tu-art{box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 8px 20px -8px rgba(var(--ai-pink),.95)}
.tu-sec-ic{box-shadow:0 0 0 1.5px rgba(var(--ai-pink),.6),0 0 12px -2px rgba(var(--ai-violet),.7)}
.tu-mosaic{box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 8px 20px -8px rgba(var(--ai-pink),.7)}
:root[data-theme="light"] .tu-row .tu-ic.tu-art{box-shadow:0 0 0 1px rgba(var(--ai-pink),.35),0 6px 14px -8px rgba(var(--ai-pink),.7)}