:root {
  --sidebar-collapsed: 104px;
  --sidebar-expanded: 296px;
  --text: #f6f8fc;
  --muted: #aebbd0;
  --sidebar-bg: rgba(16, 43, 78, 0.9);
  --sidebar-bg-dark: rgba(9, 30, 60, 0.95);
  --panel: rgba(5, 18, 41, 0.82);
  --panel-strong: rgba(5, 18, 41, 0.97);
  --border: rgba(255, 255, 255, 0.13);
  --accent: #bcecff;
  --danger: #ff9d9d;
  --page-width: 980px;
  --fast: 150ms ease;
  --normal: 220ms ease;
}

/* =========================================================
   FINAL REGRESSION GUARDS — WALLET/MOBILE RELEASE
========================================================= */

#threadStopButton[hidden],
#threadStopButton[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none !important;
}

@media (max-width: 620px) {
  #sidebarToggle:not(.mobile-view-sidebar-toggle):not(.mobile-drawer-sidebar-toggle) {
    display: none !important;
  }
}

/*
 * Luna authenticates with email, Google, or Apple. Legacy phone-auth elements
 * remain non-rendered only for backward-compatible JavaScript initialization.
 */
[data-phone-auth-disabled],
#authPhoneMethodButton,
#securityPhoneRow,
#phoneEntryBackdrop,
#phoneConfirmationBackdrop {
  display: none !important;
}

/* RESET */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  color-scheme: dark;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:
    linear-gradient(
      rgba(3, 12, 29, 0.22),
      rgba(2, 9, 23, 0.4)
    ),
    url("images/luna-tech-background.jpg")
      center / cover no-repeat fixed,
    #06152d;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(90, 142, 220, 0.17),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.2),
      transparent 18%,
      transparent 82%,
      rgba(0, 0, 0, 0.2)
    );
}

body.modal-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
select,
label[for] {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button,
select,
label[for] {
  cursor: pointer;
}

button:disabled,
select:disabled,
textarea:disabled,
input:disabled {
  cursor: wait;
  opacity: 0.58;
}

/* Completed Markdown checklist boxes are read-only content, not loading UI. */
.assistant-body input[type="checkbox"]:disabled,
.streaming-answer-text input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

svg,
img {
  display: block;
}

textarea {
  font-family: inherit;
}

.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* APP */

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  grid-template-columns:
    var(--sidebar-collapsed)
    minmax(0, 1fr);
  transition:
    grid-template-columns
    var(--normal);
}

.app-shell.sidebar-open {
  grid-template-columns:
    var(--sidebar-expanded)
    minmax(0, 1fr);
}

.main-content {
  position: relative;
  min-width: 0;
  min-height: 100vh;
}

.app-view {
  display: none;
  min-height: 100vh;
}

.app-view.active {
  display: block;
}

/* SIDEBAR */

.sidebar {
  position: relative;
  z-index: 20;
  display: flex;
  min-width: 0;
  min-height: 100vh;
  flex-direction: column;
  overflow: visible;
  border-right:
    1px solid
    rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      180deg,
      var(--sidebar-bg),
      var(--sidebar-bg-dark)
    );
  box-shadow:
    16px 0 50px
    rgba(0, 0, 0, 0.16);
  backdrop-filter:
    blur(22px);
}

.sidebar-header {
  display: grid;
  height: 112px;
  place-items: start center;
  padding-top: 20px;
}

.sidebar-logo {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 17px;
  transition:
    background var(--fast),
    transform var(--fast);
}

.sidebar-logo:hover,
.sidebar-logo:focus-visible {
  background:
    rgba(255, 255, 255, 0.07);
  transform:
    translateY(-1px);
  outline: none;
}

.sidebar-logo img {
  width: 43px;
  max-height: 43px;
  object-fit: contain;
}

.primary-nav {
  display: grid;
  gap: 8px;
  padding:
    0 18px;
}

.nav-item,
.sidebar-toggle {
  position: relative;
  display: flex;
  width: 100%;
  height: 52px;
  align-items: center;
  gap: 15px;
  border-radius: 14px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.88);
  transition:
    width var(--normal),
    background var(--fast),
    color var(--fast),
    transform var(--fast);
}

.nav-item {
  padding:
    0 15px;
}

.nav-item:hover,
.nav-item:focus-visible,
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background:
    rgba(255, 255, 255, 0.095);
  color: #ffffff;
  outline: none;
}

.nav-item.active {
  background:
    rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.nav-item:active,
.sidebar-toggle:active {
  transform:
    scale(0.97);
}

.nav-item svg {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
}

.app-shell:not(.sidebar-open)
.nav-item,
.app-shell:not(.sidebar-open)
.sidebar-toggle {
  width: 52px;
  height: 52px;
  margin-inline: auto;
  padding: 0;
  justify-content: center;
  gap: 0;
}

.app-shell:not(.sidebar-open)
.sidebar-footer {
  justify-items: center;
}

.nav-label,
.sidebar-toggle span,
.recent-section,
.upgrade-card {
  opacity: 0;
  pointer-events: none;
  transform:
    translateX(-8px);
  transition:
    opacity 170ms ease,
    transform 170ms ease;
}

.app-shell.sidebar-open
.nav-label,
.app-shell.sidebar-open
.sidebar-toggle span,
.app-shell.sidebar-open
.recent-section,
.app-shell.sidebar-open
.upgrade-card {
  opacity: 1;
  pointer-events: auto;
  transform:
    translateX(0);
}

.nav-label {
  overflow: hidden;
  font-size: 15px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell:not(.sidebar-open)
[data-tooltip]::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 15px);
  z-index: 50;
  padding:
    8px 11px;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background:
    rgba(4, 15, 34, 0.97);
  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, 0.3);
  color: #ffffff;
  content:
    attr(data-tooltip);
  font-size: 13px;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform:
    translate(6px, -50%);
  transition:
    opacity 130ms ease,
    transform 130ms ease;
  white-space: nowrap;
}

.app-shell:not(.sidebar-open)
[data-tooltip]:hover::after,
.app-shell:not(.sidebar-open)
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform:
    translate(0, -50%);
}

/* RECENT */

.recent-section {
  min-height: 0;
  margin:
    22px 18px 0;
  padding:
    18px 14px 14px;
  border-top:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-heading h2 {
  margin: 0;
  color: #d8e1ef;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clear-recent {
  padding:
    4px 7px;
  border-radius: 7px;
  background: transparent;
  color: #8fa2bd;
  font-size: 11px;
}

.clear-recent:hover,
.clear-recent:focus-visible {
  background:
    rgba(255, 255, 255, 0.07);
  color: #ffffff;
  outline: none;
}

.recent-list {
  display: grid;
  max-height: 235px;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.recent-list::-webkit-scrollbar {
  width: 5px;
}

.recent-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.18);
}

.recent-list li {
  list-style: none;
}

.recent-list button {
  display: block;
  width: 100%;
  overflow: hidden;
  padding:
    9px 10px;
  border-radius: 9px;
  background: transparent;
  color: #c3ccda;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-list button:hover,
.recent-list button:focus-visible {
  background:
    rgba(255, 255, 255, 0.07);
  color: #ffffff;
  outline: none;
}

.recent-list
button.recent-thread-button {
  position: relative;
  display: grid;
  grid-template-columns:
    8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding:
    8px 9px;
  white-space: normal;
}

.recent-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
}

.recent-thread-button.is-unread
.recent-unread-dot {
  background: #bdefff;
  box-shadow:
    0 0 0 3px
      rgba(129, 218, 255, 0.08),
    0 0 11px
      rgba(151, 226, 255, 0.68);
}

.recent-thread-copy {
  min-width: 0;
}

.recent-project-name,
.recent-thread-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-project-name {
  margin-bottom: 2px;
  color: #d8f4ff;
  font-size: 10px;
  font-weight: 760;
}

.recent-thread-title {
  color: #c3ccda;
  font-size: 12px;
}

.recent-thread-button:hover
.recent-thread-title,
.recent-thread-button:focus-visible
.recent-thread-title {
  color: #ffffff;
}

.recent-empty {
  margin:
    8px 4px 0;
  color: #7f92ae;
  font-size: 12px;
  line-height: 1.45;
}

/* SIDEBAR FOOTER */

.sidebar-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding:
    18px 18px 25px;
}

.upgrade-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border:
    1px solid
    rgba(94, 218, 255, 0.34);
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      rgba(38, 151, 255, 0.19),
      rgba(52, 224, 207, 0.12)
    ),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 26px
      rgba(56, 192, 255, 0.12),
    inset 0 1px 0
      rgba(255, 255, 255, 0.08);
}

.upgrade-card:hover,
.upgrade-card:focus-visible {
  border-color:
    rgba(114, 231, 255, 0.64);
  box-shadow:
    0 0 36px
      rgba(56, 192, 255, 0.19),
    inset 0 1px 0
      rgba(255, 255, 255, 0.1);
  outline: none;
}

.upgrade-icon {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.1);
  color: #9ff4ff;
}

.upgrade-icon svg {
  width: 20px;
  height: 20px;
}

.upgrade-copy {
  min-width: 0;
}

.upgrade-copy strong,
.upgrade-copy small {
  display: block;
  white-space: nowrap;
}

.upgrade-copy strong {
  margin-bottom: 3px;
  font-size: 14px;
}

.upgrade-copy small {
  color: #b8c7dc;
  font-size: 11px;
}

.sidebar-toggle {
  justify-content: flex-start;
  padding:
    0 15px;
}

.sidebar-toggle svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  transition:
    transform var(--normal);
}

.app-shell.sidebar-open
.sidebar-toggle svg {
  transform:
    rotate(180deg);
}

/* TOPBAR */

.topbar {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 15px;
}

.icon-button,
.avatar-button {
  display: grid;
  place-items: center;
  transition:
    transform var(--fast),
    background var(--fast),
    box-shadow var(--fast);
}

.icon-button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.82);
}

.icon-button:hover,
.icon-button:focus-visible {
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.icon-button svg {
  width: 28px;
  height: 28px;
}

.profile {
  position: relative;
}

.avatar-button {
  width: 51px;
  height: 51px;
  padding: 0;
  overflow: hidden;
  border:
    2px solid
    rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.35),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #5989bc,
      #314e75 58%,
      #182b48
    );
  color: #ffffff;
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.03em;
  box-shadow:
    0 10px 32px
    rgba(0, 0, 0, 0.28);
}

.avatar-button:hover,
.avatar-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px
      rgba(255, 255, 255, 0.08),
    0 10px 32px
      rgba(0, 0, 0, 0.28);
}

.avatar-button:active,
.icon-button:active {
  transform:
    scale(0.95);
}

.avatar-button img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 260px;
  padding: 10px;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background:
    rgba(5, 17, 39, 0.98);
  box-shadow:
    0 22px 54px
    rgba(0, 0, 0, 0.38);
  backdrop-filter:
    blur(20px);
}

.profile-summary {
  padding:
    10px 11px 13px;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.profile-name {
  font-size: 14px;
  font-weight: 750;
}

.profile-plan {
  display: inline-flex;
  margin-top: 6px;
  padding:
    4px 8px;
  border:
    1px solid
    rgba(137, 223, 255, 0.26);
  border-radius: 999px;
  background:
    rgba(92, 193, 255, 0.1);
  color: #bfeeff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-email {
  margin-top: 7px;
  overflow: hidden;
  color: #8fa1bb;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  color: #dce4f0;
  font-size: 13px;
  text-align: left;
}

.profile-action:hover,
.profile-action:focus-visible {
  background:
    rgba(255, 255, 255, 0.07);
  outline: none;
}

.profile-action.danger {
  color: #ffc0c0;
}

.profile-action.danger:hover,
.profile-action.danger:focus-visible {
  background:
    rgba(255, 86, 86, 0.11);
  color: #ffffff;
}

.profile-action svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* HOME */

.hero {
  width:
    min(
      960px,
      calc(100% - 70px)
    );
  min-height:
    calc(100vh - 70px);
  margin:
    0 auto;
  padding-top:
    clamp(72px, 10vh, 122px);
  padding-bottom: 70px;
  text-align: center;
}

.hero-logo {
  width:
    min(300px, 46vw);
  height: auto;
  margin:
    0 auto;
  filter:
    drop-shadow(
      0 8px 24px
      rgba(0, 0, 0, 0.18)
    );
}

.tagline {
  margin:
    18px 0 24px;
  color: #ffffff;
  font-size:
    clamp(
      27px,
      2.8vw,
      44px
    );
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-shadow:
    0 3px 24px
    rgba(0, 0, 0, 0.27);
}

.mode-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.home-mode-switcher {
  margin:
    0 auto 14px;
}

.mode-button {
  display: inline-flex;
  min-width: 176px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding:
    0 24px;
  border:
    1px solid
    rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    rgba(4, 16, 38, 0.62);
  color:
    rgba(255, 255, 255, 0.88);
  font-size: 16px;
  font-weight: 740;
  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.04),
    0 10px 28px
      rgba(0, 0, 0, 0.15);
  transition:
    transform var(--fast),
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    box-shadow var(--fast);
}

.mode-button-fast {
  gap: 8px;
}

.mode-button-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mode-button:hover,
.mode-button:focus-visible {
  transform:
    translateY(-1px);
  border-color:
    rgba(255, 255, 255, 0.3);
  background:
    rgba(255, 255, 255, 0.09);
  color: #ffffff;
  outline: none;
}

.mode-button.active {
  border-color:
    rgba(255, 255, 255, 0.9);
  background:
    rgba(255, 255, 255, 0.98);
  color: #06152d;
  box-shadow:
    0 0 28px
      rgba(255, 255, 255, 0.26),
    0 13px 34px
      rgba(0, 0, 0, 0.22);
}

.mode-button:active {
  transform:
    scale(0.98);
}

/* COMPOSER */

.composer {
  position: relative;
  display: grid;
  width:
    min(790px, 100%);
  gap: 12px;
  margin:
    0 auto;
  padding: 14px;
  border:
    1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(12, 25, 49, 0.95),
      rgba(6, 17, 37, 0.95)
    );
  box-shadow:
    0 24px 64px
      rgba(0, 0, 0, 0.3),
    inset 0 1px 0
      rgba(255, 255, 255, 0.055);
  backdrop-filter:
    blur(20px);
  text-align: left;
}

.composer-home {
  width:
    min(900px, 100%);
  min-height: 132px;
  gap: 7px;
  padding:
    10px 11px 9px;
  border-radius: 22px;
}

.composer-thread {
  width: 100%;
  flex: 0 0 auto;
  margin-top: 12px;
  border-radius: 22px;
}

.composer-input {
  width: 100%;
  min-height: 72px;
  max-height: 190px;
  resize: none;
  border: 0;
  outline: 0;
  padding:
    9px 10px 2px;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.5;
}

.composer-home
.composer-input {
  min-height: 54px;
  max-height: 150px;
  padding:
    8px 9px 0;
  font-size: 18px;
  line-height: 1.4;
}

.composer-thread
.composer-input {
  min-height: 58px;
  font-size: 16px;
}

.composer-input::placeholder {
  color:
    rgba(255, 255, 255, 0.57);
  opacity: 1;
}

.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer-home
.composer-toolbar {
  align-self: end;
  margin-top: 2px;
}

.composer-tools,
.composer-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-options {
  margin-left: auto;
}

.composer-icon-button,
.composer-tool-button,
.composer-select,
.composer-send-button {
  min-height: 40px;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  background:
    rgba(255, 255, 255, 0.055);
  color:
    rgba(255, 255, 255, 0.82);
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    transform var(--fast);
}

.composer-icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
}

.composer-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding:
    0 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 650;
}

.composer-tool-button.is-listening,
.composer-tool-button[aria-pressed="true"] {
  border-color:
    rgba(142, 229, 255, 0.48);
  background:
    rgba(57, 180, 238, 0.17);
  color: #ffffff;
  box-shadow:
    0 0 20px
    rgba(78, 194, 255, 0.15);
}

.composer-icon-button:hover,
.composer-icon-button:focus-visible,
.composer-tool-button:hover,
.composer-tool-button:focus-visible,
.composer-select:hover,
.composer-select:focus {
  border-color:
    rgba(255, 255, 255, 0.25);
  background:
    rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

.composer-icon-button:active,
.composer-tool-button:active {
  transform:
    scale(0.96);
}

.composer-icon-button svg,
.composer-tool-button svg {
  width: 19px;
  height: 19px;
}

.composer-select {
  height: 42px;
  padding:
    0 34px 0 12px;
  border-radius: 12px;
  outline: none;
  color: #ffffff;
  font-size: 12px;
  font-weight: 650;
}

.composer-select option {
  color: #111111;
  background: #ffffff;
}

.composer-send-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-color:
    rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  background: #ffffff;
  color: #06152d;
  box-shadow:
    0 10px 24px
    rgba(0, 0, 0, 0.2);
}

.composer-send-button:hover,
.composer-send-button:focus-visible {
  transform:
    translateY(-1px);
  outline: none;
  box-shadow:
    0 0 25px
      rgba(255, 255, 255, 0.22),
    0 12px 28px
      rgba(0, 0, 0, 0.24);
}

.composer-send-button:active {
  transform:
    scale(0.96);
}

.composer-send-button svg {
  width: 23px;
  height: 23px;
}

.composer-home
.composer-icon-button,
.composer-home
.composer-tool-button,
.composer-home
.composer-select {
  min-height: 36px;
  height: 36px;
}

.composer-home
.composer-icon-button {
  width: 36px;
  border-radius: 11px;
}

.composer-home
.composer-tool-button {
  padding:
    0 10px;
  border-radius: 10px;
  font-size: 11px;
}

.composer-home
.composer-select {
  padding:
    0 30px 0 10px;
  border-radius: 10px;
  font-size: 11px;
}

.composer-home
.composer-send-button {
  width: 39px;
  height: 39px;
  min-height: 39px;
  border-radius: 12px;
}

.composer-home
.composer-icon-button svg,
.composer-home
.composer-tool-button svg {
  width: 17px;
  height: 17px;
}

.composer-home
.composer-send-button svg {
  width: 21px;
  height: 21px;
}

.composer-thread
.composer-icon-button,
.composer-thread
.composer-tool-button,
.composer-thread
.composer-select {
  min-height: 38px;
  height: 38px;
}

.composer-thread
.composer-icon-button {
  width: 38px;
}

.composer-thread
.composer-tool-button {
  padding:
    0 10px;
  font-size: 11px;
}

.composer-thread
.composer-select {
  padding:
    0 31px 0 10px;
  font-size: 11px;
}

.composer-thread
.composer-send-button {
  width: 42px;
  height: 42px;
  min-height: 42px;
}

/* DRAG AND DROP */

.composer-drop-overlay {
  position: absolute;
  inset: 7px;
  z-index: 90;
  display: grid;
  place-items: center;
  border:
    1px dashed
    rgba(173, 231, 255, 0.72);
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      rgba(41, 125, 206, 0.28),
      rgba(28, 91, 158, 0.22)
    ),
    rgba(4, 15, 34, 0.93);
  color: #ffffff;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transform:
    scale(0.985);
  transition:
    opacity var(--fast),
    transform var(--fast);
  backdrop-filter:
    blur(12px);
}

.composer.is-dragover
.composer-drop-overlay {
  opacity: 1;
  transform:
    scale(1);
}

.composer.is-dragover {
  border-color:
    rgba(173, 231, 255, 0.62);
  box-shadow:
    0 0 0 3px
      rgba(122, 211, 255, 0.08),
    0 24px 64px
      rgba(0, 0, 0, 0.3);
}

/* VOICE / DICTATE CONSENT POPUP */

.voice-consent-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: min(360px, calc(100vw - 48px));
  padding: 16px 18px;
  border:
    1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    rgba(4, 16, 36, 0.98);
  box-shadow:
    0 22px 52px
    rgba(0, 0, 0, 0.42);
  backdrop-filter:
    blur(18px);
  color: #dce6f3;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.voice-consent-popup p {
  margin: 0 0 12px;
}

.voice-consent-popup-actions {
  display: flex;
  justify-content: flex-end;
}

/* ATTACHMENTS */

.attachment-menu {
  position: absolute;
  bottom: 57px;
  left: 11px;
  z-index: 80;
  width: 235px;
  padding: 8px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background:
    rgba(4, 16, 36, 0.98);
  box-shadow:
    0 22px 52px
    rgba(0, 0, 0, 0.42);
  backdrop-filter:
    blur(18px);
}

.attachment-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding:
    11px 12px;
  border-radius: 10px;
  background: transparent;
  color: #dce6f3;
  text-align: left;
}

.attachment-menu button:hover,
.attachment-menu button:focus-visible {
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.attachment-menu svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.attachment-tray {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  padding:
    0 8px 2px;
}

.attachment-chip {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  max-width: 260px;
  align-items: center;
  gap: 8px;
  padding:
    5px 8px 5px 6px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background:
    rgba(255, 255, 255, 0.065);
  color:
    rgba(255, 255, 255, 0.84);
  font-size: 12px;
}

.attachment-chip.has-preview {
  min-width: 158px;
  max-width: 230px;
}

.attachment-thumbnail {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    rgba(0, 0, 0, 0.22);
  color: #c9efff;
}

.attachment-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-thumbnail svg {
  width: 18px;
  height: 18px;
}

.attachment-chip-copy {
  min-width: 0;
}

.attachment-chip-name,
.attachment-chip-meta {
  display: block;
}

.attachment-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-chip-meta {
  margin-top: 2px;
  color:
    rgba(255, 255, 255, 0.42);
  font-size: 10px;
}

.attachment-chip > button {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.55);
}

.attachment-chip > button:hover {
  background:
    rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

.thread-message.user
.attachment-tray {
  margin-top: 9px;
  padding: 0;
}

.thread-message.user
.attachment-chip {
  background:
    rgba(0, 0, 0, 0.14);
}

/* STATUS */

.status-message {
  min-height: 22px;
  margin:
    14px 0 0;
  color: #c3d2e8;
  font-size: 14px;
}

.status-message:empty {
  display: none;
}

.ai-disclaimer {
  margin:
    11px auto 0;
  color:
    rgba(255, 255, 255, 0.44);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.thread-disclaimer {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* PAGES */

.standard-page,
.chat-page {
  width:
    min(
      var(--page-width),
      calc(100% - 72px)
    );
  margin:
    0 auto;
}

.standard-page {
  min-height: 100vh;
  padding:
    92px 0 64px;
}

.page-heading {
  margin-bottom: 24px;
}

.page-kicker,
.settings-eyebrow {
  margin:
    0 0 6px;
  color:
    rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-heading h2 {
  margin:
    0 0 8px;
  color: #ffffff;
  font-size:
    clamp(
      31px,
      4vw,
      44px
    );
  font-weight: 600;
  letter-spacing: -0.035em;
}

.page-heading p:last-child {
  margin: 0;
  color:
    rgba(255, 255, 255, 0.66);
  line-height: 1.55;
}

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.page-search-box,
.inline-search {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding:
    12px 15px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background:
    rgba(5, 18, 41, 0.77);
}

.page-search-box {
  width:
    min(540px, 100%);
}

.inline-search {
  min-width: 270px;
}

.page-search-box svg,
.inline-search svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color:
    rgba(255, 255, 255, 0.55);
}

.page-search-box input,
.inline-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
}

.page-search-box input::placeholder,
.inline-search input::placeholder {
  color:
    rgba(255, 255, 255, 0.45);
}

.page-button,
.back-button,
.settings-action-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding:
    0 15px;
  border:
    1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background:
    rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font-weight: 650;
  transition:
    background var(--fast),
    border-color var(--fast),
    transform var(--fast);
}

.page-button:hover,
.page-button:focus-visible,
.back-button:hover,
.back-button:focus-visible,
.settings-action-button:hover,
.settings-action-button:focus-visible {
  border-color:
    rgba(255, 255, 255, 0.24);
  background:
    rgba(255, 255, 255, 0.13);
  outline: none;
}

.page-button:active,
.back-button:active,
.settings-action-button:active {
  transform:
    scale(0.97);
}

.page-button.primary,
.settings-action-button.primary {
  border-color:
    rgba(149, 226, 255, 0.38);
  background:
    linear-gradient(
      135deg,
      rgba(61, 163, 255, 0.24),
      rgba(74, 220, 204, 0.14)
    );
}

.page-button.danger,
.settings-action-button.danger {
  border-color:
    rgba(255, 108, 108, 0.28);
  background:
    rgba(181, 49, 49, 0.14);
  color: #ffc3c3;
}

.page-button svg,
.back-button svg {
  width: 18px;
  height: 18px;
}

.back-button {
  margin-bottom: 24px;
}

#libraryView
.page-search-box {
  flex: 1 1 420px;
  margin-right: auto;
}

/* CARDS */

.content-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.library-grid {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(230px, 1fr)
    );
}

.content-card {
  position: relative;
  display: block;
  width: 100%;
  padding:
    18px 20px;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background:
    rgba(5, 18, 41, 0.72);
  color: #ffffff;
  text-align: left;
  transition:
    border-color var(--fast),
    background var(--fast),
    transform var(--fast),
    box-shadow var(--fast);
}

button.content-card,
a.content-card {
  cursor: pointer;
}

button.content-card:hover,
button.content-card:focus-visible,
a.content-card:hover,
a.content-card:focus-visible {
  border-color:
    rgba(255, 255, 255, 0.22);
  background:
    rgba(10, 29, 60, 0.86);
  transform:
    translateY(-2px);
  box-shadow:
    0 18px 44px
    rgba(0, 0, 0, 0.22);
  outline: none;
}

.content-card-title {
  margin:
    0 0 6px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-card-preview {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color:
    rgba(255, 255, 255, 0.63);
  font-size: 13px;
  line-height: 1.5;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.content-card-meta {
  margin-top: 11px;
  color:
    rgba(255, 255, 255, 0.42);
  font-size: 11px;
}

.library-card {
  min-height: 170px;
  overflow: hidden;
}

.library-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 12px;
  background:
    rgba(142, 217, 255, 0.11);
  color: #c4efff;
}

.library-card-icon svg {
  width: 23px;
  height: 23px;
}

.library-card-thumbnail {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  margin:
    -3px 0 15px;
  border:
    1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(91, 175, 233, 0.16),
      transparent 48%
    ),
    rgba(0, 0, 0, 0.18);
  color: #c3ecff;
}

.library-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-card-thumbnail svg {
  width: 34px;
  height: 34px;
}

.library-card.is-folder
.library-card-thumbnail {
  aspect-ratio: 2.35 / 1;
}

.library-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.library-card-menu-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background:
    rgba(3, 13, 31, 0.78);
  color:
    rgba(255, 255, 255, 0.78);
  opacity: 0;
  transition:
    opacity var(--fast),
    background var(--fast);
  backdrop-filter:
    blur(10px);
}

.library-card:hover
.library-card-menu-button,
.library-card:focus-within
.library-card-menu-button {
  opacity: 1;
}

.library-card-menu-button:hover,
.library-card-menu-button:focus-visible {
  background:
    rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: none;
}

.library-card-menu-button svg {
  width: 17px;
  height: 17px;
}

.library-context-menu {
  position: fixed;
  z-index: 1200;
  width: 178px;
  padding: 7px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background:
    rgba(4, 15, 34, 0.98);
  box-shadow:
    0 20px 52px
    rgba(0, 0, 0, 0.42);
  backdrop-filter:
    blur(18px);
}

.library-context-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 9px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.82);
  text-align: left;
}

.library-context-menu button:hover,
.library-context-menu button:focus-visible {
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.library-context-menu
button.danger {
  color: #ffc1c1;
}

.empty-state {
  grid-column: 1 / -1;
  padding:
    40px 22px;
  border:
    1px dashed
    rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background:
    rgba(5, 18, 41, 0.48);
  color:
    rgba(255, 255, 255, 0.56);
  text-align: center;
}

/* CHAT */

#chatView {
  overflow: hidden;
}

.chat-page {
  display: flex;
  height: 100vh;
  flex-direction: column;
  padding:
    76px 0 18px;
}

.chat-header {
  display: flex;
  min-height: 72px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding:
    0 4px 15px;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.chat-title-wrap {
  min-width: 0;
}

.chat-project-label {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  margin:
    0 0 5px;
  color: #bcecff;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.chat-project-label::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  content: "";
  border-radius: 50%;
  background: #bcecff;
  box-shadow:
    0 0 11px
    rgba(142, 220, 255, 0.58);
}

.chat-title {
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 20px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

.message-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  padding:
    30px 10px 22px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.message-list::-webkit-scrollbar {
  width: 7px;
}

.message-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.16);
}

.thread-message {
  display: flex;
  width: 100%;
}

.thread-message.user {
  justify-content: flex-end;
}

.thread-message.assistant {
  justify-content: flex-start;
}

.message-content {
  max-width:
    min(750px, 84%);
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.65;
}

.thread-message.user
.message-content {
  padding:
    14px 17px;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  border-radius:
    18px 18px 5px 18px;
  background:
    rgba(255, 255, 255, 0.12);
  color: #ffffff;
  white-space: pre-wrap;
}

.thread-message.assistant
.message-content {
  width:
    min(750px, 100%);
  color:
    rgba(255, 255, 255, 0.93);
}

.assistant-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: #b9e7ff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.assistant-label::before {
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 12px
    rgba(255, 255, 255, 0.55);
}

/* ANSWERS */

.assistant-body {
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.assistant-body > :first-child {
  margin-top: 0;
}

.assistant-body > :last-child {
  margin-bottom: 0;
}

.assistant-body p {
  margin:
    0 0 14px;
  line-height: 1.65;
}

.assistant-body h1,
.assistant-body h2,
.assistant-body h3 {
  color: #ffffff;
  line-height: 1.28;
  font-weight: 700;
}

.assistant-body h1 {
  margin:
    26px 0 14px;
  font-size: 1.55rem;
}

.assistant-body h2 {
  margin:
    24px 0 12px;
  font-size: 1.28rem;
}

.assistant-body h3 {
  margin:
    20px 0 10px;
  font-size: 1.08rem;
}

.assistant-body ul,
.assistant-body ol {
  margin:
    10px 0 18px;
  padding-left: 24px;
}

.assistant-body li {
  margin-bottom: 7px;
}

.assistant-body a {
  color: #b9e7ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.assistant-body code {
  padding:
    2px 6px;
  border-radius: 5px;
  background:
    rgba(0, 0, 0, 0.24);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size: 0.92em;
}

.assistant-body pre {
  margin:
    18px 0;
  padding: 15px;
  overflow-x: auto;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background:
    rgba(0, 0, 0, 0.28);
}

.assistant-body pre code {
  padding: 0;
  background: transparent;
}

.assistant-body table {
  width: 100%;
  margin:
    18px 0;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.assistant-body th,
.assistant-body td {
  padding:
    10px 12px;
  border:
    1px solid
    rgba(255, 255, 255, 0.16);
  text-align: left;
  vertical-align: top;
}

.assistant-body th {
  background:
    rgba(255, 255, 255, 0.1);
}

.assistant-generated-text {
  margin-top: 16px;
}

body.compact-responses
.assistant-body p {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* THINKING */

.luna-activity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 30px;
  color:
    rgba(255, 255, 255, 0.9);
}

.luna-activity-orb {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  background: #ffffff;
  animation:
    lunaPulse
    1.5s infinite;
}

.luna-activity-message {
  font-weight: 500;
}

.luna-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: -5px;
}

.luna-thinking-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation:
    lunaDot
    1.2s infinite;
}

.luna-thinking-dots
span:nth-child(2) {
  animation-delay: 0.2s;
}

.luna-thinking-dots
span:nth-child(3) {
  animation-delay: 0.4s;
}

/*
 * Confirmed feedback: wanted a counting-up seconds indicator instead
 * of bouncing dots while Luna is thinking/working, matching the
 * pattern Claude/Grok/ChatGPT already use ("Thought for 12s").
 * Deliberately quiet -- tabular-nums so the width doesn't jitter as
 * the digit count changes, dimmer than the status message itself so
 * it reads as a secondary detail, not competing for attention.
 */
.luna-activity-timer {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  font-size: 0.9em;
}

@keyframes lunaPulse {
  0%,
  100% {
    transform:
      scale(0.85);
    opacity: 0.55;
    box-shadow:
      0 0 0 0
      rgba(255, 255, 255, 0.4);
  }

  50% {
    transform:
      scale(1);
    opacity: 1;
    box-shadow:
      0 0 0 7px
      rgba(255, 255, 255, 0);
  }
}

@keyframes lunaDot {
  0%,
  60%,
  100% {
    transform:
      translateY(0);
    opacity: 0.25;
  }

  30% {
    transform:
      translateY(-4px);
    opacity: 1;
  }
}

/* IMAGE GENERATION */

.image-generation-placeholder {
  position: relative;
  width:
    min(100%, 650px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border:
    1px solid
    rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(100, 162, 230, 0.22),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(9, 31, 64, 0.98),
      rgba(6, 18, 42, 0.98)
    );
  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.34);
  isolation: isolate;
}

.image-generation-placeholder::before {
  position: absolute;
  inset: -18px;
  z-index: 1;
  content: "";
  opacity: 0.72;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.08)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08)
      1px,
      transparent 1px
    ),
    radial-gradient(
      circle,
      rgba(151, 216, 255, 0.34)
      0 24%,
      transparent 28%
    );
  background-size:
    22px 22px,
    22px 22px,
    44px 44px;
  animation:
    lunaPixelGridShift
    2.1s steps(8)
    infinite;
}

.image-generation-placeholder::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    linear-gradient(
      110deg,
      transparent 18%,
      rgba(128, 211, 255, 0.04) 34%,
      rgba(255, 255, 255, 0.22) 48%,
      rgba(128, 211, 255, 0.05) 62%,
      transparent 78%
    );
  transform:
    translateX(-115%);
  animation:
    lunaImageSweep
    2.2s ease-in-out
    infinite;
}

.image-generation-status {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 4;
  display: grid;
  gap: 9px;
  padding:
    15px 17px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background:
    rgba(3, 13, 31, 0.72);
  backdrop-filter:
    blur(14px);
  text-align: left;
}

.image-generation-status-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.image-generation-status-message {
  color:
    rgba(255, 255, 255, 0.64);
  font-size: 12px;
}

.image-generation-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.1);
}

.image-generation-progress::after {
  display: block;
  width: 38%;
  height: 100%;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(116, 210, 255, 0.3),
      rgba(255, 255, 255, 0.96),
      rgba(116, 210, 255, 0.3)
    );
  transform:
    translateX(-110%);
  animation:
    lunaProgressSlide
    1.45s ease-in-out
    infinite;
}

.image-generation-pixels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.image-generation-pixel {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background:
    rgba(174, 228, 255, 0.52);
  box-shadow:
    0 0 15px
    rgba(133, 211, 255, 0.34);
  animation:
    lunaPixelPulse
    1.8s ease-in-out
    infinite;
}

@keyframes lunaPixelGridShift {
  0%,
  100% {
    transform:
      translate(0, 0);
  }

  25% {
    transform:
      translate(5px, -3px);
  }

  50% {
    transform:
      translate(-4px, 4px);
  }

  75% {
    transform:
      translate(3px, 5px);
  }
}

@keyframes lunaImageSweep {
  0% {
    transform:
      translateX(-115%);
  }

  58%,
  100% {
    transform:
      translateX(115%);
  }
}

@keyframes lunaProgressSlide {
  0% {
    transform:
      translateX(-110%);
  }

  100% {
    transform:
      translateX(370%);
  }
}

@keyframes lunaPixelPulse {
  0%,
  100% {
    opacity: 0.22;
    transform:
      scale(0.65);
  }

  50% {
    opacity: 0.9;
    transform:
      scale(1.12);
  }
}

/* GENERATED IMAGES */

.luna-image-result {
  width:
    min(100%, 650px);
}

.luna-image-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border:
    1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background:
    rgba(5, 18, 41, 0.76);
  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.34);
}

.luna-generated-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation:
    lunaImageReveal
    380ms ease-out;
}

.luna-generated-image.is-preview {
  opacity: 0.86;
  filter:
    saturate(0.9)
    contrast(0.96)
    blur(0.45px);
}

.luna-image-stage.is-generating::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.09)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.09)
      1px,
      transparent 1px
    );
  background-size:
    18px 18px;
}

.luna-image-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding:
    8px 10px;
  border:
    1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    rgba(3, 13, 31, 0.72);
  color:
    rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 700;
  backdrop-filter:
    blur(12px);
}

.luna-image-badge::before {
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: #b8efff;
  box-shadow:
    0 0 12px
    rgba(184, 239, 255, 0.65);
}

.luna-image-stage--rejected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
}

.luna-image-rejected-icon {
  color: rgba(255, 255, 255, 0.42);
}

.luna-image-rejected-heading {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.luna-image-rejected-subtext {
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}

@keyframes lunaImageReveal {
  from {
    opacity: 0;
    transform:
      scale(0.985)
      translateY(8px);
  }

  to {
    opacity: 1;
    transform:
      scale(1)
      translateY(0);
  }
}

.image-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.image-action-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding:
    0 13px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background:
    rgba(255, 255, 255, 0.065);
  color:
    rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 650;
  transition:
    background var(--fast),
    border-color var(--fast),
    color var(--fast),
    transform var(--fast);
}

.image-action-button:hover,
.image-action-button:focus-visible {
  border-color:
    rgba(255, 255, 255, 0.24);
  background:
    rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform:
    translateY(-1px);
  outline: none;
}

.image-action-button.is-success {
  border-color:
    rgba(99, 235, 201, 0.36);
  background:
    rgba(41, 182, 146, 0.16);
  color: #cafff2;
}

