@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Roboto+Mono:wght@400;600&display=swap");

/* AIChat - BRANDING & VISIBILITY FIX - V1.3.5 */

/* Global Reset */
.teacher-ai-widget *,
.teacher-ai-shortcode * {
  box-sizing: border-box !important;
  font-family: "Roboto Mono", "Nunito", monospace !important;
  color: #ffffff !important;
}

/* Floating Widget Container */
.teacher-ai-widget {
  position: fixed !important;
  bottom: 10px !important;
  right: 15px !important;
  z-index: 999999 !important;
}

/* Toggle Button */
.teacher-ai-button {
  width: 60px !important;
  height: 60px !important;
  border-radius: 0 !important;
  background-color: #0F0F0F !important;
  background: #0F0F0F !important;
  border: 1px solid #50FA7B !important;
  /* MTVision Accent */
  cursor: pointer !important;
  box-shadow: 0 5px 15px rgba(80, 250, 123, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.teacher-ai-button:hover {
  background: #1a1a1a !important;
  transform: scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(80, 250, 123, 0.3) !important;
}

.teacher-ai-button svg {
  fill: #50FA7B !important;
  width: 30px !important;
  height: 30px !important;
}

/* Window - Absolute Positioning to Bypass Theme Conflicts */
.teacher-ai-window {
  position: absolute !important;
  bottom: 65px !important;
  /* Closer to toggle button */
  right: 0 !important;
  width: 380px !important;
  max-height: calc(100vh - 80px) !important;
  background: rgba(15, 15, 15, 0.95) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-radius: 0 !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important;
  display: none;
  overflow: hidden !important;
  /* Contain all children */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
  z-index: 99999 !important;
}

.teacher-ai-window.open {
  display: block !important;
}

/* Shortcode Container */
.teacher-ai-shortcode {
  width: 100% !important;
  /* Height handled by settings */
  max-height: 2000px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  /* Removed margin to match MTVision */
  position: relative !important;
  /* REQUIRED for absolute children */
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
}

/* Header - REMOVED */
.teacher-ai-header {
  display: none !important;
}

/* Close Button Styling */
.teacher-ai-close {
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;
  background: #e0e0e0 !important;
  border: none !important;
  color: #444 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.teacher-ai-close:hover {
  background: #ccc !important;
}

/* Messages Area - Fixed Striping Issue */
.teacher-ai-messages {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Full height relative to container */
  /* Room for input + preview/suggestions handled by parent grid or padding if needed */
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  padding: 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  pointer-events: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: #333 #0F0F0F !important;
}

/* Dark Mode Scrollbar for Webkit */
.teacher-ai-messages::-webkit-scrollbar {
  width: 10px !important;
}

.teacher-ai-messages::-webkit-scrollbar-track {
  background: transparent;
}

.teacher-ai-messages::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px !important;
}

.teacher-ai-messages::-webkit-scrollbar-thumb:hover {
  opacity: 0.8 !important;
}

/* Specific spacing for widget to avoid close button */
.teacher-ai-widget .teacher-ai-messages {
  padding-top: 40px !important;
}

/* PREVENT THEMES FROM ADDING STRIPES/ROWS */
.teacher-ai-messages div,
.teacher-ai-messages p,
.teacher-ai-messages .message {
  background: none !important;
  border: none !important;
}

/* Message Base */
.message {
  display: flex !important;
  width: 80% !important;
}

/* USER Alignment */
.message.user {
  align-self: flex-end !important;
  margin-left: 20% !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

.message.ai {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Bubble Global */
.message-bubble {
  padding: 10px 16px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  display: block !important;
  width: auto !important;
}

.teacher-ai-widget .message.user .message-bubble,
.teacher-ai-shortcode .message.user .message-bubble,
.message.user .message-bubble {
  --mtai-bubble-bg: #002EFF;
  /* THREE-layer glass:
     1. TOP padding-box  — white→transparent→black overlay (glass depth)
     2. MID padding-box  — solid admin bubble colour
     3. BOT border-box   — white→transparent gradient border (lit edge) */
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.05) 35%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.22) 100%
    ) padding-box,
    linear-gradient(var(--mtai-bubble-bg), var(--mtai-bubble-bg)) padding-box,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 35%,
      rgba(255, 255, 255, 0.04) 70%,
      rgba(255, 255, 255, 0.10) 100%
    ) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 0 !important;
  text-align: left !important;
  display: inline-block !important;
  align-self: flex-end !important;
  width: auto !important;
  max-width: 85% !important;
}

