/* ==================================================================
   GEMBA × SMOOTHUI — component redesign layer
   ------------------------------------------------------------------
   Loaded after styles.css. Re-skins every component in the language
   of smoothui.dev (spring motion, pill/segment tabs with a sliding
   indicator, ring-focus inputs, press-scale buttons, glass chrome,
   animated lists, progress bars, toasts, skeletons, theme toggle)
   while keeping the original Gemba palette. Every colour comes from
   design-system/colors_and_type.css, so dark mode is token-driven.
   ================================================================== */

/* ---------------------------------------------------------------- */
/* Base                                                              */
/* ---------------------------------------------------------------- */

html { -webkit-tap-highlight-color: transparent; }
body, .app, .app-wrap {
  transition: background-color var(--gem-dur) var(--gem-ease-out), color var(--gem-dur) var(--gem-ease-out);
}
::selection { background: var(--gem-accent-soft); color: var(--gem-fg1); }

/* One focus language everywhere: SmoothUI ring-2 + offset */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gem-bg), 0 0 0 4px var(--gem-ring);
}

/* Shared press feedback (SmoothUI: active:scale-[0.97]) */
.btn, .icon-btn, .fab-add, .action-primary-btn, .back-btn, .avatar-btn,
.switcher-btn, .dash-search-btn, .send-btn, .attach-btn, .row-menu,
.doc-download, .cr-btn, .df-copy, .lr-icon-btn, .cnf-scan, .fc-remove,
.pr-edit, .pr-remove, .theme-toggle, .link-text, .category-chip, .see-more-card .circle {
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out),
    opacity var(--gem-dur-fast) var(--gem-ease-out);
  will-change: transform;
}
.btn:active:not(:disabled), .icon-btn:active, .fab-add:active, .action-primary-btn:active,
.back-btn:active, .avatar-btn:active, .switcher-btn:active, .dash-search-btn:active,
.send-btn:active, .attach-btn:active, .row-menu:active, .doc-download:active,
.cr-btn:active, .df-copy:active, .lr-icon-btn:active, .cnf-scan:active, .fc-remove:active,
.pr-edit:active, .pr-remove:active, .theme-toggle:active, .category-chip:active,
.see-more-card .circle:active {
  transform: scale(0.96);
  transition-duration: 90ms;
}

/* ---------------------------------------------------------------- */
/* Chrome — glass top bars                                           */
/* ---------------------------------------------------------------- */

.topbar, .page-topbar {
  background: var(--gem-glass);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--gem-glass-border);
}

.switcher-btn, .back-btn, .dash-search-btn {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}
.switcher-btn:hover, .back-btn:hover, .dash-search-btn:hover { border-color: var(--gem-border-strong); background: var(--gem-surface-hover); }
.switcher-btn .badge { background: var(--gem-surface-emph); }

.avatar-btn {
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  box-shadow: var(--gem-highlight), 0 0 0 2px var(--gem-surface), 0 0 0 3px var(--gem-border);
  letter-spacing: 0.02em;
}

.page-title { letter-spacing: -0.01em; }

/* Theme toggle (SmoothUI Theme Toggle — sun/moon morph) */
.theme-toggle {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.theme-toggle:hover { border-color: var(--gem-border-strong); background: var(--gem-surface-hover); }
.theme-toggle svg {
  position: absolute;
  width: 18px; height: 18px;
  transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy), opacity var(--gem-dur) var(--gem-ease-out);
}
.theme-toggle .tt-sun  { transform: rotate(0) scale(1); opacity: 1; }
.theme-toggle .tt-moon { transform: rotate(-90deg) scale(0.4); opacity: 0; }
[data-theme="dark"] .theme-toggle .tt-sun  { transform: rotate(90deg) scale(0.4); opacity: 0; }
[data-theme="dark"] .theme-toggle .tt-moon { transform: rotate(0) scale(1); opacity: 1; }
.topbar .theme-toggle { margin-left: 0; }

/* ---------------------------------------------------------------- */
/* Buttons — SmoothUI "solid / soft / outline / ghost"               */
/* ---------------------------------------------------------------- */

.btn { letter-spacing: 0.005em; position: relative; }
.btn-sm { height: 34px; }
.btn-md { height: 42px; }

