/* Updated CSS: Dark Apple-like Grok-inspired design - Sleek, minimal, dark theme with subtle shades, rounded elements, and high contrast */
/* New enhancement: Transformed #resizeNotch from full-height bar to a compact, rounded "middle node" handle—small pill-shaped (40px tall, 8px wide, fully rounded ends) absolutely positioned in the vertical center of #chatPanel for a subtler, less obtrusive resize grip. Retained drag/hover feedback; positioned to overlap the panel's left edge seamlessly without affecting layout flow. Adjusted #chatPanel to relative for absolute child positioning. */
#chatWrapper {
  position: fixed;
  right: 0;
  left: auto;
  display: flex;
  flex-direction: row;
  z-index: 1000;
}

/* Resize Notch/Handle (Now a small, rounded middle node: Compact pill grip, vertically centered on panel edge, click to toggle, drag to resize) */
/* Updated #resizeNotch: Set default background to the lighter gray (#2a2a2a) for a consistently "hovered" subtle look; hover now matches for seamless feel (or adjust to #3a3a3a if you want more lift); active stays as-is for drag feedback. */
#resizeNotch {
  width: 8px;
  height: 40px; /* Small, node-like height instead of full 100vh */
  background: #2a2a2a; /* Default now the lighter gray (previously hover-only) */
  cursor: col-resize;
  flex-shrink: 0; /* Fixed size, but now absolute so flex less relevant */
  display: flex;
  align-items: center; /* Center grip vertically within node */
  justify-content: center;
  transition: background 0.2s ease, transform 0.1s ease; /* Added subtle scale for hover */
  position: absolute; /* Absolute to #chatPanel for middle positioning */
  left: -4px; /* Slight overlap left of panel border for edge-hug */
  top: 50%; /* Vertical center */
  transform: translateY(-50%); /* Precise middle alignment */
  border-radius: 4px; /* Fully rounded ends for pill/node shape (half of 8px width) */
  z-index: 1001; /* Above panel content */
}

#resizeNotch:hover {
  background: #2a2a2a; /* Matches default for no-change (or swap to #3a3a3a for subtle lift if desired) */
  transform: translateY(-50%) scale(1.1); /* Micro-expand for grab feedback */
}

#resizeNotch::before {
  content: '⋮'; /* Simplified single grip dot for small node (was '⋮⋮') */
  font-size: 12px;
  color: #8e8e92; /* Muted grey for grip */
  line-height: 1; /* Tighten vertical fit */
}

#resizeNotch:active {
  background: #2a2a2a; /* Drag feedback (matches new default) */
  transform: translateY(-50%) scale(1.05); /* Subtle press */
}
/* Chat Panel Styles (Right-side, Resizable Width, Dark like Grok/Apple dark mode) */
#chatPanel {
  width: 400px; /* Default open width */
  height: 100vh;
  background: #151515; /* Matched to header/toolbar */
  border-left: 1px solid #333; /* Matches header border */
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2); /* Adjusted shadow to match toolbar */
  display: flex;
  flex-direction: column;
  flex: 0 0 auto; /* Don't grow/shrink beyond width */
  overflow: hidden; /* Hide content when collapsed */
  transition: width 0.2s ease; /* Smooth open/close/resize */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Apple-like system font */
  position: relative; /* For absolute positioning of #resizeNotch inside/against it */
}

#chatHeader {
  padding: 16px;
  border-bottom: 1px solid #333; /* Matches header border */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600; /* Semi-bold for Apple feel */
  color: #f5f5f7; /* Off-white text for contrast */
  background: #2a2a2a; /* Matched to toolbar inputs/buttons */
  flex-shrink: 0;
  cursor: pointer; /* Hint clickable */
  transition: background 0.2s ease;
}

#chatHeader:hover {
  background: #3a3a3a; /* Subtle hover lift, matching toolbar hover */
}