.image-action-button svg {
  width: 17px;
  height: 17px;
}

.image-action-status {
  min-height: 18px;
  margin-top: 7px;
  color:
    rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

/* MODALS */

.modal-backdrop,
.voice-mode-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    rgba(0, 7, 18, 0.7);
  backdrop-filter:
    blur(12px)
    saturate(0.82);
  animation:
    modalFadeIn
    180ms ease;
}

/*
 * The Terms/Privacy/Subprocessor-List modal (openLegalDocument) is
 * openable from links inside other already-open modals -- the sign-up
 * screen's own "you agree to Luna's Terms and Privacy Policy" copy, the
 * Settings dialog, the terms-update acknowledgment gate. All of those
 * share the same .modal-backdrop z-index (1000), so with equal z-index
 * the one later in the DOM wins the stacking order regardless of which
 * one the customer actually opened last -- confirmed live: authBackdrop
 * sits after legalBackdrop in index.html, so clicking "Terms" from the
 * sign-up screen genuinely opened the legal modal (hidden went false,
 * content populated) but it rendered completely behind the still-open
 * sign-up dialog, silently. legalBackdrop must always win when stacked
 * on top of another standard modal.
 *
 * 1100 was enough while every such modal was a standard one. The plan
 * modal is not: it is created in script.js with z-index 10020, so opening
 * Terms of Use from the purchase flow reproduced exactly the failure
 * described above -- the legal panel opened and rendered behind the plan
 * modal. This has to stay above every ordinary overlay, including the
 * notification onboarding prompt at 11980, and below the biometric lock,
 * which is deliberately the top of the stack.
 */
#legalBackdrop {
  z-index: 12100;
}

.settings-dialog,
.file-preview-dialog,
.library-picker-dialog,
.confirmation-dialog,
.voice-mode-dialog {
  width:
    min(
      960px,
      calc(100vw - 42px)
    );
  max-height:
    calc(100vh - 42px);
  overflow: hidden;
  border:
    1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(11, 27, 53, 0.99),
      rgba(5, 17, 37, 0.99)
    );
  box-shadow:
    0 40px 120px
    rgba(0, 0, 0, 0.58);
  animation:
    modalScaleIn
    190ms ease;
}

.settings-dialog {
  display: flex;
  height:
    min(
      720px,
      calc(100vh - 42px)
    );
  flex-direction: column;
}

.settings-header,
.file-preview-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding:
    22px 24px;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.settings-header h2,
.file-preview-header h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 650;
}

.file-preview-header p {
  margin:
    6px 0 0;
  color:
    rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.modal-close-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.06);
  color:
    rgba(255, 255, 255, 0.76);
}

.modal-close-button:hover,
.modal-close-button:focus-visible {
  background:
    rgba(255, 255, 255, 0.12);
  color: #ffffff;
  outline: none;
}

.modal-close-button svg {
  width: 21px;
  height: 21px;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(0.985);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* SETTINGS */

.settings-layout {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns:
    235px
    minmax(0, 1fr);
}

.settings-navigation {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  padding:
    18px 12px;
  overflow-y: auto;
  border-right:
    1px solid
    rgba(255, 255, 255, 0.09);
  background:
    rgba(3, 12, 29, 0.25);
}

.settings-nav-button {
  width: 100%;
  padding:
    10px 12px;
  border-radius: 10px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.settings-nav-button:hover,
.settings-nav-button:focus-visible {
  background:
    rgba(255, 255, 255, 0.065);
  color: #ffffff;
  outline: none;
}

.settings-nav-button.active {
  background:
    rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

.settings-content {
  min-height: 0;
  overflow-y: auto;
  padding:
    26px 30px 36px;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
}

.settings-panel h3 {
  margin:
    0 0 7px;
  font-size: 24px;
  font-weight: 650;
}

.settings-panel > p {
  margin:
    0 0 25px;
  color:
    rgba(255, 255, 255, 0.57);
  line-height: 1.55;
}

.settings-row {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding:
    15px 0;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.settings-row > div {
  min-width: 0;
}

.settings-row strong,
.settings-row span {
  display: block;
}

.settings-row strong {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 650;
}

.settings-row span {
  color:
    rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.45;
}

.settings-row select,
.settings-field input,
.settings-field textarea,
.plan-card button {
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  outline: none;
  background:
    rgba(255, 255, 255, 0.065);
  color: #ffffff;
}

.settings-row select {
  min-width: 160px;
  padding:
    10px 34px 10px 12px;
  border-radius: 11px;
}

.settings-row select option {
  color: #111111;
  background: #ffffff;
}

.settings-field {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.settings-field label {
  color:
    rgba(255, 255, 255, 0.74);
  font-size: 13px;
  font-weight: 650;
}

.settings-field input,
.settings-field textarea {
  width: 100%;
  padding:
    12px 13px;
  border-radius: 12px;
  resize: vertical;
}

.settings-action-button {
  margin-top: 22px;
}

.plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding: 22px;
  border:
    1px solid
    rgba(117, 222, 255, 0.25);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(56, 167, 255, 0.18),
      rgba(57, 214, 193, 0.11)
    );
}

.plan-card strong {
  display: block;
  margin-bottom: 7px;
  font-size: 20px;
}

.plan-card p {
  margin: 0;
  color:
    rgba(255, 255, 255, 0.59);
  line-height: 1.5;
}

.plan-card button {
  min-height: 42px;
  padding:
    0 15px;
  border-radius: 11px;
}

/* FILE PREVIEW */

.file-preview-dialog {
  display: flex;
  width:
    min(
      900px,
      calc(100vw - 42px)
    );
  height:
    min(
      720px,
      calc(100vh - 42px)
    );
  flex-direction: column;
}

.file-preview-body {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background:
    rgba(2, 9, 22, 0.34);
}

.file-preview-body img {
  max-width: 100%;
  max-height:
    calc(100vh - 250px);
  border-radius: 14px;
  object-fit: contain;
}

.file-preview-body iframe,
.file-preview-body embed {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
}

.file-preview-body pre {
  width: 100%;
  margin: 0;
  padding: 18px;
  overflow: auto;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background:
    rgba(0, 0, 0, 0.26);
  color:
    rgba(255, 255, 255, 0.9);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.file-preview-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding:
    16px 20px;
  border-top:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.library-picker-dialog {
  width:
    min(
      720px,
      calc(100vw - 42px)
    );
  max-height:
    calc(100vh - 60px);
  padding-bottom: 22px;
}

.library-picker-dialog
.page-search-box {
  width:
    calc(100% - 40px);
  margin:
    20px auto 0;
}

.library-picker-list {
  max-height: 440px;
  margin:
    18px 20px 0;
  overflow-y: auto;
}

/* RENAME AND CONFIRM */

.confirmation-dialog {
  width:
    min(
      430px,
      calc(100vw - 42px)
    );
  padding: 28px;
}

.confirmation-dialog h2 {
  margin:
    0 0 10px;
  font-size: 23px;
}

.confirmation-dialog p {
  margin: 0;
  color:
    rgba(255, 255, 255, 0.58);
  line-height: 1.55;
}

.confirmation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

.confirmation-dialog
.settings-field {
  margin-top: 18px;
}

.confirmation-dialog
.settings-field > span {
  color:
    rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 650;
}

.confirmation-dialog
.settings-field input {
  width: 100%;
  padding:
    12px 13px;
  border:
    1px solid
    rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  outline: none;
  background:
    rgba(255, 255, 255, 0.065);
  color: #ffffff;
}

.confirmation-dialog
.settings-field input:focus {
  border-color:
    rgba(160, 226, 255, 0.5);
  box-shadow:
    0 0 0 3px
    rgba(112, 205, 255, 0.08);
}

/* VOICE */

.voice-mode-backdrop {
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(69, 142, 221, 0.22),
      transparent 35%
    ),
    rgba(0, 7, 18, 0.84);
}

.voice-mode-dialog {
  position: relative;
  display: grid;
  width:
    min(
      520px,
      calc(100vw - 42px)
    );
  min-height: 520px;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding:
    44px 34px;
  text-align: center;
}

.voice-mode-dialog
.modal-close-button {
  position: absolute;
  top: 18px;
  right: 18px;
}

.voice-mode-orb {
  position: relative;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 40% 35%,
      rgba(255, 255, 255, 0.75),
      rgba(117, 204, 255, 0.65) 20%,
      rgba(52, 99, 181, 0.5) 52%,
      rgba(15, 37, 81, 0.8)
    );
  box-shadow:
    0 0 70px
    rgba(99, 190, 255, 0.34);
}

.voice-mode-orb span {
  position: absolute;
  width: 100%;
  height: 100%;
  border:
    1px solid
    rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation:
    voiceOrbPulse
    2.5s ease-in-out
    infinite;
}

.voice-mode-orb
span:nth-child(2) {
  animation-delay: 0.35s;
}

.voice-mode-orb
span:nth-child(3) {
  animation-delay: 0.7s;
}

.voice-mode-dialog h2 {
  margin: 0;
  font-size: 29px;
  font-weight: 600;
}

.voice-mode-dialog > p {
  margin: 0;
  color:
    rgba(255, 255, 255, 0.61);
}

#voiceModeTranscript {
  width: 100%;
  min-height: 60px;
  color:
    rgba(255, 255, 255, 0.88);
  line-height: 1.55;
}

.voice-mode-control {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  margin-top: 8px;
  border:
    1px solid
    rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: #ffffff;
  color: #06152d;
  box-shadow:
    0 12px 36px
    rgba(0, 0, 0, 0.3);
}

.voice-mode-control.is-listening,
.voice-mode-control[aria-pressed="true"] {
  background: #bfeeff;
  box-shadow:
    0 0 0 10px
      rgba(157, 226, 255, 0.09),
    0 0 50px
      rgba(112, 210, 255, 0.3);
}

.voice-mode-control svg {
  width: 29px;
  height: 29px;
}

@keyframes voiceOrbPulse {
  0%,
  100% {
    opacity: 0.25;
    transform:
      scale(0.75);
  }

  50% {
    opacity: 0.9;
    transform:
      scale(1);
  }
}

/* RESPONSIVE */

@media
(max-height: 790px)
and
(min-width: 701px) {
  .hero {
    padding-top: 52px;
  }

  .hero-logo {
    width: 230px;
  }

  .tagline {
    margin-top: 8px;
    margin-bottom: 20px;
  }
}

@media (max-width: 980px) {
  .app-shell,
  .app-shell.sidebar-open {
    grid-template-columns:
      78px
      minmax(0, 1fr);
  }

  .sidebar-header {
    height: 94px;
  }

  .sidebar-logo {
    width: 48px;
    height: 48px;
  }

  .sidebar-logo img {
    width: 36px;
    max-height: 36px;
  }

  .primary-nav,
  .sidebar-footer {
    padding-right: 10px;
    padding-left: 10px;
  }

  .nav-item,
  .sidebar-toggle {
    width: 52px;
    margin-inline: auto;
    padding: 0;
    justify-content: center;
  }

  .nav-label,
  .sidebar-toggle span,
  .recent-section,
  .upgrade-card {
    display: none;
  }

  .hero {
    width:
      min(
        820px,
        calc(100% - 35px)
      );
    padding-top: 118px;
  }

  .standard-page,
  .chat-page {
    width:
      min(
        calc(100% - 34px),
        800px
      );
  }

  .chat-header {
    align-items: flex-start;
  }

  .chat-header-actions {
    flex-direction: column;
    align-items: flex-end;
  }

  .settings-layout {
    grid-template-columns:
      190px
      minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .page-toolbar,
  .chat-header {
    align-items: stretch;
    flex-direction: column;
  }

  .composer-options {
    margin-left: 0;
  }

  .page-search-box,
  .inline-search {
    width: 100%;
    min-width: 0;
  }

  .chat-header-actions {
    width: 100%;
    align-items: stretch;
  }

  .settings-dialog {
    height:
      calc(100vh - 24px);
  }

  .settings-layout {
    display: block;
    overflow-y: auto;
  }

  .settings-navigation {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding:
      10px 14px;
    overflow-x: auto;
    border-right: 0;
    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.09);
    background:
      rgba(5, 18, 41, 0.97);
  }

  .settings-nav-button {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .settings-content {
    overflow: visible;
    padding:
      22px 20px 32px;
  }

  .settings-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .settings-row select {
    width: 100%;
  }

  .plan-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  /*
   * The sidebar button starts inside the desktop account row. Keep that
   * unplaced legacy state invisible until the placement routine assigns the
   * proper mobile view or open-drawer class. This prevents the bare arrow from
   * flashing at the bottom-left during authentication and route startup.
   */
  #sidebarToggle:not(.mobile-view-sidebar-toggle):not(.mobile-drawer-sidebar-toggle) {
    display: none !important;
  }

  body {
    background-position:
      center top;
  }

  .app-shell,
  .app-shell.sidebar-open {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset:
      auto 0 0;
    z-index: 60;
    width: 100%;
    height: 72px;
    min-height: auto;
    border-top:
      1px solid
      rgba(255, 255, 255, 0.09);
    border-right: 0;
  }

  .sidebar-header,
  .sidebar-footer,
  .recent-section {
    display: none;
  }

  .primary-nav {
    grid-template-columns:
      repeat(4, 1fr);
    gap: 3px;
    padding:
      8px 12px;
  }

  .nav-item {
    width: 100%;
    height: 55px;
    margin: 0;
  }

  .nav-item svg {
    width: 25px;
    height: 25px;
  }

  .app-shell:not(.sidebar-open)
  [data-tooltip]::after {
    display: none;
  }

  .topbar {
    top: 15px;
    right: 15px;
  }

  .hero {
    width:
      min(
        calc(100% - 24px),
        520px
      );
    padding-top: 90px;
    padding-bottom: 105px;
  }

  .hero-logo {
    width:
      min(
        245px,
        66vw
      );
  }

  .tagline {
    margin:
      14px 0 22px;
    font-size: 27px;
  }

  .home-mode-switcher {
    width: 100%;
    gap: 8px;
    margin-bottom: 10px;
  }

  .mode-button {
    min-width: 0;
    height: 46px;
    flex: 1 1 0;
    padding:
      0 13px;
    font-size: 14px;
  }

  .composer {
    padding: 11px;
    border-radius: 20px;
  }

  .composer-home {
    min-height: 150px;
  }

  .composer-home
  .composer-input {
    min-height: 66px;
    font-size: 16px;
  }

  .composer-home
  .composer-toolbar {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .composer-home
  .composer-tools {
    flex-wrap: nowrap;
  }

  .composer-home
  .composer-tool-button span {
    display: none;
  }

  .composer-home
  .composer-options {
    margin-left: auto;
  }

  .composer-thread
  .composer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .composer-thread
  .composer-tools {
    width: 100%;
    flex-wrap: wrap;
  }

  .composer-thread
  .composer-options {
    width: 100%;
    justify-content: space-between;
  }

  .composer-tool-button span {
    display: none;
  }

  .composer-tool-button {
    width: 42px;
    padding: 0;
  }

  .composer-select {
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 9px;
    font-size: 11px;
  }

  .attachment-chip.has-preview {
    min-width: 135px;
    max-width: 190px;
  }

  .standard-page {
    width:
      calc(100% - 24px);
    padding-top: 78px;
    padding-bottom: 100px;
  }

  .chat-page {
    width:
      calc(100% - 20px);
    height:
      calc(100vh - 72px);
    padding-top: 70px;
    padding-bottom: 10px;
  }

  .message-list {
    padding-right: 2px;
    padding-left: 2px;
  }

  .message-content {
    max-width: 92%;
  }

  .thread-message.assistant
  .message-content {
    max-width: 100%;
  }

  .chat-project-label {
    max-width:
      calc(100vw - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .library-grid {
    grid-template-columns:
      1fr;
  }

  .library-card-menu-button {
    opacity: 1;
  }

  .modal-backdrop,
  .voice-mode-backdrop {
    padding: 10px;
  }

  .settings-dialog,
  .file-preview-dialog,
  .library-picker-dialog,
  .confirmation-dialog,
  .voice-mode-dialog {
    width:
      calc(100vw - 20px);
    max-height:
      calc(100vh - 20px);
    border-radius: 18px;
  }

  .settings-header,
  .file-preview-header {
    padding: 18px;
  }

  .file-preview-footer
  .page-button {
    flex: 1 1 auto;
  }

  .voice-mode-dialog {
    min-height:
      calc(100vh - 20px);
  }

  .voice-mode-orb {
    width: 125px;
    height: 125px;
  }

  .image-generation-status {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .image-action-button {
    flex: 1 1 auto;
  }
}

/*
 * A completed mobile response must expose exactly one primary action. The
 * Stop control shares the voice button's grid cell, so legacy composer rules
 * must never resurrect it after the canonical done event marks it hidden.
 */
#threadStopButton[hidden],
#threadStopButton[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none !important;
}

/* REDUCED MOTION */

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition-duration: 0.01ms !important;
}

@media
(prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .luna-activity-orb,
  .luna-thinking-dots span,
  .image-generation-placeholder::before,
  .image-generation-placeholder::after,
  .image-generation-progress::after,
  .image-generation-pixel,
  .luna-generated-image,
  .voice-mode-orb span {
    animation: none !important;
  }
}


/* =========================================================
   LUNA ENHANCEMENT OVERRIDES
   Added for inline Voice Mode, Library organization,
   background completion indicators, conversation tools, and
   refined homepage proportions.
========================================================= */

/* HOME PAGE PROPORTIONS */

.hero-logo {
  width:
    min(258px, 40vw);
}

.tagline {
  margin:
    14px 0 20px;

  font-size:
    clamp(
      23px,
      2.25vw,
      36px
    );
}

.home-mode-switcher {
  gap: 10px;

  margin-bottom: 12px;
}

.mode-button {
  min-width: 148px;
  height: 44px;

  padding:
    0 19px;

  font-size: 14px;
}

/* BACKGROUND RESPONSE STATUS */

.recent-thread-button.is-running
.recent-unread-dot {
  background: #bdefff;

  box-shadow:
    0 0 0 3px
      rgba(129, 218, 255, 0.08),
    0 0 12px
      rgba(151, 226, 255, 0.75);

  animation:
    recentStatusPulse
    1.25s ease-in-out
    infinite;
}

.recent-thread-button.is-running
.recent-thread-title::after {
  margin-left: 6px;

  color: #bdefff;

  content: "Working";

  font-size: 9px;
  font-weight: 760;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.recent-thread-button.is-unread:not(.is-running)
.recent-unread-dot {
  background: #bdefff;

  box-shadow:
    0 0 0 3px
      rgba(129, 218, 255, 0.08),
    0 0 11px
      rgba(151, 226, 255, 0.68);
}

.content-card.is-unread::after {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 8px;
  height: 8px;

  content: "";

  border-radius: 50%;

  background: #bdefff;

  box-shadow:
    0 0 11px
    rgba(151, 226, 255, 0.68);
}

@keyframes recentStatusPulse {
  0%,
  100% {
    opacity: 0.48;

    transform:
      scale(0.78);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.08);
  }
}

/* INLINE VOICE MODE */

.inline-voice-status {
  display: flex;

  min-height: 34px;

  align-items: center;

  gap: 10px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(151, 226, 255, 0.2);

  border-radius: 11px;

  background:
    rgba(74, 176, 227, 0.08);

  color: #c8efff;

  font-size: 11px;
  font-weight: 650;

  letter-spacing: 0.01em;
}

.inline-voice-status.is-listening {
  border-color:
    rgba(151, 226, 255, 0.36);

  background:
    rgba(57, 180, 238, 0.13);
}

.inline-voice-status.is-processing {
  border-color:
    rgba(255, 255, 255, 0.18);

  color:
    rgba(255, 255, 255, 0.74);
}

.inline-voice-status.is-speaking {
  border-color:
    rgba(178, 239, 255, 0.42);

  background:
    rgba(97, 205, 255, 0.14);

  color: #ffffff;

  box-shadow:
    0 0 24px
    rgba(81, 192, 246, 0.1);
}

.inline-voice-wave {
  display: inline-flex;

  height: 17px;

  align-items: center;

  gap: 2px;
}

.inline-voice-wave span {
  display: block;

  width: 2px;
  height: 7px;

  border-radius: 999px;

  background: currentColor;

  animation:
    inlineVoiceWave
    0.9s ease-in-out
    infinite;
}

.inline-voice-wave span:nth-child(2) {
  height: 12px;

  animation-delay: 0.12s;
}

.inline-voice-wave span:nth-child(3) {
  height: 15px;

  animation-delay: 0.24s;
}

.inline-voice-wave span:nth-child(4) {
  height: 9px;

  animation-delay: 0.36s;
}

.inline-voice-status.is-processing
.inline-voice-wave span {
  animation-duration: 1.6s;
}

.inline-voice-status.is-speaking
.inline-voice-wave span {
  animation-duration: 0.58s;
}

.voice-mode-button[aria-pressed="true"],
.voice-mode-button.is-listening,
.voice-mode-button.is-speaking {
  border-color:
    rgba(151, 226, 255, 0.46);

  background:
    rgba(57, 180, 238, 0.17);

  color: #ffffff;

  box-shadow:
    0 0 20px
    rgba(78, 194, 255, 0.16);
}

.voice-mode-button.is-speaking svg {
  animation:
    voiceButtonSpeak
    0.78s ease-in-out
    infinite;
}

@keyframes inlineVoiceWave {
  0%,
  100% {
    opacity: 0.42;

    transform:
      scaleY(0.55);
  }

  50% {
    opacity: 1;

    transform:
      scaleY(1.12);
  }
}

@keyframes voiceButtonSpeak {
  0%,
  100% {
    transform:
      scale(0.9);
  }

  50% {
    transform:
      scale(1.08);
  }
}

/* ATTACHMENT THUMBNAILS AND REMOVE BUTTON */

.attachment-chip.has-preview {
  min-width: 154px;
  min-height: 62px;
  max-width: 230px;

  padding:
    4px 27px 4px 4px;
}

.attachment-chip.has-preview
.attachment-thumbnail {
  width: 52px;
  height: 52px;

  flex-basis: 52px;

  border-radius: 9px;
}

.attachment-chip.has-preview
.attachment-chip-name {
  max-width: 125px;
}

.attachment-chip.has-preview >
button {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 4;

  display: grid;

  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;

  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  background:
    rgba(3, 13, 31, 0.84);

  color: #ffffff;

  box-shadow:
    0 4px 12px
    rgba(0, 0, 0, 0.28);
}

.attachment-chip.has-preview >
button:hover,
.attachment-chip.has-preview >
button:focus-visible {
  background:
    rgba(25, 48, 80, 0.96);

  outline: none;
}

.attachment-chip.has-preview >
button svg {
  width: 10px;
  height: 10px;
}

.attachment-chip:not(.has-preview) >
button {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;

  padding: 0;
}

.attachment-chip:not(.has-preview) >
button svg {
  width: 11px;
  height: 11px;
}

/* LIBRARY LOCATION AND BULK ACTIONS */

.library-location-row {
  display: flex;

  min-height: 40px;

  align-items: center;

  gap: 12px;

  margin:
    -6px 0 14px;
}

.library-back-button {
  min-height: 38px;

  margin: 0;

  padding:
    0 12px;
}

.library-breadcrumb {
  color:
    rgba(255, 255, 255, 0.66);

  font-size: 13px;
  font-weight: 650;
}

.library-toolbar {
  align-items: center;
}

.library-bulk-toolbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin:
    0 0 18px;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(151, 226, 255, 0.2);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(58, 158, 232, 0.14),
      rgba(69, 208, 194, 0.07)
    ),
    rgba(5, 18, 41, 0.7);

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, 0.14);
}

.library-bulk-toolbar strong {
  color: #d9f4ff;

  font-size: 13px;
}

.library-bulk-actions {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}

.library-bulk-actions
.page-button {
  min-height: 38px;

  padding:
    0 12px;

  font-size: 12px;
}

.library-card {
  position: relative;
}

.library-card.is-selected {
  border-color:
    rgba(151, 226, 255, 0.62);

  background:
    linear-gradient(
      145deg,
      rgba(56, 167, 255, 0.17),
      rgba(42, 111, 178, 0.08)
    ),
    rgba(7, 23, 49, 0.88);

  box-shadow:
    0 0 0 3px
      rgba(151, 226, 255, 0.07),
    0 18px 44px
      rgba(0, 0, 0, 0.22);
}

.library-select-checkbox,
.library-card-checkbox,
.library-card input[type="checkbox"] {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;

  width: 21px;
  height: 21px;

  margin: 0;

  accent-color: #4daeea;

  cursor: pointer;

  filter:
    drop-shadow(
      0 3px 7px
      rgba(0, 0, 0, 0.28)
    );
}

.library-card.is-selecting
.library-card-thumbnail,
.library-grid.is-selecting
.library-card-thumbnail {
  margin-top: 24px;
}

.library-card.is-folder
.library-card-thumbnail {
  color: #bcecff;

  background:
    linear-gradient(
      145deg,
      rgba(67, 160, 235, 0.16),
      rgba(73, 116, 169, 0.08)
    ),
    rgba(0, 0, 0, 0.16);
}

.library-folder-count {
  margin-top: 8px;

  color:
    rgba(255, 255, 255, 0.46);

  font-size: 11px;
}

.library-picker-dialog
#moveToList {
  max-height: 470px;

  margin:
    18px 20px 22px;

  overflow-y: auto;
}

.move-folder-option {
  display: flex;

  width: 100%;

  align-items: center;

  gap: 11px;

  padding:
    13px 14px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.045);

  color: #ffffff;

  text-align: left;
}

.move-folder-option:hover,
.move-folder-option:focus-visible {
  border-color:
    rgba(151, 226, 255, 0.32);

  background:
    rgba(255, 255, 255, 0.09);

  outline: none;
}

.move-folder-option svg {
  width: 21px;
  height: 21px;

  flex: 0 0 auto;

  color: #bcecff;
}

.settings-value-pill {
  display: inline-flex !important;

  align-items: center;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(151, 226, 255, 0.2);

  border-radius: 999px;

  background:
    rgba(87, 184, 231, 0.1);

  color: #c9efff !important;

  font-size: 11px !important;
  font-weight: 700;
}

/* RESPONSIVE ENHANCEMENT OVERRIDES */

@media
(max-height: 790px)
and
(min-width: 701px) {
  .hero-logo {
    width: 215px;
  }

  .tagline {
    font-size:
      clamp(
        22px,
        2vw,
        32px
      );
  }

  .mode-button {
    min-width: 136px;
    height: 42px;

    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .library-bulk-toolbar {
    align-items: stretch;

    flex-direction: column;
  }

  .library-bulk-actions {
    width: 100%;
  }

  .library-bulk-actions
  .page-button {
    flex:
      1 1 auto;
  }
}

@media (max-width: 620px) {
  .hero-logo {
    width:
      min(
        215px,
        60vw
      );
  }

  .tagline {
    margin:
      12px 0 18px;

    font-size: 23px;
  }

  .home-mode-switcher {
    max-width: 360px;
  }

  .mode-button {
    height: 42px;

    padding:
      0 11px;

    font-size: 13px;
  }

  .attachment-chip.has-preview {
    min-width: 128px;
    max-width: 185px;
  }

  .attachment-chip.has-preview
  .attachment-thumbnail {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
  }

  .library-location-row {
    align-items: flex-start;

    flex-direction: column;
  }

  .library-bulk-actions
  .page-button {
    min-width: 118px;
  }

  .inline-voice-status {
    font-size: 10px;
  }
}

/* REDUCED MOTION FOR NEW ANIMATIONS */

body.reduce-motion
.inline-voice-wave span,
body.reduce-motion
.voice-mode-button svg,
body.reduce-motion
.recent-unread-dot {
  animation: none !important;
}

@media
(prefers-reduced-motion: reduce) {
  .inline-voice-wave span,
  .voice-mode-button svg,
  .recent-unread-dot {
    animation: none !important;
  }
}

/* =========================================================
   LUNA CONVERSATION AND WORKSPACE ENHANCEMENTS
========================================================= */

/* Keep Luna in its branded dark-blue appearance. */
html,
body {
  color-scheme: dark;
}

/* HOME REFINEMENTS */

.tagline {
  font-size:
    clamp(
      21px,
      2vw,
      33px
    );
}

.home-mode-switcher .mode-button {
  width: 148px;
  min-width: 148px;
  flex: 0 0 148px;
}

/* CONVERSATION QUESTION NAVIGATOR */

.chat-page {
  position: relative;
}

.question-navigator {
  position: fixed;
  top: 156px;
  right: 18px;
  z-index: 38;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}

.question-navigator-handle,
.question-navigator-panel {
  pointer-events: auto;
}

.question-navigator-handle {
  position: relative;
  display: grid;
  width: 22px;
  height: 132px;
  place-items: center;
  overflow: hidden;
  border:
    1px solid
    rgba(175, 231, 255, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(63, 159, 231, 0.24),
      rgba(16, 51, 94, 0.9)
    );
  color: #d7f5ff;
  box-shadow:
    0 0 0 1px
      rgba(255, 255, 255, 0.035),
    0 14px 34px
      rgba(0, 0, 0, 0.28),
    0 0 28px
      rgba(74, 184, 244, 0.13);
  transition:
    width var(--normal),
    border-color var(--fast),
    background var(--fast),
    transform var(--fast),
    box-shadow var(--fast);
}

.question-navigator-handle:hover,
.question-navigator-handle:focus-visible,
.question-navigator.is-open .question-navigator-handle {
  width: 30px;
  border-color:
    rgba(191, 239, 255, 0.58);
  background:
    linear-gradient(
      180deg,
      rgba(76, 185, 248, 0.35),
      rgba(18, 60, 109, 0.96)
    );
  box-shadow:
    0 0 0 4px
      rgba(131, 215, 255, 0.06),
    0 16px 38px
      rgba(0, 0, 0, 0.3),
    0 0 34px
      rgba(83, 196, 255, 0.22);
  outline: none;
}

.question-navigator-handle svg {
  width: 17px;
  height: 17px;
}

.question-navigator-glow {
  position: absolute;
  inset: 8px 5px;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0),
      rgba(184, 239, 255, 0.64),
      rgba(255, 255, 255, 0)
    );
  opacity: 0.55;
  filter: blur(2px);
  animation:
    lunaNavigatorGlow
    2.8s ease-in-out
    infinite;
}

.question-navigator-panel {
  position: absolute;
  top: 0;
  right: 40px;
  width: 310px;
  max-height:
    min(68vh, 560px);
  padding: 12px;
  overflow: hidden;
  border:
    1px solid
    rgba(174, 229, 255, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(72, 173, 236, 0.16),
      transparent 42%
    ),
    rgba(4, 16, 37, 0.98);
  box-shadow:
    0 28px 72px
      rgba(0, 0, 0, 0.44),
    inset 0 1px 0
      rgba(255, 255, 255, 0.055);
  opacity: 0;
  visibility: hidden;
  transform:
    translateX(10px)
    scale(0.985);
  transform-origin: top right;
  transition:
    opacity var(--normal),
    visibility var(--normal),
    transform var(--normal);
  backdrop-filter:
    blur(20px);
}

.question-navigator:hover .question-navigator-panel,
.question-navigator:focus-within .question-navigator-panel,
.question-navigator.is-open .question-navigator-panel {
  opacity: 1;
  visibility: visible;
  transform:
    translateX(0)
    scale(1);
}

.question-navigator-header {
  padding:
    5px 6px 11px;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.question-navigator-header strong,
.question-navigator-header span {
  display: block;
}

.question-navigator-header strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 760;
}

.question-navigator-header span {
  margin-top: 3px;
  color:
    rgba(202, 234, 250, 0.55);
  font-size: 10px;
}

.question-navigator-list {
  display: grid;
  max-height:
    min(54vh, 430px);
  gap: 5px;
  margin: 0;
  padding:
    10px 0 0;
  overflow-y: auto;
  list-style: none;
  counter-reset: luna-question;
}

.question-navigator-list::-webkit-scrollbar {
  width: 5px;
}

.question-navigator-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    rgba(189, 237, 255, 0.2);
}

.question-navigator-list li {
  counter-increment: luna-question;
}

.question-navigator-item {
  display: grid;
  width: 100%;
  grid-template-columns:
    25px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding:
    9px 10px;
  border:
    1px solid
    transparent;
  border-radius: 11px;
  background: transparent;
  color:
    rgba(231, 244, 252, 0.74);
  font-size: 11px;
  line-height: 1.38;
  text-align: left;
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    transform var(--fast);
}

.question-navigator-item::before {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  content:
    counter(luna-question);
  border:
    1px solid
    rgba(177, 230, 255, 0.18);
  border-radius: 8px;
  background:
    rgba(95, 184, 232, 0.09);
  color: #bdefff;
  font-size: 9px;
  font-weight: 780;
}

.question-navigator-item:hover,
.question-navigator-item:focus-visible,
.question-navigator-item.is-active {
  border-color:
    rgba(176, 229, 255, 0.2);
  background:
    rgba(86, 182, 232, 0.11);
  color: #ffffff;
  outline: none;
  transform:
    translateX(-2px);
}

.question-navigator-empty {
  margin:
    12px 6px 4px;
  color:
    rgba(202, 232, 248, 0.48);
  font-size: 11px;
  line-height: 1.45;
}

@keyframes lunaNavigatorGlow {
  0%,
  100% {
    opacity: 0.25;
    transform:
      translateY(-26px);
  }

  50% {
    opacity: 0.85;
    transform:
      translateY(26px);
  }
}

/* STOP GENERATING */

.composer-stop-button {
  display: grid;
  width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  border:
    1px solid
    rgba(255, 166, 166, 0.38);
  border-radius: 14px;
  background:
    rgba(185, 57, 65, 0.18);
  color: #ffd4d4;
  box-shadow:
    0 8px 22px
      rgba(0, 0, 0, 0.2),
    0 0 18px
      rgba(255, 91, 101, 0.08);
  transition:
    background var(--fast),
    border-color var(--fast),
    color var(--fast),
    transform var(--fast);
}

.composer-stop-button:hover,
.composer-stop-button:focus-visible {
  border-color:
    rgba(255, 186, 186, 0.64);
  background:
    rgba(205, 68, 78, 0.28);
  color: #ffffff;
  outline: none;
}

.composer-stop-button:active {
  transform:
    scale(0.95);
}

.composer-stop-button svg {
  width: 18px;
  height: 18px;
}

/* INLINE VOICE STOP CONTROL */

.inline-voice-status >
span[id$="InlineVoiceText"] {
  min-width: 0;
  flex: 1 1 auto;
}

.inline-voice-stop-button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  padding:
    0 9px;
  border:
    1px solid
    rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background:
    rgba(3, 14, 31, 0.42);
  color:
    rgba(255, 255, 255, 0.88);
  font-size: 10px;
  font-weight: 730;
  transition:
    background var(--fast),
    border-color var(--fast),
    transform var(--fast);
}

.inline-voice-stop-button:hover,
.inline-voice-stop-button:focus-visible {
  border-color:
    rgba(255, 255, 255, 0.34);
  background:
    rgba(255, 255, 255, 0.11);
  outline: none;
}

.inline-voice-stop-button:active {
  transform:
    scale(0.96);
}

.inline-voice-stop-button svg {
  width: 11px;
  height: 11px;
}

/* PER-ANSWER LISTEN CONTROLS */

.assistant-response-actions {
  display: flex;
  min-height: 34px;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  opacity: 0.7;
  transition:
    opacity var(--fast);
}

.thread-message.assistant:hover
.assistant-response-actions,
.thread-message.assistant:focus-within
.assistant-response-actions,
.assistant-response-actions.is-playing {
  opacity: 1;
}

.assistant-action-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding:
    0 10px;
  border:
    1px solid
    rgba(172, 228, 255, 0.14);
  border-radius: 10px;
  background:
    rgba(79, 168, 217, 0.065);
  color:
    rgba(211, 241, 255, 0.7);
  font-size: 10px;
  font-weight: 700;
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    transform var(--fast);
}

.assistant-action-button:hover,
.assistant-action-button:focus-visible,
.assistant-action-button.is-playing {
  border-color:
    rgba(177, 232, 255, 0.34);
  background:
    rgba(75, 181, 235, 0.14);
  color: #ffffff;
  outline: none;
}

.assistant-action-button.is-stop {
  border-color:
    rgba(255, 167, 167, 0.24);
  background:
    rgba(193, 62, 70, 0.12);
  color: #ffd0d0;
}

.assistant-action-button:active {
  transform:
    scale(0.96);
}

.assistant-action-button svg {
  width: 15px;
  height: 15px;
}

/* HISTORY AND PROJECT SELECTION */

.selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin:
    0 0 18px;
  padding:
    12px 14px;
  border:
    1px solid
    rgba(151, 226, 255, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(58, 158, 232, 0.14),
      rgba(69, 208, 194, 0.07)
    ),
    rgba(5, 18, 41, 0.72);
  box-shadow:
    0 14px 34px
      rgba(0, 0, 0, 0.14);
}

.selection-toolbar strong {
  color: #d9f4ff;
  font-size: 13px;
}

.selection-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.selection-toolbar-actions .page-button {
  min-height: 38px;
  padding:
    0 12px;
  font-size: 12px;
}

.entity-card {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
}

.entity-card.is-selected {
  border-color:
    rgba(151, 226, 255, 0.58);
  background:
    linear-gradient(
      145deg,
      rgba(56, 167, 255, 0.17),
      rgba(42, 111, 178, 0.08)
    ),
    rgba(7, 23, 49, 0.9);
  box-shadow:
    0 0 0 3px
      rgba(151, 226, 255, 0.07),
    0 18px 44px
      rgba(0, 0, 0, 0.22);
}

