/*
 * MOVA mobile foundation
 * Loaded after the existing stylesheets. This layer only changes presentation;
 * financial calculations, data attributes and route semantics remain untouched.
 */

:root {
  --mova-safe-top: env(safe-area-inset-top, 0px);
  --mova-safe-right: env(safe-area-inset-right, 0px);
  --mova-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mova-safe-left: env(safe-area-inset-left, 0px);
  --mova-mobile-header: 58px;
  --mova-mobile-nav: 70px;
  --mova-vvh: 100dvh;
  --mova-vvtop: 0px;
  --mova-keyboard-offset: 0px;
  --mova-touch-target: 44px;
}

html {
  min-width: 0;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* A mobile chat is a separate viewport; its keyboard must not move the page. */
body.mova-chat-page-locked {
  position: fixed;
  top: var(--mova-chat-page-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

.page :is(.grid, .page-head, .head-actions, .card, .list-row, .chart-head, .section-title-row) > *,
.modal > *,
.mova-ai-chat-panel > * {
  min-width: 0;
}

:is(button, [role="button"], a, input, select, textarea) {
  touch-action: manipulation;
}

.mova-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mobile-drawer-backdrop,
.mova-mobile-bottom-nav,
.mova-mobile-register-sheet,
.mova-mobile-drawer-close {
  display: none;
}

.mova-local-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.mova-local-scroll:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--purple, #a87cf5) 75%, white);
  outline-offset: 3px;
}

@media (hover: none) and (pointer: coarse) {
  :is(.icon-button, .nav-item, .nav-subitem, .secondary, .action-btn, .subtle-button,
      .filter, .segmented button, .dashboard-mode button, .business-context-switcher button,
      .history-filter button, .registry-visual-tabs button, .modal-close, .history-range-close,
      .range-calendar-nav button, .registry-visual-actions button, .registry-ledger-actions button) {
    min-height: var(--mova-touch-target);
  }

  :is(input, select, textarea) {
    font-size: 16px !important;
  }
}

/* Tablet, touch laptop and phone landscape: use the application drawer. */
@media (max-width: 1024px) {
  body.mova-mobile-drawer-open,
  body.mova-modal-open {
    overflow: hidden;
  }

  .app-shell,
  .login-view {
    min-height: var(--mova-vvh, 100dvh);
  }

  #sidebar.sidebar,
  #sidebar.sidebar.collapsed {
    position: fixed;
    z-index: 160;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    height: var(--mova-vvh, 100dvh);
    padding: calc(14px + var(--mova-safe-top)) 14px calc(14px + var(--mova-safe-bottom));
    transform: translate3d(calc(-100% - 20px), 0, 0);
    box-shadow: 28px 0 80px #0000;
    visibility: hidden;
    transition: transform .24s cubic-bezier(.2, .75, .25, 1),
                box-shadow .24s ease,
                visibility 0s linear .24s;
  }

  #sidebar.sidebar.open {
    transform: translate3d(0, 0, 0);
    box-shadow: 28px 0 80px #000b;
    visibility: visible;
    transition-delay: 0s;
  }

  #sidebar.sidebar.collapsed :is(.brand-name, .nav-item > span:not(.nav-icon), .nav-label,
      .profile-copy, .logout-icon, .nav-subitems, .nav-parent > i,
      .sidebar-refresh-label, .sidebar-refresh-status, .cloud-sync-status) {
    display: revert;
  }

  #sidebar.sidebar.collapsed :is(.side-head, .nav-item, .profile, .nav-parent) {
    justify-content: initial;
  }

  #sidebar.sidebar .side-head {
    min-height: 50px;
    padding: 0 4px 14px;
    flex-direction: row;
  }

  #sidebar.sidebar nav {
    flex: 1;
    min-height: 0;
    padding: 2px 2px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar.sidebar :is(.nav-item, .nav-subitem) {
    min-height: 46px;
    height: auto;
    font-size: 14px;
  }

  #sidebar.sidebar .nav-subitem {
    padding-block: 11px;
  }

  #sidebar.sidebar .side-foot {
    flex: none;
    padding-bottom: max(2px, var(--mova-safe-bottom));
  }

  #collapseBtn {
    display: none !important;
  }

  .mova-mobile-drawer-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid #30373d;
    border-radius: 13px;
    background: #151a1e;
    color: #d8dee1;
    font-size: 23px;
    cursor: pointer;
  }

  .mobile-drawer-backdrop {
    display: block;
    position: fixed;
    z-index: 150;
    inset: 0;
    border: 0;
    padding: 0;
    background: #020406b8;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }

  body.mova-mobile-drawer-open .mobile-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .main,
  .sidebar.collapsed ~ .main {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .topbar,
  .topbar.context-topbar-hidden,
  .topbar.registry-topbar-hidden {
    display: flex !important;
    position: sticky;
    z-index: 90;
    top: 0;
    height: calc(var(--mova-mobile-header) + var(--mova-safe-top));
    min-height: calc(var(--mova-mobile-header) + var(--mova-safe-top));
    padding: var(--mova-safe-top) max(18px, var(--mova-safe-right)) 0 max(18px, var(--mova-safe-left));
    justify-content: flex-start;
    background: color-mix(in srgb, #090b0d 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
  }

  .topbar .mobile-title {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
  }

  #menuBtn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-size: 0;
  }

  .page {
    width: 100%;
    max-width: none;
    padding: 24px max(20px, var(--mova-safe-right)) calc(56px + var(--mova-safe-bottom)) max(20px, var(--mova-safe-left));
  }

  .page-head,
  .dashboard-top .page-head,
  .registry-page-head,
  .accounts-live-view .page-head {
    gap: 16px;
    margin-bottom: 22px;
  }

  .page-head h1,
  .registry-page-head h1 {
    font-size: clamp(29px, 5.5vw, 38px);
    line-height: 1.05;
  }

  .page-head p,
  .registry-page-head p {
    max-width: 64ch;
    font-size: 14px;
    line-height: 1.5;
  }

  .head-actions,
  .dashboard-switcher,
  .business-context-switcher,
  .history-filter,
  .registry-visual-tabs,
  .debt-filter-bar,
  .analysis-tabs,
  .config-tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  :is(.head-actions, .dashboard-switcher, .business-context-switcher, .history-filter,
      .registry-visual-tabs, .debt-filter-bar, .analysis-tabs, .config-tabs)::-webkit-scrollbar {
    display: none;
  }

  :is(.head-actions, .dashboard-switcher, .business-context-switcher, .history-filter,
      .registry-visual-tabs, .debt-filter-bar, .analysis-tabs, .config-tabs) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .grid,
  .dashboard-main-grid,
  .spending-grid,
  .helion-overview,
  .admin-body,
  .history-detail-overview,
  .history-ledger-grid,
  .history-obligations-grid,
  .analysis-layout,
  .config-grid {
    min-width: 0;
  }

  .model-grid,
  .account-grid,
  .debt-grid,
  .receivable-grid,
  .report-grid,
  .fv-helion-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-backdrop {
    z-index: 300;
    align-items: center;
    min-height: var(--mova-vvh, 100dvh);
    padding: calc(14px + var(--mova-safe-top)) calc(14px + var(--mova-safe-right)) calc(14px + var(--mova-safe-bottom)) calc(14px + var(--mova-safe-left));
    overflow: hidden;
  }

  #modalContent.modal,
  #modalContent:has(.revolving-card-detail),
  #modalContent:has(.grouped-loan-detail),
  #modalContent:has(.credit-use-planner) {
    width: min(720px, 100%);
    max-width: 100%;
    max-height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top) - var(--mova-safe-bottom) - 28px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(.revolving-card-detail, .grouped-loan-detail, .credit-use-planner) {
    width: 100% !important;
    max-width: 100%;
  }

  .toast {
    z-index: 420;
    right: max(16px, var(--mova-safe-right));
    bottom: calc(16px + var(--mova-safe-bottom));
    max-width: min(420px, calc(100vw - 32px - var(--mova-safe-left) - var(--mova-safe-right)));
    font-size: 13px;
  }

  .login-panel {
    min-height: var(--mova-vvh, 100dvh);
    padding: calc(24px + var(--mova-safe-top)) max(24px, var(--mova-safe-right)) calc(24px + var(--mova-safe-bottom)) max(24px, var(--mova-safe-left));
  }

  .login-card :is(input, button) {
    min-height: 48px;
  }
}

