f3a2309536
Measured in real Chromium (1440x900 and 390x844) rather than inferred. Desktop - The assistant rail sat inside the content area's 14px padding, on the tiled ground. So its background differed from the workspace sidebar's, its name card sat 6px lower and further in, and the page was 28px taller than the window. It is now the same flush white sidebar with the same insets; the chat and sources panels carry the 14px. Measured: name card 848-892 at x=8, brand, switch and 210px width identical in both views, expanded and collapsed, with no page scroll. Phone - The menu button opens the chat history in the assistant (its drawer) and the workspace list elsewhere. In workspace mode the drawer lists the workspace links. Choosing a page, switching mode or pressing « closes it. - The drawer no longer scrolls as a whole: only the chat list does, so the name card is pinned at the foot, the same place as in the workspace menu (790-836 at x=12 in both). - Both menus are one plain shape: same width, text rows, grey current row, no "Menu" header and one close control. - The assistant page no longer overflows the phone by 16px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W4rptBNvn6RYieQw54GXNS
1453 lines
105 KiB
CSS
1453 lines
105 KiB
CSS
html:not([data-feature-read_aloud="true"]) [data-action="speak"],
|
|
html:not([data-feature-read_aloud="true"]) [data-feature="read_aloud"],
|
|
html:not([data-feature-nextcloud="true"]) [data-action="nc-export"],
|
|
html:not([data-feature-nextcloud="true"]) [data-feature="nextcloud"],
|
|
html:not([data-feature-memories="true"]) [data-feature="memories"] { display: none !important; }
|
|
|
|
:root {
|
|
--blue: #2563eb; --blue-dark: #1d4ed8; --blue-light: #dbeafe;
|
|
--purple: #7c3aed; --purple-light: #ede9fe;
|
|
--teal: #0891b2; --teal-light: #cffafe;
|
|
--green: #10b981; --green-light: #d1fae5;
|
|
--red: #ef4444; --red-light: #fee2e2;
|
|
--amber: #f59e0b; --amber-light: #fef3c7;
|
|
--g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5db;--g400:#9ca3af;
|
|
--g500:#6b7280;--g600:#4b5563;--g700:#374151;--g800:#1f2937;--g900:#111827;
|
|
--radius:12px; --shadow:0 1px 3px rgba(0,0,0,0.08); --shadow-md:0 4px 12px rgba(0,0,0,0.08);
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box;}
|
|
body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--g800);line-height:1.6;}
|
|
|
|
/* AUTH */
|
|
.auth-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--g50);padding:20px;}
|
|
.auth-box{background:white;border-radius:20px;padding:40px;max-width:440px;width:100%;box-shadow:0 4px 6px -1px rgba(0,0,0,.07),0 20px 60px -10px rgba(37,99,235,.12);border:1px solid #e0e7ff;}
|
|
.auth-logo{text-align:center;margin-bottom:30px;}
|
|
.auth-logo i{font-size:40px;color:var(--blue);margin-bottom:10px;}
|
|
.auth-logo h1{font-size:24px;color:var(--g900);}
|
|
.auth-logo p{color:var(--g500);font-size:14px;}
|
|
.auth-form h2{font-size:20px;margin-bottom:20px;color:var(--g800);}
|
|
.form-group{margin-bottom:16px;}
|
|
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--g600);margin-bottom:4px;}
|
|
.form-group input{width:100%;padding:10px 14px;border:1.5px solid var(--g300);border-radius:8px;font-size:14px;font-family:inherit;}
|
|
.form-group input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
|
|
.pw-breach-warning{margin-top:6px;padding:8px 10px;background:#fffbeb;border:1px solid #fcd34d;border-radius:6px;font-size:12px;color:#92400e;line-height:1.4;}
|
|
.pw-breach-warning i{margin-right:4px;color:#f59e0b;}
|
|
.form-group small{color:var(--g500);font-size:12px;}
|
|
.btn-auth{width:100%;padding:12px;background:var(--blue);color:white;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.2s;}
|
|
.btn-auth:hover{background:var(--blue-dark);}
|
|
.auth-links{text-align:center;margin-top:16px;font-size:13px;}
|
|
.auth-links a{color:var(--blue);text-decoration:none;margin:0 8px;}
|
|
.hipaa-notice{margin-top:24px;padding:12px;background:var(--amber-light);border-radius:8px;font-size:12px;color:#92400e;display:flex;align-items:flex-start;gap:8px;}
|
|
.hipaa-notice i{margin-top:2px;flex-shrink:0;}
|
|
|
|
/* FOOTER */
|
|
.app-footer{color:rgba(255,255,255,0.4);font-size:10.5px;text-align:center;padding:20px 24px 8px;line-height:1.6;}
|
|
|
|
|
|
/* HEADER */
|
|
/* No header bar at all. The brand heads the menu, Settings and Log out sit in
|
|
the account card at its foot, and the content gets the full height. */
|
|
/* Icon, search, collapse — nothing else earns a place in the head row. */
|
|
.menu-head { display:flex; align-items:center; gap:4px; padding:10px 8px 8px 12px; }
|
|
/* Toggle leads, the mark takes the slack, search closes the row. */
|
|
.menu-brand { margin-right:auto; }
|
|
.menu-brand { display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; }
|
|
.menu-brand h1 { font-size:15px; font-weight:700; color:var(--g900); margin:0; line-height:1; letter-spacing:-.01em; }
|
|
.menu-brand i { font-size:16px; color:var(--blue); flex:0 0 auto; }
|
|
.menu-brand i { transition:font-size .15s ease; }
|
|
.menu-icon-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:none; border-radius:8px; background:none; color:var(--g500); font-size:13px; cursor:pointer; }
|
|
.menu-icon-btn:hover { background:var(--g100); color:var(--g800); }
|
|
.assistant-history .menu-head { padding:0 0 8px; }
|
|
.btn-menu-toggle { display:none; }
|
|
:root { --mobile-bar:0px; }
|
|
@media(max-width:768px){
|
|
.btn-menu-toggle { display:inline-flex; align-items:center; justify-content:center; position:fixed; top:6px; left:8px; z-index:81; width:36px; height:36px; border:none; border-radius:10px; background:none; color:var(--g700); font-size:16px; }
|
|
.btn-menu-toggle:hover { background:var(--g100); }
|
|
}
|
|
|
|
/* APP BODY LAYOUT */
|
|
.app-body{display:flex;min-height:100vh;}
|
|
|
|
/* SIDEBAR */
|
|
.sidebar{width:210px;flex-shrink:0;background:white;border-right:1.5px solid var(--g200);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;z-index:100;transition:width 0.22s ease;}
|
|
.sidebar.collapsed{width:0;border:none;overflow:hidden;}
|
|
.sidebar-header{display:none;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--g200);}
|
|
.sidebar-title{font-size:13px;font-weight:700;color:var(--g700);}
|
|
/* Head pinned, list scrolls, account card pinned. */
|
|
.sidebar-nav{display:flex;flex-direction:column;padding:0 0 8px;flex:1 1 auto;min-height:0;overflow:hidden;}
|
|
.sidebar-tabs{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 0;}
|
|
.sidebar-section-label{font-size:10px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:0.7px;padding:10px 16px 4px;}
|
|
.tab-btn{display:flex;align-items:center;gap:10px;padding:10px 16px;border:none;border-left:3px solid transparent;background:none;color:var(--g600);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all 0.15s;width:100%;text-align:left;}
|
|
.tab-btn:hover{background:var(--g50);color:var(--g900);}
|
|
.tab-btn.active{background:var(--blue-light);color:var(--blue);border-left-color:var(--blue);font-weight:600;}
|
|
.tab-btn i{width:16px;text-align:center;flex-shrink:0;font-size:14px;}
|
|
.tab-btn span{overflow:hidden;text-overflow:ellipsis;}
|
|
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:199;}
|
|
.btn-menu-toggle{display:none;}
|
|
/* Sidebar collapse/expand buttons (desktop only) */
|
|
|
|
/* MAIN */
|
|
/* One shell for every view. Each tab used to be a plain white page while the
|
|
assistant and the workspace launcher sat on a tiled card, so opening any menu
|
|
item changed the whole face of the app. The tiled ground and the card edge
|
|
belong to the shell, so only the contents differ. */
|
|
.main-content{flex:1;min-width:0;min-height:0;padding:14px;display:flex;flex-direction:column;
|
|
background-image:linear-gradient(var(--g100) 1px, transparent 1px), linear-gradient(90deg, var(--g100) 1px, transparent 1px);
|
|
background-size:28px 28px;background-position:-1px -1px;background-color:var(--g50);}
|
|
.main-content > .tab-content.active{flex:1 1 auto;min-height:0;background:white;border:1px solid var(--g200);border-radius:14px;box-shadow:var(--shadow);padding:20px;overflow:auto;}
|
|
/* The assistant brings its own full-bleed layout, so it takes the shell's place
|
|
rather than nesting a second card inside it. */
|
|
.main-content > #assistant-tab.active{padding:0;border:none;box-shadow:none;background:transparent;overflow:visible;}
|
|
@media(max-width:768px){
|
|
.main-content{padding:8px;}
|
|
.main-content > .tab-content.active{padding:12px;border-radius:12px;}
|
|
.main-content > #assistant-tab.active{padding:0;}
|
|
}
|
|
.tab-content{display:none;}
|
|
.tab-content.active{display:block;animation:fadeIn 0.25s ease;}
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
|
|
|
|
.module-header{margin-bottom:16px;}
|
|
.module-header h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;}
|
|
.module-header p{color:var(--g500);font-size:13px;margin-top:2px;}
|
|
|
|
/* DEMOGRAPHICS */
|
|
.demographics-bar{display:flex;gap:12px;flex-wrap:wrap;background:white;padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;}
|
|
.demo-field{display:flex;flex-direction:column;gap:3px;}
|
|
.demo-field label{font-size:10px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.5px;}
|
|
.demo-field input,.demo-field select{padding:7px 10px;border:1.5px solid var(--g300);border-radius:8px;font-size:13px;font-family:inherit;min-width:130px;}
|
|
.demo-field input:focus,.demo-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
|
|
.soap-options{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;font-weight:500;color:var(--g600);}
|
|
.soap-options select{padding:6px 10px;border:1.5px solid var(--g300);border-radius:8px;font-size:13px;font-family:inherit;}
|
|
|
|
/* CARDS */
|
|
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
|
|
.card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--g50);border-bottom:1px solid var(--g200);}
|
|
.card-header h3{font-size:13px;font-weight:600;color:var(--g700);display:flex;align-items:center;gap:6px;}
|
|
|
|
/* EDITABLE BOX */
|
|
.editable-box{min-height:240px;max-height:600px;overflow-y:auto;padding:14px 18px;font-size:13px;line-height:1.8;outline:none;border-radius:0 0 var(--radius) var(--radius);}
|
|
.editable-box:empty::before{content:attr(data-placeholder);color:var(--g400);}
|
|
|
|
/* NOTE ENTRY (hospital course, chart review) */
|
|
.note-entry{padding:10px 16px;}
|
|
.note-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
|
|
.note-meta input,.note-meta select{padding:6px 10px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;}
|
|
.note-dictate{padding-top:6px;}
|
|
.lab-entry{display:flex;gap:8px;padding:6px 16px;align-items:center;flex-wrap:wrap;}
|
|
.lab-entry input{padding:6px 10px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;flex:1;min-width:120px;}
|
|
.full-input{width:100%;padding:10px 16px;border:none;font-size:13px;font-family:inherit;outline:none;border-top:1px solid var(--g200);}
|
|
.action-row{margin-bottom:12px;}
|
|
|
|
/* RECORDING */
|
|
.record-controls{display:flex;align-items:center;gap:14px;padding:14px 16px;}
|
|
.record-btn{display:flex;align-items:center;gap:8px;padding:10px 22px;background:var(--red);color:white;border:none;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;box-shadow:0 3px 10px rgba(239,68,68,0.3);}
|
|
.record-btn:hover{transform:translateY(-1px);}
|
|
.record-btn.recording{background:var(--g700);box-shadow:0 3px 10px rgba(0,0,0,0.2);}
|
|
.btn-purple{background:var(--purple);box-shadow:0 3px 10px rgba(124,58,237,0.3);}
|
|
.btn-teal{background:var(--teal);box-shadow:0 3px 10px rgba(8,145,178,0.3);}
|
|
.btn-recording{background:var(--red) !important;color:white !important;animation:btnpulse 1.5s infinite;}
|
|
.recording-indicator{display:flex;align-items:center;gap:6px;color:var(--red);font-weight:500;font-size:13px;}
|
|
.recording-indicator.hidden{display:none;}
|
|
.pulse-dot{width:10px;height:10px;background:var(--red);border-radius:50%;animation:pulse 1.5s infinite;}
|
|
.pulse-purple{background:var(--purple);}
|
|
.pulse-teal{background:var(--teal);}
|
|
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(1.3);}}
|
|
@keyframes btnpulse{0%,100%{opacity:1;}50%{opacity:0.7;}}
|
|
|
|
/* BUTTONS */
|
|
.btn-generate{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:var(--blue);color:white;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-bottom:12px;transition:all 0.2s;box-shadow:0 3px 10px rgba(37,99,235,0.25);}
|
|
.btn-generate:hover{transform:translateY(-1px);}
|
|
.btn-generate:disabled{background:var(--g300);cursor:not-allowed;transform:none;box-shadow:none;}
|
|
.btn-generate-purple{background:var(--purple);box-shadow:0 3px 10px rgba(124,58,237,0.25);}
|
|
.btn-generate-teal{background:var(--teal);box-shadow:0 3px 10px rgba(8,145,178,0.25);}
|
|
.btn-generate-blue{background:var(--blue);box-shadow:0 3px 10px rgba(37,99,235,0.25);}
|
|
.btn-generate-green{background:var(--green);box-shadow:0 3px 10px rgba(16,185,129,0.25);}
|
|
|
|
.btn-sm{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:none;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.15s;}
|
|
#btn-assistant-cancel[hidden]{display:none!important;}
|
|
.btn-lg{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.15s;}
|
|
.btn-primary{background:var(--blue);color:white;}.btn-primary:hover{background:var(--blue-dark);}
|
|
.btn-ghost{background:var(--g200);color:var(--g700);}.btn-ghost:hover{background:var(--g300);}
|
|
.btn-success{background:var(--green);color:white;}.btn-success:hover{background:#059669;}
|
|
.btn-warning{background:var(--amber);color:white;}.btn-warning:hover{background:#d97706;}
|
|
.btn-reading{background:var(--red)!important;color:white!important;animation:btnpulse 1.5s infinite;}
|
|
|
|
/* OUTPUT */
|
|
.output-card{border:2px solid var(--green);}
|
|
.output-card.hidden{display:none;}
|
|
.output-header{background:var(--green-light);border-bottom-color:var(--green);}
|
|
.output-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
|
|
.output-text{padding:20px 24px;font-size:13px;line-height:1.9;outline:none;min-height:480px;white-space:pre-wrap;overflow-y:auto;}
|
|
.output-text-large{min-height:600px;}
|
|
.editable-box-large{min-height:400px;}
|
|
.model-tag{font-size:10px;padding:2px 7px;background:var(--g200);border-radius:4px;color:var(--g600);}
|
|
|
|
/* REFINE BAR */
|
|
.refine-bar{display:flex;gap:6px;padding:10px 16px;border-top:1px solid var(--g200);background:var(--g50);align-items:flex-start;flex-wrap:wrap;}
|
|
.refine-input{flex:1;min-width:200px;padding:7px 12px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;resize:vertical;}
|
|
textarea.full-input{resize:vertical;}
|
|
.refine-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
|
|
|
|
/* CLARIFY BOX */
|
|
.clarify-box{padding:14px 16px;background:var(--amber-light);border-top:1px solid #fbbf24;font-size:13px;line-height:1.8;white-space:pre-wrap;color:#92400e;}
|
|
.clarify-box.hidden{display:none;}
|
|
|
|
/* MILESTONES */
|
|
.legend{display:flex;gap:16px;flex-wrap:wrap;padding:8px 14px;background:var(--teal-light);border-radius:var(--radius);margin-bottom:12px;font-size:12px;}
|
|
.legend-item{display:flex;align-items:center;gap:5px;}
|
|
.legend-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:12px;font-weight:700;}
|
|
.legend-yes{background:var(--green-light);color:var(--green);border:2px solid var(--green);}
|
|
.legend-no{background:var(--red-light);color:var(--red);border:2px solid var(--red);}
|
|
.legend-blank{background:var(--g100);color:var(--g400);border:2px solid var(--g300);}
|
|
|
|
.domain-section{background:white;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden;}
|
|
.domain-header{padding:10px 16px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;}
|
|
.domain-header .badge{margin-left:auto;font-size:10px;font-weight:500;padding:2px 8px;border-radius:8px;background:rgba(255,255,255,0.6);}
|
|
.domain-gross-motor .domain-header{background:var(--amber-light);color:#92400e;}
|
|
.domain-fine-motor .domain-header{background:var(--blue-light);color:#1e40af;}
|
|
.domain-language .domain-header{background:var(--purple-light);color:#5b21b6;}
|
|
.domain-social .domain-header{background:#fce7f3;color:#9d174d;}
|
|
.domain-cognitive .domain-header{background:var(--green-light);color:#065f46;}
|
|
|
|
.ms-items{padding:4px 6px;}
|
|
.ms-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;transition:background 0.15s;}
|
|
.ms-item:hover{background:var(--g50);}
|
|
.ms-toggle{display:flex;gap:3px;flex-shrink:0;}
|
|
.toggle-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:2px solid var(--g300);border-radius:6px;background:white;cursor:pointer;font-size:14px;font-weight:700;color:var(--g400);transition:all 0.15s;}
|
|
.toggle-btn:hover{border-color:var(--g400);}
|
|
.toggle-btn.yes-on{background:var(--green-light);border-color:var(--green);color:var(--green);}
|
|
.toggle-btn.no-on{background:var(--red-light);border-color:var(--red);color:var(--red);}
|
|
.ms-text{font-size:13px;color:var(--g700);}
|
|
.ms-item.is-yes .ms-text{color:var(--g900);font-weight:500;}
|
|
.ms-item.is-no .ms-text{color:var(--red);}
|
|
.milestone-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0;}
|
|
|
|
.summary-bar{display:flex;gap:14px;padding:8px 16px;background:var(--g50);border-bottom:1px solid var(--g200);font-size:12px;}
|
|
.summary-bar.hidden{display:none;}
|
|
.stat{display:flex;align-items:center;gap:5px;font-weight:500;}
|
|
.dot{width:8px;height:8px;border-radius:50%;}.dot-green{background:var(--green);}.dot-red{background:var(--red);}.dot-gray{background:var(--g400);}
|
|
|
|
.summary-section{border-top:2px dashed var(--g200);}
|
|
.summary-section-header{padding:12px 16px;}
|
|
.btn-generate-summary{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:linear-gradient(135deg,#f59e0b,#d97706);color:white;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;}
|
|
.btn-generate-summary:hover{transform:translateY(-1px);}
|
|
.btn-generate-summary:disabled{background:var(--g300);cursor:not-allowed;transform:none;}
|
|
.summary-output-header{background:var(--amber-light);border-bottom:1px solid #fbbf24;border-top:1px solid var(--g200);}
|
|
.summary-output-text{padding:14px 16px;font-size:13px;line-height:1.8;outline:none;background:#fffbeb;font-weight:500;white-space:pre-wrap;}
|
|
|
|
/* MODAL */
|
|
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:5000;padding:20px;backdrop-filter:blur(3px);}
|
|
.modal.hidden{display:none;}
|
|
.modal-content{background:white;border-radius:16px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,0.2);}
|
|
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--g200);}
|
|
.modal-header h2{font-size:18px;display:flex;align-items:center;gap:8px;}
|
|
.modal-close{background:none;border:none;font-size:18px;color:var(--g500);cursor:pointer;padding:4px;}
|
|
.modal-body{padding:24px;}
|
|
.settings-section{margin-bottom:28px;}
|
|
.settings-section h3{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;color:var(--g800);}
|
|
.settings-section p{font-size:13px;color:var(--g600);margin-bottom:8px;}
|
|
.settings-section .form-group{margin-bottom:12px;}
|
|
.settings-section img{max-width:200px;margin:12px 0;border:1px solid var(--g200);border-radius:8px;}
|
|
.settings-section code{background:var(--g100);padding:2px 8px;border-radius:4px;font-size:12px;}
|
|
.hipaa-info{font-size:13px;color:var(--g700);}
|
|
.hipaa-info ul{margin:8px 0 8px 20px;}
|
|
.hipaa-info li{margin-bottom:4px;}
|
|
|
|
/* LOADING */
|
|
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(3px);}
|
|
.loading-overlay.hidden{display:none;}
|
|
.loading-box{background:white;padding:28px 44px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow-md);}
|
|
.spinner{width:32px;height:32px;border:4px solid var(--g200);border-top-color:var(--blue);border-radius:50%;animation:spin 0.7s linear infinite;margin:0 auto 12px;}
|
|
@keyframes spin{to{transform:rotate(360deg);}}
|
|
.loading-box p{color:var(--g600);font-weight:500;font-size:13px;}
|
|
.confirm-modal{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(2px);}
|
|
.confirm-modal.hidden{display:none;}
|
|
.confirm-modal-box{background:white;padding:24px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.15);max-width:420px;width:90%;animation:modalIn 0.15s ease;}
|
|
.confirm-modal-box p{margin:0;font-size:14px;line-height:1.6;color:var(--g800);}
|
|
@keyframes modalIn{from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)}}
|
|
|
|
/* FAQ */
|
|
.faq-container{max-width:800px;margin:0 auto;}
|
|
.faq-section{margin-bottom:24px;}
|
|
.faq-section-title{font-size:16px;font-weight:700;color:var(--g800);margin:0 0 12px;padding:10px 0;border-bottom:2px solid var(--g200);display:flex;align-items:center;gap:8px;}
|
|
.faq-section-title i{color:var(--blue);font-size:14px;}
|
|
.faq-item{border:1px solid var(--g200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:box-shadow 0.15s;}
|
|
.faq-item:hover{box-shadow:0 1px 4px rgba(0,0,0,0.06);}
|
|
.faq-question{display:flex;align-items:center;width:100%;padding:14px 16px;background:white;border:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--g800);text-align:left;font-family:inherit;gap:10px;transition:background 0.15s;}
|
|
.faq-question:hover{background:var(--g50);}
|
|
.faq-question::before{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;font-size:10px;color:var(--g400);transition:transform 0.2s;flex-shrink:0;}
|
|
.faq-item.open .faq-question::before{transform:rotate(90deg);color:var(--blue);}
|
|
.faq-item.open .faq-question{background:var(--g50);color:var(--blue-dark);}
|
|
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;padding:0 16px;}
|
|
.faq-item.open .faq-answer{max-height:800px;padding:12px 16px 16px;}
|
|
.faq-answer p{margin:0 0 10px;font-size:13.5px;line-height:1.7;color:var(--g700);}
|
|
.faq-answer p:last-child{margin-bottom:0;}
|
|
.faq-answer ul,.faq-answer ol{margin:0 0 10px;padding-left:20px;font-size:13.5px;line-height:1.7;color:var(--g700);}
|
|
.faq-answer li{margin-bottom:4px;}
|
|
.faq-answer strong{color:var(--g800);}
|
|
.faq-answer em{color:var(--g500);font-size:12.5px;}
|
|
|
|
/* Billing codes */
|
|
.billing-codes-card{margin-top:12px;padding:14px;background:var(--g50);border-radius:8px;border:1px solid var(--g200);}
|
|
.billing-codes-card.hidden{display:none;}
|
|
.billing-codes-card h4{font-size:13px;font-weight:700;color:var(--g700);margin:0 0 8px;display:flex;align-items:center;gap:6px;}
|
|
.billing-codes-section{margin-bottom:10px;}
|
|
.billing-codes-section:last-child{margin-bottom:0;}
|
|
.billing-codes-label{font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;}
|
|
.billing-code-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;margin:3px;transition:opacity 0.15s;}
|
|
.billing-code-chip.icd{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd;}
|
|
.billing-code-chip.cpt{background:#d1fae5;color:#059669;border:1px solid #6ee7b7;}
|
|
.billing-code-chip.em{background:#ede9fe;color:#7c3aed;border:1px solid #c4b5fd;}
|
|
.billing-code-chip:hover{opacity:0.7;}
|
|
.billing-code-chip:active{transform:scale(0.95);}
|
|
.billing-code-name{font-weight:400;color:var(--g600);font-size:11px;margin-left:2px;}
|
|
|
|
/* Calculators */
|
|
.calc-pill,.calc-nav-pill{padding:8px 16px;border-radius:20px;border:1.5px solid var(--g200);background:white;font-size:13px;font-weight:600;color:var(--g600);cursor:pointer;transition:all 0.15s;}
|
|
.calc-pill:hover,.calc-nav-pill:hover{border-color:var(--blue);color:var(--blue);}
|
|
.calc-pill.active,.calc-nav-pill.active{background:var(--blue);color:white;border-color:var(--blue);}
|
|
.calc-panel.hidden{display:none;}
|
|
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:12px;}
|
|
.calc-field label{display:block;font-size:12px;font-weight:600;color:var(--g600);margin-bottom:3px;}
|
|
.calc-field input,.calc-field select{width:100%;padding:8px 10px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;}
|
|
.calc-field input:focus,.calc-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
|
|
.calc-result{margin-top:16px;}
|
|
.calc-result-header{padding:16px;border-radius:10px;border-left:4px solid;text-align:center;}
|
|
.calc-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:12px;}
|
|
.calc-result-item{padding:12px;background:var(--g50);border-radius:8px;text-align:center;}
|
|
.calc-result-label{font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.5px;}
|
|
.calc-result-value{font-size:24px;font-weight:700;color:var(--g800);margin:4px 0;}
|
|
.calc-result-sub{font-size:11px;color:var(--g500);}
|
|
.chart-container{margin-top:16px;padding:12px;background:white;border:1px solid var(--g200);border-radius:10px;max-width:750px;}
|
|
.chart-container.hidden{display:none;}
|
|
|
|
/* Non-blocking inline busy bar */
|
|
.busy-bar{position:sticky;top:0;z-index:100;display:none;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,#eff6ff,#e0f2fe);border-bottom:1px solid #bfdbfe;font-size:13px;font-weight:500;color:#1d4ed8;animation:busySlideIn 0.2s ease;}
|
|
.busy-bar.active{display:flex;}
|
|
.busy-bar .busy-spinner{width:16px;height:16px;border:2.5px solid #bfdbfe;border-top-color:#2563eb;border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0;}
|
|
.busy-bar .busy-text{flex:1;}
|
|
.busy-bar .busy-cancel{background:none;border:1px solid #93c5fd;border-radius:4px;padding:3px 10px;font-size:11px;color:#1d4ed8;cursor:pointer;font-weight:600;}
|
|
.busy-bar .busy-cancel:hover{background:#dbeafe;}
|
|
@keyframes busySlideIn{from{opacity:0;transform:translateY(-100%);} to{opacity:1;transform:translateY(0);}}
|
|
|
|
/* TOAST */
|
|
.toast-container{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:6px;z-index:10000;}
|
|
.toast{padding:8px 16px;border-radius:8px;color:white;font-size:12px;font-weight:500;box-shadow:var(--shadow-md);animation:slideIn 0.3s ease;display:flex;align-items:center;gap:6px;}
|
|
.toast-success{background:var(--green);}.toast-error{background:var(--red);}.toast-info{background:var(--blue);}
|
|
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
|
|
|
|
.hidden{display:none;}
|
|
|
|
/* RESPONSIVE */
|
|
@media(max-width:768px){
|
|
.header-top{flex-direction:row;align-items:center;}
|
|
.header-right{flex-wrap:wrap;}
|
|
.model-selector{flex:1;}
|
|
.model-selector select{max-width:160px;flex:1;}
|
|
.btn-menu-toggle{display:flex;align-items:center;justify-content:center;}
|
|
/* Sidebar: hidden off-screen on mobile, slides in */
|
|
.app-body{display:block;}
|
|
.sidebar{position:fixed;left:-220px;top:0;width:220px;height:100vh;z-index:200;transition:left 0.28s ease;box-shadow:none;}
|
|
.sidebar.open{left:0;box-shadow:4px 0 20px rgba(0,0,0,0.18);}
|
|
.sidebar.open~.sidebar-overlay{display:block;}
|
|
.sidebar-header{display:flex;}
|
|
/* The sidebar slides in as a whole on mobile, so the collapse control has
|
|
nothing to collapse: below 769px its handler closes the menu instead, and it
|
|
is the menu's one close control (the old "Menu" + X header is gone). */
|
|
/* Give the drawer room to breathe and keep the account card reachable at the
|
|
foot of a scrolling menu. */
|
|
.sidebar{display:flex;flex-direction:column;overflow-y:auto;}
|
|
.sidebar-nav{flex:1 1 auto;min-height:0;}
|
|
.menu-head{padding:12px 10px 8px;}
|
|
.account-card{position:sticky;bottom:0;background:white;}
|
|
.account-menu{left:8px;right:8px;}
|
|
/* The palette is full-bleed on a phone, where a centred dialog wastes space. */
|
|
.menu-search{padding:0;align-items:stretch;}
|
|
.menu-search-panel{width:100%;max-height:100%;border:none;border-radius:0;}
|
|
.main-content{padding:8px;}
|
|
.demographics-bar{flex-direction:column;}
|
|
.demo-field input,.demo-field select{min-width:100%;}
|
|
.note-meta{flex-direction:column;}
|
|
.note-meta input,.note-meta select{min-width:100%;}
|
|
.refine-bar{flex-direction:column;}
|
|
.refine-input{min-width:100%;}
|
|
.milestone-actions{flex-direction:column;}
|
|
.auth-box{padding:24px;}
|
|
}
|
|
|
|
/* TOGGLE SWITCH */
|
|
.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;vertical-align:middle;}
|
|
.toggle-switch input{opacity:0;width:0;height:0;}
|
|
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--g300);border-radius:20px;transition:.2s;}
|
|
.toggle-slider::before{content:'';position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:white;border-radius:50%;transition:.2s;}
|
|
.toggle-switch input:checked+.toggle-slider{background:var(--blue);}
|
|
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(16px);}
|
|
|
|
.editable-box::-webkit-scrollbar,.output-text::-webkit-scrollbar{width:5px;}
|
|
.editable-box::-webkit-scrollbar-thumb,.output-text::-webkit-scrollbar-thumb{background:var(--g300);border-radius:3px;}
|
|
|
|
/* Per-tab model selector */
|
|
.demo-field-model { flex: 1; min-width: 180px; }
|
|
.demo-field-model select { min-width: 180px; max-width: 260px; }
|
|
|
|
/* Labs textarea */
|
|
.visit-labs, .lab-values {
|
|
width: 100%; padding: 8px 12px; border: 1.5px solid var(--g300);
|
|
border-radius: 8px; font-size: 13px; font-family: inherit;
|
|
resize: vertical; margin-top: 8px; line-height: 1.5;
|
|
}
|
|
.visit-labs:focus, .lab-values:focus {
|
|
outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light);
|
|
}
|
|
|
|
/* Admin Panel */
|
|
.admin-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
|
|
.stat-card{flex:1;min-width:120px;background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;text-align:center;}
|
|
.stat-value{font-size:28px;font-weight:700;color:var(--blue);}
|
|
.stat-label{font-size:12px;color:var(--g500);margin-top:4px;}
|
|
.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
|
|
.admin-table th{text-align:left;padding:10px 16px;background:var(--g50);border-bottom:2px solid var(--g200);font-weight:600;color:var(--g600);font-size:12px;text-transform:uppercase;letter-spacing:0.4px;}
|
|
.admin-table td{padding:10px 16px;border-bottom:1px solid var(--g100);vertical-align:middle;}
|
|
.admin-table tr:last-child td{border-bottom:none;}
|
|
.admin-table tr:hover td{background:var(--g50);}
|
|
|
|
/* ── WELL VISIT TAB ────────────────────────────────────────────────────────── */
|
|
.wv-subtab-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
|
|
.wv-subtab-btn{padding:8px 18px;border:1.5px solid var(--g300);border-radius:8px;background:white;color:var(--g600);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;transition:all 0.15s;}
|
|
.wv-subtab-btn:hover{border-color:var(--blue);color:var(--blue);}
|
|
.wv-subtab-btn.active{background:var(--blue);border-color:var(--blue);color:white;}
|
|
|
|
.wv-subpanel{animation:fadeIn 0.2s;}
|
|
.wv-visit-selector-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
|
|
.wv-visit-selector-row label{font-weight:600;font-size:14px;color:var(--g700);display:flex;align-items:center;gap:6px;}
|
|
.wv-visit-select{padding:8px 14px;border:1.5px solid var(--g300);border-radius:8px;font-size:14px;font-family:inherit;color:var(--g800);background:white;cursor:pointer;min-width:200px;}
|
|
.wv-visit-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
|
|
|
|
.wv-visit-detail{display:flex;flex-direction:column;gap:14px;min-height:400px;}
|
|
.wv-section{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;}
|
|
.wv-section-title{font-size:14px;font-weight:700;color:var(--g700);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
|
|
.wv-section-title i{color:var(--blue);}
|
|
|
|
/* Lincoln quick reference */
|
|
.wv-lincoln-reference{padding:14px 16px;background:var(--g50);}
|
|
.wv-lincoln-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
|
|
.wv-lincoln-card{border:1px solid var(--g100);border-radius:12px;padding:14px 16px;background:white;box-shadow:0 1px 2px rgba(15,23,42,0.04);}
|
|
.wv-lincoln-card h4{margin:0 0 10px;font-size:14px;color:var(--g800);}
|
|
.wv-lincoln-card ul{margin:0;padding-left:18px;color:var(--g700);font-size:13px;line-height:1.65;}
|
|
.wv-lincoln-card li{margin-bottom:6px;}
|
|
.wv-lincoln-card li:last-child{margin-bottom:0;}
|
|
@media(max-width:640px){
|
|
.wv-lincoln-reference{padding:10px;}
|
|
.wv-lincoln-grid{grid-template-columns:1fr;gap:10px;}
|
|
.wv-lincoln-card{padding:12px;}
|
|
.wv-lincoln-card ul{font-size:12.5px;line-height:1.55;}
|
|
}
|
|
|
|
/* Billing */
|
|
.wv-billing-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
|
|
.wv-billing-cell{display:flex;align-items:center;gap:8px;}
|
|
.wv-label{font-size:12px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.5px;}
|
|
.wv-code-chip{padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700;font-family:monospace;}
|
|
.wv-code-chip.icd{background:var(--blue-light);color:var(--blue-dark);}
|
|
.wv-code-chip.cpt{background:var(--purple-light);color:var(--purple);}
|
|
.wv-billing-desc{width:100%;font-size:13px;color:var(--g600);margin-top:4px;}
|
|
|
|
/* Chips */
|
|
.wv-chip-list{display:flex;flex-wrap:wrap;gap:8px;}
|
|
.wv-chip{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}
|
|
.wv-chip-measure{background:var(--teal-light);color:var(--teal);}
|
|
.wv-chip-range{background:var(--amber-light);color:#92400e;}
|
|
|
|
/* Vaccines */
|
|
.wv-vax-list{display:flex;flex-direction:column;gap:10px;min-height:80px;}
|
|
.wv-vax-item{background:var(--g50);border-radius:8px;padding:12px 16px;border-left:3px solid var(--green);}
|
|
.wv-vax-name{font-size:14px;font-weight:600;color:var(--g800);display:flex;align-items:center;gap:8px;}
|
|
.wv-vax-dot{color:var(--green);font-size:10px;}
|
|
.wv-vax-dose{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;padding:2px 10px;background:var(--green-light);color:#065f46;border-radius:10px;}
|
|
.wv-vax-note{margin-top:6px;font-size:12px;color:var(--g500);display:flex;align-items:flex-start;gap:6px;}
|
|
.wv-vax-note i{color:var(--blue);margin-top:2px;flex-shrink:0;}
|
|
/* Vaccine status row */
|
|
.wv-vax-status-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
|
|
|
|
/* Screens */
|
|
.wv-screen-list{display:flex;flex-direction:column;gap:10px;min-height:60px;}
|
|
.wv-screen-item{display:flex;align-items:center;gap:10px;}
|
|
.wv-status-badge{flex-shrink:0;font-size:11px;font-weight:700;padding:2px 10px;border-radius:10px;text-transform:uppercase;letter-spacing:0.4px;}
|
|
.wv-status-dot{background:var(--green-light);color:#065f46;}
|
|
.wv-status-risk{background:var(--amber-light);color:#92400e;}
|
|
.wv-status-range{background:var(--blue-light);color:var(--blue-dark);}
|
|
.wv-screen-name{font-size:13px;color:var(--g700);}
|
|
|
|
/* Growth & Feeding */
|
|
.wv-growth-box{display:flex;flex-direction:column;gap:8px;}
|
|
.wv-growth-item{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.5;padding:6px 10px;background:var(--g50);border-radius:8px;}
|
|
.wv-growth-label{font-weight:600;color:var(--g700);min-width:120px;white-space:nowrap;}
|
|
.wv-feeding-list{margin:0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--g700);}
|
|
.wv-feeding-list li{margin-bottom:4px;}
|
|
/* BMI Classification */
|
|
.wv-bmi-table{display:flex;flex-direction:column;gap:6px;}
|
|
.wv-bmi-row{display:grid;grid-template-columns:160px 1fr 1fr;gap:8px;padding:8px 12px;background:var(--g50);border-radius:8px;font-size:12px;align-items:center;}
|
|
.wv-bmi-label{font-weight:700;font-size:13px;}
|
|
.wv-bmi-range{color:var(--g600);}
|
|
.wv-bmi-action{color:var(--g600);font-style:italic;}
|
|
.wv-bmi-note{margin-top:8px;font-size:11px;color:#6b7280;display:flex;align-items:flex-start;gap:6px;}
|
|
@media(max-width:768px){.wv-bmi-row{grid-template-columns:1fr;}}
|
|
|
|
/* Notes */
|
|
.wv-notes-box{background:var(--blue-light);border-radius:8px;padding:12px 16px;font-size:13px;color:#1e40af;display:flex;align-items:flex-start;gap:8px;}
|
|
.wv-empty,.wv-loading{color:var(--g400);font-size:14px;padding:20px 0;text-align:center;}
|
|
|
|
/* Catch-up */
|
|
.wv-catchup-intro{background:var(--blue-light);border-radius:8px;padding:12px 16px;font-size:13px;color:#1e40af;display:flex;align-items:flex-start;gap:8px;margin-bottom:16px;}
|
|
.wv-catchup-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:14px;}
|
|
.wv-catchup-title{font-size:14px;font-weight:700;color:var(--g800);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
|
|
.wv-catchup-title i{color:var(--green);}
|
|
.wv-catchup-min-age{font-size:13px;color:var(--g600);margin-bottom:10px;}
|
|
.wv-catchup-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px;}
|
|
.wv-catchup-table th{text-align:left;padding:6px 10px;background:var(--g50);border-bottom:2px solid var(--g200);font-weight:600;color:var(--g600);font-size:11px;text-transform:uppercase;letter-spacing:0.4px;}
|
|
.wv-catchup-table td{padding:6px 10px;border-bottom:1px solid var(--g100);vertical-align:top;}
|
|
.wv-catchup-table tr:last-child td{border-bottom:none;}
|
|
.wv-catchup-notes{margin:0;padding:0 0 0 18px;font-size:12px;color:var(--g600);line-height:1.7;}
|
|
|
|
/* Full schedule table */
|
|
.wv-schedule-scroll{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);}
|
|
.wv-schedule-table{min-width:900px;width:100%;border-collapse:collapse;font-size:12px;background:white;}
|
|
.wv-schedule-table th{text-align:center;padding:8px 6px;background:var(--g50);border-bottom:2px solid var(--g200);font-weight:700;color:var(--g600);font-size:11px;position:sticky;top:0;z-index:1;}
|
|
.wv-sched-vax-col{text-align:left!important;min-width:200px;position:sticky;left:0;background:var(--g50)!important;z-index:2;}
|
|
.wv-sched-age-col{min-width:70px;}
|
|
.wv-sched-vax-name{padding:8px 10px;border-bottom:1px solid var(--g100);font-weight:600;color:var(--g700);position:sticky;left:0;background:white;z-index:1;}
|
|
.wv-sched-cell{padding:6px 4px;border-bottom:1px solid var(--g100);text-align:center;color:var(--g400);}
|
|
.wv-sched-has{background:var(--green-light);color:#065f46;font-weight:700;border-radius:4px;cursor:help;}
|
|
.wv-sched-legend{font-size:11px;color:var(--g400);margin-top:10px;display:flex;align-items:center;gap:6px;}
|
|
.wv-sched-leg-dot{display:inline-block;width:12px;height:12px;background:var(--green-light);border-radius:2px;}
|
|
|
|
/* Announcement Banner */
|
|
.announcement-banner{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:500;border-bottom:1px solid transparent;}
|
|
.announcement-banner.hidden{display:none;}
|
|
.announcement-banner.ann-info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
|
|
.announcement-banner.ann-warning{background:#fffbeb;color:#92400e;border-color:#fcd34d;}
|
|
.announcement-banner.ann-error{background:#fef2f2;color:#991b1b;border-color:#fca5a5;}
|
|
.announcement-banner.ann-success{background:#f0fdf4;color:#166534;border-color:#86efac;}
|
|
.announcement-banner span{flex:1;}
|
|
.announcement-close{background:none;border:none;cursor:pointer;opacity:0.6;font-size:15px;padding:6px 8px;color:inherit;line-height:1;border-radius:4px;}
|
|
.announcement-close:hover{opacity:1;background:rgba(0,0,0,0.08);}
|
|
|
|
/* Save bar (encounter label + save/load) */
|
|
.save-bar-wrap{position:relative;margin-bottom:10px;}
|
|
.save-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--radius);flex-wrap:wrap;}
|
|
.save-label-input{flex:1;min-width:160px;font-size:13px;padding:5px 8px;border:1px solid var(--g200);border-radius:6px;background:white;}
|
|
.save-label-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(37,99,235,.12);}
|
|
|
|
/* Saved encounters list */
|
|
.saved-enc-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--g50);border:1px solid var(--g200);border-radius:8px;font-size:13px;}
|
|
.saved-enc-label{flex:1;font-weight:600;color:var(--g800);}
|
|
.saved-enc-meta{font-size:11px;color:var(--g500);}
|
|
.saved-enc-type{font-size:11px;background:var(--blue-light);color:var(--blue);padding:1px 6px;border-radius:10px;font-weight:600;}
|
|
|
|
/* Memory list item */
|
|
.mem-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:var(--g50);border:1px solid var(--g200);border-radius:8px;}
|
|
.mem-item-info{flex:1;}
|
|
.mem-item-name{font-weight:600;font-size:13px;color:var(--g800);}
|
|
.mem-item-cat{font-size:11px;background:var(--green-light);color:#166534;padding:1px 6px;border-radius:10px;font-weight:600;}
|
|
.mem-item-preview{font-size:12px;color:var(--g500);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
|
|
|
|
/* Models list in admin CMS */
|
|
.model-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--g100);}
|
|
.model-row:last-child{border-bottom:none;}
|
|
.model-row-name{flex:1;font-size:13px;font-weight:500;color:var(--g800);}
|
|
.model-row-cost{font-size:12px;color:var(--g500);}
|
|
.model-row-tag{font-size:10px;background:var(--g100);color:var(--g600);padding:1px 5px;border-radius:8px;}
|
|
.model-row-toggle{font-size:12px;}
|
|
|
|
/* SSHADESS form */
|
|
.shadess-domain{margin-bottom:12px;padding:10px 12px;border-radius:8px;background:white;box-shadow:var(--shadow);}
|
|
.shadess-domain-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
|
|
.shadess-domain-body{display:flex;flex-direction:column;gap:6px;}
|
|
.shadess-q-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:3px 0;}
|
|
.shadess-q-text{font-size:13px;color:var(--g700);flex:1;min-width:200px;}
|
|
.shadess-concern-badge{font-size:11px;background:var(--red-light);color:var(--red);padding:2px 8px;border-radius:10px;font-weight:600;}
|
|
.shadess-flag-btn{font-size:11px;padding:2px 6px;}
|
|
|
|
/* Settings page */
|
|
.settings-page{display:flex;flex-direction:column;gap:0;}
|
|
.settings-page .settings-section{padding:20px;margin-bottom:12px;border-radius:var(--radius);}
|
|
.settings-page .settings-section h3{font-size:16px;font-weight:700;color:var(--g800);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:8px;}
|
|
.settings-page .settings-section p{font-size:13px;color:var(--g600);margin-bottom:12px;line-height:1.6;}
|
|
.settings-page .hipaa-info ul{margin:10px 0 10px 20px;font-size:13px;}
|
|
.settings-page .hipaa-info li{margin-bottom:6px;line-height:1.5;}
|
|
.settings-page .form-group{margin-bottom:14px;}
|
|
.settings-page .form-group label{font-size:13px;font-weight:600;color:var(--g600);margin-bottom:4px;display:block;}
|
|
.settings-page .form-group input{width:100%;padding:8px 12px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;box-sizing:border-box;}
|
|
.settings-page .form-group input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 2px var(--blue-light);}
|
|
|
|
/* Inline load popover — compact dropdown, right-aligned under Load button */
|
|
.enc-load-popover{position:absolute;right:0;top:calc(100% + 4px);width:360px;max-width:calc(100vw - 24px);background:white;border:1px solid var(--g300);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:600;display:flex;flex-direction:column;}
|
|
.enc-load-popover.hidden{display:none;}
|
|
.enc-load-popover-inner{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--g200);}
|
|
.enc-load-search{flex:1;padding:6px 10px;border:1px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;}
|
|
.enc-load-search:focus{outline:none;border-color:var(--blue);}
|
|
.enc-pop-list{overflow-y:auto;max-height:260px;}
|
|
.enc-pop-item{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--g100);}
|
|
.enc-pop-item:hover{background:var(--g50);}
|
|
.enc-pop-item:last-child{border-bottom:none;}
|
|
|
|
/* ===== ROS / PE / DX — Tasks 2, 3, 4, 6 ===== */
|
|
.ros-system-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--g100);}
|
|
.ros-system-row:last-child{border-bottom:none;}
|
|
.ros-system-name{flex:1;font-size:13px;color:var(--g700);}
|
|
.ros-status-btn{font-size:11px;padding:2px 8px;border-radius:12px;border:1px solid var(--g300);background:white;cursor:pointer;transition:all 0.15s;font-family:inherit;}
|
|
.ros-status-btn:hover{background:var(--g100);}
|
|
.ros-status-btn.wnl{background:var(--green-light);color:#166534;border-color:var(--green);}
|
|
.ros-status-btn.abnormal{background:var(--red-light);color:#991b1b;border-color:var(--red);}
|
|
.ros-status-btn.notrev{background:var(--g100);color:var(--g500);border-color:var(--g300);}
|
|
.ros-note-input{font-size:12px;padding:3px 8px;border:1px solid var(--g300);border-radius:6px;width:180px;display:none;font-family:inherit;}
|
|
.ros-note-input.visible{display:inline-block;}
|
|
.dx-tag{display:inline-flex;align-items:center;gap:4px;background:var(--blue-light);color:#1d4ed8;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600;margin:2px;}
|
|
.dx-tag .dx-remove{cursor:pointer;opacity:0.7;font-size:14px;line-height:1;}
|
|
.dx-tag .dx-remove:hover{opacity:1;}
|
|
.dx-chip{cursor:pointer;padding:3px 10px;background:var(--g100);border:1px solid var(--g200);border-radius:12px;font-size:11px;color:var(--g700);display:inline-block;margin:2px;transition:all 0.15s;}
|
|
.dx-chip:hover{background:var(--blue-light);color:var(--blue);border-color:var(--blue);}
|
|
.sv-section-card{background:white;border-radius:var(--radius);border:1px solid var(--g200);padding:0;margin-bottom:10px;box-shadow:var(--shadow);}
|
|
.sv-section-card .card-header{padding:10px 16px;border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:8px;}
|
|
.sv-section-card .card-header h3{font-size:14px;font-weight:600;color:var(--g800);display:flex;align-items:center;gap:6px;}
|
|
.sv-section-card .card-body{padding:10px 16px;}
|
|
.visit-status-btn{font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--g300);background:white;cursor:pointer;transition:all 0.15s;font-family:inherit;}
|
|
.visit-status-btn.given,.visit-status-btn.done{background:var(--green-light);color:#166534;border-color:var(--green);}
|
|
.visit-status-btn.refused{background:var(--red-light);color:#991b1b;border-color:var(--red);}
|
|
.visit-status-btn.deferred,.visit-status-btn.not-due{background:var(--amber-light);color:#92400e;border-color:var(--amber);}
|
|
.visit-status-btn.already-done{background:var(--blue-light);color:#1e40af;border-color:var(--blue);}
|
|
@media(max-width:640px){
|
|
.ros-system-row{flex-wrap:wrap;}
|
|
.ros-note-input{width:100%;}
|
|
.dx-chip{font-size:10px;}
|
|
}
|
|
|
|
/* ICD-10 live search dropdown */
|
|
.dx-results{position:absolute;top:calc(100% + 2px);left:0;right:0;background:white;border:1px solid var(--g300);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:400;max-height:240px;overflow-y:auto;}
|
|
.dx-result-item{padding:7px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--g100);}
|
|
.dx-result-item:last-child{border-bottom:none;}
|
|
.dx-result-item:hover{background:var(--g50);}
|
|
.dx-result-code{font-weight:700;color:var(--blue);margin-right:4px;}
|
|
|
|
/* ============================================================
|
|
LEARNING HUB
|
|
============================================================ */
|
|
|
|
/* Category bar */
|
|
.lh-category-bar{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0;}
|
|
.lh-cat-pill{padding:5px 14px;border-radius:20px;border:1px solid var(--g300);background:white;font-size:13px;cursor:pointer;transition:all 0.15s;font-family:inherit;color:var(--g600);}
|
|
.lh-cat-pill:hover{border-color:var(--blue);color:var(--blue);}
|
|
.lh-cat-pill.active{background:var(--blue);color:white;border-color:var(--blue);}
|
|
|
|
/* Feed */
|
|
.lh-feed{display:flex;flex-direction:column;gap:8px;}
|
|
.lh-feed-item{padding:14px 16px;cursor:pointer;transition:box-shadow 0.15s,border-color 0.15s;}
|
|
.lh-feed-item:hover{box-shadow:var(--shadow-md);border-color:var(--blue-light);}
|
|
.lh-feed-item-header{display:flex;align-items:flex-start;gap:12px;}
|
|
.lh-feed-title{font-size:14px;font-weight:600;color:var(--g800);}
|
|
.lh-feed-meta{font-size:12px;color:var(--g500);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;}
|
|
.lh-feed-meta span:not(:last-child)::after{content:'·';margin-left:8px;color:var(--g300);}
|
|
.lh-feed-badges{display:flex;gap:6px;flex-shrink:0;align-items:flex-start;}
|
|
.lh-badge{font-size:11px;padding:2px 8px;border-radius:10px;background:var(--g100);color:var(--g600);white-space:nowrap;}
|
|
.lh-badge-quiz{background:var(--amber-light);color:#92400e;}
|
|
|
|
/* Viewer */
|
|
.lh-viewer .card{margin-bottom:0;}
|
|
.lh-content-body{font-size:14px;line-height:1.75;color:var(--g700);}
|
|
.lh-content-body h1,.lh-content-body h2,.lh-content-body h3{margin:16px 0 8px;color:var(--g800);}
|
|
.lh-content-body p{margin-bottom:12px;}
|
|
.lh-content-body ul,.lh-content-body ol{margin:0 0 12px 20px;}
|
|
.lh-content-body li{margin-bottom:4px;}
|
|
.lh-content-body strong{color:var(--g900);}
|
|
.lh-content-body code{background:var(--g100);padding:2px 6px;border-radius:4px;font-size:13px;}
|
|
.lh-content-body blockquote{border-left:3px solid var(--blue);padding:8px 16px;margin:12px 0;background:var(--blue-light);border-radius:0 6px 6px 0;font-style:italic;}
|
|
.lh-content-body table{width:100%;border-collapse:collapse;margin:12px 0;}
|
|
.lh-content-body th,.lh-content-body td{padding:8px 12px;border:1px solid var(--g200);font-size:13px;}
|
|
.lh-content-body th{background:var(--g50);font-weight:600;}
|
|
|
|
/* Quiz — large, visual question cards */
|
|
.lh-quiz-q{margin-bottom:24px;padding:20px;background:white;border:1.5px solid var(--g200);border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
|
|
.lh-quiz-q:last-child{margin-bottom:0;}
|
|
.lh-quiz-q-header{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
|
|
.lh-quiz-q-num{font-size:13px;font-weight:700;color:white;background:linear-gradient(135deg,var(--blue),var(--purple));padding:4px 12px;border-radius:8px;min-width:32px;text-align:center;}
|
|
.lh-quiz-q-type{font-size:11px;color:var(--g400);background:var(--g100);padding:2px 8px;border-radius:4px;}
|
|
.lh-quiz-q-text{font-size:16px;font-weight:600;margin-bottom:14px;color:var(--g800);line-height:1.5;}
|
|
.lh-quiz-options{display:flex;flex-direction:column;gap:8px;}
|
|
.lh-quiz-option{display:flex;align-items:center;gap:12px;padding:14px 18px;border:2px solid var(--g200);border-radius:10px;cursor:pointer;transition:all 0.2s;font-size:14px;line-height:1.4;background:white;user-select:none;}
|
|
.lh-quiz-option:hover{border-color:var(--blue);background:var(--blue-light);transform:translateY(-1px);box-shadow:0 2px 8px rgba(37,99,235,0.1);}
|
|
.lh-quiz-option input[type="radio"]{accent-color:var(--blue);width:18px;height:18px;flex-shrink:0;}
|
|
.lh-quiz-option span{flex:1;}
|
|
.lh-opt-correct{border-color:var(--green) !important;background:var(--green-light) !important;box-shadow:0 0 0 2px rgba(16,185,129,0.2) !important;}
|
|
.lh-opt-wrong{border-color:var(--red) !important;background:var(--red-light) !important;box-shadow:0 0 0 2px rgba(239,68,68,0.2) !important;}
|
|
|
|
/* Quiz results */
|
|
.lh-result-item{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--g100);}
|
|
.lh-result-item:last-child{border-bottom:none;}
|
|
.lh-result-header{font-size:14px;margin-bottom:6px;}
|
|
.lh-expl{font-size:13px;padding:8px 12px;border-radius:6px;margin-top:6px;}
|
|
.lh-expl-wrong{background:var(--red-light);color:#991b1b;}
|
|
.lh-expl-correct{background:var(--green-light);color:#166534;}
|
|
.lh-expl-general{background:var(--blue-light);color:#1e40af;}
|
|
|
|
/* CMS question builder */
|
|
.lh-question-block{padding:16px;border:1.5px solid var(--g200);border-radius:10px;margin-bottom:12px;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:outline 0.2s;}
|
|
|
|
/* ============================================================
|
|
CONTENT MANAGER (WordPress-like CMS)
|
|
============================================================ */
|
|
|
|
/* Stats bar */
|
|
.cms-stats-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
|
|
.cms-stat{flex:1;min-width:90px;background:white;border:1px solid var(--g200);border-radius:10px;padding:12px 16px;text-align:center;}
|
|
.cms-stat-value{display:block;font-size:22px;font-weight:700;color:var(--blue);}
|
|
.cms-stat-label{font-size:11px;color:var(--g500);text-transform:uppercase;letter-spacing:0.5px;}
|
|
|
|
/* Layout */
|
|
.cms-layout{display:grid;grid-template-columns:220px 1fr;gap:16px;min-height:500px;}
|
|
.cms-sidebar{display:flex;flex-direction:column;gap:12px;}
|
|
.cms-sidebar-section{background:white;border:1px solid var(--g200);border-radius:10px;padding:14px;}
|
|
.cms-sidebar-section h4{margin:0 0 10px;font-size:13px;color:var(--g600);display:flex;align-items:center;gap:6px;}
|
|
.cms-main{background:white;border:1px solid var(--g200);border-radius:10px;overflow:visible;}
|
|
|
|
/* Category list in sidebar */
|
|
.cms-cat-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
|
|
.cms-cat-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:6px;font-size:13px;cursor:default;}
|
|
.cms-cat-item:hover{background:var(--g50);}
|
|
.cms-cat-item .cms-cat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.cms-cat-item .cms-cat-count{font-size:11px;color:var(--g400);margin:0 6px;}
|
|
.cms-add-cat{display:flex;gap:4px;margin:0;}
|
|
.cms-add-cat .cms-input-sm{flex:1;min-width:0;width:0;}
|
|
.cms-btn-add{flex-shrink:0;min-width:44px;padding:6px 10px;border:1px solid var(--g300);border-radius:6px;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:12px;}
|
|
.cms-btn-add:hover{background:var(--blue-light);}
|
|
|
|
/* Input small */
|
|
.cms-input-sm{font-size:13px;padding:6px 10px;border:1px solid var(--g300);border-radius:6px;font-family:inherit;background:white;box-sizing:border-box;}
|
|
.cms-input-sm:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-light);}
|
|
|
|
/* Toolbar */
|
|
.cms-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--g200);gap:12px;}
|
|
.cms-search{display:flex;align-items:center;gap:6px;border:1px solid var(--g300);border-radius:6px;padding:0 10px;background:white;flex:1;max-width:280px;}
|
|
.cms-search i{color:var(--g400);font-size:12px;}
|
|
.cms-search input{border:none;outline:none;font-size:13px;padding:6px 0;width:100%;background:transparent;}
|
|
|
|
/* Content table */
|
|
.cms-content-table{font-size:13px;}
|
|
.cms-table-header{display:grid;grid-template-columns:1fr 110px 80px 80px 90px 40px;gap:8px;padding:8px 16px;background:var(--g50);border-bottom:1px solid var(--g200);font-weight:600;color:var(--g500);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;}
|
|
.cms-table-body{max-height:calc(100vh - 340px);overflow-y:auto;}
|
|
.cms-table-row{display:grid;grid-template-columns:1fr 110px 80px 80px 90px 40px;gap:8px;padding:10px 16px;border-bottom:1px solid var(--g100);align-items:center;cursor:pointer;transition:background 0.1s;}
|
|
.cms-table-row:hover{background:var(--g50);}
|
|
.cms-col-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.cms-col-title .cms-title-sub{font-size:11px;color:var(--g400);font-weight:400;}
|
|
.cms-col-cat,.cms-col-type,.cms-col-date{color:var(--g500);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.cms-col-status .cms-badge{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:500;}
|
|
.cms-badge-pub{background:var(--green-light);color:#166534;}
|
|
.cms-badge-draft{background:var(--g100);color:var(--g500);}
|
|
.cms-col-actions{text-align:center;}
|
|
|
|
/* Editor */
|
|
.cms-editor{padding:16px 20px;}
|
|
.cms-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
|
|
.cms-editor-actions{display:flex;gap:8px;align-items:center;position:relative;z-index:2;}
|
|
.cms-title-input{width:100%;font-size:22px;font-weight:600;padding:10px 0;border:none;border-bottom:2px solid var(--g200);outline:none;font-family:inherit;color:var(--g800);margin-bottom:12px;}
|
|
.cms-title-input:focus{border-bottom-color:var(--blue);}
|
|
.cms-meta-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}
|
|
.cms-meta-field label{display:block;font-size:11px;font-weight:600;color:var(--g500);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.3px;}
|
|
.cms-meta-field select,.cms-meta-field input{width:100%;}
|
|
.cms-label{display:block;font-size:12px;font-weight:600;color:var(--g600);margin-bottom:6px;}
|
|
.cms-body-editor{width:100%;font-size:13px;line-height:1.6;padding:14px;border:1px solid var(--g300);border-radius:8px;resize:vertical;box-sizing:border-box;font-family:'Courier New',monospace;background:var(--g50);min-height:200px;}
|
|
.cms-body-editor:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 2px var(--blue-light);}
|
|
.cms-body-section{margin-bottom:20px;}
|
|
|
|
/* Quiz section in editor */
|
|
.cms-quiz-section{border-top:2px solid var(--g200);padding-top:16px;}
|
|
.cms-quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
|
|
.cms-quiz-header h3{margin:0;font-size:15px;color:var(--g700);}
|
|
|
|
/* Editor toolbar */
|
|
.cms-editor-toolbar{display:flex;gap:2px;padding:6px 8px;background:var(--g50);border:1px solid var(--g300);border-bottom:none;border-radius:8px 8px 0 0;flex-wrap:wrap;}
|
|
.cms-tb-btn{width:32px;height:28px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:12px;color:var(--g600);display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:600;}
|
|
.cms-tb-btn:hover{background:var(--g200);color:var(--g800);}
|
|
.cms-tb-sep{width:1px;background:var(--g300);margin:2px 4px;align-self:stretch;}
|
|
.cms-body-section .cms-body-editor{border-radius:0 0 8px 8px;}
|
|
|
|
/* Mobile responsive */
|
|
@media(max-width:768px){
|
|
.cms-layout{grid-template-columns:1fr;}
|
|
.cms-sidebar{flex-direction:row;overflow-x:auto;gap:8px;}
|
|
.cms-sidebar-section{min-width:200px;flex-shrink:0;}
|
|
.cms-table-header,.cms-table-row{grid-template-columns:1fr 80px 70px;font-size:12px;}
|
|
.cms-col-cat,.cms-col-date,.cms-col-actions{display:none;}
|
|
.cms-meta-row{grid-template-columns:1fr;gap:8px;}
|
|
.cms-stats-bar{gap:4px;}
|
|
.cms-stat{padding:8px 10px;}
|
|
.cms-stat-value{font-size:18px;}
|
|
}
|
|
.lh-option-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;padding:6px 8px;border-radius:6px;background:var(--g50);}
|
|
|
|
@media(max-width:640px){
|
|
.lh-feed-item-header{flex-direction:column;gap:6px;}
|
|
.lh-feed-badges{align-self:flex-start;}
|
|
.lh-option-row{flex-wrap:wrap;}
|
|
.lh-option-row .lh-opt-expl{width:100%;}
|
|
}
|
|
|
|
/* ── Tiptap editor ────────────────────────────────────────── */
|
|
.cms-quill-body{border:1px solid var(--g300);border-radius:8px;background:white;overflow:hidden;}
|
|
.cms-quill-body .tp-content .ProseMirror{min-height:280px;padding:16px;outline:none;font-size:14px;font-family:'Inter',system-ui,sans-serif;line-height:1.6;}
|
|
|
|
/* Shared ProseMirror content styles */
|
|
.ProseMirror{outline:none;}
|
|
.ProseMirror p{margin-bottom:8px;}
|
|
.ProseMirror h2{font-size:20px;font-weight:700;margin:16px 0 8px;}
|
|
.ProseMirror h3{font-size:16px;font-weight:600;margin:12px 0 6px;}
|
|
.ProseMirror blockquote{border-left:4px solid var(--blue);padding-left:12px;color:var(--g600);margin:10px 0;}
|
|
.ProseMirror pre{background:var(--g900);color:#e5e7eb;padding:12px;border-radius:6px;font-size:13px;overflow-x:auto;}
|
|
.ProseMirror ul{padding-left:20px;margin-bottom:8px;}
|
|
.ProseMirror ol{padding-left:20px;margin-bottom:8px;}
|
|
.ProseMirror li{margin-bottom:3px;}
|
|
.ProseMirror a{color:var(--blue);text-decoration:underline;}
|
|
.ProseMirror code{background:var(--g100);padding:1px 5px;border-radius:3px;font-size:0.9em;}
|
|
.ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--g400);pointer-events:none;float:left;height:0;}
|
|
|
|
/* Tiptap toolbar */
|
|
.tp-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;background:var(--g50);border-bottom:1px solid var(--g200);}
|
|
.tp-btn{height:28px;min-width:28px;padding:0 6px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:12px;color:var(--g600);display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:600;transition:background 0.1s;}
|
|
.tp-btn:hover{background:var(--g200);color:var(--g800);}
|
|
.tp-btn.active{background:var(--blue-light);color:var(--blue);}
|
|
.tp-sep{width:1px;background:var(--g300);margin:2px 3px;align-self:stretch;}
|
|
.tp-toolbar-mini{padding:4px 6px;}
|
|
.tp-toolbar-mini .tp-btn{height:24px;min-width:24px;font-size:11px;}
|
|
|
|
/* Link bar — inline, no popup */
|
|
.tp-link-bar{display:none;align-items:center;gap:6px;padding:6px 10px;background:#fffbeb;border-bottom:1px solid var(--amber);font-size:13px;}
|
|
.tp-link-input{flex:1;padding:5px 10px;border:1px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;min-width:0;}
|
|
.tp-link-apply{padding:4px 12px;background:var(--blue);color:white;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;}
|
|
.tp-link-apply:hover{background:#1d4ed8;}
|
|
.tp-link-remove{padding:4px 10px;background:var(--red-light);color:var(--red);border:1px solid var(--red);border-radius:6px;cursor:pointer;font-size:12px;}
|
|
.tp-link-cancel{padding:4px 8px;background:transparent;border:none;cursor:pointer;color:var(--g400);font-size:14px;}
|
|
.tp-content{position:relative;}
|
|
|
|
/* Mini richtext wraps for questions/options */
|
|
.lh-q-richtext-wrap{border:1.5px solid var(--g300);border-radius:8px;overflow:hidden;margin-bottom:8px;}
|
|
.lh-q-richtext-wrap .tp-content .ProseMirror{min-height:60px;padding:10px;font-size:14px;}
|
|
.lh-opt-richtext-wrap{border:1.5px solid var(--g300);border-radius:6px;overflow:hidden;flex:2;}
|
|
.lh-opt-richtext-wrap .tp-content .ProseMirror{min-height:36px;padding:6px 8px;font-size:13px;}
|
|
|
|
/* Rich text toggle button */
|
|
.lh-richtext-btn{font-size:11px;padding:3px 8px;border:1px solid var(--g300);border-radius:4px;background:white;cursor:pointer;color:var(--g500);white-space:nowrap;}
|
|
.lh-richtext-btn.active{background:var(--blue-light);border-color:var(--blue);color:var(--blue);font-weight:600;}
|
|
|
|
/* Multi-select quiz options */
|
|
.lh-quiz-option input[type="checkbox"]{accent-color:var(--blue);width:18px;height:18px;flex-shrink:0;}
|
|
.lh-quiz-multi-hint{font-size:12px;color:var(--g500);margin-bottom:10px;font-style:italic;}
|
|
|
|
/* ── Inline delete confirmation bar ──────────────────────── */
|
|
/* display:flex is NOT set here — .hidden (display:none) must win */
|
|
.lh-delete-confirm-bar{align-items:center;gap:10px;padding:10px 16px;background:#fef2f2;border:1.5px solid #fca5a5;border-radius:10px;margin-bottom:12px;font-size:13px;color:#991b1b;flex-wrap:wrap;}
|
|
.lh-delete-confirm-bar:not(.hidden){display:flex;}
|
|
.lh-delete-confirm-bar i{color:var(--red);flex-shrink:0;}
|
|
|
|
/* ── Marp / Presentation editor ──────────────────────────── */
|
|
.lh-marp-textarea{width:100%;min-height:320px;font-family:'Courier New',monospace;font-size:13px;line-height:1.6;padding:14px;border:1px solid var(--g300);border-radius:8px;resize:vertical;box-sizing:border-box;background:var(--g900);color:#e5e7eb;outline:none;}
|
|
.lh-marp-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-light);}
|
|
|
|
/* ── Slide preview modal ──────────────────────────────────── */
|
|
.slide-preview-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;}
|
|
.slide-preview-modal.hidden{display:none;}
|
|
.slide-preview-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.85);}
|
|
.slide-preview-shell{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;padding:12px;}
|
|
.slide-preview-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;flex-shrink:0;}
|
|
.slide-preview-counter{font-size:14px;font-weight:700;color:white;background:rgba(255,255,255,0.15);padding:4px 14px;border-radius:20px;}
|
|
.slide-preview-close{background:rgba(255,255,255,0.15);border:none;color:white;padding:6px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:background 0.15s;}
|
|
.slide-preview-close:hover{background:rgba(255,255,255,0.25);}
|
|
.slide-preview-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;min-height:0;overflow:hidden;}
|
|
.slide-preview-frame{flex:1;max-width:900px;background:white;border-radius:8px;overflow:auto;box-shadow:0 8px 40px rgba(0,0,0,0.6);max-height:100%;display:flex;flex-direction:column;}
|
|
.slide-preview-frame section{all:unset;display:block;padding:40px 48px !important;box-sizing:border-box;}
|
|
.slide-preview-frame section *{box-sizing:border-box;}
|
|
.slide-nav-btn{background:rgba(255,255,255,0.15);border:none;color:white;font-size:36px;line-height:1;padding:10px 14px;border-radius:10px;cursor:pointer;flex-shrink:0;transition:background 0.15s;user-select:none;}
|
|
.slide-nav-btn:hover{background:rgba(255,255,255,0.25);}
|
|
.slide-preview-dots{display:flex;justify-content:center;gap:6px;padding-top:10px;flex-shrink:0;flex-wrap:wrap;}
|
|
.slide-dot{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,0.3);cursor:pointer;padding:0;transition:background 0.15s;}
|
|
.slide-dot.active{background:white;}
|
|
@media(max-width:600px){
|
|
.slide-nav-btn{font-size:24px;padding:8px 10px;}
|
|
.slide-preview-topbar span:nth-child(2){display:none;}
|
|
}
|
|
|
|
/* ── AI Generate panel ────────────────────────────────────── */
|
|
.lh-ai-panel{border:2px solid transparent;background:linear-gradient(white,white) padding-box,linear-gradient(135deg,#7c3aed,#2563eb) border-box;border-radius:12px;padding:20px;margin-bottom:16px;}
|
|
.lh-ai-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
|
|
.lh-ai-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--g200);padding-bottom:10px;}
|
|
.lh-ai-tab{padding:6px 14px;border:1px solid var(--g200);border-radius:8px;background:white;cursor:pointer;font-size:13px;font-weight:500;color:var(--g600);display:flex;align-items:center;gap:6px;transition:all 0.15s;}
|
|
.lh-ai-tab:hover{border-color:var(--blue);color:var(--blue);}
|
|
.lh-ai-tab.active{background:var(--blue-light);border-color:var(--blue);color:var(--blue);font-weight:600;}
|
|
.lh-ai-tabpanel{margin-bottom:14px;}
|
|
.lh-ai-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border:2px dashed var(--g300);border-radius:10px;cursor:pointer;text-align:center;font-size:13px;color:var(--g600);transition:border-color 0.2s;background:var(--g50);}
|
|
.lh-ai-dropzone:hover{border-color:var(--blue);background:var(--blue-light);}
|
|
.lh-ai-options{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:14px;background:var(--g50);border-radius:8px;}
|
|
.lh-ai-opt-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
|
|
.lh-ai-opt-field{display:flex;flex-direction:column;gap:3px;}
|
|
.lh-ai-opt-field label{font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;}
|
|
|
|
/* Quiz questions card inside AI panel */
|
|
.lh-ai-quiz-card{background:linear-gradient(135deg,#eff6ff,#eef2ff);border:1.5px solid #c7d2fe;border-radius:10px;overflow:hidden;}
|
|
.lh-ai-quiz-card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:white;border-bottom:1px solid #e0e7ff;}
|
|
.lh-ai-quiz-card-body{padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
|
|
|
|
/* WebDAV browser */
|
|
.lh-webdav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--g100);transition:background 0.1s;}
|
|
.lh-webdav-item:last-child{border-bottom:none;}
|
|
.lh-webdav-item:hover{background:var(--g50);}
|
|
.lh-webdav-dir{color:var(--g700);font-weight:500;}
|
|
.lh-webdav-file{color:var(--g600);}
|
|
.lh-webdav-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
|
|
/* ── Notes tab — personal scratchpad (under Clinical Tools) ───── */
|
|
.notes-layout{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:flex-start;min-height:70vh;}
|
|
@media (max-width:900px){.notes-layout{grid-template-columns:1fr;}}
|
|
|
|
.notes-sidebar{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:80vh;}
|
|
.notes-sidebar-head{padding:10px;border-bottom:1px solid var(--g200);background:var(--g50);display:flex;flex-direction:column;gap:8px;}
|
|
.notes-new-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;font-size:13px;font-weight:600;}
|
|
.notes-search{position:relative;}
|
|
.notes-search i{position:absolute;top:50%;left:10px;transform:translateY(-50%);color:var(--g400);font-size:12px;pointer-events:none;}
|
|
.notes-search input{width:100%;padding:7px 10px 7px 30px;border:1px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;box-sizing:border-box;background:white;}
|
|
.notes-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
|
|
|
|
.notes-list{flex:1;overflow-y:auto;padding:4px;}
|
|
.notes-empty{padding:24px 14px;text-align:center;color:var(--g400);font-size:13px;line-height:1.5;}
|
|
.notes-list-item{display:block;width:100%;text-align:left;padding:10px 12px;border:none;background:transparent;border-radius:8px;cursor:pointer;margin-bottom:2px;font-family:inherit;transition:background 0.1s;border-left:3px solid transparent;}
|
|
.notes-list-item:hover{background:var(--g50);}
|
|
.notes-list-item.active{background:var(--blue-light);border-left-color:var(--blue);}
|
|
.notes-list-title{font-size:13.5px;font-weight:600;color:var(--g800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
|
|
.notes-list-snippet{font-size:12px;color:var(--g500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
|
|
.notes-list-when{font-size:11px;color:var(--g400);margin-top:4px;}
|
|
|
|
.notes-editor{background:white;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:70vh;}
|
|
.notes-editor.hidden{display:none;}
|
|
.notes-editor-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--g200);background:var(--g50);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);flex-wrap:wrap;}
|
|
.notes-title-input{flex:1;min-width:180px;padding:8px 10px;border:1px solid transparent;border-radius:6px;font-size:16px;font-weight:600;color:var(--g900);font-family:inherit;background:transparent;}
|
|
.notes-title-input:focus{outline:none;background:white;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
|
|
.notes-editor-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
|
|
.notes-status{font-size:12px;color:var(--g500);min-width:60px;text-align:right;}
|
|
.notes-status-dirty{color:var(--amber);}
|
|
.notes-status-saving{color:var(--g500);}
|
|
.notes-status-ok{color:#059669;}
|
|
.notes-status-err{color:var(--red);}
|
|
|
|
.notes-body-editor{flex:1;display:flex;flex-direction:column;min-height:280px;}
|
|
.notes-body-editor .tp-toolbar{position:sticky;top:0;z-index:5;}
|
|
.notes-body-editor .tp-content{flex:1;padding:14px 18px;font-size:14px;line-height:1.6;color:var(--g800);overflow-y:auto;min-height:220px;}
|
|
.notes-body-editor .tp-content:focus-within .ProseMirror{outline:none;}
|
|
.notes-body-editor .ProseMirror{outline:none;min-height:200px;}
|
|
.notes-body-editor .ProseMirror p{margin:0 0 8px;}
|
|
.notes-body-editor .ProseMirror h2{font-size:18px;font-weight:700;color:var(--g900);margin:16px 0 8px;}
|
|
.notes-body-editor .ProseMirror h3{font-size:15px;font-weight:700;color:var(--g800);margin:12px 0 6px;}
|
|
.notes-body-editor .ProseMirror ul,.notes-body-editor .ProseMirror ol{margin:0 0 8px 24px;}
|
|
.notes-body-editor .ProseMirror blockquote{border-left:3px solid var(--g300);margin:0 0 8px;padding:2px 0 2px 12px;color:var(--g600);font-style:italic;}
|
|
.notes-body-editor .ProseMirror pre{background:var(--g900);color:#e5e7eb;padding:10px 14px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;overflow-x:auto;margin:0 0 8px;}
|
|
.notes-body-editor .ProseMirror code{background:var(--g100);padding:1px 5px;border-radius:4px;font-size:12.5px;}
|
|
.notes-body-editor .ProseMirror a{color:var(--blue);text-decoration:underline;}
|
|
.notes-body-editor .notes-body-fallback{width:100%;height:100%;min-height:260px;padding:14px 18px;border:none;font-size:14px;line-height:1.6;font-family:inherit;color:var(--g800);resize:vertical;box-sizing:border-box;}
|
|
|
|
.notes-editor-foot{padding:8px 14px;border-top:1px solid var(--g200);font-size:11px;color:var(--g400);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
|
|
.notes-meta{font-size:11px;color:var(--g400);}
|
|
|
|
.notes-empty-state{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:60px 24px;text-align:center;color:var(--g400);display:flex;flex-direction:column;align-items:center;gap:14px;min-height:70vh;justify-content:center;}
|
|
.notes-empty-state i{font-size:64px;color:var(--g300);}
|
|
.notes-empty-state p{font-size:14px;line-height:1.5;max-width:320px;margin:0;}
|
|
.notes-empty-state.hidden{display:none;}
|
|
|
|
/* Voice-to-note recording bar inside the editor head.
|
|
Each rule has an explicit `.hidden` override — the generic
|
|
.hidden{display:none} at line 317 loses to these single-class
|
|
rules on source order, so we need to re-assert it here. */
|
|
.notes-voice-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0;}
|
|
.notes-voice-bar .btn-sm{font-size:12px;padding:6px 10px;}
|
|
.notes-voice-bar .btn-sm.hidden{display:none;}
|
|
.notes-rec-indicator{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--red);font-weight:600;}
|
|
.notes-rec-indicator.hidden{display:none;}
|
|
.notes-rec-indicator .pulse-dot{width:8px;height:8px;background:var(--red);border-radius:50%;animation:notes-pulse 1.2s ease-in-out infinite;}
|
|
.notes-rec-indicator .pulse-dot.paused{animation:none;opacity:0.5;}
|
|
@keyframes notes-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.35;transform:scale(1.25);}}
|
|
.notes-rec-timer{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--g600);}
|
|
|
|
/* Notes — friendlier touches */
|
|
.notes-empty-state .notes-empty-card{max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;}
|
|
.notes-empty-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#fef3c7,#fde68a);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(245,158,11,0.25);}
|
|
.notes-empty-icon i{font-size:30px;color:#b45309;}
|
|
.notes-empty-state h3{margin:4px 0 0;font-size:20px;font-weight:600;color:var(--g800);}
|
|
.notes-empty-state p{font-size:14px;line-height:1.55;color:var(--g500);margin:0;}
|
|
.notes-empty-cta{margin-top:4px;padding:10px 20px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 6px rgba(37,99,235,0.25);}
|
|
.notes-empty-cta:hover{box-shadow:0 4px 10px rgba(37,99,235,0.35);}
|
|
.notes-empty-tips{margin-top:16px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--g500);text-align:left;align-self:stretch;padding:14px 18px;background:var(--g50);border-radius:10px;}
|
|
.notes-empty-tips div{display:flex;align-items:center;gap:10px;}
|
|
.notes-empty-tips i{color:var(--blue);font-size:13px;width:16px;text-align:center;}
|
|
.notes-empty-tips kbd{background:white;border:1px solid var(--g300);border-radius:4px;padding:1px 6px;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 1px 0 var(--g200);}
|
|
|
|
.notes-list-item{position:relative;transition:background 0.15s, transform 0.15s;}
|
|
.notes-list-item:hover{transform:translateX(1px);}
|
|
.notes-list-item.active{box-shadow:inset 0 0 0 1px var(--blue-light);}
|
|
|
|
.notes-sidebar-head{padding:12px;}
|
|
.notes-new-btn{border-radius:10px;padding:9px 14px;font-size:13.5px;box-shadow:0 1px 3px rgba(37,99,235,0.2);}
|
|
.notes-new-btn:hover{box-shadow:0 2px 6px rgba(37,99,235,0.3);}
|
|
|
|
.notes-title-input{font-size:18px;letter-spacing:-0.01em;}
|
|
.notes-title-input::placeholder{color:var(--g400);font-weight:500;}
|
|
|
|
.notes-editor-head{gap:12px;padding:12px 16px;}
|
|
.notes-body-editor{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);}
|
|
.notes-body-editor .tp-toolbar{border-bottom:1px solid var(--g100);background:#fdfdfd;}
|
|
|
|
/* subtle card float on hover for the whole editor */
|
|
.notes-editor{transition:box-shadow 0.2s;}
|
|
.notes-editor:hover{box-shadow:0 4px 16px rgba(0,0,0,0.06);}
|
|
|
|
/* ── Notes: reader mode + mobile layout ──────────────────────── */
|
|
|
|
/* Reader pane — clean read-only view of a saved note */
|
|
.notes-reader{background:white;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:70vh;}
|
|
.notes-reader.hidden{display:none;}
|
|
.notes-reader-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--g200);background:linear-gradient(180deg,#fdfdfd,#f9fafb);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);}
|
|
.notes-reader-title{flex:1;margin:0;font-size:20px;font-weight:600;color:var(--g900);letter-spacing:-0.01em;overflow-wrap:anywhere;}
|
|
.notes-reader-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
|
|
.notes-reader-body{flex:1;padding:22px 24px;font-size:15px;line-height:1.7;color:var(--g800);overflow-y:auto;}
|
|
.notes-reader-body p{margin:0 0 12px;}
|
|
.notes-reader-body h2{font-size:20px;font-weight:700;color:var(--g900);margin:20px 0 10px;}
|
|
.notes-reader-body h3{font-size:16px;font-weight:700;color:var(--g800);margin:16px 0 8px;}
|
|
.notes-reader-body ul,.notes-reader-body ol{margin:0 0 12px 24px;}
|
|
.notes-reader-body li{margin-bottom:4px;}
|
|
.notes-reader-body blockquote{border-left:3px solid var(--g300);margin:0 0 12px;padding:4px 0 4px 14px;color:var(--g600);font-style:italic;}
|
|
.notes-reader-body code{background:var(--g100);padding:1px 6px;border-radius:4px;font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
|
|
.notes-reader-body pre{background:var(--g900);color:#e5e7eb;padding:12px 16px;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;overflow-x:auto;margin:0 0 12px;}
|
|
.notes-reader-body pre code{background:transparent;padding:0;color:inherit;}
|
|
.notes-reader-body a{color:var(--blue);text-decoration:underline;}
|
|
.notes-reader-foot{padding:10px 18px;border-top:1px solid var(--g200);font-size:11px;color:var(--g400);background:var(--g50);}
|
|
|
|
/* Back button for mobile navigation (shown in reader + editor heads) */
|
|
.notes-back{display:none !important;padding:6px 10px;}
|
|
|
|
/* Mobile: single-pane layout driven by .notes-layout[data-view=…] */
|
|
@media (max-width:900px){
|
|
.notes-layout{grid-template-columns:1fr;gap:0;}
|
|
.notes-sidebar,.notes-reader,.notes-editor,.notes-empty-state{max-height:none;}
|
|
|
|
/* Show only the pane matching data-view; hide the others. The empty-
|
|
state card is purely a desktop affordance ("nothing picked yet,
|
|
pick from the sidebar"); on mobile the sidebar IS the list, so
|
|
we hide empty-state whenever the sidebar is showing. */
|
|
.notes-layout[data-view="list"] .notes-reader,
|
|
.notes-layout[data-view="list"] .notes-editor,
|
|
.notes-layout[data-view="list"] .notes-empty-state,
|
|
.notes-layout[data-view="reader"] .notes-sidebar,
|
|
.notes-layout[data-view="reader"] .notes-editor,
|
|
.notes-layout[data-view="reader"] .notes-empty-state,
|
|
.notes-layout[data-view="editor"] .notes-sidebar,
|
|
.notes-layout[data-view="editor"] .notes-reader,
|
|
.notes-layout[data-view="editor"] .notes-empty-state,
|
|
.notes-layout[data-view="empty"] .notes-reader,
|
|
.notes-layout[data-view="empty"] .notes-editor{display:none !important;}
|
|
|
|
.notes-back{display:inline-flex !important;}
|
|
|
|
.notes-reader-head,.notes-editor-head{padding:10px 12px;gap:8px;}
|
|
.notes-reader-title{font-size:17px;}
|
|
.notes-reader-body{padding:16px;font-size:14.5px;}
|
|
.notes-reader-actions .btn-sm{padding:6px 10px;font-size:12px;}
|
|
|
|
/* Stack the editor action row on small screens so nothing wraps weird */
|
|
.notes-editor-head{flex-wrap:wrap;}
|
|
.notes-title-input{font-size:17px;min-width:140px;flex:1 1 100%;order:2;}
|
|
.notes-back{order:1;}
|
|
.notes-editor-actions{order:3;flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-start;}
|
|
|
|
.notes-voice-bar{flex-wrap:wrap;}
|
|
.notes-empty-state{padding:40px 16px;}
|
|
}
|
|
|
|
/* Desktop: the list pane should never be hidden by data-view toggles */
|
|
@media (min-width:901px){
|
|
.notes-layout[data-view] .notes-sidebar{display:flex !important;}
|
|
}
|
|
|
|
/* ── Notes: trash + tabs ──────────────────────────────────────── */
|
|
.notes-tabs{display:flex;gap:4px;margin-top:6px;}
|
|
.notes-tab-btn{flex:1;padding:6px 10px;background:transparent;border:1px solid var(--g300);border-radius:6px;font-size:12px;font-weight:500;color:var(--g600);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px;transition:background 0.1s;}
|
|
.notes-tab-btn:hover{background:var(--g100);}
|
|
.notes-tab-btn.active{background:var(--blue-light);color:var(--blue);border-color:var(--blue);}
|
|
.notes-trash-count{font-size:11px;color:var(--g500);margin-left:2px;}
|
|
.notes-tab-btn.active .notes-trash-count{color:var(--blue);}
|
|
|
|
.notes-trash-foot{padding:8px 10px;border-top:1px solid var(--g200);background:var(--g50);}
|
|
.notes-trash-foot.hidden{display:none;}
|
|
.notes-trash-foot .btn-sm{width:100%;justify-content:center;}
|
|
|
|
.notes-list-row{position:relative;display:flex;align-items:stretch;gap:0;}
|
|
.notes-list-row .notes-list-item{flex:1;min-width:0;}
|
|
.notes-trash-actions{display:flex;flex-direction:column;gap:4px;padding:6px 6px 6px 0;align-items:stretch;}
|
|
.notes-restore-btn,.notes-hard-delete-btn{font-size:11px;font-weight:500;padding:4px 8px;border:1px solid var(--g300);border-radius:6px;background:white;color:var(--g700);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;}
|
|
.notes-restore-btn:hover{background:var(--blue-light);color:var(--blue);border-color:var(--blue);}
|
|
.notes-hard-delete-btn{padding:4px 6px;color:var(--red);border-color:var(--red-light);}
|
|
.notes-hard-delete-btn:hover{background:var(--red);color:white;border-color:var(--red);}
|
|
|
|
/* In trash view, list items aren't clickable as drafts — make that visible */
|
|
.notes-list[data-pane="trash"] .notes-list-item{cursor:default;opacity:0.85;}
|
|
|
|
/* ─── Extensions / Pagers cards ─────────────────────────────────────── */
|
|
/* Entrance: gentle fade-up. Stagger via inline --ext-stagger CSS var
|
|
set per-card in renderCard() so cards appear in a wave. */
|
|
@keyframes extCardIn{
|
|
from{opacity:0;transform:translateY(6px);}
|
|
to {opacity:1;transform:translateY(0);}
|
|
}
|
|
.ext-card{
|
|
opacity:0;
|
|
animation:extCardIn .32s cubic-bezier(.2,.8,.2,1) forwards;
|
|
animation-delay:var(--ext-stagger,0ms);
|
|
transition:transform .15s ease, box-shadow .2s ease, border-color .15s ease;
|
|
will-change:transform;
|
|
/* Every card is the same box regardless of how long its name or number is, so
|
|
a grid of them reads as rows rather than a ragged mosaic. */
|
|
display:flex; gap:10px; align-items:flex-start;
|
|
background:white; border:1px solid var(--g200); border-radius:10px; padding:12px 14px;
|
|
min-height:96px;
|
|
}
|
|
.ext-card-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
|
|
.ext-card-head{ display:flex; align-items:center; gap:8px; min-width:0; }
|
|
.ext-card-head i{ font-size:13px; flex-shrink:0; }
|
|
/* The name is the scan target, so it leads and gets the weight. */
|
|
.ext-name{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; color:var(--g900);
|
|
letter-spacing:-.012em; line-height:1.3; overflow-wrap:anywhere; }
|
|
.ext-badge{ flex-shrink:0; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:5px;
|
|
text-transform:uppercase; letter-spacing:.05em; }
|
|
/* The number is the payload. Tabular figures and wrapping only at the <wbr>
|
|
points between groups, never inside a run of digits. */
|
|
.ext-number{ align-self:flex-start; max-width:100%; font-family:ui-monospace,SFMono-Regular,monospace;
|
|
font-size:16px; font-weight:700; letter-spacing:.3px; line-height:1.35; text-align:left;
|
|
background:none; border:0; padding:0; cursor:pointer; word-break:normal; overflow-wrap:break-word;
|
|
font-feature-settings:'tnum' 1; }
|
|
.ext-notes{ font-size:11.5px; color:var(--g500); line-height:1.45; overflow-wrap:anywhere; }
|
|
.ext-card-actions{ display:flex; gap:2px; flex-shrink:0; }
|
|
@media(max-width:640px){ .ext-card{ min-height:0; } .ext-number{ font-size:15px; } }
|
|
.ext-card:hover{
|
|
border-color:var(--g300)!important;
|
|
box-shadow:0 4px 12px -2px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
|
|
transform:translateY(-1px);
|
|
}
|
|
|
|
/* Action buttons: dim by default, pop to full opacity on card hover or
|
|
when keyboard focus enters. Keeps the visual weight on the number. */
|
|
.ext-card .ext-action{padding:4px 8px;opacity:.55;transition:opacity .15s ease, background .15s ease;}
|
|
.ext-card:hover .ext-action,
|
|
.ext-card:focus-within .ext-action{opacity:1;}
|
|
.ext-card .ext-action:hover{opacity:1;background:var(--g100);}
|
|
|
|
/* Click-to-copy number: button reset + the copied-flash class. */
|
|
.ext-number{transition:color .2s ease;}
|
|
.ext-number:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-thickness:1px;}
|
|
.ext-number:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px;}
|
|
@keyframes extCopyFlash{
|
|
0% {color:#10b981;transform:scale(1.04);}
|
|
100%{color:inherit;transform:scale(1);}
|
|
}
|
|
.ext-number.ext-copied{animation:extCopyFlash .55s ease;}
|
|
.ext-number.ext-copied::after{
|
|
content:" ✓ copied";
|
|
font-size:11px;
|
|
font-weight:600;
|
|
color:#10b981;
|
|
letter-spacing:.5px;
|
|
margin-left:6px;
|
|
animation:extCopyFlash .55s ease;
|
|
}
|
|
|
|
/* Reduced motion — respect the OS preference. Skip the entrance + hover
|
|
transform; keep only color transitions. */
|
|
@media (prefers-reduced-motion:reduce){
|
|
.ext-card{animation:none;opacity:1;}
|
|
.ext-card:hover{transform:none;}
|
|
.ext-number.ext-copied{animation:none;}
|
|
}
|
|
|
|
/* ─── Admin Docs viewer ─────────────────────────────────────────────── */
|
|
.docs-shell{display:flex;gap:14px;height:calc(100vh - 200px);min-height:500px;}
|
|
.docs-sidebar{flex:0 0 280px;display:flex;flex-direction:column;background:var(--g50);border:1px solid var(--g200);border-radius:10px;overflow:hidden;}
|
|
.docs-sidebar-head{padding:10px;border-bottom:1px solid var(--g200);background:white;}
|
|
.docs-filter{width:100%;padding:6px 10px;border:1px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;}
|
|
.docs-filter:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-light);}
|
|
.docs-tree{flex:1;overflow-y:auto;padding:6px 4px;font-size:13px;}
|
|
.docs-loading,.docs-empty{padding:20px;text-align:center;color:var(--g500);font-size:12px;}
|
|
.docs-node{margin:1px 0;}
|
|
.docs-dir>.docs-children{margin-left:14px;border-left:1px dashed var(--g200);padding-left:4px;}
|
|
.docs-dir-toggle,.docs-file-btn{display:flex;align-items:center;gap:6px;width:100%;padding:5px 8px;background:none;border:0;border-radius:6px;font-family:inherit;font-size:13px;color:var(--g700);cursor:pointer;text-align:left;transition:background .12s ease, color .12s ease;}
|
|
.docs-dir-toggle:hover,.docs-file-btn:hover{background:white;color:var(--g900);}
|
|
.docs-file-btn.active{background:var(--blue-light);color:var(--blue-dark);font-weight:600;}
|
|
.docs-icon{font-size:11px;color:var(--g500);width:14px;text-align:center;flex-shrink:0;}
|
|
.docs-file-btn.active .docs-icon{color:var(--blue);}
|
|
.docs-arrow{font-size:9px;color:var(--g400);width:10px;text-align:center;flex-shrink:0;transition:transform .12s ease;}
|
|
.docs-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.docs-file-parent{font-size:10px;color:var(--g400);margin-left:6px;}
|
|
.docs-reader{flex:1;min-width:0;background:white;border:1px solid var(--g200);border-radius:10px;overflow-y:auto;display:flex;flex-direction:column;}
|
|
.docs-reader-meta{padding:8px 18px;border-bottom:1px solid var(--g100);background:var(--g50);font-size:11px;color:var(--g500);font-family:ui-monospace,SFMono-Regular,monospace;}
|
|
.docs-reader-body{flex:1;padding:24px 32px;line-height:1.7;color:var(--g800);font-size:14px;overflow-x:hidden;}
|
|
.docs-reader-body h1,.docs-reader-body h2,.docs-reader-body h3,.docs-reader-body h4{color:var(--g900);font-weight:700;margin:1.4em 0 .6em;line-height:1.3;}
|
|
.docs-reader-body h1{font-size:24px;border-bottom:1px solid var(--g200);padding-bottom:8px;}
|
|
.docs-reader-body h2{font-size:20px;}
|
|
.docs-reader-body h3{font-size:17px;}
|
|
.docs-reader-body h4{font-size:15px;color:var(--g700);}
|
|
.docs-reader-body p{margin:0 0 1em;}
|
|
.docs-reader-body ul,.docs-reader-body ol{margin:0 0 1em;padding-left:1.6em;}
|
|
.docs-reader-body li{margin:.25em 0;}
|
|
.docs-reader-body code{background:var(--g100);padding:1px 5px;border-radius:4px;font-size:.88em;font-family:ui-monospace,SFMono-Regular,monospace;color:#be185d;}
|
|
.docs-reader-body pre{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:8px;overflow-x:auto;margin:0 0 1em;font-size:12px;line-height:1.55;}
|
|
.docs-reader-body pre code{background:none;padding:0;color:inherit;font-size:inherit;}
|
|
.docs-reader-body blockquote{border-left:3px solid var(--blue);background:var(--blue-light);padding:8px 14px;margin:0 0 1em;border-radius:0 6px 6px 0;color:var(--g700);}
|
|
.docs-reader-body blockquote p:last-child{margin-bottom:0;}
|
|
.docs-reader-body table{border-collapse:collapse;margin:0 0 1em;font-size:13px;display:block;overflow-x:auto;}
|
|
.docs-reader-body th,.docs-reader-body td{border:1px solid var(--g200);padding:6px 10px;text-align:left;}
|
|
.docs-reader-body th{background:var(--g50);font-weight:600;}
|
|
.docs-reader-body a{color:var(--blue);text-decoration:none;}
|
|
.docs-reader-body a:hover{text-decoration:underline;}
|
|
.docs-reader-body .docs-anchor-link{color:var(--blue);cursor:pointer;text-decoration:none;}
|
|
.docs-reader-body .docs-anchor-link:hover{text-decoration:underline;}
|
|
.docs-reader-body hr{border:0;border-top:1px solid var(--g200);margin:1.6em 0;}
|
|
|
|
@media (max-width:900px){
|
|
.docs-shell{flex-direction:column;height:auto;}
|
|
.docs-sidebar{flex:0 0 auto;max-height:240px;}
|
|
.docs-reader{min-height:60vh;}
|
|
}
|
|
|
|
/* Biometric login button on the auth screen — themed to match the SSO
|
|
button in restraint, but with a friendly accent so it doesn't look
|
|
like a duplicate of the password Sign In button. */
|
|
.btn-bio-login{
|
|
background:linear-gradient(135deg,#0ea5e9,#2563eb);
|
|
color:white;
|
|
margin-bottom:8px;
|
|
display:flex;align-items:center;justify-content:center;gap:8px;
|
|
transition:transform .12s ease, box-shadow .15s ease;
|
|
}
|
|
.btn-bio-login:hover{transform:translateY(-1px);box-shadow:0 4px 12px -3px rgba(37,99,235,.45);}
|
|
.btn-bio-login:active{transform:translateY(0);}
|
|
.btn-bio-login i{font-size:18px;}
|
|
|
|
/* Admin settings rows: straight aligned label/control pairs with consistent boxes. */
|
|
.admin-row { display:grid; grid-template-columns:minmax(140px,200px) minmax(0,1fr) auto; gap:10px; align-items:center; }
|
|
.admin-row-label { font-size:13px; font-weight:600; color:var(--g700); text-align:right; }
|
|
.admin-control { width:100%; font-size:13px; font-family:inherit; padding:6px 10px; border:1px solid var(--g300); border-radius:6px; max-width:420px; background:white; color:var(--g800); }
|
|
.admin-control:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-light); }
|
|
.cms-prompt-family > label { display:grid; grid-template-columns:minmax(140px,200px) minmax(0,1fr); gap:10px; align-items:center; }
|
|
@media (max-width:640px) {
|
|
.admin-row { grid-template-columns:1fr; }
|
|
.admin-row-label { text-align:left; }
|
|
.admin-control { max-width:none; }
|
|
.cms-prompt-family > label { grid-template-columns:1fr; }
|
|
}
|
|
|
|
/* One consistent font across the whole Admin panel. */
|
|
#admin-tab select, #admin-tab input, #admin-tab textarea, #admin-tab button,
|
|
#admin-tab .cms-prompt-family select, #admin-tab .cms-prompt-family textarea {
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Open WebUI-style assistant workspace: saved chats replace the main menu */
|
|
/* The blue app header stays: it is the same product, and hiding it was the last
|
|
thing making the assistant look like a separate one. Only the app SIDEBAR goes,
|
|
because the assistant rail takes its place. */
|
|
@media(min-width:769px){ body.assistant-workspace .sidebar{ display:none; } }
|
|
body.assistant-workspace .announcement-banner { display:none; }
|
|
body.assistant-workspace .app-body { min-height:100vh; }
|
|
body.assistant-workspace #assistant-tab.active { width:100%; }
|
|
/* iOS: taps on controls must not trigger double-tap zoom */
|
|
button, a, .btn-sm, .btn-generate, .btn-send, .tab-btn, input, textarea, select, label { touch-action: manipulation; }
|
|
|
|
/* ── Shared app chrome: the Assistant/Workspace switch and the menu toggle ────
|
|
These render in BOTH the app sidebar and the assistant rail. They used to live
|
|
in assistant.css, which only the assistant component loads — so on the main
|
|
app page they rendered as unstyled native buttons. */
|
|
/* ── Assistant / Workspace switch ────────────────────────────────────────────
|
|
Rendered identically in the app sidebar and the assistant rail, so moving
|
|
between them changes which pill is highlighted and nothing else. */
|
|
/* The sidebar is 210px wide. Without min-width:0 the buttons refuse to shrink
|
|
below their content and the switch overflows its own box. */
|
|
.assistant-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:8px 12px 10px; padding:4px; background:var(--g100); border:1px solid var(--g200); border-radius:10px; box-sizing:border-box; max-width:calc(100% - 24px); }
|
|
.assistant-mode-switch button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; border:0; border-radius:7px; padding:7px 4px; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--g600); background:transparent; cursor:pointer; white-space:nowrap; overflow:hidden; }
|
|
.assistant-mode-switch button i { font-size:11px; flex:0 0 auto; }
|
|
.assistant-mode-switch button:hover { color:var(--g900); }
|
|
.assistant-mode-switch button.active { background:white; color:var(--blue); box-shadow:var(--shadow); }
|
|
/* Inside the assistant rail the gutters already exist, so it only needs the gap. */
|
|
.assistant-history .assistant-mode-switch { margin:0 0 8px; }
|
|
|
|
/* The one menu toggle, identical in the app sidebar and the assistant rail. */
|
|
/* The toggle sits in the head row, so .menu-icon-btn styles it; this class is
|
|
only the behavioural hook that flips the icon. Styling it here too gave it a
|
|
second size and margin that fought the row. */
|
|
.assistant-menu-toggle i { transition:transform .15s ease; }
|
|
.assistant-menu-toggle.is-collapsed i { transform:rotate(180deg); }
|
|
|
|
/* Hidden menu: the rail collapses in both places, and the layout takes the
|
|
space back rather than leaving a gutter. */
|
|
/* Collapsing must not take the control away with it, or there is no way back.
|
|
The toggle leaves the collapsing box and pins itself beside the content. */
|
|
/* Collapsed = a narrow icon rail, not a disappearance. The brand mark, the
|
|
toggle, search and the account avatar stay reachable, so nothing has to be
|
|
floated over the content and there is always a way back. */
|
|
@media (min-width:769px) {
|
|
/* Collapsing is a desktop idea: it turns the rail into a 52px strip.
|
|
The phone sheet has nothing to collapse — the same control closes it —
|
|
so none of this may leak past the breakpoint. */
|
|
body.menu-hidden .sidebar { width:52px; }
|
|
body.menu-hidden .sidebar-tabs,
|
|
body.menu-hidden .assistant-mode-switch,
|
|
body.menu-hidden .sidebar-section-label,
|
|
body.menu-hidden .menu-brand h1,
|
|
body.menu-hidden .account-id,
|
|
body.menu-hidden .account-chevron { display:none; }
|
|
/* Collapsed, the head stacks. Every child is the same fixed-size centred box on
|
|
one axis — the brand kept its expanded `margin-right:auto`, which pushed the
|
|
stethoscope off the line the two buttons sat on. */
|
|
body.menu-hidden .menu-head { flex-direction:column; align-items:center; gap:6px; padding:10px 0 8px; }
|
|
body.menu-hidden .menu-head > * { width:32px; height:32px; margin:0; flex:0 0 auto;
|
|
display:flex; align-items:center; justify-content:center; }
|
|
body.menu-hidden .menu-brand { gap:0; }
|
|
body.menu-hidden .menu-brand i { font-size:18px; }
|
|
body.menu-hidden .account-card { padding:8px 0; }
|
|
body.menu-hidden .account-card-btn { justify-content:center; padding:6px 0; }
|
|
/* The collapsed rail is 52px and .sidebar clips its overflow, so a menu laid out
|
|
inside it is cut off — which hid Settings, FAQ and Log out behind the avatar.
|
|
Fixed positioning takes it out of that box entirely. */
|
|
body.menu-hidden .account-menu { position:fixed; left:56px; right:auto; bottom:12px; width:210px; }
|
|
|
|
/* The assistant rail collapses to the same strip rather than to nothing. */
|
|
body.assistant-workspace.menu-hidden .assistant-layout { grid-template-columns:52px minmax(0,1fr) 330px; }
|
|
body.assistant-workspace.menu-hidden.assistant-no-citations .assistant-layout,
|
|
body.assistant-mode-workspace.menu-hidden .assistant-layout { grid-template-columns:52px minmax(0,1fr); }
|
|
/* The rail has no padding of its own any more — the account card carries its
|
|
8px, exactly as in the app sidebar — so collapsed adds none either. */
|
|
body.assistant-workspace.menu-hidden .assistant-history { width:auto; min-width:0; overflow:visible; padding:0; }
|
|
body.assistant-workspace.menu-hidden .assistant-history .card,
|
|
body.assistant-workspace.menu-hidden .assistant-rail-workspace,
|
|
body.assistant-workspace.menu-hidden .assistant-rail-actions,
|
|
body.assistant-workspace.menu-hidden .assistant-mode-switch { display:none; }
|
|
}
|
|
|
|
/* Signed-out preview: the assistant is usable, everything that needs an account
|
|
is not shown rather than shown and refused. */
|
|
body.assistant-preview .assistant-plus,
|
|
body.assistant-preview .assistant-history .card,
|
|
body.assistant-preview .assistant-rail-actions,
|
|
body.assistant-preview .assistant-chats-header { display:none !important; }
|
|
body.assistant-preview .assistant-preview-note { display:flex; }
|
|
.assistant-preview-note { display:none; align-items:center; gap:8px; margin:0 0 10px; padding:8px 12px; border:1px solid var(--blue-light); background:var(--blue-light); color:var(--blue); border-radius:10px; font-size:12px; }
|
|
|
|
/* ── Account card ────────────────────────────────────────────────────────────
|
|
Ends both menus identically. Settings, FAQ, Admin and Log out were unlabelled
|
|
icon buttons in the old header; the slim bar has no room to explain them. */
|
|
.sidebar-nav { padding-bottom:0; }
|
|
/* Identical in both rails: same padding, same border, same height — the assistant
|
|
card sat lower because only the app column had bottom padding. */
|
|
.account-card { position:relative; margin-top:auto; border-top:1px solid var(--g200); padding:8px; }
|
|
.account-card-btn { min-height:44px; }
|
|
.account-card-btn { display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border:none; border-radius:10px; background:none; cursor:pointer; text-align:left; font-family:inherit; }
|
|
.account-card-btn:hover, .account-card-btn[aria-expanded="true"] { background:var(--g100); }
|
|
.account-avatar { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background:var(--blue); color:white; font-size:11px; font-weight:700; letter-spacing:.02em; }
|
|
.account-id { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
|
|
.account-name { font-size:12.5px; font-weight:600; color:var(--g800); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.account-email { font-size:11px; color:var(--g500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.account-chevron { flex:0 0 auto; font-size:10px; color:var(--g400); }
|
|
.account-menu { position:absolute; bottom:calc(100% - 4px); left:8px; right:8px; z-index:130; display:flex; flex-direction:column; gap:2px; padding:6px; background:white; border:1px solid var(--g200); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.16); }
|
|
.account-menu[hidden] { display:none; }
|
|
.account-menu-item { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:8px; padding:8px 10px; background:none; color:var(--g700); font-family:inherit; font-size:13px; text-align:left; cursor:pointer; }
|
|
.account-menu-item:hover { background:var(--blue-light); color:var(--blue); }
|
|
.account-menu-item i { width:16px; text-align:center; color:var(--g400); font-size:12px; }
|
|
.account-menu-item:hover i { color:var(--blue); }
|
|
/* The rail is a flex column, so the card needs the same push to the bottom. */
|
|
.assistant-history .account-card { margin-top:auto; padding:8px 0; }
|
|
/* Collapsed menus hide their contents; the card goes with them. */
|
|
/* A preview visitor has no account to show. */
|
|
body.assistant-preview .account-card { display:none; }
|
|
|
|
/* ── Search palette ──────────────────────────────────────────────────────────
|
|
One component in both views; the view decides what it searches. */
|
|
|
|
.menu-search { position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
|
|
.menu-search[hidden] { display:none; }
|
|
.menu-search-panel { width:min(640px,100%); max-height:70vh; display:flex; flex-direction:column; background:white; border:1px solid var(--g200); border-radius:14px; box-shadow:0 24px 60px rgba(15,23,42,.28); overflow:hidden; }
|
|
.menu-search-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--g100); }
|
|
.menu-search-head i { color:var(--g400); font-size:13px; }
|
|
.menu-search-head input { flex:1 1 auto; min-width:0; border:none; outline:none; background:none; font-family:inherit; font-size:15px; color:var(--g900); }
|
|
.menu-search-head button { border:none; background:none; color:var(--g400); font-size:14px; cursor:pointer; padding:4px; }
|
|
.menu-search-head button:hover { color:var(--g700); }
|
|
.menu-search-results { flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
|
|
.menu-search-item { display:flex; align-items:center; gap:10px; width:100%; border:none; border-radius:9px; padding:9px 10px; background:none; color:var(--g800); font-family:inherit; font-size:13px; text-align:left; cursor:pointer; }
|
|
.menu-search-item i { width:16px; text-align:center; color:var(--g400); font-size:12px; flex:0 0 auto; }
|
|
.menu-search-item span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.menu-search-item em { flex:0 0 auto; font-style:normal; font-size:11px; color:var(--g400); }
|
|
.menu-search-item:hover, .menu-search-item.is-active { background:var(--blue-light); color:var(--blue); }
|
|
.menu-search-item:hover i, .menu-search-item.is-active i { color:var(--blue); }
|
|
.menu-search-empty { margin:0; padding:18px 12px; text-align:center; font-size:13px; color:var(--g400); }
|
|
/* Collapsed: only the toggle survives, so there is a way back. */
|
|
|
|
/* ── Mobile menu ─────────────────────────────────────────────────────────────
|
|
A phone gets ONE menu: the app sidebar, opened as a full-height sheet. The
|
|
assistant used to hide it and add a second drawer of its own, which is why two
|
|
hamburgers appeared and neither did anything useful. */
|
|
@media(max-width:768px){
|
|
.sidebar{ width:min(85vw,320px); left:calc(-1 * min(85vw,320px)); padding:0; }
|
|
.sidebar.open{ left:0; }
|
|
/* Close and search lead, as in the reference. */
|
|
.menu-head{ padding:14px 14px 8px; gap:10px; }
|
|
.menu-head .assistant-menu-toggle{ order:-1; }
|
|
.menu-brand h1{ font-size:19px; }
|
|
.menu-icon-btn{ width:34px; height:34px; font-size:15px; }
|
|
.menu-search-btn{ display:flex; }
|
|
.assistant-mode-switch{ margin:6px 14px 10px; padding:5px; }
|
|
.assistant-mode-switch button{ padding:9px 6px; font-size:13px; }
|
|
.sidebar-tabs{ padding:2px 8px 8px; }
|
|
.sidebar-section-label{ padding:12px 8px 4px; }
|
|
.sidebar-header{ display:none; }
|
|
/* A persisted desktop collapse flips the arrow; on a phone it always closes. */
|
|
.assistant-menu-toggle.is-collapsed i{ transform:none; }
|
|
/* Plain rows, the same as the assistant's chat history: text only, and the
|
|
current page is a quiet grey row rather than a blue block. */
|
|
.tab-btn{ padding:11px 12px; font-size:14px; font-weight:500; color:var(--g700); border-radius:8px; border-left:none; }
|
|
.tab-btn i{ display:none; }
|
|
.tab-btn.active{ border-left:none; background:var(--g100); color:var(--g900); font-weight:600; }
|
|
.account-card{ padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
|
|
.account-name{ font-size:14px; }
|
|
.account-email{ font-size:12px; }
|
|
|
|
/* The menu button gets a row of its own. Floating over the page it sat on
|
|
whatever the page began with: the assistant's title, the questions, a card
|
|
header. The strip is fixed; the app starts below it. It belongs to
|
|
#main-app, so the sign-in screen never shows it. z-index stays under every
|
|
modal (the image preview is 99) and over page content (composer 60). */
|
|
:root{ --mobile-bar:48px; }
|
|
#main-app::before{ content:''; position:fixed; top:0; left:0; right:0; height:var(--mobile-bar);
|
|
z-index:80; background:white; border-bottom:1px solid var(--g200); }
|
|
#main-app{ padding-top:var(--mobile-bar); }
|
|
.app-body, body.assistant-workspace .app-body{ min-height:calc(100dvh - var(--mobile-bar)); }
|
|
.busy-bar{ top:var(--mobile-bar); }
|
|
/* 100vh on a phone includes the area behind the browser's toolbar, so the
|
|
foot of the sheet — the account card — sat lower than the visible screen
|
|
and read as "too far down". dvh is the height actually visible. */
|
|
.sidebar{ height:100vh; height:100dvh; }
|
|
}
|
|
|
|
/* ── One menu, two views ─────────────────────────────────────────────────────
|
|
Desktop: the assistant rail is laid out exactly like the app sidebar — the
|
|
same head row, switch and account card insets — because it now sits flush
|
|
at the window edge like the sidebar does (see assistant.css). Collapsed
|
|
(body.menu-hidden) rules are more specific and still win. */
|
|
@media (min-width:961px) {
|
|
.assistant-history .menu-head { padding:10px 8px 8px 12px; }
|
|
.assistant-history .assistant-mode-switch { margin:8px 12px 10px; }
|
|
.assistant-history .account-card { padding:8px; }
|
|
}
|
|
/* Phone: the chat drawer's switch sits where the workspace menu's does. */
|
|
@media (max-width:640px) {
|
|
.assistant-history .assistant-mode-switch { margin:6px 14px 10px; }
|
|
}
|