/* BestYou·AI — the study companion panel. Glass over the silk, so it reads as something laid on the page rather than cut into it. Loom-style: drag by the bar, expand, collapse to the orb. */ .tutor{ /* Above the silk overlay (2147483000) — the material is decoration and must never sit on top of a control the learner is trying to use. */ /* Anchored by the orb, bottom-left, since the companion now opens from the orb player (HK 2026-08-09). Drag still lands it anywhere. */ position:fixed; left:22px; bottom:96px; top:auto; right:auto; z-index:2147483005; width:min(392px, calc(100vw - 32px)); /* The estate applies zoom:1.333 on , so a fixed element resolves against the SCALED viewport — 100vh is ~75% of the device height here. Cap the panel so it always fits, and let the log absorb the difference, otherwise `bottom` pushes the header off the top of the screen. */ max-height:calc(100vh - 96px); display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:rgba(246,243,235,.94); border:1px solid rgba(185,174,148,.55); box-shadow:0 2px 8px rgba(10,33,69,.10), 0 26px 70px rgba(10,33,69,.24); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); font-size:15px; line-height:1.55; color:#20242c; opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); transform-origin:100% 100%; transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.3,1), visibility .26s, width .26s cubic-bezier(.2,.8,.3,1); } .tutor.open{opacity:1; visibility:visible; transform:none} .tutor.wide{width:min(620px, calc(100vw - 32px))} .tutor.moving{transition:none; cursor:grabbing} :root[data-theme="dark"] .tutor{ background:rgba(12,22,38,.94); color:#eef3f9; border-color:rgba(255,255,255,.13); box-shadow:0 2px 8px rgba(0,0,0,.5), 0 26px 70px rgba(0,0,0,.55); } /* ── bar ── */ .tt-bar{ display:flex; align-items:center; gap:9px; padding:11px 12px 11px 10px; border-bottom:1px solid rgba(185,174,148,.42); cursor:grab; background:linear-gradient(180deg, rgba(255,252,244,.7), rgba(255,252,244,0)); touch-action:none; user-select:none; } .tt-bar:active{cursor:grabbing} :root[data-theme="dark"] .tt-bar{ border-bottom-color:rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.05), transparent); } .tt-grip{color:#9aa6b8; display:grid; place-items:center; flex:none; cursor:grab; border-radius:5px; padding:1px} .tt-grip:focus-visible{outline:2.5px solid #0b6b5b; outline-offset:2px; color:#20242c} :root[data-theme="dark"] .tt-grip:focus-visible{color:#eef3f9} .tt-name{font-size:13.5px; font-weight:700; letter-spacing:.01em; flex:1} .tt-gov{ font-size:10.5px; font-weight:750; letter-spacing:.11em; text-transform:uppercase; color:#6f5312; background:linear-gradient(180deg,rgba(246,236,201,.95),rgba(216,189,108,.55)); border:1px solid rgba(154,119,36,.45); padding:3px 8px; border-radius:100px; flex:none; } :root[data-theme="dark"] .tt-gov{ color:#f6ecc9; background:linear-gradient(180deg,rgba(154,119,36,.5),rgba(111,83,18,.4)); border-color:rgba(216,189,108,.4); } .tt-btn{ width:26px; height:26px; border-radius:7px; flex:none; padding:0; cursor:pointer; display:grid; place-items:center; color:#6f7480; background:transparent; border:1px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease; } .tt-btn:hover{background:rgba(10,33,69,.07); color:#20242c; border-color:rgba(185,174,148,.5)} .tt-btn:focus-visible{outline:2.5px solid #0b6b5b; outline-offset:2px} :root[data-theme="dark"] .tt-btn{color:#8b9bb0} :root[data-theme="dark"] .tt-btn:hover{background:rgba(255,255,255,.09); color:#eef3f9} /* ── log ── */ .tt-log{ padding:14px 14px 6px; overflow-y:auto; overscroll-behavior:contain; flex:1 1 auto; min-height:88px; max-height:min(38vh, 300px); display:flex; flex-direction:column; gap:11px; } .tutor.wide .tt-log{max-height:min(50vh, 440px)} .tt-msg{position:relative; max-width:92%} .tt-txt{margin:0; padding:9px 13px; border-radius:13px; white-space:pre-wrap} .tt-you{align-self:flex-end} .tt-you .tt-txt{ background:linear-gradient(180deg,#123c74,#0d2f5c); color:#f2f6fb; border-bottom-right-radius:5px; } .tt-laila{align-self:flex-start; padding-right:26px} .tt-laila .tt-txt{ background:rgba(255,252,244,.85); border:1px solid rgba(185,174,148,.5); border-bottom-left-radius:5px; } :root[data-theme="dark"] .tt-laila .tt-txt{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10); } /* a reply the floor held back reads as a boundary, not as an answer */ .tt-held .tt-txt{border-left:3px solid #d1483c; padding-left:11px} .tt-err .tt-txt{color:#8a3a31; border-color:rgba(209,72,60,.45)} :root[data-theme="dark"] .tt-err .tt-txt{color:#f0a89f} /* the small speaker on every answer */ .tt-say{ position:absolute; right:0; top:7px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer; color:#8a6d24; background:transparent; border:1px solid transparent; opacity:0; transition:opacity .2s ease, background .2s ease, border-color .2s ease; } .tt-laila:hover .tt-say, .tt-say:focus-visible, .tt-say.on{opacity:1} .tt-say:hover{background:rgba(246,236,201,.75); border-color:rgba(154,119,36,.5)} .tt-say.on{background:linear-gradient(180deg,rgba(246,236,201,.95),rgba(216,189,108,.7)); border-color:rgba(154,119,36,.85)} :root[data-theme="dark"] .tt-say{color:#d9b757} @media(hover:none){.tt-say{opacity:1}} /* thinking: three dots under the last answer */ .tutor.thinking .tt-log::after{ content:"···"; align-self:flex-start; letter-spacing:.22em; color:#8a6d24; font-size:19px; line-height:1; padding:0 4px 6px; } /* ── chips ── */ /* One scrolling row rather than a wrapping block — at 392px wide these wrapped to four rows and took more height than the conversation itself. */ .tt-chips{display:flex; flex-wrap:nowrap; gap:7px; padding:8px 14px 6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none} .tt-chips::-webkit-scrollbar{display:none} .tt-chip{flex:0 0 auto; white-space:nowrap} .tutor.wide .tt-chips{flex-wrap:wrap; overflow-x:visible} .tt-chip{ font-size:12.5px; font-weight:600; cursor:pointer; padding:6px 11px; border-radius:100px; color:#3a4a63; background:rgba(255,252,244,.8); border:1px solid rgba(185,174,148,.55); transition:background .18s ease, border-color .18s ease, transform .18s ease; } .tt-chip:hover{background:rgba(246,236,201,.85); border-color:rgba(154,119,36,.6); transform:translateY(-1px)} .tt-chip:focus-visible{outline:2.5px solid #0b6b5b; outline-offset:2px} :root[data-theme="dark"] .tt-chip{ color:#b9c6d6; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); } :root[data-theme="dark"] .tt-chip:hover{background:rgba(217,183,87,.16); border-color:rgba(217,183,87,.45)} /* ── ask ── */ .tt-ask{display:flex; align-items:center; gap:8px; padding:10px 12px 8px} .tt-in{ flex:1; min-width:0; font:inherit; font-size:14.5px; color:inherit; padding:9px 13px; border-radius:100px; background:rgba(255,252,244,.9); border:1px solid rgba(185,174,148,.6); } .tt-in:focus{outline:none; border-color:rgba(154,119,36,.85); box-shadow:0 0 0 3px rgba(216,189,108,.28)} :root[data-theme="dark"] .tt-in{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); } .tt-mic,.tt-send{ width:36px; height:36px; border-radius:50%; flex:none; padding:0; cursor:pointer; display:grid; place-items:center; border:1px solid rgba(185,174,148,.6); background:rgba(255,252,244,.9); color:#3a4a63; transition:background .18s ease, color .18s ease, border-color .18s ease; } .tt-send{background:linear-gradient(180deg,#123c74,#0d2f5c); color:#f2f6fb; border-color:transparent} .tt-mic:hover{background:rgba(246,236,201,.85); border-color:rgba(154,119,36,.6)} .tt-send:hover{filter:brightness(1.12)} .tt-mic:focus-visible,.tt-send:focus-visible{outline:2.5px solid #0b6b5b; outline-offset:2px} /* listening: a steady gold ring, never a pulse */ .tt-mic.on{background:linear-gradient(180deg,rgba(246,236,201,.95),rgba(216,189,108,.75)); border-color:rgba(154,119,36,.9); color:#4a3608; box-shadow:0 0 0 3px rgba(216,189,108,.3)} :root[data-theme="dark"] .tt-mic{background:rgba(255,255,255,.07); color:#b9c6d6; border-color:rgba(255,255,255,.14)} :root[data-theme="dark"] .tt-send{background:linear-gradient(180deg,#d9b757,#a8842c); color:#0c1420} /* ── foot ── */ .tt-foot{ margin:0; padding:0 14px 10px; font-size:11px; line-height:1.45; color:#6f7480; } :root[data-theme="dark"] .tt-foot{color:#8b9bb0} /* ── small screens: full width along the bottom ── */ @media(max-width:640px){ .tutor{left:8px; right:8px; bottom:8px; width:auto; max-width:none} .tutor.wide{width:auto} .tt-log{max-height:44vh} } @media(prefers-reduced-motion:reduce){ .tutor{transition:opacity .18s ease, visibility .18s} .tt-chip:hover{transform:none} } /* ── written (quick-fire) answers ───────────────────────────────────────── Visually distinct from a governed reply on purpose. A governed answer passed the floor and carries a decision; a written answer is editorial text that never went near it. The difference has to be visible, or the widget is lying about provenance — which is the one thing this estate exists not to do. */ .tt-msg.tt-written .tt-txt { border-left: 2px solid rgba(200, 169, 94, .55); padding-left: 11px; } .tt-prov { margin: 7px 0 0; padding-left: 13px; font-size: 12.5px; line-height: 1.45; letter-spacing: .01em; color: #8fa8c4; opacity: .95; } .tt-more { margin: 9px 0 0 13px; min-height: 34px; padding: 0 13px; font: inherit; font-size: 13px; font-weight: 550; color: #e6cf92; background: none; border: 1px solid rgba(230, 207, 146, .42); border-radius: 999px; cursor: pointer; } .tt-more:hover:not([disabled]) { border-color: #e6cf92; } .tt-more:focus-visible { outline: 2px solid #e6cf92; outline-offset: 2px; } .tt-more[disabled] { opacity: .4; cursor: default; } @media (max-width: 599px) { .tt-prov { font-size: 13px; } .tt-more { min-height: 44px; font-size: 14px; } }