/* Contextual tutor: usable above the mobile keyboard, including narrow screens. */
.tutor-toggle {
    position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); right: 25px; z-index: 30;
    isolation: isolate; display: grid; place-items: center; width: 74px; height: 74px; border: 3px solid #fff;
    border-radius: 50%; background: radial-gradient(circle at 32% 24%, #f56e6b, #c9253a 67%, #9e1c31); color: white;
    box-shadow: 0 10px 30px #91213948, inset 0 0 0 1px #ffffff38; transition: transform .25s, box-shadow .25s;
}
.tutor-toggle::before {
    content: ""; position: absolute; z-index: -1; inset: -7px; border: 1px solid #d73b4a55; border-radius: 50%;
    animation: tutor-ring 3.2s ease-out infinite;
}
.tutor-toggle::after {
    content: "✦"; position: absolute; right: -4px; top: -13px; color: #ffc95f; font-size: 21px;
    filter: drop-shadow(0 2px 3px #91213938); animation: tutor-spark 2.4s ease-in-out infinite;
}
.tutor-toggle:hover { transform: translateY(-5px) rotate(-3deg) scale(1.03); box-shadow: 0 15px 34px #91213950; }
.tutor-robot { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 88%; }
.tutor-robot img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px #64112635); }
.tutor-toggle > .tutor-robot { position: absolute; left: -5px; bottom: -3px; width: 83px; height: 87px; animation: tutor-float 4s ease-in-out infinite; }
.tutor-toggle:hover > .tutor-robot { animation: tutor-wave .7s ease-in-out 2; }
.tutor-toggle[aria-expanded="true"] > .tutor-robot { animation: tutor-hop .45s ease-out both; }
.tutor-toggle-label {
    position: absolute; right: 86px; white-space: nowrap; padding: 9px 14px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: .78rem;
    font-weight: 700; box-shadow: var(--shadow); pointer-events: none;
}
.tutor-toggle[aria-expanded="true"] .tutor-toggle-label { display: none; }
.tutor-panel {
    position: fixed; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 91px); right: 25px;
    width: min(385px, calc(100vw - 32px)); max-height: min(620px, calc(100dvh - 125px)); z-index: 31;
    background: var(--surface); border: 1px solid var(--line); border-radius: 23px;
    box-shadow: 0 16px 70px #26314b2b; overflow: auto; overscroll-behavior: contain;
    animation: tutor-appear .22s ease-out; scrollbar-width: thin;
}
.tutor-panel[hidden] { display: none; }
.tutor-header {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 11px;
    padding: 18px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.tutor-header h2 { font-size: 1.12rem; letter-spacing: -.02em; }
.tutor-header > div > span { display: block; font-size: .7rem; color: var(--muted); margin-top: 3px; }
.tutor-header .icon-button { margin-left: auto; width: 38px; height: 44px; border: 0; }
.tutor-avatar { display: grid; place-items: center; width: 54px; height: 54px; background: radial-gradient(circle at 35% 25%, #fff3d7, var(--red-soft)); color: var(--red); border: 1px solid #dc4b5728; border-radius: 17px; flex-shrink: 0; overflow: visible; }
.tutor-avatar .tutor-robot { width: 58px; height: 61px; margin-top: -8px; animation: tutor-hello .7s .12s ease-out both; }
.tutor-panel:has(.tutor-form[aria-busy="true"]) .tutor-avatar .tutor-robot { animation: tutor-thinking 1s ease-in-out infinite; }
.tutor-invite > img.tutor-invite-robot { aspect-ratio: 1.18; object-fit: contain; padding: 12px; background: radial-gradient(circle at 32% 25%, #ef6866, #c93241 72%); border-radius: 22px; animation: tutor-float 4.8s ease-in-out infinite; }
.tutor-body { padding: 18px; }
.tutor-intro { color: var(--muted); font-size: .75rem; line-height: 1.8; margin-bottom: 15px; }
.tutor-answer { color: var(--ink); font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; padding: 15px; background: var(--red-soft); border-radius: 3px 15px 15px 15px; margin-bottom: 20px; }
.tutor-answer:empty { display: none; }
.tutor-form { display: grid; gap: 10px; }
.tutor-form label { font-size: .8rem; font-weight: 750; }
.tutor-form textarea { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); padding: 12px; font-size: 16px; min-height: 92px; max-height: 200px; resize: vertical; width: 100%; }
.tutor-form .button { font-size: .85rem; }
.tutor-guide-actions { display: grid; gap: 9px; }
.tutor-guide-actions .button { width: 100%; font-size: .82rem; }
.tutor-status { font-size: .75rem; color: var(--muted); line-height: 1.75; margin-top: 13px; }
.tutor-status:empty { display: none; }
@keyframes tutor-appear { from { opacity: 0; transform: translateY(16px) scale(.94) rotate(1deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes tutor-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 45% { transform: translateY(-5px) rotate(2deg); } 55% { transform: translateY(-5px) rotate(1deg); } }
@keyframes tutor-wave { 0%, 100% { transform: rotate(0) scale(1); } 35% { transform: rotate(-7deg) scale(1.06); } 70% { transform: rotate(5deg) scale(1.03); } }
@keyframes tutor-hop { 0% { transform: translateY(0) scale(1); } 55% { transform: translateY(-9px) scale(1.08); } 100% { transform: translateY(0) scale(1); } }
@keyframes tutor-hello { from { opacity: 0; transform: translateY(8px) rotate(-8deg) scale(.8); } 65% { opacity: 1; transform: translateY(-2px) rotate(4deg) scale(1.05); } to { transform: none; } }
@keyframes tutor-thinking { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes tutor-ring { 0%, 45% { opacity: 0; transform: scale(.82); } 70% { opacity: .7; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes tutor-spark { 0%, 100% { opacity: .55; transform: rotate(-15deg) scale(.75); } 45% { opacity: 1; transform: rotate(12deg) scale(1.12); } }
@media (max-width: 640px) {
    .tutor-toggle { width: 66px; height: 66px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
    .tutor-toggle > .tutor-robot { width: 73px; height: 77px; }
    .tutor-toggle-label { display: none; }
    .tutor-panel { right: 12px; width: calc(100vw - 24px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 80px); max-height: calc(100dvh - 116px); border-radius: 20px; }
    .tutor-header { padding: 14px 16px; } .tutor-body { padding: 16px; }
    .app-page:has(.tutor-toggle) .page-footer { padding-bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) { .tutor-panel, .tutor-toggle, .tutor-toggle::before, .tutor-toggle::after, .tutor-robot, .tutor-invite > img.tutor-invite-robot { animation: none !important; transition: none; } .tutor-toggle:hover { transform: none; } }