/* Freiriano: fluid school CRM. This last layer resolves legacy fixed dimensions. */
:root {
  --crm-canvas: #f3f6f8;
  --crm-ink: #243b46;
  --crm-muted: #637783;
  --crm-line: #dfe7eb;
  --crm-radius: 12px;
  --sidebar-current-width: 248px;
  --crm-shadow: 0 2px 8px #213b4610;
}
html { min-width: 320px; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; }
html:has(#app:not(.hidden)), body:has(#app:not(.hidden)) { height: 100%; overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
button, .button, summary, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, .button, summary { touch-action: manipulation; }
button, .button { transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
button:hover, .button:hover { transform: none; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #2d85b0; outline-offset: 3px; }
img, video, canvas, svg { max-width: 100%; }
input, select, textarea { min-width: 0; max-width: 100%; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { border-radius: 8px; }
button, .button { border-radius: 8px; }

#app.app { height: var(--crm-viewport-height, 100dvh); min-height: 0; overflow: hidden; }
#app.app:not(.hidden) { display: flex !important; }
#app .sidebar { height: 100% !important; min-height: 0 !important; max-height: 100% !important; padding: 22px 14px 12px; background: #fff; }
#app .school-brand { gap: 11px; padding: 0 5px 21px; }
#app .school-logo { width: 42px; height: 48px; flex-basis: 42px; }
#app .school-brand h1 { margin: 0; font-size: 16px; letter-spacing: -.25px; }
#app .school-brand p { margin: 4px 0 0; font-size: 10px; }
#app .sidebar-close { display: none; }
#app .nav { gap: 17px; }
#app .nav-group { gap: 4px; }
#app .nav-group-title { font-size: 10px; font-weight: 700; letter-spacing: .65px; color: #80939e; }
#app .nav-item, #app .nav-item.active, #app .logout {
  height: 39px !important; min-height: 39px !important; max-height: 39px !important; flex-basis: 39px !important;
  padding: 9px 11px !important; border-radius: 8px; font-size: 12px;
}
#app .nav-item.active { background: #e9f5ef; box-shadow: inset 3px 0 var(--crm-accent); color: #126846; }
#app .nav-item[data-view="conversas"] { padding-right: 54px !important; }
#app .nav-item[data-view="declaracoes"], #app .nav-item[data-view="justificativas"] { padding-right: 32px !important; }
#app .nav-item:hover:not(.active) { background: #f3f6f8; }
#app .sidebar-auto-service { padding: 15px 8px 5px; }
#app .content, #app .content:has(#view-conversas:not(.hidden)) {
  width: 0; min-width: 0; max-width: none !important; min-height: 0; height: 100%; flex: 1 1 0;
  padding: 0; overflow: hidden; background: var(--crm-canvas);
}
#app .topbar, #app .content:has(#view-conversas:not(.hidden)) > .topbar {
  position: relative; top: auto; min-height: 82px; flex-shrink: 0; gap: 14px; margin: 0; padding: 16px 28px;
  border-bottom: 1px solid var(--crm-line); background: #fff;
}
#app .topbar h2 { font-size: 22px; letter-spacing: -.5px; font-weight: 650; }
#app .crm-context { margin-bottom: 5px; font-size: 10px; letter-spacing: .3px; }
#app .topbar #subtitulo-view { margin-top: 5px; font-size: 12px; }
#app .crm-user-avatar { width: 38px; height: 38px; flex-basis: 38px; background: #edf3f6; }
#app .view { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; padding: 25px 28px; overflow: auto; scrollbar-gutter: stable; }
#app .view.hidden { display: none !important; }
#app .view > *, #app .panel-card, #app form, #app .editor { min-width: 0; max-width: 100%; }
#app .global-status-alert, #app .automatic-service-alert { margin: 10px 28px 0; flex-shrink: 0; }
.panel-card, .settings-card, .stat, .attendance-record, .table-wrap { border-radius: var(--crm-radius); }
.panel-card h3, .settings-card h3, .editor h3 { line-height: 1.4; }
.muted, .db-path, .permission-description, .settings-card p, .admin-panel p { overflow-wrap: anywhere; }
.actions, .student-base-heading, .student-base-actions, .documents-toolbar, .documents-filters,
.documents-actions, .documents-pagination, .attendance-toolbar-actions, .table-actions { min-width: 0; flex-wrap: wrap; }
.actions > input, .student-base-actions > input { min-width: 0; }
.table-wrap, .crm-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap table { min-width: 620px; }
.table-wrap td, .table-wrap th { overflow-wrap: anywhere; }
.table-actions { gap: 6px; }
.table-actions button, .table-actions .button { min-height: 34px; }
.stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 19px 17px; min-height: 140px; box-shadow: var(--crm-shadow); }
.stat span { font-size: 12px; }
.stat strong { font-size: 31px; }
.stat small { font-size: 11px; }
.stat-connection strong { font-size: 15px; }
.crm-overview-grid { gap: 26px; grid-template-columns: minmax(0, 1fr) 270px; }
.crm-section-heading h3 { font-size: 15px; }
.crm-queue-row > span { font-size: 12px; }
.crm-recent-table th { padding: 13px; font-size: 11px; }
.crm-recent-table td { padding: 15px 13px; font-size: 12px; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
#app .settings-card, #app .admin-panel, #app .user-status-panel, #app .student-base-import {
  border: 1px solid var(--crm-line); border-radius: var(--crm-radius); padding: 20px; background: #fff;
}
.settings-shell, .admin-panels, .admin-grid, .split, .permission-grid, .student-base-page { min-width: 0; }
.settings-shell { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 20px; }
.settings-preview { min-width: 0; align-self: start; }
.settings-card > button, .editor > button { min-height: 40px; }
.admin-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-status-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.admin-status-card { min-width: 0; border: 1px solid var(--crm-line); border-radius: var(--crm-radius); padding: 17px; background: #fff; }
.admin-status-card strong, .admin-status-card small, .admin-status-card span { overflow-wrap: anywhere; }
.admin-kv, .admin-network-list { min-width: 0; }
.admin-kv strong, .admin-kv span, .admin-network-list strong, .admin-network-list span { min-width: 0; overflow-wrap: anywhere; }
pre, .admin-log, .admin-terminal-output { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.modal { z-index: 200; padding: 24px; }
.modal-card { width: min(var(--modal-width, 760px), 100%); max-width: 100%; max-height: calc(var(--crm-viewport-height, 100dvh) - 48px); border-radius: 16px; }
.modal-head { flex-shrink: 0; }
.modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.modal-actions, .declaration-modal-actions { flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
.modal-actions button { min-height: 42px; }
.modal-head .icon-button { min-width: 42px; min-height: 42px; }
.toast-region { max-width: min(420px, calc(100vw - 24px)); }

/* One scrolling history; a stable header and composer at both ends. */
#app #view-conversas:not(.hidden) { display: flex; min-height: 0; height: 0 !important; flex: 1 1 0; gap: 11px; padding: 18px 24px 20px; overflow: hidden; }
#view-conversas .conversation-operational-bar { display: flex; min-height: 44px; align-items: center; padding-bottom: 10px; }
#view-conversas .conversation-live-status { flex-wrap: wrap; gap: 5px 16px; font-size: 11px; }
#view-conversas .new-conversation-button { min-height: 38px; border-radius: 8px; }
#view-conversas .conversation-actions { display: flex; height: auto; min-height: 40px; flex-wrap: wrap; gap: 7px; }
#view-conversas .conversation-actions input { min-width: 160px; height: 40px; min-height: 40px; max-height: none; }
#view-conversas .conversation-actions > button, #view-conversas .conversation-actions > a, #view-conversas .conversation-tools > summary { min-height: 40px; padding: 9px 12px; font-size: 12px; }
#atualizar-conversas { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.inbox-actions-menu { display: contents; }
.inbox-actions-menu > summary { display: none; }
.inbox-action-buttons { display: flex !important; align-items: center; gap: 7px; }
.inbox-action-buttons > button, .inbox-action-buttons > a { min-height: 40px; padding: 9px 12px; font-size: 12px; }
#view-conversas .conversation-inbox-navigation { min-height: 42px; flex-wrap: wrap; gap: 0 10px; }
#view-conversas .conversation-box-tabs, #view-conversas .conversation-admin-filters { overflow: auto; scrollbar-width: none; }
#view-conversas .conversation-box-tab, #view-conversas .conversation-admin-filters button { min-height: 40px; font-size: 12px; }
#view-conversas .conversation-shell { height: 0; min-height: 0; flex: 1 1 0; grid-template-columns: minmax(260px, 31%) minmax(0, 1fr); border-radius: 12px; overflow: hidden; }
#view-conversas .conversation-list { min-height: 0; height: 100%; max-height: none !important; padding: 0; scrollbar-width: thin; }
#view-conversas .conversation-item { min-height: 92px; padding: 15px; border-bottom: 1px solid #edf1f4; }
#view-conversas .conversation-item strong { font-size: 13px; line-height: 1.4; }
#view-conversas .conversation-item small, #view-conversas .conversation-item p { font-size: 12px; line-height: 1.4; }
#view-conversas .chat-panel { min-height: 0; height: 100%; gap: 0; padding: 0; }
#view-conversas .chat-head { position: relative; display: flex; min-height: 76px; padding: 14px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--crm-line); }
#view-conversas .chat-contact { min-width: 0; flex: 1 1 150px; }
#view-conversas .chat-contact h3 { font-size: 14px; line-height: 1.4; }
#view-conversas .chat-contact p { font-size: 11px; }
#view-conversas .chat-avatar { width: 38px; height: 38px; min-width: 38px; font-size: 13px; background: #edf4ef; color: #2a7958; }
#view-conversas .chat-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#view-conversas .conversation-attendance-state { min-width: 0; }
#view-conversas .chat-back-button, .chat-actions-menu > summary { display: none; }
.chat-actions-menu { display: contents; }
.chat-action-buttons { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.chat-action-buttons button { min-height: 34px; font-size: 11px; }
#view-conversas .contact-report-card { flex-shrink: 0; max-height: 88px; padding: 10px 15px; margin: 0; border: 0; border-bottom: 1px solid #dfe9e2; border-radius: 0; font-size: 11px; }
#view-conversas .chat-messages { flex: 1 1 0; min-height: 0; height: 0; padding: 22px 20px; border: 0; border-radius: 0; background: var(--chat-bg, #f4f7f6); overflow: auto !important; scrollbar-gutter: stable; }
#view-conversas .conversation-messages-content { gap: 12px; }
#view-conversas .chat-message { max-width: min(84%, 680px); padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; box-shadow: 0 1px 2px #20392b0b; }
#view-conversas .chat-message time { font-size: 10px; }
#view-conversas .chat-message p, #view-conversas .chat-message div { overflow-wrap: anywhere; }
#view-conversas .chat-media-image, #view-conversas .chat-message img, #view-conversas .chat-message video { max-width: 100%; height: auto; max-height: 400px; object-fit: contain; }
#view-conversas .chat-message audio { width: min(300px, 100%); max-width: 100%; }
#view-conversas .chat-form { flex-shrink: 0; gap: 6px; margin: 0; padding: 12px 14px; border-top: 1px solid var(--crm-line); background: #fff; }
#view-conversas .chat-composer-main { grid-template-columns: minmax(0, 1fr) 42px 42px auto; gap: 7px; align-items: end; }
#view-conversas .chat-composer-main textarea { min-height: 44px; height: 44px; max-height: 116px; padding: 11px 12px; font-size: 14px; resize: none; }
#view-conversas .chat-composer-main .chat-attach-button, #view-conversas .chat-composer-main .chat-record-button { width: 42px; min-width: 42px; max-width: 42px; min-height: 44px; height: 44px; }
#view-conversas .chat-composer-main #conversa-enviar { min-height: 44px; height: 44px; min-width: 88px; padding-inline: 14px; }
#view-conversas .conversation-composer-info { font-size: 10px; line-height: 1.4; }
#view-conversas .chat-composer-main:not(:has(button:not(.hidden))) textarea { grid-column: 1 / -1; }
#conversa-status-form:empty { display: none; }

@media (min-width: 841px) and (max-width: 1200px) {
  :root { --sidebar-current-width: 76px; }
  #app .sidebar { padding-inline: 10px; }
  #app .school-brand { justify-content: center; padding: 0 0 17px; }
  #app .school-brand-copy, #app .nav-label, #app .nav-group-title, #app .automatic-service-heading > span:last-child,
  #app .automatic-service-state, #app .automatic-service-action, #app #automatic-service-action { display: none; }
  #app .nav { gap: 16px; }
  #app .nav-group { gap: 6px; }
  #app .nav-item, #app .nav-item.active, #app .nav-item[data-view], #app .logout { justify-content: center; height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex-basis: 44px !important; padding: 10px !important; }
  #app .nav-icon { width: 20px; min-width: 20px; height: 20px; }
  #app .nav-pending-badge, #app .nav-conversation-badges { top: 0; right: 0; transform: none; }
  #app .nav-conversation-badge { min-width: 15px; height: 15px; font-size: 9px; }
  #app .sidebar-auto-service { padding: 12px 0 0; display: grid; justify-items: center; }
  #app .automatic-service-toggle { padding: 6px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-overview-aside { display: grid; grid-template-columns: 1fr 1fr; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--crm-line); }
  .crm-channel { margin: 0; }
  .settings-shell { grid-template-columns: minmax(0, 1fr); }
  .settings-preview { position: static; }
  #view-conversas .conversation-shell { grid-template-columns: minmax(245px, 34%) minmax(0, 1fr); }
  #view-conversas .chat-head-actions { justify-content: flex-start; }
}

@media (max-width: 840px) {
  :root { --sidebar-current-width: 0px; --header-height: 68px; }
  #app.app:not(.hidden) { display: flex !important; height: var(--crm-viewport-height, 100dvh); min-height: 0; overflow: hidden; }
  #app .sidebar { position: fixed !important; z-index: 91; inset: 0 auto 0 0; width: min(296px, 88vw) !important; min-width: 0 !important; max-width: 88vw !important; height: var(--crm-viewport-height, 100dvh) !important; max-height: var(--crm-viewport-height, 100dvh) !important; padding: 24px 16px max(14px, env(safe-area-inset-bottom)); transform: translateX(-105%); box-shadow: 15px 0 50px #16334625; }
  .sidebar-open #app .sidebar { transform: translateX(0); }
  .sidebar-backdrop { z-index: 90; background: #18304166; backdrop-filter: blur(2px); }
  #app .nav-item, #app .nav-item.active, #app .logout { height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex-basis: 44px !important; font-size: 14px; }
  #app .nav-group-title { font-size: 10px; }
  #app .sidebar-close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; min-width: 40px; height: 44px; min-height: 44px; margin-left: auto; padding: 10px; border: 0; background: transparent; color: #526e7a; }
  #app .content, #app .content:has(#view-conversas:not(.hidden)) { min-height: 0; height: 100%; max-width: 100% !important; overflow: hidden; }
  #app .topbar, #app .content:has(#view-conversas:not(.hidden)) > .topbar { display: flex; min-height: 68px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; gap: 11px; }
  #app .topbar .topbar-copy, #app .content:has(#view-conversas:not(.hidden)) > .topbar .topbar-copy { display: block; }
  #app .topbar h2 { font-size: 18px; letter-spacing: -.3px; }
  #app .crm-context { margin-bottom: 3px; font-size: 10px; }
  #app .topbar #subtitulo-view { display: none; }
  #app .sidebar-toggle { display: grid; place-items: center; width: 42px; height: 42px; min-height: 42px; flex-basis: 42px; padding: 10px; border-radius: 10px; }
  #app .crm-user { max-width: 36px; padding: 0; border: 0; }
  #app .crm-user > div { display: none; }
  #app .crm-user-avatar { width: 34px; height: 34px; flex-basis: 34px; }
  #app .view { padding: 18px 16px max(22px, env(safe-area-inset-bottom)); min-height: 0; overflow: auto; scrollbar-gutter: auto; overscroll-behavior-y: contain; }
  #app .global-status-alert, #app .automatic-service-alert { margin: 8px 12px 0; padding: 9px 12px; min-height: 0; font-size: 11px; }
  #app .panel-card h3, #app .settings-card h3 { font-size: 15px; }
  .actions { display: flex; gap: 8px; }
  .actions > input, .actions > select { flex: 1 1 100%; width: 100%; }
  .actions > button, .actions > a { flex: 1 1 auto; min-width: 0; min-height: 42px; font-size: 12px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { font-size: 16px; min-height: 44px; }
  .settings-grid, .admin-grid, .admin-panels, .settings-shell, .split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #app .settings-card, #app .admin-panel, #app .user-status-panel, #app .student-base-import { padding: 17px; }
  .settings-preview { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .stat { min-height: 126px; padding: 16px 13px; }
  .stat span { min-height: 33px; font-size: 12px; }
  .stat strong { font-size: 28px; }
  .stat small { font-size: 10px; }
  .stat-connection { grid-column: 1 / -1; min-height: 68px; }
  .stat-connection > div:not(.stat-icon) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 30px; }
  .stat-connection span { min-height: 0; padding: 0; }
  .stat-connection strong { margin: 0; font-size: 14px; }
  .stat-connection small { display: none; }
  .crm-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .crm-overview-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--crm-line); }
  .crm-channel { margin: 0; }
  .crm-section-heading { align-items: center; }
  .crm-overview-actions { width: 100%; }
  .crm-overview-actions button { flex: 1; min-height: 44px; font-size: 12px; }
  .home-status-card { flex-wrap: wrap; }
  .home-status-card p, .crm-date, .crm-sync-status { font-size: 11px; }
  .admin-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-status-card { padding: 14px 12px; }
  .admin-kv { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .admin-kv strong { margin-bottom: 8px; }
  .student-base-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .student-base-actions { display: flex; width: 100%; gap: 8px; }
  .student-base-actions input { flex: 1 1 180px; width: 100%; min-width: 0; }
  .student-base-summary, .student-base-preview-summary { grid-template-columns: minmax(0, 1fr); }
  .student-base-summary > div { padding: 12px 16px; }
  .student-base-summary strong { overflow-wrap: anywhere; }
  .student-base-form-grid, .manual-justification-grid, .document-modal-body { grid-template-columns: minmax(0, 1fr); }
  .documents-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .documents-pagination { gap: 12px; }
  .documents-pagination label { width: auto; }
  .permission-grid, .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toggle-list label, .permission-grid label { min-height: 40px; }
  .users-status-filters { grid-column: 1; flex-wrap: wrap; }
  .users-status-filters button { flex: 1; min-height: 40px; }
  .message-list { max-height: 240px; }
  .justifications-dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .justifications-dashboard-metric { padding: 8px; }
  .justifications-dashboard-metric span { font-size: 10px; overflow-wrap: anywhere; }
  .justifications-dashboard-metric strong { font-size: 24px; }
  .justifications-phone-chart { max-height: 210px; }
  .modal { padding: 12px; align-items: center; }
  .modal-card { width: 100%; max-height: calc(var(--crm-viewport-height, 100dvh) - 24px); border-radius: 14px; }
  .modal-head, .modal-body, .modal-actions, .declaration-modal-actions { padding: 16px; }
  .modal-actions, .declaration-modal-actions { flex-direction: row; }
  .modal-actions button, .declaration-modal-actions button { flex: 1 1 130px; width: auto; min-height: 44px; }
  .modal-grid, .declaration-fields { grid-template-columns: minmax(0, 1fr); }
  .toast-region { bottom: max(14px, env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; max-width: none; }

  /* Mobile inbox and chat are separate screens, without stacked scroll areas. */
  #app #view-conversas:not(.hidden) { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 8px; }
  #view-conversas .conversation-operational-bar { flex-direction: row; align-items: center; gap: 8px; padding: 0 0 8px; }
  #view-conversas .conversation-live-status { font-size: 10px; gap: 3px 10px; }
  #view-conversas .conversation-live-status strong { font-size: 11px; }
  #view-conversas .new-conversation-button { width: auto; min-height: 40px; padding: 8px 11px; font-size: 11px; }
  #view-conversas .conversation-actions { display: grid; position: relative; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 6px; min-height: 0; }
  #view-conversas .conversation-actions input { grid-column: 1; width: 100%; min-width: 0; height: 44px; font-size: 16px; }
  #view-conversas .conversation-actions > button, #view-conversas .conversation-actions > a, #view-conversas .conversation-tools > summary { display: flex; width: 100%; min-width: 0; justify-content: center; align-items: center; min-height: 38px; padding: 7px 4px; font-size: 11px; }
  #view-conversas .conversation-actions #atualizar-conversas { height: 44px; min-height: 44px; padding: 12px; font-size: 0; gap: 0; }
  #atualizar-conversas svg { width: 19px; height: 19px; }
  .inbox-actions-menu { display: block; }
  .inbox-actions-menu > summary { display: grid; place-items: center; list-style: none; width: 44px; height: 44px; padding: 12px; border: 1px solid var(--crm-line); border-radius: 8px; background: #fff; cursor: pointer; }
  .inbox-actions-menu > summary svg { width: 20px; height: 20px; }
  .inbox-actions-menu > summary::-webkit-details-marker { display: none; }
  .inbox-actions-menu:not([open]) .inbox-action-buttons { display: none !important; }
  .inbox-actions-menu[open] .inbox-action-buttons { position: absolute; z-index: 40; right: 0; top: 50px; width: min(240px, calc(100vw - 24px)); display: flex !important; flex-direction: column; align-items: stretch; padding: 8px; border: 1px solid var(--crm-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 35px #1c3f4526; }
  .inbox-action-buttons > button, .inbox-action-buttons > a, .inbox-action-buttons > details > summary { width: 100%; min-height: 44px; text-align: left; padding: 11px 12px; font-size: 13px; }
  #view-conversas .conversation-inbox-navigation { flex-direction: column; align-items: stretch; gap: 1px; }
  #view-conversas .conversation-box-tabs, #view-conversas .conversation-admin-filters { width: 100%; min-width: 0; flex: 0 0 auto; justify-content: flex-start; }
  #view-conversas .conversation-box-tab { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 11px; line-height: 1.3; white-space: normal; }
  #view-conversas .conversation-admin-filters button { min-height: 35px; font-size: 11px; }
  #view-conversas .conversation-shell { display: flex; height: 0; min-height: 0; flex: 1 1 0; overflow: hidden; border-radius: 10px; }
  #view-conversas .conversation-list { display: block; width: 100%; min-height: 0; height: 100%; max-height: none !important; flex: 1 1 0; border: 0; }
  #view-conversas .conversation-item { min-height: 94px; padding: 15px 14px; }
  #view-conversas .conversation-item strong { font-size: 14px; }
  #view-conversas .conversation-item small, #view-conversas .conversation-item p { font-size: 12px; }
  #view-conversas .chat-panel { display: none; width: 100%; min-height: 0; height: 100%; }
  #app .content:has(#view-conversas.is-thread-open:not(.hidden)) > .topbar { display: none; }
  #app #view-conversas.is-thread-open:not(.hidden) { padding: 0; gap: 0; }
  #view-conversas.is-thread-open > .conversation-operational-bar,
  #view-conversas.is-thread-open > .conversation-actions,
  #view-conversas.is-thread-open > .conversation-inbox-navigation { display: none; }
  #view-conversas.is-thread-open .conversation-list { display: none; }
  #view-conversas.is-thread-open .conversation-shell { border: 0; border-radius: 0; }
  #view-conversas.is-thread-open .chat-panel { display: flex; }
  #view-conversas .chat-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: auto auto; flex-direction: row; gap: 3px 8px; padding: max(12px, env(safe-area-inset-top)) 12px 10px; min-height: 82px; }
  #view-conversas .chat-back-button { display: grid; grid-column: 1; grid-row: 1 / 3; place-items: center; align-self: center; width: 40px; height: 44px; min-width: 40px; min-height: 44px; padding: 9px; background: transparent; color: #375f6c; border: 0; }
  #view-conversas .chat-back-button svg { width: 22px; height: 22px; }
  #view-conversas .chat-contact { grid-column: 2; grid-row: 1; min-width: 0; }
  #view-conversas .chat-avatar { display: none; }
  #view-conversas .chat-contact > div:last-child { width: 100%; }
  #view-conversas .chat-contact h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  #view-conversas .chat-contact p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  #view-conversas .chat-head-actions { display: contents; }
  #view-conversas .conversation-attendance-state { grid-column: 2; grid-row: 2; min-width: 0; gap: 5px; }
  #view-conversas .conversation-attendance-state strong { font-size: 10px; }
  #view-conversas .conversation-attendance-state small { display: none; }
  #view-conversas #conversa-status { display: none; }
  .chat-actions-menu { display: block; grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .chat-actions-menu > summary { display: grid; place-items: center; list-style: none; width: 40px; height: 44px; padding: 10px; border-radius: 8px; color: #49636d; cursor: pointer; }
  .chat-actions-menu > summary::-webkit-details-marker { display: none; }
  .chat-actions-menu > summary svg { width: 22px; height: 22px; }
  .chat-actions-menu[open] > summary { background: #edf4f1; }
  .chat-actions-menu:not([open]) .chat-action-buttons { display: none !important; }
  .chat-actions-menu[open] .chat-action-buttons { position: absolute; z-index: 40; top: calc(100% - 2px); right: 12px; display: flex !important; flex-direction: column; align-items: stretch; width: min(270px, calc(100vw - 24px)); max-height: min(350px, 60dvh); padding: 8px; gap: 5px; overflow: auto; border: 1px solid var(--crm-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 35px #1c3f4526; }
  .chat-action-buttons button { width: 100%; min-height: 44px; justify-content: flex-start; text-align: left; font-size: 13px; padding: 10px 12px; }
  #view-conversas .contact-report-card { max-height: 72px; padding: 8px 12px; gap: 8px; }
  #view-conversas .contact-report-card > div { min-width: 90px; }
  #view-conversas .chat-messages { padding: 16px 12px; }
  #view-conversas .chat-message { max-width: 91%; padding: 10px 12px; font-size: 14px; line-height: 1.5; border-radius: 11px; }
  #view-conversas .chat-message time { font-size: 10px; }
  #view-conversas .chat-form { padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  #view-conversas .chat-composer-main { grid-template-columns: minmax(0, 1fr) 40px 40px 44px; gap: 4px; }
  #view-conversas .chat-composer-main textarea { font-size: 16px; min-height: 44px; height: 44px; padding: 10px; }
  #view-conversas .chat-composer-main .chat-attach-button, #view-conversas .chat-composer-main .chat-record-button { width: 40px; min-width: 40px; max-width: 40px; height: 44px; min-height: 44px; padding: 9px; }
  #view-conversas .chat-composer-main #conversa-enviar { width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; padding: 11px; font-size: 0; gap: 0; }
  #view-conversas .chat-composer-main #conversa-enviar svg { width: 20px; height: 20px; flex-basis: 20px; }
  #view-conversas .conversation-composer-info { margin-top: 2px; font-size: 10px; }
  .login { min-height: var(--crm-viewport-height, 100dvh); padding: 22px; }
  .login-box { width: min(390px, 100%); padding: 28px; }
}

@media (max-width: 640px) {
  .crm-overview-aside { grid-template-columns: minmax(0, 1fr); }
  .crm-channel { margin-top: 2px; }
  .crm-section-heading { gap: 8px; flex-wrap: wrap; }
  .table-wrap:has(.crm-adaptive-table), .crm-table-scroll:has(.crm-adaptive-table) { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  #app table.crm-adaptive-table { display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; background: transparent; border: 0; }
  .crm-adaptive-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; }
  .crm-adaptive-table tbody { display: grid; gap: 12px; }
  .crm-adaptive-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: 13px 16px; padding: 16px; border: 1px solid var(--crm-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 3px #243b4608; }
  #app .crm-adaptive-table tbody td, #app .crm-adaptive-table tbody td:last-child { position: static; display: flex; flex-direction: column; gap: 5px; width: auto; min-width: 0; max-width: 100%; min-height: 0; padding: 0; background: transparent; border: 0; color: var(--crm-ink); font-size: 12px; line-height: 1.45; text-align: left; box-shadow: none; overflow-wrap: anywhere; }
  .crm-adaptive-table td::before { content: attr(data-label); display: block; color: #78909b; font-size: 10px; font-weight: 600; line-height: 1.3; }
  .crm-adaptive-table td:first-child { grid-column: 1 / -1; }
  .crm-adaptive-table td:first-child strong { font-size: 14px; }
  .crm-adaptive-table td:has(.table-actions), .crm-adaptive-table td:has(> button), .crm-adaptive-table td:has(> .button) { grid-column: 1 / -1; }
  .crm-adaptive-table .table-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 7px; }
  .crm-adaptive-table .table-actions > *, .crm-adaptive-table td > button { min-height: 40px; }
  .crm-adaptive-table tr.crm-table-spanning-row { grid-template-columns: minmax(0, 1fr); }
  .crm-adaptive-table .crm-table-spanning-row td { grid-column: 1 / -1; }
  .crm-adaptive-table .crm-table-spanning-row td::before { display: none; }
  .crm-open-record { min-width: 40px; min-height: 40px; }
  .crm-recent-list { min-height: 0; }
  .crm-type { white-space: normal; }
  .permission-grid, .checkbox-grid { grid-template-columns: minmax(0, 1fr); }
  .student-base-mapping { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-base-mapping span { min-width: 0; font-size: 11px; }
  .manual-student-lookup { grid-template-columns: minmax(0, 1fr); }
  .manual-student-lookup button { min-height: 44px; }
  .attendance-toolbar-actions { width: 100%; }
  .attendance-record-grid { grid-template-columns: minmax(0, 1fr); }
  .attendance-record-actions { display: flex; gap: 8px; }
  .attendance-record-actions > * { flex: 1 1 130px; min-height: 42px; }
  .justifications-dashboard-metric strong { font-size: 22px; }
  .justifications-dashboard-header { gap: 10px; }
  .justifications-dashboard-header h3 { font-size: 15px; }
  .documents-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .documents-filters input, .documents-filters select, .documents-toolbar button { width: 100%; }
}

@media (max-width: 370px) {
  #app .view { padding-inline: 12px; }
  .crm-overview-actions { flex-direction: column; }
  .stat { padding: 14px 11px; }
  .stat span { font-size: 11px; }
  .stat-icon { right: 9px; }
  #view-conversas .conversation-live-status > span:nth-child(3) { display: none; }
  #view-conversas .conversation-actions > button, #view-conversas .conversation-actions > a, #view-conversas .conversation-tools > summary { font-size: 10px; }
  #view-conversas .contact-report-card { max-height: 58px; }
}
@media (max-width: 840px) and (max-height: 500px) {
  #view-conversas .contact-report-card { display: none; }
  #view-conversas .chat-head { min-height: 65px; padding-block: 6px; }
  #view-conversas .conversation-composer-info { display: none; }
  #view-conversas .chat-form { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@supports (field-sizing: content) {
  #view-conversas .chat-composer-main textarea { field-sizing: content; height: auto; }
}

/* Account actions share the same accessible modal behavior as the rest of the CRM. */
#app button.crm-user { display:flex; align-items:center; gap:12px; min-height:44px; padding:4px 10px 4px 18px; border:0; border-left:1px solid var(--crm-line); border-radius:8px; background:transparent; color:var(--crm-ink); text-align:left; box-shadow:none; }
#app button.crm-user:hover { background:#f1f6f4; }
#app button.crm-user > svg { width:15px; height:15px; color:var(--crm-muted); }
.account-modal { --modal-width:520px; }
.account-modal .modal-body { gap:8px; }
.account-modal .modal-body label { font-size:12px; color:var(--crm-muted); margin-top:5px; }
.account-modal .modal-actions { padding:12px 0 0; }
.account-modal [hidden] { display:none !important; }
.school-logo,.login-logo { background:transparent !important; object-fit:contain; }
@media(max-width:840px) {
 #app button.crm-user { margin-left:auto; max-width:44px; min-width:44px; width:44px; height:44px; padding:4px; justify-content:center; border:0; }
 #app button.crm-user > div,#app button.crm-user > svg { display:none; }
}