/*
  Genesis Assistant UI (Schiele Operating System)
  Theme: Black + Gold "Mini Computer" screen
  Scope: .ga-root (to avoid theme CSS bleed)
*/

/* =========================
   Design tokens (scoped)
========================= */
.ga-root{
  /* Core palette */
  --ga-bg: #070708;              /* deep black */
  --ga-panel: #0b0b0d;           /* panel base */
  --ga-panel-2: #101015;         /* panel shade */
  --ga-ink: #f7f7fb;             /* primary text */
  --ga-muted: rgba(247,247,251,.72);
  --ga-dim: rgba(247,247,251,.52);

  /* Gold accents */
  --ga-gold: #d4af37;
  --ga-gold-2: #f0c75e;
  --ga-gold-dim: rgba(212,175,55,.55);

  /* Surfaces */
  --ga-surface: rgba(255,255,255,.04);
  --ga-surface-2: rgba(255,255,255,.06);

  /* Shadows */
  --ga-shadow: rgba(0,0,0,.55);

  /* Sizing */
  --ga-radius: 22px;
  --ga-radius-sm: 14px;

  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 999999;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ga-ink);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme hooks kept for back-compat. Still black+gold. */
.ga-root[data-ga-theme="cog"],
.ga-root[data-ga-theme="sna"]{
  /* Intentionally same palette for consistent SaaS look */
}

/* Strong isolation from theme CSS */
.ga-root, .ga-root *{
  box-sizing: border-box !important;
}

/* Reset the most commonly theme-styled elements */
.ga-root button,
.ga-root input,
.ga-root a{
  all: unset !important;
  box-sizing: border-box !important;
}

.ga-root button{ cursor: pointer; }
.ga-root a{ cursor: pointer; text-decoration: none; }

.ga-root button:focus-visible,
.ga-root input:focus-visible,
.ga-root a:focus-visible{
  outline: 3px solid rgba(212,175,55,.38);
  outline-offset: 2px;
}

/* =========================
   Floating button (FAB)
========================= */
.ga-fab{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 18px;

  border: 1px solid var(--ga-gold-dim);
  background:
    radial-gradient(140% 140% at 18% 12%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(16,16,21,.98), rgba(7,7,8,.98));

  box-shadow: 0 18px 44px var(--ga-shadow);
  transform: translateZ(0);
  transition: transform .14s ease, filter .14s ease;
}

.ga-fab:hover{ transform: translateY(-2px); filter: brightness(1.04); }
.ga-fab:active{ transform: translateY(0); }

.ga-fab.is-hidden{ display: none !important; }

.ga-fabDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--ga-gold-2), var(--ga-gold));
  box-shadow:
    0 0 0 3px rgba(212,175,55,.16),
    0 0 18px rgba(240,199,94,.35);
}

.ga-fabText{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--ga-ink);
  font-size: 13px;
}

/* =========================
   Panel (the "mini computer")
========================= */
.ga-panel{
  position: absolute;
  right: 0;
  bottom: 72px;

  width: 410px;
  max-width: calc(100vw - 24px);
  height: 660px;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);

  display: none;
  flex-direction: column;
  overflow: hidden;

  border-radius: var(--ga-radius);
  border: 2px solid var(--ga-gold-dim);

  background:
    radial-gradient(120% 85% at 20% 0%, rgba(240,199,94,.12), transparent 58%),
    radial-gradient(110% 80% at 100% 20%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(180deg, rgba(16,16,21,.98), rgba(7,7,8,.98));

  box-shadow:
    0 32px 88px var(--ga-shadow),
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 50px rgba(212,175,55,.05);

  isolation: isolate;
}

.ga-panel.is-open{ display: flex; }

/* Glass / scanline overlay */
.ga-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.028) 0px,
      rgba(255,255,255,.028) 1px,
      transparent 2px,
      transparent 5px
    );
}

/* Keep content above overlay */
.ga-panel > *{ position: relative; z-index: 1; }

/* =========================
   Header
========================= */
.ga-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 12px 10px;

  border-bottom: 1px solid rgba(212,175,55,.28);
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.20));
}

