/**
 * StudyMate — scripted product demo styling.
 * Lightweight; no external libraries. Resembles the real StudyMate interface
 * (course list + course chat) without exposing real data or making AI calls.
 *
 * Layout: a WIDE, desktop-style app preview. A compact course sidebar on the
 * left and a roomy conversation pane that takes most of the width. The stage
 * has a bounded height and the conversation scrolls internally, so playing the
 * animation never grows the page.
 */

.smd {
  --smd-blue: #8dbbff;
  --smd-lavender: #bba2ff;
  --smd-pink: #f59be8;
  --smd-ink: #1a1f2e;
  --smd-muted: #5f6578;
  --smd-border: #e4e5f0;
  --smd-surface: #ffffff;
  --smd-surface-soft: #f4f4fb;
  --smd-gradient: linear-gradient(135deg, var(--smd-blue), var(--smd-lavender) 55%, var(--smd-pink));
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--smd-border);
  border-radius: 20px;
  background: var(--smd-surface);
  box-shadow: 0 28px 60px rgba(25, 26, 46, 0.12);
  overflow: hidden;
}

.smd-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--smd-surface-soft);
  border-bottom: 1px solid var(--smd-border);
}
.smd-dot { width: 11px; height: 11px; border-radius: 50%; background: #e0e0ea; }
.smd-dot.r { background: #f6a6a1; }
.smd-dot.y { background: #f6d68a; }
.smd-dot.g { background: #9fe0be; }
.smd-topbar-title { margin-left: 8px; font-size: 0.85rem; font-weight: 600; color: var(--smd-muted); }
.smd-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7b6bc4;
  background: rgba(187, 162, 255, 0.16);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Bounded, wide stage. Fixed height so the page never grows as messages play. */
.smd-stage {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  height: 468px;
}

/* Course list (compact sidebar) */
.smd-courses { border-right: 1px solid var(--smd-border); padding: 14px 12px; background: #fbfbff; overflow-y: auto; }
.smd-courses-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--smd-muted); font-weight: 700; margin: 4px 6px 10px; }
.smd-course {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 11px;
  margin-bottom: 6px;
  cursor: default;
  border: 1.5px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.smd-course .smd-course-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  background: rgba(141, 187, 255, 0.18);
}
.smd-course .smd-course-meta { min-width: 0; }
.smd-course .smd-course-name { font-size: 0.86rem; font-weight: 600; color: var(--smd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smd-course .smd-course-code { font-size: 0.73rem; color: var(--smd-muted); }
.smd-course.is-active { background: rgba(187, 162, 255, 0.14); border-color: rgba(187, 162, 255, 0.5); }
.smd-course.is-dim { opacity: 0.5; }

/* Chat panel — fills the stage, conversation scrolls internally */
.smd-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.smd-chat-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--smd-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.smd-chat-head .smd-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--smd-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem;
}
.smd-chat-head .smd-chat-title { font-size: 0.95rem; font-weight: 700; color: var(--smd-ink); }
.smd-chat-head .smd-chat-sub { font-size: 0.76rem; color: var(--smd-muted); }
.smd-chat-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--smd-muted); font-size: 0.95rem; text-align: center; padding: 24px;
}

.smd-msgs {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.smd-msg { display: flex; gap: 11px; max-width: 74%; }
.smd-msg .smd-av {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
}
.smd-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.smd-msg.user .smd-av { background: #eef0ff; color: #6b5cc0; }
.smd-msg.ai .smd-av { background: var(--smd-gradient); color: #fff; }
.smd-bubble {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--smd-ink);
  background: var(--smd-surface-soft);
  border: 1px solid var(--smd-border);
}
.smd-msg.user .smd-bubble { background: linear-gradient(135deg, rgba(187,162,255,0.22), rgba(141,187,255,0.22)); border-color: rgba(167,176,255,0.5); }
.smd-bubble p { margin: 0 0 8px; }
.smd-bubble p:last-child { margin-bottom: 0; }
.smd-bubble ol { margin: 6px 0 0 20px; padding: 0; }
.smd-bubble li { margin: 5px 0; }
.smd-bubble .smd-math { font-style: italic; font-family: 'Cambria Math', 'Times New Roman', Georgia, serif; white-space: nowrap; }
.smd-bubble .smd-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: 0.82em; line-height: 1.05; margin: 0 2px; }
.smd-bubble .smd-frac .smd-den { border-top: 1px solid currentColor; }
.smd-bubble sup { font-size: 0.72em; }

/* Source reference chip */
.smd-source {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: #5a5ac0;
  background: rgba(141, 187, 255, 0.14);
  border: 1px solid rgba(141, 187, 255, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Typing indicator */
.smd-typing .smd-bubble { display: inline-flex; gap: 4px; align-items: center; }
.smd-typing .smd-bubble span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--smd-muted);
  animation: smd-blink 1.2s infinite ease-in-out;
}
.smd-typing .smd-bubble span:nth-child(2) { animation-delay: 0.2s; }
.smd-typing .smd-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes smd-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.smd-msg.enter { animation: smd-msg-in 0.4s ease-out both; }
@keyframes smd-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Composer / preference controls */
.smd-composer { border-top: 1px solid var(--smd-border); padding: 12px 20px; flex-shrink: 0; }
.smd-prefs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.smd-chip {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--smd-muted);
  background: var(--smd-surface-soft);
  border: 1px solid var(--smd-border);
  border-radius: 999px;
  padding: 6px 13px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.smd-chip.is-hot { background: rgba(187, 162, 255, 0.2); border-color: rgba(187, 162, 255, 0.6); color: #6b5cc0; }
.smd-inputbar { display: flex; align-items: center; gap: 10px; background: var(--smd-surface-soft); border: 1px solid var(--smd-border); border-radius: 12px; padding: 10px 14px; }
.smd-inputbar .smd-inputtext { flex: 1; font-size: 0.92rem; color: var(--smd-ink); min-height: 1.2em; min-width: 0; }
.smd-inputbar .smd-inputtext.placeholder { color: var(--smd-muted); }
.smd-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--smd-lavender); vertical-align: -2px; margin-left: 1px; animation: smd-caret 0.9s steps(2) infinite; }
@keyframes smd-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.smd-send { width: 36px; height: 36px; border-radius: 9px; background: var(--smd-gradient); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smd-send svg { width: 16px; height: 16px; }

/* Controls bar (replay / pause) */
.smd-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-top: 1px solid var(--smd-border); background: #fbfbff; flex-wrap: wrap; }
.smd-ctrl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  color: var(--smd-ink);
  background: var(--smd-surface);
  border: 1px solid var(--smd-border);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.smd-ctrl-btn:hover { border-color: var(--smd-lavender); transform: translateY(-1px); }
.smd-ctrl-btn svg { width: 15px; height: 15px; }
.smd-controls .smd-note { font-size: 0.78rem; color: var(--smd-muted); }

/* Simulated pointer */
.smd-pointer {
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.smd-stagewrap { position: relative; }

/* Tablet: keep two columns but a touch narrower sidebar */
@media (max-width: 820px) {
  .smd-stage { grid-template-columns: 200px minmax(0, 1fr); height: 460px; }
  .smd-msg { max-width: 82%; }
}

/* Mobile: sidebar becomes a horizontal course selector on top */
@media (max-width: 600px) {
  .smd-stage { grid-template-columns: 1fr; height: auto; }
  .smd-courses { display: flex; gap: 8px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--smd-border); padding: 10px; }
  .smd-courses-label { display: none; }
  .smd-course { margin-bottom: 0; flex-shrink: 0; }
  .smd-course .smd-course-meta { max-width: 130px; }
  .smd-msgs { height: 56vh; min-height: 320px; max-height: 420px; flex: none; }
  .smd-msg { max-width: 88%; }
  .smd-pointer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .smd-msg.enter { animation: none; }
  .smd-caret, .smd-typing .smd-bubble span { animation: none; }
  .smd-msgs { scroll-behavior: auto; }
  .smd-pointer { display: none; }
}