:root { --mobile-nav-height: 0px; --connection-height: 0px; }
.mobile-bottom-nav { display: none; }
.connection-status { background: var(--surface-raised); color: var(--ink); border-bottom: 1px solid var(--line); font-size: .8125rem; padding: 10px 16px; }
@media (max-width: 991px) {
  :root { --mobile-nav-height: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .app-main { padding-bottom: var(--mobile-nav-height); }
  .app-topbar { height: calc(64px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1025; height: var(--mobile-nav-height); padding: 4px max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left)); background: var(--surface); border-top: 1px solid var(--line); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { flex: 1; min-width: 44px; min-height: 48px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; background: transparent; color: var(--muted); border: 0; border-radius: 9px; text-decoration: none; font-size: 11px; }
  .mobile-bottom-nav [aria-current="page"] { background: var(--cyan-soft); color: var(--cyan); }
  .mobile-bottom-nav [hidden] { display: none; }
  .keyboard-open { --mobile-nav-height: 0px; }
  .keyboard-open .mobile-bottom-nav { display: none; }
  .app-sidebar { padding-top: max(24px,env(safe-area-inset-top)); padding-bottom: max(24px,env(safe-area-inset-bottom)); }
  .app-sidebar .sidebar-close { z-index: 2; min-width: 44px; min-height: 44px; top: max(8px,env(safe-area-inset-top)); right: 8px; background-size: 16px; }
  .app-sidebar .brand { margin-top: 26px; }
  .modal-dialog { max-height: calc(var(--app-height,100dvh) - 16px); margin-top: max(8px,env(safe-area-inset-top)); margin-bottom: max(8px,env(safe-area-inset-bottom)); }
  .modal-dialog-scrollable .modal-content { max-height: calc(var(--app-height,100dvh) - 32px); }
  input.form-control, textarea.form-control, select.form-select { font-size: 16px; }
  .chat-composer #message-input { font-size: 16px; }
  .chat-composer .chat-tool-icon { width: 44px; min-width: 44px; }
  .btn-sm { min-height: 44px; }
}
@media (max-width: 575px) {
  .app-topbar #my-password { display: none; }
  .topbar-left { min-width: 0; flex: 1; }
  .breadcrumb-label { min-width: 0; }
  .breadcrumb-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-topbar { padding-inline: max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)); }
  .topbar-actions { gap: 4px; flex-shrink: 0; }
  .app-footer { padding-bottom: env(safe-area-inset-bottom); }
  .modal-dialog { margin-inline: 8px; }
  .contact-tabs { flex-wrap: nowrap; gap: 6px; }
  .contact-tabs a { flex: 1; justify-content: center; padding: 9px 6px; gap: 6px; }
  .client-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .client-table, .client-table tbody { display: block; width: 100%; }
  .client-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .client-table tbody td { display: block; padding: 0; border: 0; min-width: 0; white-space: normal !important; overflow-wrap: anywhere; }
  .client-table td:first-child { grid-column: 1 / -1; }
  .client-table td:not(:first-child)::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
  .client-table td:last-child::before { content: none; }
  .client-table .client-name-button { width: 100%; }
  .client-table .client-name-button > span { min-width: 0; }
  .client-table .client-whatsapp-link { min-height: 44px; align-items: center; }
}