.message.user .message-bubble * {
  color: inherit !important;
}

/* @property is REQUIRED — without it, browsers can't interpolate custom-property
   angles, so the conic gradient would jump 0→360 instead of rotating smoothly. */
@property --tai-msg-rim-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* AI Bubble - three-layer treatment with an animated Shiny-CTA rim light
   replacing the previous static gradient border (the lit edge now CYCLES).
   Selector covers BOTH `.ai` (legacy) and `.assistant` (current — JS uses the API role name). */
.message.ai .message-bubble,
.message.assistant .message-bubble {
  --mtai-bubble-bg: #333333;
  --tai-msg-rim-angle: 0deg;
  --tai-msg-rim-percent: 12%;       /* width of bright ribbon (× 4 = bright span) */
  --tai-msg-rim-offset: 60deg;
  --tai-msg-rim-highlight: #50FA7B; /* brand green accent */
  --tai-msg-rim-shine: #ffffff;     /* peak shine */
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.02) 35%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.10) 100%
    ) padding-box,
    linear-gradient(var(--mtai-bubble-bg), var(--mtai-bubble-bg)) padding-box,
    conic-gradient(
        from calc(var(--tai-msg-rim-angle) - var(--tai-msg-rim-offset)),
        transparent 0%,
        var(--tai-msg-rim-highlight) var(--tai-msg-rim-percent),
        var(--tai-msg-rim-shine) calc(var(--tai-msg-rim-percent) * 2),
        var(--tai-msg-rim-highlight) calc(var(--tai-msg-rim-percent) * 3),
        transparent calc(var(--tai-msg-rim-percent) * 4)
    ) border-box !important;
  border: 1.5px solid transparent !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 0 !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 85% !important;
  animation: tai-msg-rim-rotate 4s linear infinite;
}

@keyframes tai-msg-rim-rotate {
    to { --tai-msg-rim-angle: 360deg; }
}

/* WhatsApp Styled Typing Indicator */
.typing-indicator {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 50px !important;
  min-height: 32px !important;
}

.typing-indicator span {
  height: 10px !important;
  width: 10px !important;
  background-color: #50FA7B !important;
  display: inline-block !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  animation: typing-blink 1.4s infinite ease-in-out both !important;
  margin: 0 !important;
  box-shadow: 0 0 8px rgba(80, 250, 123, 0.6) !important;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s !important;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s !important;
}

@keyframes typing-blink {

  0%,
  80%,
  100% {
    opacity: 1;
    transform: scale(0.8);
    filter: brightness(0.8);
  }

  40% {
    opacity: 1;
    transform: scale(1.3);
    filter: brightness(1.2);
    box-shadow: 0 0 12px rgba(80, 250, 123, 0.9) !important;
  }
}

.message.ai .message-bubble * {
  color: inherit !important;
}

.message.ai .message-bubble p,
.message.ai .message-bubble span,
.message.ai .message-bubble strong,
.message.ai .message-bubble em,
.message.ai .message-bubble li {
  color: inherit !important;
}

