/* #region zone:account.chat-design — แชทลอย รูป Luna และวงนำทาง */
#dashboard-layout {
  display: block;
}
#luna-panel {
  --luna-line: var(--line);
  --luna-surface: var(--panel2);
  --luna-text: var(--text);
  --luna-muted: var(--muted);
  position: fixed;
  z-index: 40;
  inset: auto 24px 90px auto;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: min(700px, calc(100dvh - 120px));
  padding: 18px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
#luna-panel[hidden] {
  display: none;
}
.chat-head {
  flex-shrink: 0;
}
.chat-head > div {
  flex: 1;
}
.chat-head h2 {
  font-size: var(--fs-2xl);
}
.chat-head p {
  font-size: var(--fs-sm);
}
.chat-search {
  display: block;
  width: 100%;
  flex-shrink: 0;
  min-height: var(--u-tap);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--u-radius-pill);
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  font-size: var(--u-body);
}
.chat-search::placeholder {
  color: var(--muted);
}
.chat-minimize {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  font-size: var(--fs-metric);
  background: var(--panel2);
  color: var(--text);
}
.luna-portrait {
  display: block;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--header-well-bg);
}
.luna-avatar {
  display: block;
  width: 100%;
  height: 100%;
}
#luna-panel .chat-status {
  margin: 10px 0;
  padding-bottom: 10px;
  flex-shrink: 0;
}
#luna-panel .chat-messages {
  height: auto;
  min-height: 90px;
  flex: 1;
  overflow: auto;
}
.chat-bubble {
  flex-shrink: 0;
}
.chat-form {
  flex-shrink: 0;
}
/* Height comes from assistant/luna-composer.js: the whole placeholder or one line, up to five lines. */
#luna-panel .chat-form textarea {
  min-height: 44px;
  resize: none;
  font-size: var(--u-body);
}
.chat-prompts {
  margin: 10px 0;
  flex-shrink: 0;
}
.chat-tools {
  margin-top: var(--sp-2);
}
.chat-hint {
  margin-top: 10px;
  flex-shrink: 0;
  font-size: var(--fs-xs);
}
.chat-clear {
  min-height: 44px;
}
.chat-link {
  white-space: normal;
  text-align: left;
}
#ask-luna.luna-launcher,
#app[data-active-page='overview'] .luna-launcher {
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 41;
  right: 24px;
  bottom: 20px;
  padding: 5px;
  border-radius: 40px;
  background: transparent;
  color: var(--text);
  width: 52px;
  height: 52px;
  min-height: 52px;
  overflow: hidden;
  transition:
    width 180ms ease,
    gap 180ms ease,
    background-color 180ms ease;
  box-shadow: none;
}
/* Collapsed it is only the portrait in one brand ring (assistant/luna-thinking.css); the dark well
   appears with the label, so there is never a second ring around the face. */
#ask-luna.luna-launcher:focus-visible,
#ask-luna.luna-launcher[data-unread] {
  background: var(--header-well-bg);
}
.luna-launcher .luna-portrait {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.luna-launcher-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition:
    max-width 180ms ease,
    opacity 180ms ease;
}
#ask-luna.luna-launcher:focus-visible {
  width: 200px;
  gap: var(--sp-2);
}
.luna-launcher:focus-visible .luna-launcher-copy {
  max-width: 150px;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  #ask-luna.luna-launcher:hover {
    width: 200px;
    gap: var(--sp-2);
    background: var(--header-well-bg);
    box-shadow: var(--card-shadow);
  }
  .luna-launcher:hover .luna-launcher-copy {
    max-width: 150px;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ask-luna.luna-launcher,
  .luna-launcher-copy {
    transition: none;
  }
}
.luna-launcher-copy small {
  font-size: 10px;
  font-weight: 400;
  color: var(--header-well-text);
}
.account-interests h2 {
  font-size: var(--fs-3xl);
  margin: var(--sp-2) 0;
}
.account-interests .muted {
  font-size: var(--fs-md);
}
.account-interests form {
  margin: 18px 0 var(--sp-2);
}
.interest-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: 18px;
}
.interest-options .ui-check-chip {
  font-size: var(--fs-md);
}
.interest-actions {
  gap: var(--sp-3);
}
.interest-actions button {
  min-height: 44px;
}
.interest-confirm {
  width: min(440px, calc(100% - 32px));
  padding: 28px;
  text-align: center;
}
.interest-confirm p {
  color: var(--muted);
}
.interest-feedback {
  font-size: var(--fs-md);
  color: var(--accent-text);
}
.interest-feedback:empty {
  display: none;
}
/* The floating Luna button (52px wide, 12-24px from the edge) must never sit over a switch while the page
   scrolls under it: keep the row content (and its switch) 8px clear of the button on every narrow screen. */