/* Phone portrait and compact split-screen. */
@media (max-width: 760px) {
  :root {
    --mova-mobile-nav: 72px;
  }

  body .page {
    padding-bottom: calc(var(--mova-mobile-nav) + 30px + var(--mova-safe-bottom));
  }

  .page {
    padding-top: 18px;
    padding-inline: max(14px, var(--mova-safe-left)) max(14px, var(--mova-safe-right));
  }

  .page-head,
  .dashboard-top .page-head,
  .registry-page-head,
  .accounts-live-view .page-head,
  .section-title-row,
  .chart-head {
    align-items: stretch;
    flex-direction: column;
  }

  .head-actions {
    width: 100%;
  }

  .head-actions > :is(button, .segmented, .dashboard-mode) {
    min-height: 44px;
  }

  .card {
    border-radius: 18px;
    padding: 16px;
  }

  .dashboard-kpis,
  .money-overview-kpis,
  .registry-summary,
  .unified-summary,
  .history-kpis,
  .debt-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  :is(.dashboard-kpis, .money-overview-kpis, .registry-summary, .unified-summary,
      .history-kpis, .debt-summary-grid) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  :is(.dashboard-kpis, .money-overview-kpis, .registry-summary, .unified-summary,
      .history-kpis, .debt-summary-grid) > .card {
    min-height: 132px;
    padding: 15px;
  }

  :is(.simple-kpi, .registry-kpi, .history-kpi) :is(small, .simple-label, .kpi-label) {
    font-size: 10.5px !important;
    line-height: 1.35;
    letter-spacing: .08em;
  }

  :is(.simple-kpi, .registry-kpi, .history-kpi) :is(.simple-value, strong) {
    font-size: clamp(23px, 7vw, 30px);
    line-height: 1.05;
  }

  :is(.simple-kpi, .registry-kpi, .history-kpi) p,
  .card :is(.muted, small) {
    font-size: 12px;
    line-height: 1.45;
  }

  .kpi-grid,
  .income-grid,
  .model-grid,
  .account-grid,
  .debt-grid,
  .receivable-grid,
  .report-grid,
  .dashboard-main-grid,
  .spending-grid,
  .charts-grid,
  .detail-grid,
  .helion-overview,
  .admin-body,
  .fv-helion-model-grid,
  .history-detail-overview,
  .history-ledger-grid,
  .history-obligations-grid,
  .analysis-layout,
  .config-grid {
    grid-template-columns: 1fr !important;
  }

  .quick-register-form,
  .finance-register-grid,
  .registry-ai-capture,
  .config-form-grid,
  .account-form-grid,
  .debt-form-grid,
  .subscription-form-grid,
  .modal-form,
  .modal-grid {
    grid-template-columns: 1fr !important;
  }

  :is(.quick-register-form, .finance-register-grid, .registry-ai-capture, .config-form-grid,
      .account-form-grid, .debt-form-grid, .subscription-form-grid, .modal-form, .modal-grid) > * {
    grid-column: auto !important;
    min-width: 0;
  }

  .page :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  .modal :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  .mova-ai-chat-panel :is(input, select, textarea) {
    width: 100%;
    min-height: 48px;
    font-size: 16px !important;
    line-height: 1.35;
  }

  .page textarea,
  .modal textarea {
    min-height: 104px;
  }

  .mova-ai-chat-panel textarea {
    min-height: 48px;
    max-height: 104px;
  }

  .page :is(label > span, .field-label),
  .modal :is(label > span, .field-label) {
    font-size: 11px !important;
    line-height: 1.35;
  }

  .page :is(.secondary, .action-btn, .primary-action, .full-button),
  .modal :is(.secondary, .action-btn, .primary, .full-button) {
    min-height: 46px;
    font-size: 14px;
  }

  .modal-actions,
  .withdrawal-stage-actions,
  .registry-row-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .modal-actions > *,
  .withdrawal-stage-actions > *,
  .registry-row-actions > * {
    width: 100%;
  }

  .unified-list-head {
    gap: 10px;
  }

  .unified-register-rows,
  .registry-ledger,
  .history-ledger,
  .debt-payment-history {
    max-height: min(54dvh, 520px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .unified-register-row,
  .registry-ledger-row,
  .registry-type-ledger-row,
  .movement-ledger-row {
    min-width: 0;
    min-height: 82px;
    padding-block: 12px;
  }

  .unified-register-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .unified-register-row :is(.entry-account, .entry-impact, .entry-date, .entry-proof) {
    display: block !important;
    grid-column: 2 / -1;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
  }

  .registry-type-ledger-row {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
  }

  .registry-type-ledger-row > span:nth-child(3),
  .registry-type-ledger-row > span:nth-child(4) {
    display: block !important;
    grid-column: 2;
    font-size: 11px;
  }

  .registry-type-ledger-row > strong {
    grid-column: 3;
    grid-row: 1;
  }

  .registry-ledger-actions,
  .registry-visual-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .registry-ledger-actions button,
  .registry-visual-actions button {
    min-width: 44px;
    min-height: 44px;
  }

  .history-ledger-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .history-ledger-row > div :is(b, small),
  .movement-ledger-row > span :is(b, small) {
    font-size: 12px;
    line-height: 1.4;
  }

  .movement-ledger {
    overflow-x: visible;
  }

  .movement-ledger-head {
    display: none;
  }

  .movement-ledger-row {
    display: grid;
    grid-template-columns: minmax(66px, auto) minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: start;
  }

  .movement-ledger-row > span:nth-child(3),
  .movement-ledger-row > span:nth-child(4) {
    display: block !important;
    grid-column: 2 / -1;
    font-size: 11px;
    line-height: 1.35;
  }

  .movement-ledger-row > strong {
    grid-column: 3;
    grid-row: 1;
  }

  .calendar,
  .smart-calendar .calendar {
    max-width: 100%;
    padding: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .calendar-head,
  .calendar-grid,
  .smart-calendar .calendar-grid {
    min-width: 620px !important;
  }

  .smart-calendar .calendar-grid {
    grid-auto-rows: 126px;
  }

  .day,
  .calendar-day {
    min-height: 112px;
    scroll-snap-align: start;
  }

  .event,
  .calendar-event {
    font-size: 10px !important;
    line-height: 1.3;
  }

  .forecast-table-wrap,
  .annual-table-wrap,
  .annual-chart-wrap,
  .control-sheet-table,
  .expense-table-wrap,
  .credit-statement-calendar,
  .grouped-loan-calendar,
  .calendar-day-detail,
  .bar-chart,
  .area-chart,
  .donut-wrap,
  .analysis-bars {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .page table {
    max-width: none;
  }

  .forecast-table,
  .annual-table-scroll,
  .annual-chart,
  .annual-chart-key {
    min-width: 680px !important;
  }

  .history-picker-panel {
    position: fixed !important;
    z-index: 330;
    inset: auto max(10px, var(--mova-safe-right)) max(10px, var(--mova-safe-bottom)) max(10px, var(--mova-safe-left)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top) - var(--mova-safe-bottom) - 20px) !important;
    padding: 16px !important;
    border-radius: 22px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .advanced-picker-layout,
  .dual-calendars {
    grid-template-columns: 1fr !important;
  }

  .dual-calendars > [data-history-calendar]:nth-child(2) {
    display: none;
  }

  .range-days button,
  .calendar-blank {
    min-height: 42px;
    font-size: 13px;
  }

  .history-range-presets > button,
  .quick-months .history-period-option {
    min-height: 44px;
    font-size: 13px;
  }

  #modal.modal-backdrop {
    align-items: end;
    padding: var(--mova-safe-top) 0 0;
  }

  #modalContent.modal,
  #modalContent:has(.revolving-card-detail),
  #modalContent:has(.grouped-loan-detail),
  #modalContent:has(.credit-use-planner) {
    width: 100% !important;
    max-height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top));
    padding: 20px max(16px, var(--mova-safe-right)) calc(20px + var(--mova-safe-bottom)) max(16px, var(--mova-safe-left));
    border-radius: 24px 24px 0 0 !important;
    border-inline: 0;
    border-bottom: 0;
  }

  .modal-head {
    position: sticky;
    z-index: 3;
    top: -20px;
    margin: -20px -16px 14px;
    padding: 18px 16px 12px;
    background: color-mix(in srgb, #14191d 94%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .modal-close,
  .history-range-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .toast {
    right: max(12px, var(--mova-safe-right));
    bottom: calc(var(--mova-mobile-nav) + 12px + var(--mova-safe-bottom));
    width: calc(100% - 24px - var(--mova-safe-left) - var(--mova-safe-right));
    max-width: none;
  }

  .mova-mobile-bottom-nav {
    display: grid;
    position: fixed;
    z-index: 140;
    left: max(10px, var(--mova-safe-left));
    right: max(10px, var(--mova-safe-right));
    bottom: max(8px, var(--mova-safe-bottom));
    height: var(--mova-mobile-nav);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 7px;
    border: 1px solid #30363d;
    border-radius: 22px;
    background: #111519f2;
    background: color-mix(in srgb, #111519 93%, transparent);
    box-shadow: 0 18px 60px #000c, inset 0 1px #ffffff0a;
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    transition: transform .2s ease, opacity .2s ease;
  }

  .mova-mobile-bottom-nav button {
    position: relative;
    min-width: 0;
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #89939a;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 3px;
    font: 600 10px/1.1 "DM Sans", sans-serif;
    cursor: pointer;
  }

  .mova-mobile-bottom-nav button > span:first-child {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    font-size: 18px;
  }

  .mova-mobile-bottom-nav button.active {
    background: #f0edf2;
    color: #111418;
  }

  .mova-mobile-bottom-nav button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
  }

  .mova-mobile-register-sheet {
    display: grid;
    position: fixed;
    z-index: 145;
    left: max(16px, var(--mova-safe-left));
    right: max(16px, var(--mova-safe-right));
    bottom: calc(var(--mova-mobile-nav) + 18px + var(--mova-safe-bottom));
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 13px;
    border: 1px solid #343b42;
    border-radius: 20px;
    background: #11161aee;
    box-shadow: 0 24px 70px #000d;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.98);
    transform-origin: bottom center;
    pointer-events: none;
    transition: .18s ease;
  }

  .mova-mobile-register-sheet.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .mova-mobile-register-sheet > span {
    grid-column: 1 / -1;
    padding: 3px 4px 0;
    color: #8e979e;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mova-mobile-register-sheet button {
    min-height: 54px;
    border: 1px solid #333b42;
    border-radius: 15px;
    background: #191f24;
    color: #e4e8ea;
    font-size: 13px;
    font-weight: 700;
  }

  body.mova-keyboard-open .mova-mobile-bottom-nav,
  body.mova-keyboard-open .mova-mobile-register-sheet {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(120%);
  }

  body.mova-keyboard-open .toast {
    bottom: 12px;
  }

  #movaAiChatRoot {
    z-index: 141;
  }

  .mova-ai-chat,
  .mova-ai-chat-shell {
    right: max(12px, var(--mova-safe-right)) !important;
    bottom: calc(var(--mova-mobile-nav) + 18px + var(--mova-safe-bottom)) !important;
  }

  .mova-ai-chat-panel {
    position: fixed !important;
    z-index: 410;
    inset: calc(var(--mova-vvtop, 0px) + var(--mova-safe-top) + 8px) max(8px, var(--mova-safe-right)) auto max(8px, var(--mova-safe-left)) !important;
    width: auto !important;
    height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top) - var(--mova-safe-bottom) - 16px) !important;
    max-height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top) - var(--mova-safe-bottom) - 16px);
    border-radius: 22px;
  }

  .mova-ai-chat-panel :is(p, li, .mova-ai-message) {
    font-size: 14px;
    line-height: 1.5;
  }

  body.mova-keyboard-open .mova-ai-chat-panel {
    bottom: auto !important;
  }
}

