/* NeuroBuddy dock (scripts/shared/buddy-dock.js): a small floating NeuroBuddy button in the bottom
   right corner of the home page and every student page, opening a quick chat. Colours come from the
   student theme tokens (styles/theme.css), falling back to the home page's own palette. */
.buddy-dock {
  --bd-accent: var(--accent, var(--cyan, #00d9ff));
  --bd-panel: var(--surface, #0f0f12);
  --bd-raised: var(--surface-raised, #18181c);
  --bd-sunken: var(--surface-sunken, #0b0b0d);
  --bd-hover: var(--surface-hover, #1c1c21);
  --bd-border: var(--border-strong, var(--line-strong, #2c2c33));
  --bd-line: var(--border, var(--line, #1f1f24));
  --bd-text: var(--text-main, #f5f5f6);
  --bd-soft: var(--text-soft, #b6b6bd);
  --bd-muted: var(--text-muted, #85858e);
  --bd-shadow: var(--shadow-color, rgba(0, 0, 0, 0.55));
  --bd-user-from: var(--bubble-from, color-mix(in srgb, var(--bd-accent) 52%, #000));
  --bd-user-to: var(--bubble-to, color-mix(in srgb, var(--bd-accent) 36%, #000));
  --bd-user-text: var(--bubble-text, #fff);
  --bd-primary: var(--primary-bg, #f5f5f6);
  --bd-primary-text: var(--primary-text, #09090b);
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  font-family: inherit; color: var(--bd-text);
}
.buddy-dock[hidden] { display: none; }
.buddy-dock svg { display: block; flex: none; }

/* ---------- The button ---------- */
.buddy-dock-button {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--bd-accent); border: 1px solid color-mix(in srgb, var(--bd-accent) 40%, var(--bd-border));
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--bd-accent) 22%, var(--bd-raised)), var(--bd-panel) 75%);
  box-shadow: 0 12px 30px var(--bd-shadow), 0 0 0 6px color-mix(in srgb, var(--bd-accent) 7%, transparent), 0 0 28px color-mix(in srgb, var(--bd-accent) 22%, transparent);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
  animation: buddy-dock-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.buddy-dock-button:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 36px var(--bd-shadow), 0 0 0 7px color-mix(in srgb, var(--bd-accent) 10%, transparent), 0 0 36px color-mix(in srgb, var(--bd-accent) 32%, transparent); }
.buddy-dock-button:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 4px; }
.buddy-dock-button svg { width: 28px; height: 28px; transition: transform 0.25s ease, opacity 0.2s ease; }
.buddy-dock-button .bd-close-icon { position: absolute; width: 22px; height: 22px; opacity: 0; transform: rotate(-90deg); }
.buddy-dock[data-open="true"] .buddy-dock-button .bd-face-icon { opacity: 0; transform: rotate(90deg) scale(0.6); }
.buddy-dock[data-open="true"] .buddy-dock-button .bd-close-icon { opacity: 1; transform: none; }
/* A soft breathing ring, only while closed */
.buddy-dock-button::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bd-accent) 35%, transparent); animation: buddy-dock-breathe 3.6s ease-out infinite;
}
.buddy-dock[data-open="true"] .buddy-dock-button::after { animation: none; }
/* "Ask NeuroBuddy" label beside the button on hover (mouse only) */
.buddy-dock-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 6px -50%; white-space: nowrap; pointer-events: none;
  font-size: 12.5px; font-weight: 500; color: var(--bd-text); background: var(--bd-raised); border: 1px solid var(--bd-border);
  border-radius: 8px; padding: 6px 10px; box-shadow: 0 8px 20px var(--bd-shadow); opacity: 0; transition: opacity 0.15s ease, translate 0.15s ease;
}
@media (hover: hover) {
  .buddy-dock[data-open="false"] .buddy-dock-button:hover .buddy-dock-tip { opacity: 1; translate: 0 -50%; }
}

/* ---------- The quick chat ---------- */
.buddy-dock-panel {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: 380px; height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: var(--bd-panel); border: 1px solid var(--bd-border);
  box-shadow: 0 24px 64px var(--bd-shadow), 0 0 0 1px color-mix(in srgb, var(--bd-accent) 8%, transparent);
  transform-origin: bottom right; animation: buddy-dock-open 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.buddy-dock-panel[hidden] { display: none; }
.buddy-dock-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--bd-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bd-accent) 7%, transparent), transparent);
}
.buddy-dock-face {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--bd-accent);
  background: color-mix(in srgb, var(--bd-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bd-accent) 28%, transparent);
}
.buddy-dock-face svg { width: 20px; height: 20px; }
.buddy-dock-heading { flex: 1; min-width: 0; }
.buddy-dock-heading h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; margin: 0; color: var(--bd-text); }
.buddy-dock-heading small { display: block; font-size: 11.5px; color: var(--bd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-icon-btn {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; cursor: pointer;
  color: var(--bd-muted); background: transparent; border: 1px solid transparent; text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.bd-icon-btn:hover { color: var(--bd-text); background: var(--bd-hover); }
.bd-icon-btn:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 1px; }
.bd-icon-btn svg { width: 17px; height: 17px; }

.buddy-dock-thread { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.bd-msg { max-width: 88%; font-size: 13.5px; line-height: 1.55; border-radius: 14px; padding: 9px 12px; overflow-wrap: anywhere; }
.bd-msg p { margin: 0; }
.bd-msg.user { align-self: flex-end; color: var(--bd-user-text); background: linear-gradient(135deg, var(--bd-user-from), var(--bd-user-to)); border-bottom-right-radius: 5px; white-space: pre-wrap; }
.bd-msg.assistant { align-self: flex-start; color: var(--bd-soft); background: var(--bd-raised); border: 1px solid var(--bd-line); border-bottom-left-radius: 5px; }
.bd-msg.assistant > * + * { margin-top: 8px; }
.bd-msg.assistant :is(h1, h2, h3, h4) { font-size: 13.5px; font-weight: 600; color: var(--bd-text); margin-bottom: 0; }
.bd-msg.assistant :is(ul, ol) { padding-left: 18px; margin-bottom: 0; }
.bd-msg.assistant strong { color: var(--bd-text); }
.bd-msg.assistant code { font-size: 12px; background: var(--bd-sunken); border-radius: 4px; padding: 1px 4px; }
.bd-msg.is-pending { color: var(--bd-muted); font-style: italic; }
.bd-msg.is-error { color: var(--danger-text, #fca5a5); border-color: color-mix(in srgb, var(--red, #ef4444) 35%, transparent); }
.bd-note { align-self: center; font-size: 11.5px; color: var(--bd-muted); text-align: center; max-width: 90%; }
.bd-files { font-size: 11.5px; opacity: 0.8; margin-bottom: 4px; }

/* Welcome: a greeting and a few ways to start */
.bd-welcome { margin: auto 0; display: grid; gap: 14px; text-align: center; padding: 8px 4px; }
.bd-welcome-face {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; color: var(--bd-accent);
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--bd-accent) 22%, var(--bd-raised)), var(--bd-panel) 80%);
  border: 1px solid color-mix(in srgb, var(--bd-accent) 30%, var(--bd-border)); box-shadow: 0 0 34px color-mix(in srgb, var(--bd-accent) 20%, transparent);
  animation: buddy-dock-bob 4s ease-in-out infinite;
}
.bd-welcome-face svg { width: 36px; height: 36px; }
.bd-welcome h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: var(--bd-text); margin: 0; }
.bd-welcome p { font-size: 13px; color: var(--bd-muted); line-height: 1.55; margin: 0; }
.bd-starters { display: grid; gap: 8px; text-align: left; }
.bd-starter {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; text-align: left; font: inherit; font-size: 13px; color: var(--bd-soft);
  background: var(--bd-raised); border: 1px solid var(--bd-line); border-radius: 11px; padding: 10px 12px; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bd-starter:hover { color: var(--bd-text); background: var(--bd-hover); border-color: color-mix(in srgb, var(--bd-accent) 35%, var(--bd-border)); }
.bd-starter svg { width: 16px; height: 16px; color: var(--bd-accent); }
.bd-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; border-radius: 10px; padding: 9px 14px; border: 1px solid var(--bd-border); color: var(--bd-text); background: var(--bd-raised);
}
.bd-btn:hover { background: var(--bd-hover); }
.bd-btn.primary { background: var(--bd-primary); color: var(--bd-primary-text); border-color: transparent; }
.bd-btn.primary:hover { filter: brightness(1.06); }

/* Composer */
.buddy-dock-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--bd-line); background: var(--bd-panel); }
.buddy-dock-form textarea {
  flex: 1; min-height: 40px; max-height: 130px; resize: none; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--bd-text);
  background: var(--bd-sunken); border: 1px solid var(--bd-line); border-radius: 12px; padding: 9px 12px; outline: none;
}
.buddy-dock-form textarea:focus { border-color: color-mix(in srgb, var(--bd-accent) 50%, var(--bd-border)); }
.buddy-dock-form textarea::placeholder { color: var(--bd-muted); }
.bd-send {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; cursor: pointer;
  color: var(--bd-primary-text); background: var(--bd-primary); border: 0; transition: filter 0.15s ease;
}
.bd-send:hover { filter: brightness(1.08); }
.bd-send:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 2px; }
.bd-send svg { width: 17px; height: 17px; }
.bd-send.is-stop { color: var(--bd-text); background: var(--bd-raised); border: 1px solid var(--bd-border); }
.buddy-dock-foot { font-size: 10.5px; color: var(--bd-muted); text-align: center; padding: 0 12px 9px; background: var(--bd-panel); }

/* Nudges and timer messages (styles/student.css) sit above the button instead of on it */
body:has(.buddy-dock:not([hidden])) .focus-toast { bottom: 96px; }

@keyframes buddy-dock-in { from { opacity: 0; transform: translateY(12px) scale(0.85); } }
@keyframes buddy-dock-open { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes buddy-dock-breathe { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bd-accent) 35%, transparent); } 60%, 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes buddy-dock-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (max-width: 600px) {
  .buddy-dock { right: 16px; bottom: 16px; }
  .buddy-dock-button { width: 52px; height: 52px; }
  .buddy-dock-panel { position: fixed; left: 12px; right: 12px; bottom: 80px; width: auto; height: min(560px, calc(100dvh - 100px)); }
  body:has(.buddy-dock:not([hidden])) .focus-toast { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .buddy-dock-button, .buddy-dock-panel, .bd-welcome-face, .buddy-dock-button::after { animation: none; }
}