.message.ai .message-bubble code {
  color: #f8f8f2 !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

.message.ai .message-bubble a {
  color: #50FA7B !important;
  text-decoration: underline !important;
}

/* Input Area - Less Bulky */
/* Input Area - Relative Positioning to Fix Header Overlap */
/* Input Area - Absolute Positioning at Bottom */
.teacher-ai-input-area {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 70px !important;
  /* Fixed height */
  /* Horizontal padding equals the inter-element gap so the right edge gap
     (send button → container) matches the input → send button gap. */
  padding: 12px 10px !important;
  background: rgba(20, 20, 20, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  border-top: none !important;
  outline: none !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  z-index: 100 !important;
}

.teacher-ai-input {
  --mtai-input-bg: rgba(40, 40, 40, 0.6);
  flex: 1 !important;
  background:
    linear-gradient(var(--mtai-input-bg), var(--mtai-input-bg)) padding-box,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 35%,
      rgba(255, 255, 255, 0.04) 70%,
      rgba(255, 255, 255, 0.10) 100%
    ) border-box !important;
  color: #ffffff !important;
  border: 1.5px solid transparent !important;
  outline: none !important;
  box-shadow: none !important;
  height: 40px !important;
  /* line-height kept near the font size so the text-selection highlight box
     is text-sized, not the full 40px input height. */
  line-height: normal !important;
  padding: 0 18px !important;
  border-radius: 0 !important;
  /* Pull the input slightly closer to the attach button on its left side
     (effective gap becomes ~3px instead of the parent flex 10px gap) */
  margin-left: -7px !important;
}

.teacher-ai-input:focus {
  /* On focus, swap gradient border to solid accent (preserves original cue) */
  background:
    linear-gradient(var(--mtai-input-bg), var(--mtai-input-bg)) padding-box,
    linear-gradient(#50FA7B, #50FA7B) border-box !important;
}

/* === Shiny CTA send button — animated conic rim + L→R darkening gradient ===
   Animatable angle (@property is required: without it browsers can't interpolate
   between custom-property values, so the gradient would jump 0→360 not rotate). */
@property --tai-rim-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Send Button - Compact Up Arrow with Shiny CTA effect */
.teacher-ai-send {
  --tai-rim-angle: 0deg;
  --tai-rim-percent: 12%;       /* width of bright ribbon (× 4 = bright span) */
  --tai-rim-offset: 60deg;
  --tai-rim-bg: #50FA7B;        /* solid accent (MTVision neon green) */
  --tai-rim-highlight: #50FA7B; /* ribbon color */
  --tai-rim-shine: #ffffff;     /* peak shine */

  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 5px !important;
  /* Three-layer background:
     1. transparent→40% black overlay (clears left, dims right) — the visible L→R gradient
     2. solid accent
     3. conic-gradient clipped to border-box = the cycling rim light */
  background:
      linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 100%) padding-box,
      linear-gradient(var(--tai-rim-bg), var(--tai-rim-bg)) padding-box,
      conic-gradient(
          from calc(var(--tai-rim-angle) - var(--tai-rim-offset)),
          transparent 0%,
          var(--tai-rim-highlight) var(--tai-rim-percent),
          var(--tai-rim-shine) calc(var(--tai-rim-percent) * 2),
          var(--tai-rim-highlight) calc(var(--tai-rim-percent) * 3),
          transparent calc(var(--tai-rim-percent) * 4)
      ) border-box !important;
  /* Border MUST be transparent — that's where the conic shows through */
  border: 2px solid transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.05s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 0 10px rgba(80, 250, 123, 0.2) !important;
  animation: tai-rim-rotate 3s linear infinite;
}

@keyframes tai-rim-rotate {
    to { --tai-rim-angle: 360deg; }
}

/* Hover — only swap the inner solid layer (rim keeps cycling) */
.teacher-ai-send:hover {
  box-shadow: 0 0 15px 2px rgba(68, 214, 44, 0.8) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
  filter: none !important;
  text-shadow: none !important;
}

.teacher-ai-send:active {
  --tai-rim-bg: #000000;
  transform: scale(0.95) !important;
  box-shadow: 0 0 5px 1px rgba(68, 214, 44, 0.4) !important;
  transition: all 0.02s !important;
}

.teacher-ai-send svg {
  width: 22px !important;
  height: 22px !important;
  fill: #000000 !important;
  /* Black arrow */
}

/* Custom Scrollbar - High Visibility Override */
.teacher-ai-messages::-webkit-scrollbar {
  width: 12px !important;
}

.teacher-ai-messages::-webkit-scrollbar-track {
  background: #222222 !important;
}

.teacher-ai-messages::-webkit-scrollbar-thumb {
  background: #888888 !important;
  border-radius: 6px !important;
  border: 3px solid #222222 !important;
}

.teacher-ai-messages::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa !important;
}

.teacher-ai-messages {
  scrollbar-width: auto !important;
  scrollbar-color: #888888 #222222 !important;
}

@media (max-width: 1024px) {

  /* Tablet / iPad Specifics */
  .teacher-ai-widget .teacher-ai-window {
    width: 450px !important;
    max-width: calc(100vw - 40px) !important;
    right: 20px !important;
    max-height: 2000px !important;
  }
}

@media (max-width: 500px) {

  /* Floating Widget Window Specifics */
  .teacher-ai-widget .teacher-ai-window {
    width: calc(100vw - 20px) !important;
    right: 10px !important;
    /* Centered relative to view */
    left: 10px !important;
    bottom: 90px !important;
    /* Above toggle button */
    height: auto !important;
    max-height: 70vh !important;
    /* Not too tall */
    position: fixed !important;
  }

  /* Shortcode Specifics */
  .teacher-ai-shortcode {
    width: 100% !important;
    height: auto !important;
    max-height: 2000px !important;
    right: 0 !important;
    left: 0 !important;
    position: relative !important;
    margin: 15px 0 !important;
  }

  /* Reduce sidebar width on tiny screens when expanded */
  .teacher-ai-sidebar:hover {
    width: 200px !important;
  }
}

