/**
 * Unity AI Lab — Demo Codex Override Layer
 * Creators: Hackall360, Sponge, GFourteen, Alfreddo, Red
 * https://www.unityailab.com
 * unityailabcontact@gmail.com
 * Version: v2.1.6
 *
 * Loaded AFTER demo.css. Flips the demo's soft-Bootstrap-flavored
 * aesthetic (8–24px radius corners, Trajan Pro on every text element,
 * gradient send button, rounded toggles) to the sharp gothic codex
 * aesthetic that the rest of the redesigned site uses.
 *
 * Design language enforced here (mirrors redesign/codex-shared.css +
 * redesign/about-v2.css + redesign/variations.css):
 *   • Border-radius near zero (0–2px) everywhere
 *   • 1px crimson borders at codex-spec opacities (0.2 / 0.35 / 0.5)
 *   • Trajan Pro for DISPLAY (panel + section titles + brand)
 *   • Inter for BODY copy (chat content, message text, default body)
 *   • JetBrains Mono uppercase 4px-letterspaced for LABELS + values
 *   • Cormorant Garamond italic for empty-state lede + help text
 *   • Crimson drop-shadow glows (not box-shadows) on focus/hover
 *
 * No imperative changes — this is purely visual. Functional behavior in
 * demo.js / chat.js / settings.js / etc. is untouched.
 */

/* =========================================================================
   1. BODY TYPOGRAPHY — Inter for body, not Trajan Pro
   ========================================================================= */
