/* Mysomero Tutor - Glass UI (v72.41.35)
   Loaded AFTER chat.css / ui1-3. Re-skins the chat shell using tokens only,
   so it can be switched off with:  define( 'MSM_DISABLE_GLASS', true );  in wp-config.php
   Solid tokens (--bg/--surface/--border) stay opaque so full-screen panels and modals
   never turn see-through; translucency is limited to the --glass* tokens below. */

/* ---- Tokens -------------------------------------------------------------- */
.msm-app{
    --glass:rgba(255,255,255,.55);--glass2:rgba(255,255,255,.78);--glass-strong:rgba(244,248,255,.86);
    --stroke:rgba(15,23,42,.08);--hi:rgba(255,255,255,.9);
    --blob1:rgba(26,111,232,.30);--blob2:rgba(124,92,255,.18);--blob3:rgba(20,184,166,.18);
    --shadow-glass:0 10px 36px rgba(26,70,150,.13);
    --bg:#eaf1fc;
}
/* Dark mode: reverted to the 72.41.33 look. The palette comes from chat.css; glass tokens map to solid surfaces. */
.msm-app[data-theme="dark"]{
    --glass:var(--surface);--glass2:var(--surface2);--glass-strong:var(--surface);
    --stroke:var(--border);--hi:transparent;
    --blob1:transparent;--blob2:transparent;--blob3:transparent;
    --shadow-glass:var(--shadow);
}
.msm-app[data-theme="dark"] .msm-sidebar{background:var(--sidebar);-webkit-backdrop-filter:none;backdrop-filter:none;border-right-color:var(--sidebar-border)}
.msm-app[data-theme="dark"] .msm-sidebar-top{border-bottom-color:var(--sidebar-border)}
.msm-app[data-theme="dark"] .msm-chat-header{background:var(--surface);border-bottom-color:var(--border);-webkit-backdrop-filter:none;backdrop-filter:none}
.msm-app[data-theme="dark"] .msm-input-wrap{background:var(--bg2);border-color:var(--border);box-shadow:none}
.msm-app[data-theme="dark"] .msm-nav-active,.msm-app[data-theme="dark"] .msm-nav-item.msm-nav-active{box-shadow:none}

/* ---- Ambient background (radial gradients: cheap on low-end phones) ------ */
.msm-app{
    background:
        radial-gradient(62vmax 62vmax at -8% -10%,var(--blob1),transparent 62%),
        radial-gradient(52vmax 52vmax at 108% 32%,var(--blob2),transparent 62%),
        radial-gradient(50vmax 50vmax at 40% 112%,var(--blob3),transparent 62%),
        var(--bg);
}
.msm-main{background:transparent}

/* ---- Sidebar ------------------------------------------------------------- */
.msm-sidebar{
    background:var(--glass);
    -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
    border-right:1px solid var(--stroke);
}
@media (max-width:700px){ .msm-sidebar{background:var(--glass-strong)} }
.msm-sidebar-top{background:transparent;border-bottom:1px solid var(--stroke)}
.msm-sidebar-top::before,.msm-sidebar-top::after{display:none}
.msm-logo-text{color:var(--sidebar-text)}
.msm-logo-version{color:var(--text3)}
.msm-sidebar-top .msm-icon-btn{background:var(--glass2);border-color:var(--stroke);color:var(--sidebar-text)}
.msm-sidebar-top .msm-icon-btn:hover{background:var(--accent-bg);border-color:var(--stroke)}
.msm-sidebar-search{background:var(--accent-bg);border-color:transparent;border-radius:12px}
.msm-sidebar-nav{border-bottom-color:var(--stroke)}
.msm-nav-item{border-radius:12px}
.msm-nav-item:hover{background:var(--accent-bg);border-color:transparent}
.msm-nav-active,.msm-nav-item.msm-nav-active{
    background:var(--glass2) !important;color:var(--sidebar-text) !important;
    border:1px solid var(--stroke) !important;padding-left:10px !important;font-weight:600 !important;
    box-shadow:inset 0 1px 0 var(--hi),0 1px 6px rgba(0,0,0,.08);
}
.msm-nav-active .msm-nav-icon{color:var(--accent)}

/* ---- Header -------------------------------------------------------------- */
.msm-chat-header{
    background:var(--glass);border-bottom:1px solid var(--stroke);
    -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
}
.msm-main .msm-icon-btn,.msm-menu-btn{background:var(--glass2);border-color:var(--stroke)}
.msm-main .msm-icon-btn:hover{background:var(--accent-bg);border-color:var(--stroke)}

/* ---- Messages: Claude/ChatGPT style (answer text on the canvas) ---------- */
.msm-msg.msm-user .msm-bubble{
    background:var(--accent-bg);border:1px solid var(--stroke);color:var(--text);
    border-radius:20px 20px 6px 20px;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.msm-app[data-theme="dark"] .msm-msg.msm-user .msm-bubble{background:var(--user-bg);border-color:var(--user-border);color:var(--user-text)}
.msm-msg.msm-ai .msm-bubble{
    background:transparent;border:none;box-shadow:none;border-radius:0;padding:4px 2px;
}

/* ---- Composer: floating glass pill --------------------------------------- */
.msm-input-area{background:transparent;border-top:none;padding:8px 16px 14px}
.msm-input-wrap{
    background:var(--glass2);border:1px solid var(--stroke);border-radius:28px;padding:7px 7px 7px 18px;
    box-shadow:var(--shadow-glass),inset 0 1px 0 var(--hi);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
}
.msm-input-wrap:not(.msm-voice-active):focus-within{
    border-color:var(--stroke);box-shadow:0 0 0 3px var(--accent-bg),var(--shadow-glass),inset 0 1px 0 var(--hi);
}
.msm-input-normal-row{align-items:center;gap:4px}
#msm-input{padding:8px 0}

/* Mic stays put, always */
#msm-voice-btn{
    width:38px;height:38px;border:none;border-radius:50%;background:transparent;
    color:var(--text2);margin:0;padding:0;
}
#msm-voice-btn:hover{background:var(--accent-bg);color:var(--accent);border:none}

