/*
 * VISINVOKE customer portal tablet presentation.
 *
 * This layer is intentionally bounded between the existing phone and desktop
 * presentations. It changes component proportions, not application scale:
 * no CSS zoom, viewport manipulation, or whole-page transforms are used.
 * Desktop (>= 1440px) and phone (< 768px) retain their existing rules.
 */

@media (min-width: 768px) and (max-width: 1439px) {
  .vi-portal-dashboard-container,
  .vi-desktop-wide:has([data-help-id="header-title"]) {
    width: auto !important;
    max-width: none !important;
    padding: 18px 28px 28px !important;
  }

  .vi-portal-hero,
  .vi-desktop-wide > div:has(> [data-help-id="header-title"]) {
    margin-bottom: 18px !important;
  }

  .vi-portal-hero-title,
  [data-help-id="header-title"] {
    font-size: 36px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.6px !important;
  }

  .vi-portal-hero-subtitle,
  .vi-desktop-wide > div:has(> [data-help-id="header-title"]) > p {
    margin-top: 7px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .vi-portal-continue-card,
  [data-help-id="continue-card"] {
    gap: 14px !important;
    margin-bottom: 16px !important;
    padding: 14px 18px !important;
    border-radius: 13px !important;
  }

  .vi-portal-continue-left,
  [data-help-id="continue-card"] > div:first-child {
    gap: 12px !important;
    min-width: 260px !important;
  }

  .vi-portal-continue-thumb,
  [data-help-id="continue-thumb"] {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
  }

  .vi-portal-continue-actions,
  [data-help-id="continue-card"] > div:last-child {
    gap: 7px !important;
  }

  .vi-portal-continue-actions button,
  [data-help-id="continue-card"] button,
  .vi-portal-dashboard-card button,
  .vi-desktop-wide > div:has([data-help-id="plan-card"]):has([data-help-id="credits-card"]) > div button {
    min-height: 48px;
  }

  .vi-portal-dashboard-grid,
  .vi-desktop-wide > div:has([data-help-id="plan-card"]):has([data-help-id="credits-card"]) {
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  .vi-portal-dashboard-card,
  .vi-desktop-wide > div:has([data-help-id="plan-card"]):has([data-help-id="credits-card"]) > div {
    padding: 20px !important;
    border-radius: 13px !important;
    gap: 10px !important;
    transform: none !important;
  }

  .vi-portal-plan-column,
  [data-help-id="plan-card"] {
    padding-right: 18px !important;
    gap: 14px !important;
  }

  .vi-portal-animation-column,
  [data-help-id="anim-credits"] {
    padding-left: 18px !important;
    gap: 14px !important;
  }

  .vi-portal-plan-top,
  [data-help-id="plan-card"] > div:first-child,
  .vi-portal-animation-top,
  [data-help-id="anim-credits"] > div:first-child {
    gap: 11px !important;
  }

  .vi-portal-plan-name,
  [data-help-id="plan-name"] {
    font-size: 29px !important;
  }

  .vi-portal-plan-description,
  [data-help-id="plan-card"] p,
  .vi-portal-animation-description,
  [data-help-id="anim-credits"] > div:first-child > div:last-child {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .vi-portal-animation-title,
  [data-help-id="anim-credits"] > div:first-child > div:first-child > div:nth-child(2) {
    font-size: 18px !important;
  }

  .vi-portal-usage-value,
  [data-help-id="credits-used"] {
    font-size: 36px !important;
  }

  .vi-help-start,
  button[data-testid="start-here"] {
    width: 66px !important;
    height: 66px !important;
    top: 128px !important;
  }

  .vi-help-start-star,
  button[data-testid="start-here"] > span:first-child {
    font-size: 18px !important;
  }

  .vi-help-start-label,
  button[data-testid="start-here"] > span:last-child {
    font-size: 8px !important;
  }

  .vi-help-topics-wrap,
  div[data-help-ui="1"]:has(> button[data-testid="help-topics"]) {
    top: 137px !important;
  }

  .vi-help-topics-button,
  button[data-testid="help-topics"] {
    min-height: 48px;
    padding: 9px 16px !important;
    font-size: 13px !important;
  }
}

/* Tablet landscape keeps the existing two-row navigation structure but uses
   purpose-sized tablet proportions instead of compact-desktop dimensions. */
@media (min-width: 1140px) and (max-width: 1439px) {
  .vi-portal-util-inner,
  div:has(> div > [data-help-id="nav-command-center"]):has([data-help-id="nav-signout"]) {
    min-height: 46px !important;
    gap: 6px !important;
    padding: 2px 10px !important;
    flex-wrap: nowrap !important;
  }

  .vi-portal-util-inner > div,
  div:has(> div > [data-help-id="nav-command-center"]):has([data-help-id="nav-signout"]) > div {
    gap: 6px !important;
  }

  .vi-portal-wordmark,
  div:has(> div > [data-help-id="nav-command-center"]):has([data-help-id="nav-signout"]) > .visinvoke-logo-text {
    font-size: 23px !important;
    letter-spacing: 2px !important;
  }

  .vi-portal-identity {
    max-width: 170px;
    overflow: hidden;
  }

  .vi-portal-util-action,
  [data-help-id="nav-command-center"],
  [data-help-id="nav-growth"],
  [data-help-id="nav-generators"],
  [data-help-id="nav-account"],
  [data-help-id="nav-signout"] {
    min-height: 44px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
  }

  .vi-portal-category-bar,
  nav:has(button[data-help-id="nav-visual"]) {
    min-height: 70px !important;
  }

  .vi-portal-category-row,
  nav:has(button[data-help-id="nav-visual"]) > div:has(> button[data-help-id="nav-visual"]) {
    gap: 4px !important;
    padding: 5px 8px !important;
  }

  .vi-portal-category-tile,
  nav:has(button[data-help-id="nav-visual"]) button[data-help-id^="nav-"] {
    min-height: 58px !important;
    padding: 6px 7px !important;
    border-radius: 9px !important;
  }

  .vi-portal-category-title,
  nav:has(button[data-help-id="nav-visual"]) button[data-help-id^="nav-"] > span > span:first-child {
    font-size: 16px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.15px !important;
  }
}

/* Portrait tablets deliberately use the portal's existing hamburger shell and
   reflow dashboard content to one column. Phone CSS is untouched below 768px. */
@media (min-width: 768px) and (max-width: 1139px) {
  .vi-portal-dashboard-container,
  .vi-desktop-wide:has([data-help-id="header-title"]) {
    padding: 18px 20px 26px !important;
  }

  .vi-portal-dashboard-grid,
  .vi-desktop-wide > div:has([data-help-id="plan-card"]):has([data-help-id="credits-card"]) {
    grid-template-columns: 1fr !important;
  }

  .vi-portal-continue-actions,
  [data-help-id="continue-card"] > div:last-child {
    width: 100%;
  }

  .vi-portal-continue-actions button,
  [data-help-id="continue-card"] > div:last-child button {
    flex: 1 1 180px;
  }

  .vi-help-start,
  button[data-testid="start-here"] {
    top: 76px !important;
    left: 18px !important;
  }

  .vi-help-topics-wrap,
  div[data-help-ui="1"]:has(> button[data-testid="help-topics"]) {
    top: 85px !important;
    right: 18px !important;
  }
}

@media (min-width: 768px) and (max-width: 860px) {
  .vi-portal-hero-title,
  [data-help-id="header-title"] {
    font-size: 32px !important;
  }

  .vi-portal-account-row,
  [data-help-id="plan-card"]:has(+ [data-help-id="anim-credits"]) {
    flex-direction: column !important;
  }

  .vi-portal-plan-column,
  [data-help-id="plan-card"] {
    min-width: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 18px !important;
  }

  .vi-portal-animation-column,
  [data-help-id="anim-credits"] {
    min-width: 0 !important;
    padding-top: 18px !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    border-left: 0 !important;
  }
}