/* ============================================================= * screens/sidebar.css * Extraído automaticamente de index.php. * NÃO editar manualmente até remover o script de split. * ============================================================= */ /* ── SIDEBAR ── */ #panel-contacts { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; height: 100%; position: relative; --sb-rail-w: 64px; } /* Coluna lista + vistas (à direita do rail em desktop ≥768px) */ .sb-main-column { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; } /* Barra vertical de atalhos (só desktop) */ .sb-rail-desktop { display: none; flex-direction: column; flex-shrink: 0; width: var(--sb-rail-w); background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; } .sb-rail-inner { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 10px 0 16px; gap: 6px; } .sb-rail-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; flex-shrink: 0; } .sb-rail-nav--conta { padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--border); } /* Atualização manual do .exe: só visível no cliente Electron (electron_shell.js põe zori-electron-shell no ). PWA/browser não devem revelar mesmo se alguém remover d-none por engano. */ html:not(.zori-electron-shell) .sb-zori-electron-only { display: none !important; } /* Bolinha nova versão (.exe Electron) — activada por JS quando remote > instalada */ .sb-zori-update-entry { position: relative; } html.zori-electron-shell .sb-zori-update-entry.sb-zori-update-badge--on::after { content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; background: #dc2626; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface, #ffffff); pointer-events: none; z-index: 4; } html.zori-electron-shell .sb-bottom-nav-mais-item.sb-zori-update-entry.sb-zori-update-badge--on::after { top: 6px; right: 10px; } .sb-rail-spacer { flex: 1 1 auto; min-height: 24px; } .sb-rail-ic-svg { width: 22px; height: 22px; display: block; flex-shrink: 0; } .sb-rail-ic-img { width: 22px; height: 22px; display: block; flex-shrink: 0; object-fit: contain; pointer-events: none; } /* PNG costuma ter padding interno à arte: escala até equiparar ao peso visual dos SVG ~24×24 no viewBox. */ .sb-rail-desktop .sb-rail-ic-img--novo-grupo { width: 30px; height: 30px; } .sb-rail-mini-divider { width: 38px; height: 1px; background: var(--border); flex-shrink: 0; margin: 2px 0 4px; } .sb-rail-mode-btn { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-2); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; -webkit-tap-highlight-color: transparent; } .sb-rail-mode-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .sb-rail-mode-btn.is-active { color: var(--accent); background: var(--accent-soft); border-color: #c7d2fe; } .sb-rail-mode-lbl { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: inherit; } #panel-contacts.sidebar-mod-contatos #sidebar-folder-bar { display: none !important; } @media (min-width: 768px) { #panel-contacts { flex-direction: row; } .sb-rail-desktop { display: flex; } } .sb-header { height: var(--header); padding: 0 12px 0 14px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; border-bottom: 1px solid var(--border); } /* Perfil no canto direito — só telefone (desktop usa rail); mesmo traço do ícone rail */ .sb-header-perfil-acao { display: none; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sb-header-perfil-svg { width: 22px; height: 22px; display: block; flex-shrink: 0; } .sb-header-perfil-acao:active { background: var(--surface-2); color: var(--text); border-color: var(--border); } .sb-header-perfil-acao.is-active { color: var(--accent); background: var(--accent-soft); border-color: #c7d2fe; } .sb-brand { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; font-size: 16px; font-weight: 900; letter-spacing: -.02em; } .sb-brand-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-brand-icon { width: 32px; height: 32px; border-radius: 9px; background: transparent; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--accent-glow); flex-shrink: 0; overflow: hidden; } .sb-brand-icon img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; transform: scale(1.2); transform-origin: 50% 50%; border-radius: 0; } .sb-brand-icon svg { display: block; } /* Mobile: atalhos no rodapé (ícones = SVG do rail desktop; mais baixo que a barra antiga só emoji) */ .sb-bottom-nav { display: none; flex-shrink: 0; flex-direction: row; align-items: center; justify-content: space-around; gap: 0; min-height: calc(56px + var(--zori-safe-bottom)); padding: 4px 4px calc(5px + var(--zori-safe-bottom)); border-top: 1px solid var(--border); background: var(--panel); box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.07); box-sizing: border-box; } .sb-bottom-nav-item { flex: 1; min-width: 0; max-width: none; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 2px; border: none; border-radius: 10px; background: transparent; font: inherit; cursor: pointer; color: var(--text-2); -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, background 0.15s ease; } .sb-bottom-nav-item:active { background: var(--surface-2); } .sb-bottom-nav-ic { display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0; flex-shrink: 0; } .sb-bottom-nav-svg { width: 22px; height: 22px; display: block; flex-shrink: 0; color: inherit; } .sb-bottom-nav-ic--png { display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0; } .sb-bottom-nav-img { width: 22px; height: 22px; object-fit: contain; pointer-events: none; display: block; } .sb-bottom-nav-img--novo-grupo { width: 28px; height: 28px; } .sb-bottom-nav-item:active .sb-bottom-nav-img { opacity: 0.92; } .sb-bottom-nav-item.is-active .sb-bottom-nav-img { opacity: 1; } .sb-bottom-nav-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-bottom-nav-item.is-active { color: var(--accent); } .sb-bottom-nav-item.is-active .sb-bottom-nav-lbl { color: var(--accent); } .sb-bottom-nav-more-wrap { flex: 1; min-width: 0; position: relative; display: flex; align-items: stretch; justify-content: center; } .sb-bottom-nav-more-wrap .sb-bottom-nav-item--mais { flex: 1; max-width: none; margin: 0; } .sb-bottom-nav-mais-menu { position: absolute; bottom: calc(100% + 8px); right: max(2px, var(--zori-safe-right)); left: auto; min-width: min(216px, calc(100vw - 20px)); padding: 6px; margin: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 -6px 28px rgba(15, 23, 42, 0.12); z-index: 60; box-sizing: border-box; list-style: none; } .sb-bottom-nav-mais-item { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 11px 12px; border: none; border-radius: 10px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; } .sb-bottom-nav-mais-item:active { background: var(--surface-2); } a.sb-bottom-nav-mais-item { text-decoration: none; color: inherit; box-sizing: border-box; } .sb-bottom-nav-mais-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); } .sb-bottom-nav-mais-ic .sb-bottom-nav-svg { width: 20px; height: 20px; } .sb-bottom-nav-mais-txt { flex: 1; min-width: 0; } @media (max-width: 767px) { .sb-bottom-nav { display: flex; } .sb-debug-log { bottom: calc(76px + var(--zori-safe-bottom)); } .sidebar-footer-bar .sidebar-footer-version { padding: 4px 10px max(8px, var(--zori-safe-bottom)); font-size: 10px; } .sb-header-perfil-acao { display: inline-flex; } /* Lista de conversas: mesmo critério do cabeçalho do chat (responsive.css). Em WebView Android, safe-area costuma vir 0; o nativo faz encaixe — aqui cobre PWAs/notch onde o inset existe. */ .sb-header { padding-top: var(--zori-safe-top); box-sizing: border-box; height: calc(var(--header) + var(--zori-safe-top)); } } .btn-icon-sm { width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border); color: var(--text-3); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .btn-icon-sm:hover { background: var(--red-soft); color: var(--red); border-color: #fca5a5; } .btn-icon-sm.notif-on { color: var(--accent); background: var(--accent-soft); border-color: #c7d2fe; } /* Depois de .btn-icon-sm: ícones do rail desktop (override borda/chão) */ .sb-rail-desktop .sb-acao-rail.btn-icon-sm { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; line-height: 1; border-color: transparent; background: transparent; color: var(--text-2); } .sb-rail-desktop .sb-acao-rail.btn-icon-sm:hover, .sb-rail-desktop .sb-acao-rail.btn-icon-sm:focus-visible { background: var(--surface-2); color: var(--text); border-color: var(--border); } .sb-rail-desktop .sb-acao-rail.btn-icon-sm.is-active { color: var(--accent); background: var(--accent-soft); border-color: #c7d2fe; } /* Link «API» no rail: mesmo aspecto que