/* ESTÁVEL — NÃO ALTERAR */
/*
  Camada visual responsiva do painel Android virtualizado.
  Mantém IDs, classes e estrutura usados pelo JavaScript; qualquer ajuste aqui deve preservar zero overflow horizontal.
*/

:root {
  --responsive-contract-viewports: "300x640 640x300 320x640 640x320 360x740 740x360 414x896 896x414 768x1024 1024x768 1024x1366 1366x1024 1280x800 1280x720 1440x900 1600x900";
  --space-2xs: clamp(0.35rem, 0.28rem + 0.35vw, 0.55rem);
  --space-xs: clamp(0.5rem, 0.42rem + 0.45vw, 0.75rem);
  --space-sm: clamp(0.7rem, 0.56rem + 0.7vw, 1rem);
  --space-md: clamp(0.9rem, 0.72rem + 0.9vw, 1.35rem);
  --space-lg: clamp(1.15rem, 0.92rem + 1.15vw, 1.75rem);
  --touch-target: 3rem;
  --fluid-frame-small: clamp(12rem, 74cqw, 15.625rem);
  --fluid-frame-medium: clamp(13rem, 68cqw, 20.625rem);
  --fluid-frame-large: clamp(14rem, 64cqw, 26.875rem);
  --fluid-frame-expanded: clamp(15rem, 58cqw, 38.75rem);
}

html,
body {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

body {
  min-height: 100dvh;
}

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

img,
video {
  height: auto;
  object-fit: contain;
}

:where(.app-shell, .login-view, .main-area, .view-root, .panel, .modal, .device-popup-layer) *,
:where(.app-shell, .login-view, .main-area, .view-root, .panel, .modal, .device-popup-layer) *::before,
:where(.app-shell, .login-view, .main-area, .view-root, .panel, .modal, .device-popup-layer) *::after {
  min-width: 0;
}

h1 {
  max-width: 100%;
  font-size: clamp(2.15rem, 1.22rem + 4.35vw, 4.8rem);
  line-height: 1;
}

.brand-mark {
  width: clamp(3.25rem, 10vw, 4.75rem);
  height: clamp(3.25rem, 10vw, 4.75rem);
  gap: clamp(0.25rem, 1.1vw, 0.4375rem);
  padding: clamp(0.375rem, 1.35vw, 0.5625rem);
}

.brand-mark.compact {
  width: clamp(2.625rem, 8vw, 3rem);
  height: clamp(2.625rem, 8vw, 3rem);
}

h2 {
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.45rem);
}

h3 {
  font-size: clamp(1rem, 0.94rem + 0.32vw, 1.08rem);
}

p,
small,
button,
input,
textarea,
select,
td,
th {
  overflow-wrap: anywhere;
}

input,
textarea,
select,
.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.chip-btn,
.nav-item,
.segmented-control button,
.segmented button,
.command-results button {
  max-width: 100%;
  min-height: var(--touch-target);
}

.primary-btn.small,
.ghost-btn.small,
.danger-btn.small {
  min-height: var(--touch-target);
}

.icon-btn {
  width: var(--touch-target);
  min-width: var(--touch-target);
  flex: 0 0 var(--touch-target);
}

.login-view {
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
}

.login-brand,
.login-panel {
  padding: max(var(--space-lg), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-lg), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
}