.btn-primary, .fab-add, .action-primary-btn, .composer .send-btn, .see-more-card .circle {
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  box-shadow: var(--gem-highlight), var(--gem-shadow-sm);
}
.btn-primary:hover:not(:disabled), .fab-add:hover, .action-primary-btn:hover,
.composer .send-btn:hover, .see-more-card .circle:hover { background: var(--gem-btn-primary-hover); }
.fab-add { height: 46px; box-shadow: var(--gem-highlight), var(--gem-shadow-md); }
.action-primary-btn { height: 46px; }

.btn-secondary { background: var(--gem-btn-emph); color: var(--gem-fg1); box-shadow: var(--gem-card-highlight); }
.btn-secondary:hover:not(:disabled) { background: var(--gem-border-strong); }

.btn-tertiary {
  background: var(--gem-surface);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}
.btn-tertiary:hover:not(:disabled) { background: var(--gem-surface-hover); border-color: var(--gem-border-strong); }

.btn-ghost:hover:not(:disabled), .row-menu:hover, .cr-btn:hover, .df-copy:hover,
.lr-icon-btn:hover, .cnf-scan:hover, .fc-remove:hover, .pr-edit:hover, .pr-remove:hover {
  background: var(--gem-surface-hover);
  color: var(--gem-fg1);
}
.row-menu, .cr-btn, .df-copy, .lr-icon-btn, .pr-edit, .pr-remove { border-radius: var(--gem-radius-pill); }

.btn:disabled { opacity: 0.45; box-shadow: none; }

.link-text { border-radius: var(--gem-radius-xs); }
.link-text:hover { opacity: 0.8; }
.link-text:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- */
/* Tabs — SmoothUI Animated Tabs (pill + segment) w/ sliding thumb   */
/* ---------------------------------------------------------------- */

.tabs, .services-scroll {
  position: relative;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  width: 100%;
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-pill);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  overflow-x: auto;
  scroll-padding: 4px;
}
.tabs .tab, .services-scroll .service-pill {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  height: 34px;
  padding: 0 var(--gem-space-4);
  border: 0;
  border-radius: var(--gem-radius-pill);
  background: transparent;
  color: var(--gem-fg2);
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  transition: color var(--gem-dur) var(--gem-ease-out), background-color var(--gem-dur-fast) var(--gem-ease-out);
}
.tabs .tab:hover, .services-scroll .service-pill:hover { color: var(--gem-fg1); }
.tabs .tab.active, .services-scroll .service-pill.active {
  color: var(--gem-fg1);
  border: 0;
  background: var(--gem-surface);
  box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-xs);
}
/* JS-driven sliding thumb replaces the static active fill */
.sm-has-thumb .tab.active, .sm-has-thumb .service-pill.active,
.sm-has-thumb.segmented button.active { background: transparent; box-shadow: none; }

.sm-thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 0;
  z-index: 0;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface);
  box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-xs), var(--gem-card-highlight);
  pointer-events: none;
}
.sm-thumb.sm-animate {
  transition: transform var(--gem-dur-spring) var(--gem-spring), width var(--gem-dur-spring) var(--gem-spring);
}

/* Sub-tabs — segment variant with a filled (primary) thumb */
.subtabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-md);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.subtabs .tab {
  position: relative; z-index: 1;
  flex: 1 0 auto;
  height: 32px;
  padding: 0 var(--gem-space-3);
  border: 0;
  border-radius: var(--gem-radius-sm);
  background: transparent;
  color: var(--gem-fg2);
  transition: color var(--gem-dur) var(--gem-ease-out);
}
.subtabs .tab.active { background: var(--gem-btn-primary); color: var(--gem-on-primary); border: 0; }
.subtabs.sm-has-thumb .tab.active { background: transparent; }
.subtabs .sm-thumb { border-radius: var(--gem-radius-sm); background: var(--gem-btn-primary); box-shadow: var(--gem-highlight), var(--gem-shadow-xs); }

/* Segmented control — segment variant */
.segmented {
  position: relative;
  padding: 4px;
  gap: 2px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-emph);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.segmented button {
  position: relative; z-index: 1;
  height: 32px;
  border-radius: var(--gem-radius-sm);
  transition: color var(--gem-dur) var(--gem-ease-out);
}
.segmented button.active { box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-xs); }
.segmented .sm-thumb { border-radius: var(--gem-radius-sm); }

