/* GuardRAIl v2 - Content Script Styles (Modern EdTech Design) */
/* Inspired by: Google Classroom, Canvas, Schoology, Seesaw, ClassDojo */

/* === DESIGN TOKENS (Inline for content scripts) === */
/* Align with popup/dashboard: 8pt grid, same radii and colors */
.guardrail-dialog-overlay {
  --gr-font: var(--font-family, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif);
  --gr-bg: var(--color-background, #FFFFFF);
  --gr-bg-alt: var(--color-background-alt, #F8F9FA);
  --gr-fg: var(--color-foreground, #1C1E21);
  --gr-fg-muted: var(--color-foreground-muted, #65676B);
  --gr-fg-subtle: var(--color-foreground-subtle, #8A8D91);
  --gr-primary: var(--color-primary, #1877F2);
  --gr-primary-hover: var(--color-primary-hover, #166FE5);
  --gr-primary-light: var(--color-primary-light, #E7F3FF);
  --gr-secondary: var(--color-secondary, #42B72A);
  --gr-secondary-hover: var(--color-secondary-hover, #36A420);
  --gr-secondary-light: var(--color-secondary-light, #E6F7E1);
  --gr-accent: var(--color-accent, #F25C05);
  --gr-accent-light: var(--color-accent-light, #FFF4E6);
  --gr-error: var(--color-error, #E41E3F);
  --gr-error-light: var(--color-error-light, #FFE3E8);
  --gr-border: var(--color-border, #DADDE1);
  --gr-radius-sm: var(--radius-sm, 6px);
  --gr-radius-md: var(--radius-md, 8px);
  --gr-radius-lg: var(--radius-lg, 12px);
  --gr-radius-xl: var(--radius-xl, 16px);
  /* 8pt grid spacing (match tokens.css) */
  --gr-space-1: 4px;
  --gr-space-2: 8px;
  --gr-space-3: 12px;
  --gr-space-4: 16px;
  --gr-space-5: 20px;
  --gr-space-6: 24px;
  --gr-space-8: 32px;
  --gr-space-12: 48px;
  --gr-primary-lighter: #F0F8FF;
  --gr-background-subtle: #F1F3F5;
}

/* Dark Theme */
.guardrail-dialog-overlay[data-theme="dark"] {
  --gr-bg: var(--color-background, #18191A);
  --gr-bg-alt: var(--color-background-alt, #242526);
  --gr-fg: var(--color-foreground, #E4E6EB);
  --gr-fg-muted: var(--color-foreground-muted, #B0B3B8);
  --gr-fg-subtle: var(--color-foreground-subtle, #8A8D91);
  --gr-primary: var(--color-primary, #2D88FF);
  --gr-primary-hover: var(--color-primary-hover, #4599FF);
  --gr-primary-light: var(--color-primary-light, #1A3A5F);
  --gr-secondary: var(--color-secondary, #4CD964);
  --gr-secondary-hover: var(--color-secondary-hover, #5FE075);
  --gr-secondary-light: var(--color-secondary-light, #1E3A2F);
  --gr-accent: var(--color-accent, #FF6B35);
  --gr-accent-light: var(--color-accent-light, #3D2E1A);
  --gr-error: var(--color-error, #FF4757);
  --gr-error-light: var(--color-error-light, #3D2323);
  --gr-border: var(--color-border, #3A3B3C);
  --gr-primary-lighter: var(--gr-primary-light);
  --gr-background-subtle: #2C2D2E;
}

/* === TOAST NOTIFICATIONS === */
.guardrail-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  padding: 14px 24px !important;
  border-radius: var(--gr-radius-md, 6px) !important;
  font-family: var(--gr-font, system-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  z-index: 2147483647 !important;
  animation: guardrail-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  transition: transform var(--transition-base), opacity var(--transition-base) !important;
}

.guardrail-toast:hover {
  transform: translateX(-4px) scale(1.02) !important;
}

.guardrail-toast-success {
  background: #10B981 !important;
  color: white !important;
}

.guardrail-toast-error {
  background: #EF4444 !important;
  color: white !important;
}

.guardrail-toast-warning {
  background: #F59E0B !important;
  color: white !important;
}

.guardrail-toast-fade {
  opacity: 0 !important;
  transform: translateX(100px) !important;
  transition: all 0.2s ease !important;
}

@keyframes guardrail-slide-in {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Success toast with checkmark animation */
.guardrail-toast-success::before {
  content: '✓' !important;
  display: inline-block !important;
  margin-right: 8px !important;
  animation: guardrail-checkmark-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes guardrail-checkmark-pop {
  0% {
    transform: scale(0) rotate(-180deg);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* === DIALOG OVERLAY (Full screen backdrop) === */
.guardrail-dialog-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(17, 24, 39, 0.6) !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--gr-font) !important;
  margin: 0 !important;
  padding: var(--gr-space-6) !important;
  box-sizing: border-box !important;
}

/* === MAIN DIALOG CONTAINER === */
.guardrail-dialog {
  background: var(--gr-bg) !important;
  border-radius: var(--gr-radius-xl) !important;
  width: 100% !important;
  max-width: 520px !important;
  max-height: calc(100vh - var(--gr-space-12)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: guardrail-dialog-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--gr-border) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

@keyframes guardrail-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* === DIALOG HEADER === */
.guardrail-dialog-header {
  padding: var(--gr-space-5) var(--gr-space-6) !important;
  background: var(--gr-primary) !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  position: relative !important;
}

.guardrail-logo {
  display: flex !important;
  align-items: center !important;
  gap: var(--gr-space-3) !important;
  position: relative !important;
  z-index: 1 !important;
}

.guardrail-logo-icon {
  width: 28px !important;
  height: 28px !important;
  background: white !important;
  border-radius: var(--gr-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gr-primary) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.guardrail-logo-icon svg {
  width: 14px !important;
  height: 16px !important;
  display: block !important;
  fill: currentColor !important;
}

.guardrail-logo-icon:hover {
  transform: scale(1.05) !important;
}

.guardrail-logo-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: white !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Rating Badge (In header, pill style) */
.guardrail-rating {
  display: flex !important;
  align-items: center !important;
  gap: var(--gr-space-2) !important;
  background: rgba(255,255,255,0.2) !important;
  padding: var(--gr-space-2) var(--gr-space-3) !important;
  border-radius: 20px !important;
  position: relative !important;
  z-index: 1 !important;
}

.guardrail-rating-label {
  font-size: 10px !important;
  color: rgba(255,255,255,0.9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--gr-space-2) !important;
}

/* OPTIMIZED: Pulse animation using only transform and opacity */
.guardrail-rating-label::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  background: #51CF66 !important;
  border-radius: 50% !important;
  animation: guardrail-pulse 3s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}

@keyframes guardrail-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.3);
    opacity: 0.7;
  }
}

.guardrail-rating-value {
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: var(--gr-space-1) var(--gr-space-3) !important;
  border-radius: 12px !important;
  line-height: 1 !important;
  background: white !important;
}

.guardrail-rating-value.low {
  color: var(--gr-error) !important;
}

.guardrail-rating-value.medium {
  color: var(--gr-accent) !important;
}

.guardrail-rating-value.high {
  color: var(--gr-secondary) !important;
}

/* Header right: rating + feedback button */
.guardrail-header-right {
  display: flex !important;
  align-items: center !important;
  gap: var(--gr-space-2) !important;
}

.guardrail-dialog-feedback-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--gr-radius-sm) !important;
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.9) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.2s, color 0.2s !important;
}

.guardrail-dialog-feedback-btn:hover {
  background: rgba(255,255,255,0.25) !important;
  color: white !important;
}

.guardrail-dialog-feedback-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Feedback panel (subject + message, linked to convo) */
.guardrail-dialog-feedback-panel {
  flex: 1 !important;
  padding: var(--gr-space-6) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gr-space-4) !important;
  min-height: 0 !important;
  background: var(--gr-bg) !important;
}

.guardrail-dialog-feedback-panel.hidden,
.guardrail-dialog-body.hidden,
.guardrail-dialog-footer.hidden {
  display: none !important;
}

.guardrail-dialog-feedback-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gr-fg) !important;
  margin: 0 !important;
}

.guardrail-dialog-feedback-hint {
  font-size: 13px !important;
  color: var(--gr-fg-muted) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.guardrail-dialog-feedback-form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gr-space-3) !important;
}

.guardrail-dialog-feedback-form label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gr-fg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.guardrail-dialog-feedback-form input,
.guardrail-dialog-feedback-form textarea {
  padding: var(--gr-space-3) var(--gr-space-4) !important;
  border: 1px solid var(--gr-border) !important;
  border-radius: var(--gr-radius-md) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  background: var(--gr-bg-alt) !important;
  color: var(--gr-fg) !important;
}

.guardrail-dialog-feedback-form input:focus,
.guardrail-dialog-feedback-form textarea:focus {
  outline: none !important;
  border-color: var(--gr-primary) !important;
  box-shadow: 0 0 0 2px var(--gr-primary-light) !important;
}

.guardrail-dialog-feedback-form textarea {
  resize: vertical !important;
  min-height: 72px !important;
}

.guardrail-feedback-error {
  font-size: 13px !important;
  color: var(--gr-error) !important;
  padding: var(--gr-space-2) 0 !important;
}

.guardrail-feedback-error.hidden {
  display: none !important;
}

.guardrail-dialog-feedback-actions {
  display: flex !important;
  gap: var(--gr-space-3) !important;
  margin-top: var(--gr-space-2) !important;
}

/* === DIALOG BODY === */
.guardrail-dialog-body {
  flex: 1 !important;
  padding: var(--gr-space-6) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gr-space-5) !important;
  min-height: 0 !important;
  background: var(--gr-bg) !important;
}

/* Info Banner (tooltip – distinct from chat) */
.guardrail-info {
  padding: var(--gr-space-4) var(--gr-space-5) !important;
  background: var(--gr-primary-lighter) !important;
  border-radius: var(--gr-radius-lg) !important;
  margin: 0 !important;
  border-left: 4px solid var(--gr-primary) !important;
  box-shadow: 0 1px 2px rgba(24, 119, 242, 0.08) !important;
}

.guardrail-info p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: var(--gr-fg) !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* === MESSAGES CONTAINER === */
.guardrail-messages {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gr-space-4) !important;
  min-height: 100px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  padding: var(--gr-space-2) 0 !important;
  margin: 0 !important;
  scroll-behavior: smooth !important;
}

/* Smooth scroll to bottom when new messages arrive */
.guardrail-messages:has(.guardrail-message:last-child) {
  scroll-padding-bottom: 12px !important;
}

.guardrail-message {
  display: flex !important;
  flex-direction: column !important;
  animation: guardrail-msg-in 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

.guardrail-message.user {
  align-items: flex-end !important;
}

.guardrail-message.assistant {
  align-items: flex-start !important;
}

.guardrail-message-content {
  max-width: 85% !important;
  padding: var(--gr-space-4) var(--gr-space-5) !important;
  border-radius: var(--gr-radius-md) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.guardrail-message-content:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.guardrail-message.user .guardrail-message-content {
  background: var(--gr-primary) !important;
  color: white !important;
  border-bottom-right-radius: var(--gr-radius-sm) !important;
}

.guardrail-message.assistant .guardrail-message-content {
  background: var(--gr-background-subtle) !important;
  color: var(--gr-fg) !important;
  border-bottom-left-radius: var(--gr-radius-sm) !important;
  border-left: 3px solid var(--gr-secondary) !important;
}

/* Typing Indicator (matches chat bubble style) */
.guardrail-typing {
  display: flex !important;
  align-items: center !important;
  gap: var(--gr-space-2) !important;
  padding: var(--gr-space-4) var(--gr-space-5) !important;
  background: var(--gr-background-subtle) !important;
  border-radius: var(--gr-radius-lg) !important;
  border-bottom-left-radius: var(--gr-radius-sm) !important;
  border-left: 3px solid var(--gr-secondary) !important;
}

.guardrail-typing-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--gr-fg-muted) !important;
  border-radius: 50% !important;
  animation: guardrail-typing-bounce 1.4s ease-in-out infinite !important;
}

.guardrail-typing-dot:nth-child(1) { animation-delay: 0s !important; }
.guardrail-typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
.guardrail-typing-dot:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes guardrail-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* === INPUT AREA === */
.guardrail-input-area {
  display: flex !important;
  gap: var(--gr-space-3) !important;
  align-items: flex-end !important;
  padding-top: var(--gr-space-5) !important;
  margin-top: var(--gr-space-2) !important;
  border-top: 1px solid var(--gr-border) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.guardrail-input {
  flex: 1 !important;
  padding: var(--gr-space-3) var(--gr-space-4) !important;
  background: var(--gr-bg-alt) !important;
  border: 1px solid var(--gr-border) !important;
  border-radius: var(--gr-radius-md) !important;
  color: var(--gr-fg) !important;
  font-size: 15px !important;
  font-family: var(--gr-font) !important;
  resize: none !important;
  min-height: 44px !important;
  max-height: 120px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
}

.guardrail-input:focus {
  background: var(--gr-bg) !important;
  border-color: var(--gr-primary) !important;
  box-shadow: 0 0 0 3px var(--gr-primary-light) !important;
}

.guardrail-input:focus-visible {
  outline: 2px solid var(--gr-primary) !important;
  outline-offset: 2px !important;
}

.guardrail-input::placeholder {
  color: var(--gr-fg-subtle) !important;
  font-weight: 400 !important;
}

.guardrail-input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* === FINAL PROMPT === */
.guardrail-final-prompt {
  background: var(--gr-secondary-light) !important;
  border: 1px solid var(--gr-secondary) !important;
  border-radius: var(--gr-radius-xl) !important;
  padding: var(--gr-space-6) !important;
  margin: 0 !important;
  animation: guardrail-success-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Celebratory sparkle effect */
.guardrail-final-prompt::before {
  content: '✨' !important;
  position: absolute !important;
  top: var(--gr-space-3) !important;
  right: var(--gr-space-4) !important;
  font-size: 20px !important;
  animation: guardrail-sparkle 1.5s ease-in-out infinite !important;
}

@keyframes guardrail-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

@keyframes guardrail-success-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.guardrail-final-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--gr-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 var(--gr-space-4) 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--gr-space-3) !important;
}

.guardrail-final-label::before {
  content: '✓' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  background: linear-gradient(135deg, var(--gr-secondary) 0%, #2DD4BF 100%) !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  animation: guardrail-checkmark 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both !important;
  box-shadow: 0 2px 8px rgba(56, 176, 0, 0.4) !important;
}

@keyframes guardrail-checkmark {
  from {
    transform: scale(0) rotate(-180deg);
  }
  to {
    transform: scale(1) rotate(0deg);
  }
}

.guardrail-final-text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--gr-fg) !important;
  white-space: pre-wrap !important;
  padding: var(--gr-space-4) !important;
  background: var(--gr-bg) !important;
  border-radius: var(--gr-radius-md) !important;
  margin: 0 0 var(--gr-space-5) 0 !important;
  border: 1px solid var(--gr-border) !important;
}

.guardrail-final-actions {
  display: flex !important;
  gap: var(--gr-space-3) !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === BUTTONS (Match popup/dashboard) === */
.guardrail-btn {
  padding: var(--gr-space-3) var(--gr-space-5) !important;
  border-radius: var(--gr-radius-lg) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--gr-font) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  position: relative !important;
}

.guardrail-btn:focus-visible {
  outline: 3px solid var(--gr-primary) !important;
  outline-offset: 2px !important;
}

.guardrail-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary Button */
.guardrail-btn-primary {
  background: var(--gr-primary) !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

.guardrail-btn-primary:hover:not(:disabled) {
  background: var(--gr-primary-hover) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

.guardrail-btn-primary:focus-visible {
  outline: 2px solid var(--gr-primary) !important;
  outline-offset: 2px !important;
}

.guardrail-btn-primary:active:not(:disabled) {
  background: var(--gr-primary-hover) !important;
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Secondary Button */
.guardrail-btn-secondary {
  background: var(--gr-bg) !important;
  color: var(--gr-fg) !important;
  border: 1px solid var(--gr-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

.guardrail-btn-secondary:hover:not(:disabled) {
  background: var(--gr-bg-alt) !important;
  border-color: var(--gr-primary) !important;
  color: var(--gr-primary) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

.guardrail-btn-secondary:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Success Button */
.guardrail-btn-success {
  background: var(--gr-secondary) !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

.guardrail-btn-success:hover:not(:disabled) {
  background: var(--gr-secondary-hover) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

.guardrail-btn-success:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Ghost Button */
.guardrail-btn-ghost {
  background: transparent !important;
  color: var(--gr-fg-muted) !important;
  padding: var(--gr-space-3) var(--gr-space-4) !important;
  box-shadow: none !important;
}

.guardrail-btn-ghost:hover:not(:disabled) {
  color: var(--gr-primary) !important;
  background: var(--gr-primary-light) !important;
}

/* === DIALOG FOOTER === */
.guardrail-dialog-footer {
  padding: var(--gr-space-5) var(--gr-space-6) !important;
  background: var(--gr-bg-alt) !important;
  border-top: 1px solid var(--gr-border) !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: var(--gr-space-3) !important;
  margin: 0 !important;
}

/* === SCROLLBAR (Minimal) === */
.guardrail-messages::-webkit-scrollbar {
  width: 4px !important;
}

.guardrail-messages::-webkit-scrollbar-track {
  background: transparent !important;
}

.guardrail-messages::-webkit-scrollbar-thumb {
  background: var(--gr-border) !important;
  border-radius: 2px !important;
}

.guardrail-messages::-webkit-scrollbar-thumb:hover {
  background: var(--gr-fg-subtle) !important;
}

/* === POST HANDOFF INTERVENTION DIALOG === */
.guardrail-intervention-dialog {
  background: var(--gr-bg) !important;
  border-radius: var(--gr-radius-xl) !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: var(--gr-space-6) !important;
  border: 2px solid var(--gr-accent) !important;
  text-align: center !important;
}

.guardrail-intervention-icon {
  font-size: 36px !important;
  margin-bottom: var(--gr-space-4) !important;
}

.guardrail-intervention-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gr-fg) !important;
  margin: 0 0 var(--gr-space-3) 0 !important;
}

.guardrail-intervention-message {
  font-size: 14px !important;
  color: var(--gr-fg-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 var(--gr-space-5) 0 !important;
}

.guardrail-intervention-actions {
  display: flex !important;
  gap: var(--gr-space-3) !important;
  justify-content: center !important;
}

/* === PROGRESS INDICATOR === */
.guardrail-progress {
  display: flex !important;
  align-items: center !important;
  gap: var(--gr-space-2) !important;
  padding: var(--gr-space-2) var(--gr-space-3) !important;
  background: var(--gr-primary-light) !important;
  border-radius: var(--gr-radius-md) !important;
  margin-left: auto !important;
}

.guardrail-progress-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gr-primary) !important;
  letter-spacing: 0.02em !important;
}

.guardrail-progress-dots {
  display: flex !important;
  gap: var(--gr-space-1) !important;
}

.guardrail-progress-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--gr-border) !important;
  transition: all 0.2s ease !important;
}

.guardrail-progress-dot.active {
  background: var(--gr-primary) !important;
  transform: scale(1.1) !important;
}

.guardrail-progress-dot.complete {
  background: var(--gr-secondary) !important;
}

/* === LOADING STATE === */
.guardrail-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--gr-space-3) !important;
  padding: var(--gr-space-5) !important;
  color: var(--gr-fg-muted) !important;
  font-size: 14px !important;
}

.guardrail-spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--gr-border) !important;
  border-top-color: var(--gr-primary) !important;
  border-radius: 50% !important;
  animation: guardrail-spin 0.8s linear infinite !important;
}

@keyframes guardrail-spin {
  to { transform: rotate(360deg); }
}

/* === SKELETON LOADING === */
.guardrail-skeleton {
  background: linear-gradient(
    90deg,
    var(--gr-bg-alt) 25%,
    var(--gr-bg) 50%,
    var(--gr-bg-alt) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: guardrail-shimmer 1.5s ease-in-out infinite !important;
  border-radius: var(--gr-radius-md) !important;
}

@keyframes guardrail-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === ENHANCED FOCUS STATES === */
.guardrail-btn:focus-visible,
.guardrail-input:focus-visible {
  outline: 2px solid var(--gr-primary) !important;
  outline-offset: 2px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .guardrail-dialog {
    border: 3px solid var(--gr-fg) !important;
  }
  
  .guardrail-btn-primary {
    border: 2px solid var(--gr-fg) !important;
  }
}

/* === GuardRAIl rating banner (only when giving a rating to the prompt) === */
/* Same green as "GuardRAIl active" toast; shows "Thinking" while analyzing */
/* Thinking banner: same position & style as "GuardRAIl active" toast (uses .guardrail-toast) */
.guardrail-rating-banner::before {
  content: none !important; /* no checkmark for "Thinking" */
}

/* Assignment/long-prompt banner inside dialog: same style as Thinking / GuardRAIl active toast */
.guardrail-dialog-banner {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
}
.guardrail-dialog-banner::before {
  content: none !important;
}
