/* Dashboard chat shell uses stable AI chatbot iframe template. */

/* v27 white theme shared override */
body[data-page="dashboard"], body { background: #fafafa !important; background-image: none !important; color: #111111 !important; }
.sd-app-shell, .sd-layout-shell, .sd-sl-card-shell, .sd-playground, .sl-card, .sd-studio-sl-card, .sd-modal, .sd-card, .sd-stream-card, .sd-image-generator-card, .sd-plan-card, .sd-chat-shell, .sd-chat-main, .sd-chat-messages, .sd-chat-composer, .sd-chat-history-panel, .sd-ai-user-coins-card, .sd-ai-cloud-modal, .sd-small-modal { background: #ffffff !important; background-image: none !important; border-color: rgba(17,17,17,.08) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #111111 !important; }
.sd-modal-backdrop { background: rgba(250,250,250,.92) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.sd-primary-action, .sd-add-btn.sd-primary-action, .sd-upload-btn.sd-primary-action, .sl-btn, .ss-btn, .sd-chat-send-btn { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; box-shadow: none !important; }
.sd-secondary-action, .sd-add-btn.sd-secondary-action, .sd-upload-btn.sd-secondary-action, .sl-btn-secondary, .ss-btn-secondary, .sd-chat-modal-tools button { background: #ffffff !important; color: #111111 !important; border: 1px solid rgba(17,17,17,.10) !important; box-shadow: none !important; }
input, select, textarea, .sd-native-select, .sd-custom-select-btn { background: #ffffff !important; color: #111111 !important; border-color: rgba(17,17,17,.12) !important; }
p, small, em, .sd-muted, .sd-card-meta, .sd-ai-type, .sd-chat-message-meta, .sd-chat-history-meta { color: rgba(17,17,17,.62) !important; }
h1, h2, h3, strong, b, label, .sd-chat-message, .sd-chat-message-content { color: #111111 !important; }

/* ==========================================================================
   v0.5.1 targeted refinements
   ========================================================================== */
.sai-home-panel {
  width: 100% !important;
}

.sai-stats-grid article {
  box-shadow:
    0 18px 48px rgba(15, 23, 42, .08),
    0 3px 12px rgba(15, 23, 42, .045) !important;
}

.sd-ai-card,
.sd-image-generator-card {
  box-shadow:
    0 16px 42px rgba(15, 23, 42, .075),
    0 2px 10px rgba(15, 23, 42, .04) !important;
}

.sd-ai-card:hover,
.sd-image-generator-card:hover {
  box-shadow:
    0 24px 60px rgba(15, 23, 42, .11),
    0 5px 18px rgba(15, 23, 42, .06) !important;
}

.sd-stream-name {
  color: #000 !important;
}

.sd-stream-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.sd-stream-status {
  color: #000 !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, .075),
    0 2px 8px rgba(15, 23, 42, .04) !important;
}

.sd-chat-history-search {
  height: fit-content !important;
  min-height: 38px !important;
}

/* Global native select style: matches sdStreamFilter with visible arrow */
select,
.sd-native-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 38px !important;
  padding-right: 42px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='rgba(17,17,17,.62)' d='M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
}

/* ========================================================================== 
   SAIUNES v2.0.12 chat history fullscreen behavior
   Desktop fullscreen: conversations sidebar stays visible.
   Mobile fullscreen: conversations stays closed until the user taps history.
   ========================================================================== */
.sai-chat-widget .sd-chat-history-panel[hidden] {
  display: none !important;
}

.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar {
  box-sizing: border-box !important;
  min-height: 540px !important;
}

.sai-chat-widget.sai-chat-fullscreen .sd-chat-shell {
  display: grid !important;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

.sai-chat-widget.sai-chat-fullscreen .sd-chat-history-panel.sai-chat-history-sidebar:not([hidden]) {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  height: min(760px, calc(100vh - 120px)) !important;
  min-height: 540px !important;
  max-height: none !important;
  overflow: hidden !important;
}

.sai-chat-widget.sai-chat-fullscreen .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-list {
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
}

.sai-chat-widget.sai-chat-fullscreen .sd-chat-main {
  min-width: 0 !important;
  min-height: 0 !important;
}

.sai-chat-widget.sai-chat-fullscreen .sd-chat-history-toggle {
  display: none !important;
}

@media (max-width: 980px) {
  .sai-chat-widget.sai-chat-fullscreen .sd-chat-shell {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .sai-chat-widget.sai-chat-fullscreen .sd-chat-history-toggle {
    display: inline-grid !important;
    place-items: center !important;
  }

  .sai-chat-widget.sai-chat-fullscreen .sd-chat-history-panel.sai-chat-history-sidebar[hidden] {
    display: none !important;
  }

  .sai-chat-widget.sai-chat-fullscreen .sd-chat-history-panel.sai-chat-history-sidebar:not([hidden]) {
    position: absolute !important;
    inset: 74px 12px 12px 12px !important;
    z-index: 60 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
  }
}

/* ========================================================================== 
   SAIUNES v2.0.13 — compact chat history widget polish
   Applies only when the AI chat is open as the floating/widget panel.
   Fullscreen desktop/mobile history rules stay separate.
   ========================================================================== */
.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-shell {
  position: relative !important;
  overflow: visible !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar.sd-open:not([hidden]),
.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar:not([hidden]) {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: 10px !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  z-index: 120 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: min(430px, calc(100dvh - 190px)) !important;
  min-height: 330px !important;
  max-height: 430px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .82)),
    rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(17, 17, 17, .08) !important;
  box-shadow:
    0 22px 55px rgba(15, 23, 42, .16),
    0 2px 8px rgba(15, 23, 42, .05),
    inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(22px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.22) !important;
  color: #111111 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 34px !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-head strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
  color: #111111 !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-head button[aria-label="Close history"] {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(17, 17, 17, .08) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #111111 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-search {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(17, 17, 17, .08) !important;
  background: rgba(250, 250, 250, .92) !important;
  color: #111111 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-list {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 2px 0 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-item {
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(17, 17, 17, .06) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
  box-sizing: border-box !important;
}

.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-item:hover,
.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-item.sd-active {
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08) !important;
}

@media (max-width: 520px) {
  .sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar.sd-open:not([hidden]),
  .sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar:not([hidden]) {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    height: min(390px, calc(100dvh - 160px)) !important;
    min-height: 300px !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }
}


/* ========================================================================== 
   SAIUNES v2.0.17 — chat history as responsive dropdown menu
   No modal, no panel background. The panel opens inside the chat widget.
   ========================================================================== */
.sai-chat-widget .sd-chat-shell {
  position: relative !important;
  overflow: visible !important;
}

.sai-chat-widget .sd-chat-history-panel[hidden] {
  display: none !important;
}

.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar,
.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar.sd-open,
.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar.sd-open:not([hidden]),
.sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar:not([hidden]) {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 180 !important;
  width: min(360px, calc(100% - 16px)) !important;
  min-width: min(280px, calc(100% - 16px)) !important;
  max-width: calc(100% - 16px) !important;
  height: min(460px, calc(100dvh - 170px)) !important;
  min-height: min(340px, calc(100dvh - 170px)) !important;
  max-height: calc(100dvh - 170px) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #111111 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 17, 17, .08) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .10) !important;
}

.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-search {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 17, 17, .10) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-list {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 2px 2px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}

.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-item,
.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-empty {
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 17, 17, .08) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  box-sizing: border-box !important;
}

.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-item:hover,
.sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar .sd-chat-history-item.sd-active {
  background: #f7f7f7 !important;
  border-color: rgba(17, 17, 17, .14) !important;
}

@media (max-width: 640px) {
  .sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar,
  .sai-chat-widget .sd-chat-history-panel.sai-chat-history-sidebar.sd-open,
  .sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar.sd-open:not([hidden]),
  .sai-chat-widget:not(.sai-chat-fullscreen) .sd-chat-history-panel.sai-chat-history-sidebar:not([hidden]) {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: min(430px, calc(100dvh - 150px)) !important;
    min-height: min(320px, calc(100dvh - 150px)) !important;
    max-height: calc(100dvh - 150px) !important;
  }
}