/* ---------------------------------------------------------------- */
/* Form controls — SmoothUI Animated Input                           */
/* ---------------------------------------------------------------- */

.finput, .fselect, .ftextarea, .search-field, .amount-field, .card-number-field,
.color-field, .composer .composer-input, .otp-box, .row-select, .dns-field, .file-chip {
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur) var(--gem-ease-out),
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    transform var(--gem-dur-spring) var(--gem-spring);
}
.finput, .fselect, .search-field, .amount-field, .card-number-field, .color-field { height: 44px; }
.dns-field { background: var(--gem-surface-subtle); box-shadow: none; }

.finput:hover:not(:disabled):not(:focus), .fselect:hover:not(:disabled):not(:focus),
.ftextarea:hover:not(:focus), .search-field:hover:not(:focus-within),
.amount-field:hover:not(:focus-within), .card-number-field:hover:not(:focus-within):not(.disabled),
.color-field:hover:not(:focus-within), .composer .composer-input:hover:not(:focus),
.otp-box:hover:not(:focus), .row-select:hover {
  border-color: var(--gem-border-strong);
}

/* Focus: 1px ink border + soft 4px ring. Undo the old 2px-border /
   padding-compensation hacks so nothing shifts on focus. */
.finput:focus, .fselect:focus { border: 1px solid var(--gem-ink); padding: 0 var(--gem-space-4); box-shadow: 0 0 0 4px var(--gem-ring); }
.fselect-wrap .fselect:focus { padding-right: 40px; }
.ftextarea:focus { border: 1px solid var(--gem-ink); padding: var(--gem-space-3) var(--gem-space-4); box-shadow: 0 0 0 4px var(--gem-ring); }
.search-field:focus-within { border: 1px solid var(--gem-ink); padding: 0 var(--gem-space-4); box-shadow: 0 0 0 4px var(--gem-ring); }
.amount-field:focus-within { border: 1px solid var(--gem-ink); padding: 0 var(--gem-space-4); box-shadow: 0 0 0 4px var(--gem-ring); }
.color-field:focus-within { border: 1px solid var(--gem-ink); padding: 0 var(--gem-space-4); box-shadow: 0 0 0 4px var(--gem-ring); }
.card-number-field:focus-within { border: 1px solid var(--gem-ink); padding: 0 var(--gem-space-2) 0 var(--gem-space-4); box-shadow: 0 0 0 4px var(--gem-ring); }
.composer .composer-input:focus { border: 1px solid var(--gem-ink); padding: 10px 16px; box-shadow: 0 0 0 4px var(--gem-ring); }
.otp-box:focus { border: 1px solid var(--gem-ink); box-shadow: 0 0 0 4px var(--gem-ring); transform: translateY(-1px); }
.payee-row .pr-name-input { border: 1px solid var(--gem-ink); border-radius: var(--gem-radius-sm); box-shadow: 0 0 0 3px var(--gem-ring); background: var(--gem-surface); color: var(--gem-fg1); outline: none; }

.finput:disabled, .fselect:disabled, .card-number-field.disabled { background: var(--gem-surface-subtle); box-shadow: none; }
.finput, .fselect, .ftextarea, .composer .composer-input { color: var(--gem-fg1); }
.fselect option { background: var(--gem-surface); color: var(--gem-fg1); }

/* Label reacts to its field (floating-label feel without moving it) */
.field > .flabel { transition: color var(--gem-dur-fast) var(--gem-ease-out); }
.field:focus-within > .flabel { color: var(--gem-ink-strong); }
.field > .flabel { color: var(--gem-fg1); }

.fselect-wrap .chev { transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy), color var(--gem-dur-fast); }
.fselect-wrap:focus-within .chev { transform: translateY(-50%) rotate(180deg); color: var(--gem-fg1); }

.search-field .icon { transition: color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring-bouncy); }
.search-field:focus-within .icon { color: var(--gem-fg1); transform: scale(1.08); }

.amount-field .af-ccy, .amount-field input { color: var(--gem-fg1); }