.ga-headLeft{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ga-avatar{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 1000;

  overflow: hidden;

  color: #0b0b0d;
  background: linear-gradient(135deg, var(--ga-gold), var(--ga-gold-2));
  box-shadow:
    0 12px 26px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.18);
}

.ga-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.ga-title{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: var(--ga-ink);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 270px;
}

.ga-titleSub{
  font-weight: 800;
  color: var(--ga-dim);
  font-size: 12px;
}

.ga-sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ga-muted);
}

.ga-headRight{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ga-iconBtn{
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px;
  display: grid;
  place-items: center;

  border: 1px solid rgba(212,175,55,.55) !important;
  background: rgba(0,0,0,.32) !important;
  color: var(--ga-gold-2) !important;

  transition: transform .14s ease, filter .14s ease, background .14s ease;
}

.ga-iconBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  background: rgba(212,175,55,.10);
}

/* =========================
   Body (messages)
========================= */
.ga-body{
  flex: 1;
  overflow: auto;
  padding: 12px;

  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.03), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
}

.ga-msg{
  display: flex;
  margin: 10px 0;

  /* fight theme line-height/letter spacing */
  letter-spacing: normal !important;
  text-transform: none !important;
}

.ga-msg.ga-user{ justify-content: flex-end; }
.ga-msg.ga-ai{ justify-content: flex-start; }

.ga-bubble{
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);

  box-shadow: 0 14px 28px rgba(0,0,0,.25);
}

.ga-msg.ga-user .ga-bubble{
  border-color: rgba(212,175,55,.28);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(240,199,94,.12), transparent 62%),
    rgba(255,255,255,.05);
}

.ga-aiName{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .22px;
  color: var(--ga-gold-2);
  margin-bottom: 6px;
}

.ga-text{
  font-size: 13px;
  font-weight: 650;
  cursor: text;
  color: var(--ga-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   Operator cards
========================= */
.ga-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.ga-card{
  display: block;
  border-radius: 16px;
  padding: 10px 10px;

  border: 1px solid rgba(212,175,55,.24);
  background: rgba(255,255,255,.04);

  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  transition: transform .14s ease, filter .14s ease, background .14s ease;
}

.ga-card:hover{ transform: translateY(-1px); filter: brightness(1.05); background: rgba(255,255,255,.06); }

.ga-cardTitle{
  font-weight: 1000;
  font-size: 13px;
  color: var(--ga-ink);
}

.ga-cardSub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 750;
  color: var(--ga-muted);
}

@media (max-width: 460px){
  .ga-cards{ grid-template-columns: 1fr; }
}

/* =========================
   Quick actions (chips)
========================= */
.ga-actions{
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  max-height: 108px;
  overflow: auto;

  border-top: 1px solid rgba(212,175,55,.22);
  background: rgba(0,0,0,.42);
}

.ga-chip{
  padding: 8px 10px !important;
  border-radius: 999px;

  border: 1px solid rgba(212,175,55,.42) !important;
  background: rgba(0,0,0,.28) !important;
  color: var(--ga-ink) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  transition: transform .14s ease, filter .14s ease, background .14s ease;
}

.ga-chip:hover{ transform: translateY(-1px); filter: brightness(1.05); background: rgba(212,175,55,.10); }

/* =========================
   Composer
========================= */
.ga-compose{
  display: flex;
  gap: 8px;
  align-items: flex-end;

  padding: 10px 12px 12px;

  border-top: 1px solid rgba(212,175,55,.22);
  background: rgba(0,0,0,.52);
}

.ga-input{
  flex: 1;
  min-height: 44px !important;

  padding: 10px 12px !important;
  border-radius: var(--ga-radius-sm);

  border: 1px solid rgba(212,175,55,.55) !important;
  background: rgba(255,255,255,.04) !important;

  color: var(--ga-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  cursor: text;
}

.ga-input::placeholder{ color: rgba(247,247,251,.45); }

.ga-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 66px !important;
  min-height: 44px !important;

  padding: 0 14px !important;
  border-radius: var(--ga-radius-sm);

  border: 1px solid rgba(212,175,55,.85) !important;
  background: linear-gradient(135deg, var(--ga-gold), var(--ga-gold-2)) !important;
  color: #0b0b0d !important;

  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: .2px;

  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}

.ga-send[disabled]{
  opacity: .65;
  cursor: not-allowed;
  filter: grayscale(.25);
}

/* =========================
   Footer
========================= */
.ga-foot{
  padding: 8px 12px 10px;
  background: rgba(0,0,0,.58);
}

.ga-footTiny{
  font-size: 11px;
  font-weight: 850;
  color: rgba(247,247,251,.55);
}

/* =========================
   Motion/accessibility
========================= */
@media (prefers-reduced-motion: reduce){
  .ga-fab, .ga-iconBtn, .ga-card, .ga-chip{ transition: none; }
  .ga-fab:hover, .ga-iconBtn:hover, .ga-card:hover, .ga-chip:hover{ transform: none; }
}

/* =========================
   Small-screen tuning
========================= */
@media (max-width: 420px){
  .ga-title{ max-width: 190px; }
}

@media (max-height: 560px){
  .ga-panel{ height: min(540px, calc(100vh - 120px)); }
  .ga-actions{ max-height: 88px; }
}


/* =========================================================
   New UI bits (v1.1.x)
========================================================= */

/* Small icon buttons (header + composer) */
.ga-icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(0,0,0,.25);
  color: var(--ga-gold);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.ga-icon-btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.35);
  border-color: rgba(212,175,55,.35);
}
.ga-icon-btn:active{
  transform: translateY(0);
}

