/* ==========================================================
   QuickStand QuickAI Widget — widget.css
   Scope: ONLY .qsai-* selectors (no global resets)
   ========================================================== */

/* ---------- Theme tokens (scoped) ---------- */
.qsai-root{
  --qsai-bg: #ffffff;
  --qsai-surface: #ffffff;
  --qsai-text: #003366;
  --qsai-muted: rgba(0, 51, 102, 0.65);
  --qsai-border: rgba(0, 51, 102, 0.12);
  --qsai-border-strong: rgba(0, 51, 102, 0.18);

  --qsai-primary: #0094FF;
  --qsai-primary-2: #6fa7ff;

  --qsai-assistant: #f3f8ff;
  --qsai-user: #2d89ef;

  --qsai-radius: 16px;
  --qsai-radius-sm: 12px;

  --qsai-shadow: 0 10px 30px rgba(0,0,0,0.18);
  --qsai-shadow-soft: 0 6px 18px rgba(0,0,0,0.12);

  --qsai-focus: 0 0 0 3px rgba(0,148,255,0.25);

  --qsai-panel-w: 372px;
  --qsai-panel-h: 520px;

  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483001;
  pointer-events: none; /* allow only widget parts to be interactive */
}

/* Ensure only widget elements can receive input */
.qsai-root > *{
  pointer-events: auto;
}

/* ---------- Floating Action Button (keep existing look) ---------- */
.qsai-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #6fa7ff;
  box-shadow: var(--qsai-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
  z-index: 2147483001;

  -webkit-tap-highlight-color: transparent;
}

.qsai-fab:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0,0,0,0.22);
}

.qsai-fab:active{
  transform: translateY(0) scale(0.98);
}

.qsai-fab:focus-visible{
  outline: none;
  box-shadow: var(--qsai-shadow), var(--qsai-focus);
}

.qsai-fab img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}

/* ---------- Panel ---------- */
.qsai-panel{
  position: fixed;
  right: 16px;
  bottom: 84px; /* sits above FAB */
  width: var(--qsai-panel-w);
  height: var(--qsai-panel-h);
  max-height: calc(100dvh - 120px);
  background: var(--qsai-surface);
  color: var(--qsai-text);
  border: 1px solid var(--qsai-border);
  border-radius: var(--qsai-radius);
  box-shadow: var(--qsai-shadow-soft);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  transform-origin: 100% 100%;
  transform: translateY(10px) scale(0.97);
  opacity: 1;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2,.9,.2,1),
    box-shadow 180ms ease;

  isolation: isolate; /* keep effects contained */
  contain: layout paint style; /* reduce accidental bleed */
}

.qsai-panel:hover{
  box-shadow: var(--qsai-shadow);
}

/* Hidden state (smooth scale/fade) */
.qsai-panel.qsai-hidden{
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  pointer-events: none;
}

/* ---------- Header ---------- */
.qsai-header{
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 16px;
  background: linear-gradient(to bottom, rgba(111,167,255,0.18), rgba(255,255,255,0));
  border-bottom: 1px solid var(--qsai-border);
}

.qsai-title{
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qsai-title::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qsai-primary);
  box-shadow: 0 0 0 3px rgba(0,148,255,0.16);
  display: inline-block;
}

.qsai-mode{
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--qsai-border-strong);
  background: rgba(0,148,255,0.08);
  color: var(--qsai-text);
  line-height: 1;
  white-space: nowrap;
}

/* Mode color variants */
.qsai-mode[data-mode="support"]{
  background: rgba(0,148,255,0.10);
  border-color: rgba(0,148,255,0.25);
}

.qsai-mode[data-mode="stand"]{
  background: rgba(0, 170, 90, 0.12);
  border-color: rgba(0, 170, 90, 0.28);
}

.qsai-mode[data-mode="visitor"]{
  background: rgba(140, 90, 255, 0.12);
  border-color: rgba(140, 90, 255, 0.28);
}