.row-select { border-radius: var(--gem-radius-md); }
.row-select:active { transform: scale(0.99); }
.row-select .rtitle { font-weight: 700; }

.otp-box { width: 46px; height: 56px; border-radius: var(--gem-radius-md); font-weight: 700; }

/* Dropzone — SmoothUI Animated File Upload */
.dropzone {
  height: 72px;
  border: 1.5px dashed var(--gem-border-strong);
  border-radius: var(--gem-radius-lg);
  background: var(--gem-surface-subtle);
  color: var(--gem-fg1);
  transition: border-color var(--gem-dur-fast), background-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring);
}
.dropzone:hover { border-color: var(--gem-ink); background: var(--gem-surface); }
.dropzone:active { transform: scale(0.99); }
.dropzone .icon { transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy); }
.dropzone:hover .icon { transform: translateY(-2px); }

.file-chip { animation: sm-pop var(--gem-dur-spring) var(--gem-spring) both; }
.add-currency-card {
  border: 1.5px dashed var(--gem-border-strong);
  transition: border-color var(--gem-dur-fast), background-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring);
}
.add-currency-card:hover { border-color: var(--gem-ink); background: var(--gem-surface); }
.add-currency-card:active { transform: scale(0.99); }

/* ---------------------------------------------------------------- */
/* Switch — SmoothUI Animated Toggle (morph)                         */
/* ---------------------------------------------------------------- */

.switch {
  width: 44px; height: 26px;
  background: var(--gem-border-strong);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
  transition: background-color var(--gem-dur) var(--gem-ease-out);
}
.switch::after {
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12);
  transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy), width var(--gem-dur) var(--gem-spring);
}
.switch.on { background: var(--gem-success); }
.switch.on::after { transform: translateX(18px); }
.switch:active::after { width: 25px; }
.switch.on:active::after { transform: translateX(13px); }

/* ---------------------------------------------------------------- */
/* Checkbox / radio — SmoothUI Checkbox & Radio Group                */
/* ---------------------------------------------------------------- */

.checkbox-row .cb-box, .radio-row .rb-circle {
  border: 1.5px solid var(--gem-border-strong);
  background: var(--gem-surface);
  color: var(--gem-on-primary);
  transition: background-color var(--gem-dur-fast), border-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring-bouncy), box-shadow var(--gem-dur);
}
.checkbox-row .cb-box { border-radius: 6px; }
.checkbox-row .cb-box .icon, .radio-row .rb-circle .icon {
  transform: scale(0);
  opacity: 0;
  transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy), opacity var(--gem-dur-fast);
}
.checkbox-row.checked .cb-box, .radio-row.checked .rb-circle {
  background: var(--gem-btn-primary);
  border-color: var(--gem-btn-primary);
  box-shadow: var(--gem-highlight);
}
.checkbox-row.checked .cb-box .icon, .radio-row.checked .rb-circle .icon { transform: scale(1); opacity: 1; }
.checkbox-row:hover .cb-box, .radio-row:hover .rb-circle { border-color: var(--gem-fg3); }
.checkbox-row.checked:hover .cb-box, .radio-row.checked:hover .rb-circle { border-color: var(--gem-btn-primary); }
.checkbox-row:active .cb-box, .radio-row:active .rb-circle { transform: scale(0.88); }

.currency-option {
  border-width: 1.5px;
  box-shadow: var(--gem-shadow-xs);
  transition: border-color var(--gem-dur-fast), background-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring);
}
.currency-option:hover { border-color: var(--gem-border-strong); }
.currency-option:active { transform: scale(0.985); }
.currency-option.checked { border-color: var(--gem-success); background: var(--gem-success-soft); }
.currency-option .co-check { transition: color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring-bouncy); }
.currency-option.checked .co-check { transform: scale(1.1); }

/* ---------------------------------------------------------------- */
/* Chips & badges — SmoothUI Badge / Notification Badge              */
/* ---------------------------------------------------------------- */

.chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); padding: 4px 9px; }
.chip-neutral { box-shadow: inset 0 0 0 1px var(--gem-border); }
.chip-success .dot, .chip-info .dot { position: relative; }
.chip-warning .dot, .chip-info .dot { animation: sm-pulse 2s var(--gem-ease-out) infinite; }

