/* Generated from checked-in ordered modules; do not edit. */
/* css/modules/responsive/tools-responsive-max-width-1024px.css */ /* Tools platform, approved Phase 3 integration */ .tools-route { --tools-accent: #0767c7; --tools-ink: #0b2544; --tools-muted: #53677e; --tools-line: rgba(25, 91, 151, 0.18); background: #f4f8fc; color: var(--tools-ink); } .tools-page { overflow: clip; } .tools-slide, .tools-catalog { position: relative; isolation: isolate; min-height: min(100dvh, 941px); background: #eef5fb; } .tools-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; } .tools-frame, .process-hero-inner, .process-result-inner { position: relative; min-height: min(100dvh, 941px); display: flex; align-items: center; padding-top: clamp(96px, 9vw, 142px); padding-bottom: clamp(56px, 7vw, 112px); } .tools-frame--left { justify-content: flex-start; } .tools-frame--right { justify-content: flex-end; } .tools-copy { width: min(58%, 760px); } .tools-copy h1, .process-hero-copy h1 { max-width: 14ch; margin: 0 0 20px; font-size: clamp(42px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.045em; } .tools-copy h2, .process-report-copy h2 { margin: 0 0 18px; font-size: clamp(36px, 4.1vw, 60px); line-height: 1.04; letter-spacing: -0.035em; } .tools-lead, .process-hero-copy > p { max-width: 620px; margin: 0 0 28px; color: var(--tools-muted); font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; } .tools-catalog { min-height: 0; padding: clamp(88px, 8vw, 128px) 0; } .tools-catalog-inner { position: relative; } .tools-section-head { max-width: 760px; margin-bottom: 38px; } .tools-section-head h2, .process-inputs-head h2 { margin: 0 0 14px; font-size: clamp(34px, 4vw, 58px); line-height: 1.06; letter-spacing: -0.035em; } .tools-section-head p, .process-inputs-head p { margin: 0; color: var(--tools-muted); font-size: 18px; } .tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tools-card { overflow: hidden; border: 1px solid var(--tools-line); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(31, 89, 139, .11); } .tools-card img { display: block; width: 100%; aspect-ratio: 16/7; object-fit: cover; } .tools-card > div { padding: 23px; } .tools-card h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.18; } .tools-card p { min-height: 3.1em; margin: 0 0 18px; color: var(--tools-muted); line-height: 1.52; } .tools-card a, .tools-card span { color: var(--tools-accent); font-weight: 750; text-decoration: none; } .tools-card--active { border-color: rgba(7,103,199,.46); } .tools-card--active a:focus-visible, .tools-card--active a:hover { text-decoration: underline; } .tools-router-head { padding-top: clamp(82px, 8vw, 128px); text-align: center; } .tools-router-head h2 { margin: 0 0 12px; font-size: clamp(36px, 4.4vw, 64px); } .tools-router-head p { max-width: 650px; margin: 0 auto 24px; color: var(--tools-muted); font-size: 19px; } .tools-router-head .hero-actions { justify-content: center; } .process-hero-inner { justify-content: space-between; gap: 48px; } .process-hero-copy { width: min(58%, 760px); } .process-preview { width: min(31%, 360px); padding: 28px; border: 1px solid rgba(7,103,199,.24); border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 22px 60px rgba(31,89,139,.15); } .process-preview span, .process-preview small { display: block; color: var(--tools-muted); } .process-preview strong { display: block; margin: 12px 0 8px; font-size: clamp(28px,3vw,44px); line-height: 1; } .process-inputs-inner { position: relative; padding-top: clamp(72px,7vw,112px); padding-bottom: 48px; } .process-inputs-head { max-width: 720px; margin-bottom: 230px; } .process-input-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 22px; border: 1px solid var(--tools-line); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 20px 56px rgba(31,89,139,.13); } .process-input-form label, .tool-lead-form label { display: grid; gap: 8px; color: #183b60; font-weight: 700; } .process-input-form input, .tool-lead-form input { width: 100%; min-height: 48px; border: 1px solid #8ba8c4; border-radius: 10px; background: #fff; color: #0b2544; padding: 10px 12px; font: inherit; } .process-input-form input:focus, .tool-lead-form input:focus { outline: 3px solid rgba(7,103,199,.2); border-color: var(--tools-accent); } .process-input-form small { color: #5a6d80; font-size: 12px; font-weight: 500; } .process-form-error { grid-column: 1/-1; min-height: 1.4em; margin: 0; color: #a52828; } .process-result-inner { display: block; padding-top: clamp(80px,8vw,126px); } .process-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .process-metrics article { min-height: 170px; padding: 26px; border: 1px solid var(--tools-line); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(31,89,139,.1); } .process-metrics span, .process-metrics small { display: block; color: var(--tools-muted); } .process-metrics strong { display: block; margin: 12px 0 8px; font-size: clamp(27px,3vw,42px); line-height: 1.08; } .process-class { display: block; margin: 22px 0 12px; color: var(--tools-accent); font-size: clamp(26px,3vw,42px); line-height: 1.1; } .process-module-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; } .process-module-list span { padding: 9px 13px; border: 1px solid rgba(7,103,199,.28); border-radius: 999px; background:#fff; color:#164d7f; font-weight:700; } .process-disclaimer { color: var(--tools-muted); font-size: 14px; } .process-report-copy { width: min(58%, 720px); } .process-report-copy > p { color: var(--tools-muted); font-size: 18px; } .tool-lead-form { margin-top: 24px; padding: 24px; border: 1px solid var(--tools-line); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 20px 56px rgba(31,89,139,.13); } .tool-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tool-lead-consent { grid-template-columns: auto 1fr !important; align-items: start; margin: 18px 0; font-weight: 500 !important; line-height: 1.4; } .tool-lead-consent input { width: 20px; min-height: 20px; margin-top: 2px; } .tool-lead-honeypot { position: absolute; left: -9999px; } .tool-lead-status { min-height: 1.5em; margin: 14px 0 0; color: var(--tools-muted); } .tool-lead-status[data-state="success"] { color: #166534; } .tool-lead-status[data-state="error"] { color: #a52828; } .tool-lead-form button:disabled { opacity: .62; cursor: wait; } @media (max-width: 1024px) { .tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 1024px) { .process-input-form { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 1024px) { .process-inputs-head { margin-bottom: 190px; } } @media (max-width: 780px) { .tools-bg { display: none !important; } } @media (max-width: 780px) { .tools-slide, .tools-catalog { min-height: 0; background: #f4f8fc; } } @media (max-width: 780px) { .tools-frame, .process-hero-inner, .process-result-inner { min-height: 0; padding-top: 92px; padding-bottom: 64px; } } @media (max-width: 780px) { .tools-copy, .process-hero-copy, .process-report-copy { width: 100%; } } @media (max-width: 780px) { .tools-copy h1, .process-hero-copy h1 { max-width: none; font-size: clamp(38px,11vw,54px); } } @media (max-width: 780px) { .tools-grid, .process-metrics, .process-input-form, .tool-lead-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .tools-card img { aspect-ratio: 16/9; object-fit: contain; background:#eaf2f9; } } @media (max-width: 780px) { .tools-router { padding-bottom: 64px; } } @media (max-width: 780px) { .tools-router-head { text-align: left; } } @media (max-width: 780px) { .tools-router-head p { margin-left:0; } } @media (max-width: 780px) { .tools-router-head .hero-actions { justify-content:flex-start; } } @media (max-width: 780px) { .process-hero-inner { display:block; } } @media (max-width: 780px) { .process-preview { width:100%; margin-top:28px; } } @media (max-width: 780px) { .process-inputs-inner { padding-top:72px; padding-bottom:64px; } } @media (max-width: 780px) { .process-inputs-head { margin-bottom:28px; } } @media (max-width: 780px) { .process-input-form { padding:18px; } } @media (max-width: 780px) { .process-result-inner { padding-top:72px; } } @media (max-width: 780px) { .process-metrics article { min-height:0; } } @media (max-width: 780px) { .process-report { padding-bottom:64px; } } @media (max-width: 780px) { .process-module-list span { border-radius:10px; } } .tools-card-action { appearance: none; border: 0; background: transparent; color: var(--accent, #0b65d8); cursor: pointer; font: inherit; font-weight: 700; padding: 0; text-align: left; } .tool-dialog { width: min(1040px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; box-shadow: 0 30px 90px rgba(5, 24, 48, .35); } .tool-dialog::backdrop { background: rgba(5, 20, 38, .72); backdrop-filter: blur(4px); } .tool-dialog-shell { position: relative; padding: clamp(24px, 4vw, 48px); color: #102a43; background: #f7fafc; } .tool-dialog-close { position: absolute; z-index: 2; top: 16px; right: 18px; width: 42px; height: 42px; border: 1px solid #cad7e4; border-radius: 50%; background: #fff; color: #17324d; font-size: 28px; cursor: pointer; } .tool-dialog-header { max-width: 760px; margin-bottom: 28px; } .tool-dialog-header h2 { margin: 6px 0 10px; font-size: clamp(28px, 4vw, 48px); line-height: 1.05; } .tool-engine-form { display: grid; gap: 22px; } .tool-engine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } .tool-engine-form label { display: grid; gap: 7px; font-weight: 650; } .tool-engine-form input, .tool-engine-form textarea, .tool-engine-form select { width: 100%; border: 1px solid #b9cadd; border-radius: 12px; background: #fff; color: #102a43; font: inherit; padding: 12px 14px; } .tool-engine-form textarea { resize: vertical; min-height: 130px; } .tool-engine-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .tool-engine-preview div { display: grid; gap: 5px; min-height: 116px; padding: 16px; border: 1px solid #d5e1ed; border-radius: 16px; background: #fff; } .tool-engine-preview span, .tool-engine-preview small, .tool-file-field small { color: #60758a; font-size: 13px; } .tool-engine-preview strong { font-size: clamp(18px, 2.2vw, 25px); line-height: 1.15; } .tool-file-field { padding: 16px; border: 1px dashed #9ab6d2; border-radius: 14px; background: #edf5fc; } .tool-engine-submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .tool-engine-submit p { margin: 0; max-width: 620px; color: #294d70; } .dialog-open { overflow: hidden; } @media (max-width: 700px) { .tool-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; } } @media (max-width: 700px) { .tool-dialog-shell { min-height: 100%; padding: 24px 18px 40px; } } @media (max-width: 700px) { .tool-dialog-header { padding-right: 42px; } }
/* css/modules/components/tools-ai-form-components.css */ .tool-engine-form[hidden], .tool-progress[hidden], .tool-result[hidden], [data-booking-open][hidden], [data-booking-panel][hidden] { display: none; } .tool-engine-wide small, .tool-file-field small { color: #526b82; font-size: 13px; font-weight: 400; line-height: 1.45; } .tool-dialog-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .tool-file-field { display:grid; gap:7px; } .tool-file-picker { display:flex; min-height:48px; flex-wrap:wrap; align-items:center; gap:10px; cursor:pointer; } .tool-file-picker>span:first-child { display:inline-flex; min-height:44px; align-items:center; padding:0 14px; border:1px solid rgba(30,91,184,.25); border-radius:10px; color:#174f9d; background:#f4f8fd; font-weight:650; } .tool-file-picker>span:last-child { color:#526b82; font-size:13px; } .tool-file-picker input { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .tool-file-picker:focus-within>span:first-child { outline:3px solid rgba(43,107,209,.35); outline-offset:3px; } .tool-lead-consent { font-size:14px; line-height:1.35; } .tool-task-composer { display: grid; overflow: hidden; border: 1px solid #b8c9d8; border-radius: 16px; background: #fff; } .tool-task-composer:focus-within { border-color: #1976b9; outline: 3px solid rgba(25, 118, 185, .2); } .tool-task-composer textarea { width: 100%; min-height: 168px; margin: 0; padding: 16px 18px 12px; resize: vertical; border: 0; border-radius: 0; outline: 0; background: transparent; } .tool-task-actions { min-width: 0; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 4px 10px 10px; } .tool-task-help { grid-column: 1 / -1; color: #284860; } .tool-task-help summary { width: fit-content; min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: 4px; } .tool-task-help summary:hover { color: #0f5d91; } .tool-task-help summary:focus-visible { outline: 2px solid #1976b9; outline-offset: 3px; border-radius: 3px; } .tool-task-help ul { margin: 0 0 8px; padding-left: 22px; } .tool-task-help li + li { margin-top: 6px; } .tool-voice-button { width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #284860; cursor: pointer; flex: 0 0 46px; } .tool-voice-button:hover,.tool-voice-button:focus-visible { background: #edf5fb; outline: 2px solid #1976b9; outline-offset: 1px; } .tool-voice-button:active { transform: scale(.96); } .tool-voice-button:disabled { opacity: .55; cursor: not-allowed; } .tool-voice-icon { flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tool-voice-icon[hidden] { display: none; } .tool-voice-stop-mark { fill: currentColor; stroke: none; } .tool-voice-button[data-state="recording"] { color: #b42318; background: #fff1f0; } .tool-task-actions span { color: #526b82; } .tool-task-actions > [data-voice-status] { min-width: 0; display: flex; align-items: center; min-height: 44px; font-size: 13px; line-height: 1.35; } .tool-task-actions > [data-voice-status][hidden] { display: none; } .tool-voice-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tool-voice-meter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } .tool-voice-meter[hidden] { display: none; } .tool-voice-waveform { display: inline-flex; align-items: center; gap: 3px; width: 45px; height: 28px; color: #b42318; } .tool-voice-waveform[hidden] { display: none; } .tool-voice-waveform i { width: 3px; height: 20px; border-radius: 3px; background: currentColor; transform: scaleY(var(--voice-level, .2)); transform-origin: center; transition: transform 80ms linear; } .tool-voice-timer { min-width: 92px; color: #284860; font-variant-numeric: tabular-nums; font-weight: 700; } .tool-voice-timer[data-warning="soon"] { color: #a15c00; } .tool-voice-timer[data-warning="critical"] { color: #b42318; font-weight: 850; } [data-task-sufficiency][data-state="details"] { color: #8a4b00; } [data-task-sufficiency][data-state="enough"] { color: #256548; } [data-task-sufficiency][data-state="excellent"] { color: #0f5d91; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .tool-voice-waveform i { transition: none; transform: scaleY(.45); } } .tool-contact-fields { margin: 0; padding: 18px; border: 1px solid #d5e1ed; border-radius: 16px; } .tool-contact-fields legend { padding: 0 7px; font-weight: 750; } .tool-lead-consent input { width: 22px; height: 22px; margin: 1px 0 0; } .tool-lead-consent { grid-template-columns: 22px 1fr; align-items: center; font-size: 14px; line-height: 1.45; } .tool-callout { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; background: #eaf3fc; color: #294d70; } .tool-progress, .tool-result { display: grid; gap: 18px; min-height: 320px; align-content: center; } .tool-progress ol { display: grid; gap: 10px; margin: 0; padding-left: 28px; } .tool-progress li { color: #60758a; } .tool-progress li[aria-current="step"] { color: #102a43; font-weight: 750; } .tool-result-actions, .tool-booking-slots { display: flex; flex-wrap: wrap; gap: 12px; } [data-booking-panel] { display: grid; gap: 12px; padding: 16px; border: 1px solid #d5e1ed; border-radius: 16px; background: #fff; } .booking-confirmation { padding: 20px; border: 1px solid rgba(31, 93, 212, .24); border-radius: 16px; background: rgba(31, 93, 212, .06); } .booking-confirmation h4 { margin: 0 0 12px; } .booking-confirmation p { margin: 6px 0; } .booking-confirmation-schedule { color: var(--color-primary, #1f5dd4); font-weight: 700; } .proposal-access { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #eef4fa; } .proposal-access-card { width: min(640px, 100%); display: flex; flex-wrap: wrap; gap: 16px; padding: clamp(24px, 6vw, 54px); border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(5, 24, 48, .16); } .proposal-access-card h1, .proposal-access-card p { flex-basis: 100%; margin: 0; } .proposal-access-card .btn { min-height: 44px; } .proposal-access [hidden] { display: none !important; } .estimate-page { padding: clamp(24px, 4vw, 52px) 0 72px; background: linear-gradient(180deg, #f3f8fd 0, #fff 34%); } .estimate-layout { width: min(calc(100% - 48px), 1240px); max-width: none; display: block; } .estimate-form-surface { min-width: 0; padding: clamp(22px, 4vw, 46px); border: 1px solid #d9e4ee; border-radius: 24px; background: #f8fbfe; box-shadow: 0 22px 60px rgba(19, 49, 79, .1); } .estimate-form-surface .tool-dialog-header { max-width: 820px; margin-bottom: 28px; } .estimate-form-surface .tool-dialog-header h1 { margin: 8px 0 14px; color: #10284c; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; } .estimate-form-surface .tool-dialog-header > p:last-of-type { margin: 0; color: #294d70; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; } .estimate-start-action { display: none; } .estimate-page h1, .estimate-form-surface h2, .estimate-form-surface h3 { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .estimate-form-surface fieldset, .estimate-form-surface .tool-result, .estimate-form-surface .tool-result-actions { min-width: 0; max-width: 100%; } .estimate-benefits { margin: 0 0 28px; padding: 18px; border: 1px solid #d5e4f3; border-radius: 18px; background: #edf5ff; color: #17324d; } .estimate-benefits h2 { margin: 0 0 12px; font-size: 20px; }.estimate-benefits ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }.estimate-benefits li { display:grid; gap:3px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.72); }.estimate-benefits li span { color:#526b82; font-size:13px; line-height:1.35; }.estimate-benefits p { margin:12px 2px 0; color:#526b82; font-size:13px; } .tool-result--compact { max-width: 820px; padding: clamp(22px, 4vw, 40px); border: 1px solid #d9e4ee; border-radius: 22px; background: #fff; box-shadow: 0 20px 55px rgba(15, 48, 78, .11); } .tool-result--compact h3 { margin: 6px 0 10px; font-size: clamp(28px, 4vw, 42px); line-height: 1.06; }.tool-result--compact > p { max-width: 720px; } .tool-result-summary { display: grid; gap: 10px; margin: 22px 0; }.tool-result-summary-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 16px; border-radius: 14px; background: #f1f6fb; }.tool-result-summary-row span { color: #526b82; font-size: 13px; }.tool-result-summary-row strong { color: #17324d; } .tool-result-assumption, .tool-result-delivery { font-size: 13px; color: #526b82; } @media (min-width: 2200px) { .estimate-layout { width:min(calc(100% - 160px),1800px); } .estimate-form-surface { padding:56px 64px; } .estimate-form-surface .tool-dialog-header { max-width:1100px; } } @media (max-width: 1024px) { .estimate-layout { width: min(calc(100% - 28px), 820px); }.estimate-benefits ul { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 700px) { .estimate-page { padding-top: 18px; }.estimate-form-surface { padding: 20px 14px; border-radius: 18px; }.estimate-benefits { padding:14px; }.estimate-benefits ul { grid-template-columns:1fr; gap:7px; }.tool-result-summary-row { grid-template-columns: 1fr; gap: 4px; } .estimate-form-surface .tool-dialog-header { margin-bottom: 22px; }.estimate-form-surface .tool-dialog-header h1 { font-size: 30px; } .estimate-form-surface h2, .tool-result--compact h3 { max-width: 100%; font-size: 26px; } .tool-result--compact { padding: 18px 14px; } .tool-engine-grid { grid-template-columns: 1fr; } .tool-task-composer textarea { min-height: 150px; padding: 14px 14px 12px; } .tool-task-actions { min-height: 58px; padding: 4px 8px 8px; } .tool-task-actions > [data-voice-status] { flex: 1 1 auto; } .tool-voice-meter { max-width: 100%; } .tool-dialog-close { width: 44px; height: 44px; } .tool-result-actions .btn, .tool-booking-slots .btn { width: 100%; min-height: 44px; } } @media (max-width: 480px) { .estimate-page { padding-top: 10px; } .estimate-layout { width: min(calc(100% - 16px), 820px); } .estimate-form-surface { padding: 16px 12px; } .estimate-form-surface .tool-dialog-header { margin-bottom: 14px; } .estimate-form-surface .tool-dialog-header h1 { margin: 5px 0 9px; font-size: 27px; line-height: 1.06; } .estimate-form-surface .tool-dialog-header > p:last-of-type { font-size: 15px; line-height: 1.4; } .estimate-start-action { display: inline-flex; min-height: 44px; margin-top: 12px; } .estimate-benefits { margin-bottom: 16px; padding: 10px; } .estimate-benefits h2 { margin-bottom: 8px; font-size: 18px; } .estimate-benefits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .estimate-benefits li { gap: 2px; padding: 7px 8px; } .estimate-benefits li span { font-size: 12px; } .estimate-benefits p { margin-top: 8px; font-size: 12px; line-height: 1.35; } } @media (prefers-reduced-motion: reduce) { .tool-dialog *, .proposal-access * { scroll-behavior: auto; transition: none !important; animation: none !important; } } .client-panel-entry { min-height:44px; padding:10px 14px; border:1px solid rgba(30,91,184,.2); border-radius:999px; color:#173f79; background:#eef4fc; font:600 14px/1.2 inherit; cursor:pointer; } .client-panel-entry[hidden] { display:none!important; } .client-panel-entry:focus-visible,.client-panel :focus-visible { outline:3px solid rgba(43,107,209,.42); outline-offset:3px; } .client-panel { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:131; width:min(420px,calc(100vw - 32px)); max-height:min(680px,calc(100vh - 32px)); overflow:auto; padding:20px; border:1px solid rgba(30,91,184,.18); border-radius:20px; color:#10284c; background:#fff; box-shadow:0 20px 56px rgba(15,40,76,.24); } .client-panel[hidden] { display:none!important; } .client-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; } .client-panel-head h2 { margin:0; font-size:22px; } .client-panel-head button { width:44px; height:44px; border:0; border-radius:50%; background:#eef4fc; color:#173f79; font-size:28px; cursor:pointer; } .client-panel>p { margin:8px 0 16px; color:#5b6d85; font-size:14px; } .client-panel ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .client-panel li { display:grid; gap:2px; padding:10px 12px; border-radius:12px; background:#f4f7fb; } .client-panel li span { color:#5b6d85; font-size:14px; } .client-panel-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .assistant-workspace { box-sizing:border-box; width:min(1040px,calc(100vw - 40px)); height:min(820px,calc(100dvh - 40px)); max-width:none; max-height:none; padding:0; overflow:hidden; border:1px solid rgba(30,91,184,.18); border-radius:24px; color:#10284c; background:#fff; box-shadow:0 28px 88px rgba(8,25,47,.34); } .assistant-workspace [hidden] { display:none!important; } .assistant-workspace::backdrop { background:rgba(8,25,47,.58); } .assistant-workspace__panel { box-sizing:border-box; display:flex; height:100%; min-height:0; flex-direction:column; padding:22px 24px; } .assistant-workspace__panel>header { display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:1px solid rgba(30,91,184,.12); } .assistant-workspace__panel>header h2,.assistant-workspace__panel>header p { margin:0; } .assistant-workspace__panel>header #assistant-description { margin-top:4px; color:#5b6d85; font-size:14px; } .assistant-workspace__panel>header button { width:46px; height:46px; border:0; border-radius:50%; color:#173f79; background:#eef4fc; font-size:28px; cursor:pointer; } .assistant-log { box-sizing:border-box; display:flex; min-height:0; flex:1; flex-direction:column; gap:12px; overflow:auto; overscroll-behavior:contain; padding:22px 4px; scroll-behavior:smooth; } .assistant-message { width:fit-content; max-width:82%; padding:12px 15px; border-radius:16px; background:#f4f7fb; } .assistant-message-user { align-self:flex-end; background:#e8f1ff; } .assistant-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; } .assistant-message ul { margin:8px 0 0; padding-left:18px; } .assistant-message a { color:#174f9d; text-decoration:underline; } .assistant-status { flex:none; min-height:20px; margin:0 2px 8px; color:#5b6d85; font-size:14px; } .assistant-composer { flex:none; padding:10px; border:1px solid rgba(30,91,184,.28); border-radius:18px; background:#fff; } .assistant-composer:focus-within { border-color:rgba(30,91,184,.28); box-shadow:none; } .assistant-composer input,.assistant-composer textarea { box-sizing:border-box; display:block; width:100%; min-height:52px; padding:5px 6px 10px; border:0; outline:0; font:inherit; } .assistant-composer textarea { min-height:76px; max-height:220px; resize:vertical; } .assistant-composer>label { display:block; margin:0 6px 4px; color:#526981; font-size:13px; } .assistant-composer__rail { display:flex; align-items:center; justify-content:space-between; gap:12px; } .assistant-composer__rail span { color:#6c7b91; font-size:12px; } .assistant-consent { display:flex; align-items:flex-start; gap:10px; margin-top:12px; font-size:14px; } .assistant-consent input { flex:0 0 auto; width:20px; height:20px; } .assistant-consent-screen { flex:none; padding:18px; border:1px solid rgba(30,91,184,.18); border-radius:18px; background:#f7faff; } .assistant-consent-screen p { margin:0 0 10px; } .assistant-consent-screen label { display:flex; align-items:flex-start; gap:10px; margin:14px 0; } .assistant-consent-screen input { width:22px; height:22px; flex:none; } .assistant-consent-screen button { min-height:44px; margin-right:8px; } .assistant-lifecycle { flex:none; padding:6px 0; border-bottom:1px solid rgba(30,91,184,.1); } .assistant-lifecycle summary { display:flex; min-height:44px; align-items:center; width:max-content; color:#174f9d; font:650 13px/1.2 inherit; cursor:pointer; } .assistant-lifecycle>div { display:flex; flex-wrap:wrap; gap:6px 12px; padding-bottom:6px; } .assistant-lifecycle button,.assistant-terminal button { min-height:44px; border:0; background:transparent; color:#174f9d; font:600 13px/1.2 inherit; text-decoration:underline; cursor:pointer; } .assistant-retention { margin:0 2px 8px; color:#6c7b91; font-size:12px; } .assistant-field-error { margin:2px 6px 8px; color:#a52b2b; font-size:13px; } .assistant-terminal { flex:none; padding:16px; border:1px solid rgba(168,79,37,.25); border-radius:18px; background:#fff9f5; } .assistant-terminal p { margin:0 0 6px; } .assistant-back,.assistant-suggested { min-height:44px; margin-top:12px; border:0; background:transparent; color:#174f9d; font:600 14px/1.2 inherit; text-decoration:underline; cursor:pointer; } .assistant-workspace :focus-visible { outline:3px solid rgba(43,107,209,.42); outline-offset:3px; } .assistant-workspace .assistant-composer input:focus-visible,.assistant-workspace .assistant-composer textarea:focus-visible { outline:0; } @media (max-width:600px) { .assistant-workspace { width:100vw; height:100dvh; margin:0; border:0; border-radius:0; } .assistant-workspace__panel { padding:10px 10px 8px; } .assistant-workspace__panel>header { padding:2px 2px 10px; } .assistant-log { padding:14px 2px; } .assistant-message { max-width:92%; } .assistant-lifecycle>div { display:grid; grid-template-columns:1fr; } .assistant-composer__rail span { display:none; } .assistant-composer__rail { justify-content:flex-end; } } .engagement-chooser { box-sizing:border-box; width:min(680px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; padding:22px; border:1px solid rgba(30,91,184,.18); border-radius:22px; color:#10284c; background:#fff; box-shadow:0 24px 70px rgba(15,40,76,.3); } .engagement-chooser::backdrop { background:rgba(8,25,47,.56); } .engagement-chooser__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .engagement-chooser__head h2,.engagement-chooser__head p { margin:0; } .engagement-chooser__head>button { flex:0 0 44px; width:44px; height:44px; border:0; border-radius:50%; color:#173f79; background:#eef4fc; font-size:28px; cursor:pointer; } .engagement-chooser>p { color:#5b6d85; } .engagement-chooser__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .engagement-chooser__actions>a,.engagement-chooser__actions>button { box-sizing:border-box; display:flex; min-width:0; min-height:76px; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:13px 14px; border:1px solid rgba(30,91,184,.18); border-radius:14px; color:#173f79; background:#f7faff; text-align:left; text-decoration:none; font:inherit; cursor:pointer; } .engagement-chooser__actions span { color:#5b6d85; font-size:13px; line-height:1.35; } .engagement-chooser__actions :disabled { cursor:progress; opacity:.65; } .engagement-chooser__contacts { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:14px 0 0; font-size:14px; } .engagement-chooser__contacts a { color:#174f9d; text-decoration:underline; overflow-wrap:anywhere; } .engagement-chooser__status { min-height:20px; margin:12px 0 0; font-size:14px; } .engagement-chooser :focus-visible { outline:3px solid rgba(43,107,209,.42); outline-offset:3px; } .booking-modal { box-sizing:border-box; width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:22px; border:1px solid rgba(30,91,184,.18); border-radius:22px; color:#10284c; background:#fff; box-shadow:0 24px 70px rgba(15,40,76,.3); } .booking-modal::backdrop { background:rgba(8,25,47,.56); } .booking-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .booking-modal__head h2,.booking-modal__head p { margin:0; } .booking-modal__head>button { width:44px; height:44px; border:0; border-radius:50%; color:#173f79; background:#eef4fc; font-size:28px; cursor:pointer; } .booking-recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; } .booking-recovery-grid>label:not(.booking-consent) { display:grid; gap:6px; font-weight:600; } .booking-recovery-grid input:not([type="checkbox"]):not(.booking-trap) { box-sizing:border-box; width:100%; min-height:48px; padding:10px 12px; border:1px solid #b8c7d9; border-radius:10px; font:inherit; } .booking-recovery-grid>.booking-trap,.booking-recovery-grid>.booking-consent,.booking-recovery-grid>.btn { grid-column:1/-1; } .booking-modal :focus-visible { outline:3px solid rgba(43,107,209,.42); outline-offset:3px; } @media (max-width:600px) { .booking-modal { width:calc(100vw - 20px); padding:16px; } .booking-recovery-grid { grid-template-columns:1fr; } } @media (max-width:560px) { .engagement-chooser { width:calc(100vw - 20px); padding:16px; } .engagement-chooser__actions { grid-template-columns:1fr; } } .assistant-typing { display:inline-flex; align-items:center; gap:6px; min-width:58px; min-height:28px; } .assistant-typing>span:not(.sr-only) { width:8px; height:8px; border-radius:50%; background:#3974c8; animation:assistant-dot 1.1s infinite ease-in-out; } .assistant-typing>span:nth-child(2) { animation-delay:.15s; } .assistant-typing>span:nth-child(3) { animation-delay:.3s; } @keyframes assistant-dot { 0%,60%,100% { transform:translateY(0); opacity:.35; } 30% { transform:translateY(-5px); opacity:1; } } @media (prefers-reduced-motion:reduce) { .assistant-typing>span:not(.sr-only) { animation:none; opacity:.75; } }
/* css/modules/responsive/tools-responsive-max-width-700px.css */ @media (max-width: 700px) { .tool-engine-grid, .tool-engine-preview { grid-template-columns: 1fr; } }