.qsai-mode[data-mode="admin"]{
  background: rgba(255, 90, 90, 0.12);
  border-color: rgba(255, 90, 90, 0.28);
}

.qsai-close{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(0,0,0,0.02);
  color: var(--qsai-text);
  cursor: pointer;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
  padding: 0;
  transition: background 160ms ease, transform 120ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.qsai-close:hover{
  background: rgba(0,148,255,0.10);
  border-color: rgba(0,148,255,0.22);
  transform: scale(1.03);
}

.qsai-close:active{
  transform: scale(0.96);
}

.qsai-close:focus-visible{
  outline: none;
  box-shadow: var(--qsai-focus);
}

/* ---------- Messages ---------- */
.qsai-messages{
  flex: 1 1 auto;
  padding: 14px 12px 12px;
  overflow: auto;
  overscroll-behavior: contain;

  display: flex;
  flex-direction: column;
  gap: 10px;

  background:
    radial-gradient(1200px 500px at 100% 0%, rgba(0,148,255,0.08), rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(237,247,255,0.65), rgba(255,255,255,1) 45%);
}

/* Scrollbar styling */
.qsai-messages{
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 51, 102, 0.25) transparent;
}

.qsai-messages::-webkit-scrollbar{
  width: 10px;
}

.qsai-messages::-webkit-scrollbar-track{
  background: transparent;
}