.entity-card-main {
  min-width: 0;
}

.entity-select-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #4daeea;
  cursor: pointer;
}

.entity-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform:
    translateX(5px);
  transition:
    opacity var(--fast),
    transform var(--fast);
}

.entity-card:hover
.entity-card-actions,
.entity-card:focus-within
.entity-card-actions,
.entity-card.is-selected
.entity-card-actions {
  opacity: 1;
  transform:
    translateX(0);
}

.entity-action-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background:
    rgba(255, 255, 255, 0.055);
  color:
    rgba(255, 255, 255, 0.7);
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    transform var(--fast);
}

.entity-action-button:hover,
.entity-action-button:focus-visible {
  border-color:
    rgba(182, 233, 255, 0.29);
  background:
    rgba(91, 182, 228, 0.13);
  color: #ffffff;
  outline: none;
  transform:
    translateY(-1px);
}

.entity-action-button.danger {
  color: #ffc0c0;
}

.entity-action-button.danger:hover,
.entity-action-button.danger:focus-visible {
  border-color:
    rgba(255, 141, 141, 0.3);
  background:
    rgba(181, 49, 49, 0.16);
}

.entity-action-button svg {
  width: 17px;
  height: 17px;
}

/* LUNA-BRANDED PROJECT, RENAME, AND CONFIRMATION DIALOGS */

.entity-editor-dialog {
  width:
    min(
      500px,
      calc(100vw - 42px)
    );
}

.entity-editor-dialog textarea,
.confirmation-dialog .settings-field textarea {
  width: 100%;
  min-height: 105px;
  padding:
    12px 13px;
  resize: vertical;
  border:
    1px solid
    rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  outline: none;
  background:
    rgba(255, 255, 255, 0.065);
  color: #ffffff;
  line-height: 1.48;
}

.entity-editor-dialog textarea:focus,
.confirmation-dialog .settings-field textarea:focus {
  border-color:
    rgba(160, 226, 255, 0.5);
  box-shadow:
    0 0 0 3px
      rgba(112, 205, 255, 0.08);
}

.luna-confirmation-dialog {
  position: relative;
  overflow: hidden;
  border-color:
    rgba(151, 226, 255, 0.2);
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(78, 178, 239, 0.2),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(12, 31, 60, 0.995),
      rgba(5, 17, 37, 0.995)
    );
  text-align: center;
}

.confirmation-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin:
    0 auto 16px;
  border:
    1px solid
    rgba(255, 154, 154, 0.22);
  border-radius: 17px;
  background:
    rgba(181, 49, 49, 0.13);
  color: #ffc1c1;
  box-shadow:
    0 0 28px
      rgba(255, 93, 93, 0.08);
}

.confirmation-icon svg {
  width: 24px;
  height: 24px;
}

.luna-confirmation-dialog .confirmation-actions {
  justify-content: center;
}

/* THINKING AUDIO VISUAL STATE */

.inline-voice-status.is-thinking-sound {
  background:
    linear-gradient(
      90deg,
      rgba(57, 180, 238, 0.1),
      rgba(110, 214, 255, 0.16),
      rgba(57, 180, 238, 0.1)
    );
  background-size:
    200% 100%;
  animation:
    lunaThinkingShimmer
    1.7s linear
    infinite;
}

@keyframes lunaThinkingShimmer {
  from {
    background-position:
      200% 0;
  }

  to {
    background-position:
      -200% 0;
  }
}

/* RESPONSIVE CONVERSATION TOOLS */

@media (max-width: 1180px) {
  .question-navigator {
    right: 10px;
  }

  .question-navigator-panel {
    width: 285px;
  }
}

@media (max-width: 980px) {
  .question-navigator {
    top: 145px;
    right: 7px;
  }

  .question-navigator-handle {
    width: 20px;
    height: 112px;
  }

  .question-navigator-panel {
    right: 32px;
  }
}

@media (max-width: 760px) {
  .selection-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .selection-toolbar-actions {
    width: 100%;
  }

  .selection-toolbar-actions .page-button {
    flex: 1 1 auto;
  }

  .entity-card {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .entity-card-actions {
    grid-column:
      2;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 620px) {
  .question-navigator {
    top: 122px;
    right: 5px;
  }

  .question-navigator-handle {
    width: 20px;
    height: 92px;
  }

  .question-navigator-panel {
    position: fixed;
    top: 82px;
    right: 12px;
    left: 90px;
    width: auto;
    max-height:
      calc(100vh - 170px);
  }

  .question-navigator-list {
    max-height:
      calc(100vh - 270px);
  }

  .inline-voice-stop-button span {
    display: none;
  }

  .inline-voice-stop-button {
    width: 28px;
    padding: 0;
  }

  .assistant-response-actions {
    opacity: 1;
  }

  .assistant-action-button {
    flex: 1 1 auto;
  }

  .home-mode-switcher .mode-button {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

  .entity-editor-dialog {
    width:
      calc(100vw - 20px);
  }
}

/* REDUCED MOTION FOR CONVERSATION ENHANCEMENTS */

body.reduce-motion
.question-navigator-glow,
body.reduce-motion
.inline-voice-status.is-thinking-sound {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .question-navigator-glow,
  .inline-voice-status.is-thinking-sound {
    animation: none !important;
  }
}

/* =========================================================
   LUNA RESPONSE TOOLS, SIDEBAR ALIGNMENT, AND INTERFACE POLISH
   Added for answer actions, document export, Luna notices,
   voice-provider routing controls, duplicate-upload feedback,
   and stronger workspace hover states.
========================================================= */

/* COLLAPSED SIDEBAR ICON ALIGNMENT */

.app-shell:not(.sidebar-open)
.primary-nav {
  justify-items: center;
  padding-inline: 0;
}

.app-shell:not(.sidebar-open)
.nav-item,
.app-shell:not(.sidebar-open)
.sidebar-toggle {
  position: relative;
  left: 0;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border-radius: 16px;
  justify-content: center;
}

.app-shell:not(.sidebar-open)
.nav-item:hover,
.app-shell:not(.sidebar-open)
.nav-item:focus-visible,
.app-shell:not(.sidebar-open)
.sidebar-toggle:hover,
.app-shell:not(.sidebar-open)
.sidebar-toggle:focus-visible {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(185, 236, 255, 0.13),
      rgba(255, 255, 255, 0.075) 58%,
      rgba(255, 255, 255, 0.035)
    );
  box-shadow:
    0 0 0 1px
      rgba(183, 234, 255, 0.08),
    0 0 22px
      rgba(83, 196, 255, 0.14),
    inset 0 1px 0
      rgba(255, 255, 255, 0.055);
}

.app-shell:not(.sidebar-open)
.nav-item svg {
  margin: 0;
}

/*
 * Keep the tooltip vertically centered on the icon's
 * complete hover box.
 */
.app-shell:not(.sidebar-open)
[data-tooltip]::after {
  top: 50%;
  left: calc(100% + 12px);
  transform:
    translate(5px, -50%);
}

.app-shell:not(.sidebar-open)
[data-tooltip]:hover::after,
.app-shell:not(.sidebar-open)
[data-tooltip]:focus-visible::after {
  transform:
    translate(0, -50%);
}

/* WORKSPACE CARD HOVER AND SELECTION */

.content-card,
.entity-card,
.library-card {
  cursor: pointer;
}

.content-card:hover,
.content-card:focus-visible,
.entity-card:hover,
.entity-card:focus-visible,
.library-card:hover,
.library-card:focus-visible,
.library-card:focus-within {
  border-color:
    rgba(167, 228, 255, 0.34);
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(87, 193, 247, 0.15),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(31, 78, 132, 0.28),
      rgba(8, 26, 53, 0.9)
    );
  box-shadow:
    0 0 0 3px
      rgba(143, 222, 255, 0.055),
    0 18px 46px
      rgba(0, 0, 0, 0.24),
    0 0 32px
      rgba(74, 184, 244, 0.11);
  transform:
    translateY(-2px);
  outline: none;
}

.entity-card.is-selected,
.library-card.is-selected {
  border-color:
    rgba(177, 234, 255, 0.68);
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(113, 211, 255, 0.2),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(49, 138, 210, 0.22),
      rgba(9, 30, 61, 0.94)
    );
  box-shadow:
    0 0 0 3px
      rgba(151, 226, 255, 0.09),
    0 20px 48px
      rgba(0, 0, 0, 0.26),
    0 0 38px
      rgba(84, 196, 252, 0.15);
}

.entity-card-actions,
.library-card-actions {
  z-index: 8;
}

/* COMPLETE ANSWER ACTION BAR */

.assistant-response-actions {
  display: grid;
  width: 100%;
  gap: 7px;
  margin-top: 13px;
  opacity: 0.76;
  transition:
    opacity var(--fast);
}

.assistant-response-action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.assistant-action-button {
  min-height: 33px;
  padding:
    0 10px;
  white-space: nowrap;
}

.assistant-action-button[data-assistant-action="copy"],
.assistant-action-button[data-assistant-action="share"],
.assistant-action-button[data-assistant-action="download"],
.assistant-action-button[data-assistant-action="convert-document"] {
  background:
    rgba(68, 155, 207, 0.055);
}

.assistant-action-button[data-assistant-action="convert-document"] {
  border-color:
    rgba(144, 224, 255, 0.22);
  color: #ccefff;
}

.assistant-action-button.is-success {
  border-color:
    rgba(99, 235, 201, 0.38);
  background:
    rgba(41, 182, 146, 0.16);
  color: #cafff2;
}

.assistant-action-status {
  min-height: 16px;
  margin: 0;
  color:
    rgba(207, 235, 248, 0.54);
  font-size: 10px;
  line-height: 1.4;
}

.assistant-action-status:empty {
  display: none;
}

/* DOCUMENT EXPORT DIALOG */

.answer-export-dialog {
  width:
    min(
      510px,
      calc(100vw - 42px)
    );
}

.answer-export-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin:
    0 auto 16px;
  border:
    1px solid
    rgba(156, 227, 255, 0.25);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(70, 177, 236, 0.2),
      rgba(45, 111, 179, 0.1)
    );
  color: #c9f1ff;
  box-shadow:
    0 0 28px
      rgba(92, 199, 250, 0.1);
}

.answer-export-icon svg {
  width: 27px;
  height: 27px;
}

.answer-export-options {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.answer-export-option {
  display: grid;
  width: 100%;
  grid-template-columns:
    42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding:
    12px 14px;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background:
    rgba(255, 255, 255, 0.045);
  color: #ffffff;
  text-align: left;
  transition:
    border-color var(--fast),
    background var(--fast),
    transform var(--fast),
    box-shadow var(--fast);
}

.answer-export-option:hover,
.answer-export-option:focus-visible {
  border-color:
    rgba(165, 229, 255, 0.36);
  background:
    linear-gradient(
      145deg,
      rgba(61, 163, 224, 0.16),
      rgba(255, 255, 255, 0.065)
    );
  box-shadow:
    0 0 0 3px
      rgba(133, 214, 255, 0.055),
    0 12px 30px
      rgba(0, 0, 0, 0.18);
  transform:
    translateY(-1px);
  outline: none;
}

.answer-export-option svg {
  width: 27px;
  height: 27px;
  color: #bfeeff;
}

.answer-export-option span,
.answer-export-option strong,
.answer-export-option small {
  display: block;
}

.answer-export-option strong {
  color: #ffffff;
  font-size: 13px;
}

.answer-export-option small {
  margin-top: 3px;
  color:
    rgba(207, 235, 248, 0.5);
  font-size: 10px;
}

/* VOICE PROVIDER ARCHITECTURE CONTROLS */

.voice-provider-row select {
  min-width: 185px;
}

.voice-provider-status {
  margin-top: 13px;
  padding:
    11px 13px;
  border:
    1px solid
    rgba(156, 226, 255, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(64, 163, 221, 0.09),
      rgba(29, 77, 127, 0.08)
    );
  color:
    rgba(211, 238, 250, 0.64);
  font-size: 11px;
  line-height: 1.52;
}

.voice-provider-status.is-ready {
  border-color:
    rgba(105, 231, 194, 0.22);
  color: #c8fbea;
}

.voice-provider-status.is-unavailable {
  border-color:
    rgba(255, 169, 169, 0.22);
  color: #ffd1d1;
}

/* LIBRARY OPERATION AND DUPLICATE FEEDBACK */

.library-operation-status {
  margin:
    -4px 0 16px;
  padding:
    10px 13px;
  border:
    1px solid
    rgba(156, 226, 255, 0.17);
  border-radius: 12px;
  background:
    rgba(67, 167, 222, 0.08);
  color:
    rgba(214, 241, 252, 0.74);
  font-size: 11px;
  line-height: 1.45;
}

.library-operation-status.is-success {
  border-color:
    rgba(104, 231, 194, 0.22);
  background:
    rgba(44, 176, 143, 0.09);
  color: #caf9eb;
}

.library-operation-status.is-warning {
  border-color:
    rgba(255, 215, 137, 0.24);
  background:
    rgba(191, 135, 35, 0.1);
  color: #ffe6b4;
}

.library-operation-status.is-error {
  border-color:
    rgba(255, 151, 151, 0.25);
  background:
    rgba(184, 54, 62, 0.11);
  color: #ffd0d0;
}

/* LUNA-BRANDED ERROR NOTICES */

.luna-notice-region {
  position: fixed;
  top: 88px;
  right: 24px;
  z-index: 1700;
  display: grid;
  width:
    min(
      420px,
      calc(100vw - 32px)
    );
  gap: 10px;
  pointer-events: none;
}

.luna-error-card {
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 11px;
  padding:
    14px;
  border:
    1px solid
    rgba(255, 157, 157, 0.24);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 99, 110, 0.1),
      transparent 42%
    ),
    rgba(6, 18, 39, 0.985);
  color: #ffffff;
  box-shadow:
    0 20px 58px
      rgba(0, 0, 0, 0.42),
    0 0 28px
      rgba(255, 86, 97, 0.075);
  pointer-events: auto;
  backdrop-filter:
    blur(18px);
  animation:
    lunaNoticeEnter
    190ms ease-out;
}

.luna-error-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border:
    1px solid
    rgba(255, 159, 159, 0.2);
  border-radius: 13px;
  background:
    rgba(182, 52, 61, 0.13);
  color: #ffbdbd;
}

.luna-error-icon svg {
  width: 22px;
  height: 22px;
}

.luna-error-copy {
  min-width: 0;
}

.luna-error-copy strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 13px;
}

.luna-error-copy p {
  margin: 0;
  color:
    rgba(239, 245, 251, 0.66);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.luna-error-copy a {
  display: inline-flex;
  margin-top: 7px;
  color: #bfeeff;
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.luna-error-dismiss {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.58);
}

.luna-error-dismiss:hover,
.luna-error-dismiss:focus-visible {
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.luna-error-dismiss svg {
  width: 15px;
  height: 15px;
}

.luna-connection-card {
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 11px;
  padding:
    14px;
  border:
    1px solid
    rgba(255, 199, 130, 0.24);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 183, 92, 0.1),
      transparent 42%
    ),
    rgba(6, 18, 39, 0.985);
  color: #ffffff;
  box-shadow:
    0 20px 58px
      rgba(0, 0, 0, 0.42),
    0 0 28px
      rgba(255, 183, 92, 0.07);
  pointer-events: auto;
  backdrop-filter:
    blur(18px);
  animation:
    lunaNoticeEnter
    190ms ease-out;
}

.luna-connection-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border:
    1px solid
    rgba(255, 199, 130, 0.2);
  border-radius: 13px;
  background:
    rgba(182, 122, 52, 0.16);
  color: #ffd8a3;
}

.luna-connection-icon svg {
  width: 22px;
  height: 22px;
}

.luna-connection-copy {
  min-width: 0;
}

.luna-connection-copy strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 13px;
}

.luna-connection-copy p {
  margin: 0;
  color:
    rgba(239, 245, 251, 0.66);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.luna-connection-details-toggle {
  display: inline-flex;
  margin-top: 7px;
  color: #ffd8a3;
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.luna-connection-details {
  margin-top: 7px !important;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(239, 245, 251, 0.5) !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px !important;
}

.luna-connection-dismiss {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.58);
}

.luna-connection-dismiss:hover,
.luna-connection-dismiss:focus-visible {
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.luna-connection-dismiss svg {
  width: 15px;
  height: 15px;
}

/*
 * Inline placement: a specific chat turn failed because of a connectivity
 * problem, so the card renders directly in that message's body (see
 * renderThread's message.connectionError branch) instead of the fixed
 * notice region -- it needs its own spacing/width there, and the
 * grid-template's 30px dismiss column collapses cleanly since the inline
 * variant has no dismiss button.
 */
.assistant-body .luna-connection-card {
  grid-template-columns: 42px minmax(0, 1fr);
  max-width: 480px;
  margin-top: 4px;
}

.luna-update-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 30px;
  align-items: start;
  gap: 11px;
  padding: 14px;
  border:
    1px solid
    rgba(150, 210, 255, 0.24);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(110, 190, 255, 0.12),
      transparent 42%
    ),
    rgba(6, 18, 39, 0.985);
  color: #ffffff;
  box-shadow:
    0 20px 58px
      rgba(0, 0, 0, 0.42),
    0 0 28px
      rgba(110, 190, 255, 0.08);
  pointer-events: auto;
  backdrop-filter:
    blur(18px);
  animation:
    lunaNoticeEnter
    190ms ease-out;
}

.luna-update-copy {
  min-width: 0;
}

.luna-update-copy strong {
  display: block;
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 720;
}

.luna-update-refresh-button {
  display: inline-flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(164, 229, 255, 0.42);
  border-radius: 9px;
  background:
    linear-gradient(
      135deg,
      rgba(72, 177, 247, 0.85),
      rgba(68, 220, 203, 0.75)
    ),
    rgba(7, 25, 52, 0.9);
  color: #06162d;
  font-size: 12px;
  font-weight: 740;
  box-shadow:
    0 0 20px rgba(74, 190, 245, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    border-color var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.luna-update-refresh-button:hover,
.luna-update-refresh-button:focus-visible {
  border-color: rgba(189, 239, 255, 0.72);
  box-shadow:
    0 0 0 3px rgba(139, 220, 255, 0.1),
    0 0 26px rgba(85, 198, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  outline: none;
}

.luna-update-dismiss {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.58);
}

.luna-update-dismiss:hover,
.luna-update-dismiss:focus-visible {
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.luna-update-dismiss svg {
  width: 15px;
  height: 15px;
}

@keyframes lunaNoticeEnter {
  from {
    opacity: 0;
    transform:
      translateY(-7px)
      scale(0.985);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* RESPONSIVE RESPONSE TOOLS */

@media (max-width: 760px) {
  .voice-provider-row select {
    width: 100%;
  }

  .assistant-response-action-group {
    width: 100%;
  }

  .assistant-action-button {
    flex:
      1 1 auto;
  }

  .answer-export-option {
    grid-template-columns:
      36px minmax(0, 1fr);
  }

  .luna-notice-region {
    top: 74px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 620px) {
  .app-shell:not(.sidebar-open)
  .nav-item,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle {
    width: 100%;
    height: 55px;
    border-radius: 13px;
  }

  .assistant-action-button span {
    display: inline;
  }

  .assistant-response-action-group {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .answer-export-dialog {
    width:
      calc(100vw - 20px);
  }

  .luna-error-card,
  .luna-connection-card {
    grid-template-columns:
      38px minmax(0, 1fr) 28px;
    padding: 12px;
  }

  .luna-error-icon,
  .luna-connection-icon {
    width: 38px;
    height: 38px;
  }
}

/* REDUCED MOTION FOR RESPONSE TOOLS */

body.reduce-motion
.luna-error-card,
body.reduce-motion
.luna-connection-card,
body.reduce-motion
.luna-update-card,
body.reduce-motion
.answer-export-option {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .luna-error-card,
  .luna-connection-card,
  .luna-update-card,
  .answer-export-option {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   LUNA BATCH ENHANCEMENTS
   Select-all controls, recent conversation menus, account
   entry, partial exports, artifact cards, and final hover polish.
========================================================= */

/* SIDEBAR CENTERING AND LOGO BEHAVIOR */

.sidebar-logo.no-hover-background,
.sidebar-logo[data-no-hover-background="true"] {
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-logo.no-hover-background:hover,
.sidebar-logo.no-hover-background:focus-visible,
.sidebar-logo[data-no-hover-background="true"]:hover,
.sidebar-logo[data-no-hover-background="true"]:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
  outline: none;
}

.app-shell:not(.sidebar-open) .primary-nav {
  width: 100%;
  place-items: center;
}

.app-shell:not(.sidebar-open) .nav-item,
.app-shell:not(.sidebar-open) .sidebar-toggle {
  left: auto;
  right: auto;
  display: grid;
  place-items: center;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

.app-shell:not(.sidebar-open) .nav-item svg,
.app-shell:not(.sidebar-open) .sidebar-toggle svg {
  position: static;
  margin: 0;
  transform-origin: center;
}

.app-shell:not(.sidebar-open) .nav-item::before,
.app-shell:not(.sidebar-open) .sidebar-toggle::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  pointer-events: none;
}

/* TOP-RIGHT ACCOUNT ENTRY */

.topbar-account {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-entry-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.auth-entry-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(5, 18, 41, 0.74);
  color: #ffffff;
  font-size: 13px;
  font-weight: 720;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition:
    border-color var(--fast),
    background var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
  backdrop-filter: blur(16px);
}

.auth-entry-button:hover,
.auth-entry-button:focus-visible {
  border-color: rgba(176, 231, 255, 0.38);
  background: rgba(255, 255, 255, 0.11);
  box-shadow:
    0 0 0 3px rgba(139, 220, 255, 0.055),
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(85, 198, 255, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.auth-entry-button.primary {
  border-color: rgba(164, 229, 255, 0.42);
  background:
    linear-gradient(
      135deg,
      rgba(72, 177, 247, 0.3),
      rgba(68, 220, 203, 0.16)
    ),
    rgba(7, 25, 52, 0.9);
  box-shadow:
    0 0 26px rgba(74, 190, 245, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.auth-entry-button.primary:hover,
.auth-entry-button.primary:focus-visible {
  border-color: rgba(189, 239, 255, 0.72);
  background:
    linear-gradient(
      135deg,
      rgba(81, 190, 255, 0.39),
      rgba(75, 230, 211, 0.22)
    ),
    rgba(8, 29, 59, 0.94);
  box-shadow:
    0 0 0 3px rgba(141, 224, 255, 0.07),
    0 0 34px rgba(74, 194, 250, 0.2),
    0 15px 38px rgba(0, 0, 0, 0.26);
}

/* SELECT ALL CONTROLS */

.selection-select-all {
  border-color: rgba(151, 226, 255, 0.24);
  background:
    linear-gradient(
      135deg,
      rgba(58, 158, 232, 0.13),
      rgba(69, 208, 194, 0.07)
    );
  color: #d8f5ff;
}

.selection-select-all:hover,
.selection-select-all:focus-visible,
.selection-select-all[aria-pressed="true"] {
  border-color: rgba(177, 234, 255, 0.58);
  background:
    linear-gradient(
      135deg,
      rgba(75, 183, 245, 0.23),
      rgba(73, 219, 204, 0.12)
    );
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(151, 226, 255, 0.06),
    0 0 26px rgba(82, 195, 249, 0.14);
  outline: none;
}

/* STRONGER DELETE AND SAVE HOVER GLOWS */

.page-button.danger:hover,
.page-button.danger:focus-visible,
.settings-action-button.danger:hover,
.settings-action-button.danger:focus-visible,
.entity-action-button.danger:hover,
.entity-action-button.danger:focus-visible,
#historyBulkDeleteButton:hover,
#historyBulkDeleteButton:focus-visible,
#projectBulkDeleteButton:hover,
#projectBulkDeleteButton:focus-visible,
#libraryBulkDeleteButton:hover,
#libraryBulkDeleteButton:focus-visible,
#projectDeleteCurrentButton:hover,
#projectDeleteCurrentButton:focus-visible,
#filePreviewRemoveButton:hover,
#filePreviewRemoveButton:focus-visible,
#confirmationConfirmButton:hover,
#confirmationConfirmButton:focus-visible,
#logoutConfirmButton:hover,
#logoutConfirmButton:focus-visible {
  border-color: rgba(255, 127, 137, 0.72);
  background:
    linear-gradient(
      145deg,
      rgba(224, 66, 78, 0.34),
      rgba(143, 34, 45, 0.26)
    );
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(255, 100, 112, 0.075),
    0 0 30px rgba(255, 73, 88, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
  outline: none;
}

#fileRenameSaveButton:hover,
#fileRenameSaveButton:focus-visible,
#conversationRenameSaveButton:hover,
#conversationRenameSaveButton:focus-visible,
#projectEditorSaveButton:hover,
#projectEditorSaveButton:focus-visible,
#createFolderSaveButton:hover,
#createFolderSaveButton:focus-visible {
  border-color: rgba(187, 238, 255, 0.72);
  background:
    linear-gradient(
      135deg,
      rgba(71, 183, 247, 0.34),
      rgba(70, 222, 206, 0.2)
    );
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(142, 222, 255, 0.07),
    0 0 32px rgba(77, 194, 250, 0.19),
    0 13px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
  outline: none;
}

/* RECENT CONVERSATION THREE-DOT MENUS */

.recent-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
}

.recent-list li:hover,
.recent-list li:focus-within {
  background: rgba(255, 255, 255, 0.045);
}

/*
 * The currently open conversation, kept visible whether the customer just
 * clicked it or has been typing/sending in it for a while -- matches the
 * same white-overlay treatment already used for the active item in the
 * main sidebar nav (.nav-item.active), just stronger than plain :hover so
 * it reads as "you are here" rather than a passing cursor.
 */
.recent-list li.is-active-thread {
  background: rgba(255, 255, 255, 0.1);
}

.recent-list li.is-active-thread .recent-thread-title {
  color: #ffffff;
}

.recent-list li > .recent-thread-button {
  min-width: 0;
  background: transparent;
}

.recent-thread-actions {
  position: relative;
  z-index: 18;
  display: grid;
  place-items: center;
}

.recent-thread-more-button {
  display: grid !important;
  width: 28px !important;
  height: 28px;
  min-width: 28px;
  place-items: center;
  padding: 0 !important;
  border: 1px solid transparent;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.56);
  opacity: 0;
  transition:
    opacity var(--fast),
    border-color var(--fast),
    background var(--fast),
    color var(--fast);
}

.recent-list li:hover .recent-thread-more-button,
.recent-list li:focus-within .recent-thread-more-button,
.recent-thread-more-button[aria-expanded="true"] {
  opacity: 1;
}

.recent-thread-more-button:hover,
.recent-thread-more-button:focus-visible,
.recent-thread-more-button[aria-expanded="true"] {
  border-color: rgba(181, 232, 255, 0.18);
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff;
  outline: none;
}

.recent-thread-more-button svg {
  width: 16px;
  height: 16px;
}

.recent-thread-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 1300;
  width: 190px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(81, 181, 236, 0.13),
      transparent 42%
    ),
    rgba(4, 15, 34, 0.985);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.44),
    0 0 28px rgba(76, 190, 247, 0.08);
  backdrop-filter: blur(18px);
}

.recent-thread-menu button {
  display: flex !important;
  width: 100% !important;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: rgba(238, 247, 252, 0.8);
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.recent-thread-menu button:hover,
.recent-thread-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff;
  outline: none;
}

.recent-thread-menu button.danger {
  color: #ffc0c0;
}

.recent-thread-menu button.danger:hover,
.recent-thread-menu button.danger:focus-visible {
  background: rgba(192, 48, 59, 0.19) !important;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 78, 92, 0.1);
}

.recent-thread-menu svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/*
 * Pinned conversations should look like normal conversation rows.
 * Their location inside the Pinned section is the only pin indicator.
 */
.recent-thread-button.is-pinned .recent-thread-title::before,
.recent-thread-button[data-pinned="true"] .recent-thread-title::before {
  display: none;
  content: none;
}

/* PARTIAL RESPONSE SELECTION ACTIONS */

.assistant-selection-actions {
  position: sticky;
  bottom: 10px;
  z-index: 24;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 7px;
  border: 1px solid rgba(173, 231, 255, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      rgba(47, 128, 190, 0.2),
      rgba(5, 20, 43, 0.96)
    );
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(81, 191, 244, 0.1);
  backdrop-filter: blur(16px);
}

.assistant-selection-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(177, 232, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(227, 245, 253, 0.78);
  font-size: 10px;
  font-weight: 710;
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.assistant-selection-button:hover,
.assistant-selection-button:focus-visible {
  border-color: rgba(183, 235, 255, 0.42);
  background: rgba(78, 184, 235, 0.16);
  color: #ffffff;
  box-shadow: 0 0 22px rgba(85, 199, 251, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.assistant-selection-button svg {
  width: 14px;
  height: 14px;
}

/* CODE-BLOCK-SPECIFIC ACTIONS */

.assistant-code-block {
  position: relative;
  margin: 18px 0;
}

.assistant-code-block > pre {
  margin: 0;
  padding-top: 48px;
}

.assistant-code-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.assistant-code-action {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(178, 233, 255, 0.15);
  border-radius: 8px;
  background: rgba(4, 16, 35, 0.82);
  color: rgba(225, 244, 253, 0.7);
  font-size: 9px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.assistant-code-action:hover,
.assistant-code-action:focus-visible {
  border-color: rgba(182, 234, 255, 0.38);
  background: rgba(73, 174, 226, 0.16);
  color: #ffffff;
  outline: none;
}

/* GENERATED ARTIFACT CARDS */

.generated-artifact-card {
  display: grid;
  width: min(100%, 660px);
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(161, 229, 255, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(78, 185, 239, 0.15),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(27, 76, 128, 0.24),
      rgba(6, 21, 45, 0.93)
    );
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(75, 191, 247, 0.08);
}

.generated-artifact-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(173, 232, 255, 0.2);
  border-radius: 14px;
  background: rgba(78, 180, 231, 0.12);
  color: #c9f1ff;
}

.generated-artifact-icon svg {
  width: 25px;
  height: 25px;
}

.generated-artifact-copy {
  min-width: 0;
}

.generated-artifact-title,
.generated-artifact-meta {
  display: block;
}

.generated-artifact-title {
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generated-artifact-meta {
  margin-top: 4px;
  color: rgba(211, 238, 250, 0.54);
  font-size: 10px;
}

.generated-artifact-history {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.generated-artifact-history:empty {
  display: none;
}

.generated-artifact-history-item {
  position: relative;
  padding-left: 13px;
  color: rgba(211, 238, 250, 0.34);
  font-size: 10px;
  line-height: 1.4;
}

.generated-artifact-history-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(78, 161, 255, 0.45);
}

.generated-artifact-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

/* LOGIN / CREATE ACCOUNT DIALOG */

.auth-dialog {
  width: min(440px, calc(100vw - 42px));
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid rgba(162, 228, 255, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 50% -12%,
      rgba(75, 177, 238, 0.2),
      transparent 46%
    ),
    linear-gradient(
      180deg,
      rgba(11, 28, 55, 0.995),
      rgba(5, 17, 37, 0.995)
    );
  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.58),
    0 0 38px rgba(77, 191, 246, 0.08);
  animation: modalScaleIn 190ms ease;
}

.auth-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.auth-dialog-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 27px;
  font-weight: 660;
  letter-spacing: -0.025em;
}

.auth-dialog-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 22px 0 15px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.16);
}

.auth-tab-button {
  min-height: 38px;
  border-radius: 9px;
  background: transparent;
  color: rgba(229, 244, 251, 0.58);
  font-size: 12px;
  font-weight: 720;
  transition:
    background var(--fast),
    color var(--fast),
    box-shadow var(--fast);
}

.auth-tab-button:hover,
.auth-tab-button:focus-visible {
  color: #ffffff;
  outline: none;
}

.auth-tab-button.active,
.auth-tab-button[aria-selected="true"] {
  background:
    linear-gradient(
      145deg,
      rgba(77, 181, 239, 0.23),
      rgba(255, 255, 255, 0.08)
    );
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.auth-provider-button,
.auth-primary-button {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 720;
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.auth-provider-button {
  background: rgba(255, 255, 255, 0.065);
  color: #ffffff;
}

.auth-provider-button:hover,
.auth-provider-button:focus-visible {
  border-color: rgba(179, 233, 255, 0.36);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 24px rgba(81, 193, 248, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.auth-google-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #315f9d;
  font-size: 13px;
  font-weight: 830;
}

.auth-separator {
  position: relative;
  margin: 20px 0 14px;
  color: rgba(215, 238, 249, 0.42);
  font-size: 10px;
  text-align: center;
}

.auth-separator::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, 0.08);
}

.auth-separator span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 10px;
  background: rgba(8, 24, 48, 0.98);
}

.auth-dialog .settings-field {
  margin-top: 13px;
}

.auth-dialog .settings-field > span {
  color: rgba(238, 247, 252, 0.72);
  font-size: 11px;
  font-weight: 680;
}

.auth-dialog .settings-field input {
  width: 100%;
  min-height: 45px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  outline: none;
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

.auth-dialog .settings-field input:focus {
  border-color: rgba(174, 231, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(120, 210, 255, 0.075);
}

.auth-primary-button {
  margin-top: 18px;
  border-color: rgba(175, 233, 255, 0.42);
  background:
    linear-gradient(
      135deg,
      rgba(68, 179, 247, 0.36),
      rgba(67, 220, 203, 0.2)
    );
  color: #ffffff;
  box-shadow: 0 0 26px rgba(74, 192, 247, 0.11);
}

.auth-primary-button:hover,
.auth-primary-button:focus-visible {
  border-color: rgba(195, 242, 255, 0.76);
  background:
    linear-gradient(
      135deg,
      rgba(76, 194, 255, 0.46),
      rgba(73, 232, 213, 0.27)
    );
  box-shadow:
    0 0 0 3px rgba(142, 223, 255, 0.07),
    0 0 35px rgba(76, 195, 250, 0.2);
  transform: translateY(-1px);
  outline: none;
}

.auth-link-button {
  display: block;
  margin: 13px auto 0;
  padding: 5px 8px;
  border-radius: 7px;
  background: transparent;
  color: #bfeeff;
  font-size: 11px;
  font-weight: 680;
}

.auth-link-button:hover,
.auth-link-button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  outline: none;
}

.auth-status-message {
  min-height: 18px;
  margin: 12px 0 0;
  color: #ffd0d0;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.auth-status-message:empty {
  display: none;
}

.auth-legal-copy {
  margin: 15px 0 0;
  color: rgba(210, 235, 247, 0.4);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

/* RESPONSIVE BATCH ENHANCEMENTS */

@media (max-width: 760px) {
  .auth-entry-button {
    min-height: 39px;
    padding: 0 12px;
    font-size: 11px;
  }

  .recent-thread-more-button {
    opacity: 1;
  }

  .generated-artifact-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .generated-artifact-icon {
    width: 44px;
    height: 44px;
  }

  .generated-artifact-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .assistant-selection-actions {
    position: static;
  }
}

@media (max-width: 620px) {
  .topbar {
    gap: 8px;
  }

  .auth-entry-actions {
    gap: 6px;
  }

  .auth-entry-button {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 10px;
  }

  .recent-thread-menu {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 82px;
    left: 12px;
    width: auto;
  }

  .assistant-selection-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .assistant-selection-button {
    width: 100%;
  }

  .generated-artifact-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 12px;
  }

  .generated-artifact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .generated-artifact-actions .page-button {
    width: 100%;
  }

  .auth-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 20px;
    border-radius: 18px;
  }
}

/* REDUCED MOTION FOR BATCH ENHANCEMENTS */

body.reduce-motion .auth-entry-button,
body.reduce-motion .recent-thread-menu,
body.reduce-motion .assistant-selection-actions,
body.reduce-motion .generated-artifact-card,
body.reduce-motion .auth-dialog {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-entry-button,
  .recent-thread-menu,
  .assistant-selection-actions,
  .generated-artifact-card,
  .auth-dialog {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   LUNA SUPABASE AUTHENTICATION COMPLETION
   Account loading, login/signup/recovery states, password
   controls, security settings, and hidden conversation scrollbar.
========================================================= */

/* KEEP CONVERSATION SCROLLING WHILE HIDING THE VISIBLE BAR */

.message-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.message-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ACCOUNT LOADING STATE */

.topbar-account {
  min-height: 51px;
}

.auth-account-loading {
  display: inline-flex;
  min-width: 51px;
  min-height: 51px;
  align-items: center;
  justify-content: center;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background:
    rgba(5, 18, 41, 0.58);
  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, 0.18);
  backdrop-filter:
    blur(16px);
}

.auth-account-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9efff;
  box-shadow:
    0 0 0 0
      rgba(164, 229, 255, 0.36);
  animation:
    lunaAuthLoadingPulse
    1.25s ease-in-out
    infinite;
}

@keyframes lunaAuthLoadingPulse {
  0%,
  100% {
    opacity: 0.55;
    transform:
      scale(0.82);
    box-shadow:
      0 0 0 0
      rgba(164, 229, 255, 0.28);
  }

  50% {
    opacity: 1;
    transform:
      scale(1.08);
    box-shadow:
      0 0 0 9px
      rgba(164, 229, 255, 0);
  }
}

/* AUTH DIALOG STATE AND DESCRIPTION */

.auth-dialog {
  position: relative;
}

.auth-dialog-description {
  max-width: 320px;
  margin:
    8px 0 0;
  color:
    rgba(220, 239, 249, 0.55);
  font-size: 11px;
  line-height: 1.5;
}

.auth-dialog[data-auth-mode="recovery"]
.auth-dialog-tabs,
.auth-dialog[data-auth-mode="recovery"]
.auth-provider-button,
.auth-dialog[data-auth-mode="recovery"]
.auth-separator,
.auth-dialog[data-auth-mode="recovery"]
#authPasswordField,
.auth-dialog[data-auth-mode="recovery"]
#authConfirmPasswordField,
.auth-dialog[data-auth-mode="recovery"]
#authNameField,
.auth-dialog[data-auth-mode="recovery"]
#authForgotPasswordButton {
  display: none;
}

.auth-dialog[data-auth-mode="recovery"]
#authBackToLoginButton {
  display: block;
}

.auth-dialog[data-auth-mode="create"]
#authNameField,
.auth-dialog[data-auth-mode="create"]
#authConfirmPasswordField,
.auth-dialog[data-auth-mode="create"]
#authPasswordRequirements {
  display: grid;
}

/* PASSWORD CONTROLS */

.auth-password-input-wrap {
  position: relative;
  display: block;
}

.auth-dialog
.auth-password-input-wrap input {
  padding-right: 70px;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  min-width: 50px;
  min-height: 31px;
  padding:
    0 8px;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    rgba(3, 14, 31, 0.48);
  color:
    rgba(217, 240, 250, 0.62);
  font-size: 9px;
  font-weight: 720;
  transform:
    translateY(-50%);
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast);
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible,
.auth-password-toggle[aria-pressed="true"] {
  border-color:
    rgba(177, 232, 255, 0.32);
  background:
    rgba(74, 176, 228, 0.15);
  color: #ffffff;
  outline: none;
}

.auth-password-requirements {
  margin:
    7px 0 0;
  color:
    rgba(204, 231, 243, 0.46);
  font-size: 9px;
  line-height: 1.45;
}

/* AUTH BUTTON BUSY STATES */

.auth-provider-button:disabled,
.auth-primary-button:disabled,
.auth-link-button:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
  box-shadow: none;
}

.auth-dialog.is-busy::after,
#passwordUpdateDialog.is-busy::after {
  position: absolute;
  inset: 0;
  z-index: 15;
  content: "";
  border-radius: inherit;
  background:
    rgba(3, 13, 29, 0.22);
  pointer-events: none;
}

/* AUTH STATUS TYPES */

.auth-status-message {
  min-height: 20px;
  padding:
    0 4px;
}

.auth-status-message.is-success {
  color: #c9faeb;
}

.auth-status-message.is-warning {
  color: #ffe3ad;
}

.auth-status-message.is-error {
  color: #ffd0d0;
}

.auth-status-message.is-info {
  color: #c9efff;
}

/* DISABLED AUTH MESSAGE */

.auth-disabled-message {
  margin-top: 18px;
  padding:
    14px;
  border:
    1px solid
    rgba(255, 213, 137, 0.2);
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      rgba(191, 135, 35, 0.1),
      rgba(255, 255, 255, 0.035)
    );
  color: #ffe4b3;
}

