/**
 * CM Free / CM Plus – Channel Manager
 * File: public/css/ai_availability_widget.css
 * Author: Viljem Dvojmoč
 * Assistant: Claude
 * Copyright (c) 2026 Viljem Dvojmoč. All rights reserved.
 *
 * Portable, self-theming styles for the AI Docking Port availability
 * widget (chat-thread UI inside an existing floating popover). Reads the
 * host page's own --accent if present (zero-config match), overridable
 * per-install via --ai-widget-accent on the panel element.
 */

.ai-avail-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.ai-avail-thread:empty {
  margin-top: 0;
}

.ai-bubble {
  align-self: flex-start;
  max-width: 90%;
  padding: 7px 11px;
  border-radius: 10px 10px 10px 2px;
  font-size: 13px;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

.ai-bubble-user {
  align-self: flex-end;
  border-radius: 10px 10px 2px 10px;
  background: var(--ai-widget-accent, var(--accent, #378ADD));
  color: #fff;
}

.ai-bubble-ai-success {
  background: rgba(99, 153, 34, 0.15);
  border: 0.5px solid rgba(99, 153, 34, 0.4);
  color: #97C459;
}

.ai-offer-link {
  display: inline-block;
  margin-top: 4px;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
}

.ai-bubble-ai-error {
  background: rgba(226, 75, 74, 0.12);
  border: 0.5px solid rgba(226, 75, 74, 0.4);
  color: #e08a8a;
}

.ai-consent-box {
  align-self: stretch;
  background: rgba(239, 159, 39, 0.12);
  border: 0.5px solid rgba(239, 159, 39, 0.4);
  border-radius: 10px;
  padding: 9px 11px;
}

.ai-consent-text {
  margin: 0 0 8px;
  font-size: 13px;
  color: #FAC775;
}

.ai-consent-actions {
  display: flex;
  gap: 8px;
}

.ai-consent-actions button {
  flex: 1;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 13px;
  cursor: pointer;
  border: none;
}

.ai-btn-yes {
  background: #BA7517;
  color: #fff;
}

.ai-btn-no {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
}

/* Native date-picker icon defaults to black/near-invisible on these dark
   panels - recolour to gold so guests can actually see it. WebKit/Blink
   only (Chrome, Edge, Safari); Firefox has no equivalent pseudo-element,
   color-scheme below is its best-effort fallback (inverts to a lighter,
   not gold, icon there). */
.ai-avail-panel input[type="date"] {
  color-scheme: dark;
}

.ai-avail-panel input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(74%) sepia(84%) saturate(455%) hue-rotate(2deg) brightness(104%) contrast(101%);
  cursor: pointer;
}

/* Light-mode host pages: override via data-ai-widget-mode="light" on the panel */
.ai-avail-panel[data-ai-widget-mode="light"] .ai-bubble {
  background: rgba(0, 0, 0, 0.05);
  color: #111;
}

.ai-avail-panel[data-ai-widget-mode="light"] .ai-btn-no {
  color: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.2) !important;
}