/* #region zone:shared.ui.dropdown-style — ปุ่มและรายการเลือกรูปทรงเดียวกับเมนูชุดกลาง */
.u-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-3);
  text-align: start;
  cursor: pointer;
}
.u-dropdown > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.u-dropdown-list {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: var(--u-pad);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-card);
  background: var(--u-pop);
  color: var(--u-ink);
  box-shadow: var(--u-shadow);
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 10000;
}
.u-dropdown-list:popover-open {
  display: grid;
  gap: var(--u-space-2);
}
.u-dropdown-option {
  width: 100%;
  min-height: var(--u-tap);
  border: 0;
  border-radius: var(--u-radius-inner);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-3);
  padding: var(--u-space-3) var(--u-space-4);
  color: inherit;
  background: transparent;
  font: var(--u-body)/1.4 var(--u-font);
  text-align: start;
  cursor: pointer;
}
.u-dropdown-option:hover,
.u-dropdown-option:focus-visible,
.u-dropdown-option[aria-selected='true'] {
  background: var(--u-hover);
  outline-offset: -2px;
}
.u-dropdown-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.u-dropdown-check {
  visibility: hidden;
}
.u-dropdown-option[aria-selected='true'] .u-dropdown-check {
  visibility: visible;
}
/* #endregion */