/* Prompt Suggestions Styling */
.teacher-ai-suggestions-container {
  position: absolute !important;
  bottom: 70px !important;
  /* Sits exactly above input area, full-bleed to the chat edges. */
  left: 0 !important;
  right: 0 !important;
  height: 75px !important;
  /* Locked height for 2 rows */
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 8px 12px 0 12px !important;
  z-index: 99 !important;
}

.teacher-ai-suggestions-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 2px !important;
  width: 100% !important;
}

.teacher-ai-suggestions {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
}

.suggestions-label {
  font-size: 11px !important;
  color: #a0aec0 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 5px !important;
}

/* === Glass / gradient border template (reusable across chat surfaces) ===
   Variables let inline `wp_add_inline_style` rules drive admin-set colours
   without overwriting the layered background. */
.suggestion-chip {
  --mtai-chip-bg: rgba(40, 40, 40, 0.6);
  padding: 8px 12px !important;
  background:
    linear-gradient(var(--mtai-chip-bg), var(--mtai-chip-bg)) padding-box,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 35%,
      rgba(255, 255, 255, 0.04) 70%,
      rgba(255, 255, 255, 0.10) 100%
    ) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-weight: 500 !important;
  text-align: left !important;
  max-width: none !important;
  line-height: 1.4 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.suggestion-chip:hover {
  --mtai-chip-bg: rgba(60, 60, 60, 0.8);
  /* On hover, swap the gradient border to solid admin-set accent
     (--mtai-chip-hover-border is fed from class-aichat-frontend.php inline CSS). */
  background:
    linear-gradient(var(--mtai-chip-bg), var(--mtai-chip-bg)) padding-box,
    linear-gradient(var(--mtai-chip-hover-border, #50FA7B), var(--mtai-chip-hover-border, #50FA7B)) border-box !important;
}

@keyframes fadeInSuggestions {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Markdown Styling for AI Messages */
.message-bubble p:first-child {
  margin-top: 0 !important;
}

.message-bubble p:last-child {
  margin-bottom: 0 !important;
}

.message-bubble table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 10px 0 !important;
  font-size: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.message-bubble th,
.message-bubble td {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px !important;
  text-align: left !important;
}

.message-bubble th {
  background: rgba(255, 255, 255, 0.05) !important;
  font-weight: 600 !important;
}

.message-bubble ul,
.message-bubble ol {
  padding-left: 20px !important;
  margin: 10px 0 !important;
}

.message-bubble li {
  margin-bottom: 5px !important;
}

.message-bubble h1,
.message-bubble h2,
.message-bubble h3 {
  font-size: 1.1em !important;
  margin: 10px 0 !important;
}

/* Restricted Access Message */
.teacher-ai-restricted-overlay {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  text-align: center !important;
  padding: 40px !important;
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  box-sizing: border-box !important;
  min-height: inherit !important;
}

/* For Shortcode when restricted, ensure it takes full space */
.teacher-ai-shortcode.is-restricted .teacher-ai-main-content {
  height: 100% !important;
  display: flex !important;
}

.teacher-ai-shortcode.is-restricted {
  border: 1px solid #333 !important;
  border-radius: 12px !important;
}

.restriction-message {
  max-width: 400px !important;
}

.restriction-message h3 {
  font-size: 28px !important;
  margin-bottom: 20px !important;
  color: #50FA7B !important;
  font-weight: 700 !important;
}

.restriction-message p {
  font-size: 18px !important;
  color: #ffffff !important;
  margin-bottom: 25px !important;
  line-height: 1.6 !important;
}

.restriction-message p strong {
  color: #50FA7B !important;
}

.restriction-login-btn {
  display: inline-block !important;
  color: #50FA7B !important;
  text-decoration: underline !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.restriction-login-btn:hover {
  color: #44d62c !important;
  transform: translateY(-1px) !important;
}

/* Sidebar & Layout */
.teacher-ai-window {
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
}

.teacher-ai-sidebar {
  --mtai-sidebar-bg: #0F0F0F;
  /* 66px collapsed = 15px left + 36px icon + 15px right (balanced gutters). */
  width: 66px !important;
  /* Three-layer glass: top glass overlay + sidebar bg + gradient border */
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.05) 35%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.22) 100%
    ) padding-box,
    linear-gradient(var(--mtai-sidebar-bg), var(--mtai-sidebar-bg)) padding-box,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 35%,
      rgba(255, 255, 255, 0.04) 70%,
      rgba(255, 255, 255, 0.10) 100%
    ) border-box !important;
  height: 100% !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1.5px solid transparent !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
  color: #ffffff !important;
  overflow: hidden !important;
  /* Fix extending content */
}

