/* =====================================================
   Debt & Hustle — Shared mobile system
   Loaded after all component styles
===================================================== */


/* =====================================================
   Phones and small devices
===================================================== */

@media (max-width: 600px) {
  .container {
    padding: 12px;
  }

  .title-wrap {
    gap: 8px;
    margin: 6px 0 12px;
  }

  #app-title {
    font-size: 22px;
  }

  /* Toolbar */
  .toolbar {
    padding: 10px;
    gap: 8px;
  }

  .toolbar .actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Buttons */
  .btn {
    padding: 10px 12px;
    min-height: 36px;
    width: 100%;
  }

  #refresh-btn,
  #feedback-btn {
    width: auto;
  }

  #install-btn {
    width: 100%;
  }

  /* Cards and lists */
  .card {
    margin: 8px 0;
    padding: 12px;
  }

  .list .list-item {
    padding: 10px 8px;
  }

  /* Themes grid */
  .themes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 12px;
  }

  #debts-modal .modal-content,
  #income-modal .modal-content,
  #expenses-modal .modal-content,
  #hustles-modal .modal-content,
  #goals-modal .modal-content {
    width: calc(100% - 16px);
    max-width: 100%;
  }
}


/* =====================================================
   Smaller phones
===================================================== */

@media (max-width: 480px) {
  #app-title {
    font-size: 20px;
  }

  .title-wrap.shrink {
    transform: translateY(-3px) scale(.985);
  }

  .toolbar .actions {
    gap: 6px;
  }

  .btn {
    padding: 8px 10px;
    font-size: 13px;
    flex: 0 0 auto;
  }

  .btn.gold {
    font-weight: 700;
  }

  .footer {
    padding: 20px 12px 34px;
  }
}


/* =====================================================
   Tiny phones
===================================================== */

@media (max-width: 360px) {
  #app-title {
    font-size: 18px;
  }

  .btn {
    font-size: 12.5px;
    padding: 7px 9px;
  }

  .toolbar .actions {
    grid-template-columns: 1fr 1fr;
  }
}


/* =====================================================
   Tablets and small laptops
===================================================== */

@media (max-width: 720px) {
  .container {
    padding: 12px;
  }

  .title-wrap {
    gap: 8px;
    margin: 8px 0 12px;
  }

  #app-title {
    font-size: 24px;
  }

  .toolbar {
    padding: 10px;
    gap: 8px;
  }

  .toolbar .actions {
    gap: 6px;
  }

  .btn {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.1;
  }

  .card {
    padding: 12px;
    margin: 8px 0;
  }

  input,
  select,
  textarea {
    padding: 9px 10px;
  }
}


/* =====================================================
   Mobile paint and performance
===================================================== */

