/* Responsive containment: the viewport never becomes a horizontal canvas.
   Components that genuinely need more width own their horizontal scroll. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body.app-body {
  min-width: 0;
}

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

input,
select,
textarea,
button,
.app-shell,
.app-workspace,
.app-content,
.app-page,
.panel,
.form-card,
.billing-summary,
.billing-payment,
.career-shell,
.backoffice-shell,
.backoffice-content {
  min-width: 0;
}

.app-shell,
.app-workspace,
.app-content,
.app-page,
.site-shell,
.career-shell,
.backoffice-shell {
  max-width: 100%;
}

.panel-head > *,
.app-page-heading > *,
.metric-card > div,
.integration-row > div,
.automation-service-row > div,
.history-row > div,
.backoffice-list > a > div,
.backoffice-client-row > div {
  min-width: 0;
}

.panel-head h2,
.panel-head small,
.app-page-heading h1,
.app-page-heading p,
.metric-card span,
.metric-card small,
.integration-row strong,
.integration-row small,
.automation-service-row strong,
.automation-service-row small,
.account-current-email strong {
  overflow-wrap: anywhere;
}

.metric-card strong small {
  display: inline;
  margin-left: .22rem;
  color: var(--muted);
  font: 650 .58rem Manrope,sans-serif;
  white-space: nowrap;
}

.activity-chart-card,
.chart-wrap,
.run-table,
.runs-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.activity-chart-card {
  overflow: hidden;
}

.chart-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

.activity-lines {
  width: 100%;
  max-width: 100%;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}

.run-row,
.run-provider {
  min-width: 0;
}

.run-status {
  white-space: nowrap;
}

.billing-payment,
#cardPaymentBrick_container,
#walletBrick_container,
.billing-method-panel {
  max-width: 100%;
  overflow-x: clip;
}

.compact-upload input[type=file],
.form-card input[type=file] {
  max-width: 100%;
}

@media (max-width: 700px) {
  .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .panel-head > :first-child {
    flex: 1 1 220px;
  }

  .integration-legend,
  .chart-legend {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .app-page-heading form {
    width: 100%;
  }

  .app-page-heading .button,
  .app-page-heading form .button {
    width: fit-content;
    max-width: 100%;
  }

  .dashboard-page .panel-head {
    flex-direction: column;
  }

  .dashboard-page .panel-head > :first-child {
    flex: 0 1 auto;
  }

  .dashboard-page .panel-head .plan-chip,
  .dashboard-page .panel-head .live-indicator {
    align-self: flex-start;
  }

  .linkedin-settings-integration,
  .automation-service-row {
    grid-template-columns: 36px minmax(0,1fr);
  }

  .linkedin-settings-integration .connection-toggle,
  .automation-service-row .service-runtime-toggle {
    width: fit-content;
    max-width: 100%;
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    justify-content: flex-start;
  }

  .integration-row:not([data-linkedin-integration]) {
    grid-template-columns: 10px minmax(0,1fr);
  }

  .integration-row:not([data-linkedin-integration]) .button,
  .integration-row:not([data-linkedin-integration]) .connection-toggle,
  .integration-row:not([data-linkedin-integration]) .connection-chip {
    width: fit-content;
    max-width: 100%;
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }

  .history-row {
    grid-template-columns: minmax(0,1fr) auto;
    gap: .55rem .75rem;
    padding: .85rem;
  }

  .history-row > div:first-child {
    grid-column: 1 / -1;
  }

  .history-row > div:nth-child(3) {
    grid-column: 2;
  }

  .history-link {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .blacklist-row {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .blacklist-row > div,
  .blacklist-row > span {
    grid-column: 1 / -1;
  }

  .blacklist-row details,
  .blacklist-row > form {
    grid-column: auto;
    grid-row: auto;
  }

  .blacklist-row details > form {
    position: fixed;
    z-index: 100;
    inset: auto .625rem .625rem;
    width: auto;
    max-height: calc(100dvh - 1.25rem);
    overflow-y: auto;
  }

  .billing-summary,
  .billing-payment {
    padding: 1rem;
    border-radius: 16px;
  }

  .billing-method-tabs {
    position: static;
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .billing-method-choice {
    min-height: 68px;
  }

  .billing-coupon-row {
    grid-template-columns: 1fr;
  }

  .billing-coupon-row .button {
    width: 100%;
  }

  .support-widget > summary {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .support-widget > summary svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
}

@media (max-width: 640px) {
  .run-row {
    grid-template-columns: minmax(0,1fr);
  }

  .run-outcome {
    grid-template-columns: minmax(0,190px) 72px;
    justify-content: start;
  }
}

@media (max-width: 420px) {
  .support-widget-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(112px,32%) minmax(0,1fr);
  }

  .support-widget-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .support-widget-tickets {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-content: start;
    overflow-y: auto;
  }

  .support-widget-new {
    grid-column: 1 / -1;
  }

  .support-widget-chat {
    min-height: 0;
  }

  .backoffice-nav {
    grid-template-columns: 1fr;
  }

  .backoffice-module {
    grid-template-columns: 36px minmax(0,1fr);
  }

  .backoffice-module i {
    grid-column: 2;
  }
}