/* ============================================================ Sutile — interface do assistente juridico trabalhista ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Public+Sans:ital,wght@0,300..700;1,300..700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* ---------------------------------------------------------- CSS Custom Properties (Design Tokens) ---------------------------------------------------------- */ :root { color-scheme: light; /* Primary Colors — navy, single strong brand hue */ --color-primary: oklch(38% 0.09 255); --color-primary-hover: oklch(31% 0.09 255); --color-primary-light: oklch(93% 0.025 255); --color-primary-dark: oklch(24% 0.05 255); /* Accent — amber-ochre for human moments */ --color-accent: oklch(66% 0.16 60); --color-accent-hover: oklch(60% 0.16 60); --color-accent-light: oklch(96% 0.04 62); /* Semantic Colors */ --color-danger: oklch(46% 0.16 22); --color-danger-hover: oklch(38% 0.16 22); --color-danger-light: oklch(97% 0.015 22); --color-danger-bg: oklch(91% 0.04 22); --color-warning: oklch(65% 0.12 65); --color-warning-hover: oklch(55% 0.12 65); --color-warning-light: oklch(97% 0.02 75); --color-warning-bg: oklch(93% 0.05 65); --color-success: oklch(52% 0.13 162); --color-success-hover: oklch(43% 0.13 162); --color-success-light: oklch(96% 0.025 162); --color-success-bg: oklch(88% 0.06 162); --color-info: oklch(50% 0.1 250); --color-info-light: oklch(96% 0.02 250); --color-info-bg: oklch(89% 0.05 250); /* Neutral Colors — crisp white cards, near-neutral gray surfaces */ --color-bg: oklch(96.5% 0.002 90); --color-card: oklch(100% 0 0); --color-text: oklch(16% 0.004 90); --color-text-secondary: oklch(36% 0.004 90); --color-muted: oklch(47% 0.004 90); --color-placeholder: oklch(65% 0.004 90); --color-border: oklch(83% 0.004 90); --color-border-light: oklch(89% 0.003 90); /* Alias tokens — mapped to semantic equivalents */ --color-bg-primary: var(--color-card); --color-bg-secondary: oklch(93% 0.003 90); --color-bg-subtle: oklch(98% 0.002 90); --color-text-muted: var(--color-muted); --radius: var(--radius-md); /* Inline-style fallback aliases. These names are referenced as var(--name, #hardcoded) in index.html's inline styles; left undefined they always resolved to the light-mode hex fallback, so dark mode got white inputs, light boxes, and fixed-hue status text. Mapping them to the themed --color-* tokens makes those inline styles theme-aware (the right-hand tokens are redefined under [data-theme="dark"]). */ --color-bg-input: var(--color-card); --color-error: var(--color-danger); --border: var(--color-border); --danger: var(--color-danger); --success: var(--color-success); --surface-muted: var(--color-bg-subtle); /* Surface alias (was referenced but undefined → broke .peticao-streaming-preview bg) */ --color-surface: var(--color-card); /* Disabled states (de-hardcode #c4b8ac / #f0ece8) */ --color-disabled-bg: oklch(80% 0.012 75); --color-disabled-fg: oklch(94% 0.008 75); /* Shadows — manual: "fios, não sombras". Superfícies em repouso são planas (sm = none; os cartões já têm borda 1px). md/lg/xl seguem reais para o que flutua de verdade: hover lift, botão flutuante, dropdowns e modais. */ --shadow-sm: none; --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Border Radius */ /* Raio arredondado por decisão do escritório — o "máx 2px" do manual ficou agressivo demais em app; fios/sem-sombra foram mantidos. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Typography */ --font-family: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', 'Roboto Mono', monospace; /* Type scale — base 19.5px: 2xs≈11px, xs≈14.6px, sm≈17px, base≈19.5px, lg≈22px, xl≈24.4px, 2xl≈29.3px, 3xl≈35.2px */ --font-size-2xs: 0.575rem; /* micro-labels, badges */ --font-size-xs: 0.75rem; /* captions, section headers, timestamps */ --font-size-sm: 0.875rem; /* secondary body, sidebar items, form hints */ --font-size-base: 1rem; /* primary body, form inputs */ --font-size-lg: 1.125rem; /* emphasized body, panel titles */ --font-size-xl: 1.25rem; /* subheadings */ --font-size-2xl: 1.5rem; /* headings */ --font-size-3xl: 1.8rem; /* display headings */ /* Line heights — semantic roles */ --lh-tight: 1.15; /* display headings */ --lh-snug: 1.3; /* subheadings, compact UI */ --lh-base: 1.6; /* UI body, labels */ --lh-relaxed: 1.72; /* transcript entries, form content */ --lh-loose: 1.85; /* petição/document reading */ /* Letter spacing */ --tracking-tight: -0.015em; /* display headings */ --tracking-normal: 0; --tracking-wide: 0.04em; /* small caps, section labels */ --tracking-wider: 0.08em; /* badge labels */ /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* Layout */ --header-height: 64px; --max-width: 1600px; --sidebar-width: 240px; --sidebar-collapsed-width: 56px; /* Transitions */ --transition-fast: 200ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-soft: cubic-bezier(0.45, 0, 0.2, 1); } /* ---------------------------------------------------------- Dark theme — "law library": aged ink + oxblood on deep slate ---------------------------------------------------------- */ [data-theme="dark"] { --color-primary: oklch(72% 0.05 255); --color-primary-hover: oklch(80% 0.05 255); --color-primary-light: oklch(34% 0.04 255); --color-primary-dark: oklch(88% 0.03 255); --color-accent: oklch(74% 0.15 57); --color-accent-hover: oklch(80% 0.15 57); --color-accent-light: oklch(34% 0.06 57); --color-bg: oklch(20% 0.012 260); --color-card: oklch(24% 0.014 260); --color-surface: var(--color-card); color-scheme: dark; /* theme native controls: select popups, scrollbars, date pickers */ --color-text: oklch(93% 0.01 75); --color-text-secondary: oklch(82% 0.012 75); /* warm ink hue (75) to match the rest of the text ramp, not cool slate (260); kept bright for legible secondary copy on dark surfaces */ --color-muted: oklch(70% 0.012 75); /* lifted from 52% → placeholders were 2.98:1 on inputs (need 4.5:1) */ --color-placeholder: oklch(63% 0.013 75); --color-border: oklch(31% 0.012 260); --color-border-light: oklch(27% 0.012 260); --color-bg-secondary: oklch(28% 0.014 260); --color-bg-subtle: oklch(26% 0.013 260); --color-danger: oklch(64% 0.16 22); --color-danger-bg: oklch(34% 0.07 22); --color-warning: oklch(74% 0.12 65); --color-warning-bg: oklch(34% 0.06 65); --color-success: oklch(68% 0.13 162); --color-success-bg: oklch(32% 0.07 162); --color-info: oklch(68% 0.1 250); --color-info-bg: oklch(32% 0.06 250); --color-disabled-bg: oklch(34% 0.012 260); --color-disabled-fg: oklch(62% 0.01 260); /* was 48% → disabled labels (e.g. "Entrar") read gray-on-gray */ --color-danger-light: oklch(32% 0.07 22); --color-warning-light: oklch(34% 0.07 65); --color-success-light: oklch(32% 0.07 162); --color-info-light: oklch(32% 0.06 250); --color-danger-hover: oklch(72% 0.16 22); --color-warning-hover: oklch(82% 0.12 65); --color-success-hover: oklch(76% 0.13 162); } /* ---------------------------------------------------------- Dark-mode glass surfaces. These "frosted" components bake light-parchment rgba() fills (cream / white) and white inset highlights into their base rules, with no dark variant — so in dark mode they rendered as light films or near-white pills, often with near-invisible light text on top. Each override swaps the fill for a dark translucent surface and neutralizes the white inset highlight. Additive (dark-only); light mode is untouched. ---------------------------------------------------------- */ [data-theme="dark"] .proposal-topbar { background: color-mix(in oklch, var(--color-card) 72%, transparent); border-bottom-color: color-mix(in srgb, var(--color-accent) 18%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .proposal-controls-bar { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%), color-mix(in oklch, var(--color-card) 55%, transparent); border-bottom-color: color-mix(in srgb, var(--color-accent) 16%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.3); } /* Query bar + composers */ [data-theme="dark"] .sutile-query { background: color-mix(in oklch, var(--color-card) 70%, transparent); } [data-theme="dark"] .sutile-query--composer { border-color: var(--color-border); background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%), color-mix(in oklch, var(--color-card) 88%, transparent); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .sutile-query--main-composer { border-top-color: color-mix(in srgb, var(--color-accent) 32%, transparent); background: linear-gradient(180deg, color-mix(in oklch, var(--color-accent) 12%, transparent) 0%, transparent 100%), color-mix(in oklch, var(--color-card) 88%, transparent); } [data-theme="dark"] .sutile-query--sidebar-composer { border-top-color: color-mix(in srgb, var(--color-primary) 36%, transparent); background: linear-gradient(180deg, color-mix(in oklch, var(--color-primary) 14%, transparent) 0%, transparent 100%), color-mix(in oklch, var(--color-card) 88%, transparent); } [data-theme="dark"] .sutile-query__label { color: var(--color-accent); } /* Active-call pill, its rail, and the session-controls pill */ [data-theme="dark"] .proposal-active-call { background: linear-gradient(180deg, color-mix(in oklch, var(--color-card) 60%, transparent) 0%, color-mix(in oklch, var(--color-card) 48%, transparent) 100%); border-color: color-mix(in srgb, var(--color-accent) 24%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .proposal-active-call__rail { background: var(--color-bg-secondary); border-color: var(--color-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .proposal-session-controls { background: color-mix(in oklch, var(--color-card) 55%, transparent); border-color: var(--color-border); } /* Toggle track sits on bg-secondary; the globally-darkened border vanished against it. Give just these toggles a brighter edge so the control reads. */ [data-theme="dark"] .proposal-view-toggle { border-color: oklch(45% 0.014 260); } /* Opt-in dark-mode logo inversion (office_settings.brand_logo_invert_dark). The modifier class is bound on every brand-mark but only bites in dark mode. invert(1) flips light<->dark; hue-rotate(180deg) cancels the hue shift invert() would otherwise impose, so colour logos keep roughly their hue. Inert in light mode (no matching selector). Suits dark/mono marks; that's why it's opt-in per office. */ [data-theme="dark"] .logo--invert-dark { filter: invert(1) hue-rotate(180deg); } /* App-wide frosted surfaces (login, toasts, welcome, editor + modal buttons) */ [data-theme="dark"] .login-card { background: color-mix(in oklch, var(--color-card) 82%, transparent); border-color: var(--color-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* The overlay gradient is built from --color-primary*/--color-accent, which are LIGHT tokens in dark mode → a pastel blue→orange wash that fights the dark card. Replace with a deep brand-tinted backdrop. */ [data-theme="dark"] .login-overlay { background: linear-gradient(135deg, oklch(26% 0.05 255) 0%, oklch(17% 0.02 260) 55%, oklch(24% 0.07 57) 100%); } [data-theme="dark"] .toast { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%), color-mix(in oklch, var(--color-bg-secondary) 92%, transparent); border-color: var(--color-border); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .flow-welcome__inner { border-color: var(--color-border); background: var(--color-card); } [data-theme="dark"] .sidebar-editor-float-btn { background: var(--color-bg-secondary); } [data-theme="dark"] .approval-modal__close { background: var(--color-bg-secondary); } [data-theme="dark"] .editor-toolbar-btn { background: var(--color-bg-secondary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .resumo-regenerate-fab { background: var(--color-bg-secondary); } /* Primary buttons (Gerar / Analisar / Enviar). --color-primary is light in dark mode because it doubles as link/text color; as a button fill that reads too bright and the amber glow shouts. Give the fill a calm mid-navy and a quiet shadow so primary actions sit on the surface, not above it. */ [data-theme="dark"] .btn--primary, [data-theme="dark"] .proposal-btn--primary { background-color: oklch(48% 0.09 255); color: oklch(96% 0.01 255); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .btn--primary:hover:not(:disabled), [data-theme="dark"] .proposal-btn--primary:hover:not(:disabled) { background-color: oklch(54% 0.1 255); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } /* Recording state re-sets a cream fill + pulses a white inset highlight via the topbar-listen keyframe; both need dark equivalents (the keyframe is swapped by name so the bright-white pulse never fires in dark). */ [data-theme="dark"] .proposal-topbar.is-recording { background: radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 60%), color-mix(in oklch, var(--color-card) 72%, transparent); animation-name: topbar-listen-dark; } @keyframes topbar-listen-dark { 0%, 100% { box-shadow: inset 0 0 0 rgba(0,0,0,0), inset 0 1px 0 rgba(255,255,255,0.05); } 50% { box-shadow: inset 0 -2px 22px color-mix(in srgb, var(--color-accent) 14%, transparent), inset 0 1px 0 rgba(255,255,255,0.05); } } /* Grain reads as light specks on parchment; soften on dark */ [data-theme="dark"] body::before { opacity: 0.05; } /* ---------------------------------------------------------- Reset & Base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { --ui-zoom: 0.9; /* default density ≈ 90% browser zoom (see body { zoom }) */ font-size: 19.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* kill the rubber-band bounce / overscroll glow at the page boundary */ overscroll-behavior: none; } body { /* Default the UI to the equivalent of 90% browser zoom. `zoom` scales the whole layout (px + rem alike), unlike a root font-size tweak which would leave px-based widths untouched. JS breakpoints (innerWidth) are unaffected, so responsive behaviour is unchanged. Viewport-height anchors below are divided by --ui-zoom so they still fill the screen after scaling (otherwise the page ends ~10vh short -> blank footer). */ zoom: var(--ui-zoom); font-family: var(--font-family); background-color: var(--color-bg); color: var(--color-text); line-height: var(--lh-base); min-height: calc(100vh / var(--ui-zoom)); overflow-y: hidden; overscroll-behavior: none; font-kerning: normal; font-feature-settings: 'kern' 1, 'liga' 1; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } /* Typography hierarchy — Newsreader for display/headings, Public Sans for body. Manual da marca: títulos em 400–500 (nunca bold pesado); opsz alto em display vem da própria variável (font-optical-sizing: auto é o default). */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); font-kerning: normal; font-feature-settings: 'kern' 1, 'liga' 1; } /* Fixed scale for app UI — no fluid clamp (that's for marketing pages) */ h1 { font-size: var(--font-size-3xl); line-height: var(--lh-tight); } h2 { font-size: var(--font-size-2xl); line-height: var(--lh-tight); } h3 { font-size: var(--font-size-xl); line-height: var(--lh-snug); } h4 { font-size: var(--font-size-lg); line-height: var(--lh-snug); font-weight: 500; } /* Grain texture overlay — adds organic warmth to the flat background */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } .app-root { height: calc(100vh / var(--ui-zoom)); display: flex; flex-direction: column; align-items: stretch; } /* ---------------------------------------------------------- App with Sidebar (authenticated layout) ---------------------------------------------------------- */ .app-with-sidebar { display: flex; flex: 1; min-height: 0; overflow: hidden; } .app-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* ---------------------------------------------------------- SIDEBAR (Collapsible) ---------------------------------------------------------- */ .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background: linear-gradient(180deg, var(--color-card) 0%, var(--color-bg-subtle) 100%); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; transition: width var(--transition-base), min-width var(--transition-base); flex-shrink: 0; overflow: hidden; } .sidebar--collapsed { width: var(--sidebar-collapsed-width); min-width: var(--sidebar-collapsed-width); } .sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .sidebar--collapsed .sidebar__header { justify-content: center; } .sidebar__collapse-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: var(--color-border-light); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .sidebar__collapse-btn:hover { background: var(--color-border); color: var(--color-text); } .sidebar__collapse-btn svg { width: 18px; height: 18px; transition: transform var(--transition-base); } .sidebar--collapsed .sidebar__collapse-btn svg { transform: rotate(180deg); } .sidebar__user { display: flex; flex-direction: column; gap: var(--space-1); overflow: hidden; flex: 1; min-width: 0; } .sidebar--collapsed .sidebar__user { display: none; } .sidebar__username { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__logout { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--font-size-xs); color: var(--color-danger); background: none; border: none; cursor: pointer; font-family: var(--font-family); transition: color var(--transition-fast); } .sidebar__logout:hover { color: var(--color-danger-hover); text-decoration: underline; } .sidebar__section { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; } .sidebar--collapsed .sidebar__section { padding: var(--space-3); } .sidebar__section-title { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); } .sidebar--collapsed .sidebar__section-title { display: none; } .sidebar__history { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .sidebar__history-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; } .sidebar--collapsed .sidebar__history-header { justify-content: center; padding: var(--space-3); } .sidebar__history-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); } .sidebar--collapsed .sidebar__history-title { display: none; } .sidebar__history-body { flex: 1; overflow-y: auto; padding: var(--space-2); } .sidebar--collapsed .sidebar__history-body { display: none; } .sidebar__history-item { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-1); cursor: pointer; border: 1px solid transparent; transition: all var(--transition-fast); font-size: var(--font-size-xs); } .sidebar__history-item:hover { background: var(--color-border-light); border-color: var(--color-border); transform: translateX(2px); box-shadow: var(--shadow-sm); } .sidebar__history-item--active { background: var(--color-primary-light); border-color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-accent); } .sidebar__history-date { font-weight: 500; color: var(--color-muted); } .sidebar__history-preview { margin-top: 2px; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .sidebar__nova-entrevista { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; } .sidebar__nova-entrevista-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; padding: var(--space-3); background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 30%, transparent); transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .sidebar__nova-entrevista-btn:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-1px); } .sidebar__nova-entrevista-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 4px color-mix(in srgb, var(--color-accent) 35%, transparent); } .sidebar__nova-entrevista-btn:disabled { opacity: 0.55; cursor: not-allowed; } .sidebar__nova-entrevista-btn svg { flex-shrink: 0; display: block; line-height: 1; } .sidebar__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-2); } .sidebar--collapsed .sidebar__footer { padding: var(--space-3); display: flex; flex-direction: row; justify-content: center; gap: var(--space-2); } .sidebar__settings-btn { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-family: var(--font-family); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .sidebar__settings-btn:hover { background: var(--color-border-light); border-color: var(--color-muted); color: var(--color-text); } .sidebar--collapsed .sidebar__settings-btn { width: 36px; padding: var(--space-2); justify-content: center; } .sidebar--collapsed .sidebar__settings-btn span { display: none; } /* Icons shown when sidebar collapsed (toolbar-style) */ .sidebar__icon-only { display: none; } .sidebar--collapsed .sidebar__icon-only { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: var(--color-border-light); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); margin-bottom: var(--space-2); } .sidebar--collapsed .sidebar__icon-only:hover { background: var(--color-border); color: var(--color-primary); } .sidebar--collapsed .sidebar__icon-only svg { width: 18px; height: 18px; } .qr-modal__code-wrapper { display: flex; justify-content: center; align-items: center; padding: var(--space-4); background: var(--color-bg-subtle); border-radius: var(--radius-lg); margin-bottom: var(--space-3); } .qr-modal__code-wrapper #qr-code-container { width: 220px; height: 220px; } .qr-modal__hint { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: var(--space-3); } /* ---------------------------------------------------------- Custom Scrollbar (WebKit) ---------------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-muted); } /* ---------------------------------------------------------- Text selection & form accents — warm, on-palette ---------------------------------------------------------- */ ::selection { background: color-mix(in srgb, var(--color-accent) 28%, transparent); /* amber-ochre accent, translucent */ color: var(--color-primary-dark); } :root { accent-color: var(--color-primary); /* native checkbox/radio/range */ } /* ---------------------------------------------------------- Keyboard focus ring — branded, keyboard-only (:focus-visible). Inputs keep their own :focus box-shadow (higher specificity wins), so this only fills the gap for buttons/links/etc. ---------------------------------------------------------- */ button:focus-visible, a:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------------------------------------------------------- Utility: Icons ---------------------------------------------------------- */ .icon-sm { width: 18px; height: 18px; flex-shrink: 0; } .icon-xs { width: 14px; height: 14px; flex-shrink: 0; } /* ---------------------------------------------------------- Status Dot ---------------------------------------------------------- */ .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; transition: background-color var(--transition-base); } .status-dot--connected { background-color: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-bg); } .status-dot--disconnected { background-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); } .status-dot--recording { background-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); animation: pulse 1.5s ease-in-out infinite; } .status-dot--processing { background-color: var(--color-warning); box-shadow: 0 0 0 3px var(--color-warning-bg); animation: pulse 0.75s ease-in-out infinite; } .status-label { color: var(--color-muted); } /* ---------------------------------------------------------- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-base); white-space: nowrap; line-height: 1.5; } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn--visual-disabled { opacity: 0.5; cursor: not-allowed; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn--success { background-color: var(--color-success); color: white; } .btn--success:hover:not(:disabled) { background-color: var(--color-success-hover); } .btn--danger { background-color: var(--color-danger); color: white; } .btn--danger:hover:not(:disabled) { background-color: var(--color-danger-hover); } .btn--warning { background-color: var(--color-warning); color: var(--color-text); } .btn--warning:hover:not(:disabled) { background-color: var(--color-warning-hover); color: var(--color-text); } .btn--outline { background-color: transparent; color: var(--color-text-secondary); border-color: var(--color-border); } .btn--outline:hover:not(:disabled) { background-color: var(--color-border-light); border-color: var(--color-muted); } .btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); } .spinner--btn { width: 8px; height: 8px; border-width: 2px; } .attachment-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; } /* ---------------------------------------------------------- Flow screens (welcome, configuring) ---------------------------------------------------------- */ .flow-welcome { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-8); } .proposal-layout-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; } .proposal-layout-overlay--pass-through .flow-welcome__inner, .proposal-layout-overlay .flow-config__card { pointer-events: auto; } /* fio 1px, sem gradiente/sombra (manual) — raio arredondado por preferência */ .flow-welcome__inner { text-align: center; color: var(--color-text-secondary); max-width: 42rem; padding: clamp(1.5rem, 2vw, 2.5rem); border-radius: 28px; border: 1px solid var(--color-border); background: var(--color-card); animation: flow-welcome-settle 420ms var(--ease-out-soft); } .flow-welcome__icon { width: 64px; height: 64px; margin: 0 auto var(--space-4); color: var(--color-primary); opacity: 0.6; } .flow-welcome__eyebrow { margin-bottom: var(--space-2); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary) 64%, white); } .flow-welcome__title { margin-bottom: var(--space-3); font-family: var(--font-display); font-size: clamp(2rem, 2vw + 1.4rem, 2.7rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--color-text); text-wrap: balance; } /* ponto final na cor de destaque (manual: títulos importantes terminam com ponto — o grafismo-assinatura da marca) */ .flow-welcome__title::after { content: '.'; color: var(--color-accent); } .flow-welcome__text { font-size: var(--font-size-lg); margin-bottom: var(--space-4); max-width: 34rem; margin-inline: auto; line-height: 1.65; text-wrap: pretty; } .flow-welcome__btn { margin-top: var(--space-2); } .flow-welcome__actions { display: flex; gap: 0.75rem; align-items: center; justify-content: center; flex-wrap: wrap; } .flow-welcome__note { margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); } .legal-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; padding: var(--space-2); text-align: center; font-size: var(--font-size-xs); pointer-events: none; } .legal-footer a { color: var(--color-text-muted); text-decoration: none; pointer-events: auto; } .legal-footer a:hover { text-decoration: underline; } .help-lgpd__doc-link { margin-top: var(--space-3); font-size: var(--font-size-sm); font-weight: 600; } .flow-config { display: flex; align-items: center; justify-content: center; padding: var(--space-6); width: 100%; max-width: 100%; } .flow-config__card { max-width: 520px; width: 100%; } .flow-config__actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } /* ---------------------------------------------------------- MAIN LAYOUT & GRID (Resizable Layout) ---------------------------------------------------------- */ .main-layout { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .main-grid { display: flex; flex: 1 1 auto; align-items: stretch; gap: var(--space-6); padding: var(--space-6); max-width: 100%; margin: 0; overflow: hidden; } .main-grid__resizer { flex: 0 0 6px; cursor: col-resize; background: var(--color-border); border-radius: var(--radius-full); align-self: stretch; transition: background-color var(--transition-fast); } .main-grid__resizer:hover { background: var(--color-muted); } /* ---------------------------------------------------------- Viewing Banner ---------------------------------------------------------- */ .viewing-banner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); color: white; border-bottom: 1px solid oklch(100% 0 0 / 0.15); box-shadow: var(--shadow-sm); } .viewing-banner--active { background: linear-gradient(135deg, var(--color-success-hover) 0%, var(--color-success) 100%); } .viewing-banner__content { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-base); } .viewing-banner__content svg { width: 20px; height: 20px; flex-shrink: 0; } .viewing-banner .btn { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); color: white; } .viewing-banner .btn:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); } /* Faixa de processamento apos encerrar entrevista */ /* HPI / Transcrição view toggle */ .hpi-view-toggle { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-6); background: var(--color-border-light); border-bottom: 1px solid var(--color-border); } .hpi-view-toggle .btn { font-size: var(--font-size-sm); } /* Documentos quick actions na tela HPI */ .documentos-quick-actions__grid { display: flex; flex-wrap: wrap; gap: var(--space-2); } .documentos-quick-actions__btn { white-space: nowrap; } /* ---------------------------------------------------------- Panels (Cards) ---------------------------------------------------------- */ .panel { background: var(--color-card); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; max-height: none; height: 100%; min-height: 0; overflow: hidden; } .panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-border-light); flex-shrink: 0; } .panel__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); } .panel__title .icon-sm { color: var(--color-primary); } .panel__actions { display: flex; align-items: center; gap: var(--space-2); } .panel__processing-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 500; color: var(--color-warning); margin-left: var(--space-2); white-space: nowrap; } .spinner--inline { width: 14px; height: 14px; border-width: 2px; flex-shrink: 0; } .panel__body { flex: 1; overflow-y: auto; padding: var(--space-6); transition: opacity var(--transition-base); } .panel__body--updating { animation: content-update 0.6s ease; } /* ---------------------------------------------------------- Empty State ---------------------------------------------------------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-muted); } .empty-state__icon { width: 48px; height: 48px; margin-bottom: var(--space-4); opacity: 0.4; } .empty-state p { font-size: var(--font-size-sm); max-width: 280px; line-height: 1.6; } .empty-state--inline { padding: var(--space-6) var(--space-4); flex-direction: row; gap: var(--space-3); } .empty-state--inline p { max-width: none; } .empty-state--minimal { padding: var(--space-6) var(--space-4); gap: var(--space-3); } .empty-state--minimal p { font-size: var(--font-size-xs); color: var(--color-muted); max-width: 360px; line-height: 1.5; margin: 0; } .hipoteses-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .hipoteses-list li { position: relative; padding-left: var(--space-5); font-size: var(--font-size-base); line-height: 1.6; } .hipoteses-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-primary); } /* Anexos grid (session attachments) */ .anexos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); } .anexo-card { cursor: pointer; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .anexo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .anexo-thumbnail { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-sm); } .anexo-thumbnail--placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-border-light); color: var(--color-muted); font-size: var(--font-size-xs); } .anexo-info { display: flex; flex-direction: column; margin-top: var(--space-2); font-size: var(--font-size-sm); } .anexo-filename { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anexo-type { color: var(--color-text-secondary); text-transform: capitalize; } /* ---------------------------------------------------------- CDS Sections ---------------------------------------------------------- */ .sutile-panel-section { margin-bottom: var(--space-6); } .sutile-panel-section:last-child { margin-bottom: 0; } .sutile-panel-section__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); } .sutile-panel-section__title .icon-sm { color: var(--color-primary); } .sutile-panel-section__title--warning { color: var(--color-warning); } .sutile-panel-section__title--warning .icon-sm { color: var(--color-warning); } /* Resposta (CDS) — optional, shown at top when doctor asked a question */ .sutile-panel-section--resposta { margin-bottom: var(--space-6); } .sutile-resposta__content { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--lh-relaxed); white-space: pre-wrap; padding: var(--space-3) var(--space-4); background: var(--color-info-light); border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); } .sutile-analise-imagem__content { background: var(--color-bg); border-color: color-mix(in srgb, var(--color-text-secondary) 20%, transparent); } /* ---------------------------------------------------------- Alerta Cards (CDS) ---------------------------------------------------------- */ .alertas-list { display: flex; flex-direction: column; gap: var(--space-3); } .alerta-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; } .alerta-card--critico { background-color: var(--color-danger-light); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); color: var(--color-danger); } .alerta-card--atencao { background-color: var(--color-warning-light); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); color: var(--color-warning-hover); } .alerta-card--info { background-color: var(--color-info-light); border-color: color-mix(in srgb, var(--color-info) 30%, transparent); color: var(--color-info); } .alerta-card__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } .alerta-card__icon svg { width: 100%; height: 100%; } .alerta-card__text { font-size: var(--font-size-sm); font-weight: 500; line-height: 1.5; } /* ---------------------------------------------------------- Diagnosticos Diferenciais (CDS) ---------------------------------------------------------- */ .diagnosticos-list { display: flex; flex-direction: column; gap: var(--space-2); } .diagnostico-card { padding: var(--space-3) var(--space-4); background: var(--color-border-light); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .diagnostico-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .diagnostico-card__name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); } .diagnostico-card__detail { font-size: var(--font-size-xs); color: var(--color-muted); margin-top: var(--space-2); line-height: 1.5; } /* ---------------------------------------------------------- Badges ---------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; } .badge--alta { background-color: var(--color-success-bg); color: var(--color-success-hover); } .badge--media { background-color: var(--color-warning-bg); color: var(--color-warning-hover); } .badge--baixa { background-color: var(--color-danger-bg); color: var(--color-danger); } .badge--primary { background-color: var(--color-primary-light); color: var(--color-primary-hover); } /* ---------------------------------------------------------- Exames List (CDS) ---------------------------------------------------------- */ .exames-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .exames-list li { position: relative; padding-left: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.6; } .exames-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary); } /* ---------------------------------------------------------- Interacoes Medicamentosas (CDS) ---------------------------------------------------------- */ .interacoes-list { display: flex; flex-direction: column; gap: var(--space-2); } .interacao-card { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-warning-light); border: 1px solid var(--color-warning-bg); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-warning-hover); line-height: 1.5; } .interacao-card .icon-sm { color: var(--color-warning); flex-shrink: 0; margin-top: 1px; } /* ---------------------------------------------------------- Protocolos List (CDS) ---------------------------------------------------------- */ .protocolos-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .protocolos-list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-primary); padding: var(--space-2) var(--space-3); background: var(--color-primary-light); border-radius: var(--radius-sm); line-height: 1.5; } .protocolos-list .icon-xs { color: var(--color-primary); } /* ---------------------------------------------------------- Perguntas Sugeridas (CDS) ---------------------------------------------------------- */ .perguntas-list { list-style: none; counter-reset: perguntas; display: flex; flex-direction: column; gap: var(--space-2); } .perguntas-list li { counter-increment: perguntas; position: relative; padding-left: var(--space-8); font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.6; } .perguntas-list li::before { content: counter(perguntas); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: white; border-radius: 50%; font-size: var(--font-size-xs); font-weight: 700; } /* ---------------------------------------------------------- Referencias List (CDS) ---------------------------------------------------------- */ .referencias-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .referencias-list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-muted); line-height: 1.5; } .referencias-list .icon-xs { color: var(--color-muted); margin-top: 3px; } /* ---------------------------------------------------------- Query Input ---------------------------------------------------------- */ .sutile-query { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: rgba(245, 243, 237, 0.56); backdrop-filter: blur(22px) saturate(1.24); -webkit-backdrop-filter: blur(22px) saturate(1.24); flex-shrink: 0; } .sutile-query--composer { position: sticky; bottom: 0; z-index: 4; margin-top: -1.25rem; padding: var(--space-3); border: 1px solid rgba(255, 255, 255, 0.52); border-radius: 18px 18px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.04) 100%), rgba(245, 243, 237, 0.48); box-shadow: 0 -18px 40px rgba(74, 59, 43, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.62); } .sutile-query--main-composer { margin-top: -2rem; border-left: none; border-right: none; border-bottom: none; border-radius: 18px 18px 0 0; border-top-color: rgba(180, 130, 60, 0.3); background: linear-gradient(180deg, rgba(255, 248, 230, 0.55) 0%, rgba(255, 248, 230, 0.12) 100%), rgba(245, 243, 237, 0.48); } .sutile-query--sidebar-composer { border-left: none; border-right: none; border-bottom: none; border-radius: 18px 18px 0 0; border-top-color: rgba(66, 77, 105, 0.25); background:linear-gradient(180deg, rgba(203, 204, 210, 0.55) 0%, rgba(238, 241, 250, 0.12) 100%), rgba(245, 243, 237, 0.48) } .sutile-query__label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(180, 130, 60, 0.9); margin-bottom: var(--space-2); } .sutile-query__label-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: nowrap; } .sutile-query__label-row .sutile-query__label { margin-bottom: 0; min-width: 0; } .sutile-query__label--sidebar { color: rgba(66, 77, 105, 0.7); } .sutile-query__label-icon { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.85; } .sutile-query__input-row { display: flex; gap: var(--space-2); align-items: center; } .sutile-query__processing-indicator { margin: 0; margin-left: auto; flex: 0 0 auto; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.02em; text-transform: none; color: rgba(66, 77, 105, 0.76); white-space: nowrap; } .sutile-query--stacked .sutile-query__input-row { align-items: flex-start; } .sutile-query__input { flex: 1; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-card); outline: none; transition: border-color var(--transition-fast); } .sutile-query__input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); } .sutile-query__input:disabled { opacity: 0.5; cursor: not-allowed; } .sutile-query__input::placeholder { color: var(--color-placeholder); } /* Textarea variant — mesmo estilo da barra de instrucoes */ .sutile-query__input--textarea { min-height: 56px; resize: vertical; } .sutile-query__submit { min-width: 72px; padding-inline: var(--space-3); justify-content: center; } .sutile-query__submit--compact { min-width: 40px; padding-inline: var(--space-2); } .sutile-query__feedback { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.55; animation: query-feedback-in 180ms ease-out; } .btn--primary { background-color: var(--color-primary); color: white; padding: var(--space-2); min-width: 36px; justify-content: center; font-weight: 700; box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 30%, transparent); } .btn--primary:disabled { background-color: var(--color-disabled-bg); border-color: var(--color-disabled-bg); color: var(--color-disabled-fg); opacity: 1; box-shadow: none; } .btn--primary:hover:not(:disabled) { background-color: var(--color-primary-hover); box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-1px); } .btn--primary:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 4px color-mix(in srgb, var(--color-accent) 35%, transparent); } /* ---------------------------------------------------------- CDS History ---------------------------------------------------------- */ .sutile-history { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 2px dashed var(--color-border); } .sutile-history__entry { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-border-light); overflow: hidden; } .sutile-history__summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); cursor: pointer; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); list-style: none; gap: var(--space-3); } .sutile-history__summary::-webkit-details-marker { display: none; } .sutile-history__summary::before { content: '\25B6'; font-size: var(--font-size-xs); color: var(--color-muted); transition: transform var(--transition-fast); flex-shrink: 0; } details[open] > .sutile-history__summary::before { transform: rotate(90deg); } .sutile-history__time { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-muted); flex-shrink: 0; } .sutile-history__content { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); } .sutile-history__section-title { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); } /* ---------------------------------------------------------- Transcription Panel (Bottom) ---------------------------------------------------------- */ .transcription-panel { position: relative; margin: 0; padding-left: var(--space-6); padding-right: var(--space-6); flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; } .transcription-panel__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); background: var(--color-card); border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .transcription-panel__header-actions { display: flex; align-items: center; gap: var(--space-3); } .transcription-panel__collapse-btn { flex-shrink: 0; } .transcription-panel__collapse-label { display: inline-flex; align-items: center; gap: var(--space-2); } /* When collapsed, header is the only visible part — full border and radius */ .transcription-panel--collapsed .transcription-panel__header { border-radius: var(--radius-lg); border-bottom: 1px solid var(--color-border); } /* When in recording step or transcription view, transcription takes most of main area */ .transcription-panel--recording-full, .transcription-panel--full { flex: 1 1 0 !important; min-height: 200px; } .transcription-panel__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); } .transcription-panel__title .icon-sm { color: var(--color-primary); } .transcription-panel__indicator { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-danger); } .recording-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-danger); animation: pulse 1.5s ease-in-out infinite; } .transcription-panel__body { /* Flex: take remaining space so content scrolls inside the panel */ flex: 1 1 0; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-6); background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); scroll-behavior: smooth; } /* ---------------------------------------------------------- Transcription Config Card — configurar entrevista ---------------------------------------------------------- */ .transcription-config-card { padding: var(--space-4); margin-bottom: var(--space-4); background: var(--color-border-light); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .transcription-config-card__title { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-2); } .transcription-config-card__hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-3); line-height: 1.5; } .transcription-config-card .session-context-row { margin-bottom: var(--space-3); } .transcription-config-card__actions { margin-bottom: var(--space-2); } .transcription-config-reuse-btn { display: inline-flex; align-items: center; gap: var(--space-2); } .transcription-config-card__cta { font-size: var(--font-size-sm); color: var(--color-muted); margin: 0; } .transcription-config-select { width: 100%; } @media (max-width: 560px) { .transcription-config-card .session-context-row { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- Transcript Entries ---------------------------------------------------------- */ .transcript-entry { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light); transition: opacity var(--transition-fast); } .transcript-entry:last-child { border-bottom: none; } .transcript-entry--partial { opacity: 0.6; } .transcript-entry--partial .transcript-entry__text { font-style: italic; } .transcript-entry__time { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-muted); white-space: nowrap; min-width: 60px; padding-top: 2px; } .transcript-entry__text { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--lh-relaxed); } /* Low confidence transcript highlighting */ .low-confidence { background-color: rgba(255, 193, 7, 0.2); color: var(--color-warning); border-bottom: 1px dashed var(--color-warning); cursor: help; padding: 1px 2px; border-radius: 2px; } .low-confidence:hover { background-color: rgba(255, 193, 7, 0.3); } /* ---------------------------------------------------------- Copy Feedback ---------------------------------------------------------- */ .copy-feedback { color: var(--color-success); } /* ---------------------------------------------------------- Toast Notifications ---------------------------------------------------------- */ .toast-container { position: fixed; top: max(env(safe-area-inset-top, 0px), var(--space-5)); right: max(env(safe-area-inset-right, 0px), var(--space-5)); bottom: auto; left: auto; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); width: auto; max-width: min(340px, calc(100vw - 2 * var(--space-5))); pointer-events: none; align-self: flex-end; } .toast-container .toast { pointer-events: auto; } .toast { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%), rgba(247, 244, 239, 0.78); backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 16px rgba(34, 27, 20, 0.08), 0 1px 2px rgba(34, 27, 20, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5); overflow: hidden; } .toast::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%); pointer-events: none; } .toast__content { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 500; line-height: 1.35; } .toast--error { background: color-mix(in oklch, var(--color-danger) 10%, var(--color-bg-subtle)); border: 1px solid color-mix(in oklch, var(--color-danger) 30%, transparent); } .toast--error .icon-sm { color: var(--color-danger); } .toast--success { background: color-mix(in oklch, var(--color-success) 10%, var(--color-bg-subtle)); border: 1px solid color-mix(in oklch, var(--color-success) 30%, transparent); } .toast--success .icon-sm { color: var(--color-success); } .toast--warning { background: color-mix(in oklch, var(--color-warning) 12%, var(--color-bg-subtle)); border: 1px solid color-mix(in oklch, var(--color-warning) 32%, transparent); } .toast--warning .icon-sm { color: var(--color-warning); } .toast--info { background: color-mix(in oklch, var(--color-info) 10%, var(--color-bg-subtle)); border: 1px solid color-mix(in oklch, var(--color-info) 30%, transparent); } .toast--info .icon-sm { color: var(--color-info); } /* Indeterminate progress bar pinned to the bottom of a toast — used for long-running work with no real progress signal (e.g. document OCR). */ .toast__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1; background: color-mix(in oklch, var(--color-info) 18%, transparent); overflow: hidden; } .toast__progress-bar { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px; background: var(--color-info); animation: toast-progress-indeterminate 1.3s ease-in-out infinite; } @keyframes toast-progress-indeterminate { 0% { left: -40%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { .toast__progress-bar { animation-duration: 2.6s; } } .toast__close { position: relative; z-index: 1; background: transparent; border: none; cursor: pointer; padding: 2px; border-radius: var(--radius-sm); color: var(--color-muted); opacity: 0.55; transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast); flex-shrink: 0; } .toast__action { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.18); border: 1px solid currentColor; color: inherit; cursor: pointer; padding: 4px 10px; margin-left: 8px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; font-size: 0.85em; white-space: nowrap; flex-shrink: 0; transition: background var(--transition-fast); } .toast__action:hover { background: rgba(255, 255, 255, 0.32); } .toast__close svg { width: 13px; height: 13px; } .toast__close:hover { color: var(--color-text); background: rgba(0, 0, 0, 0.06); opacity: 1; } /* Toast Transitions */ .toast-enter { transition: opacity var(--transition-base), transform var(--transition-base); } .toast-enter-start { opacity: 0; transform: translateY(-6px); } .toast-enter-end { opacity: 1; transform: translateY(0); } .toast-leave { transition: opacity var(--transition-fast), transform var(--transition-fast); } .toast-leave-start { opacity: 1; transform: translateY(0); } .toast-leave-end { opacity: 0; transform: translateY(-4px); } /* ---------------------------------------------------------- Approval Modal ---------------------------------------------------------- */ .approval-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9500; padding: var(--space-4); background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); pointer-events: auto; /* Standard modal behavior */ } @media (min-width: 769px) { .approval-overlay { align-items: center; } } /* Image expand overlay (full-screen lightbox) */ .image-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); padding: var(--space-4); cursor: pointer; } .image-overlay__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer; transition: background var(--transition-fast); } .image-overlay__close:hover { background: rgba(255, 255, 255, 0.25); } .image-overlay__close svg { width: 24px; height: 24px; } .image-overlay__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; } .approval-modal { background: var(--color-card); border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); max-width: 650px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; animation: slideInUp 0.3s ease-out; overflow: hidden; pointer-events: auto; border: 1px solid var(--color-border); } .approval-modal--editor { width: min(96vw, 1180px); max-width: 1180px; max-height: 92vh; } /* Settings modal: few fields — size to content, tight spacing, no forced scroll. */ .approval-modal--settings { max-width: 600px; max-height: min(92vh, 760px); } .approval-modal--settings .approval-modal__content { overflow-y: auto; gap: 0.85rem; } /* Account actions (2FA / Alterar senha) now share the footer with Cancelar / Salvar — let them wrap on narrow widths. */ .approval-modal--settings .approval-modal__actions { flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); } /* ---- Documentos modal ---- */ .approval-modal--documentos { width: min(96vw, 1280px); max-width: 1280px; height: min(94vh, 980px); max-height: 94vh; display: flex; flex-direction: column; } .documentos-modal__body { display: grid; grid-template-columns: 300px 1fr; flex: 1; overflow: hidden; min-height: 0; } .documentos-modal__left { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-right: 1px solid var(--color-border); overflow-y: auto; } .documentos-modal__right { display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .documentos-tipo-card { display: flex; align-items: center; padding: 0.625rem var(--space-3); border: 1px solid var(--color-border); border-left-width: 3px; border-left-color: transparent; border-radius: var(--radius); cursor: pointer; font-size: 0.875rem; font-family: inherit; color: var(--color-text); background: transparent; text-align: left; width: 100%; transition: background 0.15s, border-left-color 0.15s; } .documentos-tipo-card:hover { background: var(--color-bg-secondary); } .documentos-tipo-card--active { border-left-color: var(--color-primary); background: rgba(17, 109, 255, 0.06); color: var(--color-primary); font-weight: 500; } .documentos-instrucoes-label { font-size: 0.72rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; } .documentos-instrucoes-textarea { resize: none; width: 100%; flex: 1; min-height: 110px; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: 0.875rem; font-family: inherit; color: var(--color-text); background: var(--color-card); box-sizing: border-box; line-height: 1.5; } .documentos-instrucoes-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(17, 109, 255, 0.1); } @media (max-width: 768px) { .approval-modal--documentos { width: 100%; height: 96vh; max-height: 95vh; } .documentos-modal__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .documentos-modal__left { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 40vh; } } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ---- Jurisprudência modal ---- Search panel on the left; results panel expands in on the right after the first search. The modal grows from a compact search width to a wide split layout — the width transition is the "expansion". */ .juris-lab-modal { width: min(94vw, 48rem); max-width: none; max-height: 94vh; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .juris-lab-modal--expanded { width: min(96vw, 1360px); } .juris-lab__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; overflow: hidden; } .juris-lab-modal--expanded .juris-lab__body { grid-template-columns: 32rem minmax(0, 1fr); } .juris-lab__search { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); padding-top: var(--space-3); overflow-y: auto; min-height: 0; } .juris-lab__results { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); padding-top: var(--space-3); overflow-y: auto; min-height: 0; border-left: 1px solid var(--color-border); background: var(--color-bg-secondary); animation: jurisResultsIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes jurisResultsIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .juris-lab__results-loading { margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); } @media (max-width: 768px) { .juris-lab-modal, .juris-lab-modal--expanded { width: 96vw; } .juris-lab-modal--expanded .juris-lab__body { grid-template-columns: 1fr; } .juris-lab__results { border-left: none; border-top: 1px solid var(--color-border); } } @media (prefers-reduced-motion: reduce) { .juris-lab-modal { transition: none; } .juris-lab__results { animation: none; } } .approval-modal__header { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; } .approval-modal__title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0; } .approval-modal__title svg { color: var(--color-warning); width: 16px; height: 16px; } .approval-modal__subtitle { display: none; /* Hide subtitle to save vertical space */ } .approval-modal__eyebrow { margin: 0 0 0.3rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } .approval-modal__header--editor { padding: 1rem 1.25rem 0.85rem; background: linear-gradient(180deg, rgba(15, 118, 110, 0.08) 0%, rgba(15, 118, 110, 0.02) 100%); } .approval-modal__header-main { min-width: 0; flex: 1; } .approval-modal__header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .approval-modal__header-actions .btn { padding: 0.35rem 0.65rem; font-size: 0.72rem; } .approval-modal__close { width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: var(--color-text-secondary); cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .approval-modal__close:hover { color: var(--color-danger); border-color: rgba(185, 28, 28, 0.22); background: var(--color-card); transform: rotate(90deg); } .approval-modal__close svg { width: 18px; height: 18px; } .approval-modal__content { flex: 1; overflow-y: auto; padding: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); } .approval-modal__content--editor { padding: 0; background: radial-gradient(circle at top left, rgba(15, 118, 110, 0.07), transparent 24%), linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 1)); } .approval-modal__editor-root { flex: 1; min-height: 520px; } .approval-modal__toolbar { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.7rem 1.1rem 0.8rem; border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0)); } .editor-toolbar-btn { display: inline-flex; align-items: center; gap: 0.42rem; min-height: 32px; padding: 0.42rem 0.68rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.22); font-size: 0.74rem; font-weight: 600; line-height: 1; cursor: pointer; color: var(--color-text); background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .editor-toolbar-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07); } .editor-toolbar-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .editor-toolbar-btn--accent { color: var(--color-accent-hover); background: var(--color-warning-bg); border-color: rgba(194, 65, 12, 0.14); } .editor-toolbar-btn--accent-alt { color: var(--color-info); background: var(--color-info-bg); border-color: rgba(109, 40, 217, 0.14); } .editor-toolbar-btn--heading { color: var(--color-success-hover); background: var(--color-success-bg); border-color: rgba(22, 101, 52, 0.14); } .editor-toolbar-btn--list { color: var(--color-info); background: var(--color-info-bg); border-color: rgba(37, 99, 235, 0.14); } .editor-toolbar-btn--quote { color: var(--color-success-hover); background: var(--color-success-bg); border-color: rgba(13, 148, 136, 0.14); } .editor-toolbar-btn--code { color: var(--color-warning-hover); background: var(--color-warning-bg); border-color: rgba(217, 119, 6, 0.14); } .editor-toolbar-btn--reset { color: var(--color-text); background: var(--color-bg-subtle); border-color: rgba(100, 116, 139, 0.14); } .approval-modal__transcript { padding: var(--space-2) var(--space-4); background: var(--color-bg); margin: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .approval-modal__transcript h3 { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; } .approval-modal__textarea-container { position: relative; width: 100%; } .approval-transcript-edit { width: 100%; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); padding-right: 140px; /* Space for the floating button */ font-family: inherit; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text); resize: vertical; min-height: 80px; outline: none; } /* Modal de nome do cliente */ .client-name-input { width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-bg); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .client-name-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); } .client-name-input::placeholder { color: var(--color-placeholder); } /* Contexto da sessao (materia, tipo de entrevista, canal) no modal inicial */ .session-context-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } @media (max-width: 560px) { .session-context-row { grid-template-columns: 1fr; } } .session-context-select, .settings-select { width: 100%; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-card); font-family: var(--font-family); font-size: 0.9375rem; color: var(--color-text); } .session-context-select:focus, .settings-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); } /* Self-service question set dropdown: richer select styling */ .self-service-question-set-select { min-height: 44px; padding: 0.625rem 2.5rem 0.625rem 0.875rem; border-radius: 10px; border-color: color-mix(in srgb, var(--color-border) 76%, var(--color-primary) 24%); background: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%) calc(100% - 16px) calc(50% - 2px) / 7px 7px no-repeat, linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%) calc(100% - 11px) calc(50% - 2px) / 7px 7px no-repeat, linear-gradient(to right, color-mix(in srgb, var(--color-border-light) 82%, white 18%), color-mix(in srgb, var(--color-border-light) 82%, white 18%)) calc(100% - 2.25rem) 50% / 1px 60% no-repeat, linear-gradient(180deg, color-mix(in srgb, white 86%, var(--color-card) 14%), var(--color-card)); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); appearance: none; -webkit-appearance: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .self-service-question-set-select:hover { border-color: color-mix(in srgb, var(--color-border) 62%, var(--color-primary) 38%); } .self-service-question-set-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-light) 78%, transparent 22%), 0 1px 2px rgba(16, 24, 40, 0.06); } .self-service-modal { width: min(96vw, 960px); } .self-service-invites { display: flex; flex-direction: column; gap: 0.5rem; } .self-service-invites__title { font-size: var(--font-size-sm); color: var(--color-muted); } .self-service-invites__table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: auto; background: var(--color-card); } .self-service-invites__table { width: 100%; border-collapse: collapse; min-width: 720px; } .self-service-invites__table th, .self-service-invites__table td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-sm); vertical-align: middle; } .self-service-invites__table th { white-space: nowrap; color: var(--color-text-secondary); background: var(--color-bg-secondary); } .self-service-invites__table tbody tr:hover { background: color-mix(in srgb, var(--color-primary-light) 22%, transparent 78%); } .self-service-sort-btn { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .self-service-sort-btn:hover { color: var(--color-primary); } .self-service-sort-btn:focus { outline: none; text-decoration: underline; } .self-service-invites__actions { display: flex; align-items: center; gap: 0.5rem; } .self-service-invites__cancel-btn { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); line-height: 1.25; } .self-service-invites__cancel-btn:not(:disabled) { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 48%, var(--color-border) 52%); } .approval-transcript-edit:focus { border-color: var(--color-primary); } /* ---------------------------------------------------------- Modal de edicao da peticao (estilos legados) ---------------------------------------------------------- */ .peticao-modal .peticao-modal__intro { margin: 0 0 0.75rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; } .peticao-modal__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); color: var(--color-muted); font-size: var(--font-size-sm); } .peticao-modal__textarea { min-height: 220px; } /* ---------------------------------------------------------- Documentos Modal ---------------------------------------------------------- */ .documentos-modal .documentos-modal__intro { margin: 0 0 0.75rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; } .documentos-modal__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); color: var(--color-muted); font-size: var(--font-size-sm); } .documentos-modal__form { display: flex; flex-direction: column; gap: var(--space-4); } .documentos-modal__field { display: flex; flex-direction: column; gap: var(--space-1); } .documentos-modal__field label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); } .documentos-modal__hint { font-size: var(--font-size-xs); color: var(--color-muted); margin: 0 0 var(--space-1); } .documentos-select, .documentos-input { padding: 0.5rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-card); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); } .documentos-select:focus, .documentos-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); } .documentos-modal__textarea { min-height: 180px; resize: vertical; } .documentos-modal__extras { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); background: var(--color-border-light); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .documentos-modal__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .documentos-modal__row input { flex: 1; min-width: 120px; } .documentos-modal__actions-row { margin-top: var(--space-2); } .approval-btn--floating { position: absolute; bottom: 8px; right: 8px; z-index: 10; padding: 6px 12px !important; font-size: 0.75rem !important; height: auto !important; box-shadow: var(--shadow-md); } .approval-modal__legend { margin: 6px 0 0; font-size: 0.6875rem; color: var(--color-muted); } .approval-modal__warnings { margin: 0 var(--space-4) var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-warning-light); border: 1px solid var(--color-warning-bg); border-radius: var(--radius-md); } .approval-modal__warnings h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 0.75rem; font-weight: 700; color: var(--color-warning-hover); } .approval-modal__warnings h4 svg { width: 14px; height: 14px; } .approval-modal__warnings ul { margin: 0; padding-left: 16px; font-size: 0.75rem; color: var(--color-warning-hover); } .approval-modal__warnings li { margin-bottom: 2px; } .approval-modal__actions { padding: var(--space-1) var(--space-4); display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--color-border); background: var(--color-card); flex-shrink: 0; } .approval-modal__actions .btn { padding: 4px 10px; font-size: 0.75rem; } @media (max-width: 768px) { .approval-overlay { padding: 2rem var(--space-4) var(--space-4); align-items: flex-start; justify-content: center; background: rgba(0, 0, 0, 0.6); pointer-events: auto; z-index: 11000; overflow-y: auto; } /* When keyboard is open, shift most approval modals (config, attachments, etc.) up slightly to stay visible. Overlays .approval-overlay--fixed (ex.: modal do cliente) nao se movem. */ body.keyboard-open .approval-overlay:not(.approval-overlay--fixed) .approval-modal { transform: translateY(calc(max(var(--keyboard-height, 0px) * -0.4, -180px))); transition: transform 0.2s ease-out; } .approval-modal { max-height: 90vh; height: auto; width: 100%; max-width: 500px; border-radius: var(--radius-lg); animation: slideInUp 0.3s ease-out; pointer-events: auto; } .approval-modal__header { padding: var(--space-4); } .approval-modal--editor { width: 100%; } .approval-modal__toolbar { padding: 0.75rem 1rem; } .approval-modal__header-actions { width: 100%; justify-content: flex-start; margin-top: 0.5rem; } .editor-toolbar-btn { flex: 1 1 calc(50% - 0.6rem); justify-content: center; } .approval-modal__actions { padding: var(--space-4); padding-bottom: calc(var(--space-4) + 40px); /* Space for warning bar */ } .proposal-view-toggle--compact { gap: 0.16rem; padding: 0.16rem; } .proposal-view-toggle__btn--compact { padding: 0.42rem 0.3rem; font-size: clamp(0.68rem, 3vw, 0.8rem); } } /* ---------------------------------------------------------- CCT modals (sindicato_ano, sindicato_picker, candidate_picker, fetch_summary). Built on .approval-overlay / .approval-modal so they share the app's modal language. ---------------------------------------------------------- */ .cct-modal { max-width: 620px; } .cct-modal--wide { max-width: 700px; } .cct-modal--narrow { max-width: 560px; } .cct-modal__intro { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.5; } .cct-modal__intro strong { color: var(--color-text); } .cct-modal__highlight { color: var(--color-primary); font-weight: 600; } .cct-modal__field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; } .cct-modal__field-row > .login-card__field { flex: 1 1 180px; min-width: 0; } .cct-modal__field-row > .login-card__field--narrow { flex: 0 0 140px; } .cct-modal__field-row > .login-card__field--xs { flex: 0 0 90px; } /* Roomier modal so more results fit "at a glance", with denser rows. */ .cct-modal--wide.cct-modal--roomy { max-width: 920px; max-height: 88vh; } /* Tighten vertical rhythm — give the results list as much height as possible. */ .cct-modal--roomy .approval-modal__content { gap: var(--space-2); } .cct-modal--roomy .cct-modal__field-row > .login-card__field label { margin-bottom: 2px; } .cct-modal--roomy .cct-modal__list { gap: var(--space-1); } .cct-modal--roomy .cct-modal__item { padding: 6px var(--space-3); gap: var(--space-2); } .cct-modal--roomy .cct-modal__item-body { gap: 2px; } .cct-modal--roomy .cct-modal__item-title { font-size: var(--font-size-xs); } .cct-modal--roomy .cct-modal__item-meta, .cct-modal--roomy .cct-modal__item-reasons { font-size: var(--font-size-xs); } /* Rows are two lines max: the merged meta line truncates instead of wrapping. */ .cct-modal--roomy .cct-modal__item .cct-modal__item-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Candidate picker: busca à esquerda, resultados à direita (espelha o layout do modal de jurisprudência, .juris-lab__*). */ .cct-picker-modal { width: min(97vw, 1320px); max-width: none; height: 92vh; max-height: 92vh; } .cct-picker__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 24rem minmax(0, 1fr); overflow: hidden; } /* The search column is the receded "toolbar" layer (brand-tinted neutral); the results read on the modal's own card background, so the rows' ACT/CCT tints stay legible instead of fighting a flat gray. */ .cct-picker__search { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); padding-top: var(--space-3); overflow-y: auto; min-height: 0; background: color-mix(in oklch, var(--color-card) 96%, var(--color-primary)); border-right: 1px solid var(--color-border-light); } /* On the tinted rail the search tool reads as a crisp card. */ .cct-picker__search .cct-modal__contraparte { background: var(--color-card); } /* Identity card: which sindicato laboral this whole picker is scoped to (the name confirmed in the sindicato_ano modal). */ .cct-picker__target { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .cct-picker__target-label { font-size: var(--font-size-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); } .cct-picker__target-name { font-size: var(--font-size-sm); font-weight: 700; line-height: 1.35; color: var(--color-text); } .cct-picker__target-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); } /* Narrow column: stack input / UF / button vertically. */ .cct-picker__filter-controls { flex-direction: column; align-items: stretch; } .cct-picker__results { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); padding-top: var(--space-3); overflow: hidden; min-height: 0; } @media (max-width: 768px) { .cct-picker-modal { width: 96vw; } .cct-picker__body { grid-template-columns: 1fr; } .cct-picker__search { overflow-y: visible; flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--color-border-light); } } /* Inline "searching the Mediador" feedback (spinner + status) — candidate picker. */ .cct-modal__search-feedback { display: flex; align-items: center; gap: var(--space-2); } .spinner--xs { width: 14px; height: 14px; border-width: 2px; flex: 0 0 auto; } .cct-modal__link { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); font-size: var(--font-size-sm); text-decoration: none; } .cct-modal__link:hover { text-decoration: underline; } .cct-modal__status { min-height: 18px; font-size: var(--font-size-xs); color: var(--color-text-secondary); } .cct-modal__expiry { font-size: var(--font-size-2xs); color: var(--color-muted); margin-right: auto; } /* Scrollable picker list */ .cct-modal__list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; } .cct-modal__list-group-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); line-height: 1.4; margin: 0 0 var(--space-1); padding-top: var(--space-1); } .cct-modal__list-group-title > span { min-width: 0; } .cct-modal__list-group-title .btn { margin-left: auto; flex: 0 0 auto; font-size: var(--font-size-xs); font-weight: 600; padding: 2px 8px; } .cct-modal__list-group-title--separated { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } /* Picker row (radio or checkbox + body) */ .cct-modal__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .cct-modal__item:hover { border-color: var(--color-muted); background: var(--color-bg-secondary); } /* Instrument kind carried by a subtle row tint: ACT (acordo por empresa) warm amber, CCT (convenção da categoria) cool blue. Selected (below) still wins. */ .cct-modal__item--act { background: oklch(98.5% 0.016 85); border-color: oklch(89% 0.045 85); } .cct-modal__item--act:hover { background: oklch(96.5% 0.028 85); border-color: oklch(82% 0.07 85); } .cct-modal__item--cct { background: oklch(98.5% 0.012 255); border-color: oklch(89% 0.035 255); } .cct-modal__item--cct:hover { background: oklch(96.5% 0.022 255); border-color: oklch(82% 0.055 255); } [data-theme="dark"] .cct-modal__item--act { background: oklch(26.5% 0.025 85); border-color: oklch(35% 0.045 85); } [data-theme="dark"] .cct-modal__item--act:hover { background: oklch(29.5% 0.035 85); } [data-theme="dark"] .cct-modal__item--cct { background: oklch(26.5% 0.022 255); border-color: oklch(35% 0.04 255); } [data-theme="dark"] .cct-modal__item--cct:hover { background: oklch(29.5% 0.032 255); } .cct-modal__item--selected, .cct-modal__item--selected:hover { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 0 0 1px var(--color-primary) inset; } .cct-modal__item--indented { margin-left: var(--space-3); } .cct-modal__item input[type="radio"], .cct-modal__item input[type="checkbox"] { margin-top: 2px; accent-color: var(--color-primary); flex: 0 0 auto; } .cct-modal__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cct-modal__item-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); line-height: 1.35; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .cct-modal__item-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.4; } .cct-modal__item-reasons { font-size: var(--font-size-2xs); color: var(--color-muted); } .cct-modal__item-link { font-size: var(--font-size-xs); color: var(--color-primary); align-self: flex-start; text-decoration: none; } .cct-modal__item-link:hover { text-decoration: underline; } /* Kind token: plain colored text (the row tint carries the color; a pill on a tinted row would double-encode and add noise). */ .cct-modal__badge { display: inline-block; font-size: var(--font-size-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); } .cct-modal__badge--act { color: oklch(44% 0.09 70); } .cct-modal__badge--cct { color: oklch(43% 0.08 255); } [data-theme="dark"] .cct-modal__badge--act { color: oklch(80% 0.1 80); } [data-theme="dark"] .cct-modal__badge--cct { color: oklch(80% 0.06 255); } /* Inline vigência on the title row (replaces the per-year sub-headers). */ .cct-modal__item-vig { font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; } .cct-modal__item-title .cct-modal__item-link { margin-left: auto; font-weight: 400; white-space: nowrap; } /* Filter row */ .cct-modal__filter { display: flex; flex-direction: column; gap: var(--space-1); } .cct-modal__filter-label { font-size: var(--font-size-2xs); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; } .cct-modal__filter-controls { display: flex; gap: var(--space-2); align-items: stretch; } .cct-modal__filter-controls input { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-card); transition: border-color 0.15s, box-shadow 0.15s; } .cct-modal__filter-controls input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .cct-modal__filter-clear { border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text-secondary); border-radius: var(--radius-sm); padding: 0 var(--space-3); cursor: pointer; font-size: 1rem; line-height: 1; } .cct-modal__filter-clear:hover { background: var(--color-bg-secondary); color: var(--color-text); } .cct-modal__filter-count { font-size: var(--font-size-2xs); color: var(--color-muted); } .cct-modal__filter-warning { font-size: var(--font-size-2xs); color: var(--color-warning); } /* Contraparte search lives in a self-contained sub-panel so the mode toggle + inputs read as one tool even without a verbose heading above them. */ .cct-modal__contraparte { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); padding: var(--space-3); gap: var(--space-2); } /* Mode toggle (empresa | sindicato patronal): two equal-width, visually-joined pills so the pair reads as one segmented control instead of two loose buttons. */ .cct-modal__search-modes { display: flex; gap: 0; flex-wrap: nowrap; } .cct-modal__search-modes .btn { flex: 1 1 0; border-radius: 0; margin: 0; /* Pin geometry so toggling primary<->outline doesn't shift the label: same padding, centering and weight in both selected/unselected states. */ justify-content: center; font-weight: 600; padding: var(--space-1) var(--space-3); } .cct-modal__search-modes .btn + .btn { border-left: 0; } .cct-modal__search-modes .btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .cct-modal__search-modes .btn:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } .cct-modal__search-field { position: relative; flex: 1; min-width: 0; display: flex; } .cct-modal__autocomplete { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: 2px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); max-height: 220px; overflow-y: auto; } .cct-modal__ac-item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: none; background: transparent; color: var(--color-text); font-size: var(--font-size-sm); cursor: pointer; } .cct-modal__ac-item:hover, .cct-modal__ac-item:focus { background: var(--color-primary-light); outline: none; } .cct-modal__summary-heading { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: var(--space-2) 0 var(--space-1); } .cct-modal__summary-heading--ok { color: var(--color-success); } .cct-modal__summary-heading--fail { color: var(--color-danger); } .cct-modal__pill { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-xs); line-height: 1.4; border: 1px solid transparent; } .cct-modal__pill + .cct-modal__pill { margin-top: var(--space-1); } .cct-modal__pill--ok { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success-bg); } .cct-modal__pill--fail { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger-bg); } .cct-modal__pill a { color: inherit; text-decoration: underline; } /* ---------------------------------------------------------- HPI Full-Screen Edit Modal (Textarea + Markdown preview) ---------------------------------------------------------- */ .hpi-edit-overlay { padding: 0 !important; z-index: 10000 !important; } .hpi-edit-modal { background: var(--color-card); width: 100%; height: 100%; max-width: none; border-radius: 0; display: flex; flex-direction: column; } .hpi-edit-modal__header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; background: var(--color-bg); gap: var(--space-4); } .hpi-edit-modal__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: 0; } .hpi-edit-modal__title svg { color: var(--color-primary); } .hpi-edit-modal__toolbar { padding: var(--space-2) var(--space-6); border-bottom: 1px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-4); background: var(--color-bg); } .hpi-edit-modal__toolbar-group { display: flex; align-items: center; gap: var(--space-2); } .hpi-edit-modal__toolbar-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-right: var(--space-2); } /* Side-by-side layout for documents: form | resizer | editor */ .hpi-edit-modal__body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .hpi-edit-modal__body--documents { flex-direction: row; } .documentos-modal__form-pane { padding: 1rem; overflow-y: auto; background: var(--color-bg-secondary); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-4); } .hpi-edit-modal__resizer { width: 6px; flex-shrink: 0; background: var(--color-border); cursor: col-resize; transition: background 0.15s; } .hpi-edit-modal__resizer:hover { background: var(--color-primary); } .hpi-edit-modal__content { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--color-bg); } .hpi-edit-modal__editor-pane, .hpi-edit-modal__preview-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; } .hpi-edit-modal__editor-pane { border-right: 1px solid var(--color-border); } .hpi-edit-modal__pane-label { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; background: var(--color-bg); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .hpi-edit-modal__textarea { flex: 1; width: 100%; font-size: var(--font-size-base); line-height: 1.8; color: var(--color-text); background: var(--color-card); border: none; padding: var(--space-4); resize: none; font-family: inherit; overflow-y: auto; } .hpi-edit-modal__textarea:focus { outline: none; border: none; } .hpi-edit-modal__preview { flex: 1; padding: var(--space-4) var(--space-6); overflow-y: auto; background: var(--color-card); line-height: 1.8; color: var(--color-text); } .hpi-edit-modal__preview h1 { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-primary); } .hpi-edit-modal__preview h2 { font-size: var(--font-size-xl); font-weight: 600; color: var(--color-text); margin-top: var(--space-6); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); } .hpi-edit-modal__preview p { margin-bottom: var(--space-4); text-align: justify; } .hpi-edit-modal__preview ul { margin-bottom: var(--space-4); padding-left: var(--space-6); } .hpi-edit-modal__preview li { margin-bottom: var(--space-2); } .hpi-edit-modal__preview strong { font-weight: 600; color: var(--color-text); } .hpi-edit-modal__preview em { font-style: italic; color: var(--color-text-secondary); } .hpi-edit-modal__actions { padding: var(--space-4) var(--space-6); display: flex; gap: var(--space-3); justify-content: flex-end; border-top: 1px solid var(--color-border); background: var(--color-bg); flex-shrink: 0; } .hpi-edit-modal__actions .btn { padding: var(--space-2) var(--space-4); } .approval-btn { position: relative; overflow: hidden; } .approval-btn__progress { position: absolute; top: 0; left: 0; bottom: 0; background: rgba(76, 175, 80, 0.3); transition: width 0.5s linear; z-index: 0; } .approval-btn__text { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; } .approval-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------------------------------------------------------- Reconnect Overlay ---------------------------------------------------------- */ .reconnect-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .reconnect-overlay__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8); background: var(--color-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); text-align: center; } .reconnect-overlay__content p { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); } .reconnect-overlay__detail { font-size: var(--font-size-sm) !important; font-weight: 400 !important; color: var(--color-muted) !important; } /* Drag and Drop Overlay */ .drag-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: color-mix(in srgb, var(--color-primary) 92%, transparent); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); pointer-events: auto; /* Catch drops */ } .drag-overlay__content { text-align: center; color: white; padding: 3rem; border: 3px dashed rgba(255, 255, 255, 0.5); border-radius: 1rem; background-color: rgba(255, 255, 255, 0.1); } .drag-overlay__content svg { width: 64px; height: 64px; margin-bottom: 1.5rem; opacity: 0.9; } .drag-overlay__content p { font-size: 1.5rem; font-weight: 500; } /* ---------------------------------------------------------- Mobile Shell ---------------------------------------------------------- */ .mobile-shell { display: flex; flex-direction: column; height: calc(100vh / var(--ui-zoom)); height: calc(100dvh / var(--ui-zoom)); overflow: hidden; background: var(--color-bg); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } /* --- Mobile Top Bar --- */ .mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; height: 36px; min-height: 36px; padding: 0 0.75rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .mobile-topbar__logo { width: 24px; height: 24px; object-fit: contain; } .mobile-topbar__wing { flex: 1; min-width: 0; display: flex; align-items: center; } .mobile-topbar__wing--left { justify-content: flex-start; gap: 0.4rem; } .mobile-topbar__wing--right { justify-content: flex-end; } .mobile-topbar__client { font-size: 0.8rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .mobile-topbar__client--beside-logo { flex: 1; min-width: 0; } .mobile-topbar__finalize { flex-shrink: 0; background: var(--color-danger); border: none; cursor: pointer; padding: 5px 13px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; border-radius: 8px; white-space: nowrap; font-family: inherit; } .mobile-topbar__finalize:hover:not(:disabled) { background: var(--color-danger-hover); } .mobile-topbar__finalize:disabled { opacity: 0.45; cursor: not-allowed; } .mobile-topbar__hamburger { background: none; border: none; cursor: pointer; padding: 4px; color: var(--color-text-secondary); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .mobile-topbar__hamburger:hover { background: var(--color-bg-secondary); } /* --- Mobile Nav Drawer --- */ .mobile-nav-drawer { position: fixed; top: 0; left: 0; height: calc(100vh / var(--ui-zoom)); height: calc(100dvh / var(--ui-zoom)); width: 260px; background: var(--color-bg); border-right: 1px solid var(--color-border); z-index: 51; transform: translateX(-100%); transition: transform 0.25s ease; display: flex; flex-direction: column; overflow-y: auto; } .mobile-nav-drawer--open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15); } .mobile-nav-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .mobile-nav-drawer__title { font-weight: 600; font-size: 0.9rem; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-nav-drawer__close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mobile-nav-drawer__close:hover { background: var(--color-bg-secondary); } .mobile-nav-drawer__section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); padding: 0.75rem 1rem 0.25rem; } .mobile-nav-drawer__item { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: none; cursor: pointer; padding: 0.65rem 1rem; font-size: 0.875rem; color: var(--color-text); text-align: left; text-decoration: none; transition: background 0.12s; } .mobile-nav-drawer__item:hover:not(:disabled) { background: var(--color-bg-secondary); } .mobile-nav-drawer__item:disabled { opacity: 0.4; cursor: not-allowed; } .mobile-nav-drawer__item--danger { color: var(--color-danger); } /* --- Mobile Drawer Overlay --- */ .mobile-drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 50; } /* --- Mobile Tab Content --- */ .mobile-tab-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; } .mobile-tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .mobile-tab-panel__scroller { flex: 1; overflow-y: auto; padding: 0.75rem; -webkit-overflow-scrolling: touch; } .mobile-empty-state { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; padding: 2rem 1.25rem; text-align: center; } .mobile-empty-state__content { display: flex; flex-direction: column; gap: 0.45rem; max-width: 24rem; } .mobile-empty-state__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary) 68%, white); } .mobile-empty-state__text { color: var(--color-text-secondary); line-height: 1.6; } .mobile-empty-state__btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-primary); color: #fff; border: none; border-radius: 12px; padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: opacity 0.15s; } .mobile-empty-state__btn:hover { opacity: 0.9; } .mobile-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 2rem 1rem; } .mobile-start-actions__btn { min-height: 56px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); transition: background 0.15s, border-color 0.15s; font-family: inherit; } .mobile-start-actions__btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .mobile-start-actions__btn--primary:hover:not(:disabled) { opacity: 0.9; } .mobile-start-actions__btn--outline:hover:not(:disabled) { background: var(--color-bg-secondary); } .mobile-start-actions__btn:disabled { opacity: 0.5; cursor: not-allowed; } .mobile-viewing-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-text-secondary); flex-shrink: 0; } /* --- Mobile Query Bar --- */ .mobile-querybar { border-top: 1px solid var(--color-border); background: var(--color-bg); padding: 0.5rem 0.75rem; flex-shrink: 0; position: relative; } .mobile-querybar__context { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.75rem; color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25rem; white-space: nowrap; } .mobile-querybar__context-clear { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.85rem; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; } .mobile-querybar__context-clear:hover { background: var(--color-bg-secondary); } .mobile-querybar__row { display: flex; align-items: flex-end; gap: 0.5rem; } .mobile-querybar__input { flex: 1; min-width: 0; min-height: 2.5rem; max-height: min(40vh, 17.5rem); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.85rem; font-family: inherit; resize: none; overflow: hidden; line-height: 1.4; background: var(--color-bg); color: var(--color-text); } .mobile-querybar__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(17, 109, 255, 0.15); } .mobile-querybar__send-btn { background: var(--color-primary); border: none; border-radius: 8px; padding: 4px 8px; cursor: pointer; color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .mobile-querybar__send-btn:disabled { opacity: 0.4; cursor: not-allowed; } .mobile-querybar__send-btn--save { padding: 5px 11px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; } /* Auto-run perguntas countdown ring around the mobile send button. Mirrors the desktop Gerar ring: same `trailStyle` driver (stroke-dasharray fill 0→100 over perguntasAutoSecondsLeft), rounded-rect perimeter stretched to the button via preserveAspectRatio="none", with a corner pause toggle. */ .mobile-gerar-ring { --gerar-trail-color: var(--color-accent-hover); position: relative; display: inline-flex; width: auto; order: 2; flex-shrink: 0; isolation: isolate; } .mobile-gerar-ring .mobile-querybar__send-btn { position: relative; z-index: 1; } .mobile-gerar-ring__svg { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; overflow: visible; z-index: 2; } .mobile-gerar-ring__track { fill: none; stroke: var(--color-border); stroke-width: 2; vector-effect: non-scaling-stroke; } .mobile-gerar-ring__trail { fill: none; stroke: var(--gerar-trail-color); stroke-width: 2.5; stroke-linecap: round; stroke-opacity: 0.75; stroke-dasharray: 0 100; vector-effect: non-scaling-stroke; transition: stroke-dasharray 100ms linear; } .mobile-gerar-ring__trail.gerar-ring-trail--paused { stroke: var(--color-muted); stroke-opacity: 0.55; transition: none; } .mobile-gerar-ring__pause { position: absolute; top: -8px; right: -8px; z-index: 3; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; background: var(--color-card); color: var(--color-text-secondary); font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-gerar-ring__pause.gerar-auto-pause--paused { color: var(--color-primary); border-color: var(--color-primary); } @media (prefers-reduced-motion: reduce) { .mobile-gerar-ring__trail { transition: none; } } .mobile-querybar__actions { display: flex; flex-direction: row; align-items: center; align-self: flex-end; gap: 6px; flex-shrink: 0; } .mobile-querybar__actions .mobile-querybar__send-btn { width: auto; min-height: 38px; padding: 5px 11px; } .mobile-querybar__actions .mobile-querybar__annex-btn.sidebar-annex-btn { width: auto; min-height: 38px; padding-top: 5px; padding-bottom: 5px; flex-shrink: 0; } .mobile-querybar__annex-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* --- Mini Recording Player --- */ .mobile-player { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); border-radius: 8px 8px 0 0; overflow: hidden; flex-shrink: 0; } .mobile-player__main { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; min-height: 48px; } .mobile-player__btn { background: none; border: none; cursor: pointer; color: var(--color-text); padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mobile-player__btn:disabled { opacity: 0.4; } .mobile-player__mic-btn { flex-direction: column; gap: 2px; padding: 4px 6px; border-radius: 6px; } .mobile-player__mic-label { font-size: var(--font-size-2xs); font-weight: 600; letter-spacing: var(--tracking-wide); line-height: 1; text-transform: uppercase; color: var(--color-text-muted); } .mobile-player__mic-btn--active { color: var(--color-primary); } .mobile-player__mic-btn--active .mobile-player__mic-label { color: var(--color-primary); } .mobile-player__mic-btn--muted { color: var(--color-danger); } .mobile-player__mic-btn--muted .mobile-player__mic-label { color: var(--color-danger); } .mobile-player__mic-btn--remote { color: var(--color-text-muted); } .mobile-player__mic-btn--remote .mobile-player__mic-label { color: var(--color-text-muted); } .mobile-player__waveform { display: flex; align-items: center; gap: 2px; height: 20px; } .mobile-player__bar { width: 3px; background: var(--color-primary); border-radius: 2px; transition: height 0.15s ease; animation: mobile-waveform 1.2s ease-in-out infinite alternate; } .mobile-player__waveform--paused .mobile-player__bar, .mobile-player__waveform--inactive .mobile-player__bar { animation-play-state: paused; opacity: 0.2; } @keyframes mobile-waveform { 0% { transform: scaleY(0.5); } 100% { transform: scaleY(1); } } .mobile-player__timer { font-size: 0.8rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; min-width: 3.5em; } .mobile-player__wordcount { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; padding: 3px 8px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); font-family: inherit; font-size: 0.7rem; line-height: 1; cursor: pointer; } .mobile-player__wordcount:active { background: var(--color-bg-subtle, var(--color-surface)); } /* --- Bottom Tab Bar --- */ /* Mobile bottom sheet — supplementary enrichment + timeline, one tap away. Sits in the shell flow just above the query bar; the collapsed handle peeks and the body pops upward over the tab content (Google-Maps-style sheet). */ .mobile-sheet { position: relative; flex-shrink: 0; z-index: 30; } .mobile-sheet__handle { display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 46px; padding: 0 1rem; background: var(--color-surface); border: none; border-top: 1px solid var(--color-border); color: var(--color-text); font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .mobile-sheet__label { flex: 1; text-align: left; } .mobile-sheet__chevron { flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.2s ease; } .mobile-sheet--expanded .mobile-sheet__chevron { transform: rotate(180deg); } .mobile-sheet__body { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; flex-direction: column; max-height: 60vh; background: var(--color-bg); border-top: 1px solid var(--color-border); border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); } .mobile-sheet__grip { flex-shrink: 0; width: 36px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--color-border); } .mobile-sheet__scroller { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 1rem 1rem; } .mobile-sheet__backdrop { position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.3); } /* Mobile Perguntas — módulos as a horizontal progress-chip strip. Replaces the old flat four-card dump: tap a chip to focus that module; its questions render below (reusing the desktop .proposal-modulo-focus). */ .mobile-modulo-strip { display: flex; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.25rem 0.1rem 0.65rem; margin-bottom: 0.5rem; scrollbar-width: none; } .mobile-modulo-strip::-webkit-scrollbar { display: none; } .mobile-modulo-chip { --modulo-cor: var(--color-primary); flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 0.8rem; line-height: 1.1; cursor: pointer; white-space: nowrap; } .mobile-modulo-chip.proposal-modulo-rail-item--active { border-color: var(--modulo-cor); background: color-mix(in srgb, var(--modulo-cor) 12%, var(--color-surface)); } .mobile-modulo-chip__name { overflow: hidden; text-overflow: ellipsis; max-width: 9.5em; } .mobile-modulo-chip__count { flex-shrink: 0; font-size: 0.7rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .mobile-modulo-chip__ring-wrap { position: relative; width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .mobile-modulo-chip__ring { width: 18px; height: 18px; transform: rotate(-90deg); } .mobile-modulo-chip__ring-track { fill: none; stroke: var(--color-border); stroke-width: 4; } .mobile-modulo-chip__ring-fill { fill: none; stroke: var(--modulo-cor); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 0.3s ease; } .mobile-modulo-chip.proposal-modulo-rail-item--complete .mobile-modulo-chip__ring-fill { stroke: var(--color-success, #16a34a); } .mobile-modulo-chip--lacunas { --modulo-cor: #d97706; } .mobile-modulo-chip__lacunas-icon { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: #d97706; color: #fff; font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* The desktop focus block was sized for the center pane; trim its outer spacing when reused inside the mobile Perguntas scroller. */ .proposal-modulo-focus--mobile { margin: 0 0 1rem; } .mobile-tabbar { display: flex; align-items: stretch; height: 48px; min-height: 48px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-bg); border-top: 1px solid var(--color-border); flex-shrink: 0; } .mobile-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.65rem; padding: 4px 0; position: relative; transition: color 0.15s; font-family: inherit; } .mobile-tabbar__item svg { width: 20px; height: 20px; } .mobile-tabbar__item--active { color: var(--color-primary); } .mobile-tabbar__item--active::after { content: ''; position: absolute; bottom: 0; left: 18%; right: 18%; height: 3px; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-primary) 55%, transparent) 0%, var(--color-primary) 35%, var(--color-primary) 65%, color-mix(in srgb, var(--color-primary) 55%, transparent) 100% ); border-radius: 3px 3px 0 0; box-shadow: 0 -1px 8px color-mix(in srgb, var(--color-primary) 35%, transparent); } .mobile-tabbar__item__badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 14px; padding: 0 4px; border-radius: 7px; background: var(--color-primary); color: #fff; font-size: 0.6rem; font-weight: 600; line-height: 14px; text-align: center; box-shadow: 0 0 0 2px var(--color-bg); pointer-events: none; } .mobile-tabbar__item__badge--pulsing { animation: transcript-badge-pulse 1.4s ease-in-out infinite; } @keyframes transcript-badge-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent); } 50% { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px color-mix(in srgb, var(--color-primary) 0%, transparent); } } /* Mobile tab pulse — fires on the Perguntas tab button when new perguntas data arrives while the user is on a different tab. Tints icon/label to the brand color and pulses a soft underline so it's visible at a glance without yanking the user out of context. */ .mobile-tabbar__item--pulsing { color: var(--color-primary); animation: mobile-tab-pulse-color 1.6s ease-in-out infinite; } .mobile-tabbar__item--pulsing::before { content: ''; position: absolute; bottom: 0; left: 22%; right: 22%; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-primary); box-shadow: 0 -1px 10px color-mix(in srgb, var(--color-primary) 50%, transparent); animation: mobile-tab-pulse-bar 1.6s ease-in-out infinite; pointer-events: none; } @keyframes mobile-tab-pulse-color { 0%, 100% { color: var(--color-text-muted); } 50% { color: var(--color-primary); } } @keyframes mobile-tab-pulse-bar { 0%, 100% { opacity: 0.35; transform: scaleX(0.55); } 50% { opacity: 1; transform: scaleX(1); } } /* --- Mobile Content Rendering --- */ .mobile-viabilidade-content, .mobile-peticao-content { font-size: 0.85rem; line-height: 1.55; color: var(--color-text); padding: 0.5rem 0; } .mobile-viabilidade-content h1, .mobile-peticao-content h1 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.75rem; } .mobile-viabilidade-content h2, .mobile-peticao-content h2 { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 0.5rem; } .mobile-viabilidade-content p, .mobile-peticao-content p { margin: 0.4rem 0; } .mobile-viabilidade-content ul, .mobile-peticao-content ul { padding-left: 1.25rem; margin: 0.5rem 0; } /* Selected question highlight */ .proposal-perguntas-list__item--selected { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 6px; } /* Hide desktop layout on mobile, show mobile shell */ @media (max-width: 768px) { .proposal-shell { display: none !important; } /* Also hide the desktop viewing banner (mobile has its own) */ .app-content > div[x-show*="viewingInterview"]:not(.mobile-shell) { display: none !important; } } /* ---------------------------------------------------------- Spinner ---------------------------------------------------------- */ .spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner--lg { width: 48px; height: 48px; border-width: 4px; } /* ---------------------------------------------------------- Horizontal Resizer (between main grid and transcription) ---------------------------------------------------------- */ .horizontal-resizer { flex: 0 0 6px; cursor: row-resize; max-width: var(--max-width); margin: 0 auto; width: 100%; background: var(--color-border); border-radius: var(--radius-full); transition: background-color var(--transition-fast); } .horizontal-resizer:hover { background: var(--color-muted); } /* ---------------------------------------------------------- Keyframe Animations ---------------------------------------------------------- */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes content-update { 0% { opacity: 1; } 30% { opacity: 0.6; } 100% { opacity: 1; } } /* ---------------------------------------------------------- RESPONSIVE: Tablet (max-width: 1024px) ---------------------------------------------------------- */ @media (max-width: 1024px) { .main-grid { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); } .panel { max-height: none; } .transcription-panel { margin: 0 var(--space-4) var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4); } .top-bar__controls { gap: var(--space-3); } } /* ---------------------------------------------------------- RESPONSIVE: Mobile (max-width: 768px) ---------------------------------------------------------- */ @media (max-width: 768px) { .top-bar { flex-direction: column; height: auto; padding: var(--space-3) var(--space-4); gap: var(--space-3); } .top-bar__controls { flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .top-bar__brand { width: 100%; justify-content: center; } .top-bar__history-label { display: none; } /* Make panels full-width and full-height on mobile */ .main-layout { position: relative; height: calc(100vh - var(--header-height) - 140px); /* account for tab bar + warning bar */ } .main-grid { padding: 0; gap: 0; margin: 0; height: 100%; flex-direction: column; } .panel { flex-basis: 100% !important; max-width: 100% !important; width: 100%; height: 100%; max-height: 100%; border-radius: 0; border-left: none; border-right: none; margin: 0; } .panel__header { padding: var(--space-3) var(--space-4); } .panel__body { padding: var(--space-4); flex: 1; overflow-y: auto; overscroll-behavior: contain; } .transcription-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; height: 100% !important; max-height: 100%; border-radius: 0; border-left: none; border-right: none; } .transcription-panel__header { border-radius: 0; border-left: none; border-right: none; } .transcription-panel__body { max-height: none; flex: 1; border-radius: 0; border-left: none; border-right: none; overscroll-behavior: contain; } /* Keep mobile layout fixed without full-page scroll; internal panels handle their own scrolling */ html, body { height: 100%; padding-bottom: 0; overflow: hidden; } .horizontal-resizer, .main-grid__resizer { display: none; } .toast-container { top: max(env(safe-area-inset-top, 0px), var(--space-3)); right: max(env(safe-area-inset-right, 0px), var(--space-3)); max-width: min(17rem, calc(100vw - 1.5rem)); gap: var(--space-1); } .toast-container .toast { padding: 6px var(--space-2); gap: var(--space-2); } .toast-container .toast .icon-sm { width: 13px; height: 13px; } .toast-container .toast__close svg { width: 11px; height: 11px; } } /* ---------------------------------------------------------- Login Overlay ---------------------------------------------------------- */ .login-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%); padding: 1rem; height: calc(100vh / var(--ui-zoom)); height: calc(100dvh / var(--ui-zoom)); } @media (max-width: 768px) { .login-overlay { align-items: flex-start; justify-content: center; padding-top: 2rem; padding-bottom: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* When keyboard is open, shift login card up slightly to stay visible. Use 40% of keyboard height with a max of 200px so it doesn't go off-screen. */ body.keyboard-open .login-overlay .login-card { transform: translateY(calc(max(var(--keyboard-height, 0px) * -0.4, -200px))); transition: transform 0.2s ease-out; } } .login-card { /* Frosted glass over login gradient */ background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; box-shadow: 0 8px 32px rgba(14, 18, 67, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.65); width: 100%; max-width: 400px; overflow: hidden; } /* Slightly wider login card to keep subtitle on one line */ .login-card--login { max-width: 460px; position: relative; } /* Tighten vertical rhythm on the login variant — the full-height card overflows shorter screens at 100% zoom (fine at ~80%). Scoped so the taller register card keeps its original spacing. */ .login-card--login .login-card__header { padding: 1.25rem 2rem 0.75rem; } .login-card--login .login-card__icon { margin-bottom: 0.5rem; } .login-card--login .login-card__form { padding: 0.75rem 2rem 1.5rem; gap: 0.75rem; } .login-card--login .login-card__submit { margin-top: 0.25rem; } /* Theme toggle pinned to the login card corner (reuses toggleTheme/themeIs*) */ .login-theme-toggle { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--color-border); border-radius: 999px; background: color-mix(in srgb, var(--color-card) 70%, transparent); color: var(--color-text-secondary); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .login-theme-toggle:hover { color: var(--color-text); border-color: var(--color-muted); } .login-theme-toggle svg { width: 18px; height: 18px; } /* Wider card for registration form with two columns */ .login-card:has(.register-columns) { max-width: 700px; } .login-card__header { text-align: center; padding: 2rem 2rem 1rem; } .login-card__icon { width: min(80%, 340px); height: auto; display: block; margin: 0 auto 1rem; object-fit: contain; border-radius: 8px; } .login-card__title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.25rem; } .login-card__subtitle { font-size: 0.875rem; color: var(--color-muted); margin: 0; white-space: nowrap; } .login-card__form { padding: 1rem 2rem 2rem; display: flex; flex-direction: column; gap: 1rem; } .login-card__field { display: flex; flex-direction: column; gap: 0.375rem; } .login-card__field label { font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .login-card__field input { padding: 0.625rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.9375rem; color: var(--color-text); background: var(--color-bg); transition: border-color 0.2s, box-shadow 0.2s; } .login-card__field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .login-card__field input:disabled { opacity: 0.6; cursor: not-allowed; } /* Selects in this field pattern were never styled (the rule above targets `input` only), so native dropdowns looked out of place next to the inputs. Match the input's box and draw a CSS chevron (same technique as .self-service-question-set-select). */ .login-card__field select { padding: 0.625rem 2.25rem 0.625rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.9375rem; color: var(--color-text); background-color: var(--color-bg); background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px); background-size: 6px 6px; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .login-card__field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } /* Chrome/Safari paint autofilled fields with a fixed yellow highlight that ignores the theme (the olive boxes in dark mode). Mask it with the field's own background via an inset shadow, and force the themed text color. */ .login-card__field input:-webkit-autofill, .login-card__field input:-webkit-autofill:hover, .login-card__field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-text); -webkit-box-shadow: 0 0 0 100px var(--color-bg) inset; caret-color: var(--color-text); transition: background-color 9999s ease-in-out 0s; } /* App-wide autofill: most fields sit on --color-card */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-text-fill-color: var(--color-text); -webkit-box-shadow: 0 0 0 100px var(--color-card) inset; caret-color: var(--color-text); transition: background-color 9999s ease-in-out 0s; } .login-card__hint { font-size: 0.8125rem; color: var(--color-muted); margin: 0.25rem 0 0; } .login-card__error { color: var(--color-danger); font-size: 0.8125rem; margin: 0; padding: 0.5rem 0.75rem; background: var(--color-danger-light); border-radius: 6px; } .login-card__submit { width: 100%; padding: 0.75rem; font-size: 1rem; margin-top: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* ---------------------------------------------------------- Register Form - Two Column Layout ---------------------------------------------------------- */ .register-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .register-column { display: flex; flex-direction: column; gap: 0.75rem; } /* On smaller screens, stack the columns */ @media (max-width: 640px) { .register-columns { grid-template-columns: 1fr; gap: 1rem; } } /* ---------------------------------------------------------- Historico de entrevistas ---------------------------------------------------------- */ .history-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 1rem; } .history-panel { background: var(--color-card); border-radius: 12px; box-shadow: var(--shadow-xl); width: 100%; max-width: 700px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; } .history-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } .history-panel__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin: 0; } .history-panel__body { overflow-y: auto; padding: 1rem 1.25rem; flex: 1; } .history-item { padding: 0.875rem 1rem; border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 0.75rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .history-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .history-item__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; } .history-item__date { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); } .history-item__preview { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .history-item__meta { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 0.375rem; } .history-detail__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--color-muted); } .history-detail__section { margin-bottom: 1.5rem; } .history-detail__section h3 { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--color-border-light); } .history-detail__transcript { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.6; white-space: pre-wrap; background: var(--color-bg); padding: 1rem; border-radius: 8px; max-height: 300px; overflow-y: auto; } /* ---------------------------------------------------------- Top Bar: User & Logout ---------------------------------------------------------- */ .top-bar__user { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--color-border); } .top-bar__username { font-size: 0.8125rem; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; } /* ---------------------------------------------------------- Alpine.js Cloak (prevent FOUC) ---------------------------------------------------------- */ [x-cloak] { display: none !important; } /* ---------------------------------------------------------- Help Modal ---------------------------------------------------------- */ .help-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem; } .help-modal { background: var(--color-card); border-radius: var(--radius-lg); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); border: 1px solid var(--color-border); width: 100%; max-width: 10000px; max-height: 120vh; display: flex; flex-direction: column; animation: slideInUp 0.3s ease-out; overflow: hidden; } .help-modal__header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 1rem; } .help-modal__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0; } .help-modal__title svg { color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0; } .help-modal__tabs { display: flex; gap: 0; padding: 0 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); flex-wrap: wrap; flex-shrink: 0; } .help-modal__tab { padding: 0.625rem 0.875rem; font-size: 0.8125rem; border: none; background: none; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--font-family); font-weight: 500; transition: all var(--transition-fast); white-space: nowrap; margin-bottom: -1px; } .help-modal__tab:hover { color: var(--color-text); background: var(--color-bg-primary); } .help-modal__tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: var(--color-bg-primary); } .help-modal__body { flex: 1; overflow-y: auto; } .help-modal__body h3 { font-size: 0.9375rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--color-text); padding-bottom: 0.25rem; border-bottom: 1px solid var(--color-border); } .help-modal__body h3:first-child { margin-top: 0; } .help-modal__body p { margin: 0.5rem 0; color: var(--color-text-secondary); line-height: 1.65; font-size: 0.875rem; } .help-modal__body ul, .help-modal__body ol { padding-left: 1.375rem; margin: 0.5rem 0; } .help-modal__body li { margin: 0.35rem 0; color: var(--color-text-secondary); line-height: 1.6; font-size: 0.875rem; } .help-modal__body strong { color: var(--color-text); font-weight: 600; } .help-step { display: flex; gap: 1rem; margin: 1rem 0; padding: 1rem; background: var(--color-bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--color-border); align-items: flex-start; } .help-step__number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; min-width: 2rem; background: var(--color-primary); color: #fff; border-radius: 50%; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; margin-top: 0.05rem; } .help-step__body { flex: 1; min-width: 0; } .help-step__body h4 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--color-text); } .help-step__body p { margin: 0.2rem 0; font-size: 0.875rem; color: var(--color-text-secondary); } .help-step__body ul { margin: 0.3rem 0; padding-left: 1.25rem; } .help-step__body li { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.55; margin: 0.2rem 0; } .help-tip { background: var(--color-primary-light); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); border-radius: var(--radius-sm); padding: 0.625rem 1rem; margin: 1rem 0; font-size: 0.875rem; color: var(--color-text); line-height: 1.55; } .help-warning { background: var(--color-warning-light); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent); border-radius: var(--radius-sm); padding: 0.625rem 1rem; margin: 1rem 0; font-size: 0.875rem; color: var(--color-text); line-height: 1.55; } .help-faq-item { padding: 1rem 0; border-bottom: 1px solid var(--color-border); } .help-faq-item:last-child { border-bottom: none; } .help-faq-q { font-size: 0.875rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.375rem; } .help-faq-a { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.65; margin: 0; } .help-faq-a ul { margin: 0.35rem 0; padding-left: 1.25rem; } .help-faq-a li { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0.2rem 0; } .help-modal__footer { padding: 0.875rem 1.5rem; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0; flex-wrap: wrap; } .help-modal__footer-note { font-size: 0.8125rem; color: var(--color-text-muted); } .help-modal__contact { font-size: 0.9375rem; font-weight: 600; color: var(--color-primary); text-decoration: none; } .help-modal__contact:hover { text-decoration: underline; } @media (max-width: 640px) { .help-modal { max-height: 95vh; } .help-modal__tabs { overflow-x: auto; flex-wrap: nowrap; } .help-modal__tab { padding: 0.5rem 0.625rem; font-size: 0.75rem; } .help-modal__footer { flex-direction: column; align-items: stretch; } } /* ---------------------------------------------------------- Proposal B Desktop Rewrite ---------------------------------------------------------- */ .proposal-shell { display: flex; flex: 1; min-height: 0; flex-direction: column; background: var(--color-bg-subtle); color: var(--color-text); font-family: var(--font-family); } .proposal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; padding: 0 1.25rem; min-height: 46px; position: sticky; top: 0; z-index: 50; background: rgba(244, 236, 227, 0.72); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid rgba(196, 149, 106, 0.22); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 2px 12px rgba(0, 0, 0, 0.06); } .proposal-topbar__interview-context { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.45rem; max-width: min(60vw, 540px); z-index: 2; } .proposal-topbar__left, .proposal-topbar__right, .proposal-topbar__action-group { display: flex; align-items: center; gap: 0.6rem; } .proposal-topbar__left { flex-wrap: wrap; } .proposal-topbar__actions { display: flex; justify-content: center; align-items: center; vertical-align: middle; flex: 1; gap: 0.75rem; } .proposal-topbar__action-stack { display: inline-flex; flex-direction: row; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: center; } .proposal-topbar__generated-actions { display: inline-flex; align-items: center; vertical-align: middle; gap: 0.75rem; } .proposal-session-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-family); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .proposal-session-badge.recording { color: var(--color-danger); } .proposal-session-badge.active { color: var(--color-primary); } .proposal-session-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .proposal-session-badge.recording .proposal-session-badge__dot { animation: proposal-pulse-dot 1.4s ease-in-out infinite; } @keyframes proposal-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .proposal-waveform { display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; border: none; background: transparent; cursor: pointer; min-height: 30px; } .proposal-waveform__bar { width: 3px; border-radius: 999px; background: var(--color-primary); transform-origin: center; } .proposal-topbar.is-recording { background: radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 60%), rgba(244, 236, 227, 0.72); animation: topbar-listen 3.2s ease-in-out infinite; } @keyframes topbar-listen { 0%, 100% { box-shadow: inset 0 0 0 rgba(0,0,0,0), inset 0 1px 0 rgba(255,255,255,0.55); } 50% { box-shadow: inset 0 -2px 22px color-mix(in srgb, var(--color-accent) 8%, transparent), inset 0 1px 0 rgba(255,255,255,0.55); } } .proposal-waveform--muted .proposal-waveform__bar, .proposal-waveform--inactive .proposal-waveform__bar { opacity: 0.2; } .proposal-waveform--muted .proposal-waveform__bar { background: var(--color-danger); } .proposal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; border: none; border-radius: 12px; padding: 0.58rem 0.92rem; font-family: var(--font-family); font-size: 0.79rem; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .proposal-btn:hover:not(:disabled) { transform: translateY(-1px); } .proposal-btn:disabled { cursor: not-allowed; opacity: 0.5; } .proposal-btn--sm { padding: 0.34rem 0.7rem; font-size: 0.73rem; border-radius: 9px; } .proposal-theme-toggle { padding: 0.34rem; } .proposal-theme-toggle svg { width: 16px; height: 16px; } .proposal-btn--primary { background: var(--color-primary); color: #fff; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 35%, transparent); } .proposal-btn--primary:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-fg); opacity: 1; box-shadow: none; } .proposal-btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: 0 3px 10px color-mix(in srgb, var(--color-accent) 45%, transparent); } .proposal-btn--secondary { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); } .proposal-btn--secondary:hover:not(:disabled) { border-color: var(--color-muted); color: var(--color-text); } .proposal-btn--danger { background: var(--color-danger-light); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); color: var(--color-danger); } .proposal-btn--danger:hover:not(:disabled) { background: var(--color-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 60%, transparent); color: var(--color-danger-hover); } .proposal-btn--important-action { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); color: var(--color-primary-dark); font-weight: 700; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--color-accent) 22%, transparent); } .proposal-btn--important-action:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 15%, var(--color-card)); border-color: var(--color-warning-hover); color: var(--color-primary-dark); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning-hover) 25%, transparent), 0 6px 14px color-mix(in srgb, var(--color-warning-hover) 28%, transparent); } .proposal-btn--important-action:focus-visible { outline: 2px solid var(--color-warning-hover); outline-offset: 2px; } .proposal-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .proposal-btn--block { width: 100%; justify-content: center; } .sidebar-annex-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: center; width: auto; min-width: 2rem; height: 2rem; gap: 0.32rem; padding: 0 0.6rem; font-size: 0.74rem; border-radius: 10px; line-height: 1; } .sidebar-annex-btn .icon-sm { display: block; margin: 0; } .sidebar-annex-btn__label { font-size: 0.72rem; line-height: 1; font-weight: 600; } .annex-counter-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; border-radius: 999px; text-align: center; pointer-events: none; } .proposal-icon-btn { width: 30px; height: 30px; border: none; border-radius: 999px; background: transparent; color: var(--color-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .proposal-icon-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); } .proposal-icon-btn svg { width: 14px; height: 14px; } .proposal-profile { border: none; background: transparent; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 10px; display: inline-flex; align-items: center; gap: 0.45rem; } .proposal-profile:hover { background: var(--color-bg-subtle); } .proposal-profile-wrap { position: relative; } .proposal-profile__meta { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-family); font-size: 0.7rem; color: var(--color-text-secondary); line-height: 1.2; } .proposal-profile__chevron { width: 12px; height: 12px; color: var(--color-muted); transition: transform 0.2s ease; } .proposal-profile-menu { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 180px; background: var(--color-card); border: 1px solid var(--color-bg-secondary); border-radius: 14px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); padding: 0.4rem; z-index: 10; } .proposal-profile-menu__item { display: flex; align-items: center; width: 100%; box-sizing: border-box; border: none; background: transparent; text-align: left; padding: 0.7rem 0.8rem; border-radius: 10px; font-family: var(--font-family); font-size: 0.8rem; color: var(--color-text); cursor: pointer; text-decoration: none; } .proposal-profile-menu__item:hover { background: var(--color-bg-subtle); } .proposal-profile-menu__icon { margin-left: auto; flex-shrink: 0; width: 16px; height: 16px; opacity: 0.65; } .proposal-profile-menu__item--danger { color: var(--color-danger); } .proposal-patient-chip { display: flex; flex-direction: column; padding: 0.45rem 0.8rem; border-radius: 14px; background: var(--color-bg-subtle); font-family: var(--font-family); line-height: 1.1; } .proposal-patient-chip__label { font-size: 0.62rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; } .proposal-patient-chip__name { font-size: 0.8rem; color: var(--color-text); } .proposal-patient-chip__meta { font-size: 0.66rem; color: var(--color-text-secondary); } /* Reopened/viewed interview pill lives inside the topbar, so it must stay on a single row and fit within its height — the base column layout (3 stacked lines) overflowed the 46px topbar vertically. */ .proposal-patient-chip--interview { flex-direction: row; align-items: baseline; gap: 0.5rem; padding: 0.26rem 0.7rem; border-radius: 999px; border: 1px solid rgba(196, 149, 106, 0.28); text-align: left; min-width: 0; overflow: hidden; } .proposal-patient-chip--interview .proposal-patient-chip__label { flex-shrink: 0; align-self: center; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(196, 149, 106, 0.16); color: var(--color-text-secondary); } .proposal-patient-chip--interview .proposal-patient-chip__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .proposal-patient-chip--interview .proposal-patient-chip__meta { flex-shrink: 0; white-space: nowrap; } .proposal-timer { min-width: 64px; text-align: center; padding: 0.32rem 0 0.32rem 0.62rem; border-radius: 0; background: transparent; border: none; border-left: 1px solid rgba(184, 160, 130, 0.45); font-family: var(--font-family); font-size: 0.8rem; color: var(--color-text-secondary); } .proposal-layout { --proposal-controls-bar-height: 58px; /* Scroll/sidebar inset: must be ≥ real overlay height (padding + row height + wraps). Bar sits at top:46px; 58px underestimated footprint → perguntas chips overlapped. */ --proposal-controls-bar-clearance: 76px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; flex: 1; min-height: 0; position: relative; transition: grid-template-columns 0.25s ease; margin-top: -46px; /* overlap behind topbar so backdrop-filter has content to blur */ } .proposal-layout--sidebar-collapsed { grid-template-columns: minmax(0, 1fr) 0; } .proposal-main { padding: calc(46px + var(--proposal-controls-bar-clearance)) 2.5rem 0; overflow-y: clip; display: flex; flex-direction: column; min-height: 0; position: relative; } /* Shared scrollport for transcript + sticky controls bar so backdrop-filter samples scrolling content (same idea as sutile-query over the column). */ .proposal-main__scroller { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; /* this is the actual scroll container behind .proposal-perguntas-layout — kill its rubber-band bounce / overscroll glow and stop scroll chaining */ overscroll-behavior: none; /* Force this scroller onto its own compositor layer. Without it, Chrome was scrolling this container on the main thread (repainting the contents every frame), which made elements desync visibly during scroll — "low FPS, different elements at different speeds" — but only in Chrome, not Firefox. translateZ(0) makes the subtree scroll as one GPU layer. (Verified fix; zoom and backdrop-filter were ruled out first.) */ transform: translateZ(0); } .proposal-main__content { /* Kept small: this padding sits BELOW the perguntas layout, so any extra here becomes scrollable space past the layout's bottom — which lets the sticky module rail drift up as you scroll into it. A small value keeps breathing room above the query bar without that drift. */ padding-bottom: 1rem; } .proposal-empty-state, .proposal-config-card { max-width: 760px; margin: 2rem auto 0; background: var(--color-card); border: 1px solid var(--color-bg-secondary); border-radius: 20px; padding: 2rem; } .proposal-empty-state h1, .proposal-patient-header h1, .proposal-config-card__header h2 { font-size: 1.65rem; font-weight: 400; line-height: 1.2; margin-bottom: 0.35rem; } .proposal-empty-state p, .proposal-config-card__header p, .proposal-patient-header__meta, .proposal-sidebar-card__text, .proposal-alert-card p, .proposal-empty-copy, .proposal-doc-row__meta, .proposal-history-row__main span { font-family: var(--font-family); color: var(--color-text-secondary); } .proposal-config-card__grid { margin-top: 1.25rem; } .proposal-config-card__actions { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .proposal-config-card__cta { display: flex; gap: 0.75rem; } .proposal-field-hint { margin-top: 0.4rem; font-family: var(--font-family); font-size: 0.72rem; color: var(--color-muted); } .proposal-patient-header { margin: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 0; align-self: center; } .proposal-view-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 999px; } .proposal-view-toggle--topbar { align-self: center; } .proposal-view-toggle-row { display: flex; justify-content: center; width: 100%; margin-top: -0.35rem; } .proposal-view-toggle--section { margin-bottom: 0.65rem; } .proposal-view-toggle--compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: clamp(0.18rem, 1.2vw, 0.35rem); padding: clamp(0.16rem, 1vw, 0.25rem); } .proposal-view-toggle__btn { border: none; background: transparent; border-radius: 999px; padding: 0.38rem 0.8rem; font-family: var(--font-family); font-size: 0.88rem; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: background 160ms ease, color 160ms ease, opacity 160ms ease, filter 160ms ease, box-shadow 160ms ease; } .proposal-view-toggle__btn:not(.proposal-view-toggle__btn--active):not(:disabled) { opacity: 0.88; filter: saturate(0.92); } .proposal-view-toggle__btn:hover:not(:disabled) { color: var(--color-text); opacity: 1; filter: none; } .proposal-view-toggle__btn--active { background: var(--color-card); color: var(--color-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); opacity: 1; filter: none; } .proposal-view-toggle__btn:disabled { opacity: 0.45; cursor: not-allowed; } .proposal-view-toggle__btn__badge { display: inline-block; margin-left: 0.4rem; min-width: 1.5rem; padding: 0 0.35rem; height: 1.05rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.7rem; font-weight: 600; line-height: 1.05rem; text-align: center; vertical-align: 1px; } .proposal-view-toggle__btn__badge--pulsing { animation: transcript-badge-pulse 1.4s ease-in-out infinite; } /* Desktop tab button pulse — fires on the Perguntas pill when new perguntas data arrives while the user is on a different tab. A soft outward ring + gentle background tint draws the eye without overriding the active-tab chrome (the getter suppresses --pulsing when the user is on this tab). */ .proposal-view-toggle__btn--pulsing { color: var(--color-primary); animation: desktop-tab-button-pulse 1.6s ease-in-out infinite; } @keyframes desktop-tab-button-pulse { 0%, 100% { background: color-mix(in srgb, var(--color-primary) 6%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent); } 50% { background: color-mix(in srgb, var(--color-primary) 18%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 0%, transparent); } } /* Respect the user's motion preference: keep the color cue, drop the animation. */ @media (prefers-reduced-motion: reduce) { .proposal-view-toggle__btn--pulsing, .mobile-tabbar__item--pulsing, .mobile-tabbar__item--pulsing::before { animation: none; } .proposal-view-toggle__btn--pulsing { background: color-mix(in srgb, var(--color-primary) 14%, transparent); } /* New in this effort: kill ambient + transition motion */ .proposal-topbar.is-recording { animation: none; } .proposal-view-toggle--main-switch .proposal-view-toggle__indicator { transition: none; } .proposal-waveform__bar { transition: none; } .peticao-streaming-preview:not(.peticao-streaming-preview--final) { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .proposal-view-toggle__btn--compact { display: flex; align-items: center; min-width: 0; width: 100%; justify-content: center; text-align: center; padding: clamp(0.35rem, 1vw, 0.5rem) clamp(0.38rem, 1.4vw, 0.7rem); font-size: clamp(0.72rem, 2.8vw, 0.84rem); line-height: 1.15; white-space: normal; word-break: break-word; overflow-wrap: anywhere; } .proposal-transcript-section { width: 100%; } .proposal-perguntas-section, .proposal-perguntas-section > div { width: 100%; } .proposal-perguntas-section .proposal-transcript-card { width: 100%; box-sizing: border-box; } .proposal-section-label, .proposal-sidebar__section-label { font-family: var(--font-family); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 0.85rem; } .proposal-section-label--top-spaced { padding-top: 1.75rem; } .proposal-transcript-card { position: relative; background: var(--color-card); border: 1px solid var(--color-bg-secondary); border-radius: 12px; padding: 1.5rem 2rem; overflow: hidden; } .proposal-transcript-card--generated { width: 100%; } /* "Perguntas geradas por IA" — um único card, tom marrom um pouco mais escuro que o roteiro */ .proposal-transcript-card--ia-off-script { margin-bottom: 1.25rem; background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-color: rgba(180, 141, 60, 0.28); } .proposal-transcript-card--ia-off-script::before { background: linear-gradient(to bottom, transparent, var(--color-accent), transparent); opacity: 0.35; } .proposal-perguntas-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; } .proposal-perguntas-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; gap: 0.9rem; border: 1px solid var(--color-border); border-radius: 14px; padding: 0.5rem 1.05rem; background: var(--color-bg-subtle); } .proposal-perguntas-list__item--question { border-top: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent); } .proposal-perguntas-list__item--answered { background: var(--color-success-bg); border-top: 2px solid color-mix(in srgb, var(--color-success) 40%, transparent); } .proposal-perguntas-list__item--gap { background: var(--color-warning-bg); border-top: 2px solid color-mix(in srgb, var(--color-warning) 40%, transparent); } .proposal-transcript-card--ia-off-script .proposal-perguntas-list__item--question { background: var(--color-bg-subtle); border-top-color: color-mix(in srgb, var(--color-accent) 50%, transparent); } .proposal-transcript-card--ia-off-script .proposal-perguntas-list__index { background: color-mix(in srgb, var(--color-accent) 35%, var(--color-card)); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); color: var(--color-primary-dark); } .proposal-perguntas-list__index, .proposal-perguntas-list__icon { width: 2.1rem; height: 2.1rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-family); font-size: 0.82rem; font-weight: 700; } .proposal-perguntas-list__index { background: color-mix(in srgb, var(--color-accent) 45%, var(--color-card)); border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); color: var(--color-primary-dark); } .proposal-perguntas-list__icon { background: var(--color-warning-bg); color: var(--color-accent); } .proposal-perguntas-list__index--answered { background: var(--color-success-bg); border: 1px solid color-mix(in srgb, var(--color-success) 50%, transparent); color: var(--color-success-hover); } .proposal-perguntas-list__body { min-width: 0; } /* The question itself is the primary thing a lawyer reads at a glance, so it gets readable sentence-case ink — not the muted, tracked, all-caps micro- label it used to be (which inverted the hierarchy against the answer). */ .proposal-perguntas-list__body strong { display: block; margin-bottom: 0.15rem; font-family: var(--font-family); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text); line-height: 1.35; } /* Answered questions stay ink for legibility; the check glyph + tinted card already carry the "answered" signal, so the text needn't also turn green. */ .proposal-perguntas-list__item--answered .proposal-perguntas-list__body strong { color: var(--color-text); } .proposal-perguntas-list__body p { margin: 0; } /* --- Clickable question items --- */ .proposal-perguntas-list__item--clickable { cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; } .proposal-perguntas-list__item--clickable:hover { background: rgba(0, 0, 0, 0.03); } .proposal-perguntas-list__item--expanded { background: rgba(0, 0, 0, 0.025); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); } /* --- Manual response badge --- */ .proposal-perguntas-list__badge-manual { display: inline-block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; padding: 0.05em 0.4em; margin-left: 0.4em; vertical-align: middle; line-height: 1.4; } /* --- Manual response index color --- */ .proposal-perguntas-list__index--manual { background: var(--color-info-bg); color: var(--color-info); } /* --- Manual response item left border --- */ .proposal-perguntas-list__item--manual { border-top: 2px solid color-mix(in srgb, var(--color-info) 40%, transparent); } /* --- Chevron indicator --- */ .proposal-perguntas-list__header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .proposal-perguntas-list__chevron { flex-shrink: 0; /* Hide the literal ▸ glyph and draw a thin two-stroke chevron via ::before instead, so it reads as an expand/collapse disclosure arrow rather than a solid "play" triangle. */ font-size: 0; color: var(--color-muted); transition: transform 0.2s ease; margin-top: 0.2rem; } .proposal-perguntas-list__chevron::before { content: ''; display: inline-block; width: 0.34rem; height: 0.34rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); vertical-align: middle; } .proposal-perguntas-list__chevron--open { transform: rotate(90deg); } /* --- Edit indicator (mobile question tap-to-answer) --- */ .proposal-perguntas-list__edit-indicator { flex-shrink: 0; color: var(--color-text-muted); opacity: 0.5; display: flex; align-items: center; margin-top: 0.1rem; transition: color 0.15s, opacity 0.15s; } .proposal-perguntas-list__edit-indicator--selected { color: var(--color-primary); opacity: 1; } /* --- Resposta preview (collapsed) --- */ .proposal-perguntas-list__resposta-preview { margin-top: 0.2rem; font-size: 0.72rem; line-height: 1.4; color: var(--color-text-secondary); } /* --- Textarea wrap --- */ .proposal-perguntas-list__textarea-wrap { margin-top: 0.5rem; overflow: hidden; } .proposal-perguntas-list__textarea { width: 100%; min-height: 60px; padding: 0.5rem 0.65rem; font-family: inherit; font-size: 0.85rem; line-height: 1.45; color: var(--color-text); background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 4px); resize: vertical; outline: none; transition: border-color 0.15s ease; box-sizing: border-box; } .proposal-perguntas-list__textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(17, 109, 255, 0.15); } .proposal-perguntas-list__textarea-actions { display: flex; justify-content: flex-end; margin-top: 0.35rem; } .proposal-perguntas-list__save-btn { font-family: inherit; font-size: 0.78rem; font-weight: 600; color: #fff; background: var(--color-primary); border: none; border-radius: var(--radius-sm, 4px); padding: 0.3rem 0.85rem; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; } .proposal-perguntas-list__save-btn:hover { opacity: 0.9; } /* --- Mobile compact question list overrides --- */ @media (max-width: 768px) { .proposal-perguntas-list { gap: 0.45rem; } .proposal-perguntas-list__item { gap: 0.55rem; padding: 0.35rem 0.6rem; border-radius: 10px; } .proposal-perguntas-list__index, .proposal-perguntas-list__icon { width: 1.65rem; height: 1.65rem; font-size: 0.7rem; } .proposal-perguntas-list__body strong { font-size: 0.85rem; margin-bottom: 0.15rem; letter-spacing: 0; } .proposal-perguntas-list__resposta-preview { font-size: 0.78rem; margin-top: 0.15rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proposal-perguntas-list__badge-manual { font-size: 0.58rem; padding: 0.02em 0.3em; } .proposal-section-label { font-size: 0.68rem; margin-bottom: 0.35rem; } .proposal-transcript-card { padding: 0.5rem 0.4rem; margin-bottom: 0.6rem; } .mobile-tab-panel__scroller { padding: 0.5rem 0.35rem; } } /* --- Expand/collapse transitions --- */ .proposal-transition--enter { transition: max-height 0.34s var(--ease-out-soft), opacity 0.22s ease-out, transform 0.34s var(--ease-out-soft); max-height: 360px; opacity: 1; transform: translateY(0); } .proposal-transition--enter-start { max-height: 0; opacity: 0; transform: translateY(-6px); } .proposal-transition--enter-end { max-height: 360px; opacity: 1; transform: translateY(0); } .proposal-transition--leave { transition: max-height 0.22s ease-in, opacity 0.16s ease-in, transform 0.22s ease-in; max-height: 0; opacity: 0; transform: translateY(-4px); } .proposal-transition--leave-start { max-height: 360px; opacity: 1; transform: translateY(0); } .proposal-transition--leave-end { max-height: 0; opacity: 0; transform: translateY(-4px); } .proposal-perguntas-list__body p { font-size: var(--font-size-base); line-height: var(--lh-loose); color: var(--color-text); } .proposal-transcript-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(to bottom, transparent, var(--color-primary), transparent); opacity: 0.35; } .proposal-transcript-flow { font-size: var(--font-size-sm); line-height: var(--lh-loose); color: var(--color-text); } .proposal-transcript-flow p + p { margin-top: 1rem; } /* Diarization: speaker name shown when the speaker changes between entries. */ .proposal-transcript-speaker { display: block; font-size: var(--font-size-xs, 0.75rem); font-weight: 600; color: var(--color-primary); text-transform: none; letter-spacing: 0.02em; margin-bottom: 0.15rem; } .proposal-transcript-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: var(--color-primary); animation: proposal-cursor 1s step-end infinite; } @keyframes proposal-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .proposal-transcript-toggle { border: 1px solid var(--color-border); background: var(--color-bg-subtle); border-radius: 999px; padding: 0.3rem 0.65rem; display: inline-flex; align-items: center; justify-content: center; align-self: center; min-height: 34px; font-family: var(--font-family); font-size: 0.74rem; font-weight: 300; line-height: 1; white-space: nowrap; color: var(--color-text); cursor: default; pointer-events: none; } .proposal-transcript-toggle span { color: var(--color-text); line-height: 1; } .proposal-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; max-width: 860px; } .proposal-record-editor-shell { max-width: 860px; } .proposal-record-editor { min-height: 420px; background: var(--color-card); border: 1px solid var(--color-bg-secondary); border-radius: 18px; overflow: hidden; } .proposal-record-editor .milkdown { min-height: 420px; } .proposal-record-editor .ProseMirror { min-height: 420px; padding: 1.6rem 1.75rem; font-size: var(--font-size-base); line-height: var(--lh-loose); color: var(--color-text); outline: none; max-width: 72ch; } .proposal-record-editor .ProseMirror h1, .proposal-record-editor .ProseMirror h2, .proposal-record-editor .ProseMirror h3, .proposal-record-editor .ProseMirror p, .proposal-record-editor .ProseMirror ul, .proposal-record-editor .ProseMirror ol { margin-bottom: 0.9rem; } .proposal-record-editor .ProseMirror h1, .proposal-record-editor .ProseMirror h2 { font-weight: 500; } .proposal-record-editor .ProseMirror ul, .proposal-record-editor .ProseMirror ol { padding-left: 1.4rem; } .proposal-record-editor .ProseMirror--readonly { cursor: default; } .proposal-record-fallback { padding: 1.6rem 1.75rem; font-size: var(--font-size-base); line-height: var(--lh-loose); color: var(--color-text); max-width: 72ch; } .proposal-record-section { padding: 1.35rem 0; border-bottom: 1px solid var(--color-bg-secondary); } .proposal-record-section--full { grid-column: 1 / -1; } .proposal-record-content { font-size: var(--font-size-base); line-height: var(--lh-loose); color: var(--color-text); max-width: 72ch; } .proposal-record-content ul { list-style: none; padding: 0; } .proposal-record-content li { position: relative; padding-left: 0.85rem; } .proposal-record-content li::before { content: ""; position: absolute; left: 0; top: 0.8rem; width: 5px; height: 1px; background: var(--color-border); } .proposal-tag-list { display: flex; flex-wrap: wrap; gap: 0.45rem; } .proposal-tag { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.3rem 0.75rem; background: var(--color-bg-subtle); font-family: var(--font-family); font-size: 0.72rem; color: var(--color-text); } .proposal-tag--secondary { background: var(--color-info-bg); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-info) 35%, transparent); } .proposal-tag--button { cursor: pointer; } .proposal-sidebar { border-left: 1px solid var(--color-bg-secondary); background: var(--color-bg-subtle); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; position: relative; transition: transform 0.25s ease, opacity 0.2s ease; padding-top: calc(46px + var(--proposal-controls-bar-clearance)); } .proposal-sidebar--collapsed { transform: translateX(100%); opacity: 0; pointer-events: none; } .proposal-sidebar__collapse { position: absolute; top: 0.85rem; left: 0.75rem; z-index: 2; width: 30px; height: 30px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-card); color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .proposal-sidebar__collapse svg { width: 15px; height: 15px; transition: transform 0.2s ease; } .proposal-sidebar__resizer { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3; } body.proposal-is-resizing-sidebar, body.proposal-is-resizing-sidebar * { user-select: none; -webkit-user-select: none; cursor: col-resize !important; } .proposal-sidebar__resizer::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 2px; height: 48px; border-radius: 999px; background: var(--color-border); transition: background 0.2s ease; } .proposal-sidebar__resizer:hover::before { background: var(--color-primary); } .proposal-sidebar-restore { position: absolute; right: 1rem; top: 1rem; z-index: 3; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-card); color: var(--color-text); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; font-family: var(--font-family); font-size: 0.74rem; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .proposal-sidebar-restore svg { width: 14px; height: 14px; } .proposal-sidebar__debug { padding: 3.25rem 1.15rem 0.9rem; border-bottom: 1px solid var(--color-bg-secondary); } .proposal-debug-input { margin-bottom: 0.65rem; } .proposal-sidebar__tabs { display: flex; padding: 0 0.25rem 0 3rem; border-bottom: 1px solid var(--color-bg-secondary); overflow-x: auto; } .proposal-sidebar__tab { flex: 1; border: none; background: transparent; padding: 0.9rem 0.35rem 0.8rem; font-family: var(--font-family); font-size: 0.67rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); border-bottom: 2px solid transparent; cursor: pointer; } .proposal-sidebar__tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .proposal-sidebar__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; } .proposal-sidebar__body-scroller { flex: 1; overflow-y: auto; padding: 1.1rem 1.15rem 0.5rem; } /* Full-bleed viabilidade badge: spans sidebar content edge-to-edge, label centered */ .proposal-sidebar__viabilidade-badge-row { box-sizing: border-box; width: calc(100% + 2.3rem); margin-left: -1.15rem; margin-right: -1.15rem; margin-bottom: 0.75rem; padding-left: 0.5rem; padding-right: 0.5rem; } .proposal-sidebar__viabilidade-badge { width: 100%; display: flex; justify-content: center; align-items: center; font-size: 0.75rem; flex-shrink: 0; } .proposal-sidebar__viabilidade-badge.badge--media { margin-top: 0.55rem; } .proposal-sidebar__body .sutile-query--composer { margin-top: 0; border-radius: 0; border-left: none; border-right: none; border-bottom: none; } .proposal-sidebar__body .sutile-query--sidebar-composer { margin-top: -2rem; border-radius: 18px 18px 0 0; } .milkdown-editor-container--sidebar { flex: none; min-height: 200px; } /* Stage-2 enrichment panels (viabilidade + peticao). Rendered below the Stage-1 markdown to surface verbas, fontes citadas with ✓/⚠ badges, pendências and valores principais without disturbing the Milkdown editor. */ .enrichment-panel { margin-top: 1.5rem; padding: 1rem; background: var(--color-surface); border-radius: 8px; border: 1px solid var(--color-border); } .enrichment-panel__title { font-size: 0.95rem; margin: 0 0 0.5rem 0; color: var(--color-text-muted); } .enrichment-panel__verbas, .enrichment-panel__fontes, .enrichment-panel__bullets, .enrichment-panel__pendencias, .enrichment-panel__valores { list-style: none; margin: 0; padding: 0; } .enrichment-panel__hint { margin: 0 0 0.5rem 0; font-size: 0.8rem; color: var(--color-text-muted); font-style: italic; } .enrichment-panel__empty { margin: 0.5rem 0 0 0; font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; } /* "Valor possível da ação" — the headline number of the viabilidade sidebar. */ .enrichment-panel--valor { background: var(--color-primary-soft, rgba(37, 99, 235, 0.08)); border-color: var(--color-primary, #2563eb); } .enrichment-valor__faixa { margin: 0 0 0.35rem 0; font-size: 0.9rem; font-weight: 400; line-height: 1.4; color: var(--color-text-muted); } .enrichment-valor__numeros { font-size: 1.05rem; font-weight: 700; color: var(--color-primary, #2563eb); } .enrichment-verba { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid transparent; transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease; } .enrichment-verba--aceita { background: var(--color-success-bg); border-color: color-mix(in srgb, var(--color-success) 50%, transparent); } .enrichment-verba--excluida { background: var(--color-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 50%, transparent); opacity: 0.65; } .enrichment-verba__body { flex: 1 1 auto; min-width: 0; } .enrichment-verba__nome { display: block; font-weight: 600; } .enrichment-verba__fundamento { display: block; margin-top: 0.1rem; color: var(--color-text-muted); font-size: 0.85rem; font-style: italic; word-break: break-word; } .enrichment-verba__just { margin: 0.25rem 0 0 0; font-size: 0.9rem; color: var(--color-text-muted); } .enrichment-verba__actions { display: flex; gap: 0.25rem; flex: 0 0 auto; } .verba-btn { width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text-muted); font-size: 0.9rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease; } .verba-btn:hover { border-color: var(--color-muted); } .verba-btn--aceita.verba-btn--active { background: var(--color-success); color: #fff; border-color: var(--color-success); } .verba-btn--excluida.verba-btn--active { background: var(--color-danger); color: #fff; border-color: var(--color-danger); } .enrichment-fonte { display: flex; gap: 0.5rem; align-items: center; padding: 0.25rem 0; } .fonte-badge { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 4px; } .fonte-badge--ok { background: var(--color-success-bg); color: var(--color-success); } .fonte-badge--warn { background: var(--color-warning-bg); color: var(--color-warning-hover); } .enrichment-pendencia { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.25rem 0; } .enrichment-pendencia__desc { font-size: 0.85rem; color: var(--color-text-muted); } .pendencia-badge { display: inline-block; width: 1.5rem; height: 1.5rem; text-align: center; border-radius: 50%; font-weight: 700; font-size: 0.85rem; line-height: 1.5rem; } .pendencia-badge--alta { background: var(--color-danger-bg); color: var(--color-danger); } .pendencia-badge--media { background: var(--color-warning-bg); color: var(--color-warning-hover); } .pendencia-badge--baixa { background: var(--color-info-bg); color: var(--color-info); } .enrichment-valor { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--color-border); } .enrichment-valor:last-child { border-bottom: none; } .enrichment-valor__value { font-weight: 600; font-variant-numeric: tabular-nums; } /* Read-only progressive preview shown while a peticao job is streaming. Replaced by Milkdown editor once final result arrives. */ .peticao-streaming-preview { position: relative; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font-size: 0.9rem; line-height: 1.6; min-height: 200px; } /* caret + pulse ONLY while streaming (not on --final) */ .peticao-streaming-preview:not(.peticao-streaming-preview--final) { opacity: 0.92; animation: peticao-streaming-pulse 2.4s ease-in-out infinite; } .peticao-streaming-preview:not(.peticao-streaming-preview--final)::after { content: "▍"; display: inline-block; margin-left: 2px; color: var(--color-accent); animation: peticao-streaming-caret 1s steps(2) infinite; } /* Compact base rhythm — used by the mobile streaming preview and as the fallback before .peticao-doc-surface (below) refines it on desktop. Kept ABOVE .peticao-doc-surface so that, at equal specificity, the doc-surface typeset wins by source order for the desktop nodes that carry both classes. */ .peticao-streaming-preview h1, .peticao-streaming-preview h2, .peticao-streaming-preview h3 { margin: 1rem 0 0.5rem; line-height: 1.3; } .peticao-streaming-preview p { margin: 0.5rem 0; } .peticao-streaming-preview ul, .peticao-streaming-preview ol { margin: 0.5rem 0 0.5rem 1.25rem; } /* Typeset reading surface — SHARED by the streaming preview and the final render. Everything that defines the "look" of the document (font size, line-height, column, serif headings, tables, highlighted markers) lives here so that switching the node to --final at end-of-stream does NOT make the font/spacing "jump". Only genuinely completion-dependent decorations (justified body text, highlighted total row) are gated on --final below. The `.peticao-doc-surface` class is added to the desktop petição / viabilidade / resumo previews; it deliberately does NOT touch the mobile `.mobile-*-content` render path. */ .peticao-doc-surface { background: var(--color-card); padding: clamp(1.5rem, 3vw, 2.75rem); font-size: 1rem; line-height: var(--lh-loose); } .peticao-doc-surface > * { /* fill the available column instead of pinning to 72ch: the main column widens when the enrichment sidebar collapses, and a fixed measure just turned that into wasted right-gap. The ch ceiling is only a safety net for ultra-wide monitors; on normal widths the content fills the column (and centres if it ever does hit the cap). */ max-width: 130ch; margin-inline: auto; } .peticao-doc-surface h1, .peticao-doc-surface h2, .peticao-doc-surface h3 { font-family: var(--font-display); letter-spacing: var(--tracking-tight); margin: 1.6rem auto 0.7rem; } .peticao-doc-surface h2 { padding-bottom: 0.3rem; border-bottom: 1px solid var(--color-border-light); } .peticao-doc-surface p { margin: 0.8rem auto; } /* Justification + hyphenation ONLY once the text is complete — mid-stream a still-growing last line produces ugly rivers of whitespace when justified. */ .peticao-streaming-preview--final p { text-align: justify; hyphens: auto; } /* ---- FORMATAÇÃO AVANÇADA DA PETIÇÃO ---- */ /* dados a preencher (placeholder / mock) */ .peticao-doc-surface .ph { font-weight: 600; color: var(--color-text); background: var(--color-accent-light); border-bottom: 1px dotted var(--color-accent); border-radius: 3px; padding: 0 3px; } /* referência legal */ .peticao-doc-surface .lei { color: var(--color-accent); font-weight: 600; white-space: nowrap; } /* subtítulos 5.1, 5.2… (h3) */ .peticao-doc-surface h3 { font-size: 1rem; font-weight: 700; margin: 1.4rem auto 0.5rem; border-bottom: none; /* sobrescreve borda herdada de h2 */ } /* citação literal do cliente — aspas de doutrina (manual): abre com aspas serifadas itálicas grandes na cor de destaque, moldura em fio 1px */ .peticao-doc-surface blockquote { position: relative; border: 1px solid var(--color-border-light); margin: 0 auto 0.9rem; padding: 0.6rem 1rem 0.6rem 2.6rem; background: var(--color-surface); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-style: italic; font-size: 0.95em; } .peticao-doc-surface blockquote::before { content: '\201C'; position: absolute; left: 0.5rem; top: 0.05rem; font-family: var(--font-display); font-style: italic; font-size: 2.4em; line-height: 1; color: var(--color-accent); } /* Carimbo de metadado (manual): rodapé em Plex Mono com "·" separando fatos. Todo output de agente nesta superfície (resumo, viabilidade, petição) é rascunho por definição — o carimbo torna isso visível no próprio documento. */ .peticao-doc-surface::after { content: 'rascunho · sujeito à revisão do advogado'; display: block; margin-top: 1.6rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border-light); font-family: var(--font-mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--color-muted); } /* tabela de valores dos pedidos */ .peticao-doc-surface table { width: 100%; border-collapse: collapse; margin: 0.8rem auto 1.2rem; font-size: 0.95rem; } .peticao-doc-surface td, .peticao-doc-surface th { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--color-border-light); } /* valores monetários: 2ª coluna alinhada à direita, dígitos tabulares */ .peticao-doc-surface td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } /* última linha = total — só no render final (durante o stream a última linha da tabela ainda não é, necessariamente, o total). */ .peticao-streaming-preview--final tr:last-child td { border-top: 2px solid var(--color-accent); border-bottom: none; font-weight: 700; font-size: 1.05em; } .peticao-streaming-preview--final tr:last-child td:last-child { color: var(--color-accent); } /* listas de pedidos / requerimentos */ .peticao-doc-surface ol { margin: 0.6rem auto 1rem 1.4rem; } .peticao-doc-surface ol li { margin-bottom: 0.4rem; } @keyframes agent-processing-dot { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 0.7; transform: scale(1); } } .agent-processing-dots { display: inline-flex; gap: 5px; align-items: center; margin-top: 0.5rem; } .agent-processing-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: agent-processing-dot 1.4s ease-in-out infinite; } .agent-processing-dots span:nth-child(2) { animation-delay: 0.2s; } .agent-processing-dots span:nth-child(3) { animation-delay: 0.4s; } /* ── Card de fases da geração (viabilidade / petição) ─────────────────── Ícone pulsante + contador + rótulo da fase agrupada atual. A redação (streaming) não usa este card; o preview de streaming a substitui. */ .agent-phase-card { display: flex; align-items: center; gap: 0.875rem; max-width: 22rem; margin: 1.5rem auto; padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04), 0 8px 24px oklch(0% 0 0 / 0.05); } .agent-phase-icon { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; } /* Anel pulsante ao redor do ícone */ .agent-phase-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent); animation: agent-phase-pulse 1.8s ease-out infinite; } /* Glifo central por fase, via mask (herda `color`) */ .agent-phase-icon::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--agent-phase-glyph) center / contain no-repeat; mask: var(--agent-phase-glyph) center / contain no-repeat; } @keyframes agent-phase-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } .agent-phase-icon--read { --agent-phase-glyph: url('data:image/svg+xml;utf8,'); } .agent-phase-icon--search { --agent-phase-glyph: url('data:image/svg+xml;utf8,'); } .agent-phase-icon--layers { --agent-phase-glyph: url('data:image/svg+xml;utf8,'); } .agent-phase-icon--pen { --agent-phase-glyph: url('data:image/svg+xml;utf8,'); } .agent-phase-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .agent-phase-counter { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); } .agent-phase-label { font-size: 0.95rem; font-weight: 500; color: var(--color-text); /* Animação de entrada a cada troca de fase (re-disparada via key change não é possível em CSP; aplicamos uma transição sutil ao trocar o texto). */ animation: agent-phase-label-in 0.35s ease both; } @keyframes agent-phase-label-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .agent-phase-icon::after { animation: none; opacity: 0; } .agent-phase-label { animation: none; } } @keyframes peticao-streaming-pulse { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } } @keyframes peticao-streaming-caret { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .milkdown-editor-container--sidebar .milkdown { flex: none; overflow: visible; } .milkdown-editor-container--sidebar .ProseMirror { overflow: visible; min-height: 200px; } .sidebar-editor-float-actions { position: absolute; top: 0.4rem; right: 0.4rem; display: flex; gap: 0.25rem; z-index: 5; } .sidebar-editor-float-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(250, 250, 248, 0.88); border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; color: var(--color-text-secondary); padding: 0; flex-shrink: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: color 0.15s, border-color 0.15s, background 0.15s; } .sidebar-editor-float-btn:hover { background: var(--color-card); color: var(--color-primary); border-color: var(--color-primary); } .peticao-edit-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; font-size: 0.95rem; font-weight: 600; } .peticao-edit-cta--compact { padding: 0.2rem 0.55rem; font-size: 0.72rem; gap: 0.3rem; line-height: 1.25; } .peticao-edit-cta-cluster { position: absolute; top: 0.6rem; right: 0.6rem; display: inline-flex; align-items: stretch; gap: 0.35rem; z-index: 1; } .peticao-edit-cta-cluster .export-dropdown { display: inline-flex; } .peticao-edit-cta-cluster .export-dropdown__menu { right: 0; } .proposal-sidebar-card, .proposal-coding-suggestion { background: var(--color-card); border: 1px solid var(--color-bg-secondary); border-radius: 12px; padding: 0.85rem 0.95rem; margin-bottom: 0.75rem; } .proposal-sidebar-card__title, .proposal-coding-row__title, .proposal-doc-row__title { font-family: var(--font-family); font-size: 0.82rem; color: var(--color-text); } .proposal-sidebar-card__meta { margin-top: 0.2rem; font-family: var(--font-family); font-size: 0.7rem; color: var(--color-muted); } .proposal-sidebar-list { padding-left: 1rem; font-family: var(--font-family); color: var(--color-text); font-size: 0.8rem; } .proposal-sidebar-list li + li { margin-top: 0.45rem; } .proposal-alert-card { border: 1px solid transparent; border-radius: 12px; padding: 0.75rem 0.9rem; margin-bottom: 0.65rem; font-family: var(--font-family); } .proposal-alert-card strong { display: block; font-size: 0.62rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; } .proposal-alert-card--critico { background: var(--color-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); } .proposal-alert-card--atencao { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); } .proposal-alert-card--info, .proposal-alert-card--undefined { background: var(--color-info-bg); border-color: color-mix(in srgb, var(--color-info) 30%, transparent); } .proposal-qa-messages { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.85rem; } .proposal-qa-message { max-width: 95%; padding: 0.75rem 0.85rem; border-radius: 12px; font-family: var(--font-family); font-size: 0.82rem; line-height: 1.6; } .proposal-qa-message--user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; } .proposal-qa-message--ai { align-self: flex-start; background: var(--color-bg-subtle); color: var(--color-text); border-bottom-left-radius: 4px; } .proposal-qa-input-row { display: flex; gap: 0.75rem; align-items: flex-end; } .proposal-qa-input, .proposal-lookup-input { width: 100%; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-card); padding: 0.75rem 0.85rem; font-family: var(--font-family); font-size: 0.82rem; color: var(--color-text); resize: vertical; outline: none; } .proposal-qa-input:focus, .proposal-lookup-input:focus { border-color: var(--color-primary); } .proposal-coding-row { display: flex; gap: 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-bg-secondary); } .proposal-coding-row__code { min-width: 70px; font-family: "Courier New", monospace; font-size: 0.75rem; font-weight: 700; color: var(--color-primary); padding-top: 0.1rem; } .proposal-coding-row__body { flex: 1; } .proposal-coding-row__actions { display: flex; gap: 0.45rem; margin-top: 0.45rem; } .proposal-inline-btn { border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); border-radius: 999px; padding: 0.2rem 0.6rem; font-family: var(--font-family); font-size: 0.68rem; cursor: pointer; } .proposal-inline-btn--danger:hover, .proposal-inline-btn--danger { color: var(--color-danger); } .proposal-lookup-group { position: relative; display: flex; flex-direction: column; gap: 0.6rem; } .proposal-lookup-results { border: 1px solid var(--color-bg-secondary); border-radius: 12px; background: var(--color-card); overflow: hidden; } .proposal-lookup-item, .proposal-doc-row, .proposal-history-row__main { width: 100%; border: none; background: transparent; text-align: left; cursor: pointer; } .proposal-lookup-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem; font-family: var(--font-family); font-size: 0.78rem; } .proposal-lookup-item + .proposal-lookup-item { border-top: 1px solid var(--color-bg-secondary); } .proposal-doc-row { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0; border-bottom: 1px solid var(--color-bg-secondary); } .proposal-doc-list-item { width: 100%; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem 0; border: none; border-bottom: 1px solid var(--color-bg-secondary); background: transparent; text-align: left; cursor: pointer; } .proposal-doc-list-item:disabled { cursor: not-allowed; opacity: 0.5; } .proposal-doc-list-item__icon { width: 34px; height: 34px; border-radius: 8px; background: var(--color-bg-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--color-muted); flex-shrink: 0; } .proposal-doc-list-item__icon svg { width: 16px; height: 16px; } .proposal-doc-list-item__body { display: flex; flex-direction: column; gap: 0.18rem; font-family: var(--font-family); } .proposal-doc-list-item__body strong { font-size: 0.82rem; color: var(--color-text); } .proposal-doc-list-item__body span { font-size: 0.72rem; color: var(--color-muted); line-height: 1.4; } .proposal-history-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0; border-bottom: 1px solid var(--color-bg-secondary); } .proposal-history-row__main { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; font-family: var(--font-family); } /* Modifier classes for desktopSessionBadgeClass getter */ .proposal-session-badge--recording { color: var(--color-danger); } .proposal-session-badge--recording .proposal-session-badge__dot { animation: proposal-pulse-dot 1.8s var(--ease-out-soft) infinite; } .proposal-session-badge--paused { color: var(--color-warning); opacity: 0.92; } .proposal-session-badge--processing { color: var(--color-primary); } .proposal-session-badge--processing .proposal-session-badge__dot { animation: proposal-processing-dot 1.25s linear infinite; } @keyframes flow-welcome-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes query-feedback-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes proposal-processing-dot { 0% { opacity: 0.45; transform: scale(0.88); box-shadow: 0 0 0 0 rgba(66, 77, 105, 0.2); } 60% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 8px rgba(66, 77, 105, 0); } 100% { opacity: 0.55; transform: scale(0.9); box-shadow: 0 0 0 0 rgba(66, 77, 105, 0); } } @media (max-width: 768px) { .proposal-shell { display: none !important; } } /* ---------------------------------------------------------- Logo block: title stacked with recording badge ---------------------------------------------------------- */ .proposal-logo-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; line-height: 1; } .proposal-brand { display: flex; align-items: center; gap: 0.4rem; } /* Wordmark "Litis." — manual da marca: Newsreader Medium (500), tracking −2%, mínimo 24px de altura em tela, ponto final sempre na cor de destaque. */ .proposal-brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1; /* era var(--color-text-primary), token inexistente (herdava por acaso) */ color: var(--color-text); letter-spacing: -0.02em; } /* ponto final no tom de destaque, como o wordmark "Litis." do site */ .proposal-brand__name::after { content: "."; color: var(--color-accent); } /* wordmark "Litis." como hero do cartão de login (substitui o logo) */ .proposal-brand--login { justify-content: center; margin: 0 0 1rem; } .proposal-brand--login .proposal-brand__name { font-size: 2.75rem; /* tracking do wordmark é sempre −2% (manual da marca) */ } /* ---------------------------------------------------------- Audio source selector wrapper (mic icon + select) ---------------------------------------------------------- */ .proposal-source-wrap { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: none; border-radius: 0; padding: 0 0.2rem 0 0; transition: border-color 160ms ease; } .proposal-source-wrap:focus-within { box-shadow: none; } .proposal-source-wrap__mic { width: 14px; height: 14px; color: var(--color-text-secondary); flex-shrink: 0; } .proposal-source-wrap .top-bar__source-select { border: none; background: transparent; box-shadow: none; padding-left: 0; min-width: 5.4rem; font-size: 0.68rem; } .proposal-source-wrap .top-bar__source-select:focus { border: none; box-shadow: none; } /* ---------------------------------------------------------- Audio source cycle button (shared: mobile player + desktop top bar) Same visual language as .mobile-player__mic-btn ---------------------------------------------------------- */ .audio-src-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 6px; color: var(--color-text-muted); transition: color 160ms ease, background 160ms ease; flex-shrink: 0; } .audio-src-btn:hover { background: rgba(0, 0, 0, 0.06); } .audio-src-btn__label { font-size: var(--font-size-2xs); font-weight: 600; letter-spacing: var(--tracking-wide); line-height: 1; text-transform: uppercase; color: inherit; } .audio-src-btn--on { color: var(--color-primary); } .audio-src-btn--off { color: var(--color-text-muted); opacity: 0.6; } /* ---------------------------------------------------------- Session controls group (Pausar + Encerrar wrapped together) ---------------------------------------------------------- */ .proposal-session-controls { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.18rem; background: rgba(255, 255, 255, 0.44); border: 1px solid rgba(192, 169, 139, 0.44); border-radius: 999px; } .proposal-active-call { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 251, 247, 0.42) 0%, rgba(245, 236, 226, 0.34) 100%); border: 1px solid rgba(191, 157, 123, 0.24); box-shadow: 0 4px 14px rgba(92, 62, 34, 0.035); opacity: 0.8; } .proposal-active-call__meta { display: inline-flex; align-items: center; gap: 0.35rem; } .proposal-active-call__rail { display: inline-flex; align-items: center; gap: 0; padding: 0 0.28rem 0 0.45rem; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(184, 160, 130, 0.45); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } /* ---------------------------------------------------------- Pause button — pill border style (amber shading) ---------------------------------------------------------- */ .proposal-btn--pause { background: var(--color-warning-bg); color: var(--color-warning-hover); border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, transparent); border-radius: 999px; font-weight: 700; } .proposal-btn--pause:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-card)); border-color: var(--color-accent-hover); color: var(--color-primary-dark); } .proposal-btn--pause:disabled { opacity: 0.55; cursor: not-allowed; } /* ---------------------------------------------------------- Stop button — pill border style (rose shading) ---------------------------------------------------------- */ .proposal-btn--stop { background: var(--color-danger-bg); color: var(--color-danger); border: 1.5px solid color-mix(in srgb, var(--color-danger) 50%, transparent); border-radius: 999px; font-weight: 700; } .proposal-btn--stop:hover:not(:disabled) { background: color-mix(in srgb, var(--color-danger) 15%, var(--color-card)); border-color: var(--color-danger-hover); color: var(--color-danger-hover); } .proposal-btn--stop:disabled { opacity: 0.55; cursor: not-allowed; } /* ---------------------------------------------------------- Controls bar — absolute overlay owned by .proposal-layout so it spans main + sidebar while main content still scrolls underneath. ---------------------------------------------------------- */ .proposal-controls-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: absolute; top: 46px; left: 0; right: 0; margin: 0; z-index: 45; min-height: var(--proposal-controls-bar-height); padding: 0.75rem 2.5rem 0.35rem; border-radius: 0 0 18px 18px; border: none; border-bottom: 1px solid rgba(196, 175, 150, 0.22); background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.04) 100%), rgba(245, 243, 237, 0.48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 28px rgba(68, 52, 37, 0.07); backdrop-filter: blur(22px) saturate(1.24); -webkit-backdrop-filter: blur(22px) saturate(1.24); } .proposal-controls-bar__left { display: none; pointer-events: none; } .proposal-controls-bar__toggles { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; flex: none; min-width: 0; } .proposal-controls-bar__right { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; min-width: 0; } .proposal-controls-bar .proposal-btn--primary { padding: 0.45rem 0.82rem; font-size: 0.8rem; } .proposal-controls-bar .proposal-view-toggle { padding: 0.18rem; } .proposal-controls-bar .proposal-view-toggle__btn { padding: 0.28rem 0.68rem; font-size: 0.8rem; } .proposal-view-toggle--main-switch { position: relative; /* Variable-width tabs (each sized to its label). The moving pill is measured from the active button's own box (offsetLeft / offsetWidth in app.js), so it always slides to one exact FROM->TO target and resizes to the destination tab's width. */ } .proposal-view-toggle--main-switch .proposal-view-toggle__indicator { position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; /* left + width come from the inline style (app.js) and are deliberately animated as LAYOUT properties, never transform. This element lives inside body { zoom: var(--ui-zoom) }, and Chromium runs composited transform animations without the ancestor zoom factor: the pill drew ~11% (zoom 0.9) too far right mid-slide, then snapped back when the final style committed -- the "jump past the tab, settle back" bug. Main-thread left/width get the zoom applied on every frame. */ border-radius: 999px; background: var(--color-card); box-shadow: var(--shadow-sm); transition: left 0.24s var(--ease-out-soft), width 0.24s var(--ease-out-soft); pointer-events: none; z-index: 0; } .proposal-view-toggle--main-switch .proposal-view-toggle__btn { position: relative; z-index: 1; } /* The moving indicator provides the active bg; suppress the per-button one here only. Keep the weight identical to the inactive state (600): bolding the active tab widened it on selection, which reflowed the tab strip and made the pill's measured target shift mid-slide. The pill + primary colour already mark the active tab, so the widths stay stable and the pill slides to one target. */ .proposal-view-toggle--main-switch .proposal-view-toggle__btn--active { background: transparent; font-weight: 600; } /* ---------------------------------------------------------- Perguntas placeholder card (when no perguntas generated yet) ---------------------------------------------------------- */ .proposal-perguntas-placeholder { margin-top: 0.5rem; background: var(--color-card); border: 1px dashed var(--color-border); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; } .proposal-perguntas-placeholder__inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 360px; margin: 0 auto; } .proposal-perguntas-placeholder__icon { width: 40px; height: 40px; color: var(--color-border); } .proposal-perguntas-placeholder__title { font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); margin: 0; } .proposal-perguntas-placeholder__text { font-size: 0.82rem; color: var(--color-muted); line-height: 1.5; margin: 0; } /* ============================================================ MÓDULOS GRID — aba Perguntas ============================================================ */ /* Paleta de cores dos módulos (índice 0–12) */ :root { --modulo-cor-0: oklch(45% 0.09 250); /* Dados do contrato — azul */ --modulo-cor-1: oklch(45% 0.09 160); /* Funções — verde-teal */ --modulo-cor-2: oklch(45% 0.08 140); /* Remuneração — verde */ --modulo-cor-3: oklch(47% 0.09 42); /* Jornada — laranja */ --modulo-cor-4: oklch(43% 0.09 24); /* Adicionais legais — vermelho-laranja */ --modulo-cor-5: oklch(42% 0.08 12); /* Saúde — vermelho */ --modulo-cor-6: oklch(44% 0.08 330); /* Estabilidades — rosa */ --modulo-cor-7: oklch(42% 0.08 300); /* Assédio — roxo */ --modulo-cor-8: oklch(47% 0.08 220); /* Benefícios — azul-claro */ --modulo-cor-9: oklch(45% 0.08 200); /* Provas — ciano */ --modulo-cor-10: oklch(44% 0.08 270); /* Identificação — índigo */ --modulo-cor-11: oklch(42% 0.08 280); /* Addon — roxo-escuro */ --modulo-cor-12: oklch(50% 0.08 80); /* Fora do Roteiro — âmbar */ /* Ponto de origem da animação de expansão */ --modulo-origin-x: 50vw; --modulo-origin-y: 50vh; } /* ── Grid container ───────────────────────────────────────── */ .proposal-modulos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.95rem; padding: 0.65rem 0 1.25rem; } @media (max-width: 899px) and (min-width: 600px) { .proposal-modulos-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .proposal-modulos-grid { grid-template-columns: 1fr; gap: 0.65rem; } } /* ── Card colapsado ───────────────────────────────────────── */ .proposal-modulo-card { position: relative; isolation: isolate; border: 1px solid color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 24%, var(--color-border) 76%); border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.28s var(--ease-out-soft), box-shadow 0.28s ease, border-color 0.28s ease, opacity 0.2s ease; background: var(--color-card); box-shadow: 0 1px 1px rgba(40, 32, 24, 0.04), 0 10px 24px rgba(40, 32, 24, 0.08); min-height: 144px; display: flex; flex-direction: column; outline: none; } .proposal-modulo-card::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0.46rem; background: linear-gradient(180deg, color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 92%, white 8%), color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 72%, var(--color-accent) 28%)); box-shadow: 0.34rem 0 1.3rem color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 20%, transparent); } .proposal-modulo-card::after { content: none; } .proposal-modulo-card:hover, .proposal-modulo-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 46%, var(--color-border) 54%); box-shadow: 0 2px 2px rgba(40, 32, 24, 0.04), 0 16px 34px rgba(40, 32, 24, 0.12), 0 0 0 4px color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 16%, transparent); } /* Quando outro card está expandido: dim */ .proposal-modulos-grid--has-expanded .proposal-modulo-card { opacity: 0.5; pointer-events: none; transform: none; } /* ── Header do card ───────────────────────────────────────── */ .proposal-modulo-card__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 0.95rem 1rem 0.45rem 1.25rem; color: var(--color-primary-dark); font-weight: 600; font-size: 0.92rem; gap: 0.55rem; background: transparent; min-height: 62px; } .proposal-modulo-card__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-family); font-size: 1.16rem; line-height: var(--lh-snug); font-weight: 600; letter-spacing: var(--tracking-normal); color: var(--color-primary-dark); } .proposal-modulo-card__chevron { display: none; align-items: center; justify-content: center; width: auto; height: auto; margin-top: 0.02rem; background: transparent; color: color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 70%, var(--color-primary-dark) 30%); font-size: 0.78rem; opacity: 0.78; flex-shrink: 0; transition: transform 0.28s var(--ease-out-soft), opacity 0.28s ease; } .proposal-modulo-card:hover .proposal-modulo-card__chevron, .proposal-modulo-card:focus-visible .proposal-modulo-card__chevron { transform: translateX(2px); opacity: 1; } /* Bullet de sugestão IA */ .proposal-modulo-card__ai-dot { width: 9px; height: 9px; margin-top: 0.38rem; border-radius: 50%; background: color-mix(in oklch, var(--color-accent) 88%, white 12%); box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 18%, transparent), 0 0 14px color-mix(in oklch, var(--color-accent) 42%, transparent); flex-shrink: 0; animation: ai-dot-pulse 2s ease-in-out 3; } @keyframes ai-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.62; transform: scale(0.76); } } /* ── Corpo do card ────────────────────────────────────────── */ .proposal-modulo-card__body { position: relative; padding: 0.6rem 1rem 0.95rem 1.25rem; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; } .proposal-modulo-card__contador { font-size: 0.74rem; font-weight: 500; color: var(--color-text-secondary); } /* Barra de progresso */ .proposal-modulo-card__progress { position: relative; height: 0.38rem; background: color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 9%, var(--color-border-light) 91%); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(40, 32, 24, 0.08); } .proposal-modulo-card__progress-fill { position: relative; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 92%, var(--color-primary-dark) 8%), color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 76%, var(--color-accent) 24%)); transition: width 0.48s var(--ease-out-soft); overflow: hidden; } .proposal-modulo-card__progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent); transform: translateX(-120%); transition: transform 0.62s ease; } .proposal-modulo-card:hover .proposal-modulo-card__progress-fill::after, .proposal-modulo-card:focus-visible .proposal-modulo-card__progress-fill::after { transform: translateX(120%); } /* ── Estados do card ──────────────────────────────────────── */ /* Completo */ .proposal-modulo-card--complete .proposal-modulo-card__progress-fill { background: var(--color-success); } .proposal-modulo-card--complete { border-color: color-mix(in oklch, var(--color-success) 34%, var(--color-border) 66%); background: var(--color-card); } .proposal-modulo-card--complete::before { background: linear-gradient(180deg, color-mix(in oklch, var(--color-success) 88%, white 12%), color-mix(in oklch, var(--color-success) 62%, var(--color-accent) 38%)); } /* Addon */ .proposal-modulo-card--addon { border-style: double; background: var(--color-card); } /* Fora do Roteiro */ .proposal-modulo-card--fora-roteiro { border-style: dashed; background: var(--color-card); } /* ── Accordion mobile (< 600px) ───────────────────────────── */ @media (max-width: 599px) { .proposal-modulo-card { min-height: auto; border-radius: 8px; } .proposal-modulo-card__header { padding: 0.72rem 0.82rem 0.35rem 1.08rem; font-size: 0.8rem; min-height: 48px; } .proposal-modulo-card__title { font-size: 1.08rem; } .proposal-modulo-card__body { padding: 0.35rem 0.82rem 0.72rem 1.08rem; } /* Corpo expandido mobile — inline */ .proposal-modulo-card__accordion-body { padding: 0.6rem 0.82rem 0.85rem 1.08rem; border-top: 1px solid color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 16%, var(--color-border-light) 84%); background: color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 5%, transparent); } } /* ── Módulo expandido: variação do approval-modal de Documentos ─ */ .proposal-modulos-overlay { z-index: 270; } .proposal-modulo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; backdrop-filter: blur(4px); z-index: 1; } .proposal-modulo-nav:hover { background: rgba(255, 255, 255, 0.32); transform: translateY(-50%) scale(1.06); } .proposal-modulo-nav:active { transform: translateY(-50%) scale(0.96); } .proposal-modulo-nav svg { width: 1.4rem; height: 1.4rem; } .proposal-modulo-nav--prev { left: max(1rem, calc((100vw - min(96vw, 1280px)) / 2 - 4rem)); } .proposal-modulo-nav--next { right: max(1rem, calc((100vw - min(96vw, 1280px)) / 2 - 4rem)); } @media (max-width: 768px) { .proposal-modulo-nav { width: 2.4rem; height: 2.4rem; } .proposal-modulo-nav--prev { left: 0.5rem; } .proposal-modulo-nav--next { right: 0.5rem; } .proposal-modulo-nav svg { width: 1.1rem; height: 1.1rem; } } /* Cor do módulo como filete superior (timbre de papel), não faixa lateral */ .proposal-modulo-expanded { border-top: 3px solid var(--modulo-cor, var(--color-primary)); } .proposal-modulo-expanded--closing { opacity: 0; transition: opacity 0.18s ease; } /* Header do card expandido */ .proposal-modulo-expanded__header { background: linear-gradient( 180deg, color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 8%, var(--color-card) 92%) 0%, color-mix(in oklch, var(--modulo-cor, oklch(45% 0.08 250)) 3%, var(--color-card) 97%) 100% ); } .proposal-modulo-expanded__title { font-size: 1rem; } .proposal-modulo-expanded__contador-detail { font-size: 0.72rem; color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; } /* Corpo scrollável do card expandido */ .proposal-modulo-expanded__body { min-height: 0; } /* Sub-seção dentro do card expandido */ .proposal-modulo-secao-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: 0.75rem 0 0.35rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0.5rem; position: sticky; top: calc(-1 * var(--space-3)); background: var(--color-bg-subtle); z-index: 1; } /* Sub-seção especial: sugeridas pela IA */ .proposal-modulo-secao--sugeridas { background: var(--color-warning-bg); border-radius: 8px; padding: 0.5rem 0.75rem 0.6rem; /* gap below the suggested box (above the next section, e.g. "Perguntas respondidas"). This is the effective knob: the next section's margin-top collapses against it, and the header's own margin-top can't grow this gap past the section-gap value — so set the separation here. */ margin-bottom: 1.75rem; border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent); } .proposal-modulo-secao--sugeridas .proposal-modulo-secao-header { background: var(--color-warning-bg); color: var(--color-warning-hover); border-bottom-color: color-mix(in srgb, var(--color-warning) 40%, transparent); } /* ── Filtros da aba ───────────────────────────────────────── */ .proposal-modulos-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .proposal-modulos-filter-chip { padding: 0.25rem 0.7rem; border-radius: 20px; border: 1px solid var(--color-border); background: var(--color-bg-subtle); font-size: 0.75rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; color: var(--color-text-secondary); } .proposal-modulos-filter-chip--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ── Chips de módulos concluídos (quando hideCompleted) ───── */ .proposal-modulos-completed-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } .proposal-modulo-chip-completo { font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 12px; background: var(--color-success-bg); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); color: var(--color-success-hover); cursor: pointer; } /* ── prefers-reduced-motion ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .proposal-modulo-card:hover { transform: none; } .proposal-modulo-card, .proposal-modulo-card::after, .proposal-modulo-card__chevron, .proposal-modulo-card__progress-fill, .proposal-modulo-card__progress-fill::after, .proposal-transition--enter, .proposal-transition--leave { transition: none; } .proposal-modulo-card__ai-dot { animation: none; } .proposal-modulo-card:hover .proposal-modulo-card__progress-fill::after, .proposal-modulo-card:focus-visible .proposal-modulo-card__progress-fill::after { transform: translateX(-120%); } .proposal-modulo-expanded { animation: none; opacity: 1; transform: scale(1); } .proposal-modulo-expanded--closing { animation: none; } } /* ========== MIC TEST MODAL ========== */ .proposal-btn--icon { padding: 0.4rem 0.55rem; } .proposal-btn--icon svg { width: 16px; height: 16px; } .mic-test-modal { width: min(96vw, 640px); max-width: 640px; height: min(720px, 90vh); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .mic-test-modal__header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .mic-test-modal__title-row { display: flex; align-items: center; gap: 0.5rem; } .mic-test-modal__icon-wrap { color: var(--color-primary); display: inline-flex; } .mic-test-modal__icon-wrap svg { width: 18px; height: 18px; } .mic-test-modal__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text); } .mic-test-modal__close { background: transparent; border: none; cursor: pointer; color: var(--color-text-secondary); width: 32px; height: 32px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .mic-test-modal__close:hover { background: var(--color-bg-secondary); color: var(--color-text); } .mic-test-modal__close svg { width: 18px; height: 18px; } .mic-test-modal__body { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 0; min-height: 0; } .mic-test-modal__footer { padding: 0.875rem 1.25rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 0.5rem; } .mic-test-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .mic-test-row__label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); } .mic-test-select { flex: 1; max-width: 320px; padding: 0.45rem 0.65rem; border: 1px solid var(--color-border); background: var(--color-bg-primary); color: var(--color-text); border-radius: var(--radius-md); font-family: var(--font-family); font-size: 0.85rem; } .mic-test-permission { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-secondary); } .mic-test-permission__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .mic-test-permission--granted { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); } .mic-test-permission--denied { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, transparent); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); } .mic-test-permission--pending { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); } .mic-test-section { display: flex; flex-direction: column; gap: 0.4rem; } .mic-test-section__label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); display: flex; align-items: center; gap: 0.4rem; } .mic-test-section__hint { font-size: 0.72rem; font-weight: 500; color: var(--color-text-tertiary, var(--color-text-secondary)); opacity: 0.8; } .mic-test-wave { position: relative; height: 96px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); overflow: hidden; } .mic-test-wave__canvas { width: 100%; height: 100%; display: block; } .mic-test-wave__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); font-size: 0.8rem; pointer-events: none; text-align: center; padding: 0 1rem; } .mic-test-meter { height: 6px; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; } .mic-test-meter__fill { height: 100%; background: linear-gradient(90deg, var(--color-success), var(--color-warning) 70%, var(--color-danger)); transition: width 80ms linear; } .mic-test-error { background: color-mix(in srgb, var(--color-danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent); color: var(--color-danger); padding: 0.5rem 0.75rem; border-radius: var(--radius-md); font-size: 0.82rem; } /* VoIP capture device selector in session toolbar */ .voip-device-select { max-width: 200px; padding: 0.3rem 0.5rem; border: 1px solid var(--color-border); background: var(--color-bg-primary); color: var(--color-text); border-radius: var(--radius-md); font-family: var(--font-family); font-size: 0.78rem; height: 30px; cursor: pointer; } .voip-device-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* ===== Audio test modal — tabs + VoIP panel ===== */ .mic-test-modal__tabs { display: flex; gap: 0.25rem; padding: 0.5rem 1.25rem 0; border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); } .mic-test-modal__tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); margin-bottom: -1px; } .mic-test-modal__tab:hover { color: var(--color-text); } .mic-test-modal__tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .voip-test-status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ADR-006 modal redesign — helper-first VoIP tab. */ .voip-modal-status { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 0.75rem; font-size: 0.86rem; font-weight: 600; } .voip-modal-status__label { flex: 0 1 auto; } .voip-modal-recovery { padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-secondary); margin-bottom: 0.75rem; font-size: 0.86rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } .voip-modal-recovery p { margin: 0; } .voip-modal-recovery--warning { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); color: var(--color-warning-hover); } .voip-modal-recovery--error { background: var(--color-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); color: var(--color-danger-hover); } /* ADR-006: helper-probe indicator in "Configurar entrevista". The three states (checking / ready / not-installed) crossfade inside one grid cell so the container height tracks the active line without vertical doubling during the opacity fade. */ .voip-config-helper { display: grid; margin-top: var(--space-2); } .voip-config-helper__line { grid-area: 1 / 1; margin-top: 0; } /* Indeterminate spinner while the loopback probe runs. Inherits the line's muted color via currentColor. */ .voip-config-spinner { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; animation: voip-config-spin 0.7s linear infinite; } @keyframes voip-config-spin { to { transform: rotate(360deg); } } /* Checkmark that draws itself in when the "pronto" state resolves. */ .voip-config-check { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; } .voip-config-check__tick { stroke-dasharray: 26; stroke-dashoffset: 26; animation: voip-config-tick-draw 0.34s var(--ease-out-soft) 0.06s forwards; } @keyframes voip-config-tick-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .voip-config-spinner { animation: none; } .voip-config-check__tick { animation: none; stroke-dashoffset: 0; } } .voip-modal-picker { padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .voip-modal-picker__label { font-size: 0.82rem; font-weight: 600; color: var(--color-muted); } .voip-modal-picker__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .voip-modal-picker__select { flex: 1; min-width: 140px; } .voip-modal-picker__last-test { font-size: 0.82rem; } .voip-modal-advanced { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; } .voip-modal-advanced__toggle { width: 100%; text-align: left; background: var(--color-bg-secondary); border: none; padding: 0.65rem 0.85rem; font-size: 0.86rem; font-weight: 600; color: var(--color-text); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; } .voip-modal-advanced__toggle:hover { background: var(--color-bg-tertiary, var(--color-bg-secondary)); } .voip-modal-advanced__chevron { width: 16px; height: 16px; transition: transform var(--transition-fast); flex-shrink: 0; } .voip-modal-advanced__chevron--open { transform: rotate(90deg); } .voip-modal-advanced__body { padding: 0.65rem 0.85rem 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; } .voip-modal-advanced__hint { margin: 0; font-size: 0.8rem; color: var(--color-muted); } .voip-modal-advanced__btn { align-self: flex-start; } /* Drag-and-drop overlay for anexos */ .anexo-drop-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); pointer-events: none; } .anexo-drop-overlay__card { background: var(--color-surface); color: var(--color-text); border: 2px dashed var(--color-primary); border-radius: 16px; padding: 2rem 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35); max-width: 420px; text-align: center; } .anexo-drop-overlay__icon { width: 48px; height: 48px; color: var(--color-primary); } .anexo-drop-overlay__title { font-size: 1.15rem; font-weight: 600; } .anexo-drop-overlay__hint { font-size: 0.9rem; opacity: 0.7; } /* ===================================================================== Perguntas — countdown comet sweep around Gerar button (Gerar1 & Gerar2) -------------------------------------------------------------------- A single SVG is stroked twice: a faint full-perimeter track, and a bright dashed trail that travels clockwise from the 12-o'clock tick. The trail is one continuous segment (≈22% of the perimeter) with stacked drop-shadows for a soft comet glow. Animation is driven by CSS keyframes and re-synced via inline animation-delay in JS when the element re-mounts so its phase matches perguntasAutoSecondsLeft. ===================================================================== */ .gerar-com-ring { /* Warm brown — complement of the button's primary blue (orange family, darkened/desaturated). Contrasts both the blue button and the light page background without competing with either. */ --gerar-trail-color: var(--color-accent-hover); position: relative; display: flex; isolation: isolate; } .gerar-com-ring .sutile-query__submit { position: relative; z-index: 1; flex: 1; } .gerar-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; } .gerar-ring-track { fill: none; stroke: rgba(0, 0, 0, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; } /* Trail's stroke-dasharray is driven inline by the `trailStyle` getter on each render — no CSS animation. This guarantees Gerar1 and Gerar2 stay in sync (single source of truth: perguntasAutoSecondsLeft) and survive tab/visibility changes without a visual restart. */ .gerar-ring-trail { fill: none; stroke: var(--gerar-trail-color); stroke-width: 2.5; stroke-linecap: round; stroke-opacity: 0.7; stroke-dasharray: 0 100; vector-effect: non-scaling-stroke; transition: stroke-dasharray 100ms linear; } /* Tick at 12 o'clock — quiet anchor for the start (and end) of the lap. */ .gerar-ring-tick { position: absolute; top: -2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gerar-trail-color); opacity: 0.65; pointer-events: none; z-index: 3; } @media (prefers-reduced-motion: reduce) { .gerar-ring-trail { transition: none; opacity: 0.35; } } /* Paused: desaturate the trail to a muted slate so it reads as "frozen" rather than "ticking down". Trail length stays put because perguntasAutoSecondsLeft stops decrementing while perguntasAutoPaused is true. */ .gerar-ring-trail--paused { stroke: var(--color-muted); stroke-opacity: 0.55; } /* ===================================================================== Perguntas — auto-run pause toggle (anchored to Gerar1 ring + Gerar2 FAB) ===================================================================== */ .gerar-auto-pause { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; background: var(--color-card); color: var(--color-text-secondary); font-size: 10px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); z-index: 4; transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .gerar-auto-pause:hover { background: var(--color-bg-subtle); color: var(--color-text); } .gerar-auto-pause:active { transform: scale(0.92); } .gerar-auto-pause--paused { background: var(--color-warning-bg); color: var(--color-warning-hover); border-color: var(--color-warning); } .gerar-auto-pause--paused:hover { background: var(--color-warning-bg); } /* Float variant: teleported into while the Módulos overlay is open so its position: fixed escapes .sutile-query's backdrop-filter trap. Inherits the inline ring's geometry from gerar1FloatStyle; the drop shadow lifts it visually off the overlay backdrop. */ .gerar-com-ring--float { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); border-radius: 8px; isolation: isolate; } .gerar-com-ring--float:hover .sutile-query__submit:not(:disabled) { transform: translateY(-1px); transition: transform 0.15s ease; } /* ===================================================================== Resumo view ===================================================================== */ .resumo-stale-notice { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; margin-bottom: 0.75rem; background: var(--color-warning-light); border: 1px solid var(--color-warning); border-radius: 8px; font-size: 0.8rem; color: var(--color-warning-hover); } .resumo-regenerate-fab { position: absolute; bottom: 0.85rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem; font-size: 0.75rem; font-weight: 500; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--color-border); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); z-index: 1; } .resumo-regenerate-fab:hover { background: var(--color-card); border-color: var(--color-primary); color: var(--color-primary); } /* === Linha do Tempo Sidebar ============================================ */ .proposal-layout--with-timeline { /* Inline :style attribute already drives the grid columns; this class exists as a hook for future component-level tweaks. */ } .proposal-timeline { position: relative; background: var(--color-card); border-left: 1px solid var(--color-border); overflow: hidden; min-height: 0; display: flex; flex-direction: column; /* Sits beside .proposal-main inside .proposal-layout's grid; the parent grid manages width. */ } .proposal-timeline--collapsed { /* Grid keeps a 0-width slot for the aside so the toggle stays on row 1. Let the toggle (left: -14px) poke out into the main column area instead of getting clipped by the default overflow: hidden. */ overflow: visible; } .proposal-timeline__toggle { position: absolute; top: calc(46px + 76px + 12px); /* clear topbar + controls bar */ left: -14px; width: 28px; height: 28px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-card); box-shadow: 0 2px 6px oklch(0% 0 0 / 0.08); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--color-muted); z-index: 5; padding: 0; transition: background 120ms ease, color 120ms ease; } .proposal-timeline__toggle:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .proposal-timeline__body { padding: calc(46px + 76px + 12px) 1rem 2rem 1.5rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .proposal-timeline__header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-light); } .proposal-timeline__title { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); margin: 0; letter-spacing: 0.01em; } .proposal-timeline__partial-flag { font-size: 0.65rem; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-warning-bg); color: var(--color-warning-hover); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .proposal-timeline__list { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; } .proposal-timeline__list::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient( to bottom, var(--color-border) 0%, var(--color-accent) 100% ); border-radius: 1px; } .proposal-timeline__item { position: relative; padding: 0 0 1.25rem 0.875rem; } .proposal-timeline__item:last-child { padding-bottom: 0.25rem; } .proposal-timeline__dot { position: absolute; left: -18px; top: 5px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-card); border: 2px solid var(--color-accent); box-shadow: 0 0 0 3px var(--color-card); } .proposal-timeline__date { display: block; font-size: 0.72rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0.04em; text-transform: lowercase; font-variant-numeric: tabular-nums; margin-bottom: 2px; } .proposal-timeline__desc { margin: 0; font-size: 0.85rem; line-height: 1.35; color: var(--color-text); } /* Incerto: undated event bounded by adjacent dated neighbors. No date row; description floats inline between the two anchors. */ .proposal-timeline__item--incerto .proposal-timeline__desc { font-style: italic; color: var(--color-muted); } .proposal-timeline__item--incerto .proposal-timeline__dot { opacity: 0.55; transform: scale(0.7); border-style: dashed; } .proposal-timeline__empty { font-size: 0.85rem; color: var(--color-muted); font-style: italic; margin: 0.5rem 0 0 0; } .proposal-timeline__loading { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.25rem; } .proposal-timeline__skeleton { height: 32px; border-radius: var(--radius-sm); background: linear-gradient( 90deg, var(--color-bg-secondary) 0%, var(--color-bg) 50%, var(--color-bg-secondary) 100% ); background-size: 200% 100%; animation: tl-skeleton 1.4s ease-in-out infinite; } @keyframes tl-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 900px) { .proposal-timeline { display: none !important; } } /* ==================================================================== Stage-2 enrichment sidebar (Viabilidade + Petição, desktop only) Sister of .proposal-timeline; shares the right grid slot of .proposal-layout. Hidden on mobile — the inline enrichment panels inside each mobile tab handle that breakpoint. ==================================================================== */ .proposal-layout--with-enrichment { /* Mirror of .proposal-layout--with-timeline — hook for future tweaks. */ } .proposal-enrichment-sidebar { position: relative; background: var(--color-card); border-left: 1px solid var(--color-border); overflow: hidden; min-height: 0; display: flex; flex-direction: column; } .proposal-enrichment-sidebar--collapsed { overflow: visible; } .proposal-enrichment-sidebar__toggle { position: absolute; top: calc(46px + 76px + 12px); /* clear topbar + controls bar */ left: -14px; width: 28px; height: 28px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-card); box-shadow: 0 2px 6px oklch(0% 0 0 / 0.08); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--color-muted); z-index: 5; padding: 0; transition: background 120ms ease, color 120ms ease; } .proposal-enrichment-sidebar__toggle:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .proposal-enrichment-sidebar__body { padding: calc(46px + 76px + 12px) 1rem 2rem 1.5rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .proposal-enrichment-sidebar__header { margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-light); } .proposal-enrichment-sidebar__title { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); margin: 0; letter-spacing: 0.01em; } /* Tighten enrichment-panel spacing when rendered inside the sidebar so the column doesn't waste vertical room on the wider .enrichment-panel defaults (which were sized for inline placement under the markdown). */ .proposal-enrichment-sidebar .enrichment-panel { margin-top: 0.75rem; padding: 0.75rem; } .proposal-enrichment-sidebar .enrichment-panel:first-of-type { margin-top: 0; } .proposal-enrichment-sidebar .enrichment-panel__title { font-size: 0.85rem; } @media (max-width: 900px) { /* Mobile keeps the inline enrichment panels — the sidebar is desktop-only. */ .proposal-enrichment-sidebar { display: none !important; } } @media print { body::before { display: none; } /* drop grain overlay */ .sidebar, .proposal-topbar, .proposal-controls-bar, .proposal-view-toggle, .peticao-edit-cta-cluster { display: none !important; } .peticao-streaming-preview--final { border: none; max-width: none; padding: 0; font-size: 12pt; line-height: 1.6; color: #000; background: #fff; } .peticao-streaming-preview--final h1, .peticao-streaming-preview--final h2, .peticao-streaming-preview--final h3 { break-after: avoid; } .peticao-streaming-preview--final p { orphans: 3; widows: 3; } }