256 lines
6.7 KiB
CSS
256 lines
6.7 KiB
CSS
|
:root {
|
||
|
|
color-scheme: dark;
|
||
|
|
--bg: #181818;
|
||
|
|
--chrome: #141414;
|
||
|
|
--text: #f0f0f0;
|
||
|
|
--text-2: color-mix(in srgb, #f0f0f0 74%, transparent);
|
||
|
|
--text-3: color-mix(in srgb, #f0f0f0 60%, transparent);
|
||
|
|
--stroke: color-mix(in srgb, #f0f0f0 12%, transparent);
|
||
|
|
--fill: color-mix(in srgb, #f0f0f0 14%, transparent);
|
||
|
|
--bubble: #222;
|
||
|
|
--user: #2c2c2c;
|
||
|
|
--accent: #c7ec6b;
|
||
|
|
--danger: #fc6b83;
|
||
|
|
--radius: 18px;
|
||
|
|
--safe-top: env(safe-area-inset-top, 0px);
|
||
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
|
||
|
|
button, textarea { font: inherit; color: inherit; }
|
||
|
|
button { cursor: pointer; }
|
||
|
|
textarea { font-size: 16px; } /* iOS: avoid zoom */
|
||
|
|
|
||
|
|
.shell {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 280px minmax(0, 1fr);
|
||
|
|
height: 100dvh;
|
||
|
|
height: 100svh;
|
||
|
|
background: var(--bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 0;
|
||
|
|
background: var(--chrome);
|
||
|
|
border-right: 1px solid var(--stroke);
|
||
|
|
padding-top: var(--safe-top);
|
||
|
|
}
|
||
|
|
.sidebar-header, .chat-header, .computer-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
min-height: 51px;
|
||
|
|
padding: 0 12px;
|
||
|
|
border-bottom: 1px solid var(--stroke);
|
||
|
|
}
|
||
|
|
.session-list { flex: 1; overflow: auto; padding: 8px; }
|
||
|
|
.session-item {
|
||
|
|
display: grid;
|
||
|
|
gap: 4px;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 58px;
|
||
|
|
padding: 10px;
|
||
|
|
text-align: left;
|
||
|
|
background: transparent;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 12px;
|
||
|
|
}
|
||
|
|
.session-item:hover, .session-item.active { background: var(--fill); }
|
||
|
|
.session-item small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
|
.sidebar-footer {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 10px 12px calc(10px + var(--safe-bottom));
|
||
|
|
border-top: 1px solid var(--stroke);
|
||
|
|
}
|
||
|
|
.sidebar-footer small, .identity small, #header-status { color: var(--text-3); display: block; }
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
display: grid;
|
||
|
|
place-items: center;
|
||
|
|
width: 34px;
|
||
|
|
height: 34px;
|
||
|
|
border-radius: 10px;
|
||
|
|
background: var(--accent);
|
||
|
|
color: #141414;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.avatar.sm { width: 28px; height: 28px; font-size: 13px; }
|
||
|
|
|
||
|
|
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||
|
|
.chat-header { padding-top: var(--safe-top); min-height: calc(51px + var(--safe-top)); }
|
||
|
|
.identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
||
|
|
.header-actions { display: flex; gap: 4px; }
|
||
|
|
|
||
|
|
.transcript {
|
||
|
|
flex: 1;
|
||
|
|
overflow: auto;
|
||
|
|
padding: 24px max(16px, calc((100% - 690px) / 2)) 12px;
|
||
|
|
outline: none;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
}
|
||
|
|
.row { display: flex; margin: 0 0 18px; }
|
||
|
|
.row.user { justify-content: flex-end; }
|
||
|
|
.bubble {
|
||
|
|
max-width: min(88%, 640px);
|
||
|
|
padding: 8px 12px;
|
||
|
|
border-radius: var(--radius);
|
||
|
|
background: var(--bubble);
|
||
|
|
overflow-wrap: anywhere;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
line-height: 1.45;
|
||
|
|
}
|
||
|
|
.row.user .bubble { background: var(--user); }
|
||
|
|
.activity {
|
||
|
|
margin: 0 0 10px;
|
||
|
|
color: var(--text-3);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.plan {
|
||
|
|
margin: 0 0 16px;
|
||
|
|
padding: 10px 12px;
|
||
|
|
border: 1px solid var(--stroke);
|
||
|
|
border-radius: 12px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.plan li { margin: 4px 0; }
|
||
|
|
.plan .done { color: var(--text-3); text-decoration: line-through; }
|
||
|
|
.typing { display: flex; gap: 4px; padding: 10px 12px; width: max-content; background: var(--bubble); border-radius: 14px; }
|
||
|
|
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #9ba392; animation: blink 1s infinite; }
|
||
|
|
.typing i:nth-child(2) { animation-delay: .15s; }
|
||
|
|
.typing i:nth-child(3) { animation-delay: .3s; }
|
||
|
|
@keyframes blink { 50% { opacity: .35; } }
|
||
|
|
|
||
|
|
.question-card {
|
||
|
|
margin: 0 max(16px, calc((100% - 690px) / 2)) 8px;
|
||
|
|
padding: 12px;
|
||
|
|
border: 1px solid var(--stroke);
|
||
|
|
border-radius: 14px;
|
||
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--bg));
|
||
|
|
}
|
||
|
|
.question-card p { margin: 0 0 8px; }
|
||
|
|
.options { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
|
|
.options button {
|
||
|
|
min-height: 44px;
|
||
|
|
padding: 8px 12px;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 999px;
|
||
|
|
background: var(--accent);
|
||
|
|
color: #141414;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.composer {
|
||
|
|
padding: 8px max(16px, calc((100% - 700px) / 2)) calc(12px + var(--safe-bottom));
|
||
|
|
}
|
||
|
|
.prompt-shell {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 9px;
|
||
|
|
background: color-mix(in srgb, #f0f0f0 6%, var(--bg));
|
||
|
|
border: 1px solid var(--stroke);
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|
||
|
|
#prompt {
|
||
|
|
flex: 1;
|
||
|
|
min-height: 44px;
|
||
|
|
max-height: 30vh;
|
||
|
|
resize: none;
|
||
|
|
background: transparent;
|
||
|
|
border: 0;
|
||
|
|
outline: none;
|
||
|
|
line-height: 1.4;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
#prompt::placeholder { color: var(--text-3); }
|
||
|
|
.send-btn {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 999px;
|
||
|
|
background: var(--text);
|
||
|
|
color: var(--bg);
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
.send-btn:disabled { opacity: .35; }
|
||
|
|
|
||
|
|
.icon-btn, .text-btn {
|
||
|
|
min-height: 36px;
|
||
|
|
padding: 6px 10px;
|
||
|
|
background: transparent;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 10px;
|
||
|
|
color: var(--text-2);
|
||
|
|
}
|
||
|
|
.icon-btn:hover, .text-btn:hover { background: var(--fill); }
|
||
|
|
.text-btn.danger { color: var(--danger); }
|
||
|
|
.hidden { display: none !important; }
|
||
|
|
|
||
|
|
.computer-pane {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 20;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background: #000;
|
||
|
|
padding-top: var(--safe-top);
|
||
|
|
}
|
||
|
|
.computer-pane[hidden] { display: none !important; }
|
||
|
|
.computer-header { background: var(--chrome); }
|
||
|
|
.computer-pane iframe { flex: 1; width: 100%; border: 0; background: #111; }
|
||
|
|
.computer-status { margin: 0; padding: 8px 12px calc(8px + var(--safe-bottom)); color: var(--text-3); font-size: 12px; background: var(--chrome); }
|
||
|
|
|
||
|
|
.tabbar { display: none; }
|
||
|
|
.menu-btn { display: none; }
|
||
|
|
.backdrop {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 8;
|
||
|
|
background: #0008;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 860px) {
|
||
|
|
.shell { grid-template-columns: 1fr; }
|
||
|
|
.sidebar {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 9;
|
||
|
|
inset: 0 auto 0 0;
|
||
|
|
width: min(86vw, 320px);
|
||
|
|
transform: translateX(-105%);
|
||
|
|
transition: transform .22s cubic-bezier(.22, 1, .36, 1);
|
||
|
|
}
|
||
|
|
.sidebar.open { transform: none; }
|
||
|
|
.menu-btn { display: inline-flex; }
|
||
|
|
.tabbar {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 6;
|
||
|
|
padding: 6px 8px calc(6px + var(--safe-bottom));
|
||
|
|
background: color-mix(in srgb, var(--chrome) 92%, transparent);
|
||
|
|
backdrop-filter: blur(16px);
|
||
|
|
border-top: 1px solid var(--stroke);
|
||
|
|
}
|
||
|
|
.tab {
|
||
|
|
min-height: 44px;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 12px;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--text-3);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.tab.active { color: var(--text); background: var(--fill); }
|
||
|
|
.composer { padding-bottom: calc(64px + var(--safe-bottom)); }
|
||
|
|
.header-actions #computer-btn { display: none; }
|
||
|
|
}
|