.login-brand {
  min-height: min(42dvh, 28rem);
  gap: var(--space-md);
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.login-panel {
  min-height: auto;
  gap: var(--space-md);
}

.auth-setup,
.input-action-row,
.qr-wrap,
.proxy-secret-preview {
  grid-template-columns: minmax(0, 1fr);
}

.totp-qr,
.totp-qr-mini,
.qr-code {
  width: min(100%, 11.25rem);
  justify-self: center;
}

.app-shell {
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
}

.main-area {
  width: 100%;
}

.topbar {
  min-height: auto;
  padding: max(var(--space-sm), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) var(--space-sm) max(var(--space-md), env(safe-area-inset-left));
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.topbar > div:not(.topbar-actions) {
  flex: 1 1 min(100%, 16rem);
}

.topbar-actions,
.toolbar,
.compact-toolbar,
.card-actions,
.device-popup-head .toolbar,
.device-popup-head .segmented-control {
  width: auto;
  max-width: 100%;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.topbar-actions {
  flex: 1 1 min(100%, 18rem);
  justify-content: flex-end;
}

.topbar-actions .ghost-btn,
.topbar-actions .primary-btn,
.toolbar button,
.compact-toolbar button,
.card-actions button {
  flex: 1 1 min(100%, clamp(7.25rem, 36vw, 8.5rem));
  max-width: 100%;
}

.card-actions button {
  min-width: 0;
}

.view-root {
  padding: var(--space-md);
  gap: var(--space-md);
}

.section-band,
.panel,
.device-card,
.control-stack,
.modal-body {
  gap: var(--space-sm);
}

.panel,
.device-control-panel,
.device-list-panel,
.modal-shell,
.device-popup-shell,
.phone-layout,
.proxy-primary-config,
.proxy-optional-config {
  container-type: inline-size;
}

.panel,
.metric-card,
.account-card,
.plan-card,
.post-card,
.message-row,
.audit-row,
.team-row,
.summary-cell,
.control-group,
.proxy-context-empty,
.setup-box {
  padding: var(--space-sm);
}

.card-actions,
.two-factor-actions,
.android-nav-controls,
.segmented,
.segmented-control,
.proxy-type-tabs,
.tag-row {
  flex-wrap: wrap;
}

.section-head,
.panel-head,
.device-card-head,
.account-top,
.message-row,
.audit-row,
.team-row,
.toggle-line,
.device-popup-head,
.modal-head {
  flex-wrap: wrap;
}

.metrics-grid,
.billing-summary,
.summary-grid,
.proxy-status-grid,
.device-status-grid,
.identity-summary-grid,
.metrics-mini-grid,
.proxy-skeleton-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-sm);
}

.split-grid,
.plan-grid,
.post-board,
.form-grid,
.model-picker,
.account-grid,
.device-workbench,
.proxy-grid,
.proxy-primary-config,
.proxy-optional-config {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-sm);
}

.device-workbench,
.phone-layout,
.device-text-row,
.proxy-primary-config,
.proxy-optional-config,
.input-action-row {
  grid-template-columns: minmax(0, 1fr);
}

.device-panels-grid,
.device-list-panel,
.device-grid {
  max-height: none;
  overflow-x: hidden;
  padding-right: 0;
}

.device-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
}

.device-mini-screen {
  min-height: clamp(5.5rem, 18vw, 6.5rem);
  height: auto;
}

.device-popup-layer {
  padding: max(var(--space-sm), env(safe-area-inset-top)) max(var(--space-sm), env(safe-area-inset-right)) max(var(--space-sm), env(safe-area-inset-bottom)) max(var(--space-sm), env(safe-area-inset-left));
}

.device-popup-shell,
.device-popup-small,
.device-popup-medium,
.device-popup-large,
.device-popup-expanded {
  width: min(100%, calc(100dvw - max(1rem, calc(env(safe-area-inset-left) + env(safe-area-inset-right)))));
  max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
}

.device-popup-head,
.device-popup-body,
.modal-head,
.modal-body {
  padding: var(--space-sm);
}

.device-popup-body {
  place-items: start center;
}

.phone-layout {
  justify-items: center;
  gap: var(--space-md);
}

.phone-layout-small,
.phone-size-small,
.device-popup-body .phone-size-small {
  --phone-frame-width: var(--fluid-frame-small);
  --phone-panel-width: var(--fluid-frame-small);
}

.phone-layout-medium,
.phone-size-medium,
.device-popup-body .phone-size-medium {
  --phone-frame-width: var(--fluid-frame-medium);
  --phone-panel-width: var(--fluid-frame-medium);
}

.phone-layout-large,
.phone-size-large,
.device-popup-body .phone-size-large {
  --phone-frame-width: var(--fluid-frame-large);
  --phone-panel-width: var(--fluid-frame-large);
}