.count-chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.count-chip.zero { box-shadow: inset 0 0 0 1px var(--gem-border); }
.id-chip, .inbox-row .ir-tag, .category-chip { background: var(--gem-surface-subtle); }
.category-chip { box-shadow: var(--gem-shadow-xs); }
.unread-dot { box-shadow: 0 0 0 3px var(--gem-accent-soft); animation: sm-pulse 2.2s var(--gem-ease-out) infinite; }

/* ---------------------------------------------------------------- */
/* Cards & surfaces                                                  */
/* ---------------------------------------------------------------- */

.card-row, .entity-row, .inbox-row, .account-card, .doc-card, .wallet-card,
.accordion-step, .summary-card, .customize-row, .task-card, .doc-preview {
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    box-shadow var(--gem-dur) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    opacity var(--gem-dur) var(--gem-ease-out);
}
.task-card { background: var(--gem-surface); }

/* Interactive cards lift on hover, sink on press */
:is(.card-row, .entity-row, .inbox-row, .account-card, .doc-card, .summary-card)[data-href],
a:is(.card-row, .entity-row, .inbox-row, .account-card, .doc-card, .summary-card, .task-card),
.summary-card, .inbox-row, a.account-card,
a[style*="--gem-shadow-xs"], a[style*="border-radius:var(--gem-radius-lg)"] {
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    box-shadow var(--gem-dur) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out);
}
@media (hover: hover) {
  :is(.card-row, .entity-row, .inbox-row, .account-card, .doc-card, .summary-card)[data-href]:hover,
  a:is(.card-row, .entity-row, .inbox-row, .account-card, .doc-card, .task-card):hover,
  .summary-card:hover, .inbox-row:hover,
  a[style*="--gem-shadow-xs"]:hover {
    border-color: var(--gem-border-strong) !important;
    box-shadow: var(--gem-shadow-sm), var(--gem-card-highlight) !important;
    transform: translateY(-1px);
  }
}
:is(.card-row, .entity-row, .inbox-row, .account-card, .doc-card, .summary-card)[data-href]:active,
a:is(.card-row, .entity-row, .inbox-row, .account-card, .doc-card, .task-card):active,
.summary-card:active, .inbox-row:active, a[style*="--gem-shadow-xs"]:active {
  transform: scale(0.985);
  transition-duration: 90ms;
}

.card-chip, .design-thumb { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.18); }

/* Panels on the page canvas */
.balance-panel, .limit-panel, .promo-card, .info-card, .fee-panel {
  box-shadow: var(--gem-card-highlight);
  border: 1px solid var(--gem-border);
}
.balance-panel .balance-amount, .account-card .ac-balance { letter-spacing: -0.01em; }

.info-banner, .callout, .connect-banner { border: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.info-banner { border-color: var(--gem-border); }
.connect-banner { animation: sm-rise var(--gem-dur-spring) var(--gem-spring) both; }

.success-icon { animation: sm-pop 700ms var(--gem-spring-bouncy) both; box-shadow: 0 0 0 8px var(--gem-success-soft); }

/* Card art */
.card-visual {
  box-shadow: 0 12px 28px -8px rgba(24,29,39,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
  isolation: isolate;
}
.card-visual::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.14), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.card-visual.light { box-shadow: 0 12px 28px -12px rgba(24,29,39,0.3), inset 0 0 0 1px rgba(40,51,73,0.08); }

/* ---------------------------------------------------------------- */
/* Accordion — SmoothUI Accordion / Animated Stepper                 */
/* ---------------------------------------------------------------- */

.accordion-step.active { border-color: var(--gem-border-strong); box-shadow: var(--gem-shadow-sm), var(--gem-card-highlight); }
.step-header { transition: background-color var(--gem-dur-fast); }
.step-header .step-name { transition: color var(--gem-dur); }
.step-header .step-status { border: 1.5px solid var(--gem-border-strong); transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy); }
.accordion-step.done .step-header .step-status { animation: sm-pop 600ms var(--gem-spring-bouncy) both; }