body {
  font-family: var(--font-body, 'Inter', -apple-system, system-ui, sans-serif);
  color: var(--bone, #e8e2d4);
}

/* =========================================================================
   2. PANELS — sharper edges, codex border treatment
   ========================================================================= */
.left-panel,
.right-panel {
  background: rgba(8, 2, 3, 0.92);
  border-color: rgba(220, 20, 60, 0.25);
}

.chat-section {
  background: rgba(3, 0, 1, 0.85);
}

/* Hairline divider between panel sections — replaces the gradient .divider */
.divider {
  height: 1px;
  background: rgba(220, 20, 60, 0.3);
  margin: 18px 0;
}

/* =========================================================================
   3. PANEL TITLES — Trajan display, letterspaced
   ========================================================================= */
.panel-title {
  font-family: var(--font-display, 'Trajan Pro', 'Cormorant Garamond', serif);
  font-size: 1rem;
  color: var(--white, #ffffff);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(220, 20, 60, 0.25);
  margin-bottom: 12px;
}

/* =========================================================================
   4. CONTROL LABELS — mono uppercase letterspaced (codex meta style)
   ========================================================================= */
.control-label {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--bone, #e8e2d4);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.toggle-control label {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--bone, #e8e2d4);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

/* =========================================================================
   5. SETTINGS GROUP — codex-style band with mono ribbon
   ========================================================================= */
.settings-group {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(220, 20, 60, 0.3);
}

.group-title {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--crimson-red, #dc143c);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(220, 20, 60, 0.2);
}

.group-title i {
  color: var(--crimson-red, #dc143c);
  font-size: 0.9em;
}

/* =========================================================================
   6. FORM CONTROLS — zero radius, mono font, codex borders
   ========================================================================= */
.gothic-select,
.gothic-input-small,
.gothic-textarea {
  border-radius: 2px;
  background: rgba(8, 2, 3, 0.7);
  border: 1px solid rgba(220, 20, 60, 0.3);
  color: var(--bone, #e8e2d4);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.gothic-select {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 1.5px;
}

.gothic-input-small {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 1px;
}

.gothic-textarea {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.55;
}

.gothic-select:focus,
.gothic-input-small:focus,
.gothic-textarea:focus {
  border-color: var(--crimson-red, #dc143c);
  background: rgba(8, 2, 3, 0.9);
  box-shadow: 0 0 16px rgba(220, 20, 60, 0.35);
}

.gothic-select option {
  background: rgba(8, 2, 3, 0.98);
  color: var(--bone, #e8e2d4);
}

.gothic-textarea::placeholder,
.gothic-input-small::placeholder {
  color: rgba(232, 226, 212, 0.4);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0;
}

/* =========================================================================
   7. MODEL INFO BADGE — codex-style left-rule
   ========================================================================= */
.model-info {
  border-radius: 0;
  background: rgba(8, 2, 3, 0.5);
  border-left: 2px solid var(--crimson-red, #dc143c);
  border-top: 1px solid rgba(220, 20, 60, 0.15);
  border-right: 1px solid rgba(220, 20, 60, 0.15);
  border-bottom: 1px solid rgba(220, 20, 60, 0.15);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 11.5px;
  color: var(--bone, #e8e2d4);
  padding: 10px 12px;
}

/* =========================================================================
   8. TOGGLE SWITCH — square corners, codex feel
   ========================================================================= */
.toggle-slider {
  border-radius: 2px;
  background-color: rgba(8, 2, 3, 0.85);
  border-color: rgba(220, 20, 60, 0.4);
}

.toggle-slider:before {
  border-radius: 1px;
  background-color: var(--bone, #e8e2d4);
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 4px;
}

.toggle-switch input:checked + .toggle-slider:before {
  background-color: var(--white, #ffffff);
}

/* =========================================================================
   9. SLIDERS — sharper track, square thumb
   ========================================================================= */
.gothic-slider {
  border-radius: 0;
  background: rgba(8, 2, 3, 0.85);
  height: 4px;
}

.gothic-slider::-webkit-slider-track {
  border-radius: 0;
  background: rgba(8, 2, 3, 0.85);
  height: 4px;
}

.gothic-slider::-webkit-slider-thumb {
  border-radius: 0;
  width: 14px;
  height: 14px;
  background: var(--crimson-red, #dc143c);
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.55);
  margin-top: -5px;
  border: 1px solid var(--crimson-red, #dc143c);
}

.gothic-slider::-moz-range-track {
  border-radius: 0;
  background: rgba(8, 2, 3, 0.85);
  height: 4px;
  border: none;
}

.gothic-slider::-moz-range-thumb {
  border-radius: 0;
  width: 14px;
  height: 14px;
  background: var(--crimson-red, #dc143c);
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.55);
  border: 1px solid var(--crimson-red, #dc143c);
}

.gothic-slider:hover::-webkit-slider-thumb,
.gothic-slider:hover::-moz-range-thumb {
  background: var(--accent-red, #ff0033);
  box-shadow: 0 0 18px rgba(255, 0, 51, 0.75);
}

.volume-value,
.value-display {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  color: var(--crimson-red, #dc143c);
  letter-spacing: 1.5px;
  font-size: 11.5px;
}

.help-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(232, 226, 212, 0.55);
  margin-top: 6px;
}

/* =========================================================================
   10. ACTION BUTTONS — square corners, mono letterspaced labels
   ========================================================================= */
.action-btn {
  border-radius: 0;
  border-width: 1px;
  font-family: var(--font-display, 'Trajan Pro', 'Cormorant Garamond', serif);
  font-size: 11px;
  letter-spacing: 4px;
  padding: 13px 18px;
}

.clear-btn {
  background: transparent;
  border-color: rgba(220, 20, 60, 0.5);
  color: var(--bone, #e8e2d4);
}

.clear-btn:hover {
  background: rgba(220, 20, 60, 0.12);
  border-color: var(--crimson-red, #dc143c);
  color: var(--white, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 20, 60, 0.3);
}

.stop-btn {
  background: rgba(220, 20, 60, 0.18);
  border-color: var(--crimson-red, #dc143c);
  color: var(--white, #ffffff);
}

.stop-btn:hover {
  background: var(--crimson-red, #dc143c);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(220, 20, 60, 0.5);
}

.delete-data-btn {
  background: rgba(139, 0, 0, 0.25);
  border-color: rgba(139, 0, 0, 0.6);
  color: var(--ember, #ff5a3c);
}

.delete-data-btn:hover {
  background: rgba(139, 0, 0, 0.55);
  border-color: var(--blood-red, #8b0000);
  color: var(--white, #ffffff);
  box-shadow: 0 6px 22px rgba(139, 0, 0, 0.5);
}

/* =========================================================================
   11. EMPTY STATE — codex lede aesthetic
   ========================================================================= */
.empty-state {
  color: rgba(232, 226, 212, 0.6);
}

.empty-state i {
  font-size: 3.5rem;
  color: rgba(220, 20, 60, 0.35);
  margin-bottom: 24px;
  filter: drop-shadow(0 0 18px rgba(220, 20, 60, 0.3));
}

.empty-state p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0;
  color: var(--bone, #e8e2d4);
  max-width: 480px;
  line-height: 1.5;
}

/* =========================================================================
   12. CHAT MESSAGE BUBBLES — codex left-rule aesthetic
   ========================================================================= */
.message-bubble {
  border-radius: 2px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

/* User message — crimson tinted, left-rule */
.message-bubble.user {
  background: rgba(220, 20, 60, 0.16);
  border: 1px solid rgba(220, 20, 60, 0.4);
  border-right: 3px solid var(--crimson-red, #dc143c);
  border-bottom-right-radius: 2px;
  color: var(--white, #ffffff);
  box-shadow: 0 4px 18px rgba(220, 20, 60, 0.18);
}

/* AI message — dark, left-rule mirror */
.message-bubble.ai {
  background: rgba(8, 2, 3, 0.7);
  border: 1px solid rgba(220, 20, 60, 0.2);
  border-left: 3px solid var(--crimson-red, #dc143c);
  border-bottom-left-radius: 2px;
  color: var(--bone, #e8e2d4);
}

.message-content {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
  font-family: var(--font-display, 'Trajan Pro', 'Cormorant Garamond', serif);
  color: var(--white, #ffffff);
  letter-spacing: 1px;
  margin-top: 16px;
  margin-bottom: 10px;
}

.message-content blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05em;
  border-left: 2px solid var(--crimson-red, #dc143c);
  padding-left: 16px;
  color: rgba(232, 226, 212, 0.85);
}

.message-content pre {
  border-radius: 2px;
  background: rgba(3, 0, 1, 0.92);
  border: 1px solid rgba(220, 20, 60, 0.25);
}

.message-content code {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

.message-content :not(pre) > code,
.message-content p code,
.message-content li code {
  border-radius: 1px;
  background: rgba(220, 20, 60, 0.18);
  color: var(--ember, #ff5a3c);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.9em;
  padding: 1px 5px;
}

.message-content img {
  border-radius: 2px;
  border: 1px solid rgba(220, 20, 60, 0.3);
}

.message-content table {
  border: 1px solid rgba(220, 20, 60, 0.3);
}

.message-content table th {
  background: rgba(220, 20, 60, 0.18);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.message-content a {
  color: var(--crimson-red, #dc143c);
  border-bottom: 1px solid rgba(220, 20, 60, 0.4);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.message-content a:hover {
  color: var(--accent-red, #ff0033);
  border-bottom-color: var(--accent-red, #ff0033);
}

/* =========================================================================
   13. TYPING INDICATOR — sharper frame
   ========================================================================= */
.typing-indicator {
  border-radius: 2px;
  border: 1px solid rgba(220, 20, 60, 0.25);
  border-left: 3px solid var(--crimson-red, #dc143c);
  background: rgba(8, 2, 3, 0.7);
}

/* =========================================================================
   14. MESSAGE INPUT — codex bar aesthetic
   ========================================================================= */
.message-input-container {
  background: rgba(8, 2, 3, 0.95);
  border-top: 1px solid rgba(220, 20, 60, 0.3);
}

.input-wrapper {
  border-radius: 2px;
  background: rgba(3, 0, 1, 0.7);
  border: 1px solid rgba(220, 20, 60, 0.35);
  padding: 12px 14px;
}

.input-wrapper:focus-within {
  border-color: var(--crimson-red, #dc143c);
  box-shadow: 0 0 24px rgba(220, 20, 60, 0.35);
}

.message-input {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 14.5px;
  color: var(--bone, #e8e2d4);
  line-height: 1.55;
}

.message-input::placeholder {
  color: rgba(232, 226, 212, 0.4);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
}

/* =========================================================================
   15. SEND BUTTON — square crimson, no rotate-on-hover
   ========================================================================= */
.send-button {
  border-radius: 2px;
  background: var(--gradient-red, linear-gradient(135deg, #8b0000 0%, #dc143c 50%, #ff0033 100%));
  width: 40px;
  height: 40px;
  border: 1px solid rgba(220, 20, 60, 0.5);
  box-shadow: 0 0 14px rgba(220, 20, 60, 0.3);
}

.send-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(220, 20, 60, 0.55);
  border-color: var(--accent-red, #ff0033);
}

/* =========================================================================
   16. PANEL COLLAPSE / EXPAND BUTTONS — square corners
   ========================================================================= */
.panel-collapse-btn,
.panel-expand-btn {
  background: rgba(8, 2, 3, 0.92);
  border: 1px solid rgba(220, 20, 60, 0.55);
  color: var(--crimson-red, #dc143c);
}

.panel-collapse-btn.left-collapse,
.panel-expand-btn.left-expand {
  border-radius: 0 2px 2px 0;
}

.panel-collapse-btn.right-collapse,
.panel-expand-btn.right-expand {
  border-radius: 2px 0 0 2px;
}

.panel-collapse-btn:hover,
.panel-expand-btn:hover {
  background: var(--crimson-red, #dc143c);
  color: var(--white, #ffffff);
  border-color: var(--accent-red, #ff0033);
  box-shadow: 0 0 18px rgba(220, 20, 60, 0.5);
}

/* =========================================================================
   17. MOBILE — circular brand-mark buttons → square codex stamps
   ========================================================================= */
.mobile-menu-btn {
  border-radius: 2px;
  background: rgba(8, 2, 3, 0.95);
  border: 1px solid var(--crimson-red, #dc143c);
  color: var(--crimson-red, #dc143c);
  width: 48px;
  height: 48px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

.mobile-menu-btn:hover {
  background: var(--crimson-red, #dc143c);
  color: var(--white, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(220, 20, 60, 0.5);
}

/* =========================================================================
   18. MOBILE MODALS — codex frame
   ========================================================================= */
.mobile-modal {
  background: rgba(3, 0, 1, 0.98);
  border-width: 1px;
  border-color: rgba(220, 20, 60, 0.5);
  box-shadow: 0 0 60px rgba(220, 20, 60, 0.4);
}

.mobile-modal.left-modal {
  border-right: 1px solid var(--crimson-red, #dc143c);
}

.mobile-modal.right-modal {
  border-left: 1px solid var(--crimson-red, #dc143c);
}

.mobile-modal-header {
  background: rgba(8, 2, 3, 0.98);
  border-bottom: 1px solid rgba(220, 20, 60, 0.4);
  padding: 22px 24px;
}

.mobile-modal-title {
  font-family: var(--font-display, 'Trajan Pro', 'Cormorant Garamond', serif);
  font-size: 1.05rem;
  letter-spacing: 4px;
  color: var(--white, #ffffff);
  text-shadow: 0 0 18px rgba(220, 20, 60, 0.3);
}

.mobile-modal-close {
  border-radius: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--crimson-red, #dc143c);
}

.mobile-modal-close:hover {
  transform: none;
  background: var(--crimson-red, #dc143c);
  box-shadow: 0 0 18px rgba(220, 20, 60, 0.5);
}

/* =========================================================================
   19. INLINE MESSAGE IMAGES — codex-thin frame
   ========================================================================= */
.message-image-wrapper,
.message-image {
  border-radius: 2px;
}

.message-image-wrapper {
  border: 1px solid rgba(220, 20, 60, 0.3);
}

.message-image-wrapper:hover {
  border-color: var(--crimson-red, #dc143c);
  box-shadow: 0 6px 22px rgba(220, 20, 60, 0.4);
}

/* =========================================================================
   20. IMAGE OVERLAY — codex framing
   ========================================================================= */
.image-overlay-image {
  border-radius: 2px;
  border: 1px solid rgba(220, 20, 60, 0.4);
  box-shadow: 0 0 60px rgba(220, 20, 60, 0.45);
}

.image-overlay-close {
  border-radius: 0;
  width: 44px;
  height: 44px;
  background: rgba(8, 2, 3, 0.92);
  border: 1px solid var(--crimson-red, #dc143c);
}

.image-overlay-close:hover {
  transform: none;
  background: var(--crimson-red, #dc143c);
  box-shadow: 0 0 22px rgba(220, 20, 60, 0.6);
}

/* =========================================================================
   21. SLASH AUTOCOMPLETE — codex dropdown frame
   ========================================================================= */
.slash-autocomplete {
  background: rgba(3, 0, 1, 0.97);
  border: 1px solid rgba(220, 20, 60, 0.4);
  border-radius: 2px;
  box-shadow:
    0 -8px 32px rgba(220, 20, 60, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* =========================================================================
   22. PANEL SCROLLBARS — match the redesign global treatment
   ========================================================================= */
.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: rgba(220, 20, 60, 0.55);
}