/* Waveform (idle)  ->  up arrow (has text) */
#msm-send{
    position:relative;width:38px;height:38px;flex-shrink:0;padding:0;margin:0;
    border:none;border-radius:50%;background:var(--accent-bg);color:var(--text);
    display:flex;align-items:center;justify-content:center;box-shadow:none;opacity:1;
    transition:background .25s,color .25s,box-shadow .25s,transform .2s;
}
#msm-send svg{
    position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:18px;height:18px;
    fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
    transition:opacity .22s,transform .32s cubic-bezier(.34,1.56,.64,1);
}
#msm-send .msm-sx-up{opacity:0;transform:translateY(8px) scale(.5)}
#msm-send:hover{opacity:1;transform:none;box-shadow:none;background:var(--accent-bg)}
#msm-send.msm-has-text{background:var(--accent);color:#fff;box-shadow:0 4px 14px var(--accent-glow)}
#msm-send.msm-has-text:hover{background:var(--accent);transform:scale(1.06);box-shadow:0 6px 18px var(--accent-glow)}
#msm-send.msm-has-text .msm-sx-wave{opacity:0;transform:translateY(-8px) scale(.5)}
#msm-send.msm-has-text .msm-sx-up{opacity:1;transform:none}
#msm-send:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---- Mobile bottom nav ---------------------------------------------------
   The nav sits BELOW the app (over the dark page background), so a translucent
   fill looks muddy in light mode. Use a solid surface + hairline + soft lift. */
.msm-mobile-nav,.msm-mobile-nav[data-theme],.msm-mobile-nav:not([data-theme]){
    background:var(--bg2);border-top:1px solid var(--stroke);
    box-shadow:0 -6px 24px rgba(15,23,42,.07);
}
.msm-mobile-nav-item{font-size:10.5px;font-weight:500;letter-spacing:.1px;gap:3px;color:var(--text3)}
.msm-mobile-nav[data-theme="light"] .msm-mobile-nav-item{color:var(--text3)}
.msm-mobile-nav-icon{display:flex;align-items:center;justify-content:center;min-width:24px;height:24px}
.msm-mobile-nav-active,
.msm-mobile-nav[data-theme="light"] .msm-mobile-nav-active{font-weight:600}
.msm-mobile-nav-active .msm-mobile-nav-icon,
.msm-mobile-nav[data-theme="light"] .msm-mobile-nav-active .msm-mobile-nav-icon{
    background:var(--accent-bg);border-radius:999px;padding:4px 16px;min-width:56px;height:30px;
    box-sizing:border-box;
}

/* ---- Fix: unreadable text on dark ---------------------------------------- */
/* "This topic might benefit from more practice - Take a quick quiz" card (kept from 72.41.36) */
.msm-app[data-theme="dark"] .msm-auto-quiz-prompt{
    background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.38);color:#fcd34d;
}

@media (prefers-reduced-motion:reduce){
    #msm-send,#msm-send svg{transition:none}
}

/* ---- v72.41.45: make the chat input clearly noticeable (colour/border/shadow only; layout unchanged) ---- */
.msm-app .msm-input-wrap{
    background:rgba(255,255,255,.96);
    border:1.5px solid rgba(26,111,232,.30);
    box-shadow:0 8px 26px rgba(26,70,150,.16),inset 0 1px 0 rgba(255,255,255,.9);
}
.msm-app[data-theme="dark"] .msm-input-wrap{
    background:#262118;
    border:1.5px solid rgba(255,255,255,.18);
    box-shadow:0 8px 26px rgba(0,0,0,.50),0 0 0 1px rgba(74,154,245,.12);
}
.msm-app .msm-input-wrap:not(.msm-voice-active):focus-within{
    border-color:var(--accent);
    box-shadow:0 0 0 3.5px var(--accent-glow),0 8px 26px rgba(26,70,150,.18);
}
.msm-app[data-theme="dark"] #msm-input::placeholder{color:#cfc6b5;opacity:1}
.msm-app[data-theme="dark"] #msm-voice-btn{color:var(--text)}
.msm-app[data-theme="dark"] #msm-input{color:#f4efe6}
/* The voice / send button is the one obvious focal point: solid brand blue when idle */
.msm-app #msm-send:not(.msm-has-text){
    background:linear-gradient(140deg,#1a6fe8,#4a9af5);color:#fff;
    box-shadow:0 4px 14px rgba(26,111,232,.35);
}
.msm-app #msm-send:not(.msm-has-text):hover{
    background:linear-gradient(140deg,#1a6fe8,#4a9af5);box-shadow:0 6px 18px rgba(26,111,232,.45);
}
.msm-app #msm-send:disabled:not(.msm-has-text){opacity:.7}