/* #region zone:shared.ui.components — ชิ้นส่วน A D E F G H I จากแผ่น UI Parts */
.u-btn,
.u-input,
.u-select,
.u-mi,
.u-seg,
.u-switch,
.u-dialog,
.u-popover,
.u-menu {
  box-sizing: border-box;
}
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u-space-2);
  min-height: var(--u-tap);
  min-width: var(--u-tap);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--u-ink);
  font: 500 var(--u-body)/1.3 var(--u-font);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--u-duration) ease,
    border-color var(--u-duration) ease,
    transform 120ms ease;
}
.u-primary {
  background: var(--u-primary);
  color: var(--u-on-primary);
}
.u-secondary {
  border-color: var(--u-line-strong);
}
.u-ghost {
  padding-inline: 14px;
}
.u-danger {
  background: var(--u-danger);
  color: var(--u-bg);
}
.u-icon {
  width: var(--u-tap);
  height: var(--u-tap);
  padding: 0;
  border-radius: 50%;
  flex: none;
}
.u-btn svg {
  flex: none;
}
@media (hover: hover) {
  .u-btn:hover:not(:disabled, [aria-disabled='true']) {
    background: var(--u-hover);
  }
  .u-primary:hover:not(:disabled, [aria-disabled='true']) {
    background: color-mix(in srgb, var(--u-primary) 84%, var(--u-bg));
  }
  .u-danger:hover:not(:disabled, [aria-disabled='true']) {
    background: color-mix(in srgb, var(--u-danger) 86%, var(--u-bg));
  }
}
.u-btn:active:not(:disabled, [aria-disabled='true']) {
  background: var(--u-press);
  transform: scale(0.96);
}
.u-primary:active:not(:disabled, [aria-disabled='true']) {
  background: color-mix(in srgb, var(--u-primary) 72%, var(--u-bg));
}
.u-danger:active:not(:disabled, [aria-disabled='true']) {
  background: color-mix(in srgb, var(--u-danger) 72%, var(--u-bg));
}
.u-btn:disabled,
.u-btn[aria-disabled='true'],
.u-switch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.u-input,
.u-select {
  width: 100%;
  min-height: var(--u-tap);
  padding: 10px 16px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-pill);
  background: var(--u-bg);
  color: var(--u-ink);
  font: var(--u-body)/1.4 var(--u-font);
  transition:
    border-color var(--u-duration) ease,
    box-shadow var(--u-duration) ease;
}
textarea.u-input {
  border-radius: var(--u-radius-inner);
}
.u-input::placeholder {
  color: var(--u-muted);
  font-size: var(--u-body);
  opacity: 1;
}
.u-input:hover,
.u-select:hover {
  border-color: var(--u-muted);
}
.u-input:focus-visible,
.u-select:focus-visible {
  border-color: var(--u-ink);
}
.u-input[aria-invalid='true'],
.u-select[aria-invalid='true'] {
  border-color: var(--u-danger);
}
.u-search {
  position: relative;
}
.u-search > .u-input {
  padding-inline: 44px 52px;
  background: var(--u-surface);
}
.u-search > svg {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.u-search > .u-icon {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
.u-chip,
.u-percent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--u-radius-pill);
  background: var(--u-surface-2);
  color: var(--u-ink);
  font: 500 var(--u-text-sm)/1 var(--u-font);
  white-space: nowrap;
}
.u-chip[data-tone='success'],
.u-percent[data-tone='up'] {
  color: var(--u-up);
  background: var(--u-up-soft);
}
.u-chip[data-tone='warning'] {
  color: var(--u-warning);
  background: var(--u-warning-soft);
}
.u-chip[data-tone='danger'],
.u-percent[data-tone='down'] {
  color: var(--u-danger);
  background: var(--u-danger-soft);
}
.u-percent {
  font-family: var(--u-mono);
  font-variant-numeric: tabular-nums;
}
.u-badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--u-radius-pill);
  background: var(--u-danger);
  color: var(--u-bg);
  font: 600 var(--u-text-xs)/20px var(--u-mono);
  text-align: center;
}
.u-toast-stack {
  position: fixed;
  inset: var(--u-toast-top) 0 auto;
  z-index: 1000;
  width: min(480px, calc(100% - 32px));
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  display: grid;
  gap: var(--u-space-2);
  pointer-events: none;
}
.u-toast-stack:empty {
  display: none;
}
.u-toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: var(--u-space-3) var(--u-space-4);
  border-radius: var(--u-radius-inner);
  background: var(--u-pop);
  color: var(--u-ink);
  box-shadow: var(--u-shadow);
  font: var(--u-text-sm)/1.5 var(--u-font);
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: u-toast-in 200ms var(--u-ease);
}
.u-toast-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--u-up);
  flex: none;
}
.u-toast[data-tone='danger'] .u-toast-dot {
  background: var(--u-danger);
}
.u-toast[data-tone='warning'] .u-toast-dot {
  background: var(--u-warning);
}
.u-toast[data-tone='info'] .u-toast-dot {
  background: var(--u-ink);
}
.u-toast-text {
  min-width: 0;
}
.u-toast-title {
  display: block;
  font-weight: 500;
}
.u-toast-body {
  display: block;
  margin: 2px 0 0;
}
@keyframes u-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
dialog.u-dialog {
  width: var(--u-dialog-width, min(440px, calc(100vw - 32px)));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  border: 0;
  border-radius: var(--u-radius-dialog);
  padding: var(--u-space-5);
  background: var(--u-pop);
  color: var(--u-ink);
  box-shadow: var(--u-shadow);
  font-family: var(--u-font);
}
dialog.u-dialog::backdrop {
  background: var(--u-scrim);
}
.u-menu,
.u-popover {
  --u-menu-pad: 8px;
  padding: var(--u-menu-pad);
  border: 0;
  border-radius: var(--u-radius-card);
  background: var(--u-pop);
  color: var(--u-ink);
  box-shadow: var(--u-shadow);
  font-family: var(--u-font);
}
.u-mi {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--u-tap);
  padding: 0 12px;
  border: 0;
  border-radius: calc(var(--u-radius-card) - var(--u-menu-pad, 8px));
  background: transparent;
  color: var(--u-ink);
  text-align: start;
  font: 500 var(--u-body)/1.4 var(--u-font);
  cursor: pointer;
}
.u-mi:hover:not(:disabled),
.u-mi:focus-visible {
  background: var(--u-hover);
}
.u-mi:active:not(:disabled) {
  background: var(--u-press);
}
.u-mi[aria-checked='true'],
.u-mi[aria-selected='true'] {
  font-weight: 600;
}
.u-tip {
  padding: 6px 10px;
  border: 0;
  border-radius: var(--u-radius-inner);
  background: var(--u-ink);
  color: var(--u-bg);
  font: var(--u-text-xs)/1.5 var(--u-font);
  pointer-events: none;
}
.u-seg {
  display: inline-flex;
  gap: var(--u-space-1);
  padding: var(--u-space-1);
  border-radius: var(--u-radius-pill);
  background: var(--u-surface-2);
  max-width: 100%;
}
/* Wrapping group of toggle chips (filters): plain rows, no pill behind them, chips never touch.
   Use .u-seg only for a single-row segmented control. */
