1074 lines
23 KiB
CSS
1074 lines
23 KiB
CSS
/* Approved Hope Lightwell shell. Semantic palette stays account-controlled. */
|
||
:root{
|
||
--canvas:var(--hope-ground);
|
||
--surface:var(--hope-surface);
|
||
--surface-raised:var(--hope-persona-surface);
|
||
--ink:var(--hope-ink);
|
||
--ink-soft:var(--hope-quiet);
|
||
--ink-muted:var(--hope-quiet);
|
||
--accent:var(--hope-accent);
|
||
--accent-ink:var(--hope-on-accent);
|
||
--line:var(--hope-separator);
|
||
--focus:var(--hope-focus);
|
||
--danger:var(--hope-alert);
|
||
--iris:var(--hope-accent);
|
||
--z-panel:30;
|
||
--z-backdrop:40;
|
||
--z-sheet:50}
|
||
*{
|
||
box-sizing:border-box}
|
||
body{
|
||
margin:0;
|
||
background:var(--canvas);
|
||
color:var(--ink);
|
||
font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
||
-webkit-font-smoothing:antialiased}
|
||
button,input,textarea,select{
|
||
font:inherit;
|
||
color:inherit}
|
||
button{
|
||
cursor:pointer}
|
||
button:disabled{
|
||
opacity:.45;
|
||
cursor:not-allowed}
|
||
[hidden]{
|
||
display:none!important}
|
||
h1,h2,h3,p{
|
||
margin:0}
|
||
h1,h2,h3{
|
||
text-wrap:balance}
|
||
p{
|
||
text-wrap:pretty}
|
||
a{
|
||
color:var(--accent)}
|
||
:focus-visible{
|
||
outline:2px solid var(--focus);
|
||
outline-offset:3px}
|
||
.sr-only{
|
||
position:absolute;
|
||
width:1px;
|
||
height:1px;
|
||
margin:-1px;
|
||
overflow:hidden;
|
||
clip:rect(0,0,0,0);
|
||
white-space:nowrap}
|
||
.skip-link{
|
||
position:fixed;
|
||
top:12px;
|
||
left:12px;
|
||
z-index:var(--z-sheet);
|
||
padding:12px;
|
||
background:var(--ink);
|
||
color:var(--canvas);
|
||
transform:translateY(-180%)}
|
||
.skip-link:focus{
|
||
transform:none}
|
||
.btn{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:8px;
|
||
min-height:44px;
|
||
padding:9px 13px;
|
||
border:0;
|
||
border-radius:8px;
|
||
background:transparent;
|
||
color:var(--ink);
|
||
font-weight:500;
|
||
transition:background 160ms ease}
|
||
.btn:hover:not(:disabled){
|
||
background:var(--surface-raised)}
|
||
.btn-primary{
|
||
background:var(--accent);
|
||
color:var(--accent-ink)}
|
||
.btn-primary:hover:not(:disabled){
|
||
background:var(--accent);
|
||
filter:brightness(1.08)}
|
||
.btn-danger{
|
||
background:var(--danger);
|
||
color:var(--hope-on-alert)}
|
||
.btn-secondary{
|
||
border:1px solid var(--line)}
|
||
.btn-icon{
|
||
width:44px;
|
||
min-width:44px;
|
||
padding:0;
|
||
font-size:20px}
|
||
.btn-ghost{
|
||
color:var(--ink-soft)}
|
||
|
||
.app-shell{
|
||
display:flex;
|
||
height:100dvh;
|
||
overflow:hidden}
|
||
.chat-sidebar{
|
||
width:252px;
|
||
flex-shrink:0;
|
||
display:flex;
|
||
flex-direction:column;
|
||
padding:28px 18px 16px;
|
||
background:var(--surface);
|
||
border-right:1px solid var(--line);
|
||
min-height:0;
|
||
overflow:auto}
|
||
.sidebar-brand{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:11px;
|
||
padding:0 10px 28px;
|
||
font-size:23px;
|
||
letter-spacing:-.03em}
|
||
.hope-mark{
|
||
display:inline-grid;
|
||
place-items:center;
|
||
flex-shrink:0;
|
||
width:27px;
|
||
height:27px;
|
||
background:var(--accent);
|
||
border-radius:6px}
|
||
.hope-mark:after{
|
||
content:"";
|
||
width:11px;
|
||
height:11px;
|
||
background:var(--accent-ink);
|
||
border-radius:2px}
|
||
.new-chat{
|
||
width:100%;
|
||
justify-content:flex-start;
|
||
background:var(--canvas);
|
||
border:1px solid var(--line);
|
||
margin-bottom:13px}
|
||
.chat-sidebar input{
|
||
width:100%;
|
||
min-height:44px;
|
||
background:transparent;
|
||
border:1px solid var(--line);
|
||
border-radius:8px;
|
||
padding:10px 12px}
|
||
input::placeholder,textarea::placeholder{
|
||
color:var(--ink-soft);
|
||
opacity:1}
|
||
.chat-sidebar nav{
|
||
flex:1;
|
||
margin-top:18px}
|
||
.chat-sidebar h2{
|
||
font-size:12px;
|
||
font-weight:600;
|
||
color:var(--ink-soft);
|
||
margin:16px 12px 8px}
|
||
.nav-heading{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between}
|
||
.nav-heading h2{
|
||
margin:0 12px}
|
||
.conversation-link{
|
||
display:block;
|
||
width:100%;
|
||
min-height:44px;
|
||
padding:11px 12px;
|
||
border:0;
|
||
border-radius:8px;
|
||
background:transparent;
|
||
text-align:left;
|
||
white-space:nowrap;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis}
|
||
.conversation-link:hover,.conversation-link[aria-current="page"]{
|
||
background:var(--hope-selected-wash)}
|
||
.workspace-row{
|
||
display:flex;
|
||
align-items:center;
|
||
min-width:0}
|
||
.workspace-row>.conversation-link{
|
||
flex:1;
|
||
min-width:0}
|
||
.workspace-menu{
|
||
flex-shrink:0}
|
||
.workspace-menu summary{
|
||
cursor:pointer;
|
||
min-width:36px;
|
||
min-height:44px;
|
||
display:grid;
|
||
place-items:center;
|
||
list-style:none}
|
||
.workspace-menu[open]{
|
||
position:relative}
|
||
.workspace-tools{
|
||
position:absolute;
|
||
right:0;
|
||
z-index:var(--z-panel);
|
||
width:150px;
|
||
background:var(--canvas);
|
||
border:1px solid var(--line);
|
||
padding:6px;
|
||
border-radius:8px}
|
||
.workspace-tools .btn{
|
||
width:100%;
|
||
justify-content:flex-start}
|
||
.sidebar-footer{
|
||
margin-top:22px;
|
||
padding-top:12px;
|
||
border-top:1px solid var(--line);
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:2px}
|
||
.sidebar-footer>.btn{
|
||
justify-content:flex-start;
|
||
text-align:left}
|
||
.account-trigger{
|
||
margin-top:10px;
|
||
width:100%}
|
||
.account-avatar{
|
||
display:grid;
|
||
place-items:center;
|
||
width:34px;
|
||
height:34px;
|
||
border-radius:50%;
|
||
background:var(--hope-selected-wash);
|
||
color:var(--accent);
|
||
font-size:24px}
|
||
.account-trigger #identityChip{
|
||
flex:1;
|
||
min-width:0}
|
||
.account-trigger strong{
|
||
display:block;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
font-weight:600}
|
||
.account-trigger small{
|
||
display:block;
|
||
font-size:11px;
|
||
color:var(--ink-soft);
|
||
margin-top:5px}
|
||
.tasks-badge{
|
||
margin-left:auto;
|
||
border-radius:5px;
|
||
background:var(--hope-selected-wash);
|
||
padding:2px 6px;
|
||
font-size:11px}
|
||
#drawerOpen,#drawerClose{
|
||
display:none}
|
||
|
||
.primary-chat{
|
||
display:flex;
|
||
flex:1;
|
||
flex-direction:column;
|
||
min-width:0;
|
||
min-height:0}
|
||
.chat-topbar{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:16px;
|
||
min-height:86px;
|
||
padding:16px 38px;
|
||
border-bottom:1px solid var(--line);
|
||
flex-shrink:0}
|
||
.chat-heading{
|
||
flex:1;
|
||
min-width:0}
|
||
.chat-heading h1{
|
||
font-size:15px;
|
||
font-weight:600;
|
||
line-height:1.5;
|
||
white-space:nowrap;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis}
|
||
.chat-heading p{
|
||
font-size:12px;
|
||
color:var(--ink-soft);
|
||
margin-top:5px}
|
||
.privacy-badge{
|
||
font-size:11px;
|
||
color:var(--ink-soft);
|
||
white-space:nowrap}
|
||
.conversation-actions{
|
||
position:fixed;
|
||
inset:86px 20px auto auto;
|
||
margin:0;
|
||
width:220px;
|
||
padding:8px;
|
||
border:1px solid var(--line);
|
||
border-radius:10px;
|
||
background:var(--canvas);
|
||
color:var(--ink)}
|
||
.conversation-actions:popover-open{
|
||
display:flex;
|
||
flex-direction:column}
|
||
.conversation-actions .btn{
|
||
width:100%;
|
||
text-align:left;
|
||
justify-content:flex-start}
|
||
.chat-notice{
|
||
font-size:13px;
|
||
color:var(--ink-soft);
|
||
padding:0 24px;
|
||
flex-shrink:0;
|
||
overflow-wrap:anywhere}
|
||
.chat-notice:not(:empty){
|
||
padding-top:10px;
|
||
padding-bottom:10px}
|
||
.chat-timeline{
|
||
flex:1;
|
||
min-height:0;
|
||
overflow:auto;
|
||
padding:40px max(28px,calc((100% - 740px)/2));
|
||
scrollbar-gutter:stable}
|
||
.chat-welcome{
|
||
max-width:450px;
|
||
margin:9vh auto 40px;
|
||
text-align:center}
|
||
.chat-welcome .hope-mark{
|
||
width:34px;
|
||
height:34px}
|
||
.chat-welcome h2{
|
||
font-size:30px;
|
||
font-weight:500;
|
||
letter-spacing:-.025em;
|
||
margin:20px 0 12px;
|
||
line-height:1.3}
|
||
.chat-welcome p{
|
||
font-size:15px;
|
||
line-height:1.8;
|
||
color:var(--ink-soft)}
|
||
.chat-message{
|
||
max-width:74ch;
|
||
font-size:15px;
|
||
line-height:1.85;
|
||
margin-bottom:32px;
|
||
overflow-wrap:anywhere}
|
||
.chat-message>h2{
|
||
font-size:13px;
|
||
font-weight:600;
|
||
margin-bottom:12px}
|
||
.chat-message.assistant>h2:before{
|
||
content:"";
|
||
display:inline-block;
|
||
width:13px;
|
||
height:13px;
|
||
border-radius:3px;
|
||
background:var(--accent);
|
||
margin-right:9px;
|
||
vertical-align:-2px}
|
||
.chat-message.user{
|
||
margin-left:auto;
|
||
max-width:85%}
|
||
.chat-message.user>h2{
|
||
font-size:11px;
|
||
color:var(--ink-soft)}
|
||
.chat-message.user .markdown{
|
||
background:var(--hope-selected-wash);
|
||
padding:14px 18px;
|
||
border-radius:12px}
|
||
.markdown p{
|
||
margin:0 0 12px}
|
||
.markdown p:last-child{
|
||
margin:0}
|
||
.markdown h2,.markdown h3,.markdown h4{
|
||
font-size:18px;
|
||
margin:20px 0 10px}
|
||
.markdown ul,.markdown ol{
|
||
padding-left:23px;
|
||
margin:12px 0}
|
||
.markdown pre{
|
||
overflow:auto;
|
||
padding:16px;
|
||
border-radius:8px;
|
||
background:var(--surface);
|
||
font-size:13px;
|
||
line-height:1.6}
|
||
.markdown code{
|
||
font-family:ui-monospace,SFMono-Regular,monospace;
|
||
background:var(--surface);
|
||
padding:2px 4px;
|
||
border-radius:3px}
|
||
.markdown pre code{
|
||
background:none;
|
||
padding:0}
|
||
.markdown blockquote{
|
||
margin:12px 0;
|
||
padding:12px;
|
||
border:1px solid var(--line);
|
||
border-radius:8px}
|
||
.markdown-table{
|
||
max-width:100%;
|
||
overflow:auto;
|
||
margin:14px 0}
|
||
.markdown-table table{
|
||
border-collapse:collapse;
|
||
width:100%;
|
||
font-size:14px}
|
||
.markdown-table td,.markdown-table th{
|
||
padding:10px;
|
||
border:1px solid var(--line);
|
||
text-align:left}
|
||
.message-actions{
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
align-items:center;
|
||
gap:2px;
|
||
margin-top:8px;
|
||
font-size:12px;
|
||
color:var(--ink-soft)}
|
||
.message-actions .btn{
|
||
font-size:12px;
|
||
padding:5px 9px}
|
||
.run-progress{
|
||
width:calc(100% - 48px);
|
||
max-width:740px;
|
||
margin:0 auto;
|
||
font-size:13px;
|
||
color:var(--ink-soft)}
|
||
.primary-composer{
|
||
width:calc(100% - 64px);
|
||
max-width:740px;
|
||
margin:12px auto 0;
|
||
padding:16px 18px 12px;
|
||
border:1px solid var(--hope-control-border);
|
||
border-radius:12px;
|
||
background:var(--canvas);
|
||
flex-shrink:0}
|
||
.primary-composer textarea{
|
||
width:100%;
|
||
min-height:62px;
|
||
max-height:160px;
|
||
resize:vertical;
|
||
border:0;
|
||
background:none;
|
||
line-height:1.7;
|
||
padding:0;
|
||
display:block}
|
||
.composer-footer{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
margin-top:8px}
|
||
.composer-right{
|
||
margin-left:auto;
|
||
display:flex;
|
||
align-items:center;
|
||
gap:10px}
|
||
.composer-right>span{
|
||
font-size:11px;
|
||
color:var(--ink-soft)}
|
||
.lightwell-button{
|
||
width:48px;
|
||
min-width:48px;
|
||
height:48px;
|
||
padding:0;
|
||
border-radius:9px;
|
||
background:var(--accent);
|
||
color:var(--accent-ink)}
|
||
.lightwell-button:hover:not(:disabled){
|
||
background:var(--accent)}
|
||
.lightwell-symbol{
|
||
display:grid;
|
||
width:30px;
|
||
height:30px;
|
||
grid-template-columns:repeat(5,1fr);
|
||
grid-template-rows:repeat(5,1fr);
|
||
gap:3px;
|
||
padding:2px;
|
||
place-items:center}
|
||
.lightwell-symbol i{
|
||
width:3px;
|
||
height:3px;
|
||
background:currentColor;
|
||
border-radius:50%;
|
||
opacity:.8}
|
||
.lightwell-symbol i:nth-child(3n){
|
||
opacity:.4}
|
||
.send-button{
|
||
width:44px;
|
||
min-width:44px;
|
||
padding:0;
|
||
font-size:23px}
|
||
.chat-footnote{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
width:calc(100% - 64px);
|
||
max-width:740px;
|
||
margin:0 auto;
|
||
padding:12px 0 20px;
|
||
color:var(--ink-soft);
|
||
font-size:11px}
|
||
.feature-actions{
|
||
display:flex;
|
||
align-items:center}
|
||
.feature-actions .btn{
|
||
padding:8px;
|
||
font-size:12px}
|
||
#researchMode{
|
||
max-width:125px;
|
||
min-width:0;
|
||
min-height:44px;
|
||
border:0;
|
||
background:transparent;
|
||
font-size:12px}
|
||
#researchModeLabel{
|
||
font-size:11px;
|
||
color:var(--ink-soft)}
|
||
.attachment-preview{
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
align-items:center;
|
||
gap:8px;
|
||
padding:10px 0;
|
||
font-size:12px;
|
||
overflow-wrap:anywhere}
|
||
.attachment-preview img{
|
||
object-fit:cover;
|
||
border-radius:6px}
|
||
|
||
.inline-voice{
|
||
flex-shrink:0;
|
||
display:grid;
|
||
grid-template-columns:84px minmax(0,1fr) auto;
|
||
align-items:center;
|
||
gap:16px;
|
||
padding:16px 24px;
|
||
border-bottom:1px solid var(--line);
|
||
background:var(--hope-persona-surface);
|
||
max-height:38dvh;
|
||
overflow:auto}
|
||
.led-wall{
|
||
width:84px;
|
||
height:84px;
|
||
display:grid;
|
||
grid-template-columns:repeat(21,1fr);
|
||
grid-template-rows:repeat(21,1fr);
|
||
place-items:center;
|
||
padding:4px;
|
||
color:var(--accent);
|
||
border-radius:12px}
|
||
.led-dot{
|
||
width:var(--sz,3px);
|
||
height:var(--sz,3px);
|
||
min-width:1px;
|
||
min-height:1px;
|
||
border:0;
|
||
background:currentColor;
|
||
border-radius:50%;
|
||
opacity:.2}
|
||
.voice-summary h2{
|
||
font-size:12px;
|
||
font-weight:500;
|
||
color:var(--ink-soft);
|
||
margin-bottom:6px}
|
||
.voice-summary #stateLabel{
|
||
font-size:18px;
|
||
font-weight:600}
|
||
.voice-summary #modeDescription,.voice-summary .status,.voice-summary #bargeHint,.voice-summary #thinkingChip{
|
||
font-size:11px;
|
||
line-height:1.6;
|
||
color:var(--ink-soft);
|
||
margin-top:4px}
|
||
.voice-controls{
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
gap:6px;
|
||
justify-content:flex-end;
|
||
max-width:240px}
|
||
.voice-controls .btn{
|
||
font-size:12px}
|
||
.voice-controls #startBtn:disabled,.voice-controls #stopBtn:disabled{
|
||
display:none}
|
||
.mic-meter{
|
||
height:2px;
|
||
max-width:170px;
|
||
background:var(--line);
|
||
margin-top:7px}
|
||
.mic-meter span{
|
||
display:block;
|
||
height:100%;
|
||
width:0;
|
||
background:var(--accent)}
|
||
.live-transcript{
|
||
grid-column:2/-1;
|
||
font-size:13px;
|
||
line-height:1.65}
|
||
.live-transcript #messages:empty{
|
||
display:none}
|
||
.message-row{
|
||
margin:10px 0;
|
||
overflow-wrap:anywhere}
|
||
.message-row.user{
|
||
font-weight:600}
|
||
.message-row.system{
|
||
color:var(--ink-soft);
|
||
font-size:11px}
|
||
.audio-viz{
|
||
display:none}
|
||
|
||
.login-gate{
|
||
width:calc(100% - 32px);
|
||
max-width:420px;
|
||
margin:12vh auto;
|
||
padding:28px;
|
||
background:var(--surface);
|
||
border:1px solid var(--line);
|
||
border-radius:12px}
|
||
.login-gate h1{
|
||
font-size:26px;
|
||
letter-spacing:-.025em}
|
||
.login-gate>p{
|
||
margin:14px 0;
|
||
line-height:1.6;
|
||
color:var(--ink-soft)}
|
||
.account-form{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:10px}
|
||
.account-form label{
|
||
display:block;
|
||
font-size:12px;
|
||
font-weight:500;
|
||
margin:5px 0}
|
||
.account-form input,.account-form select,.account-form textarea,#voiceSearch{
|
||
width:100%;
|
||
min-height:44px;
|
||
padding:10px 12px;
|
||
border:1px solid var(--hope-control-border);
|
||
border-radius:7px;
|
||
background:var(--canvas);
|
||
color:var(--ink)}
|
||
.account-form textarea{
|
||
resize:vertical}
|
||
.account-form p{
|
||
font-size:13px;
|
||
line-height:1.65;
|
||
color:var(--ink-soft)}
|
||
.dialog-actions{
|
||
display:flex;
|
||
justify-content:flex-end;
|
||
gap:8px;
|
||
flex-wrap:wrap;
|
||
margin-top:12px}
|
||
dialog{
|
||
margin:auto;
|
||
width:calc(100% - 32px);
|
||
max-width:600px;
|
||
max-height:90dvh;
|
||
overflow:auto;
|
||
padding:24px;
|
||
border:1px solid var(--line);
|
||
border-radius:12px;
|
||
background:var(--canvas);
|
||
color:var(--ink)}
|
||
dialog::backdrop{
|
||
background:rgb(30 20 30 / .35)}
|
||
dialog h2{
|
||
font-size:22px;
|
||
font-weight:600;
|
||
margin-bottom:12px}
|
||
dialog h3{
|
||
font-size:18px;
|
||
font-weight:600;
|
||
margin-bottom:8px}
|
||
dialog p{
|
||
color:var(--ink-soft);
|
||
font-size:13px;
|
||
line-height:1.7;
|
||
margin:8px 0 18px}
|
||
.dialog-head{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:flex-start;
|
||
gap:16px}
|
||
.settings-window{
|
||
width:min(900px,calc(100% - 32px));
|
||
max-width:900px;
|
||
padding:0}
|
||
.settings-window>.dialog-head{
|
||
padding:22px 26px;
|
||
border-bottom:1px solid var(--line)}
|
||
.settings-window>.dialog-head h2{
|
||
margin-bottom:0}
|
||
.settings-window>.dialog-head p{
|
||
margin:6px 0 0}
|
||
.settings-layout{
|
||
display:flex;
|
||
min-height:430px}
|
||
.settings-nav{
|
||
width:195px;
|
||
flex-shrink:0;
|
||
padding:18px 12px;
|
||
background:var(--surface);
|
||
border-right:1px solid var(--line)}
|
||
.settings-nav .btn{
|
||
width:100%;
|
||
text-align:left;
|
||
justify-content:flex-start;
|
||
font-size:13px;
|
||
margin-bottom:4px}
|
||
.settings-nav .selected{
|
||
background:var(--hope-selected-wash);
|
||
color:var(--accent);
|
||
font-weight:600}
|
||
.settings-nav .admin-link{
|
||
border-top:1px solid var(--line);
|
||
border-radius:0;
|
||
margin-top:18px;
|
||
padding-top:15px;
|
||
min-height:55px}
|
||
.settings-body{
|
||
flex:1;
|
||
min-width:0;
|
||
padding:26px 30px}
|
||
.account-heading{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:6px;
|
||
margin:22px 0}
|
||
.account-heading small{
|
||
color:var(--ink-soft);
|
||
font-size:12px}
|
||
#settingsDialog #settingsSheet{
|
||
position:static;
|
||
transform:none;
|
||
width:auto;
|
||
max-height:none;
|
||
height:auto;
|
||
background:none;
|
||
border:0;
|
||
padding:0;
|
||
overflow:visible}
|
||
#settingsDialog #closeSheetBtn{
|
||
display:none}
|
||
.sheet-header{
|
||
margin-bottom:20px}
|
||
.model-settings{
|
||
border-bottom:1px solid var(--line);
|
||
padding-bottom:22px;
|
||
margin-bottom:22px}
|
||
.model-settings-actions{
|
||
display:flex;
|
||
gap:8px}
|
||
.model-settings-status[data-state="error"]{
|
||
color:var(--danger)}
|
||
.sheet-section-title{
|
||
font-size:16px;
|
||
margin-bottom:12px}
|
||
.voice-list{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:6px}
|
||
.voice-card{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
padding:12px;
|
||
border:1px solid transparent;
|
||
border-radius:8px;
|
||
background:var(--surface);
|
||
cursor:pointer;
|
||
min-height:54px}
|
||
.voice-card.active{
|
||
border-color:var(--accent);
|
||
background:var(--hope-selected-wash)}
|
||
.voice-name{
|
||
font-size:13px;
|
||
overflow-wrap:anywhere}
|
||
.voice-card.active .voice-name:after{
|
||
content:" · Selected";
|
||
color:var(--accent)}
|
||
.voice-preview{
|
||
background:none;
|
||
border:0;
|
||
min-height:44px;
|
||
padding:8px;
|
||
font-size:12px;
|
||
color:var(--ink-soft)}
|
||
.voice-preview:before{
|
||
content:"Listen"}
|
||
.admin-header{
|
||
display:flex;
|
||
align-items:flex-start;
|
||
justify-content:space-between;
|
||
gap:12px}
|
||
.admin-header h2{
|
||
font-size:18px}
|
||
.table-scroll{
|
||
overflow:auto;
|
||
max-width:100%;
|
||
margin:16px 0 24px}
|
||
.admin-section table{
|
||
border-collapse:collapse;
|
||
width:100%;
|
||
font-size:12px;
|
||
text-align:left}
|
||
.admin-section th,.admin-section td{
|
||
padding:10px;
|
||
border-bottom:1px solid var(--line);
|
||
vertical-align:top;
|
||
overflow-wrap:anywhere}
|
||
.admin-section th{
|
||
color:var(--ink-soft);
|
||
font-weight:500}
|
||
.user-actions .btn{
|
||
font-size:11px;
|
||
padding:8px;
|
||
white-space:nowrap}
|
||
.create-user-form{
|
||
display:grid;
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:12px}
|
||
.create-user-form .btn{
|
||
justify-self:start}
|
||
.admin-section h3{
|
||
margin-top:20px}
|
||
.tasks-panel{
|
||
position:fixed;
|
||
inset:0 0 0 auto;
|
||
z-index:var(--z-panel);
|
||
width:min(430px,100%);
|
||
height:100dvh;
|
||
overflow:auto;
|
||
display:flex;
|
||
flex-direction:column;
|
||
background:var(--canvas);
|
||
border-left:1px solid var(--line);
|
||
padding:22px}
|
||
.tasks-header{
|
||
display:flex;
|
||
align-items:flex-start;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
border-bottom:1px solid var(--line);
|
||
padding-bottom:16px}
|
||
.tasks-header h2{
|
||
font-size:20px}
|
||
.tasks-header p{
|
||
font-size:12px;
|
||
color:var(--ink-soft);
|
||
margin-top:6px}
|
||
.tasks-list{
|
||
padding-top:16px}
|
||
.tasks-empty{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:10px;
|
||
margin:40px 0;
|
||
text-align:center;
|
||
font-size:13px;
|
||
line-height:1.7;
|
||
color:var(--ink-soft)}
|
||
.task-card{
|
||
padding:16px 0;
|
||
border-bottom:1px solid var(--line);
|
||
font-size:13px;
|
||
line-height:1.6;
|
||
overflow-wrap:anywhere}
|
||
.task-card-header{
|
||
display:flex;
|
||
gap:8px}
|
||
.task-status-dot{
|
||
width:7px;
|
||
height:7px;
|
||
border-radius:50%;
|
||
background:var(--accent);
|
||
flex-shrink:0;
|
||
margin-top:7px}
|
||
.task-error{
|
||
color:var(--danger)}
|
||
.task-steps{
|
||
padding-left:20px}
|
||
.audio-unlock{
|
||
position:fixed;
|
||
bottom:24px;
|
||
left:50%;
|
||
transform:translateX(-50%);
|
||
z-index:var(--z-sheet);
|
||
background:var(--accent);
|
||
color:var(--accent-ink)}
|
||
#hopeFeatures details{
|
||
padding:14px 0;
|
||
border-bottom:1px solid var(--line)}
|
||
#hopeFeatures summary{
|
||
cursor:pointer;
|
||
min-height:44px;
|
||
display:flex;
|
||
align-items:center;
|
||
font-weight:500}
|
||
#hopeFeatures form{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:10px}
|
||
#hopeFeatures input,#hopeFeatures textarea,#hopeFeatures select{
|
||
max-width:100%;
|
||
width:100%;
|
||
padding:10px;
|
||
border:1px solid var(--hope-control-border);
|
||
border-radius:6px;
|
||
background:var(--canvas)}
|
||
#hopeFeatures pre{
|
||
overflow:auto;
|
||
max-width:100%;
|
||
white-space:pre-wrap}
|
||
#hopeFeatures p{
|
||
margin:10px 0;
|
||
line-height:1.6}
|
||
.sheet-backdrop{
|
||
position:fixed;
|
||
inset:0;
|
||
z-index:var(--z-backdrop);
|
||
background:rgb(30 20 30 / .35)}
|
||
|
||
@media(max-width:960px){
|
||
.chat-sidebar{
|
||
width:220px}
|
||
.chat-topbar{
|
||
padding:16px 24px}
|
||
.privacy-badge{
|
||
display:none}
|
||
.composer-footer{
|
||
gap:4px}
|
||
}
|
||
@media(max-width:760px){
|
||
.chat-sidebar{
|
||
position:fixed;
|
||
inset:0 auto 0 0;
|
||
width:min(280px,88vw);
|
||
z-index:var(--z-sheet);
|
||
transform:translateX(-100%);
|
||
transition:transform 180ms ease}
|
||
.chat-sidebar.drawer-open{
|
||
transform:none}
|
||
#drawerOpen,#drawerClose{
|
||
display:inline-flex}
|
||
#drawerClose{
|
||
margin-left:auto}
|
||
.drawer-backdrop{
|
||
position:fixed;
|
||
inset:0;
|
||
width:100%;
|
||
height:100%;
|
||
border:0;
|
||
border-radius:0;
|
||
background:rgb(30 20 30 / .35);
|
||
z-index:var(--z-backdrop)}
|
||
.chat-topbar{
|
||
min-height:70px;
|
||
padding:10px 12px;
|
||
gap:6px}
|
||
.chat-heading h1{
|
||
font-size:13px}
|
||
.chat-heading p{
|
||
font-size:11px}
|
||
.conversation-actions{
|
||
top:70px;
|
||
right:12px}
|
||
.chat-timeline{
|
||
padding:24px 22px 20px}
|
||
.chat-welcome h2{
|
||
font-size:26px}
|
||
.chat-message{
|
||
font-size:14px;
|
||
line-height:1.8}
|
||
.primary-composer{
|
||
width:calc(100% - 24px);
|
||
padding:13px 12px 10px}
|
||
.chat-footnote{
|
||
width:calc(100% - 24px);
|
||
justify-content:center;
|
||
font-size:10px;
|
||
padding-bottom:max(12px,env(safe-area-inset-bottom))}
|
||
.keyhint{
|
||
display:none}
|
||
.composer-right{
|
||
gap:8px}
|
||
.feature-actions .btn{
|
||
max-width:44px;
|
||
overflow:hidden;
|
||
white-space:nowrap;
|
||
padding:10px;
|
||
font-size:0}
|
||
.feature-actions .btn:before{
|
||
content:"＋";
|
||
font-size:22px}
|
||
#researchMode{
|
||
max-width:90px;
|
||
font-size:11px}
|
||
.inline-voice{
|
||
grid-template-columns:64px minmax(0,1fr);
|
||
gap:10px;
|
||
padding:12px 16px;
|
||
max-height:40dvh}
|
||
.led-wall{
|
||
width:64px;
|
||
height:64px}
|
||
.voice-controls{
|
||
grid-column:1/-1;
|
||
max-width:none;
|
||
justify-content:flex-start}
|
||
.live-transcript{
|
||
grid-column:1/-1}
|
||
.voice-summary #stateLabel{
|
||
font-size:16px}
|
||
.voice-summary #modeDescription{
|
||
display:none}
|
||
.settings-window>.dialog-head{
|
||
padding:18px}
|
||
.settings-layout{
|
||
flex-direction:column}
|
||
.settings-nav{
|
||
width:100%;
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
padding:10px 12px;
|
||
border-right:0;
|
||
border-bottom:1px solid var(--line);
|
||
gap:4px}
|
||
.settings-nav .btn{
|
||
width:auto;
|
||
margin:0;
|
||
padding:8px 10px;
|
||
font-size:12px}
|
||
.settings-nav .admin-link{
|
||
border:0;
|
||
border-radius:8px;
|
||
margin:0;
|
||
padding:8px 10px;
|
||
min-height:44px}
|
||
.settings-body{
|
||
padding:22px 18px}
|
||
.create-user-form{
|
||
grid-template-columns:1fr}
|
||
.admin-header{
|
||
flex-wrap:wrap}
|
||
.admin-section table{
|
||
min-width:580px}
|
||
.chat-notice{
|
||
font-size:12px}
|
||
.composer-footer{
|
||
flex-wrap:wrap}
|
||
.composer-right{
|
||
margin-left:auto}
|
||
.chat-message.user{
|
||
max-width:95%}
|
||
}
|
||
@media(prefers-reduced-motion:reduce){
|
||
*,*:before,*:after{
|
||
animation:none!important;
|
||
transition:none!important;
|
||
scroll-behavior:auto!important}
|
||
}
|
||
|
||
|
||
/* Keep all composer actions on one row at the smallest supported width. */
|
||
@media(max-width:360px){
|
||
#researchModeLabel,.composer-right>span{
|
||
display:none}
|
||
#researchMode{
|
||
max-width:84px}
|
||
.composer-right{
|
||
gap:6px}
|
||
.composer-footer{
|
||
flex-wrap:nowrap;
|
||
gap:4px}
|
||
}
|
||
|