@media (max-width: 900px) {
  .realism {
    background-attachment: scroll !important;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .footer,
  .title-wrap,
  .card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}


/* =====================================================
   Disable expensive backdrop effects on smaller screens
===================================================== */

@supports (-webkit-backdrop-filter: none) or
          (backdrop-filter: none) {
  @media (max-width: 900px) {
    .footer,
    .glass,
    .glassy,
    .modal-footer {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: rgba(12, 12, 12, 0.9);
    }
  }
}


/* =====================================================
   Mobile toolbar system
===================================================== */

@media (max-width: 700px) {
  .container {
    width: 100%;
    padding-inline: 14px;
  }

  .toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .toolbar > .btn[data-back] {
    width: 100%;
  }

  .toolbar .actions {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .toolbar .actions > .btn,
  .toolbar .actions > .menu,
  .toolbar .actions > #api-health,
  .toolbar .actions > #hstl-chip {
    width: 100%;
    min-width: 0;
  }

  .toolbar .actions .btn {
    width: 100%;
  }

  /* Dropdowns stay attached to their trigger on mobile. */
  .menu {
    position: relative;
  }

  .menu-popover {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;

    width: min(260px, calc(100vw - 24px));
    min-width: 200px;

    max-height:
      calc(
        100dvh
        - env(safe-area-inset-top, 0px)
        - env(safe-area-inset-bottom, 0px)
        - 110px
      );

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    box-sizing: border-box;
    z-index: 5000;
  }

  .menu-popover .menu-item {
    min-height: 48px;
    padding: 12px 14px;
  }

  #view-home #api-health,
  #view-home #hstl-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* =====================================================
   Home mobile toolbar — compact single row
===================================================== */

/* Hidden by default outside mobile. */
.mobile-more-menu {
  display: none;
}

@media (max-width: 700px) {
  #view-home .toolbar {
    display: block;
    padding: 10px 12px;
    margin-bottom: 14px;
  }

  #view-home .toolbar > #status:empty {
    display: none;
  }

  #view-home .toolbar .actions {
    width: 100%;
    margin: 0;

    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto
      auto
      auto;

    align-items: center;
    gap: 6px;
  }

  /* Order:
     OK | HSTL | Refresh | Plus | More
  */
  #view-home #api-health {
    grid-column: 1;
    width: auto;
    min-width: 0;
    min-height: 38px;
    justify-content: flex-start;
    padding: 0 4px;
  }

  #view-home #hstl-chip {
    grid-column: 2;
    width: auto;
    min-width: 0;
    min-height: 38px;
    margin-left: 0;
    justify-content: center;
    white-space: nowrap;
  }

  #view-home #refresh-btn {
    grid-column: 3;
  }

  #view-home .actions > .menu:not(.mobile-more-menu) {
    grid-column: 5;
    grid-row: 1;
  }

  #view-home .mobile-more-menu {
    display: block;
    grid-column: 4;
    grid-row: 1;
    position: relative;
    width: auto;
    min-width: 0;
  }

  /* Hidden on mobile because they now live inside More. */
  #view-home #feedback-btn,
  #view-home #about-btn,
  #view-home #logoutBtn,
  #view-home #calm-btn,
  #view-home #calm-badge,
  #view-home #install-btn {
    display: none !important;
  }

  #view-home .toolbar .btn,
  #view-home .mobile-more-trigger {
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 8px 9px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  #view-home #plus-menu-btn {
    width: auto;
  }

  #view-home .mobile-more-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
  }

  #view-home .mobile-more-trigger::-webkit-details-marker {
    display: none;
  }

  #view-home .mobile-more-trigger::marker {
    content: "";
  }

  #view-home .mobile-more-popover {
    display: none;
  }

  #view-home .mobile-more-menu[open]
    .mobile-more-popover {
    display: block;
  }

  #view-home #api-label {
    min-width: 0;
    font-size: 11px;
  }

  #view-home #api-dot {
    width: 9px;
    height: 9px;
  }

  #view-home #hstl-chip {
    font-size: 13px;
  }

  #view-home #hstl-chip .unit {
    font-size: 10px;
  }
}

/* =====================================================
   Mobile viewport-safe centered modals
===================================================== */

@media (max-width: 700px) {
  [role="dialog"] .modal-content {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: calc(100% - 24px) !important;
    max-width: 680px !important;

    max-height:
      calc(
        100dvh
        - env(safe-area-inset-top, 0px)
        - env(safe-area-inset-bottom, 0px)
        - 24px
      ) !important;

    margin: 0 !important;
    transform: translate(-50%, -50%) !important;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    box-sizing: border-box;
    border-radius: 16px;

    /*
      Do not disable animation.
      Modal JavaScript may rely on animationend.
    */
  }

  [role="dialog"] .modal-backdrop {
    position: fixed;
    inset: 0;
  }

  .modal-header,
  .modal-footer {
    position: relative;
    flex: 0 0 auto;
  }

  .modal-body {
    min-height: 0;
  }
}

/* =====================================================
   Ana mobile workspace
===================================================== */

