:root { /* --- Фирменные цвета бренда «Полис» (polisoms.ru) --- */ --polis-green: #76bf3f; /* Основной травянисто-зеленый (здоровье, ОМС) */ --polis-green-hover: #63a631; /* Активное состояние кнопок */ --polis-green-dark: #3b6b18; /* Темно-зеленый для ТЕКСТА на светлом фоне (WCAG AA > 5.5:1) */ --polis-green-light: #f2f8ed; /* Нежный зеленоватый фон подложек и чипов */ --polis-green-border: #c8e6b0; /* Границы зеленых элементов */ --polis-purple: #7f3f8d; /* Фирменный сливово-фиолетовый (логотип, шапки) */ --polis-purple-dark: #5b2866; /* Глубокий темно-фиолетовый */ --polis-purple-light: #f8f1fa; /* Нежный фиолетовый фон акцентов */ --polis-purple-border: #dfc2e6; /* Границы фиолетовых блоков */ /* Нейтральная и текстовая палитра */ /* Task 3.1 обоснование контрастности (WCAG 2.2): --polis-ink (#2d3134) на белом даёт ~13:1 — уровень AAA, поэтому основной текст (body, заголовки, значения) обязан использовать ink. --polis-muted (#69737d) на белом даёт ~4.9:1 — уровень AA; это допустимо ТОЛЬКО для второстепенных подписей/меток. Токен намеренно НЕ затемняется глобально, чтобы сохранить визуальную иерархию; важные значения — на ink. */ --polis-bg: #f7faf4; /* Общий экологичный фон страниц */ --polis-card-bg: #ffffff; /* Белоснежный фон карточек */ --polis-ink: #2d3134; /* Основной текст (глубокий антрацит, AAA ~13:1) */ --polis-muted: #69737d; /* Второстепенный текст и подписи (AA ~4.9:1) */ --polis-border: #e2e8df; /* Базовые разделители и границы */ /* Системные медицинские статусы */ --polis-amber: #e67e22; /* Ожидание, внимание */ --polis-amber-light: #fdf6ec; /* Подложка ожидания */ --polis-red: #d63031; /* Неотложные состояния, вызов скорой 112 */ --polis-red-light: #fdeeee; /* Подложка экстренной помощи */ /* Геометрия по стандарту polisoms.ru */ --radius-btn: 6px; /* Скругление кнопок и инпутов */ --radius-card: 12px; /* Скругление карточек и панелей */ --radius-pill: 999px; /* Скругление чипов и бейджей */ --shadow-sm: 0 2px 8px rgba(45, 49, 52, 0.05); --shadow-md: 0 6px 20px rgba(127, 63, 141, 0.07); --shadow-lg: 0 16px 40px rgba(45, 49, 52, 0.10); /* Типографика */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* --- Обратная совместимость (Task 1.2/3.1 уточнит компоненты) --- Старые имена токенов маппятся на новые брендовые значения, чтобы все существующие правила var(--polis-navy)/var(--polis-cyan)/... мгновенно подхватили фирменную палитру «Полис» без сине-бирюзовых остатков. */ --polis-cyan: var(--polis-green); --polis-cyan-dark: var(--polis-green-hover); --polis-navy: var(--polis-purple); --polis-soft: var(--polis-bg); --ink: var(--polis-ink); --muted: var(--polis-muted); font-family: var(--font-family); } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--polis-bg); font-family: var(--font-family); } button, input, select { font: inherit; } button { cursor: pointer; border: 0; } .shell { min-height: 100vh; padding: 24px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .brand { color: var(--polis-navy); font-weight: 800; letter-spacing: -.03em; } .brand span { color: var(--polis-cyan); } .brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; } .panel { background: var(--polis-card-bg); border: 1px solid var(--polis-border); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); } .select, .input { width: 100%; border: 1px solid var(--polis-border); border-radius: var(--radius-btn); padding: 11px 12px; color: var(--ink); background: white; transition: border-color .15s ease, box-shadow .15s ease; } .select:focus, .input:focus, .select:focus-visible, .input:focus-visible { outline: 0; border-color: var(--polis-green); box-shadow: 0 0 0 3px rgba(118, 191, 63, 0.18); } .label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; } /* Task 3.1 полировка: тактильная микроанимация нажатия (subtle, no bounce), плавное затухание тени и брендовое кольцо фокуса для клавиатурной a11y. */ .btn { border-radius: var(--radius-btn); padding: 11px 16px; font-weight: 750; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; } .btn:hover { box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(1px); box-shadow: none; } .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(118, 191, 63, 0.45); } .btn-primary { color: white; background: var(--polis-green); } .btn-primary:hover { background: var(--polis-green-hover); } .btn-navy { color: white; background: var(--polis-purple); } .btn-navy:hover { background: var(--polis-purple-dark); } .btn-danger { color: white; background: var(--polis-red); } .btn-ghost { color: var(--polis-ink); background: transparent; border: 1px solid var(--polis-border); } .btn-ghost:hover { border-color: var(--polis-green); color: var(--polis-green-dark); background: var(--polis-green-light); } .btn:disabled { cursor: not-allowed; opacity: .5; } /* «Вставить в ответ» (АРМ Координатора, design §3.3): фиолетовая контурная кнопка. */ #apply-draft { color: var(--polis-purple); background: white; border: 1px solid var(--polis-purple); } #apply-draft:hover { background: var(--polis-purple-light); border-color: var(--polis-purple); color: var(--polis-purple-dark); } .status-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--polis-green); font-size: 12px; font-weight: 750; } .status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(118, 191, 63, 0.13); animation: pulse 1.8s infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(118, 191, 63, 0); } } .widget-page { display: grid; place-items: center; min-height: 100vh; padding: 10px; background: linear-gradient(145deg, var(--polis-green-light), var(--polis-bg)); } .phone { display: flex; flex-direction: column; width: min(380px, 100%); height: 695px; max-height: calc(100vh - 20px); overflow: hidden; border: 8px solid var(--polis-purple-dark); border-radius: 28px; background: var(--polis-bg); box-shadow: 0 28px 70px rgba(45, 49, 52, 0.28); } .phone-head { flex: 0 0 auto; padding: 16px 16px 12px; color: white; background: linear-gradient(135deg, var(--polis-purple), var(--polis-purple-dark)); } .phone-head .brand { color: white; font-size: 16px; } .phone-head .brand span { color: var(--polis-green); } .phone-head .brand small { color: rgba(255, 255, 255, 0.90) !important; } .branch-select { margin-top: 10px; color: var(--ink); background: white; } .chat { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; scroll-behavior: smooth; } .bubble { max-width: 88%; padding: 11px 13px; border-radius: 16px; font-size: 13px; line-height: 1.45; word-break: break-word; } .bubble.assistant { align-self: flex-start; border: 1px solid var(--polis-border); border-bottom-left-radius: 5px; background: white; box-shadow: var(--shadow-sm); } .bubble.patient { align-self: flex-end; border-bottom-right-radius: 5px; color: white; background: linear-gradient(135deg, var(--polis-green), #61a330); } .quick-replies { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } .quick-replies button { border: 1px solid var(--polis-green-border); border-radius: var(--radius-pill); padding: 6px 9px; color: var(--polis-green-dark); background: var(--polis-green-light); font-size: 11px; font-weight: 700; } .quick-replies button:hover { background: #e5f3dc; } .card { margin: 0 14px 12px; padding: 14px; border-radius: var(--radius-card); background: white; box-shadow: var(--shadow-sm); } .card h2, .card h3 { margin: 0 0 8px; color: var(--polis-navy); font-size: 16px; } .card p { margin: 6px 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .consent { border-left: 4px solid var(--polis-amber); } .form-grid { display: grid; gap: 8px; } .ticket-card { border: 2px solid var(--polis-green); } .ticket-number { color: var(--polis-green-dark); font-size: 40px; font-weight: 850; line-height: 1; } .ticket-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .ticket-meta strong { display: block; color: var(--polis-navy); font-size: 13px; } .ticket-meta span { color: var(--muted); font-size: 11px; } .waiting { display: inline-flex; align-items: center; gap: 7px; color: var(--polis-green); font-size: 12px; font-weight: 750; } .waiting::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--polis-green); animation: pulse 1.5s infinite; } .alert { margin: 10px 14px; padding: 12px; border-radius: 14px; color: white; background: var(--polis-red); font-size: 12px; font-weight: 750; box-shadow: 0 12px 22px rgba(214, 48, 49, 0.33); } .hidden { display: none !important; } .dashboard { max-width: 1280px; margin: auto; } .dashboard-grid { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr); gap: 18px; } @media (max-width: 1100px) { .dashboard-grid { grid-template-columns: 1fr; } .active-card { min-height: auto; padding: 14px 18px; } .active-ticket { margin: 8px 0; font-size: 32px; } } .dashboard-card { padding: 20px; } .active-card { min-height: 220px; color: white; background: linear-gradient(145deg, var(--polis-purple), var(--polis-purple-dark)); } .active-card h2 { margin-top: 0; font-size: 16px; } .active-ticket { margin: 20px 0; font-size: 42px; font-weight: 850; } .table-wrap { overflow: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding: 11px 10px; color: var(--muted); background: var(--polis-bg); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } td { padding: 13px 10px; border-top: 1px solid var(--polis-border); } .badge { display: inline-flex; border-radius: var(--radius-pill); padding: 5px 8px; font-size: 10px; font-weight: 800; } .badge-waiting { color: #9c5b00; background: var(--polis-amber-light); } .badge-active { color: #8a4300; background: #fdf0e3; } .badge-done { color: var(--polis-green-dark); background: var(--polis-green-light); } .toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; } .empty { padding: 36px 20px; color: var(--muted); text-align: center; } .emulator { max-width: 860px; margin: auto; } .flow { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 8px; margin: 20px 0; } .flow-step { padding: 14px 8px; border-radius: var(--radius-card); color: var(--polis-navy); background: var(--polis-green-light); text-align: center; font-size: 12px; font-weight: 800; } .flow-arrow { color: var(--polis-cyan); text-align: center; font-size: 20px; } .log { min-height: 230px; max-height: 330px; overflow: auto; padding: 14px; border-radius: 14px; color: #cfe8ad; background: #16211d; font: 12px/1.5 ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; } .showcase-page { min-height: 100vh; color: white; background: #241a2b; } .showcase-page .topbar { position: sticky; top: 0; z-index: 20; padding: 18px 24px; margin: 0; border-bottom: 1px solid #ffffff18; background: #241a2b; } .showcase-page .brand { color: white; } .showcase-page .brand small { color: #cbb6d4; } .hub-controls { display: flex; align-items: center; gap: 10px; } .hub-controls .select { width: auto; min-width: 220px; } .hub-links { display: flex; gap: 8px; align-items: center; } .hub-links a, .hub-links .btn-analytics-nav { color: white; text-decoration: none; border: 1px solid #ffffff30; border-radius: 10px; padding: 9px 11px; font-size: 12px; font-weight: 700; background: transparent; cursor: pointer; font-family: inherit; line-height: 1.2; display: inline-flex; align-items: center; transition: all .15s ease; } .hub-links a:hover, .hub-links .btn-analytics-nav:hover { border-color: #a3e072; color: #a3e072; background: rgba(255,255,255,0.06); } .hub-links a:focus-visible, .hub-links .btn-analytics-nav:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(118, 191, 63, 0.55); } .triptych { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.35fr) minmax(300px, 1fr); gap: 14px; align-items: start; padding: 20px; } .frame { overflow: hidden; border: 1px solid #ffffff18; border-radius: 18px; background: #33263b; box-shadow: 0 20px 45px #00000030; } .frame-label { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; color: #d8c6df; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .frame iframe { display: block; width: 100%; height: 720px; border: 0; background: var(--polis-soft); } .frame:first-child iframe { height: 720px; } @media (max-width: 1050px) { .triptych { grid-template-columns: 1fr; max-width: 620px; margin: auto; } .triptych .frame iframe { height: 650px; } } @media (max-width: 700px) { .shell { padding: 14px; } .topbar, .toolbar { align-items: stretch; flex-direction: column; } .dashboard-grid { grid-template-columns: 1fr; } .flow { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); } .hub-controls { align-items: stretch; flex-direction: column; } .hub-controls .select { width: 100%; } .hub-links { flex-wrap: wrap; } .showcase-page .topbar { padding: 16px; } } /* Director Bar for Showcase (Master Presale Console) */ .director-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #1e1728; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 2px solid #76BF3F; box-shadow: 0 6px 24px rgba(0,0,0,0.45); padding: 8px 24px; color: #fff; min-height: 54px; position: sticky; top: 0; z-index: 1000; } .director-col { display: flex; align-items: center; } .scenario-col { flex: 0 0 auto; gap: 10px; } .director-badge { font-size: 11px; font-weight: 800; color: #76BF3F; letter-spacing: 0.06em; white-space: nowrap; } .director-select { background: #2b2338; color: #fff; border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; outline: none; } .director-select option { background: #1e1728; color: #fff; } .prompter-col { flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 0 16px; border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); } .step-meta { display: flex; align-items: center; gap: 8px; width: 100%; overflow: hidden; } .step-counter-pill { background: rgba(118,191,63,0.2); color: #8ed156; border: 1px solid rgba(118,191,63,0.45); border-radius: 12px; padding: 1px 8px; font-size: 10.5px; font-weight: 800; white-space: nowrap; } .step-title-text { font-size: 13px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .step-guidance-text { font-size: 11.5px; color: #cfc5d8; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .step-callout-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(118,191,63,0.25); border: 1px solid #76BF3F; color: #b6f380; margin-left: 6px; } .step-callout-pill.hidden { display: none; } .prompter-speaker-notes { font-size: 11px; color: #9fd06f; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-style: italic; } .prompter-speaker-notes.hidden { display: none; } .actions-col { flex: 0 0 auto; gap: 12px; } .playback-group { display: flex; align-items: center; gap: 6px; } .director-btn { border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .director-btn.primary { background: linear-gradient(135deg, #8ed156, #76BF3F); color: #12240a; } .director-btn.secondary { background: rgba(255,255,255,0.12); color: #fff; } .director-btn.accent { background: #7F3F8D; color: #fff; } .director-btn.accent.playing { background: #a557b3; } .director-btn.ghost { background: transparent; color: #cfc5d8; border: 1px solid rgba(255,255,255,0.15); } .director-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .director-btn:disabled { opacity: 0.4; cursor: not-allowed; } .layout-group { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.3); padding: 3px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); } .view-btn { background: rgba(255, 255, 255, 0.08); color: #cfd4d8; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .view-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .view-btn.active { background: #76BF3F; color: #12240a; border-color: #76BF3F; } .triptych.view-widget { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .triptych.view-widget > section:not(:nth-child(1)) { display: none !important; } .triptych.view-doctor { grid-template-columns: 1fr; max-width: 1360px; margin: 0 auto; } .triptych.view-doctor > section:not(:nth-child(2)) { display: none !important; } .triptych.view-mis { grid-template-columns: 1fr; max-width: 1000px; margin: 0 auto; } .triptych.view-mis > section:not(:nth-child(3)) { display: none !important; } .chat-input-bar { display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 7px; border: 1px solid var(--polis-green-border); border-radius: var(--radius-card); background: white; box-shadow: var(--shadow-sm); } .chat-input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 8px 9px; color: var(--ink); background: transparent; font-size: 13px; } .chat-input::placeholder { color: #94a3b8; } .chat-send-btn { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: white; background: var(--polis-cyan); transition: .2s ease; } .chat-send-btn:hover { background: var(--polis-cyan-dark); } .chat-send-btn:focus-visible, .chat-input:focus-visible { box-shadow: 0 0 0 3px rgba(118, 191, 63, 0.25); } .modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(45, 49, 52, 0.72); } .modal-card { width: min(560px, 100%); padding: 24px; } .modal-card h2 { margin: 0 0 6px; color: var(--polis-navy); } .modal-card p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.45; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .check-row { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12px; line-height: 1.4; } .check-row input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--polis-cyan); } .form-error { margin: 0; color: var(--polis-red); font-size: 12px; } .btn-cancel { color: var(--polis-red); background: #fff0f1; padding: 7px 9px; font-size: 11px; } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .analytics-panel { max-width: 1280px; margin: 0 auto; padding: 12px 20px; border: 1px solid rgba(118, 191, 63, 0.30); border-radius: 12px; color: #cfe8ad; background: #241a2b; font-size: 12px; font-weight: 700; } .analytics-panel b { color: #a3e072; } .operator-dashboard h1 { margin: 0; color: var(--polis-navy); font-size: 18px; } .operator-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.65fr); gap: 18px; min-height: 650px; } .operator-list-panel, .operator-chat-panel { padding: 18px; } .operator-filter-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .filter-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--polis-border); border-radius: var(--radius-pill); color: var(--muted); background: #fff; font-size: 12px; font-weight: 750; } .filter-tab:hover { border-color: var(--polis-green); color: var(--polis-green-dark); } .filter-tab:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(118, 191, 63, 0.45); } .filter-tab.active { color: var(--polis-green-dark); background: var(--polis-green-light); border-color: var(--polis-green); } .filter-tab span { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #f1f5f9; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; } .filter-tab.active span { background: var(--polis-cyan); color: #fff; } .badge-clinical { color: #8a1c2b; background: #ffe0e4; } .dialog-list { display: grid; gap: 8px; } .dialog-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px; border: 1px solid var(--polis-border); border-left: 3px solid transparent; border-radius: var(--radius-card); color: var(--ink); background: #fff; text-align: left; transition: background-color .15s ease, border-color .15s ease; } .dialog-item:hover { border-color: var(--polis-purple-border); background: var(--polis-purple-light); } .dialog-item:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(118, 191, 63, 0.45); } .dialog-item.selected { border-color: var(--polis-purple-border); border-left-color: var(--polis-purple); background: var(--polis-purple-light); } .dialog-item b, .dialog-item small { display: block; overflow: hidden; max-width: 190px; text-overflow: ellipsis; white-space: nowrap; } .dialog-item small { margin-top: 5px; color: var(--muted); font-size: 11px; } .operator-chat-panel { min-width: 0; } .operator-empty { display: grid; min-height: 580px; place-items: center; } .operator-chat-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--polis-border); } .operator-messages { display: flex; flex-direction: column; gap: 9px; max-height: 330px; overflow: auto; padding: 16px 0; } .operator-message { max-width: 80%; padding: 10px 13px; border-radius: 14px; background: #f8fafc; } .operator-message.patient { align-self: flex-end; background: #f2f8ed; } .operator-message.operator { align-self: flex-start; border-left: 3px solid var(--polis-cyan); } .operator-message span, .operator-message small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; } .operator-message p { margin: 5px 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; } .draft-card { margin-bottom: 16px; padding: 14px; border: 1px solid var(--polis-purple-border); border-radius: var(--radius-card); background: var(--polis-purple-light); } .draft-title { margin-bottom: 7px; color: var(--polis-purple); font-size: 12px; font-weight: 800; } .draft-card p { margin: 0 0 10px; color: var(--ink); font-size: 13px; line-height: 1.45; } /* Collapsed draft after the coordinator sends the reply (FR-27.5). */ .draft-card.draft-card-sent { padding: 9px 14px; border-color: #b8e6c4; background: #eefaf1; } .draft-card.draft-card-sent p, .draft-card.draft-card-sent #apply-draft { display: none; } .draft-card.draft-card-sent .draft-title { margin: 0; color: #2c7a45; } .draft-card.draft-card-sent .draft-title::after { content: "· ✓ Ответ отправлен"; margin-left: 6px; font-weight: 800; } .operator-reply-form .input { resize: vertical; } @media (max-width: 800px) { .operator-grid { grid-template-columns: 1fr; } .operator-empty { min-height: 180px; } .operator-messages { max-height: 260px; } } .widget-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; margin-top: 10px; } .profile-label { color: #d8c6df; font-size: 10px; font-weight: 750; } .profile-select { margin-top: 3px; padding: 8px; font-size: 11px; } .btn-new-session { padding: 9px 8px; color: #a3e072; border: 1px solid rgba(118, 191, 63, 0.55); background: #ffffff12; font-size: 11px; white-space: nowrap; } .btn-new-session:hover { background: #ffffff25; } .btn-tour-launch { padding: 9px 10px; color: #ffffff; border: 1px solid rgba(127, 63, 141, 0.7); background: #7F3F8D; font-size: 11px; font-weight: 700; white-space: nowrap; border-radius: 10px; cursor: pointer; } .btn-tour-launch:hover { filter: brightness(1.1); } .operator-reply-bubble { border-left: 3px solid var(--polis-cyan); } .operator-reply-bubble strong, .operator-reply-bubble span { display: block; } .operator-reply-bubble strong { margin-bottom: 5px; color: var(--polis-cyan-dark); font-size: 11px; } /* FR-72: closure marker appended after the coordinator's final answer. */ .conversation-closed-note { border-left: 3px solid var(--polis-green, #76BF3F); background: rgba(118, 191, 63, 0.10); font-size: 12px; line-height: 1.45; } .records-card .toolbar { align-items: start; margin-bottom: 8px; } .records-card .toolbar h2 { margin-bottom: 2px; } .records-card .toolbar p { margin: 0; } .record-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--polis-border); } .record-item b, .record-item small { display: block; } .record-item b { color: var(--polis-navy); font-size: 12px; } .record-item small { margin-top: 4px; color: var(--muted); font-size: 10px; } .record-cancel { padding: 8px 9px; font-size: 10px; white-space: nowrap; } /* ГОСТ Р 12.4.026-2015 / FR-31.1: сигнальный тревожный красный. НЕ перекрашивать в брендовые цвета. */ .emergency-alert { display: flex; flex-direction: column; gap: 6px; margin: 10px 14px; padding: 14px; border: 2px solid #a20d18; border-radius: var(--radius-card); color: white; background: var(--polis-red); font-size: 12px; line-height: 1.45; box-shadow: 0 12px 22px rgba(214, 48, 49, 0.33); } .emergency-alert b { font-size: 14px; } @media (max-width: 360px) { .widget-controls { grid-template-columns: 1fr; } } /* Sprint 01.3: compact patient widget and local slash command palette */ .phone { position: relative; } .phone-head { padding: 10px 14px 8px; } .branch-select { margin-top: 6px; } .widget-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .widget-controls .profile-label { min-width: 0; flex: 1 1 auto; } .profile-select { margin-top: 2px; padding: 6px 8px; } .quick-replies-wrapper { position: relative; flex: 0 0 auto; width: 100%; } /* Sprint 01.9 (DEF-01): quick replies wrap onto multiple lines instead of a single horizontally scrolling row, so full labels stay readable on 375px/768px viewports. */ .quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 8px; } .quick-replies.hidden { display: none; } .quick-replies.dragging { cursor: grabbing; } .quick-replies::-webkit-scrollbar { display: none; } .quick-replies button { flex: 0 1 auto; white-space: nowrap; padding: 5px 10px; font-size: 11px; cursor: pointer; user-select: none; } .chat { min-height: 320px; } .slash-popover { position: absolute; left: 16px; right: 16px; bottom: 62px; z-index: 25; display: flex; flex-direction: column; max-height: 180px; overflow-y: auto; border: 1px solid rgba(118, 191, 63, 0.25); border-radius: 14px; background: white; box-shadow: 0 -8px 24px rgba(45, 49, 52, 0.09); scrollbar-width: thin; } .slash-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: .15s ease; } .slash-item:last-child { border-bottom: 0; } .slash-item:hover, .slash-item.active { background: #e5f3dc; } .slash-cmd { min-width: 70px; color: var(--polis-cyan); font-size: 12px; font-weight: 800; } .slash-desc { color: var(--muted); font-size: 11px; } @media (max-width: 360px) { .widget-controls { display: flex; } .btn-new-session { padding-inline: 6px; } } /* Sprint 01.3: executive analytics dashboard */ .analytics-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; } .analytics-panel:focus-visible { outline: 3px solid rgba(118, 191, 63, 0.55); outline-offset: 2px; } .btn-analytics-open { flex: 0 0 auto; padding: 7px 11px; color: #a3e072; border: 1px solid rgba(118, 191, 63, 0.55); background: #ffffff12; font-size: 11px; } .btn-analytics-open:hover { background: #ffffff25; } .analytics-modal-card { width: min(980px, 100%); max-height: min(720px, calc(100vh - 32px)); overflow-y: auto; color: var(--ink); } .analytics-modal-card h2 { color: white; } .analytics-modal-card .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .analytics-modal-card .modal-head p { margin: 5px 0 0; color: #cbb6d4; } .analytics-close { padding: 5px 10px; color: white; background: #ffffff18; font-size: 18px; } .analytics-kpis { display: grid; grid-template-columns: 200px minmax(360px, 1.6fr) 220px; gap: 14px; } .analytics-kpi { min-height: 165px; padding: 16px; border: 1px solid var(--polis-border); border-radius: 15px; background: white; } .analytics-kpi h3 { margin: 0 0 12px; color: var(--polis-navy); font-size: 13px; } .kpi-value { color: var(--polis-cyan-dark); font-size: 30px; font-weight: 850; } .kpi-subtitle { margin-top: 5px; color: var(--muted); font-size: 11px; } .deflection-track { height: 9px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #e2e8f0; } .deflection-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--polis-cyan), #a3e072); transition: width .25s ease; } .scenario-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } /* Sprint 01.9 (FR-48 / DEF-03): cap the topics rating and scroll past ~10 items */ #modal-scenarios { max-height: 220px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; } .scenario-row { display: grid; grid-template-columns: minmax(180px, 1.8fr) minmax(60px, 1fr) 32px; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; overflow-x: hidden; } .scenario-row .scenario-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 600; } .scenario-bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: #f2f8ed; } .scenario-bar { width: 0; height: 100%; border-radius: inherit; background: var(--polis-cyan); } .analytics-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .analytics-metric { padding: 10px; border-radius: 10px; background: #f8fafc; } .analytics-metric small { display: block; color: var(--muted); font-size: 10px; } .analytics-metric strong { display: block; margin-top: 3px; color: var(--polis-navy); font-size: 16px; } .analytics-modal-card .modal-actions { justify-content: space-between; } .analytics-modal-card .modal-actions .right-actions { display: flex; gap: 8px; } @media (max-width: 700px) { .analytics-panel { align-items: flex-start; flex-direction: column; } .analytics-kpis { grid-template-columns: 1fr; } } /* Sprint 01.3: MIS integration pipeline pulse and controls */ .mis-source { margin-top: 12px; } .emulator-actions { display: grid; gap: 8px; margin-top: 14px; } .btn-mis-cancel { color: #7a4100; background: #ffe8bd; } .btn-mis-auto { color: white; background: var(--polis-navy); } .flow.pulse-active .flow-step { animation: mis-pulse .5s ease-in-out; } .flow.pulse-active .flow-arrow { animation: mis-arrow-pulse .5s ease-in-out; } @keyframes mis-pulse { 0%, 100% { color: var(--polis-navy); background: #f2f8ed; box-shadow: none; } 45% { color: white; background: var(--polis-cyan); box-shadow: 0 0 22px #a3e072; } } @keyframes mis-arrow-pulse { 45% { color: #a3e072; text-shadow: 0 0 14px #a3e072; } } @media (max-width: 700px) { .analytics-modal-card .modal-actions { align-items: stretch; flex-direction: column; } .analytics-modal-card .modal-actions .right-actions { justify-content: flex-end; } } #analytics-modal { z-index: 30; } /* Sprint 01.4: inline chat cards and a stable mobile viewport */ .phone { min-height: 0; } .chat { flex: 1 1 0; min-height: 0; overflow-y: auto; } .quick-replies { flex: 0 0 auto; } .chat-input-bar { flex: 0 0 auto; } .inline-records-bubble, .inline-ticket-bubble { width: min(96%, 360px); max-width: 96%; padding: 14px; } .inline-records-bubble h2 { margin: 0 0 2px; color: var(--polis-navy); font-size: 16px; } .inline-records-bubble p { margin: 0; color: var(--muted); font-size: 11px; } .inline-records-bubble .toolbar { margin-bottom: 8px; } .inline-records-bubble .records-list { min-width: 0; } .inline-ticket-bubble { border: 2px solid var(--polis-cyan); } .inline-ticket-bubble .ticket-number { font-size: 36px; } @media (max-width: 420px) { .inline-records-bubble, .inline-ticket-bubble { width: 100%; max-width: 100%; } .record-item { align-items: stretch; flex-direction: column; } .record-cancel { width: 100%; } } /* Sprint 01.5: conversational triage and inline consent/registration cards */ .inline-card { align-self: flex-start; width: min(96%, 360px); max-width: 96%; padding: 12px 14px; border: 1px solid rgba(118, 191, 63, 0.21); border-radius: 16px; background: white; box-shadow: var(--shadow-sm); } .inline-card.completed { opacity: .82; } .inline-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .inline-card-header strong { color: var(--polis-navy); font-size: 13px; } .inline-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; color: var(--polis-cyan-dark); background: #f2f8ed; font-size: 10px; font-weight: 800; } .inline-card p { margin: 6px 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .triage-actions { flex-direction: column; } .triage-choice { width: 100%; text-align: left; } .btn-sm { padding: 7px 12px; border-radius: 8px; font-size: 12px; } .input-sm { margin-top: 3px; padding: 6px 9px; border-radius: 8px; font-size: 12px; } .label-sm { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; } .inline-reg-form { display: grid; gap: 7px; } .inline-reg-form > .btn { width: 100%; margin-top: 2px; } .inline-confirm-bubble { border: 1px solid #f4a26155; background: #fffdf8; } .confirm-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .confirm-card-header .warning-icon { font-size: 16px; } .confirm-card-header strong { color: var(--polis-navy); font-size: 13px; } .inline-confirm-bubble p { margin: 6px 0; color: var(--ink); font-size: 12px; line-height: 1.45; } .soft-lock-notice { margin: 8px 0 4px; padding: 9px 11px; border-left: 3px solid var(--polis-amber); border-radius: 8px; background: #fef4e8; } .soft-lock-notice small { color: #8a5a1e; font-size: 11px; line-height: 1.5; } .confirm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .confirm-actions .btn { width: 100%; text-align: center; } .btn-warning { color: var(--polis-navy); background: #ffe8cc; } .btn-warning:hover { background: #ffd9a8; } @media (max-width: 420px) { .inline-card { width: 100%; max-width: 100%; } .inline-actions { flex-direction: column; } .inline-actions .btn { width: 100%; } } /* Apertum ticket status stepper (Sprint 01.6, FR-30.4) */ .ticket-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 12px 0 4px; } .ticket-step { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; position: relative; } .ticket-step + .ticket-step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: #d7e2ea; z-index: 0; } .ticket-step-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: var(--muted); font-size: 11px; font-weight: 800; z-index: 1; } .ticket-step-label { color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.15; } .ticket-step.done .ticket-step-dot { background: var(--polis-green); color: #fff; } .ticket-step.done + .ticket-step::before { background: var(--polis-green); } .ticket-step.current .ticket-step-dot { background: var(--polis-cyan); color: #fff; box-shadow: 0 0 0 4px rgba(118, 191, 63, 0.16); } .ticket-step.current .ticket-step-label { color: var(--polis-navy); } .ticket-stepper.terminal { opacity: .45; filter: grayscale(1); } /* --- Sprint 01.7 Task 3.1: визуальная полировка («причесывание») --- */ /* Типографическая гармония: комфортная межстрочная высота для читаемости и аккуратный трекинг заголовков. Селекторы и структура layout не меняются. */ body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .card h2, .card h3, .modal-card h2, .operator-dashboard h1, .inline-records-bubble h2, .analytics-kpi h3 { letter-spacing: -.01em; } /* Reduced motion: отключаем тактильные трансформации и брендовые анимации для пользователей, предпочитающих меньше движения (WCAG 2.3.3 / a11y). */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .btn:active { transform: none; } .status-dot::before, .waiting::before { animation: none; } .flow.pulse-active .flow-step, .flow.pulse-active .flow-arrow { animation: none; } .chat, .quick-replies, .slash-popover { scroll-behavior: auto; } } /* Sprint 01.8: multimodal attachment button, chip, and drag-and-drop */ .btn-attach { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--polis-cyan); background: var(--polis-soft, #f1f7ec); cursor: pointer; font-size: 17px; line-height: 1; transition: .2s ease; user-select: none; } .btn-attach:hover { background: rgba(118, 191, 63, 0.16); } .btn-attach:focus-within { box-shadow: 0 0 0 3px rgba(118, 191, 63, 0.25); } .attachment-chip { display: flex; align-items: center; gap: 8px; align-self: flex-end; max-width: 88%; padding: 9px 12px; border-radius: 16px; border-bottom-right-radius: 5px; background: var(--polis-cyan, #0aa1c7); color: white; font-size: 12px; } .attachment-chip .attachment-icon { flex: 0 0 auto; } .attachment-chip .attachment-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .attachment-chip .attachment-status { flex: 0 0 auto; font-size: 11px; opacity: 0.92; } .attachment-chip.failed { background: var(--polis-red, #d63031); } .attachment-chip.completed .attachment-status { font-weight: 700; } .chat.drag-over { outline: 2px dashed var(--polis-green, #76bf3f); outline-offset: -8px; background: rgba(118, 191, 63, 0.06); } /* Sprint 01.8: compact clinical digest accordion for the coordinator desk (FR-41) */ .clinical-digest-card { margin-bottom: 12px; border: 1px solid var(--polis-cyan, #0aa1c7); border-radius: var(--radius-card); background: #f2fbfd; overflow: hidden; } .clinical-digest-card .digest-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 13px; color: var(--polis-navy, #123); font-size: 12px; cursor: pointer; list-style: none; } .clinical-digest-card .digest-summary::-webkit-details-marker { display: none; } .clinical-digest-card .digest-summary::before { content: "▸"; margin-right: 2px; color: var(--polis-cyan, #0aa1c7); font-weight: 800; transition: transform .15s ease; } .clinical-digest-card[open] .digest-summary::before { transform: rotate(90deg); } .clinical-digest-card .digest-body { max-height: 150px; overflow-y: auto; padding: 4px 13px 12px; } .clinical-digest-card .digest-body p { margin: 4px 0; font-size: 12px; line-height: 1.45; color: var(--ink); } .badge-specialty { color: #0a6d84; background: #d3f1f8; } .badge-tone { color: #5a3ca6; background: #ece4fb; } .badge-flags { color: #2c7a45; background: #e2f6e8; } .badge-flags-alert { color: #8a1c2b; background: #ffe0e4; } /* Sprint 01.9 (FR-45.2): attachment staging chips above the input bar */ .attachment-staging-area { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 16px 6px; padding: 8px 10px; border: 1px solid var(--polis-green-border); border-radius: var(--radius-card); background: var(--polis-soft, #f1f7ec); } .attachment-staging-area.hidden { display: none; } .staging-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--polis-green-border); border-radius: var(--radius-pill, 999px); background: #fff; color: var(--polis-navy); font-size: 12px; max-width: 100%; } .staging-chip-icon { flex: 0 0 auto; } .staging-chip-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; font-weight: 650; } .staging-chip-size { flex: 0 0 auto; color: var(--muted); font-size: 11px; } .staging-chip .btn-remove-chip { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; color: var(--polis-red, #d63031); font-weight: 800; cursor: pointer; line-height: 1; } .staging-chip .btn-remove-chip:hover { opacity: .7; } /* Sprint 01.9 (FR-44.3): ticket card address/cabinet rows + cancelled grey state */ .ticket-meta .ticket-meta-wide { grid-column: 1 / -1; } .ticket-cancel-banner { margin-top: 12px; padding: 9px 11px; border-radius: 8px; border-left: 4px solid #94a3b8; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; } .ticket-cancel-banner.hidden { display: none; } .ticket-card.ticket-cancelled { border-color: #cbd5e1; background: #f8fafc; filter: grayscale(0.85); } .ticket-card.ticket-cancelled .ticket-number { color: #94a3b8; } .ticket-card.ticket-cancelled .waiting { color: #94a3b8; } .ticket-card.ticket-cancelled .waiting::before { background: #94a3b8; animation: none; } /* Sprint 01.9 (FR-47): patient call alert modal + pulsing stepper step 2 */ .call-alert-modal { position: absolute; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(45, 49, 52, 0.45); } .call-alert-modal.hidden { display: none; } .call-alert-card { width: min(94%, 320px); padding: 22px 20px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 18px 48px rgba(45, 49, 52, 0.28); border-top: 5px solid var(--polis-green, #76bf3f); } .call-alert-icon { font-size: 40px; line-height: 1; animation: pulse 1.2s infinite; } .call-alert-title { margin: 10px 0 6px; color: var(--polis-navy); font-size: 18px; } .call-alert-body { margin: 0 0 16px; color: var(--ink); font-size: 14px; line-height: 1.4; } .call-alert-card .btn { width: 100%; } .ticket-step.called-pulse .ticket-step-dot { background: var(--polis-green, #76bf3f); color: #fff; box-shadow: 0 0 0 0 rgba(118, 191, 63, 0.5); animation: callPulse 1.1s infinite; } @keyframes callPulse { 0% { box-shadow: 0 0 0 0 rgba(118, 191, 63, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(118, 191, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(118, 191, 63, 0); } } /* Sprint 01.9 (FR-44.2): Booking Wizard inline cards */ .booking-card, .booking-confirmed-card { width: min(96%, 360px); max-width: 96%; } .booking-hint { margin: 6px 0 10px; color: var(--ink); font-size: 13px; line-height: 1.4; } .booking-actions { display: flex; flex-wrap: wrap; gap: 6px; } .booking-doctor { margin-bottom: 10px; padding: 8px; border: 1px solid var(--polis-border); border-radius: 10px; background: var(--polis-soft, #f8fafc); } .booking-doctor-name { margin-bottom: 6px; color: var(--polis-navy); font-size: 12px; font-weight: 700; } .booking-cancel, .booking-cancel-record { margin-top: 10px; } .booking-confirm-form { display: flex; flex-direction: column; gap: 8px; } .booking-consent-label { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink); } .booking-consent-label input { margin-top: 2px; } .booking-summary { display: grid; gap: 6px; margin: 6px 0 4px; } .booking-summary > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; } .booking-summary span { color: var(--muted); font-size: 11px; } .booking-summary strong { color: var(--polis-navy); font-size: 13px; } /* Sprint 01.9 (FR-46): physician console patient cell, digest button, cancel modal, Side Drawer */ .patient-cell { display: flex; flex-direction: column; line-height: 1.25; } .patient-cell b { color: var(--polis-navy); font-size: 13px; } .patient-cell small { color: var(--muted); font-size: 11px; } /* Sprint 03.0 Polish Pass (FR-97, A-04): fixed queue table layout so patient names never wrap onto a second line in either «◫ Сплит» or «🩺 Врач». Only the symptom column is allowed to wrap. */ .dashboard-card table { table-layout: fixed; width: 100%; } .dashboard-card th:nth-child(1), .dashboard-card td:nth-child(1) { width: 76px; } /* Талон */ .dashboard-card th:nth-child(2), .dashboard-card td:nth-child(2) { width: 64px; } /* Время */ .dashboard-card td:nth-child(4) { white-space: normal; word-break: break-word; } /* Симптом — перенос разрешён */ .dashboard-card td { overflow: hidden; text-overflow: ellipsis; } .patient-cell b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .digest-row { font-size: 12px; padding: 6px 10px; white-space: nowrap; } .cancel-confirm-card { max-width: 420px; } .cancel-confirm-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .cancel-confirm-header h2 { margin: 0; color: var(--polis-navy); font-size: 18px; } .cancel-confirm-header .warning-icon { font-size: 22px; } .doctor-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; z-index: 1100; display: flex; flex-direction: column; background: #fff; box-shadow: -6px 0 24px rgba(45, 49, 52, 0.16); animation: drawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .doctor-drawer.hidden { display: none; } @keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(45, 49, 52, 0.35); } .drawer-scrim.hidden { display: none; } .drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--polis-border); } .drawer-patient-name { margin: 0; color: var(--polis-navy); font-size: 18px; } .drawer-patient-meta { margin-top: 4px; color: var(--muted); font-size: 12px; } .drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; } .drawer-section { margin-bottom: 18px; } .drawer-section h4 { margin: 0 0 8px; color: var(--polis-navy); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; } .drawer-text { color: var(--ink); font-size: 14px; line-height: 1.45; margin-bottom: 8px; } .drawer-findings-box, .drawer-draft-box { padding: 10px 12px; border-radius: 10px; background: var(--polis-soft, #f8fafc); border: 1px solid var(--polis-border); color: var(--ink); font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .drawer-safety-banner { margin-bottom: 14px; padding: 10px 12px; border-left: 4px solid var(--polis-red, #d63031); border-radius: 4px; background: #FFECEC; color: var(--polis-red, #d63031); font-size: 13px; font-weight: 600; } .drawer-safety-banner.hidden { display: none; } .drawer-attachments-list { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; } .drawer-attachment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--polis-border); border-radius: 8px; background: #fff; color: var(--polis-navy); font-size: 12px; text-decoration: none; } .drawer-attachment-chip:hover { background: var(--polis-soft, #f1f7ec); } /* Sprint 01.9 (FR-50.3): operator desk attachment chips */ .operator-attachments { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--polis-border); border-radius: 10px; background: var(--polis-soft, #f8fafc); } .operator-attachments.hidden { display: none; } .operator-attachments-title { margin-bottom: 6px; color: var(--polis-navy); font-size: 12px; font-weight: 700; } .operator-attachments-list { display: flex; flex-wrap: wrap; gap: 6px; } .operator-attachment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--polis-border); border-radius: 8px; background: #fff; color: var(--polis-navy); font-size: 12px; text-decoration: none; } .operator-attachment-chip:hover { background: rgba(118, 191, 63, 0.12); } /* Sprint 02.1 (FR-59): in-browser inline document viewer modal */ .doc-viewer-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 18px; background: rgba(45, 49, 52, 0.62); } .doc-viewer-modal.hidden { display: none !important; } .doc-viewer-card { display: flex; flex-direction: column; width: min(960px, 100%); height: min(88vh, 100%); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 22px 60px rgba(45, 49, 52, 0.34); } .doc-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--polis-border); } .doc-viewer-title { margin: 0; color: var(--polis-navy); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-viewer-close { flex: 0 0 auto; padding: 4px 10px; border: none; border-radius: 8px; background: #eef2f5; color: var(--polis-navy); font-size: 16px; cursor: pointer; } .doc-viewer-close:hover { background: #e2e8ec; } .doc-viewer-body { flex: 1 1 auto; min-height: 0; background: #f1f5f9; } .doc-viewer-frame { width: 100%; height: 100%; border: 0; } /* Chat attachment chips become clickable to open the viewer (FR-59.2) */ .attachment-chip.viewable { cursor: pointer; } .attachment-chip.viewable:hover { background: var(--polis-soft, #f1f7ec); } /* Sprint 02.1 (FR-54.3): authorized-session badge in the widget header */ .auth-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--polis-green, #76bf3f); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; } .records-empty .records-empty-book { margin-top: 10px; } /* ------------------------------------------------------------------ */ /* Sprint 02.2 (FR-64 / Task 3.1): Guided Tour Engine floating dock. */ /* Polis brand palette: graphite #2D3134, green #76BF3F, purple #7F3F8D.*/ /* These rules mirror the inline fallback injected by tour_engine.js so */ /* the dock is styled even when the engine's