.section-head .section-chev, .wallet-header .wh-chev, .info-card .ic-chev {
  transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy);
}
button.section-head[aria-expanded="false"] { transition: border-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring); }
button.section-head[aria-expanded="false"]:hover { border-color: var(--gem-border-strong); }
button.section-head:active { transform: scale(0.99); }

/* Reveal animation whenever a collapsible / tab panel is shown */
.step-body, .wallet-body, .section-body, .info-card .ic-content, .tab-panel:not([hidden]) {
  animation: sm-reveal var(--gem-dur-spring) var(--gem-spring) both;
}

.wallet-header { transition: background-color var(--gem-dur-fast); }
.wallet-header:hover { background: var(--gem-surface-hover); }

/* ---------------------------------------------------------------- */
/* Lists & tables                                                    */
/* ---------------------------------------------------------------- */

/* Key/value tables (Transaction details, fees, bank details) */
.detail-list { font-variant-numeric: tabular-nums; }
.detail-row, .copy-row, .list-row, .payee-row, .contact-row, .message-row {
  border-top-color: var(--gem-border);
}
.detail-row .dlabel { font-size: 13px; }
.detail-row .dvalue { font-weight: 600; }

/* Tappable rows get a soft hover plate */
button.list-row, a.list-row, .contact-row, .menu-item {
  border-radius: var(--gem-radius-md);
  transition: background-color var(--gem-dur-fast) var(--gem-ease-out), transform var(--gem-dur-spring) var(--gem-spring);
}
button.list-row, a.list-row, .contact-row { margin: 0 -8px; padding-left: 8px; padding-right: 8px; width: calc(100% + 16px); }
button.list-row:hover, a.list-row:hover, .contact-row:hover, .menu-item:hover { background: var(--gem-surface-hover); }
button.list-row:active, a.list-row:active, .contact-row:active, .menu-item:active { background: var(--gem-surface-emph); transform: scale(0.99); }

.contact-row .cr-avatar {
  background: var(--gem-surface-emph);
  color: var(--gem-fg1);
  box-shadow: inset 0 0 0 1px var(--gem-border);
}

/* Fee breakdown — stat table */
.fee-panel { overflow: hidden; }
.fee-panel .fp-value { font-size: 15px; }

.payee-row .pr-status { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }

/* Customize dashboard drag list */
.customize-row.dragging { box-shadow: var(--gem-shadow-md) !important; transform: scale(1.02); border-color: var(--gem-border-strong); }

/* ---------------------------------------------------------------- */
/* Messages                                                          */
/* ---------------------------------------------------------------- */

.thread-bubble { box-shadow: var(--gem-shadow-xs); }
.thread-item.out .thread-bubble { background: var(--gem-btn-primary); color: var(--gem-on-primary); box-shadow: var(--gem-highlight), var(--gem-shadow-xs); }
.thread-item.in .thread-bubble { box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight); }
.thread-item.out .thread-bubble .link-text { color: inherit; text-decoration: underline; }

.composer {
  background: linear-gradient(to top, var(--gem-bg) 70%, transparent);
}
.composer .attach-btn { border-radius: var(--gem-radius-pill); background: var(--gem-surface); border: 1px solid var(--gem-border); box-shadow: var(--gem-shadow-xs); }
.composer .composer-input { border-radius: 22px; }

.inbox-row .ir-icon, .wallet-header .wh-avatar, .avatar-icon {
  background: var(--gem-surface-emph);
  box-shadow: inset 0 0 0 1px var(--gem-border);
}

/* ---------------------------------------------------------------- */
/* Bottom nav & FAB — floating glass dock                            */
/* ---------------------------------------------------------------- */

.fab-dock { background: linear-gradient(to top, var(--gem-bg) 55%, transparent); padding-top: var(--gem-space-3); }

.bottom-nav {
  background: var(--gem-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--gem-glass-border);
  box-shadow: var(--gem-shadow-md);
}
.nav-item { transition: color var(--gem-dur-fast); }
.nav-item:hover { color: var(--gem-fg1); }
.nav-pill { transition: background-color var(--gem-dur) var(--gem-ease-out), transform var(--gem-dur-spring) var(--gem-spring); }
.nav-item:active .nav-pill { transform: scale(0.9); transition-duration: 90ms; }
.nav-item.active .nav-pill {
  background: var(--gem-surface-emph);
  box-shadow: inset 0 0 0 1px var(--gem-border);
  animation: sm-pop var(--gem-dur-spring) var(--gem-spring-bouncy);
}
.nav-item.active .nav-pill .icon { animation: sm-bump var(--gem-dur-spring) var(--gem-spring-bouncy); }

