@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 {
  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;
}

/* AI Bubble - MTVision Style */
.message.ai .message-bubble {
  backdrop-filter: blur(10px) !important;
  border-radius: 0 !important;
  border: 1px solid rgba(80, 250, 123, 0.3) !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 85% !important;
}

/* 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 */
  padding: 12px 15px !important;
  background: rgba(20, 20, 20, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  z-index: 100 !important;
}

.teacher-ai-input {
  flex: 1 !important;
  background: rgba(40, 40, 40, 0.6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
  box-shadow: none !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 0 !important;
}

.teacher-ai-input:focus {
  border-color: #50FA7B !important;
}

/* Send Button - Compact Up Arrow */
.teacher-ai-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 5px !important;
  background-color: #50FA7B !important;
  /* MTVision Neon Green */
  background: #50FA7B !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 0 10px rgba(80, 250, 123, 0.2) !important;
}

.teacher-ai-send: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 */
}

.teacher-ai-send: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-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 */
  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 18px 0px 18px !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;
}

.suggestion-chip {
  padding: 8px 12px !important;
  background: rgba(40, 40, 40, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !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: all 0.2s ease !important;
}

.suggestion-chip:hover {
  border-color: #50FA7B !important;
  background: rgba(60, 60, 60, 0.8) !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 {
  width: 50px !important;
  background: #0F0F0F !important;
  height: 100% !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !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: 250px !important;
}

.teacher-ai-sidebar-header {
  padding: 15px 12px !important;
  font-weight: 700 !important;
  font-size: 14px !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: 50px !important;
  overflow: visible !important;
  /* Allow icon to be seen */
}

/* 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 {
  padding: 12px 15px !important;
  border-bottom: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !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;
  max-width: 120px !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
  width: 0 !important;
  display: inline-block !important;
}

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

.history-actions {
  display: flex !important;
  gap: 5px !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}

.teacher-ai-sidebar:hover .history-actions {
  opacity: 1 !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;
}

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

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

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

.teacher-ai-shortcode .teacher-ai-sidebar .history-summary,
.teacher-ai-shortcode .teacher-ai-sidebar .teacher-ai-sidebar-header span {
  opacity: 1 !important;
  width: auto !important;
  max-width: 100% !important;
}

.teacher-ai-new-chat {
  background: #50FA7B !important;
  /* Make it green and visible */
  border: none !important;
  color: #000 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !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: 16px !important;
  height: 16px !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;
}

.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;
}

.teacher-ai-attach-btn {
  background: #50FA7B !important;
  /* MTVision Neon Green */
  border: none !important;
  border-radius: 5px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(80, 250, 123, 0.3) !important;
  padding: 0 !important;
}

.teacher-ai-attach-btn: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 */
}

.teacher-ai-attach-btn: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-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);
  }
}