/* Ask Dr. Zamri (the AI study helper): the chat button and panel on every page. Uses the tokens in style.css. */

.chat .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.chat-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 26px; background: var(--ink); color: var(--paper); font: 600 1rem var(--sans); cursor: pointer; box-shadow: 0 8px 22px rgba(21, 36, 58, .28); }
.chat-fab:hover { background: var(--teal); color: #fff; }
:root[data-theme="dark"] .chat-fab:hover { color: #0e1720; }
.chat.open .chat-fab { display: none; }
@media (max-width: 560px) { .chat-fab-n { display: none; } }
/* the back-to-top button moves up to make room */
.to-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 821px) { .chat-fab { right: 24px; bottom: 24px; } .to-top { right: 28px; bottom: 90px; } }

.chat-panel { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 400px; max-width: calc(100vw - 32px); height: min(600px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 48px rgba(21, 36, 58, .3); overflow: hidden; }
.chat-panel[hidden] { display: none; }
@media (max-width: 560px) { .chat-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; height: min(78vh, calc(100dvh - 76px)); } }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 16px; background: var(--ink); color: var(--paper); }
.chat-head > div { flex: 1; min-width: 0; display: grid; }
.chat-head strong { font-family: var(--serif); font-size: 1.05rem; }
.chat-head small { font-size: .78rem; opacity: .85; }
.chat-x { width: 40px; height: 40px; flex: none; border: 0; border-radius: 8px; background: none; color: inherit; font-size: 1.1rem; cursor: pointer; }
.chat-x:hover { background: rgba(127, 127, 127, .3); }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); overscroll-behavior: contain; }
.chat-log:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.chat-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg p { margin: 0 0 6px; }
.chat-msg p:last-child, .chat-msg ul:last-child { margin-bottom: 0; }
.chat-msg ul { margin: 0 0 6px; padding-left: 1.2em; }
.chat-msg code { font: .88em ui-monospace, Consolas, monospace; background: rgba(127, 127, 127, .18); border-radius: 4px; padding: 1px 4px; }
.chat-msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.chat-msg.user { align-self: flex-end; background: var(--teal); color: #fff; border-bottom-right-radius: 4px; }
:root[data-theme="dark"] .chat-msg.user { color: #0e1720; }
.chat-msg.err { background: var(--amber-soft); border-color: var(--amber); }
.chat-msg.typing { display: inline-flex; gap: 5px; padding: 14px; }
.chat-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: chat-dot 1s ease-in-out infinite; }
.chat-msg.typing span:nth-child(2) { animation-delay: .15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-msg.typing span { animation: none; } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-chip { font: inherit; font-size: .88rem; text-align: left; padding: 7px 12px; min-height: 38px; border: 1px solid var(--teal); border-radius: 999px; background: var(--surface); color: var(--teal); cursor: pointer; }
.chat-chip:hover { background: var(--teal-soft); }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--rule); background: var(--surface); }
.chat-form textarea { flex: 1; min-width: 0; resize: none; font: 16px/1.4 var(--sans); padding: 10px 12px; min-height: 44px; max-height: 120px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink); }
.chat-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--teal); color: #fff; font-size: 1rem; cursor: pointer; }
:root[data-theme="dark"] .chat-send { color: #0e1720; }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-note { margin: 0; padding: 0 14px 10px; font-size: .74rem; line-height: 1.35; color: var(--ink-3); background: var(--surface); }
.chat :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media print { .chat { display: none !important; } }