#chatMessages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #151515; /* Matched to header/toolbar */
  display: flex;
  flex-direction: column;
  direction: rtl; /* Flip for left scrollbar */
  /* Custom scrollbar for Apple-like dark mode */
  scrollbar-width: thin;
  scrollbar-color: #48484a #1a1a1a;
}

#chatMessages::-webkit-scrollbar {
  width: 6px;
}

#chatMessages::-webkit-scrollbar-track {
  background: #1a1a1a;
}

#chatMessages::-webkit-scrollbar-thumb {
  background: #48484a;
  border-radius: 3px;
}

/* Flip messages back to LTR for natural text flow */
.message {
  margin-bottom: 16px; /* Increased to 16px for at least 10px spacing between elements (vertical gap) */
  padding: 10px 14px;
  border-radius: 18px; /* Softer, Apple-like rounds */
  max-width: 85%;
  width: auto; /* Dynamic width based on content length */
  min-width: 0; /* Allow shrinking below content if needed, but auto handles */
  word-wrap: break-word;
  white-space: pre-wrap; /* Ensures proper wrapping and preserves newlines */
  font-size: 14px;
  line-height: 1.4; /* Improved readability */
  transition: opacity 0.2s ease; /* Removed width/height transitions to prevent lag during streaming; JS handles sizing explicitly */
  box-sizing: border-box; /* Ensures padding doesn't affect max-width */
  min-height: 1em; /* Prevents zero-height empty messages */
  max-height:auto;
  align-self: flex-start; /* Default left alignment for consistency */
  display: inline-block; /* Allows natural width based on content */
  direction: ltr; /* Restore LTR text */
  height: auto; /* Dynamic height based on content */
  overflow: hidden; /* Prevent text overflow; JS ensures size fits */
  display: inline-table;
}

.user-message {
  background: #ffffff;
  color: #000000;
  border: 1px solid #444;   /* subtle for the white bubble */
}

.ai-message {
  background: #2a2a2a;        /* same as CLEAR button */
  border: 1px solid #444;      /* match CLEAR button border */
  color: #f5f5f7;              /* same text color */
  margin-right: auto;
  align-self: flex-start;
  border-radius: 18px;
}

#chatInputContainer {
  position: relative; /* For absolute positioning of button inside */
  padding: 8px 16px; /* Symmetric minimal padding for seamless flow and centering (as in working old version) */
  border-top: none; /* No lower box/border */
  display: flex;
  gap: 0; /* No gap between input and button */
  background: transparent; /* No box background */
  flex-shrink: 0;
  align-items: center; /* Center align for single/multi-line vertical harmony (reverted from flex-start to match old good positioning) */
}

#chatInput {
  flex: 1;
  position: relative; /* Fallback if needed */
  padding: 16px 52px 16px 16px; /* Increased top/bottom to 16px for anti-clipping buffer (full text visible); reduced right to 52px for tighter text-button spacing without gap/extrusion */
  border: 1px solid #444; /* Matches toolbar input border */
  border-radius: 26px; /* Enhanced for ultra-circular ends */
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  background: #2a2a2a; /* Matched to toolbar inputs */
  color: #f5f5f7; /* Off-white text */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px; /* Grok-inspired taller pill for better touch/feel */
  height: auto; /* Allow JS auto-resize */
  box-sizing: border-box;
  line-height: 1.4; /* Matches message line-height */
  max-height: 120px; /* Limit expansion */
}

#chatInput:focus {
  border-color: #007aff; /* Blue focus ring */
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2); /* Apple-style glow */
}

#chatInput::placeholder {
  color: #8e8e92; /* Muted placeholder */
}

#sendBtn {
  position: absolute; /* Position inside the input container */
  right: 20px; /* Adjusted inward from 16px for better horizontal centering in pill end (less "outside" feel, no overlap) */
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff; /* White circle restored for visibility */
  color: #000000; /* Black arrow for contrast */
  border: none;
  border-radius: 50%; /* Perfect circle */
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s ease, transform 0.1s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow to pop against input without blending */
  flex-shrink: 0; /* Keep button fixed height */
  z-index: 1; /* Ensure above input text */
}