/* Settings menu */
.ga-settings-menu{
  position:absolute;
  right: 12px;
  top: 56px;
  width: 260px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,10,12,.98), rgba(16,16,21,.98));
  border: 1px solid rgba(212,175,55,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  z-index: 6;
}
.ga-settings-menu .ga-settings-title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244,227,166,.88);
  margin-bottom: 6px;
}
.ga-settings-menu a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--ga-text);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  margin-bottom: 8px;
}
.ga-settings-menu a:hover{
  border-color: rgba(212,175,55,.25);
  background: rgba(212,175,55,.06);
}
.ga-settings-menu .ga-settings-foot{
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}

/* Emoji tray */
.ga-emoji-tray{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.18);
}
.ga-emoji-tray button{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font-size: 18px;
}
.ga-emoji-tray button:hover{
  border-color: rgba(212,175,55,.25);
  background: rgba(212,175,55,.06);
}

/* Intake form (lead capture) */
.ga-intake{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.ga-intake .ga-intake-title{
  font-weight: 800;
  color: rgba(244,227,166,.92);
  margin-bottom: 8px;
}
.ga-intake .ga-intake-row{
  display:flex;
  gap: 10px;
  margin-bottom: 10px;
}
.ga-intake input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: var(--ga-text);
  outline: none;
}
.ga-intake input:focus{
  border-color: rgba(212,175,55,.35);
  box-shadow: 0 0 0 3px rgba(212,175,55,.10);
}
.ga-intake .ga-intake-actions{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
}
.ga-intake .ga-intake-actions button{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.30);
  background: rgba(212,175,55,.10);
  color: var(--ga-text);
  cursor: pointer;
  font-weight: 800;
}
.ga-intake .ga-intake-actions button:hover{
  background: rgba(212,175,55,.14);
}
.ga-intake .ga-intake-actions .ga-skip{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
}

/* Avatar image support */
.ga-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: 14px;
}

@keyframes gaSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Subtle animated glow layer (respects reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .ga-panel::after{
    content:'';
    position:absolute;
    inset:-18px;
    background: conic-gradient(from 180deg, rgba(212,175,55,.10), rgba(255,255,255,0), rgba(212,175,55,.08), rgba(255,255,255,0), rgba(212,175,55,.10));
    filter: blur(18px);
    opacity:.35;
    z-index: 0;
    pointer-events:none;
    animation: gaSpin 18s linear infinite;
  }
  .ga-panel > *{ position: relative; z-index: 1; }
}