/* DocVoc Redesign (claude.ai design project b37d6c75, "DocVoc Redesign.dc.html"): the desktop and web layout. Loaded last. Everything is scoped to windows 768px and wider outside the Android and iPhone shells, which keep their own. */ /* Status chips are shared by every width: Needs review amber with an alert, Signed green with a check, Recording only neutral. */ .status-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:5px;font-size:11px;font-weight:550;line-height:1.2;white-space:nowrap;background:var(--row-highlight);color:var(--secondary)} .status-chip .icon{width:14px;height:14px;flex:none} .status-chip.review{background:var(--review-bg);color:var(--review-text)} .status-chip.signed{background:var(--signed-bg);color:var(--signed-text)} .genie-find,.genie-prompt,.genie-keys,.genie-mic{display:none} @media (min-width:768px){ /* ---- Shell: sidebar (every desktop and web width: from 768px the menu is the same, expanded or as the rail, shell.css) ---- */ :root:not(.android):not(.ios){--sidebar:218px} :root:not(.android):not(.ios) .sidebar{padding:14px 12px 16px;gap:16px} :root:not(.android):not(.ios) .sidebar .brand{padding:4px 6px 2px;gap:10px;font-size:15.5px;font-weight:700;letter-spacing:-.02em} :root:not(.android):not(.ios) .sidebar .brand img{width:28px;height:28px;border-radius:8px} :root:not(.android):not(.ios) .sidebar-label{margin:0;padding:0 6px;font:650 10px/1.4 var(--font-sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) .main-nav{gap:2px;margin-top:-7px} :root:not(.android):not(.ios) .main-nav button{gap:10px;padding:10px;border:0;border-radius:8px;color:var(--ink);font-size:13.5px;font-weight:500} :root:not(.android):not(.ios) .main-nav button .nav-icon{width:auto;height:auto;padding:0;border:0;background:none;color:var(--secondary)} :root:not(.android):not(.ios) .main-nav button .nav-icon .icon{width:18px;height:18px;padding:0} :root:not(.android):not(.ios) .main-nav button.active,:root:not(.android):not(.ios) .main-nav button.active:hover{background:var(--accent-tint);border:0;color:var(--accent-text);font-weight:600} :root:not(.android):not(.ios) .main-nav button.active .nav-icon{background:none;color:var(--accent-text)} :root:not(.android):not(.ios) .main-nav small{font:500 11.5px/1 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) .sidebar .record-visit{height:44px;min-height:44px;border-radius:8px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-primary)} :root:not(.android):not(.ios) .sidebar .account{border-top:1px solid var(--border);padding-top:10px} :root:not(.android):not(.ios) .sidebar .account summary{padding:8px;border-radius:8px} :root:not(.android):not(.ios) .sidebar .account .avatar{width:30px;height:30px;border-radius:8px;background:var(--accent-tint);color:var(--accent-text);border:0;font-size:12px;font-weight:600} } @media (min-width:768px){ /* ---- Shell: one header row. The page's label and title on the left, Genie pinned right as a search box --------------- */ :root:not(.android):not(.ios) .workspace-header{position:absolute;z-index:45;top:14px;left:30px;right:30px;height:auto;min-height:0;padding:0;border:0;background:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;pointer-events:none} /* Only the header's own controls take clicks: its toolbar is a wide flex box over the page's top row (the queue's Back and Skip sit there). */ :root:not(.android):not(.ios) .workspace-header>*{pointer-events:auto} :root:not(.android):not(.ios) .workspace-header>.toolbar{pointer-events:none} :root:not(.android):not(.ios) .workspace-header>.toolbar>*{pointer-events:auto} :root:not(.android):not(.ios) .workspace-header .breadcrumb{font:650 10px/1.4 var(--font-sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) body[data-view=patient] .workspace-header .breadcrumb{visibility:hidden} :root:not(.android):not(.ios) .workspace-header .toolbar{flex:1 1 300px;max-width:420px;justify-content:flex-end;gap:8px;margin-top:5px} :root:not(.android):not(.ios) .genie-bar{flex:1 1 300px;min-width:180px;max-width:360px;display:flex;align-items:center;gap:8px;height:38px;padding:0 5px 0 11px;border:1px solid var(--border);border-radius:9px;background:var(--card);transition:border-color var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease)} :root:not(.android):not(.ios) .genie-bar:focus-within,:root:not(.android):not(.ios) .genie-bar:hover{border-color:var(--accent-surface)} :root:not(.android):not(.ios) #assistant-open{flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;align-items:center;gap:8px;color:var(--hint);font-size:13px;font-weight:400;cursor:text} :root:not(.android):not(.ios) #assistant-open .genie-helper,:root:not(.android):not(.ios) #assistant-open .genie-word{display:none} :root:not(.android):not(.ios) #assistant-open .genie-find{display:block;width:16px;height:16px;flex:none} :root:not(.android):not(.ios) #assistant-open .genie-prompt{display:block;flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root:not(.android):not(.ios) #assistant-open .genie-keys{display:block;flex:none;padding:0;border:0;background:none;font:500 10.5px/1 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #assistant-open[aria-expanded=true]{color:var(--accent-text)} :root:not(.android):not(.ios) .genie-mic{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:7px;background:none;color:var(--secondary)} :root:not(.android):not(.ios) .genie-mic:hover{background:var(--accent-tint);color:var(--accent-text)} :root:not(.android):not(.ios) .genie-mic .icon{width:17px;height:17px} :root:not(.android):not(.ios) .workspace-header #connection-status{align-self:center;flex:none} /* ---- Pages sit under the header row; the title lines up beside Genie --------------------------------------------- */ :root:not(.android):not(.ios) .screen:not(#encounter-page){padding:34px 30px 22px;gap:18px} :root:not(.android):not(.ios) .screen>.page-heading{min-height:44px;margin:0;padding-right:min(390px,42%);align-items:center} :root:not(.android):not(.ios) .screen>.page-heading h1{font-size:25px;line-height:1.25;font-weight:700;letter-spacing:-.03em} :root:not(.android):not(.ios) .screen>.page-heading>div>p.muted{display:none} /* ---- Cards and tables ---------------------------------------------------------------------------------------- */ :root:not(.android):not(.ios) .table-card{border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip)} :root:not(.android):not(.ios) .table-card>.table-title{min-height:0;padding:15px 19px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px} :root:not(.android):not(.ios) .table-card>.table-title>span:first-child{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink)} :root:not(.android):not(.ios) .see-all{display:inline-flex;align-items:center;gap:6px;min-height:0;height:auto;padding:6px 11px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--ink);font-size:12.5px;font-weight:500;white-space:nowrap} :root:not(.android):not(.ios) .see-all .icon,:root:not(.android):not(.ios) .row-action .icon{width:16px;height:16px;flex:none} :root:not(.android):not(.ios) .row-action{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;color:var(--accent-text);font-size:13px;font-weight:600;white-space:nowrap} :root:not(.android):not(.ios) .patient-name strong{display:block;font-size:14px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) .patient-name small{display:block;margin-top:2px;font-size:12.5px;color:var(--hint);font-weight:400} /* ---- Home: two counts, then what is waiting ---------------------------------------------------------------------- */ :root:not(.android):not(.ios) .home-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px} :root:not(.android):not(.ios) .home-metric{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:0;height:auto;padding:19px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip);text-align:left;color:var(--ink)} :root:not(.android):not(.ios) .home-metric:hover{border-color:var(--accent-surface)} :root:not(.android):not(.ios) .home-metric .home-metric-label{display:flex;align-items:center;gap:7px;font:650 10px/1.4 var(--font-sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) .home-metric-label .icon{width:15px;height:15px;color:var(--secondary)} :root:not(.android):not(.ios) .home-metric>strong{margin-top:7px;font:600 38px/1.15 var(--font-mono);letter-spacing:-.04em;color:var(--ink)} :root:not(.android):not(.ios) .home-metric>small{margin-top:3px;font-size:13px;color:var(--secondary)} :root:not(.android):not(.ios) .home-table{flex:none} :root:not(.android):not(.ios) .home-table .table-row.home-columns{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) auto auto;gap:14px;align-items:center;min-height:0;height:auto;padding:13px 19px;border:0;border-bottom:1px solid var(--row-border);border-radius:0;background:none;text-align:left} :root:not(.android):not(.ios) .home-table .table-row.home-columns:last-child{border-bottom:0} :root:not(.android):not(.ios) .home-table .table-row.home-columns:hover{background:var(--row-highlight)} :root:not(.android):not(.ios) .home-table .table-row .mono{font:400 12.5px/1.4 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) .home-table .row-action{padding-left:8px} /* ---- Table furniture: search and tools in the card, a quiet column header, the Back · position · Next pager ---------- */ :root:not(.android):not(.ios) .table-tools{display:flex;align-items:center;gap:12px;padding:12px 19px;border-bottom:1px solid var(--border);flex-wrap:wrap} :root:not(.android):not(.ios) .table-search{flex-direction:row;margin:0;flex:1;min-width:200px;display:flex;align-items:center;gap:9px;height:36px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight)} :root:not(.android):not(.ios) .table-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)} :root:not(.android):not(.ios) .table-search .icon{width:16px;height:16px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) .table-search input{flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font-size:13px;color:var(--ink)} :root:not(.android):not(.ios) .table-tool{height:36px;min-height:36px;padding:0 13px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--ink);font-size:12.5px;font-weight:550} :root:not(.android):not(.ios) .table-tools .primary{height:36px;min-height:36px;padding:0 15px;border-radius:8px;font-size:13px;font-weight:600} :root:not(.android):not(.ios) .table-card>.table-head{display:grid;gap:14px;align-items:center;min-height:0;padding:9px 19px;border-bottom:1px solid var(--border);background:var(--row-highlight);font:550 11px/1.4 var(--font-sans);letter-spacing:.5px;text-transform:none;color:var(--hint)} :root:not(.android):not(.ios) .column-count{text-align:right;font:400 11px/1.4 var(--font-mono);letter-spacing:normal;white-space:nowrap} :root:not(.android):not(.ios) .column-filter{position:relative} :root:not(.android):not(.ios) .column-filter-button{display:inline-flex;align-items:center;gap:5px;min-height:0;height:auto;padding:0;border:0;background:none;color:var(--hint);font:inherit;font-weight:550;letter-spacing:.5px} :root:not(.android):not(.ios) .column-filter-button.active{color:var(--accent-text)} :root:not(.android):not(.ios) .column-filter-button .icon{width:13px;height:13px} :root:not(.android):not(.ios) .column-filter-menu{position:absolute;top:calc(100% + 8px);left:-10px;z-index:20;min-width:170px;padding:5px;border:1px solid var(--border);border-radius:8px;background:var(--popover);box-shadow:var(--shadow-popover);letter-spacing:normal} :root:not(.android):not(.ios) .column-filter-item{display:flex;align-items:center;gap:8px;width:100%;min-height:0;height:auto;padding:8px 9px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-size:13px;font-weight:500;text-align:left;text-transform:none} :root:not(.android):not(.ios) .column-filter-item.active{background:var(--accent-tint);color:var(--accent-text);font-weight:600} :root:not(.android):not(.ios) .column-filter-item .tick{width:14px;display:inline-flex;flex:none} :root:not(.android):not(.ios) .column-filter-item .icon{width:14px;height:14px} :root:not(.android):not(.ios) .table-card>.table-rows>.table-row{display:grid;gap:14px;align-items:center;min-height:0;height:auto;padding:13px 19px;border:0;border-bottom:1px solid var(--row-border);border-radius:0;background:none;text-align:left;font-weight:400} :root:not(.android):not(.ios) .table-card>.table-rows>.table-row:hover{background:var(--row-highlight)} :root:not(.android):not(.ios) .table-card>.table-rows>.table-row .mono{font:400 12.5px/1.4 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) .table-card>.pagination{display:flex;align-items:center;gap:8px;min-height:0;padding:9px 19px;border:0;border-top:1px solid var(--row-border);background:var(--row-highlight)} :root:not(.android):not(.ios) .table-card>.pagination[hidden]{display:none} :root:not(.android):not(.ios) .table-card>.pagination .pager-position{flex:1;text-align:center;font:400 12px/1.4 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) .table-card>.pagination button{height:30px;min-height:30px;padding:0 11px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--secondary);font-size:12.5px;font-weight:550} :root:not(.android):not(.ios) .table-card>.pagination button:disabled{color:var(--disabled);background:var(--card)} :root:not(.android):not(.ios) .table-card .empty-state{padding:32px 19px} /* ---- Review: one table; it hugs its rows ------------------------------------------------------------------------ */ :root:not(.android):not(.ios) #review-page:not([data-detail=true]) .review-queue{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;width:auto;padding:0;border:0;background:none} :root:not(.android):not(.ios) #review-page:not([data-detail=true]){padding:34px 30px 22px!important;gap:18px!important;overflow:hidden!important} :root:not(.android):not(.ios) #review-page:not([data-detail=true]) .review-queue>.page-heading{display:flex;margin:0} :root:not(.android):not(.ios) .review-table{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden} :root:not(.android):not(.ios) #review-page .review-table .review-columns{display:grid;padding:13px 19px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr) minmax(118px,auto) minmax(84px,auto)} :root:not(.android):not(.ios) #review-page .review-table>.table-head.review-columns{padding:9px 19px} :root:not(.android):not(.ios) #review-page .review-table .review-queue-item{border:0;border-bottom:1px solid var(--row-border);border-radius:0;background:none;min-height:0;height:auto} :root:not(.android):not(.ios) #review-page .review-table .review-queue-item:hover{background:var(--row-highlight)} :root:not(.android):not(.ios) #review-page .review-table .review-queue-item .mono{font-size:12.5px} :root:not(.android):not(.ios) #review-page .review-table .review-queue-item .status-chip,:root:not(.android):not(.ios) #review-page .review-table .review-queue-item .status-chip span{font-size:11px} :root:not(.android):not(.ios) #review-page .review-table .review-queue-item .row-action,:root:not(.android):not(.ios) #review-page .review-table .review-queue-item .row-action span{font-size:13px;color:var(--accent-text)} :root:not(.android):not(.ios) #review-page .review-table .review-queue-item .patient-name small{font-size:12.5px} :root:not(.android):not(.ios) .review-table .note-type{font-size:13px;color:var(--secondary)} } /* ---- Genie in the header (genie-dock.js). Hidden by default: phones keep the Genie sheet ------------------------------- */ .genie-rec,.genie-levels,.genie-heard,.genie-confirm,.genie-convo{display:none} #genie-palette:not([open]){display:none} @keyframes genie-level{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}} @keyframes genie-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--recording-red) 40%,transparent)}100%{box-shadow:0 0 0 11px transparent}} @keyframes genie-pulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes genie-dock{from{transform:translateY(-7px) scale(.96);opacity:.45}to{transform:none;opacity:1}} @keyframes genie-spot{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}} @keyframes genie-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @keyframes genie-spin{to{transform:rotate(360deg)}} @keyframes genie-caret{0%,100%{opacity:1}50%{opacity:0}} @media (min-width:761px){ :root:not(.android):not(.ios) .genie-wrap{position:relative;flex:1 1 300px;min-width:180px;max-width:360px;display:flex;justify-content:flex-end} :root:not(.android):not(.ios) .genie-bar{position:relative;width:100%;max-width:none;flex:1 1 auto} /* Listening: the box turns live, bars move with the microphone's real level, the mic becomes Done with a ring */ :root:not(.android):not(.ios) .genie-bar:is([data-state=listening],[data-state=working],[data-state=heard],[data-state=replying],[data-state=done],[data-state=waiting]) #assistant-open{display:none} :root:not(.android):not(.ios) .genie-bar[data-state=listening]{border-color:var(--recording-red);background:var(--recording-bg)} :root:not(.android):not(.ios) .genie-bar:is([data-state=heard],[data-state=replying],[data-state=done],[data-state=waiting]){border-color:var(--accent-surface);background:var(--accent-tint)} :root:not(.android):not(.ios) .genie-bar[data-state=listening] .genie-levels{display:flex;align-items:center;gap:2.5px;height:16px;flex:none} :root:not(.android):not(.ios) .genie-levels i{display:block;width:2.5px;height:16px;border-radius:2px;background:var(--recording-red);transform-origin:center;transform:scaleY(calc(.18 + var(--level,0) * .82));transition:transform 90ms linear} :root:not(.android):not(.ios) .genie-levels.still i{transition:none} :root:not(.android):not(.ios) .genie-bar:is([data-state=listening],[data-state=working],[data-state=heard],[data-state=replying],[data-state=done],[data-state=waiting]) .genie-heard{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--secondary)} :root:not(.android):not(.ios) .genie-bar:is([data-state=heard],[data-state=replying],[data-state=done],[data-state=waiting]) .genie-heard{font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) .genie-bar[data-state=working] .genie-heard::before{content:"";display:inline-block;width:11px;height:11px;margin-right:8px;vertical-align:-1px;border:2px solid var(--accent-surface);border-top-color:var(--accent);border-radius:50%;animation:genie-spin .8s linear infinite} :root:not(.android):not(.ios) .genie-confirm:not([hidden]){display:inline-flex;align-items:center;gap:6px;flex:none;height:28px;min-height:28px;padding:0 11px;border:0;border-radius:6px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;white-space:nowrap} :root:not(.android):not(.ios) .genie-confirm .icon{width:15px;height:15px} :root:not(.android):not(.ios) .genie-bar[data-state=listening] .genie-mic{background:var(--recording-red);color:var(--on-recording-red);animation:genie-ring 1.4s ease-out infinite} :root:not(.android):not(.ios) .genie-bar:is([data-state=heard],[data-state=done]) .genie-mic{background:var(--accent);color:var(--on-accent)} /* Recording a visit: the box shows it instead of Genie. It docks with a small drop when you leave the visit page. */ :root:not(.android):not(.ios) .genie-bar[data-state=recording]{gap:8px} :root:not(.android):not(.ios) .genie-bar[data-state=recording] #assistant-open,:root:not(.android):not(.ios) .genie-bar[data-state=recording] .genie-mic{display:none} :root:not(.android):not(.ios) .genie-bar[data-state=recording] .genie-rec{display:flex;align-items:center;gap:8px;flex:1;min-width:0} :root:not(.android):not(.ios) .genie-bar[data-state=recording].floating{box-shadow:0 0 0 3px var(--recording-bg);animation:genie-dock 260ms cubic-bezier(.2,.7,.2,1)} :root:not(.android):not(.ios) .genie-rec-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--recording-red);animation:genie-pulse 1.1s ease-in-out infinite} :root:not(.android):not(.ios) .genie-bar.paused .genie-rec-dot{background:var(--review-dot,#d8a72c);animation:none} :root:not(.android):not(.ios) .genie-rec-time{flex:none;font:600 13px/1 var(--font-mono);color:var(--ink)} :root:not(.android):not(.ios) .genie-rec-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--secondary)} :root:not(.android):not(.ios) .genie-rec-here{display:none;flex:none;font:400 11px/1 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) .genie-bar.docked .genie-rec-here{display:block} :root:not(.android):not(.ios) .genie-rec-actions{display:flex;gap:6px;flex:none} :root:not(.android):not(.ios) .genie-rec-action{height:28px;min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--secondary);font-size:12px;font-weight:600} :root:not(.android):not(.ios) .genie-rec-action.primary{border:0;background:var(--accent);color:var(--on-accent)} /* The conversation, under the box */ :root:not(.android):not(.ios) .genie-convo:not([hidden]){position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:min(430px,88vw);max-height:min(460px,70dvh);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--accent-surface);border-radius:12px;background:var(--popover);box-shadow:var(--shadow-popover);animation:genie-drop 180ms var(--ease)} :root:not(.android):not(.ios) .genie-convo[data-state=listening]{border-color:var(--recording-red)} :root:not(.android):not(.ios) .genie-convo-head{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) .genie-orb{display:flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--row-highlight)} :root:not(.android):not(.ios) .genie-orb span{width:9px;height:9px;border-radius:50%;background:var(--hint)} :root:not(.android):not(.ios) .genie-convo[data-state=listening] .genie-orb{background:var(--recording-bg);animation:genie-pulse 1.4s ease-in-out infinite} :root:not(.android):not(.ios) .genie-convo[data-state=listening] .genie-orb span{background:var(--recording-red)} :root:not(.android):not(.ios) .genie-convo:is([data-state=replying],[data-state=working]) .genie-orb{background:var(--accent-tint);animation:genie-pulse 1.4s ease-in-out infinite} :root:not(.android):not(.ios) .genie-convo:is([data-state=replying],[data-state=working]) .genie-orb span{background:var(--accent)} :root:not(.android):not(.ios) .genie-chips{display:flex;gap:6px;flex-wrap:wrap} :root:not(.android):not(.ios) .genie-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px;font-size:11px;font-weight:550} :root:not(.android):not(.ios) .genie-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:genie-pulse 1s ease-in-out infinite} :root:not(.android):not(.ios) .genie-chip.live{background:var(--recording-bg);color:var(--recording-red)} :root:not(.android):not(.ios) .genie-chip.work,:root:not(.android):not(.ios) .genie-chip.speak{background:var(--accent-tint);color:var(--accent-text)} :root:not(.android):not(.ios) .genie-chip.done{background:var(--signed-bg);color:var(--signed-text)} :root:not(.android):not(.ios) .genie-chip.done i{animation:none} :root:not(.android):not(.ios) .genie-convo-mic{margin-left:auto;font:400 11px/1 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) .genie-turns{flex:1;min-height:0;overflow-y:auto} :root:not(.android):not(.ios) .genie-turns:empty{display:none} :root:not(.android):not(.ios) .genie-turn{display:flex;gap:11px;padding:12px 14px;border-top:1px solid var(--row-border);animation:genie-drop 160ms var(--ease)} :root:not(.android):not(.ios) .genie-turn:first-child{border-top:0} :root:not(.android):not(.ios) .genie-turn.genie{background:var(--accent-tint)} :root:not(.android):not(.ios) .genie-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:7px;background:var(--row-highlight);color:var(--secondary);font-size:10px;font-weight:650} :root:not(.android):not(.ios) .genie-turn.genie .genie-avatar{background:var(--accent);color:var(--on-accent)} :root:not(.android):not(.ios) .genie-turn-body{flex:1;min-width:0} :root:not(.android):not(.ios) .genie-turn-body p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere} :root:not(.android):not(.ios) .genie-turn.streaming .genie-turn-body p::after{content:"▌";margin-left:1px;color:var(--hint);animation:genie-caret .9s step-end infinite} :root:not(.android):not(.ios) .genie-turn-body .genie-trail{margin-top:6px;font-size:12px;color:var(--accent-text)} :root:not(.android):not(.ios) .genie-options:not([hidden]){display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--row-border);background:var(--row-highlight)} :root:not(.android):not(.ios) .genie-options>span{flex:none;font-size:11.5px;color:var(--hint)} :root:not(.android):not(.ios) .genie-option{height:32px;min-height:32px;max-width:100%;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--accent-surface);border-radius:999px;background:var(--card);color:var(--accent-text);font-size:12.5px;font-weight:550} :root:not(.android):not(.ios) .genie-human-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap} :root:not(.android):not(.ios) .genie-human-options>span{width:100%;font-size:12px;color:var(--hint)} :root:not(.android):not(.ios) .genie-convo-reply{display:flex;align-items:center;gap:8px;flex:none;padding:10px 12px;border-top:1px solid var(--row-border)} :root:not(.android):not(.ios) #genie-convo-reply-input{flex:1;min-width:0;height:36px;min-height:36px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:13px} :root:not(.android):not(.ios) #genie-convo-reply-input::placeholder{color:var(--hint)} :root:not(.android):not(.ios) #genie-convo-reply-send{height:36px;min-height:36px;padding:0 13px;border:0;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:600} :root:not(.android):not(.ios) #genie-convo-reply-send:disabled{opacity:.55} :root:not(.android):not(.ios) .genie-convo-foot{display:flex;align-items:center;gap:11px;flex:none;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--row-border)} :root:not(.android):not(.ios) .genie-convo-status{flex:1;min-width:120px;font-size:12.5px;color:var(--secondary)} :root:not(.android):not(.ios) #genie-convo-stop{height:32px;min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--secondary);font-size:12.5px;font-weight:500} /* The palette (⌘K) */ :root:not(.android):not(.ios) #genie-palette[open]{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:11vh 4vw 4vh;border:0;background:transparent;display:flex;align-items:flex-start;justify-content:center} :root:not(.android):not(.ios) #genie-palette::backdrop{background:rgba(6,10,20,.58)} :root:not(.android):not(.ios) .genie-palette-box{width:100%;max-width:640px;max-height:78vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--popover);box-shadow:var(--shadow-dialog);animation:genie-spot 140ms ease-out} :root:not(.android):not(.ios) .genie-palette-head{display:flex;align-items:center;gap:12px;flex:none;padding:15px 17px;border-bottom:1px solid var(--border)} :root:not(.android):not(.ios) .genie-palette-head>.icon{width:22px;height:22px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) #genie-palette-input{flex:1;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;outline:none;font-size:17px;color:var(--ink)} :root:not(.android):not(.ios) .genie-voice{display:inline-flex;align-items:center;gap:7px;flex:none;height:32px;min-height:32px;padding:0 12px;border:1px solid var(--accent-surface);border-radius:8px;background:var(--accent-tint);color:var(--accent-text);font-size:12.5px;font-weight:600;white-space:nowrap} :root:not(.android):not(.ios) .genie-voice .icon{width:17px;height:17px} :root:not(.android):not(.ios) .genie-palette-results{flex:1;min-height:0;overflow-y:auto} :root:not(.android):not(.ios) .genie-result{display:flex;align-items:center;gap:13px;width:100%;min-height:0;height:auto;padding:12px 17px;border:0;border-bottom:1px solid var(--row-border);border-radius:0;background:var(--popover);color:var(--ink);text-align:left;font-weight:400} :root:not(.android):not(.ios) .genie-result.active{background:var(--accent-tint)} :root:not(.android):not(.ios) .genie-result>.icon{width:19px;height:19px;flex:none;color:var(--accent-text)} :root:not(.android):not(.ios) .genie-result-copy{flex:1;min-width:0} :root:not(.android):not(.ios) .genie-result-copy strong{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root:not(.android):not(.ios) .genie-result-copy small{display:block;margin-top:2px;font-size:12.5px;color:var(--secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root:not(.android):not(.ios) .genie-result-kind{flex:none;font:700 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) .genie-palette-empty:not([hidden]){margin:0;padding:22px 17px;font-size:13px;line-height:1.7;color:var(--secondary)} :root:not(.android):not(.ios) .genie-palette-foot{display:flex;gap:16px;flex:none;flex-wrap:wrap;padding:11px 17px;font-size:12px;color:var(--hint)} :root:not(.android):not(.ios) .genie-palette-foot span:last-child{margin-left:auto} /* The old Genie column never opens on desktop and the web: Genie lives in the header */ :root:not(.android):not(.ios) #assistant:not([data-mode=phone]){display:none!important} } @media (prefers-reduced-motion:reduce){ .genie-bar,.genie-bar *,.genie-convo,.genie-convo *,.genie-palette-box,.genie-turn{animation:none!important;transition:none!important} } @media (min-width:768px){ /* ---- Patients: one card — search and New patient, then Patient · Record no. · Last visit · actions ---------------------- */ :root:not(.android):not(.ios) #home-page .patients-heading{padding-right:min(390px,42%)} :root:not(.android):not(.ios) #home-page .patient-filters{display:none} :root:not(.android):not(.ios) #patients-table{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden} :root:not(.android):not(.ios) #patients-tools .search-field{position:relative;width:auto;max-width:none} :root:not(.android):not(.ios) #patients-tools .search-field .search-icon{position:static;display:block;transform:none;width:16px;height:16px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) #patients-tools #patient-search{padding:0;width:100%} :root:not(.android):not(.ios) #patients-tools .search-clear{position:static;transform:none;width:24px;height:24px;min-height:0;padding:0;border:0;background:none} :root:not(.android):not(.ios) #home-page .patient-columns{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr) auto} :root:not(.android):not(.ios) #home-page .table-rows>.table-row.patient-columns{cursor:pointer;padding:11px 19px} :root:not(.android):not(.ios) #home-page .table-row .patient-name{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:0;min-height:0;height:auto;padding:0;border:0;background:none;color:var(--ink);text-align:left} :root:not(.android):not(.ios) #home-page .table-row .patient-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root:not(.android):not(.ios) .patient-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--accent-tint);color:var(--accent-text);font-size:11.5px;font-weight:650} :root:not(.android):not(.ios) .row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px} :root:not(.android):not(.ios) .row-button{display:inline-flex;align-items:center;gap:7px;height:32px;min-height:32px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:600;white-space:nowrap} :root:not(.android):not(.ios) .row-button.quiet{border:1px solid var(--border);background:var(--row-highlight);color:var(--ink)} :root:not(.android):not(.ios) .row-button.tonal{border:1px solid transparent;background:var(--accent-tint);color:var(--accent-text)} :root:not(.android):not(.ios) .row-button .icon{width:15px;height:15px} } @media (min-width:768px){ /* ---- Patient record ---------------------------------------------------------------------------------------------- */ :root:not(.android):not(.ios) #patient-page{padding-top:12px!important;gap:14px!important} :root:not(.android):not(.ios) #patient-page>.record-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:0;height:auto;margin:0;padding:0;border:0;background:none;color:var(--accent-text);font-size:12.5px;font-weight:600} :root:not(.android):not(.ios) #patient-page>.record-back .icon{width:16px;height:16px} :root:not(.android):not(.ios) #patient-page>.page-heading{min-height:0;margin-top:-10px} :root:not(.android):not(.ios) .record-identity{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;flex:none;padding:18px 20px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip)} :root:not(.android):not(.ios) .record-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:54px;height:54px;border-radius:12px;background:var(--accent-tint);color:var(--accent-text);font-size:19px;font-weight:700} :root:not(.android):not(.ios) .record-who{flex:1;min-width:0} :root:not(.android):not(.ios) .record-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap} :root:not(.android):not(.ios) .record-name strong{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink)} :root:not(.android):not(.ios) .record-facts{margin-top:5px;font:400 12.5px/1.5 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) .record-actions{display:flex;gap:9px;flex-wrap:wrap} :root:not(.android):not(.ios) .record-actions button{height:44px;min-height:44px;padding:0 13px;border-radius:8px;font-size:13px;font-weight:600} :root:not(.android):not(.ios) .record-actions button.quiet{border:1px solid var(--border);background:var(--row-highlight);color:var(--ink)} :root:not(.android):not(.ios) .record-actions button .icon{width:17px;height:17px} :root:not(.android):not(.ios) .record-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;flex:none;margin:0;padding:0;border:0;background:none;box-shadow:none} :root:not(.android):not(.ios) .record-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip)} :root:not(.android):not(.ios) .record-card dt{display:flex;align-items:center;gap:7px;margin:0;font:650 10px/1.4 var(--font-sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) .record-card dt .icon{width:15px;height:15px;color:var(--secondary)} :root:not(.android):not(.ios) .record-card dd{margin:9px 0 0;font-size:15px;font-weight:600;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} :root:not(.android):not(.ios) .record-card dd.none{color:var(--secondary);font-weight:500} :root:not(.android):not(.ios) .record-card dd.allergy{color:var(--danger);-webkit-line-clamp:unset;display:block} :root:not(.android):not(.ios) .record-card:has(dd.allergy) dt .icon{color:var(--danger)} :root:not(.android):not(.ios) .record-card small{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--secondary)} :root:not(.android):not(.ios) .record-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start} :root:not(.android):not(.ios) .record-history{max-height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden} :root:not(.android):not(.ios) .record-history>.table-title{padding:14px 18px;flex-wrap:wrap} :root:not(.android):not(.ios) .record-tabs{display:flex;gap:6px;flex-wrap:wrap} :root:not(.android):not(.ios) .record-tab{min-height:0;height:auto;padding:6px 11px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--secondary);font-size:12.5px;font-weight:500} :root:not(.android):not(.ios) .record-tab.active{border-color:var(--accent-surface);background:var(--accent-tint);color:var(--accent-text);font-weight:650} :root:not(.android):not(.ios) .record-history .table-rows{flex:1;min-height:0} :root:not(.android):not(.ios) .record-history .table-rows>.table-row.record-entry{display:flex;align-items:flex-start;gap:13px;padding:14px 18px} :root:not(.android):not(.ios) .record-entry-icon{width:19px;height:19px;flex:none;margin-top:1px;color:var(--accent-text)} :root:not(.android):not(.ios) .record-entry-copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start} :root:not(.android):not(.ios) .record-entry-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap} :root:not(.android):not(.ios) .record-entry-title strong{font-size:14px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) .record-entry-copy>.mono{margin-top:3px;font:400 12.5px/1.4 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) .record-entry-summary{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty} :root:not(.android):not(.ios) .record-entry-copy>.row-action{margin-top:8px;font-size:12.5px} :root:not(.android):not(.ios) .record-side{min-height:0;display:flex;flex-direction:column;gap:16px} :root:not(.android):not(.ios) .record-panel{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip)} :root:not(.android):not(.ios) .record-panel h2{margin:0;padding:14px 17px;border-bottom:1px solid var(--border);font-size:15px;font-weight:650;letter-spacing:-.01em} :root:not(.android):not(.ios) .record-item{display:block;width:100%;min-height:0;height:auto;padding:12px 17px;border:0;border-bottom:1px solid var(--row-border);border-radius:0;background:none;text-align:left;color:var(--ink)} :root:not(.android):not(.ios) .record-item:last-child{border-bottom:0} :root:not(.android):not(.ios) .record-item strong{display:block;font-size:13.5px;font-weight:600} :root:not(.android):not(.ios) .record-item small{display:block;margin-top:2px;font:400 12.5px/1.4 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) .record-doc{display:flex;align-items:center;gap:11px} :root:not(.android):not(.ios) .record-doc:hover{background:var(--row-highlight)} :root:not(.android):not(.ios) .record-doc>.icon{width:18px;height:18px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) .record-doc-copy{flex:1;min-width:0} :root:not(.android):not(.ios) .record-none{margin:0;padding:14px 17px;font-size:13px;color:var(--secondary)} :root:not(.android):not(.ios) .record-more{margin:8px 17px 12px} } @media (min-width:768px) and (max-width:1100px){ /* Narrower windows keep the side column (Documents, Export record) at a narrower width rather than hiding it. */ :root:not(.android):not(.ios) .record-body{grid-template-columns:minmax(0,1fr) 260px} } @media (min-width:768px){ /* ---- Calendar: month card beside the day list ---------------------------------------------------------------------- */ :root:not(.android):not(.ios) .calendar-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px;align-items:start} :root:not(.android):not(.ios) .calendar-month{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip)} :root:not(.android):not(.ios) .calendar-month-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px} :root:not(.android):not(.ios) .calendar-month-head strong{font-size:15px;font-weight:600} :root:not(.android):not(.ios) .calendar-month-nav{display:flex;gap:6px} :root:not(.android):not(.ios) .calendar-step{display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--secondary)} :root:not(.android):not(.ios) .calendar-step .icon{width:18px;height:18px} :root:not(.android):not(.ios) .calendar-jump{display:flex;align-items:center;gap:7px;margin-bottom:9px} :root:not(.android):not(.ios) .calendar-jump input{flex:1;min-width:132px;height:34px;min-height:0;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--ink);font:400 12.5px/1 var(--font-mono)} :root:not(.android):not(.ios) .calendar-today{height:34px;min-height:0;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--accent-text);font-size:12.5px;font-weight:550} :root:not(.android):not(.ios) .calendar-weekdays,:root:not(.android):not(.ios) .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} :root:not(.android):not(.ios) .calendar-weekdays{margin-bottom:5px} :root:not(.android):not(.ios) .calendar-weekdays span{text-align:center;font-size:10px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) .calendar-date{position:relative;display:flex;align-items:center;justify-content:center;height:32px;min-height:0;padding:0;border:0;border-radius:7px;background:transparent;color:var(--ink);font:400 12.5px/1 var(--font-mono)} :root:not(.android):not(.ios) .calendar-date:hover{background:var(--row-highlight)} :root:not(.android):not(.ios) .calendar-date.today{color:var(--accent-text);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent-surface)} :root:not(.android):not(.ios) .calendar-date.active{background:var(--accent);color:var(--on-accent);font-weight:600} :root:not(.android):not(.ios) .calendar-day{max-height:100%;min-height:0;display:flex;flex-direction:column;overflow:visible} :root:not(.android):not(.ios) .calendar-day-head{display:flex;align-items:center;gap:12px;flex:none;padding:12px 17px;border-bottom:1px solid var(--border)} :root:not(.android):not(.ios) .calendar-day-head strong{flex:1;min-width:140px;font-size:15px;font-weight:600} :root:not(.android):not(.ios) .calendar-day-head button{display:inline-flex;align-items:center;gap:7px;height:36px;min-height:36px;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600} :root:not(.android):not(.ios) .calendar-day-head button .icon{width:16px;height:16px} :root:not(.android):not(.ios) .calendar-day .table-rows{min-height:0;overflow:hidden} :root:not(.android):not(.ios) .calendar-day .table-rows>.table-row.calendar-row{display:flex;align-items:center;gap:14px;padding:10px 17px} :root:not(.android):not(.ios) .calendar-time{width:52px;flex:none} :root:not(.android):not(.ios) .calendar-row .patient-name{flex:1;min-width:120px} :root:not(.android):not(.ios) .calendar-patient{display:block;min-height:0;height:auto;padding:0;border:0;background:none;color:var(--ink);font-size:14px;font-weight:600;text-align:left} :root:not(.android):not(.ios) .calendar-patient:hover{color:var(--accent-text)} :root:not(.android):not(.ios) .status-chip.booked{background:var(--accent-tint);color:var(--accent-text)} /* The booking composer and its clash notice */ :root:not(.android):not(.ios) .booking-row{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap;padding:14px 17px;border-bottom:1px solid var(--border);background:var(--accent-tint);animation:genie-drop 160ms var(--ease)} :root:not(.android):not(.ios) .booking-row>input{height:36px;min-height:0;padding:0 9px;border:1px solid var(--accent-surface);border-radius:8px;background:var(--card);color:var(--ink);font-size:12.5px} :root:not(.android):not(.ios) .booking-row>input[type=date]{flex:0 1 140px;font-family:var(--font-mono)} :root:not(.android):not(.ios) .booking-row>input[type=time]{flex:0 1 106px;font-family:var(--font-mono)} :root:not(.android):not(.ios) .booking-row>#booking-reason{flex:1 1 130px;min-width:110px;padding:0 11px;font-size:13px} :root:not(.android):not(.ios) .booking-row>button{height:36px;min-height:36px;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600} :root:not(.android):not(.ios) .booking-picker{position:relative;flex:1 1 170px;min-width:150px} :root:not(.android):not(.ios) .booking-patient{display:flex;align-items:center;gap:9px;width:100%;height:36px;min-height:0;padding:0 11px;border:1px solid var(--accent-surface);border-radius:8px;background:var(--card);color:var(--ink);font-size:13px;font-weight:400;text-align:left} :root:not(.android):not(.ios) .booking-patient.empty{color:var(--hint)} :root:not(.android):not(.ios) .booking-patient>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root:not(.android):not(.ios) .booking-patient .icon{width:15px;height:15px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) .booking-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:25;width:260px;padding:7px;border:1px solid var(--border);border-radius:10px;background:var(--popover);box-shadow:var(--shadow-popover);animation:genie-drop 140ms var(--ease)} :root:not(.android):not(.ios) .booking-find{display:flex;flex-direction:row;align-items:center;gap:8px;height:34px;margin:0 0 5px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight)} :root:not(.android):not(.ios) .booking-find .icon{width:15px;height:15px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) .booking-find input{flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;outline:none;font-size:13px} :root:not(.android):not(.ios) .booking-option,:root:not(.android):not(.ios) .booking-new{display:flex;align-items:center;gap:9px;width:100%;min-height:0;height:auto;padding:8px 9px;border:0;border-radius:7px;background:transparent;color:var(--ink);font-weight:400;text-align:left} :root:not(.android):not(.ios) .booking-option:hover,:root:not(.android):not(.ios) .booking-new:hover{background:var(--row-highlight)} :root:not(.android):not(.ios) .booking-option .patient-avatar{width:24px;height:24px;border-radius:7px;font-size:10.5px} :root:not(.android):not(.ios) .booking-option strong{display:block;font-size:13px;font-weight:550} :root:not(.android):not(.ios) .booking-option small{display:block;font:400 11px/1.3 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) .booking-new{margin-top:5px;border-top:1px solid var(--row-border);border-radius:0 0 7px 7px;color:var(--accent-text);font-size:13px;font-weight:550} :root:not(.android):not(.ios) .booking-new .icon{width:15px;height:15px} :root:not(.android):not(.ios) .booking-clash{display:flex;align-items:center;gap:11px;flex:none;flex-wrap:wrap;padding:11px 17px;border-bottom:1px solid var(--border);background:var(--danger-bg)} :root:not(.android):not(.ios) .booking-clash>.icon{width:17px;height:17px;flex:none;color:var(--danger)} :root:not(.android):not(.ios) .booking-clash>span{flex:1;min-width:170px;font-size:12.5px;line-height:1.5;color:var(--ink)} :root:not(.android):not(.ios) .booking-clash>small{font-size:11.5px;color:var(--secondary)} :root:not(.android):not(.ios) .booking-slot{height:30px;min-height:0;padding:0 11px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--accent-text);font:550 12.5px/1 var(--font-mono)} } .visit-strip,.visit-title,.visit-top{display:none} @media (min-width:768px){ /* ---- Visit: one identity strip, always visible ---------------------------------------------------------------------- */ :root:not(.android):not(.ios) #encounter-page:not([hidden]){padding:34px 30px 18px!important;gap:14px!important} :root:not(.android):not(.ios) #encounter-page>.visit-top{display:flex;align-items:center;gap:14px;min-height:44px;margin:0;padding-right:min(390px,42%)} :root:not(.android):not(.ios) #encounter-page .visit-title{display:block;margin:0;font-size:25px;line-height:1.25;font-weight:700;letter-spacing:-.03em} :root:not(.android):not(.ios) .visit-strip{display:flex;align-items:center;gap:18px;flex:none;flex-wrap:wrap;padding:13px 18px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip)} :root:not(.android):not(.ios) .strip-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:8px;background:var(--accent-tint);color:var(--accent-text);font-size:13px;font-weight:600} :root:not(.android):not(.ios) .strip-avatar.empty{background:var(--row-highlight);border:1px dashed var(--border)} :root:not(.android):not(.ios) .strip-who{flex:1 1 260px;min-width:0} :root:not(.android):not(.ios) .strip-name{position:relative;display:flex;align-items:center;gap:9px;flex-wrap:wrap} :root:not(.android):not(.ios) .visit-strip #patient{field-sizing:content;min-width:180px;max-width:100%;height:30px;min-height:0;margin:0 0 0 -6px;padding:0 6px;border:1px solid transparent;border-radius:7px;background:transparent;box-shadow:none;color:var(--ink);font-size:18px;font-weight:700;letter-spacing:-.02em} :root:not(.android):not(.ios) .visit-strip #patient:not([readonly]):hover{border-color:var(--border)} :root:not(.android):not(.ios) .visit-strip #patient:not([readonly]):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);background:var(--card)} :root:not(.android):not(.ios) .visit-strip #patient::placeholder{color:var(--secondary);font-weight:600} :root:not(.android):not(.ios) .visit-strip .status-chip{padding:4px 8px} :root:not(.android):not(.ios) .status-chip.live{background:var(--recording-bg);color:var(--recording-red)} :root:not(.android):not(.ios) .status-chip.live .icon{animation:genie-pulse 1.1s ease-in-out infinite} :root:not(.android):not(.ios) .visit-strip #visit-meta{display:block;margin:2px 0 0;font:400 12px/1.5 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) .visit-strip #visit-meta:empty{display:none} :root:not(.android):not(.ios) .visit-strip #patient-matches{position:absolute;top:calc(100% + 6px);left:0;z-index:30} :root:not(.android):not(.ios) .strip-record{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;min-height:0;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--row-highlight);color:var(--secondary)} :root:not(.android):not(.ios) .strip-record[hidden]{display:none} :root:not(.android):not(.ios) .strip-record .icon{width:16px;height:16px} :root:not(.android):not(.ios) .strip-end{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto} /* The steps: Record → Transcript → Note → Review & sign, the current one named */ :root:not(.android):not(.ios) .visit-strip #visit-steps{display:flex;align-items:center;gap:0;margin:0;padding:0;border:0;width:auto} :root:not(.android):not(.ios) .visit-strip #visit-steps>div{display:flex;align-items:center;gap:7px;padding:4px;border:1px solid transparent;border-radius:999px;color:var(--hint);font-size:12px;font-weight:500} :root:not(.android):not(.ios) .visit-strip #visit-steps>div+div::before{content:"";order:-1;width:12px;height:1px;margin:0 4px 0 -4px;background:var(--border)} :root:not(.android):not(.ios) .visit-strip #visit-steps>div.done+div::before{background:var(--signed-text)} :root:not(.android):not(.ios) .visit-strip #visit-steps b{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--row-highlight);color:var(--hint);font-size:10px;font-weight:650} :root:not(.android):not(.ios) .visit-strip #visit-steps>div.done b{background:var(--signed-bg);color:var(--signed-text)} :root:not(.android):not(.ios) .visit-strip #visit-steps>div:not(.active) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} :root:not(.android):not(.ios) .visit-strip #visit-steps>div.active{padding:4px 11px 4px 4px;border-color:var(--accent-surface);background:var(--accent-tint);color:var(--accent-text);font-weight:600} :root:not(.android):not(.ios) .visit-strip #visit-steps>div.active b{background:var(--accent);color:var(--on-accent)} :root:not(.android):not(.ios) .visit-strip #visit-steps>div.recording b,:root:not(.android):not(.ios) .visit-strip #visit-steps>div.live b{background:var(--recording-red);color:var(--on-recording-red)} :root:not(.android):not(.ios) .visit-strip #delete{display:inline-flex;align-items:center;gap:6px;height:32px;min-height:32px;padding:0 11px;border:1px solid var(--danger-border);border-radius:8px;background:var(--danger-bg);color:var(--danger);font-size:12.5px;font-weight:500} :root:not(.android):not(.ios) .visit-strip #delete[hidden]{display:none} :root:not(.android):not(.ios) .visit-strip #delete .icon{width:15px;height:15px} } @media (min-width:768px){ :root:not(.android):not(.ios) .visit-strip #patient{width:auto!important;flex:0 1 auto} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete{display:inline-flex;align-items:center;gap:6px;height:32px;min-height:32px;padding:0 11px;border:1px solid var(--danger-border);border-radius:8px;background:var(--danger-bg);color:var(--danger);font-size:12.5px;font-weight:500} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete[hidden]{display:none} /* ---- Visit, ready: one Start recording, the patient row above it, other inputs as a quiet line ---------------------------- */ :root:not(.android):not(.ios) #encounter-page #visit-inputs{border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card)!important;box-shadow:var(--shadow-chip)!important;overflow:hidden} :root:not(.android):not(.ios) #encounter-page .visit-group-label{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-head{padding:0!important;border:0!important;background:none!important} :root:not(.android):not(.ios) #encounter-page .visit-patient-group{display:flex!important;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin:0!important;padding:10px 18px!important;border:0!important;border-bottom:1px solid var(--row-border)!important;background:var(--row-highlight)!important} :root:not(.android):not(.ios) #encounter-page .visit-patient-group button,:root:not(.android):not(.ios) #encounter-page .visit-patient-group input,:root:not(.android):not(.ios) #encounter-page .visit-patient-group select{height:32px!important;min-height:32px!important;font-size:12.5px!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .visit-recording-group{display:flex!important;justify-content:center;margin:0!important;padding:34px 22px 18px!important;border:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #capture-controls{display:flex!important;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:520px;margin:0 auto;padding:0!important;border:0!important;background:none!important;text-align:center} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #record{order:0;height:56px!important;min-height:56px!important;padding:0 26px 0 20px!important;border:0!important;border-radius:999px!important;font-size:16px!important;font-weight:600;box-shadow:var(--shadow-hero)!important;animation:genie-drop 200ms var(--ease)} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #record .icon{width:20px;height:20px} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .capture-copy{order:1;margin:0!important;padding:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #record-heading{font-size:13px!important;font-weight:400!important;color:var(--secondary)!important;line-height:1.6} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #mode-detail{max-width:42ch;margin:2px auto 0;font-size:12.5px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .capture-input{order:2;justify-content:center;gap:8px;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .capture-input #record-time,:root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .capture-input #input-level{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #visit-microphone{height:32px;min-height:32px;padding:0 28px 0 10px;border:1px solid var(--border);border-radius:8px;background-color:var(--row-highlight);font-size:12px;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #visit-input-tabs{justify-content:center!important;gap:8px!important;margin:0!important;padding:0 18px 22px!important;border:0!important;background:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #visit-input-tabs button{height:36px!important;min-height:36px!important;padding:0 13px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--row-highlight)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #visit-input-tabs button::after{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-input=record] #input-record{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true]:not([data-input=record]) #visit-input-tabs button[aria-selected=true]{border-color:var(--accent-surface)!important;background:var(--accent-tint)!important;color:var(--accent-text)!important} /* ---- Visit, recording: the transcript on the left, the recorder as a rail on the right ------------------------------- */ :root:not(.android):not(.ios) #encounter-page[data-capturing=true]:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr) 288px;grid-template-rows:auto auto minmax(0,1fr);align-content:stretch} :root:not(.android):not(.ios) #encounter-page[data-capturing=true]>.visit-top,:root:not(.android):not(.ios) #encounter-page[data-capturing=true]>.visit-strip{grid-column:1/-1} :root:not(.android):not(.ios) #encounter-page[data-capturing=true]>#document{grid-column:1;grid-row:3;min-height:0} :root:not(.android):not(.ios) #encounter-page[data-capturing=true]>#visit-inputs{grid-column:2;grid-row:3;min-height:0;background:var(--row-highlight)!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-patient-group{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-recording-group{display:block!important;margin:0!important;padding:20px 16px!important;border:0!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;padding:0!important;border:0!important;background:none!important;text-align:center} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-input{order:-2;flex-direction:column;align-items:center;gap:10px;margin:0 0 4px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-time{font:500 34px/1 var(--font-mono)!important;letter-spacing:-.03em;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-time .clock-colon{animation:genie-caret 1s step-end infinite} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #input-level{width:100%;height:8px;border-radius:4px} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #microphone-name{order:5;font:400 11.5px/1.4 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-copy{order:-1;margin:0 0 4px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-heading{font-size:13px!important;font-weight:600!important;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #mode-detail{font-size:12.5px;line-height:1.5;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>button:not([hidden]){display:flex!important;justify-content:center;width:100%;height:40px!important;min-height:40px!important;border-radius:8px!important;font-size:13px!important;font-weight:600} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #visit-input-tabs{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-strip{border-color:color-mix(in srgb,var(--recording-red) 45%,var(--border));box-shadow:0 0 0 3px var(--recording-bg)} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #visit-inputs{flex:0 0 auto!important;height:auto!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #capture-controls{justify-content:flex-start!important;height:auto!important;min-height:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .visit-recording-group{height:auto!important;min-height:0!important;flex:none!important} :root:not(.android):not(.ios) #encounter-page .visit-patient-group>*{margin-left:0!important} :root:not(.android):not(.ios) #encounter-page .visit-patient-group{justify-content:flex-start!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{justify-content:flex-start!important;height:auto!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #input-level{display:block;width:100%!important;max-width:220px;height:8px!important;min-height:0!important;margin:0 auto} :root:not(.android):not(.ios) #encounter-page #record-time .clock-colon{margin:0 1px!important;width:auto!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .recording-more{order:9;margin-top:6px} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page #capture-controls>*{flex:0 0 auto!important;min-height:0!important} :root:not(.android):not(.ios) #encounter-page #capture-controls .capture-input{height:auto!important;align-content:center!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .capture-input meter{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-strip=true] #draft{display:none!important} /* ---- Visit, draft: one card — tabs (Documents · Transcript · Note), tools, the note as one document, then the footer ---- */ :root:not(.android):not(.ios) #encounter-page #document{border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card)!important;box-shadow:var(--shadow-chip)!important;overflow:hidden} :root:not(.android):not(.ios) #encounter-page .editor-toolbar{min-height:0!important;padding:7px 10px!important;gap:8px!important;border-bottom:1px solid var(--border)!important;background:var(--card)!important} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs{gap:2px!important;border:0!important} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button{height:30px!important;min-height:30px!important;padding:0 11px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--secondary)!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button::after{display:none!important} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button[aria-selected=true]{background:var(--accent-tint)!important;color:var(--accent-text)!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page #tab-documents{order:1} :root:not(.android):not(.ios) #encounter-page #tab-transcript{order:2} :root:not(.android):not(.ios) #encounter-page #tab-note{order:3} :root:not(.android):not(.ios) #encounter-page .editor-tools{gap:8px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>button,:root:not(.android):not(.ios) #encounter-page .editor-tools>select{height:30px!important;min-height:30px!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:7px!important;background-color:var(--row-highlight)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>select{padding-right:26px!important;font-weight:550!important} :root:not(.android):not(.ios) #encounter-page .editor-tools .icon{width:15px!important;height:15px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools .size-step{width:29px!important;padding:0!important;color:var(--secondary)!important} :root:not(.android):not(.ios) #encounter-page #text-smaller{border-radius:7px 0 0 7px!important;margin-right:-8px} :root:not(.android):not(.ios) #encounter-page #text-larger{border-radius:0 7px 7px 0!important} :root:not(.android):not(.ios) #encounter-page .note-actions{margin:0!important;padding:10px 19px!important;border-bottom:1px solid var(--row-border)!important;background:var(--review-bg)!important} :root:not(.android):not(.ios) #encounter-page[data-signed=true] .note-actions{background:var(--signed-bg)!important} :root:not(.android):not(.ios) #encounter-page #note-legend{margin:0!important;border:0!important;background:none!important;padding:0!important;font-size:12.5px!important;color:var(--review-text)!important} :root:not(.android):not(.ios) #encounter-page .note-actions button{height:30px!important;min-height:30px!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page #note-pane{padding:0!important} :root:not(.android):not(.ios) #encounter-page #note-preview{max-width:none!important;margin:0!important;padding:0!important} :root:not(.android):not(.ios) #encounter-page #note-preview>section{margin:0!important;padding:16px 19px!important;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) #encounter-page #note-preview>section :is(h2,h3){margin:0!important;font:650 10px/1.4 var(--font-sans)!important;letter-spacing:1.8px!important;text-transform:uppercase;color:var(--hint)!important} :root:not(.android):not(.ios) #encounter-page #note-preview>section p{margin:9px 0 0!important;font-size:calc(var(--reading-size,16px) + 1px);line-height:1.58!important;color:var(--body)!important;text-wrap:pretty} :root:not(.android):not(.ios) #encounter-page .document-footer{padding:13px 19px!important;gap:10px!important;border-top:1px solid var(--border)!important;background:var(--card)!important} :root:not(.android):not(.ios) #encounter-page #save-status{font:400 12.5px/1.4 var(--font-sans)!important;color:var(--secondary)!important} :root:not(.android):not(.ios) #encounter-page .document-footer .toolbar button{height:44px!important;min-height:44px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .document-footer #review.primary,:root:not(.android):not(.ios) #encounter-page .document-footer #review{padding:0 18px!important} } /* ---- Review fixes (22 Sept) ------------------------------------------------------------------------------------------ */ /* The session banner is urgent: it sits above the header row. */ .session-banner{z-index:70!important} @media (min-width:768px){ /* Genie keeps its width beside the desktop app's processing and sync chips. */ :root:not(.android):not(.ios) .workspace-header .toolbar{max-width:720px} :root:not(.android):not(.ios) .workspace-header .genie-wrap{flex:1 1 320px;min-width:260px} /* Every page title is 25px (the design), whatever the older per-screen sizes said. */ :root:not(.android):not(.ios) #schedule-page>.page-heading h1,:root:not(.android):not(.ios) #home-page>.page-heading h1,:root:not(.android):not(.ios) #patient-page>.page-heading h1,:root:not(.android):not(.ios) #dashboard-page>.page-heading h1,:root:not(.android):not(.ios) #review-page .page-heading h1{font-size:25px!important;line-height:1.25;font-weight:700;letter-spacing:-.03em} /* Home rows share one height; the queue count sits beside See all. */ :root:not(.android):not(.ios) .home-table .table-row.home-columns{height:61px} :root:not(.android):not(.ios) .home-table>.table-title .table-count{margin-left:auto;font:400 12px/1 var(--font-mono);color:var(--hint)} /* One input size everywhere, as on sign-in and account creation: 44px, 8px corners, the same border and type. */ :root:not(.android):not(.ios) .table-search,:root:not(.android):not(.ios) .table-tool,:root:not(.android):not(.ios) .table-tools .primary, :root:not(.android):not(.ios) .booking-row>input,:root:not(.android):not(.ios) .booking-patient,:root:not(.android):not(.ios) .booking-row>button, :root:not(.android):not(.ios) .calendar-jump input,:root:not(.android):not(.ios) .calendar-today,:root:not(.android):not(.ios) .calendar-day-head button, :root:not(.android):not(.ios) #encounter-page .visit-patient-group button,:root:not(.android):not(.ios) #encounter-page .visit-patient-group input,:root:not(.android):not(.ios) #encounter-page .visit-patient-group select, :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #visit-microphone, :root:not(.android):not(.ios) #encounter-page .editor-tools>button,:root:not(.android):not(.ios) #encounter-page .editor-tools>select {height:44px!important;min-height:44px!important;border-radius:8px!important} /* .genie-bar is genie.css's own: 44px at the design's radius 9 */ :root:not(.android):not(.ios) .table-search input,:root:not(.android):not(.ios) .booking-row>input,:root:not(.android):not(.ios) .calendar-jump input,:root:not(.android):not(.ios) #encounter-page .visit-patient-group input,:root:not(.android):not(.ios) .booking-patient{font-size:14px!important} :root:not(.android):not(.ios) .table-search,:root:not(.android):not(.ios) .booking-row>input,:root:not(.android):not(.ios) .booking-patient,:root:not(.android):not(.ios) .calendar-jump input{border:1px solid var(--input-border)!important;background:var(--input-bg)!important} :root:not(.android):not(.ios) #encounter-page .editor-tools .size-step{width:36px!important} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button{height:36px!important;min-height:36px!important} /* Settings as the design: a quieter 19px title under a ruled header, pill sub-tabs, and a body that fits without scrolling. */ :root:not(.android):not(.ios) #settings-dialog .screen{padding:0!important;gap:0!important} } @media (prefers-reduced-motion:reduce){ .status-chip .icon,#record-time .clock-colon,#encounter-page #record,.booking-row,.booking-pop,.visit-strip,.visit-strip *{animation:none!important;transition:none!important} } .patient-avatar[data-initials]::before{content:attr(data-initials)} @media (min-width:768px){ :root:not(.android):not(.ios) .settings-dialog-header h1{font-size:18px!important;font-weight:600!important;letter-spacing:-.026em!important} } @media (min-width:768px){ /* A button's label is one line, never two (owner, 22 Sept): buttons keep their width and the text beside them gives way. */ :root:not(.android):not(.ios) button,:root:not(.android):not(.ios) button .action-label{white-space:nowrap} :root:not(.android):not(.ios) .record-actions,:root:not(.android):not(.ios) .strip-end,:root:not(.android):not(.ios) .row-actions,:root:not(.android):not(.ios) .table-tools>button,:root:not(.android):not(.ios) .calendar-day-head>button{flex-shrink:0} :root:not(.android):not(.ios) .record-actions{flex-wrap:nowrap} :root:not(.android):not(.ios) .record-who,:root:not(.android):not(.ios) .strip-who{min-width:0} :root:not(.android):not(.ios) .record-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } @media (min-width:768px){ /* ---- Visit, between capture and note (a saved recording to recover or transcribe, or work in progress): one compact card — what happened on the left, the one action that moves it on, the patient controls at the right. ---------------- */ :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #visit-inputs:not([hidden]){display:flex!important;flex-direction:row!important;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 18px!important;flex:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #visit-inputs>.visit-head{display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .visit-patient-group{order:2;margin-left:auto!important;padding:0!important;border:0!important;background:none!important;min-height:0!important;height:auto!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .visit-recording-group{order:1;display:flex!important;flex:1 1 360px;min-width:0;margin:0!important;padding:0!important;border:0!important;min-height:0!important;height:auto!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls{display:flex!important;flex-direction:row!important;align-items:center;gap:12px;flex-wrap:wrap;width:100%;height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-copy{order:-1;flex:0 1 auto;margin:0!important;padding:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #record-heading{margin:0!important;font-size:14px!important;font-weight:600!important;color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #mode-detail{margin:2px 0 0!important;font-size:12.5px;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-input{margin:0!important;gap:8px} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-input :is(#visit-microphone,meter,#input-level){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #record-time{font:500 13px/1 var(--font-mono)!important;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls>button:not([hidden]){height:44px!important;min-height:44px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #recover:not([hidden]){background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #visit-input-tabs{display:none!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #visit-inputs .title-row{display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-input{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #mode-detail{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:60ch} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .visit-recording-group{flex:1 1 420px} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-copy{display:flex!important;flex-direction:column!important;position:static!important;height:auto!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-copy>*{position:static!important;order:0!important;transform:none!important;margin-top:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-copy>#mode-detail{margin-top:2px!important} } @media (min-width:768px){ /* Before recording the microphone is a choice, not a meter: no level bars, and the picker fits its label. */ :root:not(.android):not(.ios) #encounter-page[data-capturing=false] .capture-input .level-bars{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=false] #visit-microphone{min-width:260px!important;width:auto!important;max-width:100%} /* A saved recording always offers its way forward (journeys: no blocking screen without an action). */ :root:not(.android):not(.ios) #encounter-page #recover:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;gap:7px;order:0;height:44px!important;min-height:44px!important;padding:0 16px!important;border:0!important;border-radius:8px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:13.5px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #recover:not([hidden])~#record,:root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #record:disabled{box-shadow:none!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #visit-inputs, :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .visit-recording-group, :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls, :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-copy{min-height:0!important;max-height:none!important;height:auto!important;justify-content:flex-start!important;align-content:flex-start!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-copy{gap:2px!important;flex:0 1 auto!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls{align-items:center!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page #record-heading{min-height:0!important;height:auto!important;flex:none!important;line-height:1.4!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .visit-recording-group{flex:1 1 auto!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .capture-copy{flex:0 1 auto!important;width:auto!important} } @media (min-width:768px){ /* Why Start recording is unavailable is always said under it (offline licence, models, cloud consent, no connection). */ :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #mode-detail:not(:empty){display:block!important;visibility:visible!important;position:static!important;clip:auto!important;width:auto!important;overflow:visible!important;white-space:normal!important;height:auto!important;max-width:52ch;margin:2px auto 0!important;font-size:13px!important;line-height:1.5;color:var(--secondary)!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-record-blocked=true] #mode-detail:not(:empty){padding:10px 14px;border:1px solid var(--review-dot);border-radius:8px;background:var(--review-bg);color:var(--review-text)!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #visit-inputs .title-row{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true] .visit-patient-group{width:auto!important;flex:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .visit-recording-group{width:auto!important} } @media (min-width:768px){ :root:not(.android):not(.ios) .offline-choice{order:3;max-width:560px;margin:4px auto 0;padding:14px 16px;border:1px solid var(--review-dot);border-radius:10px;background:var(--review-bg);text-align:left;animation:genie-drop 160ms var(--ease)} :root:not(.android):not(.ios) .offline-choice[hidden]{display:none} :root:not(.android):not(.ios) .offline-choice p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--review-text)} :root:not(.android):not(.ios) .offline-choice-actions{display:flex;gap:8px;flex-wrap:wrap} :root:not(.android):not(.ios) .offline-progress{height:6px;margin:0 0 12px;border-radius:3px;background:var(--border);overflow:hidden} :root:not(.android):not(.ios) .offline-progress span{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width 240ms var(--ease)} :root:not(.android):not(.ios) .offline-choice.downloading p{font-variant-numeric:tabular-nums} :root:not(.android):not(.ios) .offline-choice-actions button{height:40px;min-height:40px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:600} :root:not(.android):not(.ios) .offline-choice-actions button.quiet{border:1px solid var(--border);background:var(--card);color:var(--ink)} /* With the choice showing, the generic reason line would repeat it. */ :root:not(.android):not(.ios) #encounter-page:has(.offline-choice:not([hidden])) :is(#mode-detail,#record-heading){display:none!important} } /* ---- Draft card as the design (22 Sept): Documents · Transcript · Notes · Addendum, each tab its own tools ---------------- */ #tab-addendum,#addendum-pane{display:none} @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page #tab-addendum{display:inline-flex;order:4} :root:not(.android):not(.ios) #encounter-page #addendum-pane:not([hidden]){display:block} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button{display:inline-flex;align-items:center;gap:7px} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button .icon{width:15px;height:15px;flex:none} :root:not(.android):not(.ios) #encounter-page .tab-count{font:400 11px/1 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .tab-count:empty{display:none} :root:not(.android):not(.ios) #encounter-page[data-signed=false] #tab-addendum:not([aria-selected=true]){color:var(--hint)!important} /* Template and Rewrite belong to Notes; text size to Notes and Transcript. */ :root:not(.android):not(.ios) #encounter-page #document:not([data-tab=note]) #note-template,:root:not(.android):not(.ios) #encounter-page #document:not([data-tab=note]) #generate[data-has-note=true], :root:not(.android):not(.ios) #encounter-page #document:is([data-tab=documents],[data-tab=addendum]) .size-step{display:none!important} /* Transcript: the words and a slim audio row — finding text is Genie's job, importing belongs to Record. */ :root:not(.android):not(.ios) #encounter-page #transcript-pane :is(.source-search,#source-result,#import-recording){display:none!important} :root:not(.android):not(.ios) #encounter-page #kept-audio:not([hidden]){display:flex!important;align-items:center;gap:12px;margin:0!important;padding:10px 19px!important;border:0!important;border-bottom:1px solid var(--row-border)!important;border-radius:0!important;background:var(--row-highlight)!important} :root:not(.android):not(.ios) #encounter-page #kept-audio .kept-audio-copy{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px} :root:not(.android):not(.ios) #encounter-page #kept-audio-title{font-size:13px} :root:not(.android):not(.ios) #encounter-page #kept-audio-meta{font:400 12px/1.4 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #kept-audio .kept-audio-actions{display:flex;gap:7px} :root:not(.android):not(.ios) #encounter-page #kept-audio .kept-audio-actions button{height:32px!important;min-height:32px!important;padding:0 11px!important;border-radius:7px!important;font-size:12.5px!important} /* Documents: one empty state with its two actions. */ :root:not(.android):not(.ios) #encounter-page #documents-pane[data-empty=true] :is(.documents-intro,#document-create,.attachment-toolbar){display:none!important} :root:not(.android):not(.ios) #encounter-page .pane-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 19px;text-align:center} :root:not(.android):not(.ios) #encounter-page .pane-empty[hidden]{display:none} :root:not(.android):not(.ios) #encounter-page .pane-empty>.icon{width:24px;height:24px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .pane-empty strong{font-size:14px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .pane-empty p{margin:0;max-width:40ch;font-size:12.5px;line-height:1.6;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page .pane-empty-actions{display:flex;gap:8px;margin-top:6px} :root:not(.android):not(.ios) #encounter-page .pane-empty-actions button{height:38px!important;min-height:38px!important;padding:0 15px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .pane-empty-actions button:not(.primary){border:1px solid var(--border)!important;background:var(--card)!important;color:var(--ink)!important} /* Addendum */ :root:not(.android):not(.ios) #encounter-page #addendum-pane{padding:0!important} :root:not(.android):not(.ios) #encounter-page .addendum-entry{margin:0;padding:14px 19px;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) #encounter-page .addendum-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} :root:not(.android):not(.ios) #encounter-page .addendum-label{font:650 10px/1.4 var(--font-sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .addendum-when{font:400 11.5px/1.4 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .addendum-entry p{margin:7px 0 0;font-size:14.5px;line-height:1.6;color:var(--body);white-space:pre-wrap;text-wrap:pretty} :root:not(.android):not(.ios) #encounter-page .addendum-compose{display:flex;flex-direction:column;gap:10px;padding:15px 19px} :root:not(.android):not(.ios) #encounter-page .addendum-hint{margin:0;font-size:12.5px;line-height:1.6;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page #addendum-text{min-height:96px;padding:10px 12px;border:1px solid var(--input-border);border-radius:8px;background:var(--input-bg);color:var(--ink);font:400 14px/1.6 var(--font-sans);resize:vertical} :root:not(.android):not(.ios) #encounter-page .addendum-actions{display:flex;justify-content:flex-end} :root:not(.android):not(.ios) #encounter-page .addendum-actions button{height:38px!important;min-height:38px!important;padding:0 15px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important} /* Footer: the draft line and Sign note; Export once signed; the Addendum tab replaces the footer's Add addendum. */ :root:not(.android):not(.ios) #encounter-page[data-signed=false] .document-footer #export, :root:not(.android):not(.ios) #encounter-page .document-footer #amend-note{display:none!important} /* Messages clear the footer. */ :root:not(.android):not(.ios) #encounter-page:not([hidden])~#message,:root:not(.android):not(.ios) #message{bottom:104px} } @media (min-width:768px){ /* Strip: the name hugs its text, the chip follows it, the record button follows the facts (the design). */ :root:not(.android):not(.ios) .visit-strip .strip-who{flex:0 1 auto} :root:not(.android):not(.ios) .visit-strip #patient{min-width:60px} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete{height:32px!important;min-height:32px!important;padding:0 11px!important;border:1px solid var(--danger-border)!important;background:var(--danger-bg)!important;color:var(--danger)!important;font-size:12.5px!important;font-weight:550!important} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete:hover{border-color:var(--danger)!important} /* Toolbar: template · Edit note / Edit transcript · A−|A+ ; View transcript lives in each section's Sources link. */ :root:not(.android):not(.ios) #encounter-page .editor-tools{display:flex;align-items:center} :root:not(.android):not(.ios) #encounter-page .editor-tools>#note-template{order:1} :root:not(.android):not(.ios) #encounter-page .editor-tools>#generate{order:2} :root:not(.android):not(.ios) #encounter-page .editor-tools>#edit-note,:root:not(.android):not(.ios) #encounter-page .editor-tools>#toolbar-edit-transcript{order:3} :root:not(.android):not(.ios) #encounter-page .editor-tools>.size-step{order:4} :root:not(.android):not(.ios) #encounter-page .editor-tools>#source-toggle,:root:not(.android):not(.ios) #encounter-page #generate[data-has-note=true], :root:not(.android):not(.ios) #encounter-page #document:not([data-tab=note]) .editor-tools>#edit-note,:root:not(.android):not(.ios) #encounter-page #document:not([data-tab=transcript]) #toolbar-edit-transcript, :root:not(.android):not(.ios) #encounter-page .editor-tools>#edit-note[hidden],:root:not(.android):not(.ios) #encounter-page #toolbar-edit-transcript[hidden], :root:not(.android):not(.ios) #encounter-page #transcript-lines>button.quiet{display:none!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>button,:root:not(.android):not(.ios) #encounter-page .editor-tools>select{height:32px!important;min-height:32px!important;font-size:13px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools .size-step{width:30px!important} :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button{height:32px!important;min-height:32px!important} /* No legend bar: the flag bar and the footer carry what it said. */ :root:not(.android):not(.ios) #encounter-page #note-pane>.note-actions{display:none!important} :root:not(.android):not(.ios) #encounter-page .section-head{display:flex;align-items:center;justify-content:space-between;gap:10px} :root:not(.android):not(.ios) #encounter-page .section-sources{height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;color:var(--accent-text)!important;font:600 11.5px/1.4 var(--font-mono)!important} :root:not(.android):not(.ios) #encounter-page .section-sources .icon{display:none} :root:not(.android):not(.ios) #encounter-page .note-flag{position:sticky;bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px;padding:11px 14px;border:1px solid var(--review-dot);border-radius:10px;background:var(--review-bg);animation:genie-drop 160ms var(--ease)} :root:not(.android):not(.ios) #encounter-page .note-flag[hidden]{display:none} :root:not(.android):not(.ios) #encounter-page .note-flag>.icon{width:18px;height:18px;flex:none;color:var(--review-dot)} :root:not(.android):not(.ios) #encounter-page .note-flag-text{flex:1;min-width:160px;font-size:12.5px;line-height:1.5;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .note-flag button{height:32px!important;min-height:32px!important;padding:0 13px!important;border-radius:7px!important;font-size:12.5px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .note-flag button:not(.primary){border:1px solid var(--border)!important;background:var(--card)!important;color:var(--ink)!important} /* Footer: the design's page-bottom bar, outside the card. */ :root:not(.android):not(.ios) body[data-view=encounter] #encounter-page:not([hidden]){padding-bottom:90px!important} :root:not(.android):not(.ios) #encounter-page .document-footer{position:fixed!important;left:var(--sidebar,218px);right:0;bottom:0;z-index:20;min-height:72px;padding:13px 30px!important;border-top:1px solid var(--border)!important;background:var(--card)!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page #save-status::after{content:attr(data-confirm)} :root:not(.android):not(.ios) #encounter-page[data-signed=true] #save-status{display:none!important} :root:not(.android):not(.ios) #encounter-page .foot-signed{font-size:12.5px;color:var(--signed-text)} :root:not(.android):not(.ios) #encounter-page .foot-signed[hidden]{display:none} :root:not(.android):not(.ios) #encounter-page[data-signed=true] .document-footer{background:var(--bg)!important;border-top-color:transparent!important} /* Transcript rows as the design: mono time, then the speaker in bold running into the words. */ :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-line{display:flex;gap:12px;margin:0;padding:11px 19px;border-bottom:1px solid var(--row-border);font-size:calc(var(--reading-size,15px) - .5px);line-height:1.6;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-time{order:-1;flex:none;width:44px;font:400 11.5px/1.9 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker{flex:none;font-weight:550;color:var(--ink)} /* Sidebar: Current visit only while a visit is live — above Home, a pulsing dot and the running time. */ :root:not(.android):not(.ios) .sidebar .main-nav #current-visit:is([data-live=recording],[data-live=paused]):not([hidden]){order:-1;display:flex;align-items:center;gap:10px;margin-bottom:2px;border:1px solid var(--danger-border)!important;background:var(--danger-bg)!important;color:var(--danger)!important;font-weight:600} :root:not(.android):not(.ios) .sidebar .main-nav #current-visit[data-live=paused]:not([hidden]):is([data-live]){border-color:var(--review-dot)!important;background:var(--review-bg)!important;color:var(--review-text)!important} :root:not(.android):not(.ios) .sidebar .main-nav #current-visit:is([data-live=recording],[data-live=paused]) .nav-icon{display:none} :root:not(.android):not(.ios) .sidebar .main-nav #current-visit:is([data-live=recording],[data-live=paused])::before{content:"";width:9px;height:9px;flex:none;border-radius:50%;background:currentColor;animation:genie-pulse 1.1s ease-in-out infinite} :root:not(.android):not(.ios) .sidebar .main-nav #current-visit[data-live=paused]::before{animation:none} :root:not(.android):not(.ios) .sidebar #current-visit:is([data-live=recording],[data-live=paused]) #current-visit-tag{display:inline!important;margin-left:auto;font-size:0!important} :root:not(.android):not(.ios) .sidebar #current-visit-tag::after{content:attr(data-timer);font:400 11.5px/1 var(--font-mono);color:currentColor} } @media (prefers-reduced-motion:reduce){.sidebar #current-visit::before,.note-flag{animation:none!important}} @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page #transcript-pane:has(#transcript-lines:not([hidden])){padding:0!important} :root:not(.android):not(.ios) #encounter-page #transcript-lines{margin:0!important;padding:0!important;border:0!important;max-width:none!important} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-line{align-items:baseline;margin:0!important;padding:11px 19px!important} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker{font-size:inherit!important;text-transform:none!important;letter-spacing:0!important} :root:not(.android):not(.ios) #encounter-page:not([hidden]){padding-bottom:88px!important} /* The template reads as the design's button: its name and a small chevron. */ :root:not(.android):not(.ios) #encounter-page .editor-tools>#note-template,:root:not(.android):not(.ios) #encounter-page .editor-tools>#note-template:disabled{appearance:none;-webkit-appearance:none;padding:0 30px 0 11px!important;background:var(--row-highlight) url(/app/chevron.svg) no-repeat right 9px center/14px!important;opacity:1} :root:not(.android):not(.ios) #encounter-page .editor-tools>#note-template:disabled{color:var(--secondary)!important} /* Account: the design's chevron, not a text caret. */ :root:not(.android):not(.ios) .sidebar .account .chevron{width:16px;height:16px;font-size:0;flex:none;background:currentColor;color:var(--hint);-webkit-mask:url(/app/chevron.svg) center/16px no-repeat;mask:url(/app/chevron.svg) center/16px no-repeat} :root:not(.android):not(.ios) .sidebar .account[open] .chevron{transform:rotate(180deg)} } @media (min-width:768px){ /* Signed: Export and Print sit in the Notes toolbar (the design); the footer only says who signed. */ :root:not(.android):not(.ios) #encounter-page[data-signed=false] .editor-tools>#export{display:none!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#export,:root:not(.android):not(.ios) #encounter-page .editor-tools>#toolbar-print{order:3} :root:not(.android):not(.ios) #encounter-page #document:not([data-tab=note]) .editor-tools>:is(#export,#toolbar-print),:root:not(.android):not(.ios) #encounter-page .editor-tools>:is(#export,#toolbar-print)[hidden]{display:none!important} } @media (min-width:768px){ /* Addenda under a signed note read as the design's sections: an uppercase label with its time, then the text. */ :root:not(.android):not(.ios) #encounter-page #note-addenda{margin:0!important;padding:0!important;max-width:none!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page #note-addenda .addendum{margin:0!important;padding:16px 19px!important;border:0!important;border-bottom:1px solid var(--row-border)!important;border-radius:0!important;background:none!important;max-width:none!important} :root:not(.android):not(.ios) #encounter-page #note-addenda .addendum :is(h2,h3){margin:0!important;font:650 10px/1.4 var(--font-sans)!important;letter-spacing:1.8px!important;text-transform:uppercase;color:var(--hint)!important} :root:not(.android):not(.ios) #encounter-page #note-addenda .addendum p{margin:9px 0 0!important;font-size:calc(var(--reading-size,16px) + 1px)!important;line-height:1.58!important;color:var(--body)!important;white-space:pre-wrap} } /* ---- Capture as the design (22 Sept): one card — the tabs on top, the recorder inside, its own footer ---------------- */ @media (min-width:768px){ /* Strip: finding or adding a patient and the visit type sit beside the name (no separate patient row). */ :root:not(.android):not(.ios) .visit-strip .strip-tools{display:flex;align-items:center;gap:8px;flex:none} :root:not(.android):not(.ios) .visit-strip .strip-tools>button,:root:not(.android):not(.ios) .visit-strip .strip-tools>input{height:32px!important;min-height:32px!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--row-highlight)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important} :root:not(.android):not(.ios) .visit-strip .strip-tools>input{width:150px;font-weight:400!important;background:var(--card)!important} :root:not(.android):not(.ios) .visit-strip .strip-tools .icon{width:15px;height:15px} :root:not(.android):not(.ios) .visit-strip .strip-record:not([hidden])~.strip-tools :is(#visit-choose-patient,#visit-new-patient){display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-patient-group{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-strip{border-color:var(--border)!important;box-shadow:var(--shadow-chip)!important} /* Ready: the tab bar tops the card, the recorder fills it. */ :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false]:not([data-input=paste]) #document{display:flex!important;flex:0 0 auto!important;order:2;border-bottom:0!important;border-radius:12px 12px 0 0!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false]:not([data-input=paste]):has(#document[data-tab=transcript]) #document>:not(.editor-toolbar,.document-footer){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false]:not([data-input=paste]) #visit-inputs{order:3;flex:1 1 auto!important;min-height:0;display:flex!important;flex-direction:column;justify-content:center;margin-top:-14px!important;border:1px solid var(--border)!important;border-top:0!important;border-radius:0 0 12px 12px!important;background:var(--card)!important;box-shadow:var(--shadow-chip)!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #visit-inputs .visit-head{border:0!important;background:none!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #visit-input-tabs{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #record .icon{display:none} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #record{padding:0 30px!important;min-width:192px;justify-content:center} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #record-heading{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #mode-detail{font-size:13px!important;color:var(--secondary)!important;line-height:1.6} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .capture-input::before{content:"Input ·";font-size:12px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #visit-microphone{height:auto!important;min-height:0!important;padding:0 18px 0 0!important;border:0!important;background:transparent url(/app/chevron.svg) no-repeat right center/12px!important;appearance:none;-webkit-appearance:none;font-size:12px!important;color:var(--hint)!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true]:not([data-input=paste]) #transcript-pane{display:none!important} /* Recording: one card — the transcript, and the recorder as a rail on its right. */ :root:not(.android):not(.ios) #encounter-page[data-capturing=true]:not([hidden]){grid-template-columns:minmax(0,1fr) 268px!important;column-gap:0!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true]>#document{border-right:0!important;border-radius:12px 0 0 12px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true]>#visit-inputs{display:flex!important;flex-direction:column;border:1px solid var(--border)!important;border-radius:0 12px 12px 0!important;box-shadow:var(--shadow-chip)!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-head,:root:not(.android):not(.ios) #encounter-page[data-capturing=true] .title-row,:root:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-recording-group{flex:1 1 auto;display:flex!important;flex-direction:column;border:0!important;background:none!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{flex:1 1 auto;padding:20px 16px 16px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-heading{font-size:12.5px!important;font-weight:400!important;color:var(--secondary)!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #mode-detail{margin:0!important;font-size:12.5px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #input-level{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-bars{display:flex;align-items:flex-end;justify-content:center;gap:2.5px;height:24px} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-bars i{display:block;width:4px;height:3px;border-radius:1px;background:var(--recording-red);transition:height 120ms linear} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture[data-recording-state=paused] .capture-bars i{height:3px!important;background:var(--review-dot)} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture[data-recording-state=paused] #record-time{color:var(--review-text)!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #microphone-name{order:20!important;margin-top:auto!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #microphone-name::before{content:"Input · "} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #pause{order:1} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #finish{order:2;border:0!important;background:var(--accent)!important;color:var(--on-accent)!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #pause{border:1px solid var(--border)!important;background:var(--card)!important;color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #marker{order:3;height:32px!important;min-height:32px!important;border:0!important;background:none!important;color:var(--accent-text)!important;font-size:12.5px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .recording-more{order:4} /* The capture footer. */ :root:not(.android):not(.ios) #encounter-page .document-footer[data-capture=true] #save-status{display:none!important} :root:not(.android):not(.ios) #encounter-page .foot-capture{flex:1;min-width:150px;font-size:12.5px;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page .foot-capture[hidden],:root:not(.android):not(.ios) #encounter-page .foot-capture-actions[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page .foot-capture-actions{display:flex;gap:10px;margin-left:auto} :root:not(.android):not(.ios) #encounter-page .foot-capture-actions button{height:44px!important;min-height:44px!important;padding:0 15px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--row-highlight)!important;color:var(--ink)!important;font-size:13px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .foot-capture-actions[data-input=record] #foot-capture-record{display:none!important} :root:not(.android):not(.ios) #encounter-page .foot-capture-actions[data-input=import] button:first-child,:root:not(.android):not(.ios) #encounter-page .foot-capture-actions[data-input=paste] button:nth-child(2){border-color:var(--accent-surface)!important;background:var(--accent-tint)!important;color:var(--accent-text)!important} } @media (prefers-reduced-motion:reduce){.capture-bars i{transition:none!important}} @media (min-width:768px){ :root:not(.android):not(.ios) .visit-strip .strip-tools :is(#visit-choose-patient,#visit-new-patient){width:32px;padding:0!important;justify-content:center} :root:not(.android):not(.ios) .visit-strip .strip-tools :is(#visit-choose-patient,#visit-new-patient) .action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} :root:not(.android):not(.ios) .visit-strip .strip-tools>input{width:130px} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #visit-microphone{width:auto;field-sizing:content;max-width:260px} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{position:relative;padding-bottom:44px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #microphone-name{position:absolute;left:12px;right:12px;bottom:16px;text-align:center} :root.compact-visit-flow:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-recording-group #mode-detail{display:block!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-input>:not(#record-time,.capture-bars,#microphone-name){display:none!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-input{position:static!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-tools>input{width:150px} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-copy{text-align:center} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{padding:26px 16px 44px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>button:not([hidden]){width:100%!important;max-width:none!important} } #capture-import{display:none} @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] #capture-import{order:3;display:inline-flex!important;align-items:center;gap:7px;height:36px!important;min-height:36px!important;margin-top:2px;padding:0 13px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--row-highlight)!important;color:var(--ink)!important;font-size:13px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page #capture-import .icon{width:16px;height:16px} } @media (min-width:768px){ :root:not(.android):not(.ios) .empty-mark{display:flex!important;align-items:center;justify-content:center;width:24px!important;height:24px!important;border:0!important;border-radius:0!important;color:var(--hint)} :root:not(.android):not(.ios) .empty-mark .icon{width:24px;height:24px} } @media (min-width:768px){ /* Tables as the design: 61px rows, the name over its reason, a filled search, and Back · n–m of N · Next without arrows. */ :root:not(.android):not(.ios) .table-card>.table-rows>.table-row{padding:11px 19px!important;min-height:61px} :root:not(.android):not(.ios) .table-card>.table-rows>.table-row :is(strong,b,.row-name){line-height:1.35} :root:not(.android):not(.ios) .table-card>.table-rows>.table-row small{line-height:1.35} :root:not(.android):not(.ios) .table-search{background:var(--input-bg)!important} :root:not(.android):not(.ios) .table-search input{background:transparent!important} :root:not(.android):not(.ios) .pagination :is(.pager-back,.pager-next) .icon{display:none!important} :root:not(.android):not(.ios) .pagination :is(.pager-back,.pager-next){height:30px!important;min-height:30px!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--ink)!important;font-size:13px!important;font-weight:500!important} :root:not(.android):not(.ios) .pagination :is(.pager-back,.pager-next):disabled{color:var(--hint)!important;opacity:1} /* Home: the metric labels are the design's 10px caps; the queue count beside See all is not in the design. */ :root:not(.android):not(.ios) .home-metric .home-metric-label{font:650 10px/1.4 var(--font-sans)!important;letter-spacing:1.8px!important;color:var(--hint)!important} :root:not(.android):not(.ios) .home-metric>small{font-weight:400!important} :root:not(.android):not(.ios) .home-table>.table-title .table-count{display:none!important} /* Sidebar account: the design's panel. */ :root:not(.android):not(.ios) .sidebar .account>summary{padding:8px!important;border-radius:8px!important;background:var(--row-highlight)!important} :root:not(.android):not(.ios) .sidebar .account .avatar{width:30px!important;height:30px!important;border-radius:8px!important;background:var(--accent-tint)!important;color:var(--accent-text)!important;font-size:12px!important;font-weight:600!important} } @media (min-width:768px){ :root:not(.android):not(.ios) .home-metric .home-metric-label>span{font:inherit!important;letter-spacing:inherit!important} :root:not(.android):not(.ios) .pagination .pager-back{border:1px solid var(--border)!important} :root:not(.android):not(.ios) .table-search{background:var(--row-highlight)!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #patients-page .table-row .mono{font-weight:400!important;color:var(--secondary)!important} :root:not(.android):not(.ios) .row-button[data-action-icon=record] .icon{width:12px;height:12px} } @media (min-width:768px){ :root:not(.android):not(.ios) .record-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px} :root:not(.android):not(.ios) .record-panel-head h2{margin:0} :root:not(.android):not(.ios) .record-panel-head .record-panel-action{height:30px!important;min-height:30px!important;padding:0 10px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--row-highlight)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important} :root:not(.android):not(.ios) .record-panel-head .record-panel-action .icon{width:14px;height:14px} } @media (min-width:768px){ :root:not(.android):not(.ios) .record-panel-head{padding-right:14px;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) .record-panel-head h2{flex:1;border-bottom:0!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #settings-dialog .settings-dialog-email{margin:auto 0 0;padding:0 8px;font-size:11.5px;line-height:1.6;color:var(--hint);overflow-wrap:anywhere} :root:not(.android):not(.ios) #settings-dialog .settings-dialog-email:empty{display:none} :root:not(.android):not(.ios) #settings-close{width:32px!important;height:32px!important;min-height:32px!important;padding:6px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--row-highlight)!important;color:var(--secondary)!important} :root:not(.android):not(.ios) #settings-close svg{width:18px!important;height:18px!important} } /* ---- Settings as the design (22 Sept): every page the same header, and cards of rows (label and hint, control right) ---- */ @media (min-width:768px){ :root:not(.android):not(.ios) #settings-dialog #local-settings .settings-section-heading{padding-bottom:14px!important;margin-bottom:16px!important;border-bottom:1px solid var(--border)} :root:not(.android):not(.ios) #settings-dialog #local-settings .settings-section-heading .eyebrow{display:none!important} :root:not(.android):not(.ios) #settings-dialog #local-settings .settings-section-heading h2{font-size:19px!important;font-weight:600!important;letter-spacing:-.026em!important;line-height:1.35!important} :root:not(.android):not(.ios) #settings-dialog #local-settings .settings-section-heading .muted{margin-top:4px!important;font-size:13px!important;line-height:1.6!important;color:var(--secondary)!important} :root:not(.android):not(.ios) #settings-dialog :is(.recording-card,.retention-card){padding:0!important;overflow:hidden} :root:not(.android):not(.ios) #settings-dialog .retention-card>p.muted{display:none} :root:not(.android):not(.ios) #settings-dialog .retention-rows{gap:0!important;margin:0!important} :root:not(.android):not(.ios) #settings-dialog .retention-row{flex-wrap:nowrap!important;gap:18px!important;min-height:58px;padding:7px 17px!important;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) #settings-dialog .retention-rows>.retention-row:last-child{border-bottom:0} :root:not(.android):not(.ios) #settings-dialog .retention-label{flex:1 1 210px!important;gap:3px!important} :root:not(.android):not(.ios) #settings-dialog .retention-label :is(label,.retention-name){font-size:13.5px!important;font-weight:550!important;color:var(--ink)!important} :root:not(.android):not(.ios) #settings-dialog .retention-label small{font-size:12.5px!important;line-height:1.55!important;color:var(--secondary)!important} :root:not(.android):not(.ios) #settings-dialog .retention-row>:is(select,button:not(.switch)){flex:0 1 250px!important;width:250px!important;max-width:250px} :root:not(.android):not(.ios) #settings-dialog .retention-row>button:not(.switch){flex:0 0 auto!important;width:auto!important} :root:not(.android):not(.ios) #settings-dialog .recording-card .mic-test{margin:14px 17px 0!important} :root:not(.android):not(.ios) #settings-dialog .recording-card .setup-again{margin:12px 17px 16px!important} } @media (min-width:768px){ :root:not(.android):not(.ios) .visit-strip .strip-tools>#move-visit:not([hidden]){display:inline-flex;align-items:center;gap:6px} :root:not(.android):not(.ios) .visit-strip .strip-tools>#move-visit .icon{width:15px;height:15px} } @media (min-width:768px){:root:not(.android):not(.ios) .visit-strip .strip-record[hidden]~.strip-tools #move-visit{display:none!important}} @media (min-width:768px){ /* Dialog tabs (New patient) are the design's pills: the selected one filled. */ :root:not(.android):not(.ios) .patient-tabs{display:flex;gap:6px;border:0!important} :root:not(.android):not(.ios) .patient-tabs>button{height:32px!important;min-height:32px!important;padding:0 12px!important;border:1px solid var(--border)!important;border-radius:999px!important;background:var(--card)!important;color:var(--secondary)!important;font-size:12.5px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) .patient-tabs>button::after{display:none!important} :root:not(.android):not(.ios) .patient-tabs>button[aria-selected=true]{border-color:var(--accent-surface)!important;background:var(--accent-tint)!important;color:var(--accent-text)!important;font-weight:600!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page #capture-controls:has(#recover:not([hidden])) #record{border:1px solid var(--border)!important;background:var(--card)!important;color:var(--ink)!important;box-shadow:none!important} :root:not(.android):not(.ios) .visit-strip .strip-tools>input{width:160px!important} } /* Known allergies are never cut short (consistency-13): the whole text shows, wrapped. */ #patient-allergies,.record-card dd#patient-allergies{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;-webkit-line-clamp:unset!important;display:block!important} @media (min-width:768px){ /* On a visit the storage and plan notices float just above the visit footer, where their buttons can be pressed. */ :root:not(.android):not(.ios) body[data-view=encounter] .workspace-status:has(:is(#storage-banner,#plan-banner):not([hidden])){position:fixed;left:var(--sidebar,218px);right:0;bottom:80px;z-index:25;padding:0 30px} /* Records waiting on this device can wait for days: on a visit that line never covers the cards. It stands under them in the page (the cards give up its height and page their text) as one line, with Details for the records and their buttons. */ :root:not(.android):not(.ios) body[data-view=encounter] #sync-waiting-toggle{display:inline-flex} :root:not(.android):not(.ios) body[data-view=encounter] #sync-waiting:not(.open) :is(.sync-waiting-list,#sync-waiting-plans){display:none} :root:not(.android):not(.ios) body[data-view=encounter] .workspace-status:has(#sync-waiting:not([hidden])){padding:0 30px 12px} :root:not(.android):not(.ios) body[data-view=encounter] #sync-waiting{margin:0;padding:6px 8px 6px 14px} } /* In a column-direction strip a 100% basis collapses the transcription bar to 0px: it is 4px tall. */ .progress-strip .transcribe-line{flex:0 0 4px!important;height:4px!important;min-height:4px} @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page .editor-tools>#toolbar-add-recording{order:3} :root:not(.android):not(.ios) #encounter-page #document:not([data-tab=transcript]) #toolbar-add-recording,:root:not(.android):not(.ios) #encounter-page #toolbar-add-recording[hidden]{display:none!important} } #toolbar-add-recording{display:none} @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page #document[data-tab=transcript] #toolbar-add-recording:not([hidden]){display:inline-flex}} @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page .editor-tools>#generate[data-has-note=false]:not([hidden]){border:0!important;background:var(--accent)!important;color:var(--on-accent)!important}} @media (min-width:768px) and (max-height:800px){ /* Short windows: the recorder rail tightens so every control fits (no clipping, no scroll). */ :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{gap:6px!important;padding:14px 14px 36px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-time{font-size:26px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>button:not([hidden]){height:34px!important;min-height:34px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #marker{height:28px!important;min-height:28px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #microphone-name{bottom:10px} } @media (min-width:768px) and (max-height:800px){ :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{gap:4px!important;padding-top:10px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-time{font-size:24px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-bars{height:18px} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-copy{margin:0!important;line-height:1.35} } @media (min-width:768px){ /* Settings pages page through what does not fit: the body is bounded, the account page inside it fills it. */ :root:not(.android):not(.ios) #settings-dialog .settings-dialog-body{overflow:hidden!important;display:flex!important;flex-direction:column;min-height:0} :root:not(.android):not(.ios) #settings-dialog .settings-dialog-body>#portal-settings:not([hidden]){flex:1 1 auto;min-height:0;height:100%} } /* The visit and review keep the save status for screen readers only: a true 1px box, no padding or border. */ body:is([data-view=encounter],[data-view=review]) #connection-status{padding:0!important;border:0!important;width:1px!important;height:1px!important;margin:-1px} /* Phone-sized web: the visit card is bounded by the screen, so a long transcript or note pages instead of scrolling. */ @media (max-width:767px){ :root:not(.android):not(.ios) body[data-view=encounter] #encounter-page:not([hidden]){display:flex!important;flex-direction:column;min-height:0;overflow:hidden} :root:not(.android):not(.ios) body[data-view=encounter] #encounter-page>#document{flex:1 1 0!important;min-height:0!important;display:flex!important;flex-direction:column} :root:not(.android):not(.ios) body[data-view=encounter] #document>.document-body{flex:1 1 0;min-height:0;display:flex;flex-direction:column} :root:not(.android):not(.ios) body[data-view=encounter] #document .document-pane:not([hidden]){flex:1 1 0;min-height:0} } @media (max-width:767px){:root:not(.android):not(.ios) body[data-view=encounter] #encounter-page[data-capturing=true]>#document{display:none!important}} /* phone-sized web: the recorder takes the screen while it records */ @media (min-width:768px){ /* Documents as the design: the tab's tools, then rows (icon, name, kind and length, Open, remove); Open reads one. */ :root:not(.android):not(.ios) #encounter-page .editor-tools>:is(#toolbar-attach,#toolbar-create-doc){order:3} :root:not(.android):not(.ios) #encounter-page #document:not([data-tab=documents]) .editor-tools>:is(#toolbar-attach,#toolbar-create-doc),:root:not(.android):not(.ios) #encounter-page .editor-tools>:is(#toolbar-attach,#toolbar-create-doc)[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page #toolbar-attach{border:0!important;background:var(--accent)!important;color:var(--on-accent)!important} :root:not(.android):not(.ios) #encounter-page #documents-pane .documents-intro,:root:not(.android):not(.ios) #encounter-page #documents-pane #document-create:not([open]),:root:not(.android):not(.ios) #encounter-page #documents-pane .attachment-toolbar :is(#attachment-list,#attach,#attachment-empty){display:none!important} :root:not(.android):not(.ios) #encounter-page #documents-pane{padding:0!important} :root:not(.android):not(.ios) #encounter-page .docs-list[hidden]{display:none} :root:not(.android):not(.ios) #encounter-page .docs-row{display:flex;align-items:center;gap:12px;padding:12px 19px;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) #encounter-page .docs-row>.icon{width:18px;height:18px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .docs-row-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} :root:not(.android):not(.ios) #encounter-page .docs-row-copy strong{font-size:14px;font-weight:550;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .docs-row-copy small{font:400 12px/1.4 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .docs-row>button{height:32px!important;min-height:32px!important;padding:0 12px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--row-highlight)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important} :root:not(.android):not(.ios) #encounter-page .docs-row>.docs-remove{width:32px;padding:0!important;justify-content:center;color:var(--secondary)!important} :root:not(.android):not(.ios) #encounter-page .docs-row>.docs-remove .icon{width:16px;height:16px} /* Reading one document: its name, its text, Remove, and the way back to the list. */ :root:not(.android):not(.ios) #encounter-page #documents-pane:not([data-reading=true]) :is(#docs-back,#attachment-label,#attachment-text,#remove-attachment){display:none!important} :root:not(.android):not(.ios) #encounter-page #documents-pane[data-reading=true] :is(#docs-list,.pane-empty,#document-create){display:none!important} :root:not(.android):not(.ios) #encounter-page #documents-pane[data-reading=true]{padding:14px 19px!important} :root:not(.android):not(.ios) #encounter-page #docs-back{align-self:flex-start;height:30px!important;min-height:30px!important;padding:0 10px!important;border:0!important;background:none!important;color:var(--accent-text)!important;font-size:13px!important} :root:not(.android):not(.ios) #encounter-page #documents-pane[data-reading=true] #attachment-label{display:block;margin:6px 0;font-size:14px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page #documents-pane[data-reading=true] #attachment-text{width:100%;min-height:240px;border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--row-highlight);font-size:14px;line-height:1.6} /* Change patient is an icon in the strip (the label in its title), so the strip stays one line. */ } @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page #documents-pane .attachment-toolbar{margin:10px 0 0!important;padding:0!important;border:0!important}} @media (min-width:768px){ /* Recording rail (owner, 22 Sept): only the recorder's own controls, stacked; messages wrap; the clock does not blink. */ :root:not(.android):not(.ios) #encounter-page[data-capturing=true] :is(#capture-import,#generate,#toolbar-add-recording){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-input{flex-direction:column!important;align-items:center!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-time .clock-colon{animation:none!important;opacity:1!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #record-error:not([hidden]){display:block;margin:4px 0 0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:center;font-size:12px!important;line-height:1.45;color:var(--danger)} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #microphone-name{white-space:normal!important;overflow-wrap:anywhere;font-size:11px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>button:not([hidden]){width:auto!important;align-self:stretch;margin:0!important} } @media (min-width:768px){ /* The saved-recording card: what happened on the left, its buttons together at the right edge, one height (owner, 22 Sept). */ :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls>.capture-copy{flex:1 1 auto;min-width:0} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls>button:not([hidden]){order:10;height:40px!important;min-height:40px!important;padding:0 15px!important;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls>#recover:not([hidden]){order:11} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls>#record{order:10} :root:not(.android):not(.ios) .visit-strip .strip-tools>input{width:130px!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] .visit-recording-group{flex:1 1 100%!important;width:100%} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls>.capture-copy{margin-right:auto!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-tools>#visit-type{width:130px!important;min-width:130px} } @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>#capture-import{display:none!important}} @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-input{order:-3!important;flex-direction:column!important;gap:8px!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-copy{order:-2!important;display:block!important;text-align:center} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-copy>*{display:block;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.recording-more{order:9!important;align-self:center} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #microphone-name{position:static!important;order:20!important;margin-top:auto!important;text-align:center} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls{padding-bottom:14px!important} } @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-input{display:flex!important;flex-direction:column!important;align-items:center!important}:root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-input>#microphone-name{order:5}:root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-input>.listen-caption{display:none!important}} @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-copy>#mode-detail{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;margin:2px 0 0!important;color:var(--secondary)!important;font-size:12.5px!important}} @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-capturing=true] .capture-copy>#mode-detail{max-width:none!important;width:100%!important;text-align:center!important}} @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-copy{align-self:stretch!important;width:auto!important;max-width:none!important}:root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-copy>#mode-detail{width:auto!important;max-width:none!important;margin:2px auto 0!important;text-align:center!important}} @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-copy>#mode-detail{display:block!important;padding:0!important;white-space:nowrap!important;overflow:visible!important;float:none!important}:root:not(.android):not(.ios) #encounter-page[data-capturing=true] #capture-controls>.capture-copy>#mode-detail::before{content:none!important}} @media (min-width:768px){ /* Dialog tabs (New / Edit patient) are the same segmented control as Settings. */ :root:not(.android):not(.ios) .patient-tabs{display:inline-flex!important;gap:2px!important;padding:3px!important;border:0!important;border-radius:10px!important;background:var(--row-highlight)!important} :root:not(.android):not(.ios) .patient-tabs>button{height:32px!important;min-height:32px!important;padding:0 14px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--secondary)!important;font-size:13px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) .patient-tabs>button[aria-selected=true]{background:var(--card)!important;color:var(--ink)!important;font-weight:600!important;box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 1px rgba(15,23,42,.04)!important} /* Settings rows in the app's own pages: softer separators. */ :root:not(.android):not(.ios) #settings-dialog .retention-row{border-bottom-color:color-mix(in srgb,var(--border) 45%,transparent)!important} } @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page #documents-pane #document-create>summary{display:none!important}} @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page .editor-tools>:is(#save-document,#copy-document,#choose-document){order:3} :root:not(.android):not(.ios) #encounter-page #document:not([data-tab=documents]) .editor-tools>:is(#save-document,#copy-document,#choose-document){display:none!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#save-document{border:0!important;background:var(--accent)!important;color:var(--on-accent)!important} } @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page:has(#drafted-document:not([hidden])) #document[data-tab=documents] .editor-tools>:is(#toolbar-attach,#toolbar-create-doc){display:none!important}} @media (min-width:768px){ /* An empty visit shows the recorder on its Transcript tab; Documents, Notes and Addendum show their own content. */ :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false]:not(:has(#document[data-tab=transcript])) #visit-inputs{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false]:not(:has(#document[data-tab=transcript])) #document{flex:1 1 auto!important;border-bottom:1px solid var(--border)!important;border-radius:12px!important;box-shadow:var(--shadow-chip)!important} } @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-preparing=true][data-capturing=false] .editor-tools>#generate{display:none!important}} @media (min-width:768px){ /* Every table card fills the page height (owner, 23 Sept), with its pager at the foot. */ :root:not(.android):not(.ios) .table-card{flex:1 1 auto!important;min-height:0} :root:not(.android):not(.ios) .table-card>.table-rows{flex:1 1 auto;min-height:0} :root:not(.android):not(.ios) .table-card>.pagination{margin-top:auto} /* The Review queue's Back link sits under its kicker, clear of the Genie box. */ :root:not(.android):not(.ios) #review-back{display:inline-flex;margin-top:2px} :root:not(.android):not(.ios) body[data-view=review] .workspace-header{align-items:flex-start} } @media (min-width:768px){ /* The Review queue's position sits beside Back to Review, clear of the Genie box. */ :root:not(.android):not(.ios) #review-page .review-queue:has(#review-back){display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;max-width:calc(100% - 430px)} :root:not(.android):not(.ios) .review-position{font:400 12px/1.4 var(--font-mono);color:var(--hint)} } @media (min-width:768px){ /* A kept PDF opens as itself; its extracted text stays a tap away. */ :root:not(.android):not(.ios) #encounter-page .doc-file{width:100%;flex:1 1 auto;min-height:320px;border:1px solid var(--border);border-radius:8px;background:var(--card)} :root:not(.android):not(.ios) #encounter-page .doc-file[hidden]{display:none} :root:not(.android):not(.ios) #encounter-page #documents-pane[data-file=true][data-reading=true] :is(#attachment-text,#attachment-label){display:none!important} } @media (min-width:768px){ /* Transcribing or drafting (the design's processing state): one slim line — what is happening, its progress, and Stop. */ :root:not(.android):not(.ios) #encounter-page[data-working=true] #visit-inputs:not([hidden]){display:flex!important;flex-direction:row!important;align-items:center;gap:14px;padding:12px 18px!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #visit-inputs>.visit-head{display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress{flex:1 1 auto;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] .visit-patient-group,:root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-controls>:not(#cancel-transcription),:root:not(.android):not(.ios) #encounter-page[data-working=true] #visit-input-tabs{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] .visit-recording-group{flex:0 0 auto!important;width:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-controls{display:flex!important;padding:0!important;border:0!important;background:none!important;min-height:0!important;height:auto!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #cancel-transcription:not([hidden]){display:inline-flex!important;order:0;height:36px!important;min-height:36px!important;padding:0 13px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--card)!important;color:var(--ink)!important;font-size:13px!important;font-weight:550!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress .note-progress-copy strong{font-size:13.5px} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress .transcribe-line{margin-top:8px!important} } @media (min-width:768px){ /* While a visit records, transcribes or drafts, the footer carries only what is happening: no Sign note, no save line. */ :root:not(.android):not(.ios) #encounter-page:is([data-capturing=true],[data-working=true]) .document-footer :is(#review,#review-skip,#save-status,#foot-signed){display:none!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-working=true] #note-progress:not([hidden]){display:flex!important;flex:1 1 auto;align-items:center;gap:12px;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #note-progress :is(.note-steps,#note-progress-detail,.note-retry[hidden]){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #note-progress .note-progress-copy{display:flex;align-items:baseline;gap:10px;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #note-progress .note-progress-copy strong{font-size:13.5px} :root:not(.android):not(.ios) #encounter-page[data-working=true] #note-progress #note-progress-time{font:400 12px/1.4 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page[data-working=true] #note-progress .progress-bar{flex:1 1 120px;margin:0!important;display:block!important;height:4px!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress #capture-progress-detail{display:none!important} } @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress{display:flex!important;flex-direction:row!important;align-items:center;gap:14px} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress .note-progress-copy{flex:0 0 auto;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress .transcribe-line:not([hidden]){flex:1 1 120px;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-working=true] .editor-tools>#generate{display:none!important} } @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress .transcribe-line:not([hidden]){flex:1 1 160px!important;width:auto!important;min-width:120px;height:4px!important}} @media (min-width:768px){ /* The progress strip shows only while the visit is being worked on: a line left over after "Nothing was heard" never stacks above the saved-recording row. */ :root:not(.android):not(.ios) #encounter-page:not([data-working=true]) #capture-progress{display:none!important} /* The between-states card keeps one shape (one row, 66px) whether it is saying Recording saved, Transcribing or Writing the note: only its words and buttons change, nothing jumps (owner, 23 Sept). */ :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #visit-inputs:not([hidden]){min-height:66px;box-sizing:border-box;transition:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=false][data-capturing=false] #capture-controls>.capture-copy{min-height:40px;display:flex;flex-direction:column;justify-content:center} :root:not(.android):not(.ios) #encounter-page[data-working=true] #capture-progress .note-progress-copy strong,:root:not(.android):not(.ios) #encounter-page[data-working=true] #note-progress .note-progress-copy strong{font-size:14px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-working=true] :is(#capture-progress,#note-progress){min-height:40px} } /* ---- Visit stages (23 Sept): the card between the strip and the tabs is one row, 66px, in every stage that has it --------- ready → the recorder sits in the Transcript tab (no card) · recording / paused → the rail · transcribing → "Transcribing the recording…" bar Stop · drafting → "Writing the note…" elapsed bar · saved → "Recording saved" why | Start recording Recover · transcript / draft / signed → no card. Nothing else shows in that card, whatever older rules said. */ @media (min-width:768px){ :root:not(.android):not(.ios) #encounter-page:not([data-stage=transcribing]) #capture-progress{display:none!important} :root:not(.android):not(.ios) #encounter-page:not([data-stage=drafting]) #note-progress{display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) #visit-inputs:not([hidden]){display:flex!important;flex-direction:row!important;align-items:center!important;gap:16px;min-height:66px;padding:12px 18px!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) #visit-inputs>.visit-head{display:contents!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) :is(.visit-patient-group,#visit-input-tabs,#capture-controls>:not(#cancel-transcription)){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress:not([hidden]){display:flex!important;flex:1 1 auto;flex-direction:row!important;align-items:center;gap:14px;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress .note-progress-copy{flex:0 0 auto;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress #capture-progress-detail{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress .transcribe-line{display:block!important;flex:1 1 160px!important;width:auto!important;min-width:120px;height:4px!important;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] .visit-recording-group{display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-controls{display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #cancel-transcription:not([hidden]){display:inline-flex!important;flex:0 0 auto;height:40px!important;min-height:40px!important;padding:0 14px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--card)!important;color:var(--ink)!important;font-size:13px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] .visit-recording-group{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress:not([hidden]){display:flex!important;flex:1 1 auto;align-items:center;gap:14px;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress :is(.note-steps,#note-progress-detail,.progress-spinner){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress .note-progress-copy{display:flex;align-items:baseline;gap:10px;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress .progress-bar{display:block!important;flex:1 1 160px;height:4px!important;margin:0!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) :is(#capture-progress,#note-progress) .note-progress-copy strong{font-size:14px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress-time{font:400 12px/1.4 var(--font-mono);color:var(--hint)} /* Only the tools a stage can use. */ :root:not(.android):not(.ios) #encounter-page:is([data-stage=saved],[data-stage=transcribing],[data-stage=drafting],[data-stage=recording],[data-stage=paused]) .editor-tools>#generate{display:none!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#generate:disabled{display:none!important} /* Change patient: its own icon and its words, so it is never mistaken for Open record. */ :root:not(.android):not(.ios) .visit-strip .strip-tools>#move-visit{width:auto!important;padding:0 11px!important} } /* ---- Tables (owner, 23 Sept 2026): the header and every row share one column template and no track depends on what a cell holds, so headings sit over their columns and every row's columns line up whatever a status or an action says; dates and times are never clipped; the action column is right-aligned, everything else left. ------------------------- */ @media (min-width:768px){ :root:not(.android):not(.ios) .home-table .table-row.home-columns{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 272px 92px!important;gap:14px!important} :root:not(.android):not(.ios) .home-table .table-row.home-columns>.status-chip{justify-self:start} :root:not(.android):not(.ios) .home-table .table-row.home-columns>.row-action{justify-self:end} :root:not(.android):not(.ios) #home-page .table-head.patient-columns,:root:not(.android):not(.ios) #home-page .table-rows>.table-row.patient-columns{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr) 252px!important;gap:14px!important;box-sizing:border-box;width:100%} :root:not(.android):not(.ios) #home-page .table-head.patient-columns>.mono{text-align:right} :root:not(.android):not(.ios) #home-page .table-rows>.table-row.patient-columns>.row-actions{justify-content:flex-end} :root:not(.android):not(.ios) #review-page .review-table .review-columns{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr) 132px 84px!important;gap:14px!important;box-sizing:border-box;width:100%} :root:not(.android):not(.ios) #review-page .review-table .review-columns>.row-action{justify-self:end} :root:not(.android):not(.ios) .calendar-day .table-rows>.table-row.calendar-row{display:grid!important;grid-template-columns:76px minmax(0,1fr) minmax(128px,.55fr) minmax(312px,1.3fr)!important;gap:14px;align-items:center} :root:not(.android):not(.ios) .calendar-row>.mono{overflow:visible!important;text-overflow:clip!important;white-space:nowrap} :root:not(.android):not(.ios) .calendar-row .patient-name{flex:none;min-width:0} :root:not(.android):not(.ios) .calendar-row>.row-actions{justify-content:flex-end;justify-self:end} :root:not(.android):not(.ios) .table-card .mono,:root:not(.android):not(.ios) .table-row .mono{white-space:nowrap} } @media (min-width:768px){ /* The day list's appointment row: Start visit · Move · Cancel fit their column at every width — compact buttons, and on a narrow day card the two secondary ones keep their icons only (their words are their titles). */ :root:not(.android):not(.ios) .calendar-day{container-type:inline-size} :root:not(.android):not(.ios) .calendar-row>.row-actions{gap:6px} :root:not(.android):not(.ios) .calendar-row>.row-actions>button{padding:0 10px!important;white-space:nowrap} :root:not(.android):not(.ios) .calendar-row>.row-actions>button .icon{width:14px;height:14px} @container (max-width:720px){ :root:not(.android):not(.ios) .calendar-day .table-rows>.table-row.calendar-row{grid-template-columns:76px minmax(0,1fr) minmax(112px,.55fr) minmax(198px,1.2fr)!important} :root:not(.android):not(.ios) .calendar-row>.row-actions>button:not(:first-child){width:32px;min-width:32px;padding:0!important;justify-content:center} :root:not(.android):not(.ios) .calendar-row>.row-actions>button:not(:first-child) .action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } } @media (min-width:768px){ /* Addenda (owner, 23 Sept 2026): each entry carries Edit and Delete at its right; editing happens in place. */ :root:not(.android):not(.ios) #addendum-pane .addendum-head{display:flex;align-items:center;gap:10px;flex-wrap:nowrap} :root:not(.android):not(.ios) #addendum-pane .addendum-tools{display:flex;gap:6px;margin-left:auto} :root:not(.android):not(.ios) #addendum-pane .addendum-tools>button{height:30px!important;min-height:30px!important;padding:0 10px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important} :root:not(.android):not(.ios) #addendum-pane .addendum-tools>button.danger-outline{color:var(--danger)!important;border-color:var(--danger-border)!important} :root:not(.android):not(.ios) #addendum-pane .addendum-tools>button .icon{width:14px;height:14px} :root:not(.android):not(.ios) #addendum-pane .addendum-form{display:flex;flex-direction:column;gap:8px} :root:not(.android):not(.ios) #addendum-pane .addendum-form>textarea{min-height:96px;padding:10px 12px;border:1px solid var(--accent)!important;border-radius:8px;font:inherit;line-height:1.5;resize:vertical} :root:not(.android):not(.ios) #addendum-pane .addendum-form>.addendum-actions{justify-content:flex-end} } @media (min-width:768px){ /* A narrow day card (the calendar beside it at 1040px): time · patient · actions; the status is already the small line under the name, so its chip steps aside rather than squeezing the name to nothing. */ @container (max-width:560px){ :root:not(.android):not(.ios) .calendar-day .table-rows>.table-row.calendar-row{grid-template-columns:76px minmax(0,1fr) minmax(184px,auto)!important} :root:not(.android):not(.ios) .calendar-row>.status-chip{display:none!important} } } @media (min-width:768px){ /* A placeholder that does not fit ends in an ellipsis, never mid-word. */ :root:not(.android):not(.ios) #genie-palette-input::placeholder,:root:not(.android):not(.ios) #assistant-input::placeholder,:root:not(.android):not(.ios) .table-search input::placeholder{text-overflow:ellipsis;overflow:hidden;white-space:nowrap} } @media (min-width:768px){ /* The name ask (owner, 23 Sept 2026): ONE control — a patient box (44px field) with the list of matching patients open under it; the selected row is what the action will do (file under that patient, or add a new one). Actions at the right. */ :root:not(.android):not(.ios) #name-nudge .field{display:flex;flex-direction:column;gap:6px;margin:6px 0 0} :root:not(.android):not(.ios) #name-nudge .field>span{font-size:12.5px;font-weight:600;color:var(--secondary)} :root:not(.android):not(.ios) #name-nudge .patient-box{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:9px;background:var(--card);overflow:hidden} :root:not(.android):not(.ios) #name-nudge .patient-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)} :root:not(.android):not(.ios) #name-nudge .patient-box:has(input.name-needed){border-color:var(--review-dot)} :root:not(.android):not(.ios) #name-nudge input{height:44px;min-height:44px;padding:0 12px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--card);color:var(--ink);font:inherit;font-size:15px;outline:none;box-shadow:none} :root:not(.android):not(.ios) #name-nudge input.name-needed{background:var(--review-bg)} :root:not(.android):not(.ios) #name-nudge #name-nudge-list{height:212px;overflow-y:auto;overscroll-behavior:contain;padding:4px} :root:not(.android):not(.ios) #name-nudge .name-option{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0;min-height:44px;margin:0;padding:6px 10px;border:0;border-radius:7px;background:none;box-shadow:none;color:var(--ink);font:inherit;font-weight:400;text-align:left;cursor:pointer} :root:not(.android):not(.ios) #name-nudge .name-option:hover{background:var(--surface-hover,var(--accent-tint))} :root:not(.android):not(.ios) #name-nudge .name-option[aria-selected="true"]{background:var(--accent-tint);color:var(--accent-text)} :root:not(.android):not(.ios) #name-nudge .name-option .name-avatar{flex:none;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-surface);color:var(--accent-text);font-size:12px;font-weight:600} :root:not(.android):not(.ios) #name-nudge .name-option .name-main{display:flex;flex-direction:column;min-width:0;gap:1px;line-height:1.3} :root:not(.android):not(.ios) #name-nudge .name-option strong{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) #name-nudge .name-option .name-meta{font-size:12px;color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) #name-nudge .name-option[aria-selected="true"] .name-meta{color:inherit;opacity:.8} :root:not(.android):not(.ios) #name-nudge .name-option.name-add{font-weight:600} :root:not(.android):not(.ios) #name-nudge .name-option.name-add svg{flex:none;width:18px;height:18px;margin:0 6px} :root:not(.android):not(.ios) #name-nudge .name-empty{margin:0;padding:14px 12px;font-size:13px} :root:not(.android):not(.ios) #name-nudge #name-nudge-hint{margin:0;font-size:12.5px} :root:not(.android):not(.ios) #name-nudge #name-nudge-hint:empty{display:none} :root:not(.android):not(.ios) #name-nudge .dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:nowrap} :root:not(.android):not(.ios) #name-nudge .dialog-actions>button[hidden]{display:none} } @media (min-width:768px){ :root:not(.android):not(.ios) #name-nudge{width:min(580px,calc(100vw - 48px))} :root:not(.android):not(.ios) #name-nudge .dialog-actions>button{white-space:nowrap;flex:none} }