.auth-disabled-message p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

/* PASSWORD UPDATE DIALOG */

#passwordUpdateDialog {
  width:
    min(
      440px,
      calc(100vw - 42px)
    );
}

#passwordUpdateDialog
.auth-primary-button {
  margin-top: 20px;
}

#passwordUpdateStatusMessage {
  margin-bottom: 0;
}

/* SECURITY SETTINGS */

#securityAuthStatusPill {
  flex: 0 0 auto;
}

#securityAuthStatusPill.is-signed-in {
  border-color:
    rgba(105, 231, 194, 0.28);
  background:
    rgba(44, 176, 143, 0.11);
  color: #caf9eb !important;
}

#securityAuthStatusPill.is-signed-out {
  border-color:
    rgba(173, 226, 255, 0.2);
  background:
    rgba(72, 166, 219, 0.08);
  color: #c9efff !important;
}

#securityAuthStatusPill.is-unavailable {
  border-color:
    rgba(255, 185, 123, 0.25);
  background:
    rgba(182, 112, 33, 0.11);
  color: #ffe0b7 !important;
}

#securityAccountEmail {
  overflow-wrap: anywhere;
}

#settingsLoginButton {
  border-color:
    rgba(164, 229, 255, 0.38);
  background:
    linear-gradient(
      135deg,
      rgba(72, 177, 247, 0.24),
      rgba(68, 220, 203, 0.13)
    );
}

#settingsLoginButton:hover,
#settingsLoginButton:focus-visible {
  border-color:
    rgba(189, 239, 255, 0.68);
  box-shadow:
    0 0 0 3px
      rgba(141, 224, 255, 0.06),
    0 0 30px
      rgba(74, 194, 250, 0.16);
}

/* AUTH FOCUS AND VALIDATION */

.auth-dialog input[aria-invalid="true"],
#passwordUpdateDialog input[aria-invalid="true"] {
  border-color:
    rgba(255, 130, 139, 0.62);
  box-shadow:
    0 0 0 3px
      rgba(255, 86, 99, 0.08);
}

.auth-dialog input[aria-invalid="false"],
#passwordUpdateDialog input[aria-invalid="false"] {
  border-color:
    rgba(105, 231, 194, 0.35);
}

.auth-dialog input:-webkit-autofill,
.auth-dialog input:-webkit-autofill:hover,
.auth-dialog input:-webkit-autofill:focus,
#passwordUpdateDialog input:-webkit-autofill,
#passwordUpdateDialog input:-webkit-autofill:hover,
#passwordUpdateDialog input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  box-shadow:
    0 0 0 1000px
    rgba(9, 27, 52, 0.98)
    inset;
  transition:
    background-color
    9999s ease-out;
}

/* PROFILE IMAGE TRANSITION */

.avatar-button img,
.avatar-button #avatarInitials {
  transition:
    opacity var(--fast),
    transform var(--fast);
}

.avatar-button.is-updating img,
.avatar-button.is-updating #avatarInitials {
  opacity: 0.55;
  transform:
    scale(0.94);
}

/* RESPONSIVE AUTH COMPLETION */

@media (max-width: 760px) {
  .auth-account-loading {
    min-width: 45px;
    min-height: 45px;
    border-radius: 14px;
  }

  .auth-dialog-description {
    max-width: none;
  }

  #passwordUpdateDialog {
    width:
      calc(100vw - 20px);
  }
}

@media (max-width: 620px) {
  .topbar-account {
    min-height: 42px;
  }

  .auth-account-loading {
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  .auth-dialog-header h2 {
    font-size: 24px;
  }

  .auth-dialog-description {
    font-size: 10px;
  }

  .auth-password-toggle {
    right: 6px;
    min-width: 46px;
    min-height: 29px;
  }

  .auth-dialog
  .auth-password-input-wrap input {
    padding-right: 64px;
  }
}

/* REDUCED MOTION FOR AUTH */

body.reduce-motion
.auth-account-loading-dot {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-account-loading-dot {
    animation: none !important;
  }
}

/* =========================================================
   LUNA UI ENHANCEMENTS — PHASE 2
   Visual support for the updated index.html structure:
   logo highlight, right-side Voice Mode controls, live voice
   transcripts, Library thumbnails, feedback, legal links,
   project selection, conversation branching, account pages,
   confirmation dialogs, and background-response notices.
========================================================= */

/* ---------------------------------------------------------
   PRECISE COLLAPSED SIDEBAR CENTERING
--------------------------------------------------------- */

.app-shell:not(.sidebar-open) .nav-item,
.app-shell:not(.sidebar-open) .sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.app-shell:not(.sidebar-open) .nav-item::before,
.app-shell:not(.sidebar-open) .sidebar-toggle::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  inset: auto;
  content: "";
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    border-color var(--fast),
    background var(--fast),
    box-shadow var(--fast);
}

.app-shell:not(.sidebar-open) .nav-item:hover,
.app-shell:not(.sidebar-open) .nav-item:focus-visible,
.app-shell:not(.sidebar-open) .sidebar-toggle:hover,
.app-shell:not(.sidebar-open) .sidebar-toggle:focus-visible {
  background: transparent;
  box-shadow: none;
}

.app-shell:not(.sidebar-open) .nav-item:hover::before,
.app-shell:not(.sidebar-open) .nav-item:focus-visible::before,
.app-shell:not(.sidebar-open) .nav-item.active::before,
.app-shell:not(.sidebar-open) .sidebar-toggle:hover::before,
.app-shell:not(.sidebar-open) .sidebar-toggle:focus-visible::before {
  border-color: rgba(183, 234, 255, 0.09);
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(185, 236, 255, 0.13),
      rgba(255, 255, 255, 0.075) 58%,
      rgba(255, 255, 255, 0.035)
    );
  box-shadow:
    0 0 22px rgba(83, 196, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.app-shell:not(.sidebar-open) .nav-item svg,
.app-shell:not(.sidebar-open) .sidebar-toggle svg {
  position: relative;
  z-index: 2;
  margin: 0;
}

/* ---------------------------------------------------------
   RESTORED TOP-LEFT LUNA LOGO HIGHLIGHT
--------------------------------------------------------- */

.sidebar-logo {
  position: relative;
  isolation: isolate;
}

.sidebar-logo-highlight {
  position: absolute;
  inset: 1px;
  z-index: 0;
  border: 1px solid rgba(170, 230, 255, 0.16);
  border-radius: 17px;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(67, 167, 229, 0.18),
      rgba(35, 79, 132, 0.12)
    ),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 9px 24px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(76, 190, 247, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    border-color var(--fast),
    background var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.sidebar-logo-frame {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.sidebar-logo.no-hover-background,
.sidebar-logo[data-no-hover-background="true"] {
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-logo.no-hover-background:hover .sidebar-logo-highlight,
.sidebar-logo.no-hover-background:focus-visible .sidebar-logo-highlight,
.sidebar-logo[data-no-hover-background="true"]:hover .sidebar-logo-highlight,
.sidebar-logo[data-no-hover-background="true"]:focus-visible .sidebar-logo-highlight {
  border-color: rgba(188, 238, 255, 0.34);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.16),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(75, 183, 242, 0.24),
      rgba(39, 88, 146, 0.16)
    ),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    0 0 0 3px rgba(136, 219, 255, 0.05),
    0 11px 28px rgba(0, 0, 0, 0.22),
    0 0 30px rgba(83, 198, 252, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.085);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   VOICE MODE NEXT TO SEND
--------------------------------------------------------- */

.composer-options .composer-voice-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

.composer-home .composer-options .composer-voice-action {
  min-width: 104px;
}

.composer-thread .composer-options .composer-voice-action {
  min-width: 102px;
}

.composer-options .composer-voice-action + .composer-send-button,
.composer-options .composer-stop-button + .composer-send-button {
  margin-left: 1px;
}

/* ---------------------------------------------------------
   LIVE VOICE TRANSCRIPT
--------------------------------------------------------- */

.voice-live-transcript {
  width: min(900px, 100%);
  max-height: 184px;
  margin: 0 auto 12px;
  overflow: hidden;
  border: 1px solid rgba(161, 227, 255, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(74, 178, 237, 0.14),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(13, 39, 75, 0.72),
      rgba(4, 17, 38, 0.9)
    );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: left;
  backdrop-filter: blur(16px);
}

.thread-voice-live-transcript {
  width: 100%;
  max-height: 160px;
  flex: 0 0 auto;
  margin: 10px 0 0;
}

.voice-live-transcript-scroll {
  display: grid;
  max-height: inherit;
  gap: 9px;
  padding: 12px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(188, 236, 255, 0.2)
    transparent;
}

.voice-live-transcript-scroll::-webkit-scrollbar {
  width: 5px;
}

.voice-live-transcript-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(188, 236, 255, 0.2);
}

.voice-live-turn {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}

.voice-live-turn.user {
  border-color: rgba(188, 235, 255, 0.14);
  background: rgba(84, 172, 220, 0.07);
}

.voice-live-turn.assistant {
  border-color: rgba(133, 226, 207, 0.14);
  background: rgba(57, 177, 151, 0.055);
}

.voice-live-speaker {
  color: rgba(199, 235, 251, 0.58);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.voice-live-turn p {
  margin: 0;
  color: rgba(243, 249, 252, 0.9);
  font-size: 12px;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------
   LEGAL COPY
--------------------------------------------------------- */

.continuation-legal-copy,
.thread-legal-links,
.app-footer-legal,
.auth-legal-copy {
  color: rgba(210, 235, 247, 0.38);
  font-size: 9px;
  line-height: 1.5;
}

.continuation-legal-copy {
  margin: 11px auto 0;
  text-align: center;
}

.thread-legal-links {
  display: block;
  margin-top: 5px;
}

.continuation-legal-copy a,
.thread-legal-links a,
.app-footer-legal a,
.auth-legal-copy a {
  color: rgba(197, 233, 249, 0.55);
  text-decoration: underline;
  text-decoration-color: rgba(197, 233, 249, 0.25);
  text-underline-offset: 2px;
}

.continuation-legal-copy a:hover,
.continuation-legal-copy a:focus-visible,
.thread-legal-links a:hover,
.thread-legal-links a:focus-visible,
.app-footer-legal a:hover,
.app-footer-legal a:focus-visible,
.auth-legal-copy a:hover,
.auth-legal-copy a:focus-visible {
  color: #ffffff;
  outline: none;
}

/* ---------------------------------------------------------
   SMALL GLOBAL FOOTER
--------------------------------------------------------- */

.app-footer {
  position: fixed;
  right: 22px;
  bottom: 12px;
  z-index: 34;
  display: flex;
  max-width: min(560px, calc(100vw - 150px));
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 13px;
  color: rgba(210, 235, 247, 0.34);
  pointer-events: none;
}

.app-footer-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
}

.app-footer-link {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 7px;
  background: transparent;
  color: rgba(210, 235, 247, 0.4);
  font-size: 9px;
  font-weight: 650;
  transition:
    background var(--fast),
    color var(--fast);
}

.app-footer-link:hover,
.app-footer-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

.app-footer-link svg {
  width: 12px;
  height: 12px;
}

.app-footer-legal {
  margin: 0;
  pointer-events: auto;
}

/* ---------------------------------------------------------
   LIBRARY PICKER THUMBNAILS
--------------------------------------------------------- */

.library-picker-grid {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(178px, 1fr)
    );
  max-height: min(56vh, 500px);
  margin:
    18px 20px 0;
  padding-right: 2px;
  overflow-y: auto;
}

.library-picker-item {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(25, 66, 112, 0.16),
      rgba(6, 21, 45, 0.72)
    );
  color: #ffffff;
  text-align: left;
  transition:
    border-color var(--fast),
    background var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.library-picker-item:hover,
.library-picker-item:focus-visible {
  border-color: rgba(174, 231, 255, 0.36);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(81, 188, 241, 0.14),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(34, 90, 148, 0.28),
      rgba(7, 25, 52, 0.9)
    );
  box-shadow:
    0 0 0 3px rgba(139, 219, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
  outline: none;
}

.library-picker-thumbnail {
  position: relative;
  display: grid;
  width: 64px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(91, 175, 233, 0.15),
      transparent 48%
    ),
    rgba(0, 0, 0, 0.2);
  color: #c7efff;
}

.library-picker-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-picker-thumbnail-fallback {
  width: 23px;
  height: 23px;
}

.library-picker-item-copy {
  min-width: 0;
}

.library-picker-item-title,
.library-picker-item-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-picker-item-title {
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.library-picker-item-meta {
  margin-top: 4px;
  color: rgba(215, 239, 250, 0.43);
  font-size: 9px;
}

.library-picker-item-action {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  color: rgba(202, 237, 251, 0.54);
  transition:
    background var(--fast),
    color var(--fast);
}

.library-picker-item:hover .library-picker-item-action,
.library-picker-item:focus-visible .library-picker-item-action {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.library-picker-item-action svg {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------
   HISTORY BULK MOVE AND PROJECT PICKER
--------------------------------------------------------- */

#historyBulkMoveButton {
  border-color: rgba(151, 226, 255, 0.22);
  background:
    linear-gradient(
      135deg,
      rgba(58, 158, 232, 0.13),
      rgba(69, 208, 194, 0.07)
    );
  color: #d9f5ff;
}

#historyBulkMoveButton:hover,
#historyBulkMoveButton:focus-visible {
  border-color: rgba(180, 235, 255, 0.52);
  background:
    linear-gradient(
      135deg,
      rgba(75, 183, 245, 0.24),
      rgba(73, 219, 204, 0.13)
    );
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(151, 226, 255, 0.055),
    0 0 27px rgba(82, 195, 249, 0.13);
  outline: none;
}

.project-picker-dialog {
  width: min(640px, calc(100vw - 42px));
}

.project-picker-dialog .page-search-box {
  width: calc(100% - 40px);
  margin: 18px auto 0;
}

.project-picker-dialog #projectPickerList {
  max-height: min(50vh, 430px);
  margin:
    17px 20px 0;
  overflow-y: auto;
}

.project-picker-empty {
  margin: 22px 20px 4px;
  padding: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(5, 18, 41, 0.45);
  color: rgba(216, 238, 249, 0.5);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ---------------------------------------------------------
   FEEDBACK AND REPORT-A-PROBLEM DIALOG
--------------------------------------------------------- */

.feedback-dialog {
  width: min(520px, calc(100vw - 42px));
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  text-align: left;
}

.feedback-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.feedback-dialog-header h2 {
  margin-bottom: 6px;
}

.feedback-dialog-header p:last-child {
  margin: 0;
  color: rgba(221, 240, 249, 0.56);
  font-size: 11px;
  line-height: 1.5;
}

.feedback-rating-fieldset {
  min-width: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.feedback-rating-fieldset legend {
  margin-bottom: 9px;
  color: rgba(237, 247, 252, 0.74);
  font-size: 11px;
  font-weight: 680;
}

.feedback-stars {
  display: flex;
  align-items: center;
  gap: 5px;
}

.feedback-stars label {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  cursor: pointer;
}

.feedback-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.feedback-stars span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.28);
  font-size: 20px;
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.feedback-stars label:hover span,
.feedback-stars label:focus-within span {
  border-color: rgba(255, 223, 142, 0.42);
  background: rgba(213, 165, 55, 0.12);
  color: #ffe29b;
  box-shadow: 0 0 20px rgba(255, 203, 91, 0.1);
  transform: translateY(-1px);
}

.feedback-stars:has(input[value="1"]:checked)
label:nth-child(-n + 1) span,
.feedback-stars:has(input[value="2"]:checked)
label:nth-child(-n + 2) span,
.feedback-stars:has(input[value="3"]:checked)
label:nth-child(-n + 3) span,
.feedback-stars:has(input[value="4"]:checked)
label:nth-child(-n + 4) span,
.feedback-stars:has(input[value="5"]:checked)
label:nth-child(-n + 5) span {
  border-color: rgba(255, 222, 135, 0.52);
  background:
    linear-gradient(
      145deg,
      rgba(231, 183, 68, 0.2),
      rgba(172, 121, 31, 0.1)
    );
  color: #ffe29b;
  box-shadow: 0 0 22px rgba(255, 203, 91, 0.12);
}

.feedback-dialog .settings-field textarea {
  min-height: 112px;
}

.feedback-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(156, 226, 255, 0.14);
  border-radius: 11px;
  background: rgba(67, 167, 222, 0.065);
}

.feedback-context span,
.feedback-context strong {
  font-size: 10px;
}

.feedback-context span {
  color: rgba(215, 239, 250, 0.48);
}

.feedback-context strong {
  min-width: 0;
  overflow: hidden;
  color: #d7f5ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-auth-required {
  margin-top: 14px !important;
  padding: 10px 12px;
  border: 1px solid rgba(255, 211, 128, 0.2);
  border-radius: 11px;
  background: rgba(181, 123, 27, 0.09);
  color: #ffe3ad !important;
  font-size: 10px;
}

.feedback-status {
  min-height: 17px;
  margin: 12px 0 0;
  color: #c9efff;
  font-size: 10px;
  line-height: 1.45;
}

.feedback-status.is-success {
  color: #c9faeb;
}

.feedback-status.is-error {
  color: #ffd0d0;
}

/* ---------------------------------------------------------
   CONVERSATION LIMIT AND BRANCHING
--------------------------------------------------------- */

.conversation-limit-dialog {
  width: min(590px, calc(100vw - 42px));
  text-align: center;
}

.conversation-limit-dialog .confirmation-icon {
  border-color: rgba(151, 226, 255, 0.24);
  background:
    linear-gradient(
      145deg,
      rgba(65, 169, 229, 0.17),
      rgba(34, 92, 151, 0.1)
    );
  color: #c8efff;
}

.conversation-branch-preview {
  margin-top: 19px;
  padding: 13px;
  border: 1px solid rgba(159, 226, 255, 0.15);
  border-radius: 13px;
  background: rgba(4, 16, 36, 0.44);
  text-align: left;
}

.conversation-branch-preview strong {
  display: block;
  margin-bottom: 8px;
  color: #d7f5ff;
  font-size: 11px;
}

.conversation-branch-preview ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: rgba(222, 241, 250, 0.62);
  font-size: 10px;
  line-height: 1.45;
}

.conversation-limit-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 23px;
}

/* ---------------------------------------------------------
   EMAIL CONFIRMATION SUCCESS
--------------------------------------------------------- */

.email-confirmation-dialog {
  text-align: center;
}

.confirmation-icon.success {
  border-color: rgba(105, 231, 194, 0.26);
  background:
    linear-gradient(
      145deg,
      rgba(44, 176, 143, 0.17),
      rgba(43, 119, 101, 0.1)
    );
  color: #c9faeb;
  box-shadow: 0 0 30px rgba(73, 224, 182, 0.09);
}

.email-confirmation-address {
  margin-top: 14px !important;
  padding: 10px 12px;
  border: 1px solid rgba(159, 226, 255, 0.14);
  border-radius: 11px;
  background: rgba(64, 161, 218, 0.075);
  color: #d4f2ff !important;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.email-confirmation-dialog .confirmation-actions {
  justify-content: center;
}

/* ---------------------------------------------------------
   FULL SPLIT-SCREEN ACCOUNT EXPERIENCE
--------------------------------------------------------- */

.auth-page-backdrop {
  padding: 28px;
  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(67, 153, 223, 0.22),
      transparent 38%
    ),
    rgba(0, 7, 18, 0.82);
}

.auth-split-dialog {
  display: grid;
  width: min(1000px, calc(100vw - 56px));
  height: min(720px, calc(100vh - 56px));
  max-height: calc(100vh - 56px);
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
  padding: 0;
  overflow: hidden;
  border-radius: 25px;
}

.auth-form-panel {
  min-width: 0;
  padding: 30px 34px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(188, 236, 255, 0.16)
    transparent;
}

.auth-form-panel::-webkit-scrollbar {
  width: 5px;
}

.auth-form-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(188, 236, 255, 0.16);
}

.auth-brand-panel {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  align-content: center;
  gap: 22px;
  overflow: hidden;
  padding: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      145deg,
      rgba(38, 101, 169, 0.35),
      rgba(7, 28, 60, 0.76)
    ),
    url("images/luna-tech-background.jpg")
      center / cover no-repeat;
  isolation: isolate;
}

.auth-brand-panel::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 42, 0.18),
      rgba(3, 13, 31, 0.58)
    );
}

.auth-brand-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(130, 216, 255, 0.25),
      rgba(77, 157, 230, 0.11) 38%,
      transparent 68%
    );
  filter: blur(5px);
  transform: translate(-50%, -50%);
}

.auth-brand-mark {
  width: min(240px, 58%);
  max-height: 240px;
  object-fit: contain;
  opacity: 0.2;
  filter:
    brightness(1.35)
    saturate(0.85)
    drop-shadow(
      0 24px 60px
      rgba(0, 0, 0, 0.24)
    );
}

.auth-brand-copy {
  text-align: center;
}

.auth-brand-copy p,
.auth-brand-copy strong {
  margin: 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.26);
}

.auth-brand-copy p {
  color: rgba(230, 245, 252, 0.56);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-brand-copy strong {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.auth-provider-stack {
  display: grid;
  gap: 9px;
}

.auth-provider-button.google,
.auth-provider-button.apple {
  justify-content: flex-start;
  padding: 0 14px;
}

.auth-provider-logo {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

.auth-provider-button.apple .auth-provider-logo {
  color: #ffffff;
}

.auth-remember-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  color: rgba(216, 239, 249, 0.58);
  font-size: 10px;
  cursor: pointer;
}

.auth-remember-row input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #5cb8ef;
}

.auth-account-switch {
  margin: 14px 0 0;
  color: rgba(213, 237, 248, 0.52);
  font-size: 10px;
  text-align: center;
}

.auth-account-switch span {
  margin-right: 4px;
}

.auth-account-switch button {
  padding: 3px 5px;
  border-radius: 6px;
  background: transparent;
  color: #bfeeff;
  font-weight: 700;
}

.auth-account-switch button:hover,
.auth-account-switch button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  outline: none;
}

/* ---------------------------------------------------------
   BACKGROUND RESPONSE COMPLETION TOAST
--------------------------------------------------------- */

.background-response-region {
  position: fixed;
  top: 92px;
  right: 22px;
  z-index: 1650;
  display: grid;
  width: min(390px, calc(100vw - 34px));
  gap: 10px;
  pointer-events: none;
}

.background-response-toast {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(150, 226, 255, 0.22);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(75, 187, 241, 0.15),
      transparent 44%
    ),
    rgba(5, 18, 40, 0.985);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(82, 194, 249, 0.09);
  pointer-events: auto;
  backdrop-filter: blur(18px);
  animation: lunaBackgroundResponseEnter 260ms ease-out;
}

.background-response-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(105, 231, 194, 0.22);
  border-radius: 12px;
  background: rgba(44, 176, 143, 0.11);
  color: #c9faeb;
}

.background-response-icon svg {
  width: 20px;
  height: 20px;
}

.background-response-open {
  min-width: 0;
  padding: 0;
  background: transparent;
  color: #ffffff;
  text-align: left;
}

.background-response-eyebrow,
.background-response-title,
.background-response-preview,
.background-response-cta {
  display: block;
}