.phone-layout-expanded,
.phone-size-expanded,
.device-popup-body .phone-size-expanded {
  --phone-frame-width: min(var(--fluid-frame-expanded), max(12rem, calc((100dvh - 11rem) * 0.464)));
  --phone-panel-width: min(var(--fluid-frame-expanded), max(12rem, calc((100dvh - 11rem) * 0.464)));
}

.phone-frame {
  width: min(100%, var(--phone-frame-width, var(--fluid-frame-medium)));
  max-width: calc(100dvw - max(2rem, calc(env(safe-area-inset-left) + env(safe-area-inset-right))));
  position: relative;
  top: auto;
  margin-inline: auto;
  padding: clamp(0.5rem, 1.8cqw, 0.75rem);
  border-radius: clamp(1.4rem, 6cqw, 2rem);
}

.phone-screen,
.real-screen-image,
.real-screen-iframe,
.real-novnc-screen {
  border-radius: clamp(1rem, 4.6cqw, 1.5rem);
}

.phone-speaker {
  width: min(5.375rem, 38%);
  height: clamp(0.75rem, 4cqw, 1.125rem);
}

.phone-back-button {
  width: clamp(2rem, 8cqw, 2.75rem);
  height: clamp(2rem, 8cqw, 2.75rem);
  min-width: clamp(2rem, 8cqw, 2.75rem);
}

.real-screen-placeholder,
.android-home,
.android-app-view,
.phone-offline,
.android-recents {
  padding: clamp(0.75rem, 4cqw, 1.375rem);
}

.android-app-grid {
  gap: clamp(0.35rem, 2cqw, 0.625rem);
}

.android-app-grid button span {
  width: clamp(2.25rem, 12cqw, 2.875rem);
}

.android-statusbar,
.android-navbar {
  min-width: 0;
}

.android-statusbar span,
.android-navbar span,
.android-app-grid button,
.status-pill,
.tag,
.summary-cell,
.metric-card,
.proxy-option-card {
  overflow-wrap: anywhere;
}

.control-stack {
  width: 100%;
  min-width: 0;
  align-content: start;
}

.chart {
  height: clamp(12rem, 28vw, 16.25rem);
  gap: clamp(0.35rem, 1.2vw, 0.75rem);
  padding-top: var(--space-sm);
}

.post-board {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.post-lane {
  min-height: clamp(14rem, 42vw, 27.5rem);
}

.device-text-row {
  align-items: stretch;
}

.device-text-row .primary-btn {
  width: 100%;
}

.android-nav-controls {
  grid-template-columns: repeat(3, minmax(var(--touch-target), 1fr));
  width: min(100%, 13rem);
}

.runtime-log,
.device-status-events,
.app-list-mini,
.import-preview,
.command-results {
  max-width: 100%;
  overflow-x: hidden;
}

.data-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  max-width: 100%;
}

.data-table th,
.data-table td {
  padding: var(--space-xs);
  overflow-wrap: anywhere;
  word-break: normal;
}