@media (max-width: 420px) {
  .dashboard-kpis,
  .money-overview-kpis,
  .registry-summary,
  .unified-summary,
  .history-kpis,
  .debt-summary-grid {
    grid-template-columns: 1fr !important;
  }

  :is(.dashboard-kpis, .money-overview-kpis, .registry-summary, .unified-summary,
      .history-kpis, .debt-summary-grid) > * {
    grid-column: auto !important;
  }

  .mova-mobile-bottom-nav {
    left: max(6px, var(--mova-safe-left));
    right: max(6px, var(--mova-safe-right));
  }

  .mova-mobile-bottom-nav button {
    font-size: 9px;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  body.mova-landscape {
    --mova-mobile-header: 52px;
  }

  body.mova-landscape #sidebar.sidebar,
  body.mova-landscape #sidebar.sidebar.collapsed {
    width: min(44vw, 340px);
  }

  body.mova-landscape .page {
    padding-top: 16px;
  }

  body.mova-landscape .dashboard-kpis,
  body.mova-landscape .money-overview-kpis,
  body.mova-landscape .registry-summary,
  body.mova-landscape .unified-summary,
  body.mova-landscape .debt-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.mova-landscape #modalContent.modal {
    max-height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top) - var(--mova-safe-bottom) - 12px);
  }

  body.mova-landscape .mova-ai-chat-panel {
    position: fixed !important;
    z-index: 410;
    inset: calc(var(--mova-vvtop, 0px) + var(--mova-safe-top) + 5px) max(8px, var(--mova-safe-right)) auto max(8px, var(--mova-safe-left)) !important;
    width: auto !important;
    height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top) - var(--mova-safe-bottom) - 10px) !important;
    max-height: calc(var(--mova-vvh, 100dvh) - var(--mova-safe-top) - var(--mova-safe-bottom) - 10px);
  }
}