.background-response-eyebrow {
  color: #bdefff;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.background-response-title {
  margin-top: 4px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-response-preview {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: rgba(226, 242, 250, 0.58);
  font-size: 10px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.background-response-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #c9efff;
  font-size: 9px;
  font-weight: 700;
}

.background-response-cta svg {
  width: 12px;
  height: 12px;
}

.background-response-dismiss {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}

.background-response-dismiss:hover,
.background-response-dismiss:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.background-response-dismiss svg {
  width: 14px;
  height: 14px;
}

@keyframes lunaBackgroundResponseEnter {
  from {
    opacity: 0;
    transform: translateX(36px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------------------------------------------------------
   LEGAL DIALOG
--------------------------------------------------------- */

.legal-dialog {
  width: min(760px, calc(100vw - 42px));
  height: min(680px, calc(100vh - 42px));
}

.legal-body {
  display: block;
  width: 100%;
  padding: 28px;
  color: rgba(237, 247, 252, 0.78);
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
}

.legal-body h3 {
  width: 100%;
  margin:
    22px 0 8px;
  color: #ffffff;
  text-align: left;
}

.legal-body p {
  width: 100%;
  margin:
    0 0 14px;
  text-align: left;
}

.legal-body h2 {
  width: 100%;
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 18px;
  text-align: left;
}

.legal-body a {
  color: #97e2ff;
  text-decoration: underline;
}

.legal-body table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.legal-body th,
.legal-body td {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}

.legal-body th {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------
   RESPONSIVE PHASE 2
--------------------------------------------------------- */

@media (max-width: 900px) {
  .auth-split-dialog {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .auth-form-panel {
    padding:
      28px 26px;
  }

  .auth-brand-panel {
    padding: 24px;
  }

  .app-footer {
    max-width: calc(100vw - 115px);
  }
}

@media (max-width: 760px) {
  .composer-home .composer-options .composer-voice-action,
  .composer-thread .composer-options .composer-voice-action {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  .composer-options .composer-voice-action span {
    display: none;
  }

  .voice-live-turn {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .library-picker-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feedback-dialog {
    width: calc(100vw - 24px);
  }

  .conversation-limit-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .conversation-limit-actions .page-button {
    width: 100%;
  }

  .auth-page-backdrop {
    padding: 12px;
  }

  .auth-split-dialog {
    display: block;
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }

  .auth-form-panel {
    height: 100%;
    padding:
      24px 22px;
  }

  .auth-brand-panel {
    display: none;
  }

  .app-footer {
    right: 12px;
    bottom: 82px;
    left: 90px;
    max-width: none;
  }

  .background-response-region {
    top: 76px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 620px) {
  .sidebar-logo-highlight {
    display: none;
  }

  .voice-live-transcript {
    max-height: 150px;
  }

  .voice-live-turn {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .library-picker-grid {
    grid-template-columns: 1fr;
    max-height: 54vh;
  }

  .library-picker-item {
    grid-template-columns: 60px minmax(0, 1fr) 22px;
  }

  .library-picker-thumbnail {
    width: 60px;
    height: 50px;
  }

  .feedback-stars {
    justify-content: center;
  }

  .feedback-context {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .app-footer {
    right: 10px;
    bottom: 79px;
    left: 10px;
    justify-content: center;
    text-align: center;
  }

  .app-footer-actions {
    width: 100%;
    justify-content: center;
  }

  .app-footer-legal {
    max-width: 420px;
  }

  .background-response-toast {
    grid-template-columns: 36px minmax(0, 1fr) 28px;
  }

  .background-response-icon {
    width: 36px;
    height: 36px;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION FOR PHASE 2
--------------------------------------------------------- */

body.reduce-motion .sidebar-logo-highlight,
body.reduce-motion .background-response-toast,
body.reduce-motion .voice-live-transcript-scroll {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-logo-highlight,
  .background-response-toast,
  .voice-live-transcript-scroll {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* =========================================================
   LUNA DESIGN REFINEMENTS — PHASE 5
   Final visual overrides for the refined account experience,
   logged-out messaging gate, centered support links, fixed
   sidebar footer, and exact collapsed-icon alignment.
========================================================= */

/* ---------------------------------------------------------
   SIDEBAR REMAINS FIXED TO THE VIEWPORT
--------------------------------------------------------- */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.primary-nav {
  flex: 0 0 auto;
}

.recent-section {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.recent-list {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
}

.sidebar-footer {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  margin-top: auto;
  background:
    linear-gradient(
      180deg,
      rgba(9, 30, 60, 0),
      rgba(9, 30, 60, 0.82) 26%,
      rgba(9, 30, 60, 0.96)
    );
}

.app-shell:not(.sidebar-open) .upgrade-card {
  display: none;
}

.app-shell.sidebar-open .upgrade-card {
  display: flex;
}

/* ---------------------------------------------------------
   EXACT COLLAPSED ICON AND HIGHLIGHT ALIGNMENT
--------------------------------------------------------- */

.app-shell:not(.sidebar-open) .primary-nav {
  display: grid;
  width: 100%;
  justify-items: center;
  padding-inline: 0;
}

.app-shell:not(.sidebar-open) .nav-item,
.app-shell:not(.sidebar-open) .sidebar-toggle {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  margin-inline: auto;
  padding: 0;
  place-items: center;
  gap: 0;
  border-radius: 15px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.app-shell:not(.sidebar-open) .nav-item::before,
.app-shell:not(.sidebar-open) .sidebar-toggle::before {
  display: none !important;
  content: none !important;
}

.app-shell:not(.sidebar-open) .nav-item:hover,
.app-shell:not(.sidebar-open) .nav-item:focus-visible,
.app-shell:not(.sidebar-open) .nav-item.active,
.app-shell:not(.sidebar-open) .sidebar-toggle:hover,
.app-shell:not(.sidebar-open) .sidebar-toggle:focus-visible {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(190, 238, 255, 0.14),
      rgba(255, 255, 255, 0.08) 58%,
      rgba(255, 255, 255, 0.04)
    );
  box-shadow:
    0 0 0 1px rgba(183, 234, 255, 0.09),
    0 0 22px rgba(83, 196, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: none;
}

.app-shell:not(.sidebar-open) .nav-item svg,
.app-shell:not(.sidebar-open) .sidebar-toggle svg {
  position: static;
  display: block;
  width: 27px;
  height: 27px;
  margin: 0;
  flex: none;
  transform-origin: 50% 50%;
}

.app-shell:not(.sidebar-open) .sidebar-toggle svg {
  width: 26px;
  height: 26px;
  transform: none;
}

.app-shell:not(.sidebar-open) [data-tooltip]::after {
  top: 50%;
  left: calc(100% + 13px);
  transform: translate(5px, -50%);
}

.app-shell:not(.sidebar-open) [data-tooltip]:hover::after,
.app-shell:not(.sidebar-open) [data-tooltip]:focus-visible::after {
  transform: translate(0, -50%);
}

/* ---------------------------------------------------------
   REMOVE THE SEPARATE LARGE VOICE TRANSCRIPT PANEL
--------------------------------------------------------- */

#voiceTranscriptCompatibility,
.voice-live-transcript,
.thread-voice-live-transcript {
  display: none !important;
}

/* ---------------------------------------------------------
   LOGGED-OUT HOME LEGAL COPY
--------------------------------------------------------- */

.guest-home-legal {
  position: fixed;
  right: 0;
  bottom: 43px;
  left: var(--sidebar-collapsed);
  z-index: 32;
  margin: 0;
  padding: 0 18px;
  color: rgba(210, 235, 247, 0.33);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  pointer-events: auto;
  transition: left var(--normal);
}

.app-shell.sidebar-open .guest-home-legal {
  left: var(--sidebar-expanded);
}

.guest-home-legal a {
  color: rgba(207, 237, 250, 0.5);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: rgba(207, 237, 250, 0.22);
  text-underline-offset: 2px;
}

.guest-home-legal a:hover,
.guest-home-legal a:focus-visible {
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}

/* ---------------------------------------------------------
   LOGGED-OUT QUESTION CONTINUATION PROMPT
--------------------------------------------------------- */

.guest-continuation-prompt {
  display: flex;
  width: min(620px, 100%);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 12px auto 0;
  padding: 13px 15px;
  border: 1px solid rgba(162, 228, 255, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(82, 190, 241, 0.14),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(26, 73, 124, 0.22),
      rgba(5, 19, 41, 0.88)
    );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.2),
    0 0 28px rgba(77, 190, 246, 0.07);
  text-align: left;
}

.guest-continuation-prompt p {
  margin: 0;
  color: rgba(235, 246, 252, 0.76);
  font-size: 12px;
  line-height: 1.5;
}

.guest-continuation-signup {
  display: inline-flex;
  min-height: 39px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid rgba(184, 237, 255, 0.52);
  border-radius: 11px;
  background:
    linear-gradient(
      135deg,
      rgba(75, 186, 250, 0.38),
      rgba(72, 224, 207, 0.2)
    ),
    rgba(7, 27, 55, 0.92);
  color: #ffffff;
  font-size: 11px;
  font-weight: 740;
  white-space: nowrap;
  box-shadow:
    0 0 24px rgba(77, 194, 250, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  transition:
    border-color var(--fast),
    background var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.guest-continuation-signup:hover,
.guest-continuation-signup:focus-visible {
  border-color: rgba(204, 245, 255, 0.8);
  background:
    linear-gradient(
      135deg,
      rgba(83, 200, 255, 0.49),
      rgba(78, 236, 217, 0.28)
    ),
    rgba(8, 30, 61, 0.96);
  box-shadow:
    0 0 0 3px rgba(143, 224, 255, 0.065),
    0 0 34px rgba(77, 198, 252, 0.2),
    0 12px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
  outline: none;
}

/* ---------------------------------------------------------
   CENTER FEEDBACK AND REPORT A PROBLEM ON EVERY PAGE
--------------------------------------------------------- */

.app-footer {
  position: fixed;
  right: 0;
  bottom: 10px;
  left: var(--sidebar-collapsed);
  z-index: 34;
  display: flex;
  width: auto;
  max-width: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  transition: left var(--normal);
}

.app-shell.sidebar-open .app-footer {
  left: var(--sidebar-expanded);
}

.app-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: auto;
}

.app-footer-link {
  min-height: 24px;
  padding: 0 7px;
  color: rgba(210, 235, 247, 0.4);
  font-size: 9px;
  font-weight: 600;
}

.app-footer-link svg {
  width: 11px;
  height: 11px;
}

/* ---------------------------------------------------------
   AUTH PAGE — SMALL, FAINT LEGAL COPY ONLY AT THE BOTTOM
--------------------------------------------------------- */

.auth-legal-copy {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  color: rgba(210, 235, 247, 0.3);
  font-size: 8.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.auth-legal-copy a {
  color: rgba(205, 236, 249, 0.46);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: rgba(205, 236, 249, 0.2);
  text-underline-offset: 2px;
}

.auth-legal-copy a:hover,
.auth-legal-copy a:focus-visible {
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}

#authAccountSwitchCompatibility,
#authAccountSwitch {
  display: none !important;
}

/* ---------------------------------------------------------
   ACCOUNT PAGE AND PROVIDER BUTTON POLISH
--------------------------------------------------------- */

.auth-split-dialog {
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.97fr);
}

.auth-form-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

#authCredentialPanel {
  display: block;
}

.auth-provider-stack {
  gap: 10px;
}

.auth-provider-button.google {
  border-color: rgba(255, 255, 255, 0.88);
  background: #ffffff;
  color: #172033;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18);
}

.auth-provider-button.google:hover,
.auth-provider-button.google:focus-visible {
  border-color: #ffffff;
  background: #f5f7fa;
  color: #0e1728;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.08),
    0 11px 28px rgba(0, 0, 0, 0.22);
}

.auth-provider-button.apple {
  border-color: rgba(255, 255, 255, 0.22);
  background: #050505;
  color: #ffffff;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.24);
}

.auth-provider-button.apple:hover,
.auth-provider-button.apple:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  background: #111111;
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.055),
    0 11px 28px rgba(0, 0, 0, 0.24);
}

.auth-provider-button.google,
.auth-provider-button.apple {
  position: relative;
  justify-content: center;
}

.auth-provider-button.google .auth-provider-logo,
.auth-provider-button.apple .auth-provider-logo {
  position: absolute;
  left: 14px;
}

.auth-provider-button.apple .auth-provider-logo {
  color: #ffffff;
}

.auth-separator span {
  color: rgba(215, 238, 249, 0.48);
  font-weight: 500;
}

/* ---------------------------------------------------------
   IMPROVED RIGHT-SIDE LUNA LOGO
--------------------------------------------------------- */

.auth-brand-panel {
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(96, 178, 234, 0.16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(31, 78, 132, 0.4),
      rgba(6, 25, 55, 0.86)
    ),
    url("images/luna-tech-background.jpg")
      center / cover no-repeat;
}

.auth-brand-glow {
  width: 470px;
  height: 470px;
  opacity: 0.8;
}

.auth-brand-mark.auth-brand-logo {
  width: min(330px, 78%);
  max-width: 78%;
  max-height: 250px;
  opacity: 0.38;
  object-fit: contain;
  filter:
    grayscale(1)
    brightness(1.85)
    contrast(0.72)
    drop-shadow(
      0 24px 60px
      rgba(0, 0, 0, 0.26)
    );
}

.auth-brand-copy p {
  color: rgba(233, 246, 252, 0.48);
}

.auth-brand-copy strong {
  color: rgba(245, 250, 253, 0.72);
}

/* ---------------------------------------------------------
   FEEDBACK DIALOG REMAINS SMALL AND FOCUSED
--------------------------------------------------------- */

.feedback-dialog {
  width: min(500px, calc(100vw - 42px));
}

.feedback-dialog .confirmation-actions {
  justify-content: flex-end;
}

/* ---------------------------------------------------------
   RESPONSIVE DESIGN REFINEMENTS
--------------------------------------------------------- */

@media (max-width: 980px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
  }

  .app-footer,
  .guest-home-legal,
  .app-shell.sidebar-open .app-footer,
  .app-shell.sidebar-open .guest-home-legal {
    left: 78px;
  }
}

@media (max-width: 760px) {
  .guest-continuation-prompt {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
  }

  .guest-continuation-signup {
    width: 100%;
  }

  .auth-split-dialog {
    display: block;
  }
}

@media (max-width: 620px) {
  .sidebar {
    position: fixed;
    top: auto;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    overflow: visible;
  }

  .app-footer,
  .app-shell.sidebar-open .app-footer {
    right: 0;
    bottom: 77px;
    left: 0;
  }

  .guest-home-legal,
  .app-shell.sidebar-open .guest-home-legal {
    right: 0;
    bottom: 105px;
    left: 0;
    padding-inline: 12px;
  }

  .app-footer-link {
    font-size: 8.5px;
  }

  .guest-continuation-prompt {
    width: 100%;
    padding: 12px;
  }

  .auth-form-panel {
    padding:
      22px 20px;
  }

  .auth-legal-copy {
    font-size: 8px;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

body.reduce-motion .guest-continuation-signup,
body.reduce-motion .app-footer,
body.reduce-motion .guest-home-legal,
body.reduce-motion .auth-provider-button {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .guest-continuation-signup,
  .app-footer,
  .guest-home-legal,
  .auth-provider-button {
    transition: none !important;
  }
}

/* =========================================================
   LUNA SIDEBAR FIX — PHASE 7
   Keeps the sidebar independent from page scrolling, makes
   Recent searches the only scrollable sidebar region, keeps
   Upgrade Your Plan and Collapse Menu fixed at the bottom,
   removes every Luna-logo highlight, restores tooltips, and
   precisely centers collapsed navigation icons.
========================================================= */

/* ---------------------------------------------------------
   INDEPENDENT, FULL-HEIGHT SIDEBAR
--------------------------------------------------------- */

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: visible;
}

.sidebar-header,
.primary-nav,
.sidebar-footer {
  flex: 0 0 auto;
}

.primary-nav {
  position: relative;
  z-index: 20;
  overflow: visible;
}

.recent-section {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.recent-list {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar-footer {
  position: relative;
  z-index: 22;
  margin-top: 0;
  padding-top: 16px;
  padding-bottom: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(9, 30, 60, 0),
      rgba(9, 30, 60, 0.88) 24%,
      rgba(9, 30, 60, 0.98)
    );
}

/*
 * The main page continues to use the document scrollbar while
 * the sticky sidebar remains fixed in the viewport.
 */
.main-content {
  min-height: 100vh;
}

/* ---------------------------------------------------------
   LUNA LOGO — NEVER SHOW A HIGHLIGHT BOX
--------------------------------------------------------- */

.sidebar-logo,
.sidebar-logo.no-hover-background,
.sidebar-logo[data-no-hover-background="true"],
.sidebar-logo:hover,
.sidebar-logo:focus-visible,
.sidebar-logo.no-hover-background:hover,
.sidebar-logo.no-hover-background:focus-visible,
.sidebar-logo[data-no-hover-background="true"]:hover,
.sidebar-logo[data-no-hover-background="true"]:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.sidebar-logo-highlight {
  display: none !important;
}

.sidebar-logo-frame {
  width: 100%;
  height: 100%;
}

.sidebar-logo img {
  transform: none !important;
}

/* ---------------------------------------------------------
   COLLAPSED NAVIGATION — EXACT ICON CENTERING
--------------------------------------------------------- */

.app-shell:not(.sidebar-open) .primary-nav {
  width: 100%;
  justify-items: center;
  overflow: visible;
  padding-inline: 0;
}

.app-shell:not(.sidebar-open) .nav-item,
.app-shell:not(.sidebar-open) .sidebar-toggle {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  margin-inline: auto;
  padding: 0;
  grid-template-columns: 52px;
  grid-template-rows: 52px;
  place-items: center;
  gap: 0;
  overflow: visible;
  border-radius: 15px;
  transform: none;
}

/*
 * Hidden labels must not create a second grid row. That was
 * pushing the pencil and other icons toward the top edge.
 */
.app-shell:not(.sidebar-open) .nav-label,
.app-shell:not(.sidebar-open) .sidebar-toggle > span {
  display: none !important;
}

.app-shell:not(.sidebar-open) .nav-item::before,
.app-shell:not(.sidebar-open) .sidebar-toggle::before {
  display: none !important;
  content: none !important;
}

.app-shell:not(.sidebar-open) .nav-item > svg,
.app-shell:not(.sidebar-open) .sidebar-toggle > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 27px;
  height: 27px;
  margin: 0;
  flex: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.app-shell:not(.sidebar-open) .sidebar-toggle > svg {
  width: 26px;
  height: 26px;
}

.app-shell:not(.sidebar-open) .nav-item:hover,
.app-shell:not(.sidebar-open) .nav-item:focus-visible,
.app-shell:not(.sidebar-open) .nav-item.active,
.app-shell:not(.sidebar-open) .sidebar-toggle:hover,
.app-shell:not(.sidebar-open) .sidebar-toggle:focus-visible {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(190, 238, 255, 0.14),
      rgba(255, 255, 255, 0.08) 58%,
      rgba(255, 255, 255, 0.04)
    );
  box-shadow:
    0 0 0 1px rgba(183, 234, 255, 0.09),
    0 0 22px rgba(83, 196, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: none;
}

/* ---------------------------------------------------------
   RESTORED COLLAPSED-SIDEBAR TOOLTIPS
--------------------------------------------------------- */

.app-shell:not(.sidebar-open) [data-tooltip] {
  overflow: visible;
}

.app-shell:not(.sidebar-open) [data-tooltip]::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  z-index: 5000;
  display: block;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  background: rgba(4, 15, 34, 0.985);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(75, 185, 241, 0.07);
  color: #ffffff;
  content: attr(data-tooltip);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition:
    opacity 130ms ease,
    transform 130ms ease;
  white-space: nowrap;
}

.app-shell:not(.sidebar-open) [data-tooltip]:hover::after,
.app-shell:not(.sidebar-open) [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ---------------------------------------------------------
   EXPANDED SIDEBAR FOOTER LAYOUT
--------------------------------------------------------- */

.app-shell.sidebar-open .sidebar-footer {
  display: grid;
  width: 100%;
  gap: 10px;
}

.app-shell.sidebar-open .upgrade-card,
.app-shell.sidebar-open .sidebar-toggle {
  width: 100%;
}

.app-shell.sidebar-open .sidebar-toggle {
  min-height: 50px;
}

/* ---------------------------------------------------------
   TABLET AND MOBILE
--------------------------------------------------------- */

@media (max-width: 980px) and (min-width: 621px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: visible;
  }

  .recent-section,
  .upgrade-card {
    display: none;
  }

  .sidebar-footer {
    margin-top: auto;
    padding-inline: 10px;
  }

  .sidebar-toggle {
    width: 52px;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    overflow: visible;
  }

  .app-shell:not(.sidebar-open) .nav-item {
    position: relative;
    display: grid;
    width: 100%;
    height: 55px;
    min-width: 0;
    min-height: 55px;
    grid-template-columns: 1fr;
    grid-template-rows: 55px;
    place-items: center;
  }

  .app-shell:not(.sidebar-open) .nav-item > svg {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .app-shell:not(.sidebar-open) [data-tooltip]::after {
    display: none;
  }
}

/* =========================================================
   LUNA FEEDBACK STARS FIX — PHASE 8
   The first star no longer appears selected merely because it
   receives keyboard focus when the dialog opens. A star is only
   filled after the user deliberately selects a rating.
========================================================= */

.feedback-stars label:focus-within:not(:hover) span {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 0 2px rgba(151, 226, 255, 0.08);
  transform: none;
}

/*
 * Preserve the selected-star appearance after an actual radio
 * input is checked, including during keyboard navigation.
 */
.feedback-stars:has(input[value="1"]:checked)
label:nth-child(-n + 1) span,
.feedback-stars:has(input[value="2"]:checked)
label:nth-child(-n + 2) span,
.feedback-stars:has(input[value="3"]:checked)
label:nth-child(-n + 3) span,
.feedback-stars:has(input[value="4"]:checked)
label:nth-child(-n + 4) span,
.feedback-stars:has(input[value="5"]:checked)
label:nth-child(-n + 5) span {
  border-color: rgba(255, 222, 135, 0.52);
  background:
    linear-gradient(
      145deg,
      rgba(231, 183, 68, 0.2),
      rgba(172, 121, 31, 0.1)
    );
  color: #ffe29b;
  box-shadow: 0 0 22px rgba(255, 203, 91, 0.12);
}

/* =========================================================
   LUNA TRUE FIXED SIDEBAR — PHASE 9
   The left panel is completely independent from document
   scrolling. Only Recent searches scroll. Upgrade Your Plan
   and Collapse Menu remain fixed at the bottom of the viewport.
========================================================= */

@media (min-width: 621px) {
  /*
   * Stop using the page grid to position the sidebar. The
   * sidebar is now a real fixed viewport panel.
   */
  .app-shell,
  .app-shell.sidebar-open {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    position: fixed !important;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    width: var(--sidebar-collapsed);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    overflow: visible;
    transition:
      width var(--normal);
  }

  .app-shell.sidebar-open .sidebar {
    width: var(--sidebar-expanded);
  }

  /*
   * Reserve the exact same amount of horizontal space in the
   * main application that the fixed sidebar occupies.
   */
  .main-content {
    width: calc(100% - var(--sidebar-collapsed));
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--sidebar-collapsed);
    transition:
      width var(--normal),
      margin-left var(--normal);
  }

  .app-shell.sidebar-open .main-content {
    width: calc(100% - var(--sidebar-expanded));
    margin-left: var(--sidebar-expanded);
  }

  .sidebar-header {
    flex: 0 0 auto;
  }

  .primary-nav {
    flex: 0 0 auto;
  }

  /*
   * This is the only sidebar region allowed to scroll.
   */
  .recent-section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
  }

  .recent-list {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /*
   * These controls are permanently anchored at the bottom of
   * the fixed sidebar and never participate in page scrolling.
   */
  .sidebar-footer {
    position: relative;
    z-index: 5;
    display: grid;
    flex: 0 0 auto;
    gap: 10px;
    margin-top: 0;
    padding:
      16px 18px 22px;
    background:
      linear-gradient(
        180deg,
        rgba(9, 30, 60, 0),
        rgba(9, 30, 60, 0.88) 24%,
        rgba(9, 30, 60, 0.98)
      );
  }

  .app-shell:not(.sidebar-open) .recent-section {
    visibility: hidden;
  }

  .app-shell:not(.sidebar-open) .upgrade-card {
    display: none;
  }

  .app-shell:not(.sidebar-open) .sidebar-footer {
    justify-items: center;
    padding-right: 0;
    padding-left: 0;
  }

  .app-shell:not(.sidebar-open) .sidebar-toggle {
    width: 52px;
    min-width: 52px;
    margin-inline: auto;
  }

  .app-shell.sidebar-open .upgrade-card,
  .app-shell.sidebar-open .sidebar-toggle {
    width: 100%;
  }

  /*
   * Keep globally fixed footer/legal elements centered within
   * the main content rather than underneath the sidebar.
   */
  .app-footer {
    left: var(--sidebar-collapsed);
  }

  .guest-home-legal {
    left: var(--sidebar-collapsed);
  }

  .app-shell.sidebar-open .app-footer,
  .app-shell.sidebar-open .guest-home-legal {
    left: var(--sidebar-expanded);
  }
}

/* Preserve the existing mobile bottom navigation behavior. */
@media (max-width: 620px) {
  .app-shell,
  .app-shell.sidebar-open {
    display: block;
  }

  .main-content,
  .app-shell.sidebar-open .main-content {
    width: 100%;
    margin-left: 0;
  }

  .sidebar {
    position: fixed !important;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
  }
}

/* =========================================================
   LUNA CHAT FOOTER SPACING FIX — PHASE 11
   Reserves a small footer lane beneath the chat disclaimer so
   "Luna is AI..." never overlaps Feedback / Report a problem.
========================================================= */

@media (min-width: 621px) {
  /*
   * The chat page is viewport-height. Increasing only its
   * bottom padding moves the composer and disclaimer slightly
   * upward while leaving the fixed support footer untouched.
   */
  .chat-page {
    padding-bottom: 46px;
  }

  .thread-disclaimer {
    margin-top: 9px;
    margin-bottom: 0;
  }
}

/*
 * On mobile, the global support footer already sits above the
 * bottom navigation. Reserve a smaller additional gap.
 */
@media (max-width: 620px) {
  .chat-page {
    padding-bottom: 34px;
  }

  .thread-disclaimer {
    margin-top: 8px;
    margin-bottom: 0;
  }
}

/* =========================================================
   LUNA LOGGED-OUT LANDING EXPERIENCE — PHASE 74
   Works with body[data-luna-auth-state] set by script.js.

   Signed out:
   - no sidebar or authenticated support footer
   - full-width home experience
   - Luna logo at upper left
   - Sign in / Sign up / Settings at upper right
   - centered, confirmation-style continuation modal
========================================================= */

/* ---------------------------------------------------------
   AUTH-STATE VISIBILITY
--------------------------------------------------------- */

body[data-luna-auth-state="signed-out"]
[data-authenticated-only="true"] {
  display: none !important;
}

body[data-luna-auth-state="signed-in"]
[data-guest-only="true"] {
  display: none !important;
}

body[data-luna-auth-state="signed-out"]
[data-guest-only="true"] {
  visibility: visible;
}

/*
 * Keep the page calm while Luna resolves the current session.
 * The account loader remains visible, but account-only workspace
 * navigation does not flash before the session is known.
 */
body[data-luna-auth-state="loading"]
.sidebar,
body[data-luna-auth-state="loading"]
.app-footer {
  visibility: hidden;
}

/* ---------------------------------------------------------
   FULL-WIDTH GUEST APPLICATION
--------------------------------------------------------- */

@media (min-width: 621px) {
  body[data-luna-auth-state="signed-out"]
  .app-shell,
  body[data-luna-auth-state="signed-out"]
  .app-shell.sidebar-open {
    display: block;
  }

  body[data-luna-auth-state="signed-out"]
  .sidebar {
    display: none !important;
  }

  body[data-luna-auth-state="signed-out"]
  .main-content,
  body[data-luna-auth-state="signed-out"]
  .app-shell.sidebar-open
  .main-content {
    width: 100%;
    margin-left: 0;
  }

  body[data-luna-auth-state="signed-out"]
  .app-footer {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   GUEST TOP BAR
--------------------------------------------------------- */

.topbar {
  left: auto;
}

body[data-luna-auth-state="signed-out"]
.topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  min-height: 84px;
  padding:
    20px 28px;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}

body[data-luna-auth-state="signed-out"]
.topbar > * {
  pointer-events: auto;
}

.topbar-spacer {
  display: none;
}

body[data-luna-auth-state="signed-out"]
.topbar-spacer {
  display: block;
  flex: 1 1 auto;
}

.guest-topbar-logo {
  display: inline-flex;
  width: 142px;
  min-width: 142px;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0;
  border-radius: 12px;
  transition:
    opacity var(--fast),
    transform var(--fast);
}

.guest-topbar-logo:hover,
.guest-topbar-logo:focus-visible {
  opacity: 0.88;
  transform:
    translateY(-1px);
  outline: none;
}

.guest-topbar-logo img {
  width: 138px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(
      0 8px 22px
      rgba(0, 0, 0, 0.18)
    );
}

body[data-luna-auth-state="signed-out"]
.topbar-account {
  min-height: 44px;
}

body[data-luna-auth-state="signed-out"]
.auth-entry-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.settings-entry-button {
  gap: 7px;
}

.settings-entry-button svg {
  width: 17px;
  height: 17px;
}

body[data-luna-auth-state="signed-out"]
.auth-entry-button {
  min-height: 42px;
  padding:
    0 16px;
}

body[data-luna-auth-state="signed-out"]
.auth-entry-button.primary {
  min-width: 92px;
}

/* ---------------------------------------------------------
   GUEST HOME POSITIONING AND LEGAL COPY
--------------------------------------------------------- */

body[data-luna-auth-state="signed-out"]
.hero {
  width:
    min(
      1040px,
      calc(100% - 48px)
    );
  min-height: 100vh;
  padding-top:
    clamp(
      106px,
      14vh,
      154px
    );
  padding-bottom: 92px;
}

body[data-luna-auth-state="signed-out"]
.guest-home-legal,
body[data-luna-auth-state="signed-out"]
.app-shell.sidebar-open
.guest-home-legal {
  right: 0;
  bottom: 22px;
  left: 0;
  width: 100%;
  padding:
    0 18px;
}

body[data-luna-auth-state="signed-out"]
#homeView {
  min-height: 100vh;
}

/* ---------------------------------------------------------
   LARGE GUEST CONTINUATION MODAL
--------------------------------------------------------- */

.guest-continuation-backdrop {
  z-index: 12000;
  padding: 24px;
  background:
    rgba(0, 6, 16, 0.84);
  backdrop-filter:
    blur(13px)
    saturate(0.72);
}

.guest-continuation-dialog {
  position: relative;
  display: flex;
  width:
    min(
      520px,
      calc(100vw - 42px)
    );
  min-height: 430px;
  max-height:
    calc(100vh - 42px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow-y: auto;
  padding:
    46px 48px 40px;
  border:
    1px solid
    rgba(163, 229, 255, 0.24);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(79, 183, 241, 0.23),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      rgba(13, 32, 61, 0.995),
      rgba(5, 17, 37, 0.995)
    );
  box-shadow:
    0 42px 130px
      rgba(0, 0, 0, 0.66),
    0 0 46px
      rgba(73, 188, 244, 0.11),
    inset 0 1px 0
      rgba(255, 255, 255, 0.055);
  text-align: center;
  animation:
    modalScaleIn
    190ms ease;
}

.guest-continuation-close {
  position: absolute;
  top: 17px;
  right: 17px;
}

.guest-continuation-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  margin-bottom: 21px;
  border:
    1px solid
    rgba(157, 227, 255, 0.25);
  border-radius: 21px;
  background:
    linear-gradient(
      145deg,
      rgba(72, 181, 240, 0.19),
      rgba(39, 99, 161, 0.1)
    );
  color: #d4f4ff;
  box-shadow:
    0 0 32px
      rgba(83, 198, 251, 0.11);
}

.guest-continuation-icon svg {
  width: 31px;
  height: 31px;
}

.guest-continuation-dialog
.settings-eyebrow {
  margin-bottom: 9px;
  color:
    rgba(190, 233, 251, 0.59);
}

.guest-continuation-dialog h2 {
  max-width: 390px;
  margin:
    0;
  color: #ffffff;
  font-size:
    clamp(
      28px,
      4vw,
      36px
    );
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.guest-continuation-dialog >
p:not(.settings-eyebrow) {
  max-width: 390px;
  margin:
    15px 0 0;
  color:
    rgba(231, 244, 251, 0.65);
  font-size: 14px;
  line-height: 1.58;
}

.guest-continuation-actions {
  display: grid;
  width: 100%;
  max-width: 360px;
  grid-template-columns:
    1fr 1fr;
  gap: 10px;
  margin-top: 27px;
}

.guest-continuation-actions
.auth-primary-button {
  min-height: 47px;
  margin-top: 0;
}

.guest-continuation-login {
  min-height: 47px;
  border-color:
    rgba(177, 231, 255, 0.2);
  background:
    rgba(255, 255, 255, 0.06);
}

.guest-continuation-login:hover,
.guest-continuation-login:focus-visible {
  border-color:
    rgba(188, 237, 255, 0.43);
  background:
    rgba(255, 255, 255, 0.11);
}

.guest-continuation-dialog
.guest-continuation-note {
  max-width: 360px;
  margin-top: 17px;
  color:
    rgba(211, 237, 249, 0.4);
  font-size: 10px;
  line-height: 1.5;
}

/*
 * While the confirmation-style prompt is open, the backdrop owns
 * all interaction. This prevents accidental clicks on the composer.
 */
body.guest-continuation-open
.app-shell {
  pointer-events: none;
  user-select: none;
}

body.guest-continuation-open
#guestContinuationPrompt {
  pointer-events: auto;
  user-select: auto;
}

/* ---------------------------------------------------------
   RESPONSIVE GUEST EXPERIENCE
--------------------------------------------------------- */

@media (max-width: 760px) {
  body[data-luna-auth-state="signed-out"]
  .topbar {
    min-height: 76px;
    padding:
      16px 18px;
    gap: 14px;
  }

  .guest-topbar-logo {
    width: 112px;
    min-width: 112px;
  }

  .guest-topbar-logo img {
    width: 108px;
  }

  body[data-luna-auth-state="signed-out"]
  .auth-entry-button {
    min-height: 39px;
    padding:
      0 12px;
    font-size: 11px;
  }

  body[data-luna-auth-state="signed-out"]
  .hero {
    width:
      min(
        720px,
        calc(100% - 28px)
      );
    padding-top: 108px;
  }
}

@media (max-width: 620px) {
  body[data-luna-auth-state="signed-out"]
  .sidebar {
    display: none !important;
  }

  body[data-luna-auth-state="signed-out"]
  .main-content,
  body[data-luna-auth-state="signed-out"]
  .app-shell.sidebar-open
  .main-content {
    width: 100%;
    margin-left: 0;
  }

  body[data-luna-auth-state="signed-out"]
  .topbar {
    position: absolute;
    min-height: 70px;
    padding:
      13px 12px;
    /*
     * Clear the status bar and Dynamic Island. In the iOS app the page is
     * drawn edge to edge, so without this the Sign in controls sit under
     * the clock and battery. The inset is 0 in a normal browser tab.
     *
     * max() rather than a plain sum. Adding the full 13px on top of the
     * inset sat the buttons noticeably low in the native app, but 13px is
     * the right gap on the mobile website, where the inset is 0. This
     * keeps the web spacing untouched and tightens the app to 4px under
     * the safe area -- the inset already clears the Dynamic Island, so
     * the buttons stay well away from the clock and battery.
     */
    padding-top:
      max(
        13px,
        calc(
          4px +
          env(
            safe-area-inset-top,
            0px
          )
        )
      );
    gap: 8px;
  }

  .guest-topbar-logo {
    width: 88px;
    min-width: 88px;
  }

  .guest-topbar-logo img {
    width: 86px;
  }

  body[data-luna-auth-state="signed-out"]
  .auth-entry-actions {
    gap: 5px;
  }

  body[data-luna-auth-state="signed-out"]
  .auth-entry-button {
    min-height: 36px;
    padding:
      0 9px;
    border-radius: 10px;
    font-size: 10px;
  }

  body[data-luna-auth-state="signed-out"]
  .settings-entry-button {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  body[data-luna-auth-state="signed-out"]
  .settings-entry-button span {
    display: none;
  }

  body[data-luna-auth-state="signed-out"]
  .hero {
    width:
      min(
        520px,
        calc(100% - 22px)
      );
    padding-top: 94px;
    padding-bottom: 90px;
  }

  body[data-luna-auth-state="signed-out"]
  .guest-home-legal {
    bottom: 14px;
    font-size: 8px;
  }

  .guest-continuation-backdrop {
    padding: 10px;
  }

  .guest-continuation-dialog {
    width:
      calc(100vw - 20px);
    min-height:
      min(
        460px,
        calc(100vh - 20px)
      );
    max-height:
      calc(100vh - 20px);
    padding:
      42px 22px 30px;
    border-radius: 20px;
  }

  .guest-continuation-dialog h2 {
    font-size: 28px;
  }

  .guest-continuation-actions {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

body.reduce-motion
.guest-topbar-logo,
body.reduce-motion
.guest-continuation-dialog,
body.reduce-motion
.guest-continuation-actions button {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .guest-topbar-logo,
  .guest-continuation-dialog,
  .guest-continuation-actions button {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   LUNA GUEST LOGO AND LANGUAGE SETTINGS — PHASE 77
========================================================= */

/* ---------------------------------------------------------
   SMALL TOP-LEFT GUEST MARK
--------------------------------------------------------- */

body[data-luna-auth-state="signed-out"]
.guest-topbar-logo {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

body[data-luna-auth-state="signed-out"]
.guest-topbar-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter:
    drop-shadow(
      0 7px 18px
      rgba(0, 0, 0, 0.2)
    );
}

body[data-luna-auth-state="signed-out"]
.guest-topbar-logo:hover,
body[data-luna-auth-state="signed-out"]
.guest-topbar-logo:focus-visible {
  background:
    rgba(255, 255, 255, 0.055);
}

/* ---------------------------------------------------------
   SMALL GUEST SETTINGS MENU
--------------------------------------------------------- */

.guest-settings-menu {
  position: fixed;
  top: 76px;
  right: 28px;
  z-index: 10010;
  width: 190px;
  padding: 7px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(81, 181, 236, 0.12),
      transparent 42%
    ),
    rgba(4, 15, 34, 0.985);
  box-shadow:
    0 22px 54px
      rgba(0, 0, 0, 0.44),
    0 0 28px
      rgba(76, 190, 247, 0.07);
  backdrop-filter:
    blur(18px);
  animation:
    modalScaleIn
    150ms ease;
}

.guest-settings-menu-item {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding:
    0 11px;
  border-radius: 9px;
  background: transparent;
  color:
    rgba(238, 247, 252, 0.84);
  font-size: 12px;
  font-weight: 680;
  text-align: left;
}

.guest-settings-menu-item:hover,
.guest-settings-menu-item:focus-visible {
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.guest-settings-menu-item svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #bfeeff;
}

/* ---------------------------------------------------------
   CENTERED LANGUAGE CHOOSER
--------------------------------------------------------- */

.guest-language-backdrop {
  z-index: 12010;
  background:
    rgba(0, 6, 16, 0.84);
  backdrop-filter:
    blur(13px)
    saturate(0.72);
}

.guest-language-dialog {
  display: flex;
  width:
    min(
      560px,
      calc(100vw - 42px)
    );
  max-height:
    min(
      720px,
      calc(100vh - 42px)
    );
  flex-direction: column;
  overflow: hidden;
  border:
    1px solid
    rgba(163, 229, 255, 0.23);
  border-radius: 23px;
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(79, 183, 241, 0.2),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      rgba(13, 32, 61, 0.995),
      rgba(5, 17, 37, 0.995)
    );
  box-shadow:
    0 42px 130px
      rgba(0, 0, 0, 0.66),
    0 0 46px
      rgba(73, 188, 244, 0.1);
  animation:
    modalScaleIn
    180ms ease;
}

.guest-language-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding:
    24px 25px 20px;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.guest-language-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.guest-language-header p:last-child {
  max-width: 410px;
  margin:
    8px 0 0;
  color:
    rgba(225, 242, 250, 0.56);
  font-size: 11px;
  line-height: 1.5;
}

.guest-language-list {
  display: grid;
  min-height: 0;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 9px;
  padding:
    20px 24px;
  overflow-y: auto;
}

.guest-language-option {
  position: relative;
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 11px;
  padding:
    11px 12px;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background:
    rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition:
    border-color var(--fast),
    background var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.guest-language-option:hover,
.guest-language-option:focus-within {
  border-color:
    rgba(178, 233, 255, 0.32);
  background:
    rgba(75, 181, 235, 0.11);
  box-shadow:
    0 0 0 3px
      rgba(133, 214, 255, 0.045);
  transform:
    translateY(-1px);
}

.guest-language-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #5cb8ef;
}

.guest-language-option span,
.guest-language-option strong,
.guest-language-option small {
  display: block;
}

.guest-language-option strong {
  color:
    rgba(255, 255, 255, 0.94);
  font-size: 12px;
}

.guest-language-option small {
  margin-top: 3px;
  color:
    rgba(213, 238, 249, 0.5);
  font-size: 10px;
}

.guest-language-option:has(input:checked) {
  border-color:
    rgba(168, 229, 255, 0.5);
  background:
    linear-gradient(
      145deg,
      rgba(70, 177, 236, 0.18),
      rgba(45, 111, 179, 0.09)
    );
  box-shadow:
    0 0 0 3px
      rgba(133, 214, 255, 0.055),
    0 0 24px
      rgba(83, 198, 251, 0.08);
}

.guest-language-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 9px;
  padding:
    16px 24px 22px;
  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------
   RESPONSIVE GUEST SETTINGS
--------------------------------------------------------- */

@media (max-width: 760px) {
  .guest-settings-menu {
    top: 68px;
    right: 18px;
  }

  .guest-language-list {
    grid-template-columns:
      1fr;
  }
}

@media (max-width: 620px) {
  body[data-luna-auth-state="signed-out"]
  .guest-topbar-logo {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  body[data-luna-auth-state="signed-out"]
  .guest-topbar-logo img {
    width: 29px;
    height: 29px;
  }

  .guest-settings-menu {
    top: 60px;
    right: 12px;
    width: 172px;
  }

  .guest-language-backdrop {
    padding: 10px;
  }

  .guest-language-dialog {
    width:
      calc(100vw - 20px);
    max-height:
      calc(100vh - 20px);
    border-radius: 19px;
  }

  .guest-language-header {
    padding:
      20px 18px 17px;
  }

  .guest-language-list {
    padding:
      16px 18px;
  }

  .guest-language-actions {
    padding:
      14px 18px 18px;
  }

  .guest-language-actions
  .page-button {
    flex:
      1 1 0;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

body.reduce-motion
.guest-settings-menu,
body.reduce-motion
.guest-language-dialog,
body.reduce-motion
.guest-language-option {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .guest-settings-menu,
  .guest-language-dialog,
  .guest-language-option {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   LUNA PINNED AND RECENT CHATS — PHASE 80
   Tightens sidebar chat spacing and gives pinned conversations
   their own compact section above Recent Chats.
========================================================= */

.pinned-chat-section,
.recent-chat-section {
  min-width: 0;
}

.pinned-chat-section {
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.075);
}

.pinned-section-heading {
  margin-bottom: 5px;
}

.pinned-section-heading h2 {
  color: #c8efff;
}

.pinned-list {
  max-height: 150px;
  overflow-y: auto;
}

.recent-chat-section {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.recent-chat-section .recent-list {
  min-height: 0;
  flex: 1 1 auto;
}

/* Reduce the visual gap between conversation rows. */
.recent-list {
  gap: 1px;
}

.recent-list li {
  min-height: 34px;
}

.recent-list
button.recent-thread-button {
  min-height: 34px;
  padding:
    5px 7px;
  border-radius: 8px;
}

.recent-thread-title {
  font-size: 11.5px;
  line-height: 1.2;
}

.recent-project-name {
  margin-bottom: 1px;
  font-size: 9px;
}

.recent-thread-more-button {
  width: 26px !important;
  height: 26px;
  min-width: 26px;
  border-radius: 7px !important;
}

/* Distinguish pinned chats without making the section feel heavy. */
.pinned-list
.recent-thread-button {
  background:
    linear-gradient(
      145deg,
      rgba(75, 181, 235, 0.08),
      rgba(255, 255, 255, 0.025)
    );
}

.pinned-list
.recent-thread-button:hover,
.pinned-list
.recent-thread-button:focus-visible {
  background:
    linear-gradient(
      145deg,
      rgba(75, 181, 235, 0.15),
      rgba(255, 255, 255, 0.06)
    );
}

/*
 * Pinned status does not imply unread status.
 * The dot remains invisible unless the thread also has
 * the existing .is-unread class.
 */
.pinned-list
.recent-unread-dot {
  background: transparent;
  box-shadow: none;
}

.pinned-list
.recent-thread-button.is-unread
.recent-unread-dot {
  background: #bdefff;
  box-shadow:
    0 0 0 3px
      rgba(129, 218, 255, 0.08),
    0 0 11px
      rgba(151, 226, 255, 0.68);
}

/* Keep the Pinned label and Recent Chats label visually compact. */
.recent-section .section-heading {
  margin-bottom: 6px;
}

.recent-section .section-heading h2 {
  font-size: 11px;
  letter-spacing: 0.075em;
}

.recent-section .clear-recent {
  padding:
    3px 6px;
  font-size: 10px;
}

.recent-empty {
  margin:
    6px 4px 0;
  font-size: 11px;
}

/* Mobile/tablet sidebar behavior stays compact. */
@media (max-width: 980px) {
  .pinned-chat-section,
  .recent-chat-section {
    display: none;
  }
}

/* =========================================================
   LUNA RECENT CHATS TOP ALIGNMENT — PHASE 83
   Keeps the first conversation anchored directly beneath the
   Recent Chats heading instead of stretching into the middle
   of an otherwise empty sidebar section.
========================================================= */

.recent-chat-section
.recent-list,
.pinned-chat-section
.recent-list {
  align-content: start;
  grid-auto-rows: max-content;
}

.recent-chat-section
.recent-list > li,
.pinned-chat-section
.recent-list > li {
  align-self: start;
  height: auto;
}

/* =========================================================
   LUNA CHAT, PINNING, CONTINUATION, AND ARTIFACT POLISH
   Final overrides for:
   - one-click pin and unpin controls
   - Rename inside the recent-chat overflow menu
   - conversation-length warnings
   - streamed document and spreadsheet progress
   - completed artifact filename presentation
========================================================= */

/* ---------------------------------------------------------
   RECENT CHAT ACTIONS: PIN + THREE-DOT MENU
--------------------------------------------------------- */

.recent-list li {
  grid-template-columns:
    minmax(0, 1fr)
    auto;
}

.recent-thread-actions {
  display: grid;
  grid-template-columns:
    26px
    26px;
  align-items: center;
  justify-content: end;
  gap: 2px;
  min-width: 54px;
}

.recent-thread-pin-button,
.recent-thread-more-button {
  display: grid !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  place-items: center;
  padding: 0 !important;
  border:
    1px solid
    transparent;
  border-radius:
    7px !important;
  background:
    transparent !important;
  color:
    rgba(255, 255, 255, 0.5);
  opacity: 0.68;
  transition:
    opacity var(--fast),
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.recent-thread-pin-button {
  color:
    rgba(190, 236, 255, 0.62);
}

.recent-thread-pin-button:hover,
.recent-thread-pin-button:focus-visible,
.recent-thread-pin-button[aria-pressed="true"],
.recent-thread-more-button:hover,
.recent-thread-more-button:focus-visible,
.recent-thread-more-button[aria-expanded="true"] {
  border-color:
    rgba(181, 232, 255, 0.19);
  background:
    rgba(255, 255, 255, 0.09) !important;
  color: #ffffff;
  opacity: 1;
  outline: none;
}

.recent-thread-pin-button:hover,
.recent-thread-pin-button:focus-visible {
  box-shadow:
    0 0 18px
    rgba(97, 202, 252, 0.12);
}

.recent-thread-pin-button[aria-pressed="true"] {
  border-color:
    rgba(168, 230, 255, 0.28);
  background:
    linear-gradient(
      145deg,
      rgba(76, 183, 239, 0.18),
      rgba(255, 255, 255, 0.055)
    ) !important;
  color: #d5f5ff;
  box-shadow:
    0 0 18px
    rgba(87, 198, 250, 0.1);
}

.recent-thread-pin-button:active,
.recent-thread-more-button:active {
  transform:
    scale(0.92);
}

.recent-thread-pin-button svg,
.recent-thread-more-button svg {
  width: 15px;
  height: 15px;
}

.recent-list li:hover
.recent-thread-pin-button,
.recent-list li:focus-within
.recent-thread-pin-button,
.recent-list li:hover
.recent-thread-more-button,
.recent-list li:focus-within
.recent-thread-more-button,
.recent-thread-pin-button[aria-pressed="true"],
.recent-thread-more-button[aria-expanded="true"] {
  opacity: 1;
}

/*
 * Keep the one-click unpin control visible in the Pinned section,
 * even when the pointer is not over the row.
 */
.pinned-list
.recent-thread-pin-button {
  opacity: 0.9;
}

/* ---------------------------------------------------------
   CONVERSATION-LENGTH WARNING
--------------------------------------------------------- */

.conversation-limit-warning {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin:
    12px 4px 0;
  padding:
    12px 13px 12px 15px;
  border:
    1px solid
    rgba(255, 215, 137, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 198, 91, 0.1),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(137, 93, 28, 0.14),
      rgba(7, 24, 48, 0.88)
    );
  box-shadow:
    0 14px 34px
      rgba(0, 0, 0, 0.16),
    0 0 28px
      rgba(255, 191, 72, 0.055);
}

.conversation-limit-warning > div {
  min-width: 0;
}

.conversation-limit-warning strong,
.conversation-limit-warning span {
  display: block;
}

.conversation-limit-warning strong {
  color: #fff2d0;
  font-size: 12px;
  font-weight: 760;
}

.conversation-limit-warning span {
  margin-top: 3px;
  color:
    rgba(255, 239, 205, 0.61);
  font-size: 10px;
  line-height: 1.45;
}

.conversation-limit-warning
.page-button {
  min-height: 38px;
  flex: 0 0 auto;
  padding:
    0 12px;
  border-color:
    rgba(255, 222, 154, 0.28);
  background:
    linear-gradient(
      145deg,
      rgba(196, 134, 35, 0.18),
      rgba(255, 255, 255, 0.05)
    );
  color: #fff4dc;
  font-size: 10px;
  white-space: nowrap;
}

.conversation-limit-warning
.page-button:hover,
.conversation-limit-warning
.page-button:focus-visible {
  border-color:
    rgba(255, 230, 176, 0.55);
  background:
    linear-gradient(
      145deg,
      rgba(215, 151, 48, 0.28),
      rgba(255, 255, 255, 0.08)
    );
  box-shadow:
    0 0 24px
    rgba(255, 191, 72, 0.1);
  outline: none;
}

/* ---------------------------------------------------------
   GENERATED FILE AND SPREADSHEET PROGRESS
--------------------------------------------------------- */

.generated-artifact-card {
  --artifact-progress: 18%;
}

.generated-artifact-progress {
  grid-template-columns:
    50px
    minmax(0, 1fr);
}

.generated-artifact-progress
.generated-artifact-copy {
  display: grid;
  gap: 4px;
}

.generated-artifact-progress-bar {
  position: relative;
  width: 100%;
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 2px
    rgba(0, 0, 0, 0.24);
}

.generated-artifact-progress-bar > span {
  position: relative;
  display: block;
  width:
    var(--artifact-progress);
  min-width: 12%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(82, 187, 240, 0.7),
      rgba(150, 230, 255, 0.96),
      rgba(91, 215, 201, 0.82)
    );
  box-shadow:
    0 0 15px
    rgba(98, 206, 251, 0.24);
  transition:
    width 320ms ease;
}

.generated-artifact-progress-bar > span::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(
      100deg,
      transparent 10%,
      rgba(255, 255, 255, 0.62) 48%,
      transparent 86%
    );
  transform:
    translateX(-120%);
  animation:
    lunaArtifactProgressSweep
    1.5s ease-in-out
    infinite;
}

.generated-artifact-filename {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color:
    rgba(232, 246, 252, 0.78);
  font-size: 11px;
  font-weight: 640;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generated-artifact-card[data-artifact-kind="xlsx"]
.generated-artifact-icon,
.generated-artifact-card[data-artifact-kind="csv"]
.generated-artifact-icon,
.generated-artifact-progress
.generated-artifact-icon {
  border-color:
    rgba(115, 231, 205, 0.23);
  background:
    linear-gradient(
      145deg,
      rgba(47, 181, 150, 0.17),
      rgba(42, 111, 179, 0.08)
    );
  color: #c9faeb;
  box-shadow:
    0 0 24px
    rgba(75, 224, 184, 0.07);
}

.generated-artifact-card[data-artifact-kind="pptx"]
.generated-artifact-icon {
  border-color:
    rgba(255, 188, 133, 0.22);
  background:
    rgba(203, 106, 47, 0.12);
  color: #ffe0c3;
}

.generated-artifact-card[data-artifact-state="ready"] {
  border-color:
    rgba(129, 229, 202, 0.23);
}

.generated-artifact-actions
.page-button {
  min-height: 37px;
  padding:
    0 12px;
  font-size: 10px;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}

.generated-artifact-actions
[data-artifact-label] {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
}

@keyframes lunaArtifactProgressSweep {
  0% {
    transform:
      translateX(-120%);
  }

  70%,
  100% {
    transform:
      translateX(145%);
  }
}

/* ---------------------------------------------------------
   RESPONSIVE POLISH
--------------------------------------------------------- */

@media (max-width: 760px) {
  .conversation-limit-warning {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .conversation-limit-warning
  .page-button {
    width: 100%;
  }

  .generated-artifact-progress {
    grid-template-columns:
      44px
      minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .recent-thread-actions {
    grid-template-columns:
      25px
      25px;
    min-width: 52px;
  }

  .recent-thread-pin-button,
  .recent-thread-more-button {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    opacity: 1;
  }

  .conversation-limit-warning {
    margin-right: 0;
    margin-left: 0;
  }

  .generated-artifact-progress {
    grid-template-columns:
      40px
      minmax(0, 1fr);
  }

  .generated-artifact-filename {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

body.reduce-motion
.generated-artifact-progress-bar > span::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .generated-artifact-progress-bar > span::after {
    animation: none !important;
  }
}
/* =========================================================
   RECENT CHAT ACTIONS — SHOW ONLY ON INDIVIDUAL ROW HOVER
========================================================= */

.recent-thread-pin-button,
.recent-thread-more-button,
.pinned-list .recent-thread-pin-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(3px);
}

/*
 * Show the pin and three-dot controls only when the user
 * hovers over or keyboard-focuses that specific chat row.
 */
.recent-list li:hover .recent-thread-pin-button,
.recent-list li:hover .recent-thread-more-button,
.recent-list li:focus-within .recent-thread-pin-button,
.recent-list li:focus-within .recent-thread-more-button,
.recent-thread-more-button[aria-expanded="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/*
 * Keep keyboard navigation accessible.
 */
.recent-thread-pin-button:focus-visible,
.recent-thread-more-button:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*
 * Touchscreens do not have hover, so the controls remain
 * visible on phones and tablets.
 */
@media (hover: none) {
  .recent-thread-pin-button,
  .recent-thread-more-button,
  .pinned-list .recent-thread-pin-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

/* =========================================================
   LUNA SETTINGS INFORMATION ARCHITECTURE CLEANUP
   Consolidates customer-facing controls into seven clear areas
   while keeping advanced routing automatic and out of the UI.
========================================================= */

.settings-dialog-refined {
  width: min(1080px, calc(100vw - 42px));
  height: min(780px, calc(100vh - 42px));
}

.settings-header {
  align-items: flex-start;
  padding: 24px 27px 21px;
}

.settings-header-description {
  max-width: 520px;
  margin: 7px 0 0;
  color: rgba(220, 239, 249, 0.55);
  font-size: 12px;
  line-height: 1.5;
}

.settings-dialog-refined .settings-layout {
  grid-template-columns: 218px minmax(0, 1fr);
}

.settings-dialog-refined .settings-navigation {
  gap: 5px;
  padding: 18px 13px;
}

.settings-dialog-refined .settings-nav-button {
  min-height: 43px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgba(226, 241, 249, 0.6);
  font-size: 13px;
  font-weight: 680;
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.settings-dialog-refined .settings-nav-button:hover,
.settings-dialog-refined .settings-nav-button:focus-visible {
  border-color: rgba(174, 231, 255, 0.12);
  background: rgba(255, 255, 255, 0.065);
  color: #ffffff;
  transform: translateX(2px);
}

.settings-dialog-refined .settings-nav-button.active {
  border-color: rgba(164, 228, 255, 0.22);
  background:
    linear-gradient(
      145deg,
      rgba(71, 172, 231, 0.18),
      rgba(255, 255, 255, 0.065)
    );
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(125, 210, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

.settings-dialog-refined .settings-content {
  padding: 28px 32px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(188, 236, 255, 0.16) transparent;
}

.settings-dialog-refined .settings-content::-webkit-scrollbar {
  width: 6px;
}

.settings-dialog-refined .settings-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(188, 236, 255, 0.16);
}

.settings-panel-intro {
  margin-bottom: 22px;
}

.settings-panel-kicker {
  display: block;
  margin: 0 0 6px;
  color: rgba(170, 222, 255, 0.68);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.settings-panel-intro h3 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.settings-panel-intro > p:last-child {
  max-width: 660px;
  margin: 0;
  color: rgba(222, 241, 250, 0.58);
  font-size: 13px;
  line-height: 1.55;
}

.settings-section-stack {
  display: grid;
  gap: 15px;
}

.settings-section-card {
  position: relative;
  overflow: hidden;
  padding: 18px 19px;
  border: 1px solid rgba(161, 226, 255, 0.13);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(73, 174, 233, 0.085),
      transparent 42%
    ),
    rgba(5, 19, 41, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 12px 30px rgba(0, 0, 0, 0.11);
}

.settings-section-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.settings-section-heading strong,
.settings-section-heading span {
  display: block;
}

.settings-section-heading strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  font-weight: 730;
}

.settings-section-heading span {
  margin-top: 4px;
  color: rgba(216, 238, 249, 0.5);
  font-size: 11px;
  line-height: 1.5;
}

.settings-section-card .settings-row {
  min-height: 66px;
  padding: 14px 0;
}

.settings-danger-card {
  border-color: rgba(255, 138, 156, 0.26);
}

.settings-danger-copy {
  margin: 12px 0 0;
  color: rgba(238, 224, 228, 0.72);
  font-size: 13px;
  line-height: 1.6;
}

.settings-danger-button {
  margin-top: 16px;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 138, 156, 0.55);
  border-radius: 999px;
  background: rgba(255, 92, 120, 0.12);
  color: rgb(255, 176, 190);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.settings-danger-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.settings-danger-confirm {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.settings-danger-confirm[hidden] {
  display: none;
}

.settings-danger-confirm label {
  color: rgba(238, 224, 228, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.settings-danger-confirm input {
  width: min(260px, 100%);
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 138, 156, 0.4);
  border-radius: 12px;
  background: rgba(10, 6, 10, 0.45);
  color: #fff;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.settings-danger-confirm .settings-danger-button {
  width: fit-content;
  margin-top: 4px;
}

.settings-danger-status {
  margin: 12px 0 0;
  color: rgba(255, 184, 194, 0.92);
  font-size: 12px;
  line-height: 1.55;
}

.settings-section-card .settings-row:last-child {
  border-bottom: 0;
}

.settings-section-card .settings-row strong {
  font-weight: 680;
}

.settings-section-card .settings-row select {
  min-width: 172px;
  border-color: rgba(165, 226, 255, 0.16);
  background: rgba(3, 15, 34, 0.62);
}

.settings-toggle-row input[type="checkbox"] {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(181, 227, 248, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    border-color var(--fast),
    background var(--fast),
    box-shadow var(--fast);
}

.settings-toggle-row input[type="checkbox"]::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  content: "";
  border-radius: 50%;
  background: rgba(235, 246, 252, 0.7);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  transition:
    transform var(--normal),
    background var(--fast);
}

.settings-toggle-row input[type="checkbox"]:checked {
  border-color: rgba(148, 225, 255, 0.52);
  background:
    linear-gradient(
      90deg,
      rgba(61, 164, 229, 0.72),
      rgba(71, 207, 194, 0.58)
    );
  box-shadow: 0 0 20px rgba(77, 190, 244, 0.12);
}

.settings-toggle-row input[type="checkbox"]:checked::after {
  background: #ffffff;
  transform: translateX(20px);
}

.settings-toggle-row input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(145, 220, 255, 0.14);
  outline-offset: 2px;
}

.settings-form-card {
  padding: 20px;
}

.settings-form-card .settings-field:first-child {
  margin-top: 0;
}

.settings-form-card .settings-field + .settings-field {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.settings-form-card .settings-field input,
.settings-form-card .settings-field textarea {
  border-color: rgba(165, 226, 255, 0.15);
  background: rgba(3, 15, 34, 0.58);
}

.settings-form-card .settings-field input:focus,
.settings-form-card .settings-field textarea:focus {
  border-color: rgba(170, 229, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(112, 205, 255, 0.075);
}

.settings-field-note {
  display: block;
  color: rgba(210, 235, 247, 0.42);
  font-size: 10px;
  line-height: 1.5;
}

.settings-information-card,
.settings-support-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}

.settings-information-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(159, 226, 255, 0.17);
  border-radius: 13px;
  background: rgba(74, 174, 229, 0.09);
  color: #c8efff;
}

.settings-information-icon svg {
  width: 21px;
  height: 21px;
}

.settings-information-card strong,
.settings-support-card strong,
.settings-about-card strong {
  display: block;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 720;
}

.settings-information-card p,
.settings-support-card p,
.settings-about-card p {
  margin: 6px 0 0;
  color: rgba(218, 239, 249, 0.52);
  font-size: 11px;
  line-height: 1.55;
}

.settings-privacy-note .settings-information-icon {
  color: #c8f9ea;
  background: rgba(56, 172, 143, 0.08);
}

.settings-voice-card {
  padding: 20px;
}

.settings-voice-summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.settings-voice-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(172, 230, 255, 0.23);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 45% 35%,
      rgba(255, 255, 255, 0.2),
      transparent 35%
    ),
    rgba(72, 175, 230, 0.13);
  color: #d5f5ff;
  box-shadow: 0 0 24px rgba(75, 189, 244, 0.08);
}

.settings-voice-mark svg {
  width: 29px;
  height: 29px;
}

.settings-voice-summary strong {
  display: block;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.2;
}

.settings-voice-summary p {
  margin: 4px 0 0;
  color: rgba(218, 239, 249, 0.5);
  font-size: 11px;
}

.settings-voice-card .voice-provider-status {
  margin-top: 17px;
}

.settings-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.settings-action-row .settings-action-button {
  margin-top: 0;
}

.settings-danger-action-row {
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.settings-support-link {
  display: inline-flex;
  margin-top: 9px;
  color: #bfeeff;
  font-size: 11px;
  font-weight: 720;
  text-decoration: underline;
  text-decoration-color: rgba(191, 238, 255, 0.28);
  text-underline-offset: 3px;
}

.settings-support-link:hover,
.settings-support-link:focus-visible {
  color: #ffffff;
  outline: none;
}

.settings-about-card {
  text-align: left;
}

.settings-about-card > strong {
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* Keep dynamically injected Usage and Billing content aligned with the refined shell. */
.settings-panel[data-settings-panel="usage"] > h3,
.settings-panel[data-settings-panel="billing"] > h3 {
  font-size: 26px;
  letter-spacing: -0.025em;
}

@media (max-width: 820px) {
  .settings-dialog-refined .settings-layout {
    display: block;
    overflow-y: auto;
  }

  .settings-dialog-refined .settings-navigation {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(5, 18, 41, 0.98);
  }

  .settings-dialog-refined .settings-nav-button {
    width: auto;
    min-height: 39px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .settings-dialog-refined .settings-nav-button:hover,
  .settings-dialog-refined .settings-nav-button:focus-visible {
    transform: none;
  }

  .settings-dialog-refined .settings-content {
    overflow: visible;
    padding: 23px 20px 34px;
  }
}

@media (max-width: 620px) {
  .settings-dialog-refined {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .settings-header-description {
    display: none;
  }

  .settings-dialog-refined .settings-content {
    padding: 21px 15px 30px;
  }

  .settings-section-card {
    padding: 15px;
    border-radius: 14px;
  }

  .settings-section-card .settings-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .settings-section-card .settings-row select {
    width: 100%;
  }

  .settings-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
  }

  .settings-toggle-row input[type="checkbox"] {
    align-self: center;
  }

  .settings-information-card,
  .settings-support-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .settings-information-icon {
    width: 38px;
    height: 38px;
  }

  .settings-voice-summary {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .settings-voice-mark {
    width: 46px;
    height: 46px;
  }

  .settings-voice-summary .settings-value-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .settings-danger-action-row,
  .settings-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-action-row .settings-action-button {
    width: 100%;
  }
}

/* =========================================================
   LUNA INLINE SOURCE PRESENTATION
   Keep citations inside the answer instead of displaying a
   separate Sources or References section.
========================================================= */

.luna-inline-source-links {
  display: flex;
  max-width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.luna-inline-source-link {
  display: inline-flex;
  min-height: 27px;
  max-width: min(230px, 100%);
  align-items: center;
  padding: 4px 9px;
  overflow: hidden;
  border: 1px solid rgba(163, 225, 255, 0.14);
  border-radius: 999px;
  background: rgba(69, 158, 211, 0.065);
  color: rgba(207, 239, 253, 0.68) !important;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    transform var(--fast);
}

.luna-inline-source-link::before {
  margin-right: 5px;
  color: rgba(177, 231, 255, 0.58);
  content: "↗";
  font-size: 9px;
}

.luna-inline-source-link:hover,
.luna-inline-source-link:focus-visible {
  border-color: rgba(179, 233, 255, 0.34);
  background: rgba(75, 177, 228, 0.14);
  color: #ffffff !important;
  outline: none;
  transform: translateY(-1px);
}

@media (max-width: 620px) {
  .luna-inline-source-link {
    max-width: 100%;
  }
}

body.reduce-motion .luna-inline-source-link {
  transition: none !important;
}

/* =========================================================
   LUNA MOBILE BROWSER SIDEBAR — PHASE 84
   Replaces the phone bottom navigation with Luna's desktop-style
   fixed left sidebar. The collapsed rail remains stationary; the
   same panel expands to show pinned chats, recent chats, upgrade,
   and the normal desktop navigation.
========================================================= */

@media (max-width: 620px) {
  :root {
    --luna-mobile-sidebar-collapsed: 72px;
    --luna-mobile-sidebar-expanded:
      min(
        var(--sidebar-expanded),
        calc(100vw - 48px)
      );
  }

  /*
   * Restore the fixed left-rail application structure on phones.
   * The expanded drawer overlays the page so the conversation area
   * is not compressed into an unusably narrow column.
   */
  .app-shell,
  .app-shell.sidebar-open {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .sidebar,
  .app-shell.sidebar-open .sidebar {
    position: fixed !important;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 500;
    display: flex;
    width: var(--luna-mobile-sidebar-collapsed);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    overflow: visible;
    border-top: 0;
    border-right:
      1px solid
      rgba(255, 255, 255, 0.08);
    background:
      linear-gradient(
        180deg,
        var(--sidebar-bg),
        var(--sidebar-bg-dark)
      );
    box-shadow:
      16px 0 50px
      rgba(0, 0, 0, 0.2);
    transition:
      width var(--normal),
      box-shadow var(--normal);
    -webkit-backdrop-filter:
      blur(22px);
    backdrop-filter:
      blur(22px);
  }

  .app-shell.sidebar-open .sidebar {
    width:
      var(--luna-mobile-sidebar-expanded);
    box-shadow:
      22px 0 70px
      rgba(0, 0, 0, 0.46);
  }

  .main-content,
  .app-shell.sidebar-open .main-content {
    width:
      calc(
        100% -
        var(--luna-mobile-sidebar-collapsed)
      );
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left:
      var(--luna-mobile-sidebar-collapsed);
  }

  /*
   * The sidebar's own Luna mark is now the stationary mobile
   * home control. Remove every highlight or button-like backdrop.
   */
  .sidebar-header {
    display: grid !important;
    height:
      calc(
        74px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    min-height:
      calc(
        74px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    flex: 0 0 auto;
    place-items: start center;
    padding-top:
      calc(
        12px +
        env(
          safe-area-inset-top,
          0px
        )
      );
  }

  .sidebar-logo,
  .sidebar-logo:hover,
  .sidebar-logo:focus-visible,
  .sidebar-logo.no-hover-background,
  .sidebar-logo.no-hover-background:hover,
  .sidebar-logo.no-hover-background:focus-visible,
  .sidebar-logo[data-no-hover-background="true"],
  .sidebar-logo[data-no-hover-background="true"]:hover,
  .sidebar-logo[data-no-hover-background="true"]:focus-visible {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
  }

  .sidebar-logo-highlight {
    display: none !important;
  }

  .sidebar-logo-frame {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
  }

  .sidebar-logo img {
    width: 38px;
    height: 38px;
    max-height: 38px;
    object-fit: contain;
    transform: none !important;
    filter:
      drop-shadow(
        0 7px 18px
        rgba(0, 0, 0, 0.2)
      );
  }

  /*
   * Remove the temporary floating mobile home button. The fixed
   * sidebar logo above replaces it on every signed-in route.
   */
  .luna-mobile-chat-home {
    display: none !important;
  }

  /*
   * Collapsed navigation rail.
   */
  .primary-nav {
    position: relative;
    z-index: 20;
    display: grid;
    width: 100%;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    gap: 4px;
    padding:
      0 10px;
    overflow: visible;
  }

  .app-shell:not(.sidebar-open)
  .nav-item,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    margin-inline: auto;
    padding: 0;
    grid-template-columns: 52px;
    grid-template-rows: 52px;
    place-items: center;
    gap: 0;
    overflow: visible;
    border-radius: 15px;
  }

  .app-shell:not(.sidebar-open)
  .nav-item > svg,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle > svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27px;
    height: 27px;
    margin: 0;
    transform:
      translate(-50%, -50%);
    transform-origin: center;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-toggle > svg {
    width: 26px;
    height: 26px;
  }

  .app-shell:not(.sidebar-open)
  .nav-label,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle > span {
    display: none !important;
  }

  .app-shell:not(.sidebar-open)
  [data-tooltip]::after {
    display: none !important;
  }

  /*
   * Expanded navigation rows use the same labels and actions as
   * desktop.
   */
  .app-shell.sidebar-open
  .primary-nav {
    padding:
      0 18px;
  }

  .app-shell.sidebar-open
  .nav-item {
    display: flex;
    width: 100%;
    height: 52px;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding:
      0 15px;
  }

  .app-shell.sidebar-open
  .nav-item > svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    flex: 0 0 auto;
    transform: none;
  }

  .app-shell.sidebar-open
  .nav-label {
    display: block !important;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * Pinned and recent chats occupy the expandable middle region.
   * Only the conversation lists scroll.
   */
  .app-shell:not(.sidebar-open)
  .recent-section {
    display: none !important;
  }

  .app-shell.sidebar-open
  .recent-section {
    display: flex !important;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin:
      18px 18px 0;
    padding:
      16px 12px 12px;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .app-shell.sidebar-open
  .pinned-chat-section:not([hidden]) {
    display: block;
  }

  .app-shell.sidebar-open
  .recent-chat-section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .app-shell.sidebar-open
  .recent-list {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .app-shell.sidebar-open
  .pinned-list {
    max-height:
      min(
        150px,
        23dvh
      );
    flex: 0 1 auto;
  }

  /*
   * Restore desktop-style row menus rather than a bottom sheet.
   */
  .app-shell.sidebar-open
  .recent-thread-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    bottom: auto;
    left: auto;
    width: 190px;
  }

  /*
   * Fixed lower controls. The upgrade card appears only when the
   * drawer is expanded; the arrow is always available.
   */
  .sidebar-footer,
  .app-shell.sidebar-open
  .sidebar-footer {
    position: relative;
    z-index: 22;
    display: grid !important;
    width: 100%;
    flex: 0 0 auto;
    gap: 10px;
    margin-top: auto;
    padding:
      14px 10px
      max(
        14px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    background:
      linear-gradient(
        180deg,
        rgba(9, 30, 60, 0),
        rgba(9, 30, 60, 0.88) 24%,
        rgba(9, 30, 60, 0.98)
      );
  }

  .app-shell:not(.sidebar-open)
  .sidebar-footer {
    justify-items: center;
  }

  .app-shell:not(.sidebar-open)
  .upgrade-card {
    display: none !important;
  }

  .app-shell.sidebar-open
  .upgrade-card {
    display: flex !important;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-toggle {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding:
      0 15px;
  }

  .app-shell.sidebar-open
  .sidebar-toggle > svg {
    position: static;
    width: 26px;
    height: 26px;
    margin: 0;
    flex: 0 0 auto;
  }

  .app-shell.sidebar-open
  .sidebar-toggle > span {
    display: inline !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    white-space: nowrap;
  }

  /*
   * Remove spacing that existed solely for the old bottom bar.
   */
  .standard-page {
    padding-bottom: 64px;
  }

  .chat-page {
    width:
      calc(100% - 16px);
    height: 100vh;
    height: 100dvh;
    padding-top: 70px;
    padding-bottom: 46px;
  }

  .app-footer,
  .app-shell.sidebar-open
  .app-footer {
    right: 0;
    bottom: 8px;
    left:
      var(--luna-mobile-sidebar-collapsed);
  }

  .guest-home-legal,
  .app-shell.sidebar-open
  .guest-home-legal {
    right: 0;
    left:
      var(--luna-mobile-sidebar-collapsed);
  }

  /*
   * Signed-out landing remains full width and does not show the
   * authenticated sidebar.
   */
  body[data-luna-auth-state="signed-out"]
  .sidebar {
    display: none !important;
  }

  body[data-luna-auth-state="signed-out"]
  .main-content,
  body[data-luna-auth-state="signed-out"]
  .app-shell.sidebar-open
  .main-content {
    width: 100%;
    margin-left: 0;
  }

  body[data-luna-auth-state="signed-out"]
  .guest-home-legal,
  body[data-luna-auth-state="signed-out"]
  .app-shell.sidebar-open
  .guest-home-legal {
    left: 0;
  }
}

/* =========================================================
   LUNA MOBILE FULL-SCREEN MENU — PHASE 85
   Mobile uses the full screen for content. Only the bottom-left
   arrow remains visible while the menu is closed. Opening the
   arrow reveals Luna's complete navigation as a full-screen,
   uniform dark-blue workspace.
========================================================= */

@media (max-width: 620px) {
  /*
   * Always give the active page the full mobile viewport.
   */
  .app-shell,
  .app-shell.sidebar-open {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .main-content,
  .app-shell.sidebar-open
  .main-content {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: 0;
  }

  /*
   * Closed state: the sidebar itself disappears completely.
   * Its footer remains available only to hold the bottom-left arrow.
   */
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 900;
    display: flex;
    width: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
      width var(--normal),
      background var(--normal);
  }

  .app-shell:not(.sidebar-open)
  .sidebar-header,
  .app-shell:not(.sidebar-open)
  .primary-nav,
  .app-shell:not(.sidebar-open)
  .recent-section,
  .app-shell:not(.sidebar-open)
  .upgrade-card {
    display: none !important;
  }

  /*
   * The only closed-menu control is a clean arrow at bottom left.
   */
  .app-shell:not(.sidebar-open)
  .sidebar-footer {
    position: fixed;
    right: auto;
    bottom:
      max(
        12px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 10px;
    z-index: 950;
    display: block !important;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: auto;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-toggle {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92);
    box-shadow: none !important;
    transform: none;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-toggle:hover,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle:focus-visible,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-toggle > svg {
    position: static;
    width: 31px;
    height: 31px;
    margin: 0;
    transform: none;
    filter:
      drop-shadow(
        0 5px 12px
        rgba(0, 0, 0, 0.26)
      );
  }

  .app-shell:not(.sidebar-open)
  .sidebar-toggle > span,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle::before,
  .app-shell:not(.sidebar-open)
  .sidebar-toggle::after {
    display: none !important;
    content: none !important;
  }

  /*
   * Open state: one full-screen dark-blue menu with no visual rail,
   * no pale divider, and no separate panel treatment.
   */
  .app-shell.sidebar-open
  .sidebar {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    border: 0;
    background: #06152d;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .app-shell.sidebar-open
  .sidebar-header {
    display: grid !important;
    height:
      calc(
        82px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    min-height:
      calc(
        82px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    flex: 0 0 auto;
    place-items: start center;
    padding-top:
      calc(
        16px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    background: transparent;
  }

  .app-shell.sidebar-open
  .sidebar-logo,
  .app-shell.sidebar-open
  .sidebar-logo:hover,
  .app-shell.sidebar-open
  .sidebar-logo:focus-visible {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    transform: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-logo-highlight {
    display: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-logo img {
    width: 38px;
    height: 38px;
    max-height: 38px;
    object-fit: contain;
  }

  .app-shell.sidebar-open
  .primary-nav {
    display: grid !important;
    width: 100%;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    gap: 4px;
    padding:
      0 22px;
    background: transparent;
  }

  .app-shell.sidebar-open
  .nav-item {
    display: flex;
    width: 100%;
    height: 52px;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding:
      0 15px;
    border-radius: 13px;
    background: transparent;
    color:
      rgba(255, 255, 255, 0.88);
  }

  .app-shell.sidebar-open
  .nav-item:hover,
  .app-shell.sidebar-open
  .nav-item:focus-visible,
  .app-shell.sidebar-open
  .nav-item.active {
    background:
      rgba(255, 255, 255, 0.055);
    color: #ffffff;
    box-shadow: none;
  }

  .app-shell.sidebar-open
  .nav-item > svg {
    position: static;
    width: 28px;
    height: 28px;
    margin: 0;
    flex: 0 0 auto;
    transform: none;
  }

  .app-shell.sidebar-open
  .nav-label {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /*
   * Pinned and recent chats fill the center of the open menu.
   */
  .app-shell.sidebar-open
  .recent-section {
    display: flex !important;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin:
      18px 22px 0;
    padding:
      15px 0 10px;
    overflow: hidden;
    border-top:
      1px solid
      rgba(255, 255, 255, 0.055);
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .app-shell.sidebar-open
  .pinned-chat-section {
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.045);
  }

  .app-shell.sidebar-open
  .recent-chat-section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .app-shell.sidebar-open
  .recent-list {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-shell.sidebar-open
  .pinned-list {
    max-height:
      min(
        150px,
        22dvh
      );
    flex: 0 1 auto;
  }

  .app-shell.sidebar-open
  .recent-list li:hover,
  .app-shell.sidebar-open
  .recent-list li:focus-within {
    background:
      rgba(255, 255, 255, 0.035);
  }

  .app-shell.sidebar-open
  .recent-thread-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    bottom: auto;
    left: auto;
    width: 190px;
  }

  /*
   * Open-menu bottom controls remain part of the same dark-blue page.
   */
  .app-shell.sidebar-open
  .sidebar-footer {
    position: relative;
    z-index: 22;
    display: grid !important;
    width: 100%;
    flex: 0 0 auto;
    gap: 10px;
    margin-top: auto;
    padding:
      14px 22px
      max(
        15px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    background: #06152d;
  }

  .app-shell.sidebar-open
  .upgrade-card {
    display: flex !important;
    width: 100%;
    border-color:
      rgba(122, 209, 255, 0.18);
    background:
      rgba(255, 255, 255, 0.04);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .app-shell.sidebar-open
  .upgrade-card:hover,
  .app-shell.sidebar-open
  .upgrade-card:focus-visible {
    border-color:
      rgba(147, 222, 255, 0.3);
    background:
      rgba(255, 255, 255, 0.065);
    box-shadow: none;
  }

  .app-shell.sidebar-open
  .sidebar-toggle {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding:
      0 15px;
    border-radius: 13px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
  }

  .app-shell.sidebar-open
  .sidebar-toggle:hover,
  .app-shell.sidebar-open
  .sidebar-toggle:focus-visible {
    background:
      rgba(255, 255, 255, 0.055);
    color: #ffffff;
    box-shadow: none;
  }

  .app-shell.sidebar-open
  .sidebar-toggle > svg {
    position: static;
    width: 27px;
    height: 27px;
    margin: 0;
    flex: 0 0 auto;
    transform:
      rotate(180deg);
  }

  .app-shell.sidebar-open
  .sidebar-toggle > span {
    display: inline !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /*
   * Remove all spacing that belonged to the old bottom navigation.
   */
  .standard-page {
    padding-bottom: 64px;
  }

  .chat-page {
    width:
      calc(100% - 20px);
    height: 100vh;
    height: 100dvh;
    padding-top: 70px;
    padding-bottom: 44px;
  }

  .app-footer,
  .app-shell.sidebar-open
  .app-footer {
    right: 0;
    bottom: 8px;
    left: 0;
  }

  .guest-home-legal,
  .app-shell.sidebar-open
  .guest-home-legal {
    right: 0;
    left: 0;
  }

  /*
   * The temporary floating mobile home logo is not needed in this
   * full-screen mobile pattern.
   */
  .luna-mobile-chat-home {
    display: none !important;
  }

  /*
   * Signed-out landing remains unchanged and never shows the
   * authenticated arrow or menu.
   */
  body[data-luna-auth-state="signed-out"]
  .sidebar {
    display: none !important;
  }

  body[data-luna-auth-state="signed-out"]
  .main-content,
  body[data-luna-auth-state="signed-out"]
  .app-shell.sidebar-open
  .main-content {
    width: 100%;
    margin-left: 0;
  }
}

/* =========================================================
   LUNA MOBILE LEFT DRAWER — PHASE 86
   Keeps the full mobile screen available while the menu is closed.
   Tapping the bottom-left arrow opens only a compact left drawer
   for navigation, pinned chats, recent chats, and plan controls.
========================================================= */

@media (max-width: 620px) {
  :root {
    --luna-mobile-drawer-width:
      min(
        84vw,
        320px
      );
  }

  /*
   * The open mobile menu is a left-side drawer, not a full-screen
   * takeover. The active page remains visible to the right.
   */
  .app-shell.sidebar-open
  .sidebar {
    width:
      var(--luna-mobile-drawer-width);
    max-width:
      var(--luna-mobile-drawer-width);
    background: #06152d;
    box-shadow:
      18px 0 46px
      rgba(0, 0, 0, 0.34);
  }

  /*
   * Keep the content full width. The drawer overlays the left side
   * instead of shrinking the conversation or workspace.
   */
  .app-shell.sidebar-open
  .main-content {
    width: 100%;
    margin-left: 0;
  }

  /*
   * Keep the drawer visually unified. No light divider or separate
   * panel strip appears along its right edge.
   */
  .app-shell.sidebar-open
  .sidebar {
    border: 0;
  }

  .app-shell.sidebar-open
  .sidebar-header,
  .app-shell.sidebar-open
  .primary-nav,
  .app-shell.sidebar-open
  .recent-section,
  .app-shell.sidebar-open
  .sidebar-footer {
    background: #06152d;
  }

  /*
   * Give the drawer enough horizontal room for readable labels and
   * conversation names while retaining the existing compact spacing.
   */
  .app-shell.sidebar-open
  .primary-nav {
    padding:
      0 16px;
  }

  .app-shell.sidebar-open
  .recent-section {
    margin:
      16px 16px 0;
  }

  .app-shell.sidebar-open
  .sidebar-footer {
    padding:
      14px 16px
      max(
        15px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }

  /*
   * Keep recent-chat menus inside the drawer on narrow phones.
   */
  .app-shell.sidebar-open
  .recent-thread-menu {
    right: 0;
    width:
      min(
        190px,
        calc(
          var(--luna-mobile-drawer-width) -
          28px
        )
      );
  }
}

/* =========================================================
   LUNA COMPACT MOBILE LEFT DRAWER — PHASE 87
   Narrows the mobile drawer to roughly half the screen and gives
   Upgrade Your Plan a compact teal glow.
========================================================= */

@media (max-width: 620px) {
  :root {
    --luna-mobile-drawer-width:
      min(
        48vw,
        194px
      );
  }

  .app-shell.sidebar-open
  .sidebar {
    width:
      var(--luna-mobile-drawer-width);
    max-width:
      var(--luna-mobile-drawer-width);
    box-shadow:
      14px 0 34px
      rgba(0, 0, 0, 0.28);
  }

  .app-shell.sidebar-open
  .sidebar-header {
    height:
      calc(
        66px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    min-height:
      calc(
        66px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    padding-top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      );
  }

  .app-shell.sidebar-open
  .sidebar-logo {
    width: 42px;
    height: 42px;
  }

  .app-shell.sidebar-open
  .sidebar-logo img {
    width: 31px;
    height: 31px;
    max-height: 31px;
  }

  .app-shell.sidebar-open
  .primary-nav {
    gap: 2px;
    padding:
      0 10px;
  }

  .app-shell.sidebar-open
  .nav-item {
    height: 45px;
    min-height: 45px;
    gap: 10px;
    padding:
      0 10px;
    border-radius: 10px;
  }

  .app-shell.sidebar-open
  .nav-item > svg {
    width: 23px;
    height: 23px;
  }

  .app-shell.sidebar-open
  .nav-label {
    font-size: 13px;
  }

  .app-shell.sidebar-open
  .recent-section {
    margin:
      12px 10px 0;
    padding:
      11px 0 7px;
  }

  .app-shell.sidebar-open
  .recent-section
  .section-heading {
    margin-bottom: 4px;
  }

  .app-shell.sidebar-open
  .recent-section
  .section-heading h2 {
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .app-shell.sidebar-open
  .recent-section
  .clear-recent {
    padding:
      2px 3px;
    font-size: 8px;
  }

  .app-shell.sidebar-open
  .recent-list li {
    min-height: 29px;
  }

  .app-shell.sidebar-open
  .recent-list
  button.recent-thread-button {
    min-height: 29px;
    padding:
      4px 4px;
    grid-template-columns:
      5px minmax(0, 1fr);
    gap: 5px;
    border-radius: 7px;
  }

  .app-shell.sidebar-open
  .recent-thread-title {
    font-size: 9.5px;
    line-height: 1.15;
  }

  .app-shell.sidebar-open
  .recent-project-name {
    font-size: 8px;
  }

  .app-shell.sidebar-open
  .recent-thread-actions {
    grid-template-columns:
      22px 22px;
    min-width: 46px;
    gap: 1px;
  }

  .app-shell.sidebar-open
  .recent-thread-pin-button,
  .app-shell.sidebar-open
  .recent-thread-more-button {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  .app-shell.sidebar-open
  .recent-thread-pin-button svg,
  .app-shell.sidebar-open
  .recent-thread-more-button svg {
    width: 12px;
    height: 12px;
  }

  .app-shell.sidebar-open
  .sidebar-footer {
    gap: 7px;
    padding:
      10px 10px
      max(
        10px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }

  /*
   * Compact teal-glow upgrade card.
   */
  .app-shell.sidebar-open
  .upgrade-card {
    min-height: 58px;
    gap: 8px;
    padding:
      9px 8px;
    border-color:
      rgba(86, 236, 225, 0.62);
    border-radius: 13px;
    background:
      linear-gradient(
        135deg,
        rgba(37, 206, 197, 0.24),
        rgba(46, 156, 221, 0.14)
      ),
      rgba(5, 26, 48, 0.92);
    box-shadow:
      0 0 0 1px
        rgba(95, 244, 231, 0.08),
      0 0 24px
        rgba(47, 226, 211, 0.27),
      inset 0 1px 0
        rgba(255, 255, 255, 0.08);
  }

  .app-shell.sidebar-open
  .upgrade-card:hover,
  .app-shell.sidebar-open
  .upgrade-card:focus-visible {
    border-color:
      rgba(123, 255, 243, 0.88);
    background:
      linear-gradient(
        135deg,
        rgba(43, 225, 212, 0.34),
        rgba(57, 178, 237, 0.2)
      ),
      rgba(5, 29, 53, 0.96);
    box-shadow:
      0 0 0 2px
        rgba(95, 244, 231, 0.1),
      0 0 32px
        rgba(47, 226, 211, 0.4),
      inset 0 1px 0
        rgba(255, 255, 255, 0.1);
  }

  .app-shell.sidebar-open
  .upgrade-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
    background:
      rgba(91, 245, 231, 0.13);
    color: #9ffcf2;
    box-shadow:
      0 0 15px
      rgba(64, 231, 216, 0.18);
  }

  .app-shell.sidebar-open
  .upgrade-icon svg {
    width: 17px;
    height: 17px;
  }

  .app-shell.sidebar-open
  .upgrade-copy strong {
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }

  .app-shell.sidebar-open
  .upgrade-copy small {
    font-size: 8px;
    line-height: 1.25;
    white-space: normal;
  }

  .app-shell.sidebar-open
  .sidebar-toggle {
    min-height: 43px;
    gap: 10px;
    padding:
      0 10px;
    border-radius: 10px;
  }

  .app-shell.sidebar-open
  .sidebar-toggle > svg {
    width: 23px;
    height: 23px;
  }

  .app-shell.sidebar-open
  .sidebar-toggle > span {
    font-size: 12px;
  }
}

/* =========================================================
   LUNA SIDEBAR HEADER TOGGLE + FOOTER PROFILE — PHASE 88
   Moves the expand/collapse arrow beside the Luna logo and moves
   the signed-in profile control from the top-right into the bottom
   of the sidebar on desktop and mobile.
========================================================= */

/* ---------------------------------------------------------
   SHARED SIDEBAR HEADER
--------------------------------------------------------- */

.sidebar-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sidebar-header-toggle {
  position: absolute;
  top: 31px;
  right: 10px;
  z-index: 8;
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.84);
  box-shadow: none;
}

.sidebar-header-toggle:hover,
.sidebar-header-toggle:focus-visible {
  background:
    rgba(255, 255, 255, 0.075);
  color: #ffffff;
  box-shadow: none;
  outline: none;
}

.sidebar-header-toggle:active {
  transform:
    scale(0.94);
}

.sidebar-header-toggle svg {
  position: static;
  width: 23px;
  height: 23px;
  margin: 0;
  transform: none;
  transition:
    transform var(--normal);
}

.app-shell.sidebar-open
.sidebar-header-toggle svg {
  transform:
    rotate(180deg);
}

/*
 * Give the collapsed desktop header enough room for both controls
 * without putting a dark box behind the Luna mark.
 */
.app-shell:not(.sidebar-open)
.sidebar-header {
  justify-content: flex-start;
  padding-left: 11px;
}

.app-shell:not(.sidebar-open)
.sidebar-logo {
  width: 50px;
  height: 50px;
}

.app-shell:not(.sidebar-open)
.sidebar-logo img {
  width: 36px;
  max-height: 36px;
}

/* ---------------------------------------------------------
   SIDEBAR PROFILE
--------------------------------------------------------- */

.sidebar-profile {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.app-shell.sidebar-open
.sidebar-profile {
  justify-content: flex-start;
}

.sidebar-profile
.avatar-button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.app-shell.sidebar-open
.sidebar-profile
.avatar-button {
  width: 47px;
  height: 47px;
  flex-basis: 47px;
}

.sidebar-profile
.profile-menu {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left:
    calc(100% + 12px);
  width: 260px;
}

/*
 * The top-right signed-in account control has moved into the
 * sidebar. Guest login and signup controls remain in the topbar.
 */
body[data-luna-auth-state="signed-in"]
.topbar-account {
  display: none;
}

/* ---------------------------------------------------------
   SIDEBAR FOOTER
--------------------------------------------------------- */

.sidebar-footer {
  gap: 11px;
}

.app-shell:not(.sidebar-open)
.sidebar-footer {
  justify-items: center;
}

.app-shell:not(.sidebar-open)
.sidebar-profile {
  justify-content: center;
}

.app-shell.sidebar-open
.sidebar-footer {
  align-items: stretch;
}

.app-shell.sidebar-open
.sidebar-profile {
  padding:
    2px 3px 0;
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 980px) and (min-width: 621px) {
  .sidebar-header-toggle {
    top: 25px;
    right: 7px;
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
  }

  .sidebar-header-toggle svg {
    width: 21px;
    height: 21px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-header {
    padding-left: 7px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-logo {
    width: 43px;
    height: 43px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-logo img {
    width: 32px;
    max-height: 32px;
  }

  .sidebar-profile
  .avatar-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 620px) {
  /*
   * Closed mobile state: keep the page full width. The Luna mark
   * and expand arrow sit together at the top-left, and the profile
   * remains accessible at the bottom-left.
   */
  .app-shell:not(.sidebar-open)
  .sidebar-header {
    position: fixed;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    right: auto;
    bottom: auto;
    left: 10px;
    z-index: 950;
    display: flex !important;
    width: 88px;
    height: 46px;
    min-height: 46px;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 0;
    background: transparent;
    pointer-events: auto;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-logo {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-logo img {
    width: 31px;
    height: 31px;
    max-height: 31px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-header-toggle {
    position: static;
    display: grid !important;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    place-items: center;
    border-radius: 10px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-header-toggle svg {
    position: static;
    width: 23px;
    height: 23px;
    transform: none;
  }

  /*
   * Closed mobile footer now contains only the profile control.
   */
  .app-shell:not(.sidebar-open)
  .sidebar-footer {
    position: fixed;
    right: auto;
    bottom:
      max(
        12px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 10px;
    z-index: 950;
    display: grid !important;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    place-items: center;
    background: transparent;
    pointer-events: auto;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-profile {
    display: flex !important;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-profile
  .avatar-button {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  /*
   * Open mobile drawer: arrow stays in the upper-right of the
   * drawer header, and the profile replaces the old collapse row.
   */
  .app-shell.sidebar-open
  .sidebar-header {
    position: relative;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0;
  }

  .app-shell.sidebar-open
  .sidebar-header-toggle {
    position: absolute;
    top:
      calc(
        16px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    right: 9px;
    display: grid !important;
    width: 33px;
    height: 33px;
    min-width: 33px;
    min-height: 33px;
  }

  .app-shell.sidebar-open
  .sidebar-header-toggle svg {
    width: 22px;
    height: 22px;
    transform:
      rotate(180deg);
  }

  .app-shell.sidebar-open
  .sidebar-profile {
    display: flex !important;
    justify-content: flex-start;
    padding:
      1px 2px 0;
  }

  .app-shell.sidebar-open
  .sidebar-profile
  .avatar-button {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }

  /*
   * On a phone the profile menu opens as a compact overlay above
   * the bottom edge so all existing profile actions remain usable.
   */
  .sidebar-profile
  .profile-menu {
    position: fixed;
    top: auto;
    right: 12px;
    bottom:
      calc(
        72px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 12px;
    width: auto;
    max-height:
      calc(
        100dvh -
        100px
      );
    overflow-y: auto;
  }

  /*
   * The top-right area no longer reserves space for a signed-in
   * avatar. Loading and guest controls continue to work normally.
   */
  body[data-luna-auth-state="signed-in"]
  .topbar {
    pointer-events: none;
  }
}

/* =========================================================
   LUNA MOBILE DRAWER DISMISS + BOTTOM CHAT COMPOSER — PHASE 89
   Clicking the visible page closes the open mobile drawer.
   In every mobile conversation, the composer becomes the final
   item at the bottom of the usable viewport.
========================================================= */

.mobile-sidebar-dismiss {
  display: none;
}

@media (max-width: 620px) {
  /*
   * Transparent click target over the visible main screen.
   * It closes the drawer without adding a dark overlay or a new
   * visual break between the drawer and the page.
   */
  .app-shell.sidebar-open
  + .mobile-sidebar-dismiss,
  .mobile-sidebar-dismiss {
    display: none;
  }

  .app-shell.sidebar-open
  .mobile-sidebar-dismiss {
    display: none;
  }

  /*
   * The dismiss button is a sibling of appShell, so use :has()
   * on the document body to expose it only while the mobile drawer
   * is open.
   */
  body:has(.app-shell.sidebar-open)
  .mobile-sidebar-dismiss {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left:
      var(--luna-mobile-drawer-width);
    z-index: 850;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }

  body:has(.app-shell.sidebar-open)
  .mobile-sidebar-dismiss:focus-visible {
    outline: none;
  }

  /*
   * Keep the chat viewport exact on mobile. The message list takes
   * the flexible middle area, the disclaimer sits immediately above
   * the composer, and the composer is the final bottom element.
   */
  #chatView.active
  .chat-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom:
      max(
        7px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }

  #chatView.active
  .message-list {
    order: 1;
    min-height: 0;
    flex: 1 1 auto;
  }

  #chatView.active
  .thread-disclaimer {
    order: 2;
    flex: 0 0 auto;
    margin:
      5px 0 7px;
    font-size: 9px;
    line-height: 1.3;
  }

  #chatView.active
  .composer-thread {
    position: relative;
    bottom: auto;
    order: 3;
    width: 100%;
    flex: 0 0 auto;
    margin:
      0 auto;
  }

  /*
   * The global Feedback / Report links remain on all other screens.
   * Hiding them only in an active mobile chat lets the message box
   * reach the bottom without overlap.
   */
  body:has(#chatView.active)
  .app-footer {
    display: none !important;
  }
}

/* =========================================================
   LUNA SIDEBAR ACCOUNT ROW — PHASE 90
   Restores the original top icon alignment, makes the collapsed
   desktop rail thinner, and places the profile and arrow together
   at the bottom. Expanded sidebars show the member name and email.
   Mobile closed state shows only the arrow.
========================================================= */

:root {
  --sidebar-collapsed: 84px;
}

/* ---------------------------------------------------------
   RESTORE TOP LOGO AND NAVIGATION ALIGNMENT
--------------------------------------------------------- */

.sidebar-header {
  position: relative;
  display: grid;
  height: 104px;
  min-height: 104px;
  place-items: start center;
  padding:
    18px 0 0;
}

.sidebar-header-toggle {
  display: none !important;
}

.app-shell:not(.sidebar-open)
.sidebar-header {
  justify-content: initial;
  padding-left: 0;
}

.app-shell:not(.sidebar-open)
.sidebar-logo {
  width: 52px;
  height: 52px;
}

.app-shell:not(.sidebar-open)
.sidebar-logo img {
  width: 38px;
  height: 38px;
  max-height: 38px;
}

.app-shell:not(.sidebar-open)
.primary-nav {
  width: 100%;
  justify-items: center;
  padding-inline: 0;
}

.app-shell:not(.sidebar-open)
.nav-item {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  margin-inline: auto;
}

/* ---------------------------------------------------------
   PROFILE + ARROW ROW
--------------------------------------------------------- */

.sidebar-account-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 6px;
}

.sidebar-profile {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}

.sidebar-profile-button {
  display: flex;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 50px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding:
    5px 7px;
  overflow: visible;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #ffffff;
  box-shadow: none;
  text-align: left;
}

.sidebar-profile-button:hover,
.sidebar-profile-button:focus-visible,
.sidebar-profile-button[aria-expanded="true"] {
  background:
    rgba(255, 255, 255, 0.065);
  box-shadow: none;
  outline: none;
}

.sidebar-profile-avatar {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border:
    2px solid
    rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.35),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #5989bc,
      #314e75 58%,
      #182b48
    );
  color: #ffffff;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.03em;
  box-shadow:
    0 7px 20px
    rgba(0, 0, 0, 0.24);
}

.sidebar-profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.sidebar-profile-copy {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.sidebar-profile-copy strong,
.sidebar-profile-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-copy strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
}

.sidebar-profile-copy small {
  margin-top: 3px;
  color:
    rgba(218, 238, 249, 0.55);
  font-size: 10px;
  line-height: 1.25;
}

.sidebar-account-toggle {
  position: static;
  display: grid;
  width: 34px;
  height: 44px;
  min-width: 34px;
  min-height: 44px;
  margin: 0;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color:
    rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.sidebar-account-toggle:hover,
.sidebar-account-toggle:focus-visible {
  background:
    rgba(255, 255, 255, 0.075);
  color: #ffffff;
  box-shadow: none;
  outline: none;
}

.sidebar-account-toggle svg {
  position: static;
  width: 23px;
  height: 23px;
  margin: 0;
  transform: none;
  transition:
    transform var(--normal);
}

.app-shell.sidebar-open
.sidebar-account-toggle svg {
  transform:
    rotate(180deg);
}

/* ---------------------------------------------------------
   COLLAPSED DESKTOP ACCOUNT ROW
--------------------------------------------------------- */

.app-shell:not(.sidebar-open)
.sidebar-footer {
  width: 100%;
  padding:
    14px 7px 18px;
}

.app-shell:not(.sidebar-open)
.sidebar-account-row {
  grid-template-columns:
    40px 25px;
  justify-content: center;
  gap: 2px;
}

.app-shell:not(.sidebar-open)
.sidebar-profile {
  width: 40px;
}

.app-shell:not(.sidebar-open)
.sidebar-profile-button {
  width: 40px;
  min-width: 40px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.app-shell:not(.sidebar-open)
.sidebar-profile-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex-basis: 38px;
}

.app-shell:not(.sidebar-open)
.sidebar-profile-copy {
  display: none;
}

.app-shell:not(.sidebar-open)
.sidebar-account-toggle {
  width: 25px;
  height: 40px;
  min-width: 25px;
  min-height: 40px;
  border-radius: 8px;
}

.app-shell:not(.sidebar-open)
.sidebar-account-toggle svg {
  width: 21px;
  height: 21px;
}

/* ---------------------------------------------------------
   EXPANDED ACCOUNT ROW
--------------------------------------------------------- */

.app-shell.sidebar-open
.sidebar-account-row {
  grid-template-columns:
    minmax(0, 1fr)
    34px;
}

.app-shell.sidebar-open
.sidebar-profile-copy {
  display: block;
}

.app-shell.sidebar-open
.sidebar-profile
.profile-menu {
  bottom: 0;
  left:
    calc(100% + 12px);
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 980px) and (min-width: 621px) {
  :root {
    --sidebar-collapsed: 76px;
  }

  .sidebar-header {
    height: 94px;
    min-height: 94px;
    padding-top: 16px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-logo {
    width: 47px;
    height: 47px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-logo img {
    width: 34px;
    height: 34px;
    max-height: 34px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-footer {
    padding-inline: 4px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-account-row {
    grid-template-columns:
      37px 23px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-profile,
  .app-shell:not(.sidebar-open)
  .sidebar-profile-button {
    width: 37px;
    min-width: 37px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-profile-avatar {
    width: 35px;
    height: 35px;
    min-width: 35px;
    flex-basis: 35px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-account-toggle {
    width: 23px;
    min-width: 23px;
  }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 620px) {
  /*
   * Closed mobile: the authenticated page remains completely clear.
   * Do not show the Luna mark or profile until the drawer is opened.
   * Only the arrow remains as the drawer entry point.
   */
  .app-shell:not(.sidebar-open)
  .sidebar-header,
  .app-shell:not(.sidebar-open)
  .sidebar-profile,
  .app-shell:not(.sidebar-open)
  .upgrade-card {
    display: none !important;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-footer {
    position: fixed;
    right: auto;
    bottom:
      max(
        12px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 10px;
    z-index: 950;
    display: block !important;
    width: 44px;
    height: 48px;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: auto;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-account-row {
    display: block;
    width: 44px;
    height: 48px;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-account-toggle {
    display: grid;
    width: 44px;
    height: 48px;
    min-width: 44px;
    min-height: 48px;
    place-items: center;
    border-radius: 0;
    background: transparent;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-account-toggle:hover,
  .app-shell:not(.sidebar-open)
  .sidebar-account-toggle:focus-visible {
    background: transparent;
  }

  .app-shell:not(.sidebar-open)
  .sidebar-account-toggle svg {
    width: 31px;
    height: 31px;
    filter:
      drop-shadow(
        0 5px 12px
        rgba(0, 0, 0, 0.26)
      );
  }

  /*
   * Open mobile drawer: restore the centered top logo and show the
   * profile, name, email, and collapse arrow beneath Upgrade.
   */
  .app-shell.sidebar-open
  .sidebar-header {
    display: grid !important;
    height:
      calc(
        66px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    min-height:
      calc(
        66px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    place-items: start center;
    padding-top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      );
  }

  .app-shell.sidebar-open
  .sidebar-logo {
    width: 42px;
    height: 42px;
  }

  .app-shell.sidebar-open
  .sidebar-logo img {
    width: 31px;
    height: 31px;
    max-height: 31px;
  }

  .app-shell.sidebar-open
  .sidebar-account-row {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      28px;
    gap: 3px;
  }

  .app-shell.sidebar-open
  .sidebar-profile {
    display: flex !important;
    width: 100%;
  }

  .app-shell.sidebar-open
  .sidebar-profile-button {
    min-height: 45px;
    gap: 7px;
    padding:
      3px 4px;
    border-radius: 10px;
  }

  .app-shell.sidebar-open
  .sidebar-profile-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-basis: 36px;
  }

  .app-shell.sidebar-open
  .sidebar-profile-copy {
    display: block;
  }

  .app-shell.sidebar-open
  .sidebar-profile-copy strong {
    font-size: 10px;
  }

  .app-shell.sidebar-open
  .sidebar-profile-copy small {
    margin-top: 2px;
    font-size: 8px;
  }

  .app-shell.sidebar-open
  .sidebar-account-toggle {
    width: 28px;
    height: 42px;
    min-width: 28px;
    min-height: 42px;
  }

  .app-shell.sidebar-open
  .sidebar-account-toggle svg {
    width: 20px;
    height: 20px;
    transform:
      rotate(180deg);
  }

  .app-shell.sidebar-open
  .sidebar-profile
  .profile-menu {
    position: fixed;
    top: auto;
    right: 12px;
    bottom:
      calc(
        72px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 12px;
    width: auto;
  }
}

/* =========================================================
   LUNA EXPANDED SIDEBAR PROFILE COPY — PHASE 91
   Ensures the expanded sidebar profile button uses the complete
   available row so the account name and email remain visible.
========================================================= */

.app-shell.sidebar-open
.sidebar-profile
.sidebar-profile-button {
  display: flex;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 50px;
  flex:
    1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding:
    5px 7px;
  overflow: visible;
  border-radius: 13px;
}

.app-shell.sidebar-open
.sidebar-profile
.sidebar-profile-copy {
  display: block;
  min-width: 0;
  flex:
    1 1 auto;
  opacity: 1;
  visibility: visible;
}

.app-shell.sidebar-open
.sidebar-profile
.sidebar-profile-copy strong,
.app-shell.sidebar-open
.sidebar-profile
.sidebar-profile-copy small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The avatar itself remains compact while the containing button
 * expands to hold Hulk Hogan and hulkster4089@gmail.com.
 */
.app-shell.sidebar-open
.sidebar-profile
.sidebar-profile-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex:
    0 0 42px;
}

@media (max-width: 620px) {
  .app-shell.sidebar-open
  .sidebar-profile
  .sidebar-profile-button {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    flex:
      1 1 auto;
    gap: 7px;
    padding:
      3px 4px;
  }

  .app-shell.sidebar-open
  .sidebar-profile
  .sidebar-profile-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex:
      0 0 36px;
  }

  .app-shell.sidebar-open
  .sidebar-profile
  .sidebar-profile-copy strong {
    font-size: 10px;
  }

  .app-shell.sidebar-open
  .sidebar-profile
  .sidebar-profile-copy small {
    margin-top: 2px;
    font-size: 8px;
  }
}

/* =========================================================
   LUNA MOBILE COMPACT UPGRADE CARD — PHASE 92
   Keeps the desktop upgrade-card proportions on mobile by reducing
   only the card's height, padding, icon, and text scale.
========================================================= */

@media (max-width: 620px) {
  .app-shell.sidebar-open
  .upgrade-card {
    width: 100%;
    min-height: 52px;
    gap: 7px;
    padding:
      7px 8px;
    border-radius: 12px;
  }

  .app-shell.sidebar-open
  .upgrade-icon {
    width: 29px;
    height: 29px;
    flex:
      0 0 29px;
    border-radius: 9px;
  }

  .app-shell.sidebar-open
  .upgrade-icon svg {
    width: 16px;
    height: 16px;
  }

  .app-shell.sidebar-open
  .upgrade-copy {
    min-width: 0;
  }

  .app-shell.sidebar-open
  .upgrade-copy strong {
    margin-bottom: 1px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .app-shell.sidebar-open
  .upgrade-copy small {
    font-size: 7.5px;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* =========================================================
   LUNA MOBILE MATCHING EXPAND / COLLAPSE ARROW — PHASE 93
   The open-drawer collapse control matches the closed-drawer
   expand control exactly, with only its direction reversed.
========================================================= */

@media (max-width: 620px) {
  .app-shell.sidebar-open
  .sidebar-account-row {
    grid-template-columns:
      minmax(0, 1fr)
      44px;
    gap: 2px;
  }

  .app-shell.sidebar-open
  .sidebar-account-toggle {
    display: grid;
    width: 44px;
    height: 48px;
    min-width: 44px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.94);
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-account-toggle:hover,
  .app-shell.sidebar-open
  .sidebar-account-toggle:focus-visible,
  .app-shell.sidebar-open
  .sidebar-account-toggle:active {
    border: 0;
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-account-toggle::before,
  .app-shell.sidebar-open
  .sidebar-account-toggle::after {
    display: none !important;
    content: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-account-toggle svg {
    position: static;
    width: 31px;
    height: 31px;
    margin: 0;
    transform:
      rotate(180deg);
    filter:
      drop-shadow(
        0 5px 12px
        rgba(0, 0, 0, 0.26)
      );
  }
}

/* =========================================================
   LUNA MOBILE TOP SIDEBAR TOGGLE — PHASE 94
   On mobile workspace pages, the expand arrow sits beside the
   active page or conversation title. When the drawer opens, the
   same arrow moves to the top of the drawer and reverses direction.
========================================================= */

@media (max-width: 620px) {
  /*
   * When the arrow is attached to an active page heading, remove
   * the old bottom-left footer entry point.
   */
  .app-shell.mobile-sidebar-toggle-in-view:not(.sidebar-open)
  .sidebar-footer {
    display: none !important;
  }

  /*
   * Create a consistent title row for History, Projects, Library,
   * Project detail, new chats, and existing conversations.
   */
  .page-heading.has-mobile-sidebar-toggle,
  .chat-title-wrap.has-mobile-sidebar-toggle {
    position: relative;
    padding-left: 50px;
  }

  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle,
  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    position: absolute;
    left: 0;
    z-index: 70;
    display: grid;
    width: 40px;
    height: 44px;
    min-width: 40px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.94);
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    top: 20px;
  }

  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    top: 16px;
  }

  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:hover,
  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:focus-visible,
  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:active,
  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:hover,
  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:focus-visible,
  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:active {
    border: 0;
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle::before,
  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle::after,
  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle::before,
  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle::after {
    display: none !important;
    content: none !important;
  }

  .page-heading.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle svg,
  .chat-title-wrap.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform: none;
    filter:
      drop-shadow(
        0 5px 12px
        rgba(0, 0, 0, 0.26)
      );
  }

  /*
   * The open-drawer collapse arrow uses the same size and clean
   * treatment at the top-left of the sidebar.
   */
  .app-shell.sidebar-open
  .sidebar-header {
    position: relative;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle {
    position: absolute;
    top:
      calc(
        11px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    left: 9px;
    z-index: 80;
    display: grid;
    width: 40px;
    height: 44px;
    min-width: 40px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.94);
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:hover,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:focus-visible,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:active {
    border: 0;
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle::before,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle::after {
    display: none !important;
    content: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform:
      rotate(180deg);
    filter:
      drop-shadow(
        0 5px 12px
        rgba(0, 0, 0, 0.26)
      );
  }
}

/* =========================================================
   LUNA MOBILE CHAT TOGGLE + DRAWER HEADER ALIGNMENT — PHASE 95
   Keeps the arrow beside New conversation and existing chat titles.
   When the drawer opens, the collapse arrow sits immediately to
   the right of the centered Luna logo.
========================================================= */

@media (max-width: 620px) {
  /*
   * Keep the open drawer logo centered while positioning the
   * collapse arrow directly beside its right edge.
   */
  .app-shell.sidebar-open
  .sidebar-header {
    position: relative;
    display: grid !important;
    place-items: start center;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle {
    position: absolute;
    top:
      calc(
        11px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    right: auto;
    left:
      calc(
        50% +
        22px
      );
    z-index: 80;
    display: grid;
    width: 40px;
    height: 44px;
    min-width: 40px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.94);
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:hover,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:focus-visible,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:active {
    border: 0;
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform:
      rotate(180deg);
  }
}

/* =========================================================
   LUNA MOBILE TOP-EDGE SIDEBAR ARROW — PHASE 96
   Uses one consistent top position on every mobile screen.
   Closed: arrow stays at the upper-left, including Home.
   Open: arrow stays at the same height on the far-right edge
   of the left drawer.
========================================================= */

@media (max-width: 620px) {
  /*
   * The closed arrow no longer changes vertical position based on
   * the active page heading. It remains fixed at the top on Home,
   * conversations, History, Projects, Project detail, and Library.
   */
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 8px !important;
    z-index: 980;
    display: grid;
    width: 42px;
    height: 44px;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.96);
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:hover,
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:focus-visible,
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform: none;
  }

  /*
   * Since the arrow is now fixed independently of titles, remove
   * the temporary left padding previously added to headings.
   */
  .page-heading.has-mobile-sidebar-toggle,
  .chat-title-wrap.has-mobile-sidebar-toggle {
    padding-left: 0;
  }

  /*
   * Home also receives the same fixed top control without changing
   * the hero's layout.
   */
  #homeView.has-mobile-sidebar-toggle {
    position: relative;
  }

  /*
   * The open-drawer arrow is aligned at the identical vertical
   * position and pushed to the drawer's far-right edge.
   */
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle {
    position: absolute !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 980;
    display: grid;
    width: 42px;
    height: 44px;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.96);
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:hover,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:focus-visible,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform:
      rotate(180deg);
  }
}

/* =========================================================
   LUNA VIEWPORT-FIXED MOBILE SIDEBAR ARROW — PHASE 97
   Mounts the closed arrow directly under <body> and fixes both
   arrow states to the mobile viewport so scrolling never moves them.
========================================================= */

.mobile-view-sidebar-toggle {
  display: none;
}

@media (max-width: 620px) {
  /*
   * Closed state: the button is a direct child of body, outside all
   * scrollable and transformed application views.
   */
  body[data-luna-auth-state="signed-in"]
  > .mobile-view-sidebar-toggle {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 8px !important;
    z-index: 2000;
    display: grid !important;
    width: 42px;
    height: 44px;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.96);
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body[data-luna-auth-state="signed-in"]
  > .mobile-view-sidebar-toggle:hover,
  body[data-luna-auth-state="signed-in"]
  > .mobile-view-sidebar-toggle:focus-visible,
  body[data-luna-auth-state="signed-in"]
  > .mobile-view-sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body[data-luna-auth-state="signed-in"]
  > .mobile-view-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform: none;
  }

  /*
   * Open state: use a viewport-fixed coordinate equal to the
   * drawer's right edge. The arrow stays at the same top level.
   */
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left:
      calc(
        var(--luna-mobile-drawer-width) -
        42px
      ) !important;
    z-index: 2000;
    display: grid !important;
    width: 42px;
    height: 44px;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.96);
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:hover,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:focus-visible,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform:
      rotate(180deg);
  }
}

/* =========================================================
   LUNA MOBILE TOP ARROW — PAGE-BOUND, NOT VIEWPORT-FIXED
   The arrow lives at the top of each page or conversation heading.
   It scrolls away with that heading, so users return to the top
   before opening the sidebar again.
========================================================= */

@media (max-width: 620px) {
  /*
   * Closed state: position the arrow inside the active page heading.
   * It is deliberately not fixed or sticky.
   */
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 40;
    display: grid !important;
    width: 42px;
    height: 44px;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.96);
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:hover,
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:focus-visible,
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform: none;
  }

  /*
   * Page and conversation headings reserve room for the arrow.
   * Because the button is inside these elements, it scrolls with them.
   */
  .page-heading.has-mobile-sidebar-toggle,
  .chat-title-wrap.has-mobile-sidebar-toggle {
    position: relative;
    padding-left: 48px;
  }

  /*
   * Home uses the same top-of-page treatment without fixing the arrow
   * to the viewport.
   */
  #homeView.has-mobile-sidebar-toggle {
    position: relative;
  }

  #homeView.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    left: 8px !important;
  }

  /*
   * Open state: the collapse arrow remains at the far-right edge of
   * the drawer header. The sidebar header itself stays at the top.
   */
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle {
    position: absolute !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 980;
    display: grid !important;
    width: 42px;
    height: 44px;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.96);
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:hover,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:focus-visible,
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform:
      rotate(180deg);
  }
}

/* =========================================================
   LUNA MOBILE PAGE-TOP ARROW — PHASE 98
   Closed arrow sits at the true top-left of every mobile view,
   matching the open drawer arrow's height. It remains page-bound,
   so it scrolls away rather than following the user.
========================================================= */

@media (max-width: 620px) {
  /*
   * Every active application view becomes the arrow's positioning
   * context. This puts Projects, History, Library, project details,
   * and conversations at the same top coordinate as Home.
   */
  .app-view.has-mobile-sidebar-toggle {
    position: relative;
  }

  .app-shell:not(.sidebar-open)
  .app-view.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    position: absolute !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 8px !important;
    z-index: 80;
    display: grid !important;
    width: 42px;
    height: 44px;
    min-width: 42px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color:
      rgba(255, 255, 255, 0.96);
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell:not(.sidebar-open)
  .app-view.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:hover,
  .app-shell:not(.sidebar-open)
  .app-view.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:focus-visible,
  .app-shell:not(.sidebar-open)
  .app-view.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .app-shell:not(.sidebar-open)
  .app-view.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle svg {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0;
    transform: none;
  }

  /*
   * Remove the older heading-level spacing because the arrow is no
   * longer inside the title block.
   */
  .page-heading.has-mobile-sidebar-toggle,
  .chat-title-wrap.has-mobile-sidebar-toggle {
    padding-left: 0;
  }

  /*
   * Keep the expanded collapse arrow at the identical vertical level
   * on the far-right edge of the drawer.
   */
  .app-shell.sidebar-open
  .sidebar-header
  > .mobile-drawer-sidebar-toggle {
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: 0 !important;
  }
}

/* =========================================================
   LUNA MOBILE AUTH SCROLL + NO-ZOOM FIX — PHASE 99
   Mobile only. Keeps the complete sign-in/sign-up form reachable
   in iPhone Safari and prevents focus zoom on form controls.
========================================================= */

@media (max-width: 760px) {
  .auth-page-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding:
      max(
        12px,
        env(
          safe-area-inset-top,
          0px
        )
      )
      10px
      max(
        24px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .auth-page-backdrop
  .auth-split-dialog {
    display: block;
    width:
      calc(
        100vw -
        20px
      );
    height: auto;
    min-height: 0;
    max-height: none;
    margin:
      0 auto;
    overflow: visible;
  }

  .auth-page-backdrop
  .auth-form-panel {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding:
      22px 20px
      max(
        34px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    overflow: visible;
  }

  .auth-page-backdrop
  .auth-brand-panel {
    display: none;
  }

  .auth-page-backdrop
  .auth-dialog-header {
    position: relative;
    padding-right: 54px;
  }

  .auth-page-backdrop
  .auth-dialog-header
  .modal-close-button {
    position: absolute;
    top: 0;
    right: 0;
  }

  .auth-page-backdrop
  input,
  .auth-page-backdrop
  select,
  .auth-page-backdrop
  textarea {
    font-size: 16px !important;
  }

  .auth-page-backdrop
  .auth-dialog
  .settings-field input {
    min-height: 48px;
    font-size: 16px !important;
  }

  .auth-page-backdrop
  .auth-password-input-wrap input {
    font-size: 16px !important;
  }

  .auth-page-backdrop
  .auth-primary-button {
    min-height: 48px;
  }

  .auth-page-backdrop
  .auth-legal-copy {
    margin-bottom:
      max(
        8px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }
}

/* =========================================================
   LUNA IN-APP EMAIL VERIFICATION CODE — PHASE 100
   Six-digit signup confirmation inside Luna on desktop and mobile.
========================================================= */

.email-confirmation-backdrop {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.email-confirmation-dialog {
  width: min(520px, calc(100vw - 36px));
  max-height: none;
  padding: 30px;
  overflow: visible;
  text-align: left;
}

.email-confirmation-header {
  align-items: flex-start;
}

.email-confirmation-address {
  display: inline-block;
  max-width: 100%;
  margin-top: 10px !important;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
}

.email-confirmation-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.email-confirmation-code-field input {
  min-height: 58px;
  padding: 12px 16px;
  font-size: 26px !important;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.email-confirmation-code-field input::placeholder {
  color: rgba(200, 225, 242, 0.3);
  letter-spacing: 0.34em;
}

.email-confirmation-code-help {
  margin: -4px 0 2px;
  color: rgba(214, 232, 245, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.email-confirmation-secondary-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.email-confirmation-secondary-actions .auth-link-button {
  margin: 0;
}

.email-confirmation-status {
  min-height: 20px;
  margin-top: 0;
  text-align: center;
}

.email-confirmation-dialog.is-busy {
  cursor: progress;
}

@media (max-width: 760px) {
  .email-confirmation-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding:
      max(
        12px,
        env(
          safe-area-inset-top,
          0px
        )
      )
      10px
      max(
        24px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    overflow-x: hidden;
    overflow-y: auto;
  }

  .email-confirmation-dialog {
    width: calc(100vw - 20px);
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding:
      22px 20px
      max(
        32px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    border-radius: 20px;
  }

  .email-confirmation-header {
    position: relative;
    padding-right: 52px;
  }

  .email-confirmation-header
  .modal-close-button {
    position: absolute;
    top: 0;
    right: 0;
  }

  .email-confirmation-form {
    margin-top: 18px;
  }

  .email-confirmation-code-field input {
    min-height: 56px;
    font-size: 24px !important;
  }

  .email-confirmation-verify-button,
  .email-confirmation-dialog
  .auth-primary-button {
    min-height: 48px;
  }

  .email-confirmation-secondary-actions {
    display: grid;
    justify-items: center;
    gap: 2px;
  }
}

/* =========================================================
   LUNA MOBILE PROFILE IMAGE PICKER — PHASE 101
   Compact Luna-owned popout with only Upload and Take Picture.
========================================================= */

.profile-avatar-upload-control {
  position: relative;
}

.profile-avatar-source-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 120;
  display: grid;
  width: 176px;
  gap: 2px;
  margin: 0;
  padding: 5px;
  border:
    1px solid
    rgba(150, 215, 255, 0.22);
  border-radius: 10px;
  background:
    rgba(7, 27, 57, 0.99);
  box-shadow:
    0 14px 32px
    rgba(0, 0, 0, 0.42);
  backdrop-filter:
    blur(18px);
}

.profile-avatar-source-menu[hidden] {
  display: none !important;
}

.profile-avatar-source-button {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding:
    7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #eef7ff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.profile-avatar-source-button:hover,
.profile-avatar-source-button:focus-visible,
.profile-avatar-source-button:active {
  background:
    rgba(118, 207, 255, 0.12);
  color: #ffffff;
  outline: none;
}

.profile-avatar-source-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.profile-avatar-source-button svg {
  width: 18px;
  height: 18px;
  flex:
    0 0 18px;
  color: #afe8ff;
}

.profile-avatar-source-button span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-avatar-upload-status {
  max-width: 100%;
  margin:
    3px 7px 2px;
  color:
    rgba(218, 234, 245, 0.78);
  font-size: 10px;
  line-height: 1.35;
}

.profile-avatar-upload-status:empty {
  display: none;
}

.profile-avatar-upload-status.is-info {
  color: #bfeeff;
}

.profile-avatar-upload-status.is-success {
  color: #a8f1d4;
}

.profile-avatar-upload-status.is-error {
  color: #ffb8c0;
}

@media (max-width: 620px) {
  .sidebar-profile
  .profile-menu {
    padding-bottom:
      max(
        12px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }

  .profile-avatar-source-menu {
    right: 4px;
    width:
      min(
        168px,
        calc(
          100vw -
          34px
        )
      );
  }
}

/* =========================================================
   LUNA MOBILE PROFILE PICKER VISIBILITY FIX — PHASE 103
   Keeps the compact Upload / Take Picture menu visible inside
   the mobile profile panel instead of clipping it as an overlay.
========================================================= */

@media (max-width: 620px) {
  .profile-avatar-upload-control {
    width: 100%;
  }

  .profile-avatar-source-menu {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    width: calc(100% - 12px);
    margin:
      4px 6px 2px;
    padding: 4px;
    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, 0.035);
  }

  .profile-avatar-source-button {
    min-height: 38px;
    padding:
      6px 8px;
    font-size: 12px;
  }
}

/* =========================================================
   LUNA SIMPLIFIED MOBILE PROFILE MENU — PHASE 104
   One Upload image action, a compact profile menu that stays inside
   the drawer, and a full-width bottom account row showing the plan.
========================================================= */

.profile-avatar-source-menu {
  display: none !important;
}

@media (max-width: 620px) {
  /*
   * The collapse arrow lives in the drawer header, so the bottom
   * account row no longer reserves an empty second column.
   */
  .app-shell.sidebar-open
  .sidebar-account-row {
    width: 100%;
    grid-template-columns:
      minmax(0, 1fr);
    gap: 0;
  }

  .app-shell.sidebar-open
  .sidebar-footer {
    padding-right: 7px;
    padding-left: 7px;
  }

  .app-shell.sidebar-open
  .sidebar-profile,
  .app-shell.sidebar-open
  .sidebar-profile-button {
    width: 100%;
    min-width: 0;
  }

  .app-shell.sidebar-open
  .sidebar-profile-button {
    min-height: 48px;
    gap: 8px;
    padding:
      4px 6px;
  }

  .app-shell.sidebar-open
  .sidebar-profile-copy strong {
    font-size: 11px;
    line-height: 1.25;
  }

  .app-shell.sidebar-open
  .sidebar-profile-copy small {
    margin-top: 2px;
    color: #bfeeff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
  }

  /*
   * Keep the opened profile menu entirely inside the narrow drawer
   * and reduce its vertical footprint.
   */
  .app-shell.sidebar-open
  .sidebar-profile
  .profile-menu {
    position: fixed;
    top: auto;
    right: auto;
    bottom:
      calc(
        62px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 6px;
    width:
      calc(
        var(--luna-mobile-drawer-width) -
        12px
      );
    max-height:
      calc(
        100dvh -
        88px -
        env(
          safe-area-inset-top,
          0px
        )
      );
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 12px;
  }

  .app-shell.sidebar-open
  .profile-summary {
    padding:
      7px 8px 9px;
  }

  .app-shell.sidebar-open
  .profile-name {
    font-size: 12px;
  }

  .app-shell.sidebar-open
  .profile-plan {
    margin-top: 5px;
    padding:
      3px 7px;
    font-size: 8px;
  }

  .app-shell.sidebar-open
  .profile-email {
    margin-top: 5px;
    font-size: 9px;
  }

  .app-shell.sidebar-open
  .profile-action {
    min-height: 36px;
    gap: 8px;
    margin-top: 2px;
    padding:
      7px 8px;
    border-radius: 8px;
    font-size: 11px;
  }

  .app-shell.sidebar-open
  .profile-action svg {
    width: 16px;
    height: 16px;
  }

  .app-shell.sidebar-open
  .profile-avatar-upload-status {
    margin:
      3px 8px 1px;
    font-size: 9px;
  }
}

/* =========================================================
   LUNA MOBILE NATIVE PHOTO PICKER ANCHOR — PHASE 105
   The real Safari file input covers the Upload image row.
   The customer's tap therefore lands on the native input at
   the bottom of the profile menu instead of a script-triggered
   two-pixel input near the top of the viewport.
========================================================= */

.profile-avatar-native-picker-anchor {
  position: relative;
}

.profile-avatar-native-picker-anchor
.profile-action {
  position: relative;
  z-index: 1;
}

.profile-avatar-native-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: none;
}

@media (max-width: 620px) {
  .app-shell.sidebar-open
  .profile-avatar-native-picker-anchor {
    width: 100%;
  }

  /*
   * Let the native input receive the actual mobile tap while the
   * existing button remains the visible Upload image row.
   */
  .app-shell.sidebar-open
  .profile-avatar-native-picker-anchor
  .profile-action {
    pointer-events: none;
  }
}

/* =========================================================
   LUNA MOBILE CHAT BOTTOM DOCK — PHASE 106
   Keeps the conversation composer at the bottom of the mobile
   viewport, followed by the AI disclaimer and support links.
========================================================= */

@media (max-width: 620px) {
  /*
   * The answer area owns the remaining viewport and scrolls above
   * the bottom dock instead of pushing the composer upward.
   */
  body:has(#chatView.active)
  #chatView.active
  .chat-page {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  body:has(#chatView.active)
  #chatView.active
  .message-list {
    min-height: 0;
    padding-bottom:
      calc(
        205px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    overflow-y: auto;
  }

  /*
   * Message Luna stays directly above the disclaimer and support
   * links at the bottom of the visible mobile browser viewport.
   */
  body:has(#chatView.active)
  #chatView.active
  .composer-thread {
    position: fixed !important;
    right: 10px;
    bottom:
      calc(
        52px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 10px;
    z-index: 720;
    /* !important: an injected "#threadForm { width: 100% !important }" (script.js, ensureCompactComposerStyles) otherwise wins, and with left/right also set the fixed composer runs 10px off the right edge. */
    width: auto !important;
    max-width: none;
    margin: 0;
  }

  /*
   * The disclaimer now appears below the composer, not above it.
   */
  body:has(#chatView.active)
  #chatView.active
  .thread-disclaimer {
    position: fixed;
    right: 12px;
    bottom:
      calc(
        29px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 12px;
    z-index: 715;
    width: auto;
    margin: 0;
    font-size: 9px;
    line-height: 1.25;
    text-align: center;
  }

  /*
   * Restore Feedback and Report a problem beneath the disclaimer.
   */
  body:has(#chatView.active)
  .app-footer,
  body:has(#chatView.active)
  .app-shell.sidebar-open
  .app-footer {
    position: fixed;
    right: 8px;
    bottom:
      max(
        3px,
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 8px;
    z-index: 710;
    display: flex !important;
    width: auto;
    max-width: none;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
  }

  body:has(#chatView.active)
  .app-footer-actions {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: auto;
  }

  body:has(#chatView.active)
  .app-footer-link {
    min-height: 22px;
    padding:
      0 6px;
    font-size: 8px;
  }

  /*
   * Keep the dock clear of the open mobile drawer.
   */
  body:has(.app-shell.sidebar-open)
  .composer-thread,
  body:has(.app-shell.sidebar-open)
  .thread-disclaimer,
  body:has(.app-shell.sidebar-open)
  .app-footer {
    visibility: hidden;
    pointer-events: none;
  }
}

/* =========================================================
   LUNA MOBILE CHAT — ONLY THE COMPOSER STAYS FIXED
   Feedback/support are hidden in mobile chat. The disclaimer
   returns to the scrolling conversation flow directly above
   the fixed composer.
========================================================= */

@media (max-width: 620px) {
  body:has(#chatView.active)
  #chatView.active {
    overflow: visible;
  }

  body:has(#chatView.active)
  #chatView.active
  .chat-page {
    display: flex;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    padding-bottom:
      calc(
        132px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    overflow: visible;
  }

  body:has(#chatView.active)
  #chatView.active
  .message-list {
    min-height: 0;
    flex:
      0 0 auto;
    padding-bottom: 18px;
    overflow: visible;
  }

  body:has(#chatView.active)
  #chatView.active
  .thread-disclaimer {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    width: auto;
    margin:
      4px 12px 0;
    padding:
      0 4px;
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
  }

  body:has(#chatView.active)
  #chatView.active
  .composer-thread {
    position: fixed !important;
    right: 10px;
    bottom:
      calc(
        8px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    left: 10px;
    z-index: 720;
    width: auto !important;
    max-width: none;
    margin: 0;
  }

  body:has(#chatView.active)
  .app-footer {
    display: none !important;
  }

  body:has(.app-shell.sidebar-open)
  #chatView.active
  .composer-thread {
    visibility: hidden;
    pointer-events: none;
  }
}

/* =========================================================
   LUNA MOBILE CHAT DISCLAIMER BOTTOM FLOW — PHASE 107
   Pushes the scrolling disclaimer to the bottom of short chats,
   directly above the fixed composer. In long chats it remains
   part of the page and scrolls away naturally.
========================================================= */

@media (max-width: 620px) {
  body:has(#chatView.active)
  #chatView.active
  .message-list {
    flex:
      1 0 auto;
  }

  body:has(#chatView.active)
  #chatView.active
  .thread-disclaimer {
    flex:
      0 0 auto;
    margin:
      0 12px 8px;
  }
}

/* =========================================================
   LUNA MOBILE CHAT DISCLAIMER — LOWER POSITION
   Gives the chat a definite mobile viewport height so the
   scrolling disclaimer rests immediately above the composer.
========================================================= */

@media (max-width: 620px) {
  body:has(#chatView.active)
  #chatView.active
  .chat-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom:
      calc(
        158px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-bottom:
      calc(
        170px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }

  body:has(#chatView.active)
  #chatView.active
  .message-list {
    min-height: 0;
    flex:
      1 0 auto;
  }

  body:has(#chatView.active)
  #chatView.active
  .thread-disclaimer {
    position: static;
    flex:
      0 0 auto;
    margin:
      0 12px 1px;
    padding:
      0 4px;
  }
}

/* =========================================================
   LUNA MOBILE CHAT DISCLAIMER — DIRECTLY ABOVE COMPOSER
   Uses the existing reserved composer space while visually
   lowering the scrolling disclaimer into that space.
========================================================= */

@media (max-width: 620px) {
  body:has(#chatView.active)
  #chatView.active
  .thread-disclaimer {
    margin:
      0 12px;
    transform:
      translateY(118px);
  }
}
/* =========================================================
   LUNA CONVERSATION COMMAND BAR + DYNAMIC PRIMARY ACTION
   Removes the former title/search header, adds compact chat
   actions, keeps the mobile sidebar arrow page-bound, and lets
   Voice transform into Send whenever a draft exists.
========================================================= */

.chat-page {
  position: relative;
}

.chat-command-bar {
  position: absolute;
  top: 20px;
  right: 4px;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.chat-command-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.chat-command-button {
  display: grid;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  place-items: center;
  border:
    1px solid
    rgba(173, 217, 248, 0.18);
  border-radius: 12px;
  color:
    rgba(246, 251, 255, 0.9);
  background:
    rgba(255, 255, 255, 0.065);
  box-shadow:
    0 9px 24px
    rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter:
    blur(12px);
  backdrop-filter:
    blur(12px);
  transition:
    border-color var(--fast),
    background var(--fast),
    color var(--fast),
    transform var(--fast);
}

.chat-command-button:hover,
.chat-command-button:focus-visible {
  border-color:
    rgba(183, 229, 255, 0.38);
  color: #ffffff;
  background:
    rgba(106, 180, 230, 0.14);
  outline: none;
}

.chat-command-button:active {
  transform:
    scale(0.96);
}

.chat-command-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.chat-command-button svg {
  width: 20px;
  height: 20px;
}

.chat-new-chat-button {
  display: none;
}

.chat-thread-menu-wrap {
  position: relative;
}

.chat-thread-actions-menu {
  position: absolute;
  top:
    calc(
      100% +
      8px
    );
  right: 0;
  z-index: 260;
  display: grid;
  width: 218px;
  padding: 7px;
  border:
    1px solid
    rgba(157, 211, 248, 0.2);
  border-radius: 13px;
  background:
    linear-gradient(
      155deg,
      rgba(14, 41, 74, 0.99),
      rgba(5, 18, 37, 0.995)
    );
  box-shadow:
    0 22px 58px
    rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter:
    blur(18px);
  backdrop-filter:
    blur(18px);
}

.chat-thread-actions-menu[hidden] {
  display: none !important;
}

.chat-thread-actions-menu button {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding:
    9px 10px;
  border: 0;
  border-radius: 9px;
  color:
    rgba(242, 249, 255, 0.88);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
}

.chat-thread-actions-menu button:hover,
.chat-thread-actions-menu button:focus-visible {
  color: #ffffff;
  background:
    rgba(255, 255, 255, 0.075);
  outline: none;
}

.chat-thread-actions-menu button:disabled {
  opacity: 0.42;
  cursor: default;
}

.chat-thread-actions-menu button.danger {
  color: #ffb7c0;
}

.chat-thread-actions-menu svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

#chatView
.chat-page {
  padding-top: 18px;
}

#chatView
.message-list {
  padding-top: 64px;
}

.composer-primary-action-slot {
  display: grid;
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  flex: 0 0 54px;
  align-items: center;
  justify-items: center;
}

.composer-thread
.composer-primary-action-slot {
  width: 54px;
  min-width: 54px;
}

.composer-primary-action-slot
> .composer-voice-action,
.composer-primary-action-slot
> .composer-send-button,
.composer-primary-action-slot
> .composer-stop-button {
  grid-area:
    1 /
    1;
  margin: 0;
}

.composer-primary-action-slot
> [hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  /*
   * The conversation page itself is the sidebar arrow's positioning
   * context. Because it is also the page's scroll container, the arrow
   * scrolls away naturally instead of following the viewport.
   */
  #chatView
  .chat-page.has-mobile-sidebar-toggle {
    position: relative;
  }

  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    position: absolute !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 8px !important;
    z-index: 190;
    display: grid !important;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    place-items: center;
    border:
      1px solid
      rgba(178, 222, 248, 0.2);
    border-radius: 12px;
    color:
      rgba(255, 255, 255, 0.96);
    background:
      rgba(255, 255, 255, 0.085) !important;
    box-shadow:
      0 8px 22px
      rgba(0, 0, 0, 0.16) !important;
    -webkit-backdrop-filter:
      blur(12px);
    backdrop-filter:
      blur(12px);
  }

  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:hover,
  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:focus-visible,
  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle:active {
    border-color:
      rgba(191, 233, 255, 0.4);
    background:
      rgba(255, 255, 255, 0.13) !important;
    box-shadow:
      0 9px 24px
      rgba(0, 0, 0, 0.18) !important;
  }

  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle svg {
    width: 27px;
    height: 27px;
  }

  .chat-command-bar {
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      );
    right: 8px;
  }

  .chat-new-chat-button {
    display: grid;
  }

  .chat-command-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    background:
      rgba(255, 255, 255, 0.075);
  }

  #chatView
  .chat-page {
    padding-top:
      calc(
        62px +
        env(
          safe-area-inset-top,
          0px
        )
      );
  }

  #chatView
  .message-list {
    padding-top: 18px;
  }

  .composer-primary-action-slot,
  .composer-thread
  .composer-primary-action-slot {
    width: 50px;
    min-width: 50px;
    min-height: 50px;
    flex-basis: 50px;
  }

  .composer-primary-action-slot
  > .composer-voice-action,
  .composer-primary-action-slot
  > .composer-send-button,
  .composer-primary-action-slot
  > .composer-stop-button {
    justify-self: stretch;
  }
}

@media (min-width: 621px) {
  .chat-command-bar {
    position: fixed;
    top: 20px;
    right: 20px;
  }

  /*
   * Desktop uses a clean standalone ellipsis without a visible square.
   * The hit area remains 40px for accessibility.
   */
  .chat-more-button {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-color: transparent !important;
    border-radius: 9px;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .chat-more-button:hover,
  .chat-more-button:focus-visible,
  .chat-more-button:active {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-more-button:hover,
  .chat-more-button:focus-visible {
    color: #ffffff;
    filter:
      drop-shadow(
        0 0 8px
        rgba(151, 221, 255, 0.48)
      );
  }

  .chat-more-button::after {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 12100;
    padding: 6px 9px;
    border:
      1px solid
      rgba(151, 207, 245, 0.24);
    border-radius: 8px;
    color:
      rgba(248, 252, 255, 0.98);
    background:
      rgba(7, 21, 40, 0.98);
    box-shadow:
      0 10px 28px
      rgba(0, 0, 0, 0.34);
    content:
      attr(data-tooltip);
    font-size: 11px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform:
      translateY(
        -3px
      );
    transition:
      opacity 110ms ease,
      transform 110ms ease,
      visibility 110ms ease;
  }

  .chat-more-button:hover::after,
  .chat-more-button:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform:
      translateY(
        0
      );
  }

  .chat-more-button[aria-expanded="true"]::after {
    opacity: 0;
    visibility: hidden;
  }
}

/* =========================================================
   SINGLE-LINE GROWING COMPOSER
   Start compact like a modern chat input, then expand upward
   only after the text wraps or the customer inserts a new line.
========================================================= */

#searchForm,
#threadForm {
  min-height: 0;
}

#searchForm > .luna-composer-primary-row,
#threadForm > .luna-composer-primary-row {
  min-height: 54px;
}

#promptInput,
#threadInput {
  min-height: 34px;
  height: 34px;
}

@media (max-width: 720px) {
  #searchForm,
  #threadForm {
    padding-block: 5px;
  }

  #searchForm > .luna-composer-primary-row,
  #threadForm > .luna-composer-primary-row {
    min-height: 50px;
  }
}

/* =========================================================
   MOBILE CHAT TOP CONTROLS — FIXED + CENTERED
   Keep the sidebar arrow and conversation actions available
   throughout the conversation while the message list scrolls.
========================================================= */

@media (max-width: 620px) {
  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
    z-index: 990 !important;
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0 !important;
  }

  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    transform:
      translate(
        -50%,
        -50%
      ) !important;
    transform-origin: center !important;
  }

  #chatView
  .chat-command-bar {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 990 !important;
  }

  #chatView
  .chat-command-actions {
    align-items: center;
  }

  /*
   * The slot stays 50px wide so neighboring controls remain fixed.
   * Only the visible Send circle is reduced to 42px.
   */
  .composer-primary-action-slot
  > .composer-send-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .composer-primary-action-slot
  > .composer-send-button svg {
    width: 19px !important;
    height: 19px !important;
  }
}

/* =========================================================
   DESKTOP SEND BUTTON SIZE
   Keep the 54px action slot so neighboring controls do not move,
   while reducing only the visible desktop Send circle.
========================================================= */

@media (min-width: 621px) {
  .composer-primary-action-slot
  > .composer-send-button {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .composer-primary-action-slot
  > .composer-send-button svg {
    width: 21px !important;
    height: 21px !important;
  }
}

/* =========================================================
   RESPONSIVE ANSWER TABLES
   Preserve the clean desktop table while giving mobile customers
   a deliberate horizontal swipe area instead of crushed columns.
========================================================= */

.assistant-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 18px 0;
  overflow-x: auto;
  overflow-y: hidden;
  border:
    1px solid
    rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  background:
    rgba(4, 17, 35, 0.28);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.assistant-table-scroll:focus-visible {
  outline:
    2px solid
    rgba(126, 205, 255, 0.66);
  outline-offset: 2px;
}

.assistant-table-scroll table {
  width: 100%;
  margin: 0;
  border: 0;
}

.assistant-table-scroll th,
.assistant-table-scroll td {
  min-width: 108px;
  overflow-wrap: break-word;
  word-break: normal;
}

.assistant-table-scroll th:first-child,
.assistant-table-scroll td:first-child {
  min-width: 58px;
}

@media (max-width: 620px) {
  .assistant-table-scroll {
    width:
      calc(
        100vw -
        34px
      );
    max-width:
      calc(
        100vw -
        34px
      );
    margin:
      14px 0;
    border-radius: 12px;
  }

  .assistant-table-scroll table {
    font-size: 13px;
  }

  .assistant-table-scroll th,
  .assistant-table-scroll td {
    padding:
      9px 10px;
    line-height: 1.45;
  }
}


/* =========================================================
   NEW-CHAT DISCLAIMER POSITION
========================================================= */

@media (min-width: 621px) {
  #chatView.active
  .chat-page.is-empty-thread
  .message-list {
    order: 1;
  }

  #chatView.active
  .chat-page.is-empty-thread
  .thread-disclaimer {
    order: 2;
    margin:
      2px auto 4px;
    transform: none;
  }

  #chatView.active
  .chat-page.is-empty-thread
  .composer-thread {
    order: 3;
  }
}

@media (max-width: 620px) {
  body:has(#chatView.active)
  #chatView.active
  .chat-page.is-empty-thread
  .thread-disclaimer {
    margin:
      0 12px;
    transform:
      translateY(
        126px
      );
  }
}


/* =========================================================
   MOBILE WORKSPACE CONTROLS + UNREAD BADGE
   The sidebar arrow remains available on every signed-in mobile
   workspace screen, and carries a teal dot while any completed
   conversation remains unopened.
========================================================= */

@media (max-width: 620px) {
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
    z-index: 990 !important;
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: visible !important;
    line-height: 0 !important;
  }

  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle
  > svg {
    position: absolute !important;
    top: 48% !important;
    left: 50% !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    transform:
      translate(
        -50%,
        -50%
      ) !important;
    transform-origin: center !important;
  }



  #chatView
  .chat-command-bar {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: 10px !important;
    z-index: 990 !important;
  }
}

/* =========================================================
   COMPACT MOBILE LIBRARY TOOLBAR
   Prevent the desktop flex-basis from turning the search field
   into a large square when the toolbar becomes a column.
========================================================= */

@media (max-width: 760px) {
  #libraryView
  .library-toolbar
  .page-search-box {
    width: 100%;
    height: 46px;
    min-height: 46px;
    flex:
      0 0 46px;
    box-sizing: border-box;
    margin: 0;
    padding:
      0 14px;
    border-radius: 13px;
  }

  #libraryView
  .library-toolbar
  .page-search-box input {
    min-height: 44px;
    padding: 0;
    font-size: 15px;
  }

  #libraryView
  .library-toolbar
  .page-search-box svg {
    width: 20px;
    height: 20px;
  }
}


/* =========================================================
   LIBRARY SUCCESS BANNER SAFEGUARD
   The runtime already suppresses successful operation banners.
========================================================= */

.library-operation-status.is-success {
  display: none !important;
}

/* Arrow unread indicators are intentionally disabled.
   Unread state remains visible only beside Recent Chats. */
.mobile-sidebar-unread-badge,
.mobile-view-sidebar-toggle.has-unread-conversation::before,
.mobile-view-sidebar-toggle.has-unread-conversation::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   FINAL MOBILE SIDEBAR ARROW BEHAVIOR
   - No teal badge or decorative dot is permitted on the arrow.
   - Every mobile workspace arrow is attached to its page.
   - The arrow naturally scrolls away on Home, Chat, History,
     Projects, Project Detail, and Library.
========================================================= */

@media (max-width: 620px) {
  /*
   * Remove every legacy pseudo-element that previously produced
   * a teal dot, glow, or extra control beside the arrow.
   */
  .sidebar-toggle::before,
  .sidebar-toggle::after,
  .sidebar-account-toggle::before,
  .sidebar-account-toggle::after,
  .mobile-view-sidebar-toggle::before,
  .mobile-view-sidebar-toggle::after,
  .mobile-drawer-sidebar-toggle::before,
  .mobile-drawer-sidebar-toggle::after,
  .sidebar-toggle.has-unread-conversation::before,
  .sidebar-toggle.has-unread-conversation::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .mobile-sidebar-unread-badge,
  .sidebar-toggle
  > [data-sidebar-unread],
  .sidebar-toggle
  > [data-luna-sidebar-unread] {
    display: none !important;
  }

  /*
   * One consistent closed-arrow appearance on every mobile screen.
   */
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border:
      1px solid
      rgba(178, 222, 248, 0.2) !important;
    border-radius: 12px !important;
    color:
      rgba(255, 255, 255, 0.96) !important;
    background:
      rgba(255, 255, 255, 0.085) !important;
    box-shadow:
      0 8px 22px
      rgba(0, 0, 0, 0.16) !important;
    -webkit-backdrop-filter:
      blur(12px);
    backdrop-filter:
      blur(12px);
    line-height: 0 !important;
    transform: none !important;
  }

  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:hover,
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:focus-visible,
  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle:active {
    border-color:
      rgba(191, 233, 255, 0.4) !important;
    color: #ffffff !important;
    background:
      rgba(255, 255, 255, 0.13) !important;
    box-shadow:
      0 9px 24px
      rgba(0, 0, 0, 0.18) !important;
    outline: none !important;
  }

  .app-shell:not(.sidebar-open)
  .mobile-view-sidebar-toggle
  > svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    transform:
      translate(
        -50%,
        -50%
      ) !important;
    transform-origin: center !important;
  }

  /*
   * Every closed mobile arrow is page-bound. Home and Chat use the
   * upper-left corner of their page; workspace list pages use the heading.
   */
  #homeView.has-mobile-sidebar-toggle,
  #chatView
  .chat-page.has-mobile-sidebar-toggle,
  .page-heading.has-mobile-sidebar-toggle {
    position: relative !important;
  }

  #homeView.has-mobile-sidebar-toggle,
  #chatView
  .chat-page.has-mobile-sidebar-toggle {
    padding-top:
      calc(
        62px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
  }

  .page-heading.has-mobile-sidebar-toggle {
    padding-left: 56px !important;
  }

  #homeView
  > .mobile-sidebar-toggle-page,
  #chatView
  .chat-page
  > .mobile-sidebar-toggle-page {
    position: absolute !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
    z-index: 190 !important;
  }

  .page-heading
  > .mobile-sidebar-toggle-page {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 80 !important;
  }

  /*
   * The open drawer arrow must never display the old teal companion dot.
   */
  .app-shell.sidebar-open
  .mobile-drawer-sidebar-toggle,
  .app-shell.sidebar-open
  .sidebar-account-toggle {
    overflow: hidden !important;
  }
}


@media (max-width: 620px) {
  .app-shell:not(.sidebar-open)
  #chatView
  .chat-page.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle,
  .app-shell:not(.sidebar-open)
  #homeView.has-mobile-sidebar-toggle
  > .mobile-view-sidebar-toggle {
    position: absolute !important;
  }
}

/* =========================================================
   HOME / NEW CHAT MOBILE ARROW
   Keep the Home arrow visible in the viewport while scrolling.
   Other mobile workspace arrows retain their current page-bound behavior.
========================================================= */

@media (max-width: 620px) {
  .app-shell:not(.sidebar-open)
  #homeView.has-mobile-sidebar-toggle
  > .mobile-sidebar-toggle-page {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
    z-index: 990 !important;
  }
}

/* =========================================================
   FINAL MOBILE ARROW — SAME FIXED BEHAVIOR EVERYWHERE
   Home, active chats, History, Projects, Project Detail, and
   Library all keep the same arrow in the viewport's top-left.
========================================================= */

@media (max-width: 620px) {
  .app-shell:not(.sidebar-open)
  > .mobile-sidebar-toggle-fixed,
  .app-shell:not(.sidebar-open)
  .mobile-sidebar-toggle-fixed {
    position: fixed !important;
    top:
      calc(
        10px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
    z-index: 990 !important;
  }

  /*
   * The global fixed host no longer requires route-specific heading
   * or chat-page spacing classes.
   */
  .app-shell.has-mobile-sidebar-toggle {
    position: static !important;
  }
}


/* =========================================================
   LUNA MOBILE STABILIZATION — AUG 2026
   Sticky composer growth, centered Project label, and a true
   touch-scroll Conversation Map drawer.
========================================================= */

@media (max-width: 620px) {
  #threadInput,
  #promptInput {
    max-height: 320px !important;
  }

  #chatView .chat-project-label {
    position: fixed !important;
    top: calc(24px + env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    z-index: 990 !important;
    display: inline-flex;
    max-width: calc(100vw - 178px) !important;
    margin: 0 !important;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%) !important;
  }

  #chatView .question-navigator-panel {
    display: flex;
    max-height: min(72dvh, calc(100dvh - 170px)) !important;
    flex-direction: column;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  #chatView .question-navigator-list {
    min-height: 0;
    max-height: none !important;
    flex: 1 1 auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #chatView .question-navigator-item {
    touch-action: manipulation;
  }
}
/* =========================================================
   MOBILE CONVERSATION MAP — CLOSE AFTER SELECTION
   Preserve the deployed touch-browser fix: sticky :hover must
   not keep the panel visible after Luna removes .is-open.
========================================================= */

@media (max-width: 620px) {
  .question-navigator:not(.is-open)
  .question-navigator-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform:
      translateX(10px)
      scale(0.985) !important;
  }

  .question-navigator.is-open
  .question-navigator-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform:
      translateX(0)
      scale(1) !important;
  }
}


/* =========================================================
   CHAT PROJECT LABEL — MOBILE
   The Project already appears in Luna's navigation/recent chat
   context. Do not float the Project name over the mobile chat.
========================================================= */

@media (max-width: 620px) {
  #chatView .chat-project-label {
    display: none !important;
  }
}


/* =========================================================
   FINAL IMAGE BADGES
   "Created by Luna", "Edited by Luna", and "Saved in Library"
   must never sit on top of the completed customer image.
   Keep the badge only during the generating/preview state.
========================================================= */

.luna-image-stage:not(.is-generating)
.luna-image-badge {
  display: none !important;
}

/* =========================================================
   FINAL REQUEST-CONTROL CLEANUP
   Safari may keep a composited shadow from the Stop control for
   one frame after completion. A hidden Stop control must be fully
   non-rendering so Voice Mode returns without a red halo.
========================================================= */

#threadStopButton[hidden],
#threadStopButton[aria-hidden="true"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* =========================================================
   FINAL SAFARI MOBILE SIDEBAR ANCHOR
   Keep the authenticated, closed-drawer control in the same
   visible top-left viewport position across Safari's dynamic bars.
========================================================= */

@media (max-width: 620px) {
  body[data-luna-auth-state="signed-in"]
  .app-shell:not(.sidebar-open)
  #sidebarToggle.mobile-view-sidebar-toggle {
    display: grid !important;
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 12px !important;
    /*
     * Mobile header controls share one layer, 990: above the page, the
     * composer (720) and the sidebar (900-950); below voice mode (1000)
     * and every dialog. This was 2147483000, and the chat command bar
     * 12050, which drew them over the image viewer, notices, and the plan,
     * payment and checkout dialogs. Raise a dialog if it needs to clear
     * the header; do not raise the header.
     */
    z-index: 990 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}


/* =========================================================
   LUNA IMAGE SAFETY MODERATION CARD
   A blocked image request is a normal image outcome, not a
   technical error. Keep the experience visually aligned with
   Luna's image workflow on desktop and mobile.
========================================================= */

.luna-image-safety-block {
  display: flex;
  width: min(100%, 560px);
  min-height: 330px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 38px 30px;
  border:
    1px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(5, 15, 30, 0.82),
      rgba(2, 9, 20, 0.94)
    );
  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);
  color: #ffffff;
  text-align: center;
}

.luna-image-safety-block-icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  place-items: center;
  color:
    rgba(255, 255, 255, 0.72);
}

.luna-image-safety-block-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.luna-image-safety-block-title {
  color:
    rgba(255, 255, 255, 0.94);
  font-size: 17px;
  font-weight: 720;
  line-height: 1.3;
}

.luna-image-safety-block-detail {
  max-width: 360px;
  color:
    rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .luna-image-safety-block {
    width: 100%;
    min-height: 280px;
    padding:
      30px 22px;
    border-radius: 18px;
  }

  .luna-image-safety-block-title {
    font-size: 16px;
  }

  .luna-image-safety-block-detail {
    max-width: 290px;
    font-size: 13px;
  }
}


/* =========================================================
   LUNA QA CONSOLIDATED MOBILE FIXES — AUG 2026
========================================================= */

/* Guest continuation: Sign up and Sign in use identical button typography. */
.guest-continuation-actions
button {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/*
 * Settings owns one bounded scroll surface on phones/tablets. The previous
 * nested height/overflow combination could strand Billing, Account, Privacy,
 * and other controls behind Safari's bottom chrome.
 */
@media (max-width: 820px) {
  .settings-dialog-refined {
    display: flex !important;
    width: min(1080px, calc(100vw - 20px)) !important;
    height: calc(100vh - 20px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .settings-dialog-refined
  .settings-header {
    flex: 0 0 auto !important;
  }

  .settings-dialog-refined
  .settings-layout {
    display: block !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .settings-dialog-refined
  .settings-navigation {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }

  .settings-dialog-refined
  .settings-content {
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom:
      calc(
        120px +
        env(
          safe-area-inset-bottom,
          0px
        )
      ) !important;
  }
}

@media (max-width: 620px) {
  #settingsBackdrop,
  .settings-backdrop {
    align-items: stretch !important;
    padding:
      10px 10px
      max(
        10px,
        env(
          safe-area-inset-bottom,
          0px
        )
      ) !important;
  }

  .settings-dialog-refined {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  /* iOS Safari zooms focused form fields whose computed font is below 16px. */
  #historySearchInput,
  #projectSearchInput,
  #projectConversationSearchInput,
  #librarySearchInput,
  .settings-dialog-refined input,
  .settings-dialog-refined textarea,
  .settings-dialog-refined select {
    font-size: 16px !important;
  }
}


/* =========================================================
   LUNA PWA INSTALL ONBOARDING
========================================================= */
.luna-install-dialog {
  position: relative;
  width: min(540px, calc(100vw - 32px));
  overflow: hidden;
  padding: 30px;
  border-color: rgba(156, 226, 255, 0.25);
  background:
    radial-gradient(circle at 50% -12%, rgba(72, 178, 240, 0.23), transparent 46%),
    linear-gradient(180deg, rgba(11, 29, 57, 0.995), rgba(4, 16, 36, 0.995));
  text-align: left;
}
.luna-install-close { position: absolute; top: 16px; right: 16px; }
.luna-install-brand {
  display: grid; width: 72px; height: 72px; place-items: center;
  margin-bottom: 20px; overflow: hidden;
  border: 1px solid rgba(179, 233, 255, 0.2); border-radius: 20px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 4px rgba(120,210,255,.04), 0 16px 38px rgba(0,0,0,.24), 0 0 30px rgba(78,193,247,.12);
}
.luna-install-brand img { width: 100%; height: 100%; object-fit: cover; }
.luna-install-dialog .settings-eyebrow { margin-bottom: 7px; }
.luna-install-dialog h2 { margin: 0 44px 9px 0; color: #fff; font-size: 27px; font-weight: 680; letter-spacing: -.025em; }
.luna-install-dialog > p { margin: 0; color: rgba(224,241,250,.62); font-size: 12px; line-height: 1.58; }
.luna-install-benefits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.luna-install-benefits span {
  display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px;
  border: 1px solid rgba(151,226,255,.16); border-radius: 999px;
  background: rgba(74,176,227,.075); color: #d4f3ff; font-size: 9px; font-weight: 720;
}
.luna-install-instructions { display: grid; gap: 9px; margin-top: 20px; }
.luna-install-step {
  display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: start; gap: 11px;
  padding: 11px 12px; border: 1px solid rgba(255,255,255,.085); border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.luna-install-step-number {
  display: grid; width: 30px; height: 30px; place-items: center;
  border: 1px solid rgba(171,231,255,.19); border-radius: 10px;
  background: rgba(79,181,231,.1); color: #c8efff; font-size: 10px; font-weight: 820;
}
.luna-install-step-copy strong, .luna-install-step-copy span { display: block; }
.luna-install-step-copy strong { margin-bottom: 3px; color: #fff; font-size: 11px; font-weight: 730; }
.luna-install-step-copy span { color: rgba(217,239,249,.52); font-size: 10px; line-height: 1.48; }
.luna-install-status { min-height: 17px; margin-top: 13px !important; color: #c9efff !important; font-size: 10px !important; }
.luna-install-status.is-success { color: #c9faeb !important; }
.luna-install-status.is-warning { color: #ffe3ad !important; }
.luna-install-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.luna-app-install-settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.luna-app-install-settings-actions .settings-action-button { margin-top: 0; }
#lunaAppInstallSettingsStatus { margin-left: 2px; }
body.luna-standalone .luna-install-backdrop { display: none !important; }

@media (max-width: 620px) {
  .luna-install-dialog {
    width: calc(100vw - 20px); max-height: calc(100vh - 20px);
    padding: 24px 18px 20px; overflow-y: auto; border-radius: 19px;
  }
  .luna-install-brand { width: 64px; height: 64px; border-radius: 18px; }
  .luna-install-dialog h2 { font-size: 24px; }
  .luna-install-actions { display: grid; grid-template-columns: 1fr 1.25fr; }
  .luna-install-actions .page-button { width: 100%; }
}
body.reduce-motion .luna-install-dialog,
body.reduce-motion .luna-install-step { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .luna-install-dialog, .luna-install-step { animation: none !important; transition: none !important; }
}