@media (max-width: 700px) {
  #view-ana .ana-summary.ribbon {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin-block: 12px 16px !important;
  }

  #ana-space.card--ana {
    padding: 10px;
  }

  #ana-space .ana-main-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #ana-space .ana-orb-wrap {
    order: 1;
    min-height: 150px;
    padding: 8px;
  }

  #ana-space .ana-interaction {
    order: 2;
  }

  #ana-space #ana-container {
    width: 135px;
    max-width: 135px;
  }

  #view-ana .ana-coach-block {
    font-size: 13px;
  }

  #view-ana .ana-coach-headline {
    font-size: 17px;
    line-height: 1.3;
  }

  #view-ana .ana-coach-summary,
  #view-ana .ana-coach-next p {
    line-height: 1.45;
  }

  #view-ana .tool-chat {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr) auto;
    gap: 8px;
  }

  #view-ana #ana-input {
    min-width: 0;
    width: 100%;
  }

  #view-ana #ana-send {
    width: auto;
    min-width: 88px;
    padding-inline: 16px;
  }

  #view-ana .tool-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 6px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  #view-ana .tool-buttons::-webkit-scrollbar {
    display: none;
  }

  #view-ana .tool-buttons .btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    white-space: nowrap;
    padding-inline: 14px;
  }
}

/* =====================================================
   Compact mobile footer
===================================================== */

@media (max-width: 700px) {
  .footer {
    margin-top: 10px;
    padding:
      10px
      8px
      calc(10px + env(safe-area-inset-bottom, 0px));

    font-size: 11.5px;
    line-height: 1.3;
  }

  .footer::before {
    margin-bottom: 8px;
  }

  .footer-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 4px;
    white-space: nowrap;
  }

  .footer-debug {
    display: none;
  }

  .footer-theme {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
  }
}

/* =====================================================
   Mobile manage-modal list rows
===================================================== */

@media (max-width: 700px) {
  #debts-modal .list-item,
  #income-modal .list-item,
  #expenses-modal .list-item,
  #hustles-modal .list-item,
  #goals-modal .list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  #debts-modal .list-item .btn,
  #income-modal .list-item .btn,
  #expenses-modal .list-item .btn,
  #hustles-modal .list-item .btn,
  #goals-modal .list-item .btn {
    width: auto;
    min-width: 88px;
    margin: 0;
    flex: 0 0 auto;
  }
}

/* =====================================================
   Mobile focus-debt card
===================================================== */

@media (max-width: 700px) {
  #debts-modal .focus-pinned-card {
    padding: 14px;
  }

  #debts-modal .focus-pinned-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }

  #debts-modal .focus-pinned-copy {
    min-width: 0;
  }

  #debts-modal .focus-pinned-description {
    margin-top: 6px;
    line-height: 1.45;
  }

  #debts-modal .focus-pinned-right {
    min-width: 0;
    text-align: right;
  }

  #debts-modal .focus-pinned-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  #debts-modal .focus-pinned-actions .btn {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

/* =====================================================
   Compact second-level financial headers
===================================================== */

@media (max-width: 700px) {
  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .title-wrap {
    gap: 6px;
    margin: 4px 0 10px;
  }

  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .title-wrap h1 {
    margin: 8px 0 2px;
    font-size: 28px;
    line-height: 1.15;
  }

  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .title-wrap .muted {
    margin: 0 0 6px;
    line-height: 1.3;
  }

  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .toolbar {
    margin-top: 8px;
  }
}

/* =====================================================
   Hue Ambiance mobile controls
===================================================== */

@media (max-width: 700px) {
  #hue-sync-modal .hue-ambiance {
    margin-top: 0;
    padding: 14px;
  }

  #hue-sync-modal .hue-ambiance-modes {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  #hue-sync-modal .hue-ambiance-mode-buttons {
    width: 100%;
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #hue-sync-modal .hue-mode-btn {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #hue-sync-modal .hue-lights-row {
    align-items: center;
  }

  #hue-sync-modal .hue-ambiance-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #hue-sync-modal .hue-ambiance-buttons .btn {
    width: auto;
    min-width: 72px;
    margin: 0;
  }

  #hue-sync-modal .hue-mic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  #hue-sync-modal .hue-mic-row > div {
    min-width: 0;
  }

  #hue-sync-modal #hue-mic-btn {
    width: auto;
    min-width: 110px;
    margin: 0;
  }

  #hue-sync-modal .hue-preview {
    gap: 10px;
  }

  #hue-sync-modal #hue-preview-ping {
    width: auto;
    min-width: 96px;
  }
}