.qsai-messages::-webkit-scrollbar-thumb{
  background: rgba(0, 51, 102, 0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.qsai-messages::-webkit-scrollbar-thumb:hover{
  background: rgba(0, 51, 102, 0.28);
  border: 3px solid transparent;
  background-clip: padding-box;
}

.qsai-message{
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;

  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid var(--qsai-border);

  animation: qsai-pop 180ms ease-out;
}

@keyframes qsai-pop{
  from{ transform: translateY(6px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.qsai-message-user{
  align-self: flex-end;
  background: linear-gradient(135deg, var(--qsai-user), #1d6fd1);
  color: #ffffff;
  border-color: rgba(255,255,255,0.10);
  border-bottom-right-radius: 8px;
  box-shadow: 0 6px 18px rgba(45,137,239,0.22);
}

.qsai-message-assistant{
  align-self: flex-start;
  background: var(--qsai-assistant);
  color: var(--qsai-text);
  border-bottom-left-radius: 8px;
}

/* Slightly reduce bubble width on very long messages */
.qsai-message-user,
.qsai-message-assistant{
  max-width: min(82%, 300px);
}

/* ---------- Status ---------- */
.qsai-status{
  padding: 8px 14px 0;
  min-height: 22px;
  font-size: 12px;
  color: var(--qsai-muted);
}

/* ---------- Composer (sticky bottom) ---------- */
.qsai-composer{
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--qsai-border);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  position: sticky;
  bottom: 0;
}

.qsai-textarea{
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  border-radius: 12px;
  border: 1px solid var(--qsai-border-strong);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  color: var(--qsai-text);
  background: #ffffff;
  box-sizing: border-box;

  transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.qsai-textarea::placeholder{
  color: rgba(0, 51, 102, 0.45);
}

.qsai-textarea:focus{
  outline: none;
  border-color: rgba(0,148,255,0.55);
  box-shadow: var(--qsai-focus);
}

.qsai-send{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,148,255,0.25);
  background: linear-gradient(135deg, var(--qsai-primary), #1d6fd1);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
  box-shadow: 0 6px 18px rgba(0,148,255,0.25);
  -webkit-tap-highlight-color: transparent;
}

.qsai-send:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,148,255,0.28);
}

.qsai-send:active{
  transform: translateY(0);
}

.qsai-send:focus-visible{
  outline: none;
  box-shadow: 0 6px 18px rgba(0,148,255,0.25), var(--qsai-focus);
}

/* Disabled state (loading) */
.qsai-textarea:disabled{
  background: rgba(0,0,0,0.03);
  color: rgba(0, 51, 102, 0.55);
  border-color: var(--qsai-border);
  box-shadow: none;
  cursor: not-allowed;
}

.qsai-send:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------- Dark mode (optional) ---------- */
@media (prefers-color-scheme: dark){
  .qsai-root{
    --qsai-bg: #0b1220;
    --qsai-surface: #0f1a2e;
    --qsai-text: #e7efff;
    --qsai-muted: rgba(231,239,255,0.7);
    --qsai-border: rgba(231,239,255,0.12);
    --qsai-border-strong: rgba(231,239,255,0.18);

    --qsai-assistant: rgba(255,255,255,0.06);
    --qsai-user: #2d89ef;

    --qsai-shadow: 0 14px 40px rgba(0,0,0,0.55);
    --qsai-shadow-soft: 0 10px 30px rgba(0,0,0,0.45);

    --qsai-focus: 0 0 0 3px rgba(0,148,255,0.32);
  }

  .qsai-panel{
    background: var(--qsai-surface);
    border-color: var(--qsai-border);
  }

  .qsai-header{
    background: linear-gradient(to bottom, rgba(111,167,255,0.14), rgba(15,26,46,0));
    border-bottom-color: var(--qsai-border);
  }

  .qsai-close{
    background: rgba(255,255,255,0.04);
    color: var(--qsai-text);
  }

  .qsai-close:hover{
    background: rgba(0,148,255,0.18);
    border-color: rgba(0,148,255,0.28);
  }

  .qsai-messages{
    background:
      radial-gradient(1200px 500px at 100% 0%, rgba(0,148,255,0.14), rgba(15,26,46,0) 60%),
      linear-gradient(to bottom, rgba(11,18,32,0.35), rgba(15,26,46,1) 55%);
  }

  .qsai-message{
    border-color: var(--qsai-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }

  .qsai-message-assistant{
    background: var(--qsai-assistant);
  }

  .qsai-composer{
    background: rgba(15,26,46,0.85);
    border-top-color: var(--qsai-border);
  }

  .qsai-textarea{
    background: rgba(255,255,255,0.04);
    border-color: var(--qsai-border-strong);
    color: var(--qsai-text);
  }

  .qsai-textarea::placeholder{
    color: rgba(231,239,255,0.45);
  }

  .qsai-textarea:disabled{
    background: rgba(255,255,255,0.03);
    color: rgba(231,239,255,0.55);
  }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .qsai-panel,
  .qsai-fab,
  .qsai-close,
  .qsai-send,
  .qsai-message{
    transition: none !important;
    animation: none !important;
  }
}

/* =======================================================================
   RESPONSIVE (FINAL, BEREINIGT) — Mobile kleiner + Ultra-Small 320–360px
   Scope: nur .qsai-* Selektoren | keine Duplikate
======================================================================= */

/* -----------------------------------------------------------------------
   MOBILE SMALL — max-width: 480px
   Ziel: kompakter (Panel + FAB + Typo + Abstände), stabil ab 320px
----------------------------------------------------------------------- */
@media (max-width: 480px){

  .qsai-root{
    right: 8px;
    bottom: 8px;
  }

  .qsai-fab{
    right: 8px;
    bottom: 8px;
    width: 48px;
    height: 48px;
  }

  .qsai-fab img{
    width: 21px;
    height: 21px;
  }

  .qsai-panel{
    left: 8px;
    right: 8px;
    bottom: 64px;
    width: auto;
    height: min(72dvh, 520px);
    max-height: calc(100dvh - 90px);
    border-radius: 14px;
  }

  .qsai-header{
    height: 50px;
    min-height: 50px;
    padding: 0 10px;
    gap: 10px;
  }

  .qsai-title{
    font-size: 14px;
  }

  .qsai-mode{
    font-size: 11px;
    padding: 3px 7px;
  }

  .qsai-close{
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 30px;
  }

  .qsai-messages{
    padding: 10px 10px 10px;
    gap: 8px;
  }

  .qsai-message{
    font-size: 13px;
    padding: 9px 11px;
  }

  .qsai-message-user,
  .qsai-message-assistant{
    max-width: min(88%, 460px);
  }

  .qsai-status{
    padding: 6px 12px 0;
    font-size: 11px;
    min-height: 18px;
  }

  .qsai-composer{
    padding: 8px 10px 10px;
    gap: 8px;
  }

  .qsai-textarea{
    font-size: 15px; /* iOS-safe */
    min-height: 40px;
    max-height: 96px;
    padding: 9px 11px;
  }

  .qsai-send{
    height: 40px;
    font-size: 14px;
    padding: 0 12px;
  }
}

/* -----------------------------------------------------------------------
   MOBILE LARGE — max-width: 767px
   Ziel: auch große Phones etwas schlanker
----------------------------------------------------------------------- */
@media (max-width: 767px){

  .qsai-root{
    --qsai-panel-w: min(360px, 90vw);
    --qsai-panel-h: 500px;
  }

  .qsai-message{
    font-size: 13.5px;
  }

  .qsai-textarea{
    font-size: 15px;
  }
}

/* -----------------------------------------------------------------------
   TABLET — max-width: 1024px
   Ziel: Tablet nicht "gezoomt", stabile Proportionen
----------------------------------------------------------------------- */
@media (max-width: 1024px){

  .qsai-root{
    --qsai-panel-w: 372px;
    --qsai-panel-h: 520px;
  }

  .qsai-message-user,
  .qsai-message-assistant{
    max-width: min(82%, 380px);
  }
}

/* -----------------------------------------------------------------------
   ULTRA-SMALL — max-width: 360px
   Ziel: extra kompakt für 320–360px
----------------------------------------------------------------------- */
@media (max-width: 360px){

  .qsai-root{
    right: 6px;
    bottom: 6px;
  }

  .qsai-fab{
    right: 6px;
    bottom: 6px;
    width: 46px;
    height: 46px;
  }

  .qsai-fab img{
    width: 20px;
    height: 20px;
  }

  .qsai-panel{
    left: 6px;
    right: 6px;
    bottom: 60px;
    height: min(70dvh, 480px);
    max-height: calc(100dvh - 86px);
    border-radius: 14px;
  }

  .qsai-header{
    height: 48px;
    min-height: 48px;
    padding: 0 8px 0 10px;
    gap: 8px;
  }

  .qsai-title{
    font-size: 13px;
  }

  .qsai-mode{
    font-size: 10px;
    padding: 3px 6px;
  }

  .qsai-close{
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 28px;
    border-radius: 9px;
  }

  .qsai-messages{
    padding: 9px 9px 9px;
    gap: 7px;
  }

  .qsai-message{
    font-size: 12.8px;
    line-height: 1.32;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .qsai-composer{
    padding: 8px 9px 9px;
    gap: 7px;
  }

  .qsai-textarea{
    font-size: 15px; /* iOS-safe */
    min-height: 38px;
    max-height: 90px;
    padding: 8px 10px;
    border-radius: 11px;
  }

  .qsai-send{
    height: 38px;
    padding: 0 11px;
    font-size: 13px;
    border-radius: 11px;
  }

  .qsai-message-user,
  .qsai-message-assistant{
    max-width: min(90%, 420px);
  }
}

/* =======================================================================
   OPTIONAL: MOBILE FULLSCREEN — nur aktiv, wenn .qsai-fullscreen am Panel gesetzt
   (kein JS nötig, serverseitig möglich)
======================================================================= */
@media (max-width: 480px){
  .qsai-panel.qsai-fullscreen{
    left: 6px;
    right: 6px;
    bottom: 6px;
    top: 6px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 16px;
  }

  .qsai-panel.qsai-fullscreen + .qsai-fab{
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 360px){
  .qsai-panel.qsai-fullscreen{
    left: 5px;
    right: 5px;
    bottom: 5px;
    top: 5px;
    border-radius: 14px;
  }
}