/* ---------------------------------------------------------------- */
/* Sheets — SmoothUI Drawer                                          */
/* ---------------------------------------------------------------- */

.sheet-scrim {
  background: var(--gem-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity var(--gem-dur) var(--gem-ease-out);
}
.sheet {
  border-radius: var(--gem-radius-xl) var(--gem-radius-xl) 0 0;
  border: 1px solid var(--gem-border);
  border-bottom: 0;
  background: var(--gem-surface);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.16), var(--gem-card-highlight);
  transition: transform var(--gem-dur-spring) var(--gem-spring);
}
.sheet:not(.open) {
  /* Closed sheets park just below the viewport — drop their upward shadow
     (it would bleed over whatever sheet is open) and hide them from AT. */
  box-shadow: none;
  visibility: hidden;
  transition: transform var(--gem-dur) var(--gem-ease-out), visibility 0s linear var(--gem-dur);
}
.sheet-handle { width: 40px; height: 5px; background: var(--gem-border-strong); }
.sheet.open > * { animation: sm-rise var(--gem-dur-spring) var(--gem-spring) both; }
.sheet.open > *:nth-child(2) { animation-delay: 30ms; }
.sheet.open > *:nth-child(3) { animation-delay: 60ms; }
.sheet.open > *:nth-child(4) { animation-delay: 90ms; }
.sheet.open > *:nth-child(5) { animation-delay: 120ms; }
.sheet.open > *:nth-child(n+6) { animation-delay: 150ms; }
.sheet.open > .sheet-handle { animation: none; }

.menu-item { font-weight: 700; }
.menu-grid-item {
  border-radius: var(--gem-radius-lg);
  transition: background-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring);
}
.menu-grid-item .icon {
  width: 52px; height: 52px;
  align-items: center; justify-content: center;
  border-radius: var(--gem-radius-lg);
  background: var(--gem-surface-subtle);
  box-shadow: inset 0 0 0 1px var(--gem-border);
  transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy), background-color var(--gem-dur-fast);
}
.menu-grid-item:hover .icon { background: var(--gem-surface-emph); transform: translateY(-2px); }
.menu-grid-item:active .icon { transform: scale(0.9); }

/* ---------------------------------------------------------------- */
/* Progress — SmoothUI Animated Progress Bar                         */
/* ---------------------------------------------------------------- */

.sm-progress { display: flex; flex-direction: column; gap: 6px; }
.sm-progress-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--gem-fg2); }
.sm-progress-head b { color: var(--gem-fg1); font-variant-numeric: tabular-nums; }
.sm-progress-track {
  position: relative;
  height: 8px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface);
  box-shadow: inset 0 0 0 1px var(--gem-border);
  overflow: hidden;
}
.sm-progress-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--gem-btn-primary);
  box-shadow: var(--gem-highlight);
  transition: width 900ms var(--gem-spring), background-color var(--gem-dur);
}
.sm-progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--gem-shimmer), transparent);
  transform: translateX(-100%);
  animation: sm-shimmer 2.4s ease-in-out 1s infinite;
}
.sm-progress.is-warning .sm-progress-fill { background: var(--gem-warning); }
.sm-progress.is-critical .sm-progress-fill { background: var(--gem-critical); }
.sm-progress.is-success .sm-progress-fill { background: var(--gem-success); }

/* Stepper progress (above accordion flows) */
.sm-stepper { display: flex; flex-direction: column; gap: 8px; }
.sm-stepper-meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--gem-fg2); }
.sm-stepper-meta b { color: var(--gem-fg1); }
.sm-stepper .sm-progress-track { height: 6px; background: var(--gem-surface-emph); box-shadow: none; }

/* ---------------------------------------------------------------- */
/* Skeleton — SmoothUI Skeleton (doc preview bars)                   */
/* ---------------------------------------------------------------- */