.u-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u-space-2);
  max-width: 100%;
}
.u-chips > button:is([aria-pressed='true'], [aria-checked='true'], .is-active, .is-on) {
  background: var(--u-ink);
  color: var(--u-bg);
}
.u-seg > button {
  transition:
    background-color var(--u-duration) ease,
    color var(--u-duration) ease;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--u-muted);
  font: 500 var(--u-text-sm)/1.3 var(--u-font);
  cursor: pointer;
}
.u-seg > button:hover:not(:disabled) {
  background: var(--u-hover);
  color: var(--u-ink);
}
.u-seg
  > button:is(
    [aria-pressed='true'],
    [aria-selected='true'],
    [aria-checked='true'],
    .is-active,
    .is-on,
    .active
  ) {
  background: var(--u-pop);
  color: var(--u-ink);
  box-shadow: var(--u-shadow-lift);
}
.u-seg > button:active:not(:disabled) {
  background: var(--u-press);
  transform: scale(0.97);
}
input.u-switch {
  appearance: none;
  margin: 0;
}
.u-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  min-width: 52px;
  height: var(--u-tap);
  min-height: var(--u-tap);
  padding: 0;
  border: 0;
  border-radius: var(--u-radius-pill);
  background: transparent;
  cursor: pointer;
  flex: none;
  vertical-align: middle;
}
.u-switch::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 44px;
  height: 26px;
  border-radius: var(--u-radius-pill);
  background: var(--u-line-strong);
  transition: background-color 200ms var(--u-ease);
}
.u-switch::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform 200ms var(--u-ease);
}
.u-switch:hover:not(:disabled)::before {
  background: var(--u-muted);
}
.u-switch:is([aria-checked='true'], [aria-pressed='true'], :checked)::before,
:is([role='menuitemcheckbox'], [role='switch'])[aria-checked='true'] .u-switch::before {
  background: var(--u-primary);
}
.u-switch:is([aria-checked='true'], [aria-pressed='true'], :checked)::after,
:is([role='menuitemcheckbox'], [role='switch'])[aria-checked='true'] .u-switch::after {
  transform: translateX(18px);
  background: var(--u-on-primary);
}
.u-btn[hidden],
.u-switch[hidden],
.u-menu[hidden],
.u-popover[hidden],
.u-badge[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .u-btn,
  .u-seg > button,
  .u-input,
  .u-select,
  .u-toast,
  .u-switch::before,
  .u-switch::after {
    animation: none;
    transition: none;
  }
}
/* Explicit adoption gives the kit ownership of control geometry. */
html:root .u-btn:not(.u-icon, .u-mi) {
  border-radius: var(--u-radius-pill);
}
html:root .u-btn.u-icon {
  width: var(--u-tap);
  height: var(--u-tap);
  padding: 0;
  border-radius: 50%;
}
html:root .u-mi {
  border-radius: calc(var(--u-radius-card) - var(--u-menu-pad, 8px));
}
/* Focus is a kit invariant, including legacy controls styled after this sheet.
   Paint inside the rounded border: dialogs, sheets, disclosures, scroll rows and
   hidden-overflow cards need no per-container clearance. The backing separates
   the blue ring from both light and dark control fills. Important declarations
   intentionally override app-specific focus outlines/shadows, not surface styles. */
html:root:not([data-u-focus-input='pointer']) :focus-visible,
html:root:not([data-u-focus-input='pointer'])
  :is(.model-option, .guide-feature-item, .pp-pos):has(:focus-visible),