.teacher-ai-sidebar:hover {
  width: 240px !important;
}

.teacher-ai-sidebar-header {
  /* 15px left / 15px right gutter, 12px top/bottom in a 70px-tall container
     → icon ends up vertically centred with 17px gap above and below. */
  padding: 12px 15px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transition: opacity 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 70px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Hide "Chats" word when collapsed */
/* Hide "Chats" word when collapsed */
/* Specific Pin Color - Force Green */
.teacher-ai-history-item .history-actions .history-action.pinned svg,
.teacher-ai-history-item .history-actions .history-action.pin.pinned svg {
  fill: #50FA7B !important;
}

/* Ensure header text is strictly hidden when collapsed */
.teacher-ai-sidebar-header span {
  opacity: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  /* Added */
  visibility: hidden !important;
  /* Added */
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  padding: 0 !important;
  /* Ensure no padding overlap */
  margin: 0 !important;
}

.teacher-ai-sidebar:hover .teacher-ai-sidebar-header span {
  opacity: 1 !important;
  width: auto !important;
  max-width: 200px !important;
  /* Restore */
  visibility: visible !important;
  /* Restore */
  margin-right: 10px !important;
}

.teacher-ai-history-list {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: opacity 0.2s ease !important;
}

/* Hide history items strictly when sidebar is collapsed */
.teacher-ai-sidebar:not(:hover) .teacher-ai-history-list {
  display: none !important;
}

.teacher-ai-sidebar:hover .teacher-ai-history-list {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.teacher-ai-history-item {
  /* Right padding reserves ~65px for the absolute-positioned action icons
     (icons sit at right: 12px and span ~53px wide). This makes the title's
     content box end exactly where the icons begin — no overlap. */
  padding: 12px 65px 12px 15px !important;
  border-bottom: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
  display: block !important;
  position: relative !important;
}

.teacher-ai-history-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.teacher-ai-history-item.active {
  background: rgba(80, 250, 123, 0.15) !important;
  border-left: 3px solid #50FA7B !important;
}

.history-summary {
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  /* Internal left padding so the text never touches the summary's left edge,
     both in normal state and during marquee scroll. */
  padding-left: 6px !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}

.history-summary-inner {
  display: inline-block !important;
}

/* Marquee scroll on chat-item hover when title overflows.
   JS adds .overflows on the outer summary and sets --scroll-distance after
   measuring inner.scrollWidth vs outer.clientWidth. The animation is on the
   INNER span — moving the inner inside the overflow-hidden outer is what
   actually reveals the hidden tail of the title. */
.teacher-ai-history-item:hover .history-summary.overflows {
  text-overflow: clip !important;
}

.teacher-ai-history-item:hover .history-summary.overflows .history-summary-inner {
  animation: tai-title-marquee 4s ease-in-out infinite;
}

@keyframes tai-title-marquee {
  0%, 10%   { transform: translateX(0); }
  45%, 60%  { transform: translateX(var(--scroll-distance, 0)); }
  95%, 100% { transform: translateX(0); }
}

.teacher-ai-sidebar:hover .history-summary {
  opacity: 1 !important;
}

.history-actions {
  display: flex !important;
  gap: 5px !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
  /* Float over the title's right edge instead of taking flex space — gives the
     title the full row width when actions are hidden. */
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.teacher-ai-sidebar:hover .history-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.history-action {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.7 !important;
  cursor: pointer !important;
}

.history-action:hover {
  opacity: 1 !important;
  background: transparent !important;
  transform: scale(1.1);
}

.history-action svg {
  fill: #50FA7B !important;
  /* Green icons */
  width: 16px !important;
  height: 16px !important;
}

/* Pin icon's visual weight is top-heavy (bulky head, thin needle) while the
   trash icon's weight is bottom-heavy (bin). Geometric centers match but optical
   centers don't, so the pin reads as "higher". Nudge it down to balance. */
.history-action.pin svg {
  transform: translateY(2px);
}

.history-action.pinned svg {
  fill: #f1c40f !important;
}

/* Ensure Shortcode sidebar behaves same as main widget - collapsible */
.teacher-ai-shortcode .teacher-ai-sidebar {
  width: 66px !important;
}

.teacher-ai-shortcode .teacher-ai-sidebar:hover {
  width: 240px !important;
}

.teacher-ai-shortcode .teacher-ai-sidebar.model-selector-open {
  width: 240px !important;
}

.teacher-ai-shortcode .teacher-ai-sidebar .history-summary,
.teacher-ai-shortcode .teacher-ai-sidebar .teacher-ai-sidebar-header span {
  opacity: 1 !important;
}

.teacher-ai-new-chat {
  background: #50FA7B !important;
  /* Make it green and visible */
  border: none !important;
  color: #000 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  /* Pushed to the right naturally by flex-between */
  margin-left: auto !important;
  transition: all 0.2s !important;
  padding: 0 !important;
  opacity: 1 !important;
  /* Force visibility */
  flex-shrink: 0 !important;
}

.teacher-ai-new-chat:hover {
  box-shadow: 0 0 15px 2px rgba(68, 214, 44, 0.8) !important;
  /* Razer Green Glow */
  color: #ffffff !important;
  /* Keep text white */
  transform: scale(1.05) !important;
  /* Scales button up by 5% */
  transition: all 0.05s ease-in-out !important;
  filter: none !important;
  text-shadow: none !important;
  /* Removes text effects */
  opacity: 1 !important;
}

.teacher-ai-new-chat:active {
  transform: scale(0.95) !important;
  /* Sinks the button */
  box-shadow: 0 0 5px 1px rgba(68, 214, 44, 0.4) !important;
  /* Dims the glow */
  filter: brightness(0.7) !important;
  /* Darkens the button and text color */
  transition: all 0.02s !important;
  /* Instant response */
}

.teacher-ai-new-chat svg {
  width: 20px !important;
  height: 20px !important;
  fill: #000000 !important;
}

.history-action {
  padding: 4px !important;
  border-radius: 4px !important;
  transition: background 0.2s !important;
}

.history-action:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.history-action svg {
  width: 14px !important;
  height: 14px !important;
  fill: #aaa !important;
}

.history-action.pinned svg {
  fill: #f1c40f !important;
}

.teacher-ai-main-content {
  flex: 1 !important;
  display: block !important;
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* === Notes panel (right column, ~30% width, shortcode only, logged-in only) ===
   Transparent bg so the parent chat bg/gradient shows through (panel feels
   integrated with the chat, not a separate white box). */
.teacher-ai-notes-panel {
  flex: 0 0 30% !important;
  max-width: 30% !important;
  min-width: 220px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.teacher-ai-notes-header {
  /* Top padding tuned so the visible text top distance matches the left distance:
     header padding-top (12px) + label padding-top (2px) = 14px, same as left. */
  padding: 12px 14px 10px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  /* No letter-spacing — matches the sidebar header kerning. */
  color: rgba(255, 255, 255, 0.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex: 0 0 auto !important;
}

.teacher-ai-notes-label {
  outline: none !important;
  cursor: text !important;
  padding: 2px 4px !important;
  /* Pull the visible text edge back 4px so it aligns with the textarea content
     edge below. Hover highlight still wraps the text with breathing room. */
  margin-left: -4px !important;
  border-radius: 3px !important;
  transition: background-color 0.15s ease !important;
}
.teacher-ai-notes-label:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.teacher-ai-notes-label:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.teacher-ai-notes-area {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  resize: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  /* font-size set via inline CSS from teacherai_font_size_input setting */
  line-height: 1.5 !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  /* Scroll is functional but the scrollbar is hidden visually — paste of long
     content still works and content stays reachable via wheel / arrow keys. */
  overflow-y: auto !important;
  scrollbar-width: none !important;     /* Firefox */
  -ms-overflow-style: none !important;  /* Old IE/Edge */
}
.teacher-ai-notes-area::-webkit-scrollbar {
  display: none !important;             /* Chrome/Safari/Edge */
}

.teacher-ai-notes-area::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Hide notes panel on mobile (per spec). */
@media (max-width: 767px) {
  .teacher-ai-notes-panel {
    display: none !important;
  }
}

.teacher-ai-messages-container {
  flex: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Main Content Area */
/* Input area rule removed from here as it duplicates the one above but was causing issues */

/* File Preview Tray */
.teacher-ai-file-preview {
  margin-right: 15px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  animation: fadeIn 0.3s ease !important;
  overflow: visible !important;
  /* Ensure X button isn't cropped */
}

.teacher-ai-file-preview.image-preview {
  width: 50px !important;
  height: 50px !important;
  border: 1px solid rgba(80, 250, 123, 0.4) !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

.preview-thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.teacher-ai-file-preview.doc-preview {
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
  max-width: 140px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #ccc !important;
}

.teacher-ai-file-preview.doc-preview span:first-child {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.teacher-ai-file-preview .remove-file {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 18px !important;
  height: 18px !important;
  background: #ff5555 !important;
  color: white !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 10px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
  z-index: 10 !important;
}

.teacher-ai-file-preview .remove-file:hover {
  background: #ff6666 !important;
  transform: scale(1.1) !important;
}

/* Attachment Dropdown */
.teacher-ai-attach-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 10px !important;
}

/* Attach button — same Shiny CTA pattern as .teacher-ai-send.
   Reuses the global @property --tai-rim-angle declared earlier in this file. */
.teacher-ai-attach-btn {
  --tai-rim-angle: 0deg;
  --tai-rim-percent: 12%;
  --tai-rim-offset: 60deg;
  --tai-rim-bg: #50FA7B;
  --tai-rim-highlight: #50FA7B;
  --tai-rim-shine: #ffffff;

  width: 36px !important;
  height: 36px !important;
  border-radius: 5px !important;
  /* Three-layer background: L→R darkening overlay + solid accent + conic rim on border-box */
  background:
      linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 100%) padding-box,
      linear-gradient(var(--tai-rim-bg), var(--tai-rim-bg)) padding-box,
      conic-gradient(
          from calc(var(--tai-rim-angle) - var(--tai-rim-offset)),
          transparent 0%,
          var(--tai-rim-highlight) var(--tai-rim-percent),
          var(--tai-rim-shine) calc(var(--tai-rim-percent) * 2),
          var(--tai-rim-highlight) calc(var(--tai-rim-percent) * 3),
          transparent calc(var(--tai-rim-percent) * 4)
      ) border-box !important;
  border: 2px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.05s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 2px 8px rgba(80, 250, 123, 0.3) !important;
  padding: 0 !important;
  animation: tai-rim-rotate 3s linear infinite;
}

.teacher-ai-attach-btn:hover {
  box-shadow: 0 0 15px 2px rgba(68, 214, 44, 0.8) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
  filter: none !important;
  text-shadow: none !important;
}

.teacher-ai-attach-btn:active {
  --tai-rim-bg: #000000;
  transform: scale(0.95) !important;
  box-shadow: 0 0 5px 1px rgba(68, 214, 44, 0.4) !important;
  transition: all 0.02s !important;
}

.teacher-ai-attach-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: #000000 !important;
  /* Black icon */
}

.teacher-ai-attach-dropdown {
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  margin-bottom: 15px !important;
  background: rgba(40, 40, 40, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  /* Removed rounded edges */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  padding: 8px !important;
  display: none !important;
  flex-direction: column !important;
  min-width: 220px !important;
  z-index: 1000 !important;
  animation: slideUp 0.3s ease !important;
}

.teacher-ai-attach-dropdown.show {
  display: flex !important;
}

.attach-opt {
  background: transparent !important;
  border: none !important;
  color: #50FA7B !important;
  /* MTVision Neon Green */
  /* Green words */
  padding: 10px 15px !important;
  text-align: left !important;
  font-size: 13px !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  /* Removed rounded edges */
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
}

.attach-opt:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Model Selector (frontend) — sidebar chip + sleek dropdown
   Chip matches .teacher-ai-new-chat. Dropdown mirrors the
   attach-file dropdown's visual treatment (dark blur popover,
   sharp corners, neon-green items, slideUp entry).
   ============================================================ */

.teacher-ai-sidebar-footer {
  flex: 0 0 auto !important;
  /* Pin to bottom of sidebar even when history list is hidden (collapsed state). */
  margin-top: auto !important;
  /* 70px container = same as .teacher-ai-input-area. 10px left / 15px right
     mirrors the header. Top:13/bottom:11 (instead of symmetric 12/12) nudges
     the chip 1px down so it lines up with the attach button on the prompt
     box exactly. */
  height: 70px !important;
  padding: 13px 15px 11px 15px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* While the model dropdown is open, force the sidebar to stay expanded,
   let the dropdown overflow its bounds (sidebar uses overflow:hidden +
   collapse-on-blur by default), and elevate the stacking context so the
   popover paints above the input-area which is a sibling. */
.teacher-ai-sidebar.model-selector-open {
  width: 240px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 100000 !important;
}

.teacher-ai-sidebar.model-selector-open .teacher-ai-history-list {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.teacher-ai-sidebar.model-selector-open .teacher-ai-sidebar-header span {
  opacity: 1 !important;
  width: auto !important;
  max-width: 200px !important;
  visibility: visible !important;
  margin-right: 10px !important;
}

.teacher-ai-model-selector {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.teacher-ai-model-btn {
  /* Background, color, hover, and border-radius come from the dynamic CSS
     rule that also styles .teacher-ai-new-chat — so this chip follows the
     admin's Button Color / Hover / Icon Color settings automatically. */
  background: #50FA7B !important;
  border: none !important;
  color: #000 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease !important;
}

.teacher-ai-model-btn:hover {
  box-shadow: 0 0 15px 2px rgba(68, 214, 44, 0.8) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
  filter: none !important;
}

.teacher-ai-model-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 0 0 5px 1px rgba(68, 214, 44, 0.4) !important;
  filter: brightness(0.7) !important;
  transition: all 0.02s !important;
}

.teacher-ai-model-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: #000000 !important;
}

.teacher-ai-model-btn.disabled {
  filter: grayscale(1) brightness(0.6) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.teacher-ai-model-btn.loading svg {
  animation: aichat-spin 0.9s linear infinite !important;
}

@keyframes aichat-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Dropdown — visual clone of .teacher-ai-attach-dropdown but anchored
   to bottom-left of the chip and opening upward. Width is locked to the
   sidebar's expanded inner width (240px sidebar - 10px footer pad each side
   = 220px) so it never overflows the sidebar's right edge. */
.teacher-ai-model-dropdown {
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  margin-bottom: 15px !important;
  background: rgba(40, 40, 40, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  padding: 8px !important;
  display: none !important;
  flex-direction: column !important;
  /* 210px = 240px expanded sidebar - 15px left gutter - 15px right gutter.
     Keeps the dropdown's right edge at the same distance from the sidebar
     edge as its left edge. */
  width: 210px !important;
  min-width: 0 !important;
  max-width: 210px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Hide the scroll bar (Firefox + IE/Edge); WebKit handled below. */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  /* Stack above the input area, which has its own opaque background and
     would otherwise visually swallow the popover. The chat window uses
     z-index: 99999, so we go just above it within the same context. */
  z-index: 100001 !important;
  animation: slideUp 0.2s ease-out !important;
}

.teacher-ai-model-dropdown::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.teacher-ai-model-dropdown.show {
  display: flex !important;
}

.teacher-ai-model-dropdown .model-opt {
  background: transparent !important;
  border: none !important;
  color: #50FA7B !important;
  padding: 10px 15px !important;
  text-align: left !important;
  /* font-size intentionally omitted — picked up from the dynamic
     "suggestions" font-size rule injected by enqueue_scripts so it
     matches .attach-opt exactly across admin styling changes. */
  cursor: pointer !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.teacher-ai-model-dropdown .model-opt > span.model-opt-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.teacher-ai-model-dropdown .model-opt:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.teacher-ai-model-dropdown .model-opt.active {
  font-weight: 600 !important;
}

.teacher-ai-model-dropdown .model-opt.active::after {
  content: "\2713" !important; /* ✓ */
  font-weight: 700 !important;
  margin-left: 12px !important;
}

.teacher-ai-model-dropdown .model-opt-status {
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: default !important;
  font-style: normal !important;
  /* Status row uses left alignment instead of space-between so the message
     starts flush with the option items above it. */
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
}

.teacher-ai-model-dropdown .model-opt-status:hover {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Mid-chat switch notice — same typography as regular messages,
   centered, no bubble background. */
.teacher-ai-messages .message.system-notice {
  display: block !important;
  text-align: center !important;
  background: transparent !important;
  margin: 12px auto !important;
  padding: 4px 12px !important;
  color: inherit !important;
  opacity: 0.85 !important;
}