1167 lines
30 KiB
CSS
1167 lines
30 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;
|
||
min-height:0;
|
||
overflow-y:auto;
|
||
margin-top:18px}
|
||
.sidebar-brand,.chat-sidebar>.new-chat,.chat-sidebar>input,.sidebar-footer{flex-shrink:0}
|
||
.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;
|
||
white-space:nowrap}
|
||
.admin-section td:nth-child(2),.admin-section td:nth-child(3){
|
||
white-space:nowrap;
|
||
overflow-wrap:normal}
|
||
.admin-section td:nth-child(4){
|
||
overflow-wrap:break-word;
|
||
min-width:140px}
|
||
.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{
|
||
position:sticky;
|
||
top:-22px;
|
||
background:var(--canvas);
|
||
z-index:1;
|
||
padding-top:12px;
|
||
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)}
|
||
/* Feature sections retain their layout when mounted in Library, Activity or Settings. */
|
||
.feature-section{min-width:0;margin-block:20px;border-bottom:1px solid var(--line);padding-bottom:20px}
|
||
.feature-section>summary{font-size:1rem;font-weight:600;cursor:pointer;min-height:44px;align-content:center}
|
||
.feature-section-body{min-width:0;padding-top:12px}
|
||
.feature-intro,.feature-empty,.feature-status{line-height:1.6;max-width:68ch;overflow-wrap:anywhere}
|
||
.feature-intro{color:var(--ink-soft);margin-bottom:16px}
|
||
.feature-status:empty{display:none}
|
||
.feature-status{margin-block:12px}
|
||
.feature-toolbar,.feature-row-actions,.feature-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block:12px}
|
||
.feature-list{display:flex;flex-direction:column;min-width:0}
|
||
.feature-row{display:flex;flex-direction:column;gap:12px;align-items:stretch;padding-block:18px;border-top:1px solid var(--line);min-width:0}
|
||
.feature-row-main{flex:1;min-width:0;overflow-wrap:anywhere}
|
||
.feature-row-main h3{font-size:1rem;margin-bottom:6px}
|
||
.feature-row-main p{line-height:1.6;color:var(--ink-soft);margin-block:6px}
|
||
.feature-row-actions{flex:0 1 auto;margin:0;max-width:100%}
|
||
.feature-form{display:flex;flex-direction:column;gap:18px;min-width:0;margin-top:16px}
|
||
.feature-field{display:flex;flex-direction:column;gap:8px;min-width:0;font-weight:500;line-height:1.5}
|
||
.feature-field input,.feature-field textarea,.feature-field select{display:block;width:100%;min-width:0;max-width:100%;padding:12px;border:1px solid var(--hope-control-border);border-radius:8px;background:var(--canvas);font-weight:400;min-height:44px}
|
||
.feature-field textarea{resize:vertical;line-height:1.6;min-height:120px}
|
||
.feature-field small{font-weight:400;color:var(--ink-soft);line-height:1.5}
|
||
.feature-checkbox{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px 10px;align-items:start;line-height:1.5}
|
||
.feature-checkbox>input{grid-column:1;grid-row:1}
|
||
.feature-checkbox>label{grid-column:2;grid-row:1}
|
||
.feature-checkbox>.feature-hint{grid-column:2}
|
||
.feature-checkbox input[type=checkbox]{width:20px!important;min-width:20px;min-height:20px;margin:2px 0;padding:0;flex-shrink:0;accent-color:var(--accent)}
|
||
.feature-editor{min-width:0;border-top:1px solid var(--line);padding-top:20px;margin-top:16px}
|
||
.feature-editor:empty{display:none}
|
||
.feature-editor pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;line-height:1.6}
|
||
.feature-empty{padding:20px 0;color:var(--ink-soft)}
|
||
.feature-row details{width:100%;padding:0!important;margin:0;border-bottom:0!important}
|
||
.feature-section-body>.feature-intro{margin:0 0 14px!important}
|
||
.feature-section-body .feature-toolbar{margin:8px 0 12px}
|
||
.feature-row-main p{margin:4px 0!important}
|
||
.feature-row-actions{margin:0!important}
|
||
.feature-row .feature-row-actions details{flex-basis:100%}
|
||
.feature-row .feature-row-actions summary{font-size:13px;font-weight:400}
|
||
#hopeFeatures>.feature-section{padding-block:12px;margin-block:12px}
|
||
#hopeFeatures>.feature-section:first-of-type{margin-block:4px;padding-block:8px;order:3}
|
||
#hopeFeatures{display:flex;flex-direction:column}
|
||
#hopeFeatures>.feature-section{order:1}
|
||
#hopeFeatures>.feature-empty{order:1}
|
||
.library-guide{margin-block:12px 16px}
|
||
.feature-section>summary{min-height:40px}
|
||
#privacyMemory .feature-section{margin-top:12px}
|
||
#privacyMemory .feature-section-body{padding-top:0}
|
||
.feature-toolbar .btn:first-child{background:var(--hope-selected-wash);color:var(--accent);font-weight:600}
|
||
#activityContent .feature-row+.feature-editor{scroll-margin-top:20px}
|
||
.feature-row summary{min-height:44px;align-content:center;cursor:pointer}
|
||
.library-window{width:min(820px,calc(100vw - 32px));max-width:820px}
|
||
#activityContent{min-width:0;flex-shrink:0}
|
||
.tasks-list{flex-shrink:0}
|
||
.settings-window>.dialog-head{position:sticky;top:0;background:var(--canvas);z-index:1}
|
||
.library-window>.dialog-head{position:sticky;top:-24px;background:var(--canvas);z-index:1;padding-top:8px}
|
||
.library-guide{line-height:1.65;max-width:68ch;margin-block:16px 24px;color:var(--ink-soft)}
|
||
.settings-intro{line-height:1.65;max-width:65ch;color:var(--ink-soft);margin-top:8px}
|
||
.feature-hint{font-size:13px;font-weight:400;color:var(--ink-soft);line-height:1.5;margin:0!important}
|
||
#settingsMemoryStatus:empty{display:none}
|
||
@media(max-width:600px){.settings-nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:4px}.settings-nav .btn{width:auto!important;flex:0 0 auto;white-space:nowrap;margin:0}.settings-nav .admin-link{border-top:0;margin-top:0;padding-top:10px;min-height:44px}}
|
||
.data-guide,.security-action{padding-block:24px;border-top:1px solid var(--line);margin-top:24px}
|
||
.data-guide h4,.security-action h4{font-size:1rem;margin-bottom:10px}
|
||
.data-guide p,.security-action p{line-height:1.65;max-width:65ch;margin-bottom:16px}
|
||
.data-guide dl,.security-facts{margin:20px 0;display:flex;flex-direction:column;gap:20px}
|
||
.data-guide dt,.security-facts dt{font-weight:600;margin-bottom:6px}
|
||
.data-guide dd,.security-facts dd{margin:0;line-height:1.6;color:var(--ink-soft);overflow-wrap:anywhere}
|
||
.conversation-row{display:flex;align-items:center;gap:4px;min-width:0}
|
||
.conversation-row .conversation-link{min-width:0;flex:1}
|
||
.conversation-row-actions{border:0;background:transparent;border-radius:8px;min-width:44px;min-height:44px;color:var(--ink-soft);flex-shrink:0}
|
||
.conversation-row-actions:hover,.conversation-row-actions:focus-visible{background:var(--surface-raised);color:var(--ink)}
|
||
.conversation-row-menu{position:fixed;margin:0;min-width:180px;max-width:calc(100vw - 24px);padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
|
||
.conversation-row-menu .btn{display:block;width:100%;text-align:left;min-height:44px}
|
||
@media(max-width:600px){
|
||
.feature-row{flex-direction:column;gap:10px}
|
||
.feature-row-actions{width:100%}
|
||
.feature-row-actions .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}
|
||
.feature-form-actions .btn{flex:1 1 auto}
|
||
.library-window{width:calc(100vw - 20px);padding:18px}
|
||
}
|
||
|
||
#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}
|
||
}
|
||
|