.doc-preview .dp-bar {
  position: relative; overflow: hidden;
  background: var(--gem-surface-emph);
}
.doc-preview .dp-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--gem-shimmer), transparent);
  transform: translateX(-100%);
  animation: sm-shimmer 1.8s ease-in-out infinite;
}

/* ---------------------------------------------------------------- */
/* Toast — SmoothUI Basic Toast                                      */
/* ---------------------------------------------------------------- */

.sm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  font-size: 13px; font-weight: 700;
  box-shadow: var(--gem-highlight), var(--gem-shadow-md);
  transform: translate(-50%, 24px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy), opacity var(--gem-dur) var(--gem-ease-out);
  white-space: nowrap;
}
.sm-toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.sm-toast .sm-toast-icon {
  width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gem-success); color: #FFFFFF;
}

/* ---------------------------------------------------------------- */
/* Animated list entrance — SmoothUI Animated List                   */
/* ---------------------------------------------------------------- */

.sm-enter { animation: sm-rise var(--gem-dur-spring) var(--gem-spring) both; animation-delay: calc(var(--sm-i, 0) * 40ms); }

/* ---------------------------------------------------------------- */
/* Dark-mode specific touches                                        */
/* ---------------------------------------------------------------- */

[data-theme="dark"] .app { box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-md); }
[data-theme="dark"] .card-visual.light { background: linear-gradient(145deg,#E8EAED,#C9CDD4); }
[data-theme="dark"] .design-thumb.white { border-color: transparent; }
[data-theme="dark"] .flag-dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
[data-theme="dark"] .switch:not(.on) { background: var(--gem-border-strong); }
[data-theme="dark"] .news-card .thumb { filter: brightness(0.88); }
[data-theme="dark"] .tabs, [data-theme="dark"] .services-scroll,
[data-theme="dark"] .subtabs, [data-theme="dark"] .segmented { box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
[data-theme="dark"] .sheet.open { box-shadow: 0 -12px 40px rgba(0,0,0,0.5), var(--gem-card-highlight); }
[data-theme="dark"] .sm-thumb { background: var(--gem-border-strong); box-shadow: 0 0 0 1px rgba(255,255,255,0.04), var(--gem-shadow-xs), inset 0 1px 0 rgba(255,255,255,0.06); }
[data-theme="dark"] .subtabs .sm-thumb { background: var(--gem-btn-primary); }
[data-theme="dark"] .customize-row.locked { background: var(--gem-surface-subtle); }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }

/* ---------------------------------------------------------------- */
/* Keyframes                                                          */
/* ---------------------------------------------------------------- */

@keyframes sm-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sm-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sm-pop    { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes sm-bump   { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes sm-shimmer { to { transform: translateX(100%); } }
@keyframes sm-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.unread-dot { color: var(--gem-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
}

/* Account-details header: the account card sits inside a filled panel —
   let it inherit the panel instead of showing a white strip. */
.section[style*="surface-emph"] > .account-card { background: transparent; }

/* ---------------------------------------------------------------- */
/* App shell — top bar and bottom nav always on screen               */
/* ---------------------------------------------------------------- */
/* The page itself never scrolls: .app is exactly one screen tall and
   only <main class="content"> scrolls between the bars. This keeps the
   bottom menu pinned in every host (browser, embedded preview, iframe)
   instead of relying on position:sticky against the window. */
html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }
.app-wrap { height: 100%; min-height: 0; }
.app {
  height: 100%;
  min-height: 0 !important;
  overflow: hidden;
}
.app > .topbar, .app > .page-topbar,
.app > .bottom-bar, .app > .bottom-nav { position: relative; flex-shrink: 0; z-index: 20; }
.app > .content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app > .content::-webkit-scrollbar { display: none; }
/* Children of the scroll area keep their natural height (otherwise the
   flex column squeezes scroll rows like .tabs down to their padding). */
.app > .content > * { flex-shrink: 0; }
/* Bottom nav placed directly in .app (no .bottom-bar wrapper) */
.app > .bottom-nav { margin-top: var(--gem-space-2); }
/* Message composer now sticks to the bottom of the scroll area, which
   already ends above the nav. */
.composer { bottom: 0; }