html:root:not([data-u-focus-input='pointer']) .photo-pick:has(:focus-visible) .file-button,
html:root:not([data-u-focus-input='pointer'])
  :is(.file-input, .file-pick-input, .ui-check-input):focus-visible
  + :is(.file-pick, .file-pick-button, .ui-check-box) {
  outline: var(--u-focus-width, 2px) solid var(--u-focus, #1f6bff) !important;
  outline-offset: var(--u-focus-offset, -2px) !important;
  box-shadow: inset 0 0 0 calc(var(--u-focus-width, 2px) * 2) var(--u-focus-backing, #fff) !important;
}
html:root :focus:not(:focus-visible),
html:root[data-u-focus-input='pointer'] :focus,
html:root[data-u-focus-input='pointer'] :is(.model-option, .guide-feature-item, .pp-pos):focus-within,
html:root[data-u-focus-input='pointer'] .photo-pick:focus-within .file-button,
html:root[data-u-focus-input='pointer']
  :is(.file-input, .file-pick-input, .ui-check-input):focus
  + :is(.file-pick, .file-pick-button, .ui-check-box),
html:root :is(.composer-shell, .search-box, .f3-header-search, .input-affix):focus-within,
html:root
  :is(.composer-shell, .search-box, .f3-header-search, .input-affix)
  :is(input, textarea):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
html:root :focus::before,
html:root :focus::after {
  outline: none !important;
}
html:root input:focus::-webkit-slider-thumb {
  outline: none !important;
  box-shadow: none !important;
}
html:root input:focus::-moz-range-thumb {
  outline: none !important;
  box-shadow: none !important;
}
/* #endregion */

/* #region zone:shared.ui.mobile-forms — ฟอร์มมือถือและการยืนยันตัวตน */
html:root label.u-remember {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
html:root .u-remember input[type='checkbox'] {
  appearance: auto;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  flex: none;
}
html:root .u-remember[hidden] {
  display: none;
}
html:root .u-otp-root {
  display: block;
}
html:root .u-otp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-gap, 8px);
  margin-block: 8px;
}
html:root .u-otp-tools[hidden] {
  display: none;
}
html:root .u-otp-paste {
  min-height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  white-space: nowrap;
}
html:root .u-otp-paste svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html:root .u-otp-hint {
  font: 400 14px/1.5 var(--u-font, sans-serif);
  color: var(--u-muted);
  overflow-wrap: anywhere;
}
html:root input.u-otp,
html:root .login-shell input.u-otp,
html:root .auth-step input.u-otp,
html:root input.u-otp-recovery,
html:root .login-shell input.u-otp-recovery,
html:root .auth-step input.u-otp-recovery {
  width: min(100%, 19rem);
  min-width: 0;
  min-height: 56px;
  font: 500 28px/1.4 var(--u-mono, monospace);
  letter-spacing: 0.32em;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-inner, 12px);
  color: var(--u-ink);
  background: var(--u-pop);
}
html:root input.u-otp-recovery,
html:root .login-shell input.u-otp-recovery,
html:root .auth-step input.u-otp-recovery {
  font-size: 20px;
  letter-spacing: 0.08em;
}
@media (max-width: 767px) {
  html:root :is(.u-input, .u-select, input, textarea, select):not([type='checkbox'], [type='radio']) {
    font-size: max(16px, 1rem);
    scroll-margin-block: 16px;
  }
  html:root .u-viewport-dialog {
    position: fixed;
    inset: calc(var(--u-viewport-top, 0px) + env(safe-area-inset-top, 0px) + 8px) 0 auto;
    margin: 0 auto;
    transform: none;
    width: min(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), 640px);
    max-height: calc(
      var(--u-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) -
        16px
    );
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block: 16px 76px;
  }
  html:root .u-keyboard-form {
    z-index: 100;
    max-width: 420px;
    padding: 16px;
    background: var(--u-pop, #fff);
    border-radius: var(--u-radius-card, 24px);
    box-shadow: var(--u-shadow);
  }
  html:root form.u-keyboard-form:has(#chat-input) {
    inset: auto 0 calc(var(--u-keyboard-inset, 0px) + 8px);
    max-width: 640px;
  }
  html:root .u-viewport-dialog .u-keyboard-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html:root .u-viewport-dialog .u-keyboard-actions:not(button) {
    background-color: var(--u-pop, #fff);
  }
  html:root .u-viewport-dialog :is(.modal-body, .ui-dialog-body) {
    min-height: 0;
    overscroll-behavior: contain;
  }
}
/* #endregion */