@media (display-mode: standalone) {
  body {
    min-height: 100dvh;
  }

  .topbar {
    padding-top: var(--mova-safe-top);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #sidebar.sidebar,
  .mobile-drawer-backdrop,
  .mova-mobile-bottom-nav,
  .mova-mobile-register-sheet {
    transition: none !important;
  }
}

/* Keep both the composer and some history visible above short keyboards. */
@media (max-width: 1024px) {
  body.mova-chat-compact .mova-ai-chat-head {min-height: 52px; padding-block: 7px;}
  body.mova-chat-compact .mova-ai-chat-avatar {width: 34px; height: 34px;}
  body.mova-chat-compact .mova-ai-chat-foot {display: none;}
  body.mova-chat-compact .mova-ai-chat-composer {margin-top: 6px; padding-block: 7px;}
  body.mova-chat-compact .mova-ai-chat-panel textarea {min-height: 44px; max-height: 72px;}
  body.mova-chat-tight .mova-ai-chat-head {min-height: 44px; padding-block: 5px;}
  body.mova-chat-tight .mova-ai-chat-avatar {width: 30px; height: 30px;}
  body.mova-chat-tight .mova-ai-chat-history {padding-block: 6px;}
  body.mova-chat-tight .mova-ai-chat-panel textarea {max-height: 48px;}
}

[data-cloud-status][data-cloud-conflict-review] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

[data-cloud-status][data-cloud-conflict-review]:focus-visible {
  outline: 2px solid #b78cf4;
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 760px) {
  #sidebar.sidebar,
  #sidebar.sidebar.collapsed {
    padding-bottom: calc(12px + var(--mova-safe-bottom));
  }

  #sidebar.sidebar .side-foot {
    padding-bottom: 2px;
  }

  #sidebar.sidebar .sidebar-global-refresh,
  #sidebar.sidebar .sidebar-notification-bell {
    min-height: 44px;
    height: 44px;
  }

  #sidebar.sidebar .profile-logout {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  #sidebar.sidebar .sidebar-refresh-control {
    min-height: 72px;
  }

  #sidebar.sidebar .sidebar-refresh-status:hover,
  #sidebar.sidebar .sidebar-refresh-status:focus-visible {
    top: auto;
    bottom: calc(100% - 25px);
  }
}

#modalContent.sync-conflict-modal {
  width: min(680px, calc(100vw - 24px));
}

.sync-conflict-list {
  display: grid;
  gap: 8px;
  max-height: min(320px, 40vh);
  margin: 18px 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.sync-conflict-list li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line, #28313a);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

.sync-conflict-list b {
  color: var(--text, #f4f6f8);
  font-size: 12px;
}

.sync-conflict-list span {
  color: var(--muted, #8f9ba7);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.mova-mobile-bottom-nav .mova-icon {
  width: 20px;
  height: 20px;
}