/* ============================================================
   Sqwibbl.Host ? Sqwibbl.ai visual refresh
   Keeps Host page structure/JS intact while matching the aqua
   operator-console identity from Sqwibbl.ai.
   ============================================================ */
:root{
  color-scheme: light;
  --sq-ink:#001C1B !important;
  --sq-ink-2:#002826 !important;
  --sq-ink-3:#063A39 !important;
  --sq-paper:#F4FBFB !important;
  --sq-paper-2:#FFFFFF !important;
  --sq-muted:#277275 !important;
  --sq-line:rgba(39,114,117,.24) !important;
  --sq-line-dark:rgba(255,255,255,.10) !important;
  --sq-accent:#77C5C5 !important;
  --sq-accent-2:#2B9497 !important;
  --sq-green:#77C5C5 !important;
  --sq-warn:#77C5C5 !important;
  --sq-red:#2B9497 !important;
  --sq-shadow:0 28px 80px rgba(0,28,27,.16) !important;

  --paper:#F4FBFB !important;
  --paper-2:#FFFFFF !important;
  --ink:#001C1B !important;
  --muted:#277275 !important;
  --line:rgba(39,114,117,.24) !important;
  --terracotta:#77C5C5 !important;
  --terracotta-dark:#2B9497 !important;
  --warning:#2B9497 !important;
  --green:#77C5C5 !important;
  --blue:#277275 !important;
  --red:#2B9497 !important;
  --shadow:0 28px 90px rgba(0,28,27,.24) !important;
}

