/* DGxOne Chat Overrides — loads AFTER main CSS
   Last updated: 2025-08-19 (v4)
   - Works for BOTH widgets:
     • Legacy (#chatPanel, chips, pills, .btn.small)
     • Modern (.dgx-chat, .dgx-chat-panel, .dgx-chat-send)
   - Strong focus rings, disabled state, hover/press polish
   - Textarea ring + send spinner (.is-busy on legacy or modern)
*/

/* =========================================================
   TOKENS (use fallbacks so we don't overwrite your theme)
   ========================================================= */
:root{
  --ovr-dur: .22s;
  --ovr-ease: cubic-bezier(.2,.7,.2,1);
  /* We DO NOT re-define your --text/--line/--muted/--accent;
     we reference them with safe fallbacks below. */
}

/* Helper mixin (via grouping selectors) */
:root[data-theme="light"] .__light & {}

/* =========================================================
   ACTION CHIPS & PROMPT PILLS
   (legacy: .chat-actions .chip, .chat-prompts .pill)
   (modern: .dgx-chat-head buttons)
   ========================================================= */

/* Base look */
.chat-panel .chat-actions .chip,
.chat-panel .chat-prompts .pill,
.dgx-chat .dgx-chat-head button,
.dgx-chat .dgx-chat-clear,
.dgx-chat .dgx-chat-close {
  all: unset !important;
  display: inline-block !important;
  background: transparent !important;
  color: var(--text, #e6e9ef) !important;
  border: 1px solid var(--line, rgba(255,255,255,.16)) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  font-size: .95rem !important;
  line-height: 1.1 !important;
  transition:
    background var(--ovr-dur) var(--ovr-ease),
    transform var(--ovr-dur) var(--ovr-ease),
    border-color var(--ovr-dur) var(--ovr-ease),
    box-shadow var(--ovr-dur) var(--ovr-ease) !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.chat-panel .chat-actions .chip:hover,
.chat-panel .chat-prompts .pill:hover,
.dgx-chat .dgx-chat-head button:hover,
.dgx-chat .dgx-chat-clear:hover,
.dgx-chat .dgx-chat-close:hover {
  background: rgba(255,255,255,.06) !important;
  transform: translateY(-1px) !important;
}
.chat-panel .chat-actions .chip:active,
.chat-panel .chat-prompts .pill:active,
.dgx-chat .dgx-chat-head button:active,
.dgx-chat .dgx-chat-clear:active,
.dgx-chat .dgx-chat-close:active {
  transform: translateY(0) scale(.98) !important;
}
.chat-panel .chat-actions .chip:focus-visible,
.chat-panel .chat-prompts .pill:focus-visible,
.dgx-chat .dgx-chat-head button:focus-visible,
.dgx-chat .dgx-chat-clear:focus-visible,
.dgx-chat .dgx-chat-close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(94,234,255,.35) !important; /* teal ring */
  border-color: transparent !important;
}

/* Pills look good in both themes (legacy prompts area) */
.chat-panel .chat-prompts .pill {
  border-radius: 999px !important;
  background: #0c1220 !important;
  color: var(--text, #e6e9ef) !important;
}
:root[data-theme="light"] .chat-panel .chat-prompts .pill {
  background: #f3f4f6 !important; color:#0a0c12 !important;
}

/* Selected / pressed state */
.chat-panel .chat-prompts .pill.is-active {
  border-color: var(--accent, #5eeaff) !important;
  box-shadow: 0 0 0 2px rgba(94,234,255,.25) inset !important;
}

/* Disabled state */
.chat-panel .chat-actions .chip[disabled],
.chat-panel .chat-prompts .pill[disabled],
.dgx-chat .dgx-chat-head button[disabled],
.dgx-chat .dgx-chat-clear[disabled],
.dgx-chat .dgx-chat-close[disabled]{
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: grayscale(.2) !important;
}

/* =========================================================
   TEXTAREA (both widgets)
   - legacy: .chat-panel .chat-input textarea
   - modern: .dgx-chat .dgx-chat-input .dgx-chat-text
   ========================================================= */
.chat-panel .chat-input textarea,
.dgx-chat .dgx-chat-input .dgx-chat-text{
  all: unset !important;
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  max-height: 140px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line, rgba(255,255,255,.16)) !important;
  border-radius: 10px !important;
  color: var(--text, #e6e9ef) !important;
  background: rgba(255,255,255,.03) !important;
  white-space: pre-wrap !important;
  resize: none !important;
  transition:
    box-shadow var(--ovr-dur) var(--ovr-ease),
    border-color var(--ovr-dur) var(--ovr-ease) !important;
}
:root[data-theme="light"] .chat-panel .chat-input textarea,
:root[data-theme="light"] .dgx-chat .dgx-chat-input .dgx-chat-text{
  background: #ffffff !important; color:#0a0c12 !important;
  border-color: rgba(0,0,0,.12) !important;
}
.chat-panel .chat-input textarea:focus,
.dgx-chat .dgx-chat-input .dgx-chat-text:focus{
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(94,234,255,.35) !important;
}
.chat-panel .chat-input textarea::placeholder,
.dgx-chat .dgx-chat-input .dgx-chat-text::placeholder{
  color: var(--muted, #9aa4b2) !important;
  opacity: .9 !important;
}

/* =========================================================
   SEND BUTTON (legacy .btn.small AND modern .dgx-chat-send)
   ========================================================= */
.chat-panel .chat-input .btn.small,
.dgx-chat .dgx-chat-input .dgx-chat-send{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5ch !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line, rgba(255,255,255,.16)) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text, #e6e9ef) !important;
  transition:
    transform var(--ovr-dur) var(--ovr-ease),
    box-shadow var(--ovr-dur) var(--ovr-ease),
    background var(--ovr-dur) var(--ovr-ease) !important;
  cursor: pointer !important;
}
:root[data-theme="light"] .dgx-chat .dgx-chat-input .dgx-chat-send,
:root[data-theme="light"] .chat-panel .chat-input .btn.small{
  background: #0b0f18 !important; color:#ffffff !important;
  border-color: transparent !important;
}
.chat-panel .chat-input .btn.small:hover,
.dgx-chat .dgx-chat-input .dgx-chat-send:hover{
  transform: translateY(-1px) !important;
}
.chat-panel .chat-input .btn.small:focus-visible,
.dgx-chat .dgx-chat-input .dgx-chat-send:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(94,234,255,.35) !important;
}

/* Spinner when busy:
   - legacy JS toggles .is-busy on #chatSend
   - modern can toggle .is-busy on .dgx-chat-send (supported here)
*/
.chat-panel .chat-input .btn.small.is-busy,
.dgx-chat .dgx-chat-input .dgx-chat-send.is-busy{
  pointer-events:none !important;
  filter: brightness(.92) !important;
  position: relative !important;
}
.chat-panel .chat-input .btn.small.is-busy::after,
.dgx-chat .dgx-chat-input .dgx-chat-send.is-busy::after{
  content:""; position:absolute; right:10px; top:50%; width:12px; height:12px;
  margin-top:-6px; border-radius:50%;
  border:2px solid rgba(0,0,0,.2); border-top-color:#00131b;
  animation: dgx-spin .8s linear infinite;
}
@keyframes dgx-spin{to{transform:rotate(360deg)}}

/* Disabled send */
.chat-panel .chat-input .btn.small[disabled],
.dgx-chat .dgx-chat-input .dgx-chat-send[disabled]{
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .chat-panel .chat-actions .chip,
  .chat-panel .chat-prompts .pill,
  .chat-panel .chat-input .btn.small,
  .dgx-chat .dgx-chat-head button,
  .dgx-chat .dgx-chat-input .dgx-chat-send{
    transition: none !important;
  }
}