/* ==========================================================================
   OgbonMath — AI Tutor Full Panel
   --------------------------------------------------------------------------
   Re-skins the showAITutor() view so it matches the InlineTutor aesthetic:
   serif conversation bodies, warm accent for user messages, paper cards
   for tutor responses, subtle message actions.

   Scope: body[data-view="tutor"] #ct. Doesn't touch the inline tutor on
   the welcome screen (that's InlineTutor with its own .itr-* classes).
   ========================================================================== */

/* ==========================================================================
   Container layout — a full-height, breathing conversation view
   ==========================================================================
*/
body[data-view="tutor"] #ct {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  font-family: var(--font-sans);
}

body[data-view="tutor"] #ct > .ls {
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body[data-view="tutor"] #ct h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--tx);
  margin-bottom: var(--sp-2);
  border-bottom: none;
  padding-bottom: 0;
}

body[data-view="tutor"] #ct h2 + p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--tx1);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-6);
}

body[data-view="tutor"] #ct h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--tx);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--sp-2);
}

/* ==========================================================================
   Conversation log
   ==========================================================================
*/
body[data-view="tutor"] #ai-chat-log {
  background: var(--bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--sp-5) !important;
  min-height: 280px !important;
  max-height: 480px !important;
  margin-bottom: var(--sp-3) !important;
  font-size: var(--fs-base) !important;
  font-family: var(--font-sans) !important;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Message divs are dynamic — target via first-level children */
body[data-view="tutor"] #ai-chat-log > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  color: var(--tx) !important;
  margin-bottom: 0 !important; /* kill the inline margin */
  animation: aitutor-msg-in var(--dur) var(--ease-calm);
}

@keyframes aitutor-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User messages (start with "<strong>You:</strong>") — right-aligned pill */
body[data-view="tutor"] #ai-chat-log > div:has(> strong:first-child:first-letter) {
  /* Generic — further distinguish via .tutor-msg-user class added in app.js */
}

/* More robust: use the class hook we add in app.js */
body[data-view="tutor"] #ai-chat-log > .tutor-msg-user,
body[data-view="tutor"] #ai-chat-log > div[data-role="user"] {
  align-self: flex-end;
  align-items: flex-end;
}

body[data-view="tutor"] #ai-chat-log > .tutor-msg-model,
body[data-view="tutor"] #ai-chat-log > div[data-role="model"] {
  align-self: flex-start;
}

/* The "You:" / "Tutor:" prefix — hide it, we'll style via role instead */
body[data-view="tutor"] #ai-chat-log > div > strong:first-child {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--tx3);
  display: block;
  margin-bottom: 2px;
}

body[data-view="tutor"] #ai-chat-log > .tutor-msg-user > strong:first-child,
body[data-view="tutor"] #ai-chat-log > div[data-role="user"] > strong:first-child {
  text-align: right;
  color: var(--ac);
}

/* Message body styling via pseudo-wrapper — since the body text is
   inline with the strong label, we can't put a real wrapper around it
   without changing app.js. Instead, use a div-level treatment. */
body[data-view="tutor"] #ai-chat-log > .tutor-msg-user,
body[data-view="tutor"] #ai-chat-log > div[data-role="user"] {
  background: var(--ac-soft);
  border: 1px solid var(--ac);
  color: var(--tx);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

body[data-view="tutor"] #ai-chat-log > .tutor-msg-model,
body[data-view="tutor"] #ai-chat-log > div[data-role="model"] {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--tx);
}

body[data-view="tutor"] #ai-chat-log > .tutor-msg-model .katex,
body[data-view="tutor"] #ai-chat-log > div[data-role="model"] .katex {
  color: var(--tx);
}

/* "Save to Memory" button inside AI replies */
body[data-view="tutor"] #ai-chat-log > div button {
  background: transparent !important;
  color: var(--tx2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px 8px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  cursor: pointer;
  margin-top: 6px !important;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

body[data-view="tutor"] #ai-chat-log > div button:hover {
  color: var(--ac) !important;
  border-color: var(--ac) !important;
  background: var(--ac-soft) !important;
}

/* ==========================================================================
   Input row
   ==========================================================================
*/
body[data-view="tutor"] #ct #ai-in {
  flex: 1;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  padding: 12px 14px !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg) !important;
  color: var(--tx) !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

body[data-view="tutor"] #ct #ai-in:focus {
  outline: none !important;
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 3px var(--ac-ring) !important;
}

body[data-view="tutor"] #ct #ai-in::placeholder {
  color: var(--tx3);
}

body[data-view="tutor"] #ct #ai-send-btn {
  background: var(--ac) !important;
  color: var(--ac-tx) !important;
  border: 1px solid var(--ac) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 20px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

body[data-view="tutor"] #ct #ai-send-btn:hover {
  background: var(--ac2) !important;
  border-color: var(--ac2) !important;
}

body[data-view="tutor"] #ct #ai-send-btn:active {
  transform: scale(var(--active-scale));
}

body[data-view="tutor"] #ct #ai-mic-btn {
  background: transparent !important;
  color: var(--tx2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: 16px !important;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

body[data-view="tutor"] #ct #ai-mic-btn:hover {
  color: var(--ac) !important;
  border-color: var(--ac) !important;
}

body[data-view="tutor"] #ct #ai-mic-btn.listening {
  color: var(--rd) !important;
  border-color: var(--rd) !important;
  background: var(--rd-bg) !important;
}

/* ==========================================================================
   Scratchpad (Math Vision)
   ==========================================================================
*/
body[data-view="tutor"] #ct #hw-canvas {
  background: var(--bg2) !important;
}

body[data-view="tutor"] #ct div:has(> #hw-canvas) {
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg2) !important;
}

body[data-view="tutor"] #ct #hw-clear-btn,
body[data-view="tutor"] #ct #hw-send-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

body[data-view="tutor"] #ct #hw-clear-btn {
  background: transparent;
  color: var(--tx1);
  border: 1px solid var(--bdr);
}

body[data-view="tutor"] #ct #hw-clear-btn:hover {
  background: var(--hover-bg);
  color: var(--tx);
  border-color: var(--bdr2);
}

body[data-view="tutor"] #ct #hw-send-btn {
  background: var(--ac);
  color: var(--ac-tx);
  border: 1px solid var(--ac);
}

body[data-view="tutor"] #ct #hw-send-btn:hover {
  background: var(--ac2);
  border-color: var(--ac2);
}

/* ==========================================================================
   Section divider above scratchpad
   ==========================================================================
*/
body[data-view="tutor"] #ct > .ls > div[style*="border-top"] {
  border-top-color: var(--bdr) !important;
  border-top-width: 1px !important;
  margin-top: var(--sp-6) !important;
  padding-top: var(--sp-6) !important;
}

/* ==========================================================================
   Mobile
   ==========================================================================
*/
@media (max-width: 560px) {
  body[data-view="tutor"] #ct { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  body[data-view="tutor"] #ct h2 { font-size: var(--fs-2xl); }
  body[data-view="tutor"] #ai-chat-log { padding: var(--sp-3) !important; }
  body[data-view="tutor"] #ai-chat-log > div { max-width: 95%; }
}