html{background:#F4FBFB !important;}
body,
body.theme-light,
.desktop{
  color:#001C1B !important;
  background:
    radial-gradient(900px 420px at 78% -8%,rgba(119,197,197,.28),transparent 60%),
    radial-gradient(760px 460px at 8% 108%,rgba(43,148,151,.18),transparent 55%),
    #F4FBFB !important;
  font-family:"Hanken Grotesk",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
body::selection{background:#77C5C5;color:#001C1B;}
a{color:inherit;}

/* Shared Sqwibbl.ai chrome */
.header,
.topbar,
.sqwibbl-header .header-inner,
.mock-top,
.context-strip{
  background:rgba(0,28,27,.88) !important;
  color:#F4FBFB !important;
  border-color:rgba(255,255,255,.10) !important;
  backdrop-filter:blur(14px);
  box-shadow:0 22px 60px rgba(0,28,27,.20) !important;
}
.header-logo h2,
.header-logo span,
.logo,
.brand,
.topbar a,
.nav-link,
.context-strip,
.context-strip *{color:#F4FBFB !important;}
.header-logo span{color:#B6E1E1 !important;}
.header-logo img,
.logo img,
.brand img,
.sqwibbl-logo,
.orb-card.logo img,
.floating-card.logo img{
  object-fit:contain !important;
  filter:drop-shadow(0 10px 24px rgba(119,197,197,.20)) !important;
}
.nav-link:hover,
.nav-link[aria-current="page"]{
  color:#fff !important;
  background:rgba(119,197,197,.12) !important;
}

/* Typography and page sections */
h1,h2,h3,h4,.display-3,.display-5,.section-title h2{
  color:#001C1B !important;
  letter-spacing:-.035em;
}
.title-heading,.eyebrow,.label,.section-title p strong{
  color:#2B9497 !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}
.hero-copy,.lead,.description,.card-subtitle,.status-note,.activity-meta,.hint-row,.empty,.empty-card,.text-muted{
  color:#277275 !important;
}
.section,
.shell,
.scene{position:relative;}
.bg-lighter,
.panel-card,
.version-card,
.launcher,
.mock-outlook,
.orb-card,
.floating-card,
.card:not(.action-card),
.sqwibbl-info-card,
.sqwibbl-lead-card,
.sqwibbl-note-card,
.item,
.capability,
.suggestion,
.empty-card,
.settings-card,
.provider-card,
.skill-card,
.project-card{
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(39,114,117,.24) !important;
  box-shadow:0 24px 70px rgba(0,28,27,.10) !important;
}
.suggestion:first-child,
.suggestion:hover,
.capability:hover{
  background:rgba(119,197,197,.12) !important;
  border-color:rgba(119,197,197,.42) !important;
}

/* Inputs */
input,textarea,select,.launcher-input,#launcherInput,.brain-select,.value,[contenteditable="true"]{
  color:#001C1B !important;
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(39,114,117,.24) !important;
}
input::placeholder,textarea::placeholder,#launcherInput::placeholder,.launcher-input::placeholder{color:rgba(39,114,117,.62) !important;}
select option,.brain-select option{background:#001C1B !important;color:#F4FBFB !important;}

/* Buttons */
.button,.tf-btn,button.primary,
.action-buttons .button,.buttons button.primary{
  background:#77C5C5 !important;
  color:#001C1B !important;
  border:1px solid transparent !important;
  box-shadow:0 8px 30px -12px rgba(119,197,197,.75) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-weight:700 !important;
}
.button:hover,.tf-btn:hover,button.primary:hover{background:#B6E1E1 !important;color:#001C1B !important;transform:translateY(-1px);}
.button-light,button.secondary,.buttons button.secondary{
  background:transparent !important;
  color:#001C1B !important;
  border:1px solid rgba(39,114,117,.32) !important;
  box-shadow:none !important;
}
.button-danger,button.danger,.buttons button.danger{
  background:rgba(43,148,151,.10) !important;
  color:#002826 !important;
  border:1px solid rgba(43,148,151,.28) !important;
  box-shadow:none !important;
}
.voice-button,.file-button,button.voice,button.file-button,.chrome-button{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(39,114,117,.24) !important;
  color:#001C1B !important;
}

/* Sqwibbl.ai OPERATING-style action cards */
.action-list,.cards{gap:14px !important;}
.action-card,
.cards > .card,
#actionCards article,
#mediaCards article,
#cards article{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(0,40,38,.98),rgba(0,28,27,.96)) !important;
  color:#F4FBFB !important;
  border:1px solid rgba(119,197,197,.46) !important;
  border-radius:18px !important;
  box-shadow:0 34px 80px -42px rgba(0,28,27,.88) !important;
}
.action-card::before,
.cards > .card::before,
#actionCards article::before,
#mediaCards article::before,
#cards article::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 160px at 20% 0%,rgba(119,197,197,.16),transparent 60%),
    linear-gradient(180deg,rgba(119,197,197,.08),rgba(119,197,197,.02));
}
.action-card > *,
.cards > .card > *,
#actionCards article > *,
#mediaCards article > *,
#cards article > *{position:relative;z-index:1;}
.action-top,.card-head{
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.02) !important;
}
.action-title,.action-card h3,.card h3,
#actionCards article h3,#mediaCards article h3,#cards article h3{
  color:#fff !important;
  font-weight:700 !important;
}
.action-status,.badge,.state-pill,.tiny-badge,.trust .badge{
  color:#77C5C5 !important;
  background:rgba(119,197,197,.10) !important;
  border:1px solid rgba(119,197,197,.28) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.action-card .card-subtitle,
.action-card .status-note,
.action-card .field label,
.action-card .trust,
.cards > .card .user-said,
.cards > .card .status-note,
.cards > .card .field label,
.cards > .card .trust,
#actionCards article .card-subtitle,
#actionCards article .status-note,
#actionCards article .field label,
#actionCards article .trust,
#cards article .user-said,
#cards article .status-note,
#cards article .field label,
#cards article .trust{
  color:#B6E1E1 !important;
}
.action-card .field div,
.action-card .value,
.cards > .card .value,
#actionCards article [contenteditable],
#cards article .value{
  color:#F4FBFB !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.action-card .field div:focus,
.action-card .value:focus,
.cards > .card .value:focus,
#actionCards article [contenteditable]:focus,
#cards article .value:focus{
  background:rgba(119,197,197,.10) !important;
  border-color:rgba(119,197,197,.58) !important;
}
.action-card .button,
.action-card button.primary,
.cards > .card button.primary,
#actionCards article .button,
#cards article button.primary{background:#77C5C5 !important;color:#001C1B !important;}
.action-card .button-light,
.action-card button.secondary,
.cards > .card button.secondary,
#actionCards article .button-light,
#cards article button.secondary{background:transparent !important;color:#B6E1E1 !important;border-color:rgba(255,255,255,.16) !important;}
.action-card .button-danger,
.action-card button.danger,
.cards > .card button.danger,
#actionCards article .button-danger,
#cards article button.danger{background:rgba(43,148,151,.12) !important;color:#B6E1E1 !important;border-color:rgba(43,148,151,.35) !important;}
.media-preview{border-color:rgba(119,197,197,.26) !important;background:rgba(0,28,27,.34) !important;}
.media-preview-meta{color:#B6E1E1 !important;background:rgba(255,255,255,.03) !important;}
.media-preview-meta a,.output-link,.link-button{color:#77C5C5 !important;}

/* Status treatments */
.status-pill,
.notice,
.trust,
kbd{
  border-color:rgba(39,114,117,.24) !important;
  background:rgba(255,255,255,.72) !important;
  color:#277275 !important;
}
.status-pill.needs-you,.notice.warn,.trust.warn{background:rgba(119,197,197,.14) !important;color:#002826 !important;border-color:rgba(119,197,197,.32) !important;}
.status-pill.working,.notice:not(.warn):not(.error){background:rgba(119,197,197,.16) !important;color:#002826 !important;border-color:rgba(119,197,197,.34) !important;}
.notice.error{background:rgba(43,148,151,.12) !important;color:#002826 !important;border-color:rgba(43,148,151,.34) !important;}
.dot,.context-dot,.spinner{background:#77C5C5 !important;box-shadow:0 0 0 5px rgba(119,197,197,.16) !important;}
.spinner{border-color:rgba(119,197,197,.22) !important;border-top-color:#77C5C5 !important;}
.progress div{background:linear-gradient(90deg,#77C5C5,#2B9497) !important;}

@media(max-width:760px){
  .header .container-fluid,.topbar{border-radius:0 !important;}
  .action-card,#actionCards article,#cards article{border-radius:16px !important;}
}

/* Settings brain picker alignment fix after theme overlay */
.brain-picker-card{overflow:hidden !important;}
.brain-picker-card select{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  justify-self:stretch !important;
}
.brain-picker-card{
  grid-template-columns:minmax(0,1fr) minmax(0,320px) !important;
  align-items:center !important;
}
.brain-picker-card > *{min-width:0 !important;}
.brain-picker-card select,
select#brainModelSelect{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}
@media(max-width:992px){.brain-picker-card{grid-template-columns:1fr !important;}}


/* Exact Sqwibbl.ai console/action-card structure for live Host cards */
.action-list,
.cards{
  align-items:start !important;
}
.cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important;}
.action-console.console{
  background:linear-gradient(180deg,var(--sq-ink-2),#001716) !important;
  border:1px solid var(--sq-line-dark) !important;
  border-radius:22px !important;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.80) !important;
  overflow:hidden !important;
  color:#F4FBFB !important;
  padding:0 !important;
}
.action-console .console__bar{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:13px 16px !important;
  border-bottom:1px solid var(--sq-line-dark) !important;
  background:rgba(255,255,255,.02) !important;
  color:#B6E1E1 !important;
}
.action-console .console__bar i{
  width:11px !important;
  height:11px !important;
  border-radius:50% !important;
  background:#063A39 !important;
  flex:0 0 auto !important;
}
.action-console .console__bar i:nth-child(1){background:#2B9497 !important;}
.action-console .console__bar i:nth-child(2){background:#77C5C5 !important;}
.action-console .console__bar i:nth-child(3){background:#B6E1E1 !important;}
.action-console .console__bar span{
  margin-left:auto !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:.72rem !important;
  color:#B6E1E1 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.action-console .console__body{
  padding:18px !important;
  display:grid !important;
  gap:12px !important;
}
.action-console .log{
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:.82rem !important;
  line-height:1.75 !important;
  color:#B6E1E1 !important;
  min-height:0 !important;
}
.action-console .log .ts{color:rgba(182,225,225,.58) !important;}
.action-console .log .ok{color:#77C5C5 !important;}
.action-console .log .do{color:#B6E1E1 !important;}
.action-console .acard,
.action-card.acard{
  margin-top:0 !important;
  border:1px solid rgba(119,197,197,.46) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(119,197,197,.10),rgba(119,197,197,.03)) !important;
  padding:15px 16px !important;
  color:#F4FBFB !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
}
.action-console .acard__tag{
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:.68rem !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:#77C5C5 !important;
  margin-bottom:7px !important;
  display:flex !important;
  align-items:center !important;
  gap:.6em !important;
}
.action-console .acard__title{
  color:#fff !important;
  font-weight:700 !important;
  font-size:1.04rem !important;
  margin-bottom:4px !important;
}
.action-console .acard__desc,
.action-console .card-subtitle,
.action-console .status-note,
.action-console .user-said{
  font-size:.88rem !important;
  color:#B6E1E1 !important;
  margin:0 0 12px !important;
  line-height:1.45 !important;
}
.action-console .field-list,
.action-console .card-fields{
  display:grid !important;
  gap:8px !important;
  margin:12px 0 !important;
}
.action-console .field{
  display:grid !important;
  grid-template-columns:minmax(84px,112px) minmax(0,1fr) !important;
  gap:10px !important;
  align-items:start !important;
  font-size:.86rem !important;
}
.action-console .field label{
  color:#77C5C5 !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:.68rem !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.action-console .field div,
.action-console .value,
.action-console [contenteditable]{
  color:#F4FBFB !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:12px !important;
  padding:7px 9px !important;
  overflow-wrap:anywhere !important;
  white-space:pre-wrap !important;
}
.action-console .field div:focus,
.action-console .value:focus,
.action-console [contenteditable]:focus{
  outline:none !important;
  background:rgba(119,197,197,.10) !important;
  border-color:rgba(119,197,197,.58) !important;
}
.action-console .trust,
.action-console .action-trust{
  color:#B6E1E1 !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:12px !important;
  padding:9px 10px !important;
  font-size:.78rem !important;
}
.action-console .acard__btns,
.action-console .action-buttons,
.action-console .buttons{
  display:flex !important;
  gap:9px !important;
  flex-wrap:wrap !important;
  margin-top:12px !important;
}
.action-console .b-approve,
.action-console button.primary,
.action-console .button:not(.button-light):not(.button-danger){
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:.76rem !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  border-radius:9px !important;
  padding:.65em 1.12em !important;
  cursor:pointer !important;
  border:1px solid transparent !important;
  background:#77C5C5 !important;
  color:#001C1B !important;
  box-shadow:none !important;
}
.action-console .b-decline,
.action-console button.secondary,
.action-console button.danger,
.action-console .button-light,
.action-console .button-danger{
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:.76rem !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  border-radius:9px !important;
  padding:.65em 1.12em !important;
  cursor:pointer !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#B6E1E1 !important;
  box-shadow:none !important;
}
.action-console .b-approve:hover,
.action-console button.primary:hover,
.action-console .button:not(.button-light):not(.button-danger):hover,
.action-console .b-decline:hover,
.action-console button.secondary:hover,
.action-console button.danger:hover,
.action-console .button-light:hover,
.action-console .button-danger:hover{
  transform:translateY(-1px) !important;
}
.action-console .media-preview{margin:12px 0 !important;}

/* If any action-card panel intentionally stays on a light surface, force dark text. */
.action-card.light,
.action-card.is-light,
.action-card.light *,
.action-card.is-light *,
.acard.light,
.acard.light *,
.action-card[style*="255,255,255"],
.action-card[style*="#fff"],
.action-card[style*="white"]{
  color:#001C1B !important;
}
.action-card.light .card-subtitle,
.action-card.is-light .card-subtitle,
.action-card.light .status-note,
.action-card.is-light .status-note,
.action-card.light .field label,
.action-card.is-light .field label{
  color:#277275 !important;
}

@media(max-width:640px){
  .action-console .field{grid-template-columns:1fr !important;}
  .cards{grid-template-columns:1fr !important;}
}

/* Light surfaces must stay readable: dark text on pale/white cards. */
.card:not(.action-card):not(.action-console),
.card:not(.action-card):not(.action-console) *,
.panel-card,
.panel-card *,
.empty-card,
.empty-card *,
.settings-card,
.settings-card *,
.provider-card,
.provider-card *,
.skill-card,
.skill-card *,
.project-card,
.project-card *{
  color:#001C1B !important;
}
.card:not(.action-card):not(.action-console) .card-subtitle,
.card:not(.action-card):not(.action-console) .status-note,
.card:not(.action-card):not(.action-console) .field label,
.panel-card .card-subtitle,
.empty-card,
.settings-card .card-desc,
.provider-card .card-desc,
.skill-card .card-desc,
.project-card .card-desc{
  color:#277275 !important;
}
.action-console,
.action-console *,
.action-console .panel-card,
.action-console .panel-card *{
  color:inherit;
}
.action-console .acard__title,
.action-console .action-title,
.action-console h3{color:#fff !important;}
.action-console .acard__desc,
.action-console .card-subtitle,
.action-console .status-note,
.action-console .field label,
.action-console .trust,
.action-console .action-trust{color:#B6E1E1 !important;}

/* Explicit light action cards stay light and readable. */
.action-card.light,
.action-card.is-light,
.acard.light{
  background:#FFFFFF !important;
  border:1px solid rgba(39,114,117,.24) !important;
  box-shadow:0 18px 48px rgba(0,28,27,.08) !important;
}
.action-card.light::before,
.action-card.is-light::before,
.acard.light::before{display:none !important;}
.action-card.light,
.action-card.light *,
.action-card.is-light,
.action-card.is-light *,
.acard.light,
.acard.light *{
  color:#001C1B !important;
}
.action-card.light .card-subtitle,
.action-card.light .status-note,
.action-card.light .field label,
.action-card.is-light .card-subtitle,
.action-card.is-light .status-note,
.action-card.is-light .field label,
.acard.light .card-subtitle,
.acard.light .status-note,
.acard.light .field label{
  color:#277275 !important;
}