.proxy-generated-table code,
code,
pre {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.qr-code {
  width: min(100%, 9.375rem);
}

.totp-qr svg,
.totp-qr-mini svg,
.qr-code svg {
  max-width: 100%;
  height: auto;
}

.meter,
.bar,
.proxy-status-light,
.device-dot,
.mini-status {
  flex: 0 0 auto;
}

.usage-panel,
.proxy-context-bar,
.proxy-option-card,
.proxy-status-cell,
.proxy-secret-preview,
.device-card,
.post-lane,
.message-row,
.audit-row,
.team-row {
  min-width: 0;
  max-width: 100%;
}

.real-screen-image,
.real-screen-iframe,
.real-novnc-screen {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.real-screen-placeholder,
.phone-offline {
  min-width: 0;
}

.modal {
  width: min(100%, 42.5rem);
  max-width: calc(100dvw - max(1rem, calc(env(safe-area-inset-left) + env(safe-area-inset-right))));
}

.modal-shell {
  max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
  overflow: auto;
}

.command-palette {
  padding: max(8dvh, env(safe-area-inset-top)) var(--space-sm) var(--space-sm);
}

.command-box,
.toast {
  width: min(100%, 40rem);
  max-width: 100%;
}

.toast {
  overflow-wrap: anywhere;
}

.toast-region {
  right: max(var(--space-sm), env(safe-area-inset-right));
  bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  left: max(var(--space-sm), env(safe-area-inset-left));
  justify-items: end;
}

@container (max-width: 360px) {
  .field,
  .form-grid .full,
  .proxy-wide {
    grid-column: 1 / -1;
  }

  .panel-head,
  .section-head,
  .device-popup-head,
  .modal-head,
  .toggle-line {
    align-items: stretch;
  }

  .segmented,
  .segmented-control,
  .toolbar,
  .compact-toolbar {
    width: 100%;
  }

  .segmented button,
  .segmented-control button {
    flex: 1 1 min(100%, 7rem);
  }
}

@container (min-width: 44rem) {
  .phone-layout {
    grid-template-columns: minmax(12rem, min(42%, var(--phone-frame-width, 20.625rem))) minmax(0, 1fr);
    align-items: start;
    justify-items: stretch;
  }
}

@media (min-width: 52rem) {
  .login-view {
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 21rem), 28.75rem);
  }

  .login-brand {
    min-height: 100dvh;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .auth-setup,
  .qr-wrap {
    grid-template-columns: minmax(8.875rem, auto) minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .app-shell {
    grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: auto;
    transform: none;
    padding: max(var(--space-md), env(safe-area-inset-top)) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
  }

  .mobile-menu {
    display: none;
  }

  .topbar-actions {
    flex: 0 1 auto;
  }
}

@media (min-width: 72rem) {
  .device-workbench {
    grid-template-columns: minmax(20rem, 0.82fr) minmax(0, 1.18fr);
  }

  .device-panels-grid,
  .device-list-panel {
    max-height: calc(100dvh - 7.5rem);
  }

  .device-grid {
    max-height: calc(100dvh - 13.75rem);
  }

  .device-panels-grid,
  .device-grid {
    overflow-y: auto;
    padding-right: var(--space-2xs);
  }

  .phone-frame {
    position: sticky;
    top: clamp(5.5rem, 8dvh, 6.375rem);
  }
}

@media (max-width: 63.99rem) {
  .sidebar {
    padding: max(var(--space-md), env(safe-area-inset-top)) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
  }
}

@media (max-width: 51.99rem) {
  .sidebar {
    width: min(19.375rem, calc(100dvw - max(2rem, calc(env(safe-area-inset-left) + env(safe-area-inset-right)))));
  }

  .topbar-actions {
    justify-content: stretch;
  }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .data-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
  }

  .data-table tr + tr {
    margin-top: var(--space-xs);
  }

  .data-table td {
    border-bottom: 1px solid var(--line);
  }

  .data-table td:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 25rem) {
  .view-root,
  .topbar,
  .device-popup-body,
  .modal-body {
    padding-inline: var(--space-xs);
  }

  .brand-mark:not(.compact) {
    width: clamp(3.25rem, 18vw, 4.75rem);
    height: clamp(3.25rem, 18vw, 4.75rem);
  }

  .primary-btn,
  .ghost-btn,
  .danger-btn,
  .chip-btn {
    width: 100%;
  }

  .login-brand,
  .login-panel {
    padding-inline: var(--space-xs);
  }

  .metrics-grid,
  .billing-summary,
  .summary-grid,
  .proxy-status-grid,
  .device-status-grid,
  .identity-summary-grid,
  .metrics-mini-grid,
  .proxy-skeleton-grid,
  .split-grid,
  .plan-grid,
  .post-board,
  .form-grid,
  .model-picker,
  .account-grid,
  .device-workbench,
  .proxy-grid,
  .proxy-primary-config,
  .proxy-optional-config,
  .device-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-frame {
    max-width: calc(100dvw - max(1rem, calc(env(safe-area-inset-left) + env(safe-area-inset-right))));
  }

  .chart {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-card,
  .sidebar,
  .proxy-skeleton-card span,
  .proxy-skeleton-card strong,
  .proxy-skeleton-card small,
  .toggle-line input::after {
    transition: none;
    animation: none;
  }
}