/* =====================================================
   Ana mobile refinement
===================================================== */

@media (max-width: 700px) {
  #ana-space.card--ana {
    padding: 10px;
  }

  #ana-space .ana-main-grid {
    gap: 10px;
  }

  /* Keep the future orb slot above the answer */
  #ana-space .ana-orb-wrap {
    order: 1;
    min-height: 125px;
    padding: 6px;
  }

  #ana-space #ana-container {
    width: 115px;
    max-width: 115px;
  }

  #ana-space .ana-interaction {
    order: 2;
    gap: 8px;
  }

  /* Compact answer area, but still scrollable */
  #view-ana .ana-output {
    flex: 0 0 auto;
    height: auto;
    min-height: 190px;
    max-height: 235px;
    overflow-y: auto;
    padding: 12px 14px;
  }

  /* Ask field and Send stay together */
  #view-ana .tool-chat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  #view-ana #ana-input {
    width: 100%;
    min-width: 0;
  }

  #view-ana #ana-send {
    width: auto;
    min-width: 88px;
    padding-inline: 16px;
  }

  /* One compact Ana utility row */
  #view-ana .tool-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    padding: 2px 0 4px;
    overflow: visible;
  }

  #view-ana .tool-buttons .btn,
  #view-ana .btn[data-back] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 34px;

    padding: 7px 5px;
    font-size: 10.5px;
    line-height: 1;

    white-space: nowrap;
    text-align: center;
  }
}

/* =====================================================
   Compact one-row second-level toolbars
===================================================== */

@media (max-width: 700px) {
  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 12px;
    flex-wrap: nowrap;
  }

  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .toolbar > .btn[data-back] {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .toolbar .actions {
    width: auto;
    min-width: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
  }

  :is(
    #view-income,
    #view-expenses,
    #view-debt,
    #view-hustles,
    #view-savings
  ) .toolbar .actions .btn {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* =====================================================
   HSTL mobile layout
===================================================== */

@media (max-width: 700px) {
  /* Compact HSTL heading */
  #view-hstl .title-wrap {
    gap: 6px;
    margin: 4px 0 10px;
  }

  #view-hstl .title-wrap h1 {
    margin: 8px 0 2px;
    font-size: 28px;
    line-height: 1.15;
  }

  #view-hstl .hstl-subhead {
    min-height: 0;
    margin: 0 0 6px;
  }

  /* All four utility buttons on one row */
  #view-hstl .toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 10px 12px;
    margin-top: 8px;
  }

  #view-hstl .toolbar > .btn[data-back],
  #view-hstl .toolbar .actions .btn {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 36px;

    padding: 7px 7px;
    font-size: 11px;
    line-height: 1;

    white-space: nowrap;
  }

  #view-hstl .toolbar .actions {
    width: auto;
    min-width: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
  }

  /* Remove desktop flex heights after stacking */
  #hstl-overview-card .hstl-main-card {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    margin-top: 0;
  }

  #hstl-overview-card .hstl-summary {
    flex: 0 0 auto;
    width: 100%;
  }

  #hstl-overview-card .hstl-chart-col {
    flex: 0 0 auto;
    width: 100%;
    display: block;
  }

  /* Let chart use the whole card width */
  #hstl-overview-card .hstl-chart-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  #hstl-overview-card .hstl-chart-header {
    margin-bottom: 6px;
  }

  /* Show the complete short activity list */
  #hstl-overview-card .hstl-activity-list {
    max-height: none;
    overflow: visible;
    margin-top: 8px;
    padding-top: 8px;
    font-size: 12px;
  }

  #hstl-overview-card .hstl-activity-list li {
    min-width: 0;
    gap: 8px;
  }

  #hstl-overview-card .hstl-activity-list li > * {
    min-width: 0;
  }

  #hstl-overview-card .hstl-activity-amount {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #hstl-overview-card .hstl-chart-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 6px 0 0;
    overflow: visible;
  }

  #hstl-overview-card .hstl-chart-header {
    padding-top: 2px;
    margin-bottom: 6px;
  }
}