#sendBtn:hover {
  background: #f5f5f7; /* Off-white hover */
  transform: translateY(-50%) scale(1.05); /* Micro-interaction, preserve Y translate */
}

#sendBtn:active {
  transform: translateY(-50%) scale(0.98); /* Press feedback */
}

/* --- CHAT BUTTON INSIDE TOP TOOLBAR --- */

/* CHAT BUTTON — EXACT SAME STYLE AS CLEAR BUTTON */

#chatToolbarBtn {
  padding: 6px 16px;
  border-radius: 999px;

  background: #2a2a2a;               /* same as CLEAR */
  border: 1px solid #444;
  color: #f5f5f7;

  font-size: 13px;
  font-weight: 400;

  cursor: pointer;
  flex-shrink: 0;

  box-shadow: none;                   /* CLEAR has no shadow */
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* hover — same subtle lightening as CLEAR */
#chatToolbarBtn:hover {
  background: #323232;               /* tiny brightness bump */
  border-color: #555;
}

/* active — tiny dark press, same as CLEAR */
#chatToolbarBtn:active {
  background: #292929;
  border-color: #444;
}


/* Optional: hide when chat is open */
.chat-open #chatToolbarBtn {
  opacity: 0.3;
  pointer-events: none;
}

/* ──────────────────────────────────────────────── */
/* LIGHT THEME OVERRIDES                          */
/* Apply when <html data-theme="light">           */
/* ──────────────────────────────────────────────── */

:root[data-theme="light"] #chatPanel {
  background: #f5f5f7;
  border-left: 1px solid #ddd;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] #resizeNotch {
  background: #e0e0e0;
}

:root[data-theme="light"] #resizeNotch:hover,
:root[data-theme="light"] #resizeNotch:active {
  background: #d0d0d0;
}

:root[data-theme="light"] #resizeNotch::before {
  color: #888;
}

:root[data-theme="light"] #chatHeader {
  background: #ffffff;
  border-bottom: 1px solid #ddd;
  color: #111111;
}

:root[data-theme="light"] #chatHeader:hover {
  background: #f0f0f0;
}

:root[data-theme="light"] #chatMessages {
  background: #f5f5f7;
  scrollbar-color: #b0b0b0 #f0f0f0;
}

:root[data-theme="light"] #chatMessages::-webkit-scrollbar-track {
  background: #f0f0f0;
}

:root[data-theme="light"] #chatMessages::-webkit-scrollbar-thumb {
  background: #b0b0b0;
}

:root[data-theme="light"] .user-message {
  background: #007aff;
  color: #ffffff;
  border-color: #007aff;
}

:root[data-theme="light"] .ai-message {
  background: #ffffff;
  border-color: #dddddd;
  color: #111111;
}

:root[data-theme="light"] #chatInputContainer {
  background: #f5f5f7;
}

:root[data-theme="light"] #chatInput {
  background: #ffffff;
  color: #111111;
  border-color: #cccccc;
}

:root[data-theme="light"] #chatInput:focus {
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.18);
}

:root[data-theme="light"] #chatInput::placeholder {
  color: #999999;
}

:root[data-theme="light"] #sendBtn {
  background: #007aff;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

:root[data-theme="light"] #sendBtn:hover {
  background: #0f8bff;
}

:root[data-theme="light"] #sendBtn:active {
  background: #0060d6;
}

:root[data-theme="light"] #chatToolbarBtn {
  background: #f0f0f0;
  border-color: #cccccc;
  color: #111111;
}

:root[data-theme="light"] #chatToolbarBtn:hover {
  background: #e5e5e5;
  border-color: #bbbbbb;
}

:root[data-theme="light"] #chatToolbarBtn:active {
  background: #dddddd;
  border-color: #bbbbbb;
}