@media (max-width: 900px) {
  #app label.preference {
    padding-inline-end: 44px;
  }
}
/* Touch targets in the Luna panel: every control is at least 44px tall on phones and tablets. */
@media (max-width: 900px), (pointer: coarse) {
  #luna-panel .chat-minimize {
    width: var(--tap-min, 44px);
    height: var(--tap-min, 44px);
    min-height: var(--tap-min, 44px);
  }
  #luna-panel .chat-clear,
  #luna-panel .chat-search,
  #luna-panel .chat-prompts button {
    min-height: var(--tap-min, 44px);
  }
}
@media (max-width: 700px) {
  #luna-panel {
    right: 12px;
    bottom: 86px;
    max-width: calc(100vw - 24px);
    width: 400px;
    height: min(640px, calc(100dvh - 104px));
    padding: 14px;
    border-radius: var(--r-card);
  }
  .chat-form textarea {
    font-size: var(--fs-xl);
  }
  #ask-luna.luna-launcher,
  #app[data-active-page='overview'] .luna-launcher {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    /* Keep hover expansion anchored while the adjacent heading wraps. */
    align-self: start;
    z-index: 1;
  }
  .chat-prompts button {
    font-size: var(--fs-xs);
  }
  .chat-bubble {
    font-size: var(--fs-md);
  }
  .chat-hint {
    font-size: 10px;
  }
  .interest-options {
    gap: var(--sp-2);
  }
  .interest-options .ui-check-chip {
    padding: var(--sp-2) 10px;
    font-size: var(--fs-sm);
  }
}
@media (max-height: 560px) {
  #luna-panel {
    bottom: 76px;
    height: calc(100dvh - 86px);
  }
  .chat-prompts,
  .chat-hint,
  .chat-search,
  .chat-head p {
    display: none;
  }
  .chat-form textarea {
    min-height: 42px;
    height: 42px;
  }
  /* Short landscape screens: field and buttons share one row so the transcript keeps more than a line or two. */
  #luna-panel {
    padding: var(--sp-3);
  }
  .chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-2);
  }
  .chat-tools {
    margin-top: 0;
  }
  .chat-form .chat-error {
    grid-column: 1 / -1;
    margin: 0;
  }
  .chat-status {
    padding-bottom: var(--sp-1) !important;
    margin: var(--sp-1) 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .luna-avatar,
  .luna-focus {
    animation: none;
  }
}
/* #endregion */
/* Reserve room under the page for the floating Luna button (52px + 20px offset + gap) so the last row never hides behind it. */
.account-shell main {
  padding-bottom: calc(52px + 20px + var(--sp-6));
}

/* #region zone:account.chat-viewport — ทั้งแชทตามขอบคีย์บอร์ดร่วม */
@media (max-width: 767px) {
  #luna-panel[data-viewport-sheet] {
    inset: auto 0 var(--u-keyboard-inset, 0px);
    width: 100%;
    max-width: 100%;
    height: min(680px, calc(var(--u-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - var(--sp-2)));
    border-radius: var(--r-card) var(--r-card) 0 0;
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
  #luna-panel[data-viewport-compact] .chat-search,
  #luna-panel[data-viewport-compact] .chat-hint,
  #luna-panel[data-viewport-compact] .chat-head p {
    display: none;
  }
  #luna-panel .chat-prompts {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 var(--sp-2),
      #000 calc(100% - var(--sp-3)),
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 var(--sp-2),
      #000 calc(100% - var(--sp-3)),
      transparent
    );
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    gap: var(--sp-2);
  }
  #luna-panel .chat-prompts button {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
    scroll-snap-align: start;
    border-radius: var(--r-control);
  }
  #luna-panel[data-viewport-compact] .chat-status {
    margin-block: var(--sp-1);
    padding-bottom: var(--sp-1);
  }
  #luna-panel .chat-messages {
    min-height: 0;
    overscroll-behavior: contain;
  }
  #luna-panel :is(input, textarea) {
    font-size: max(16px, 1rem);
  }
}
/* #endregion */