:root {
  --public-shell-bg:#030711;
  --public-shell-image:url("/static/kira_ui/public/kira-public-dark.png");
  --public-shell-overlay:linear-gradient(180deg, rgba(2,6,23,.10) 0%, rgba(2,6,23,.20) 100%);
  --public-shell-overlay-mobile:linear-gradient(180deg, rgba(2,6,23,.18) 0%, rgba(2,6,23,.30) 100%);
  --public-glass-panel:rgba(8,12,24,.28);
  --public-glass-panel-soft:rgba(11,18,32,.20);
  --public-glass-control:rgba(15,23,42,.24);
}

html[data-kira-theme-resolved="light"] {
  --public-shell-bg:#f4f7fb;
  --public-shell-image:url("/static/kira_ui/public/kira-public-light.png");
  --public-shell-overlay:linear-gradient(180deg, rgba(244,248,255,.06) 0%, rgba(244,248,255,.16) 100%);
  --public-shell-overlay-mobile:linear-gradient(180deg, rgba(244,248,255,.14) 0%, rgba(244,248,255,.28) 100%);
  --public-glass-panel:rgba(255,255,255,.26);
  --public-glass-panel-soft:rgba(248,250,252,.18);
  --public-glass-control:rgba(255,255,255,.22);
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

html {
  min-width:0;
  min-height:100%;
  background:var(--public-shell-bg);
}

body.public-shell {
  min-width:0;
  min-height:100vh;
  position:relative;
  isolation:isolate;
  background:transparent;
}

body.public-shell::before,
body.public-shell::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

body.public-shell::before {
  z-index:-2;
  background-color:var(--public-shell-bg);
  background-image:var(--public-shell-image);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

body.public-shell::after {
  z-index:-1;
  background:var(--public-shell-overlay);
}

body.public-shell > * {
  min-width:0;
  position:relative;
  z-index:0;
}

body.public-shell .hero,
body.public-shell .card,
body.public-shell .log,
body.public-shell .panel {
  background:var(--public-glass-panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body.public-shell .mini,
body.public-shell .entry {
  background:var(--public-glass-panel-soft);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

body.public-shell .theme-toggle,
body.public-shell .link-btn,
body.public-shell .pill,
body.public-shell a.tile-btn {
  background:var(--public-glass-control);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Public project CTAs use the same theme-aware glass styling as the neighboring buttons. */
body.public-shell .link-btn.cta-primary {
  background:var(--public-glass-control);
  color:var(--page-text, var(--guest-text));
  border-color:var(--panel-border, rgba(96,165,250,.35));
}

/* The landing page needs only the product name; the route context is already obvious. */
body.public-shell #guest-page .brand-title {
  font-size:0;
}

body.public-shell #guest-page .brand-title::before {
  content:"KIRA-Web";
  font-size:1.8rem;
}

/* Grid children may otherwise preserve a wide min-content size and eat the right mobile gutter. */
body.public-shell .grid > *,
body.public-shell .row,
body.public-shell .row > * {
  min-width:0;
}

@media (max-width:640px) {
  body.public-shell::before {
    background-position:28% center;
  }

  body.public-shell::after {
    background:var(--public-shell-overlay-mobile);
  }

  /* Keep the landing brand and theme toggle on one row without letting either overlap. */
  body.public-shell header {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:.45rem;
  }

  body.public-shell header .brand-title {
    min-width:0;
    font-size:0;
    letter-spacing:.03em;
    line-height:1.12;
    white-space:nowrap;
  }

  body.public-shell #guest-page .brand-title::before {
    font-size:clamp(.96rem, 4.15vw, 1.12rem);
  }

  body.public-shell header .header-actions {
    min-width:0;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    margin-left:0;
  }

  body.public-shell header .theme-toggle {
    padding:.42rem .55rem;
    font-size:.72rem;
    white-space:nowrap;
  }

  /* Guest chat composer must fit inside the same left/right gutter as the chat log. */
  body.public-shell .row {
    width:100%;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto auto;
    gap:.5rem;
  }

  body.public-shell .row input[type="text"] {
    width:100%;
    min-width:0;
  }
}