2026-09-12 09:36:36 +00:00
|
|
|
.messages{flex:1;overflow:auto;overflow-x:hidden;padding:34px max(34px,7vw) 150px;display:flex;flex-direction:column;gap:18px}
|
2026-09-05 09:41:44 +00:00
|
|
|
.message{display:flex}
|
2026-09-05 14:59:07 +00:00
|
|
|
.message>.message-body,.message-stack>.message-body{max-width:76%;padding:13px 17px;border-radius:22px;white-space:pre-wrap;line-height:1.5}
|
|
|
|
|
.message>.message-body.md,.message-stack>.message-body.md{min-width:0;white-space:normal}
|
2026-09-05 09:41:44 +00:00
|
|
|
.message.user{justify-content:flex-end}
|
2026-09-06 05:39:06 +00:00
|
|
|
.message.user>.message-body{background:var(--cream);color:var(--on-cream)}
|
2026-09-05 14:59:07 +00:00
|
|
|
.message.assistant>.message-body,.message-stack>.message-body{background:#19191c}
|
|
|
|
|
.message-stack{display:flex;flex-direction:column;align-items:flex-start;max-width:76%;min-width:0}
|
2026-09-12 09:36:36 +00:00
|
|
|
.message-stack>.message-body{max-width:100%;min-width:0}
|
2026-09-05 14:59:07 +00:00
|
|
|
.copy-msg{display:inline-flex;align-items:center;gap:6px;height:28px;margin-top:6px;padding:0 8px 0 6px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
|
|
|
|
|
.copy-msg svg{flex:0 0 14px}
|
|
|
|
|
.copy-msg:hover{background:rgba(255,255,255,.07);color:var(--ink)}
|
|
|
|
|
.copy-msg.copied,.copy-msg.copied:hover{color:var(--accent);background:transparent;cursor:default}
|
2026-09-06 05:39:06 +00:00
|
|
|
.composer{position:absolute;left:max(34px,5vw);right:max(34px,5vw);bottom:22px;display:flex;align-items:flex-end;gap:8px;border:1px solid var(--border);background:var(--elevated);border-radius:26px;padding:8px;box-shadow:0 16px 50px rgba(0,0,0,.22)}
|
2026-09-05 09:41:44 +00:00
|
|
|
.composer textarea{flex:1;min-height:42px;max-height:140px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);padding:11px 4px}
|
|
|
|
|
.composer-plus{background:transparent;color:var(--muted)}
|
|
|
|
|
.composer svg{width:18px}
|
2026-09-07 13:08:10 +00:00
|
|
|
.messages{min-width:0;padding-bottom:24px;padding-left:var(--chat-gutter);padding-right:var(--chat-gutter)}
|
2026-09-12 09:36:36 +00:00
|
|
|
.message{box-sizing:border-box;width:var(--chat-col);max-width:none;min-width:0;margin-inline:auto;overflow-wrap:anywhere}
|
2026-09-05 09:41:44 +00:00
|
|
|
.message>span{max-width:82%}
|
2026-09-12 09:36:36 +00:00
|
|
|
.thinking-row{display:flex;align-items:center;gap:10px;width:min(760px,100%);min-width:0;margin:0}
|
2026-09-05 09:41:44 +00:00
|
|
|
.thinking-dots{position:relative;display:flex;align-items:center;gap:4px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
|
|
|
|
|
.thinking-dots:after{content:"";position:absolute;left:12px;bottom:4px;width:24px;height:2px;border-radius:999px;background:linear-gradient(90deg,#7c5cff,#34d9ff,#58f39a,#ffe66d,#ff73dc,#7c5cff);background-size:200% 100%;animation:small-magic-line 1.25s linear infinite}
|
|
|
|
|
.thinking-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:thinking-dot 1.15s ease-in-out infinite}
|
|
|
|
|
.thinking-dots i:nth-child(2){animation-delay:.16s}
|
|
|
|
|
.thinking-dots i:nth-child(3){animation-delay:.32s}
|
2026-09-07 13:08:10 +00:00
|
|
|
.composer-dock{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:20px;padding:28px var(--chat-gutter) 20px;background:var(--main);pointer-events:none;flex:none;width:100%}
|
2026-09-05 09:41:44 +00:00
|
|
|
.composer-dock:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:linear-gradient(180deg,transparent,var(--main));pointer-events:none}
|
2026-09-09 09:20:39 +00:00
|
|
|
.composer-dock>*{box-sizing:border-box;pointer-events:auto;width:var(--chat-col);max-width:760px;min-width:0;margin-inline:auto}
|
|
|
|
|
.composer{position:relative;left:auto;right:auto;bottom:auto;width:var(--chat-col);min-width:0;max-width:100%;min-height:62px;align-items:center;padding:9px 10px;transform:none}
|
2026-09-05 09:41:44 +00:00
|
|
|
.composer.has-files{flex-wrap:wrap;align-items:flex-end;padding-top:10px}
|
|
|
|
|
.composer textarea{align-self:center;box-sizing:border-box;height:42px;min-height:42px;max-height:126px;padding:11px 4px;line-height:20px}
|
2026-09-12 09:36:36 +00:00
|
|
|
.slash-suggestions{position:absolute;left:58px;right:58px;bottom:calc(100% + 8px);z-index:8;display:grid;gap:2px;padding:6px;border:1px solid var(--border);border-radius:14px;background:var(--menu);box-shadow:0 14px 34px rgba(0,0,0,.35);min-width:0;max-width:100%}
|
2026-09-06 03:43:38 +00:00
|
|
|
.slash-suggestions button{display:flex;align-items:baseline;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
|
|
|
|
|
.slash-suggestions button:hover,.slash-suggestions button:focus-visible{background:rgba(255,255,255,.08);outline:0}
|
|
|
|
|
.slash-suggestions strong{min-width:110px;color:var(--accent);font-weight:650}
|
|
|
|
|
.slash-suggestions span{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
|
2026-09-05 09:41:44 +00:00
|
|
|
.composer-files{display:flex;flex-wrap:wrap;gap:8px;flex:1 0 100%;order:-1;padding:2px 8px 10px 46px}
|
2026-09-06 05:39:06 +00:00
|
|
|
.file-card{display:flex;align-items:center;gap:8px;max-width:min(240px,100%);height:48px;padding:2px 8px 2px 2px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink)}
|
2026-09-05 09:41:44 +00:00
|
|
|
.file-card-thumb,.file-card-badge{flex:0 0 44px;width:44px;height:44px;border-radius:11px;object-fit:cover}
|
2026-09-06 05:39:06 +00:00
|
|
|
.file-card-badge{display:grid;place-items:center;background:var(--hairline);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.04em}
|
2026-09-05 09:41:44 +00:00
|
|
|
.file-card-meta{display:grid;min-width:0;flex:1}
|
|
|
|
|
.file-card-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
|
|
|
|
|
.file-card-meta small{color:var(--muted);font-size:11px}
|
|
|
|
|
.file-card-remove{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
|
|
|
|
|
.file-card-remove:hover{color:var(--ink);background:rgba(255,255,255,.08)}
|
|
|
|
|
.file-card-remove svg{width:14px;height:14px}
|
|
|
|
|
.message.with-files{align-items:flex-end;flex-direction:column;gap:8px}
|
|
|
|
|
.message.with-files .msg-attachments{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:min(420px,82%)}
|
2026-09-05 14:59:07 +00:00
|
|
|
.message.with-files .message-body,.message.with-files .message-stack{max-width:82%}
|
2026-09-05 09:41:44 +00:00
|
|
|
.composer-plus,.composer .send{box-sizing:border-box;flex:0 0 42px;width:42px;height:42px;margin:0;align-self:center}
|
2026-09-06 05:39:06 +00:00
|
|
|
.stop-send{background:var(--cream);color:var(--on-send)}
|
2026-09-05 09:41:44 +00:00
|
|
|
.stop-send svg{width:14px;height:14px;fill:currentColor}
|
|
|
|
|
.composer-plus:disabled{opacity:.35;cursor:not-allowed}
|
2026-09-09 09:20:39 +00:00
|
|
|
.message{position:relative;padding-right:0;-webkit-touch-callout:none;touch-action:manipulation}
|
|
|
|
|
.messages .remember-msg{display:none}
|
2026-09-12 09:36:36 +00:00
|
|
|
.working-label{font-size:13px;letter-spacing:.02em;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(90deg,#7a8088 0%,#7a8088 28%,#fff 50%,#7a8088 72%,#7a8088 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:working-shimmer 1.35s linear infinite}
|
2026-09-05 09:41:44 +00:00
|
|
|
.message.assistant.spoken{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:3px;justify-content:start;align-items:end}
|
|
|
|
|
.message.assistant.spoken .msg-avatar{grid-column:1;grid-row:2;align-self:start;max-width:none;margin:4px 0 0;padding:0;border-radius:0;background:transparent;line-height:normal}
|
|
|
|
|
.message.assistant .msg-avatar>.avatar.blobatar{max-width:none;padding:0;background:transparent;color:inherit;line-height:normal;white-space:normal}
|
|
|
|
|
.message.assistant.spoken .speaker{grid-column:2;font-size:12px;font-weight:650;line-height:1.2;padding:0 6px;color:var(--accent)}
|
|
|
|
|
.message.assistant.spoken>span{grid-column:2;max-width:82%;border-radius:6px 18px 18px 18px}
|
|
|
|
|
.thinking-row{width:100%;margin:0;padding-left:2px}
|
|
|
|
|
.working-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
|
|
|
|
|
.working-step{color:var(--muted);font-size:12px;letter-spacing:.02em;line-height:1.35}
|
|
|
|
|
/* Speaker rows: the coloured speaker label must breathe away from the text. */
|
|
|
|
|
.message.assistant.spoken{column-gap:11px;row-gap:6px}
|
|
|
|
|
.message.assistant.spoken>.msg-avatar{max-width:none;padding:0;border-radius:0;background:transparent}
|
|
|
|
|
.message.assistant.spoken .speaker{padding:0 2px;letter-spacing:.01em}
|
2026-09-05 14:59:07 +00:00
|
|
|
.message.assistant.spoken>.message-body,.message.assistant.spoken>.message-stack{grid-column:2;max-width:82%;min-width:0}
|
|
|
|
|
.message.assistant.spoken .message-stack>.message-body{max-width:100%;line-height:1.52;border-radius:6px 18px 18px 18px}
|
2026-09-12 09:36:36 +00:00
|
|
|
.message.assistant.spoken .msg-attachments,
|
|
|
|
|
.message.assistant.spoken>.login-chip,
|
|
|
|
|
.message.assistant.spoken>.sched-chip,
|
|
|
|
|
.message.assistant.spoken>.message-time{grid-column:2;max-width:100%;min-width:0}
|
|
|
|
|
.message.assistant.spoken .msg-avatar{grid-row:2/-1}
|
|
|
|
|
.message.assistant.spoken{padding-bottom:0;align-items:start}
|
|
|
|
|
.message.assistant.spoken .message-time{position:static;left:auto;right:auto;margin-top:2px}
|
|
|
|
|
.message.assistant.spoken .msg-attachments{justify-content:flex-start}
|
2026-09-05 09:41:44 +00:00
|
|
|
.composer-plus.open{color:var(--ink);background:rgba(255,255,255,.08)}
|
2026-09-06 03:43:38 +00:00
|
|
|
|
|
|
|
|
.slash-suggestions button[aria-selected="true"]{background:rgba(255,255,255,.08)}
|
|
|
|
|
.slash-suggestions small{flex-shrink:0;color:var(--muted);font-size:11px}
|
2026-09-08 13:27:38 +00:00
|
|
|
|
|
|
|
|
.message{padding-bottom:21px}
|
|
|
|
|
.message-time{position:absolute;bottom:0;left:0;font-size:11px;line-height:17px;color:var(--muted);font-variant-numeric:tabular-nums}
|
2026-09-09 09:20:39 +00:00
|
|
|
.message.user .message-time{left:auto;right:0}
|
2026-09-09 06:41:09 +00:00
|
|
|
|
|
|
|
|
/* The day is said once, centred above the first message of that day, so each
|
|
|
|
|
message only needs its clock time. */
|
|
|
|
|
.day-divider{display:flex;justify-content:center;width:var(--chat-col);margin:6px auto -4px;user-select:none}
|
|
|
|
|
.day-divider time{padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted);font-size:11px;line-height:16px;letter-spacing:.02em}
|
|
|
|
|
|
|
|
|
|
/* Who the room sent a message to: one thin line in the space under the bubble,
|
|
|
|
|
opposite the timestamp, so it reads as a note about the message and never as
|
|
|
|
|
a second message. */
|
2026-09-09 09:20:39 +00:00
|
|
|
.route-note{display:none}
|
|
|
|
|
|
|
|
|
|
.composer.has-reply{flex-wrap:wrap;align-items:flex-end;padding-top:10px}
|
|
|
|
|
.composer-reply{display:flex;align-items:center;gap:8px;box-sizing:border-box;flex:1 1 100%;min-width:0;max-width:100%;width:100%;overflow:hidden;order:-2;margin:2px 0 4px;padding:7px 8px 7px 46px;border-left:2px solid var(--accent);border-radius:10px;background:rgba(255,255,255,.04)}
|
|
|
|
|
.composer-reply-copy{min-width:0;flex:1 1 auto;overflow:hidden}
|
|
|
|
|
.composer-reply-copy small,.composer-reply-copy span{display:block;overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}
|
|
|
|
|
.composer-reply-copy small{color:var(--accent);font-size:11px;font-weight:650;line-height:1.3}
|
|
|
|
|
.composer-reply-copy span{color:var(--muted);font-size:12px;line-height:1.35}
|
|
|
|
|
.composer-reply-close{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
|
|
|
|
|
.composer-reply-close:hover{color:var(--ink);background:rgba(255,255,255,.08)}
|
|
|
|
|
.composer-reply-close svg{width:14px;height:14px}
|
|
|
|
|
|
|
|
|
|
.reply-quote{display:block;margin:0 0 8px;padding:6px 10px;border-left:2px solid var(--accent);border-radius:8px;background:rgba(255,255,255,.05);white-space:normal}
|
|
|
|
|
.reply-quote strong{display:block;color:var(--accent);font-size:11px;font-weight:650;line-height:1.3}
|
|
|
|
|
.reply-quote span{display:block;overflow:hidden;color:var(--muted);font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
|
|
|
|
|
.message.user .reply-quote{background:rgba(0,0,0,.08)}
|
|
|
|
|
.message.user .reply-quote strong{color:var(--on-cream);opacity:.72}
|
|
|
|
|
.message.user .reply-quote span{color:var(--on-cream);opacity:.7}
|
|
|
|
|
.message.replying>.message-body,.message.replying>.message-stack>.message-body{box-shadow:inset 0 0 0 1px var(--accent)}
|
|
|
|
|
|
|
|
|
|
.mention-link{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--accent);font:inherit;line-height:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:.16em;cursor:pointer}
|
|
|
|
|
.mention-link:hover{color:#7ee0c8}
|
|
|
|
|
.mention-link.is-everyone{cursor:default;font-weight:650}
|
|
|
|
|
.message.user .mention-link{color:#0f766e;text-decoration-color:color-mix(in srgb,#0f766e 50%,transparent)}
|
|
|
|
|
.message.user .mention-link:hover{color:#115e59}
|
2026-09-09 06:41:09 +00:00
|
|
|
|
|
|
|
|
/* The `@` list sits where the slash list sits: only one of them is ever open. */
|
|
|
|
|
.mention-suggestions button{align-items:center;gap:8px}
|
|
|
|
|
.mention-suggestions strong{min-width:0}
|
|
|
|
|
|
|
|
|
|
/* The host is a name in the top bar, not a page of settings. */
|
|
|
|
|
.host-chip-wrap{position:relative;display:inline-flex;align-items:center}
|
|
|
|
|
.host-chip{display:inline-flex;align-items:center;gap:5px;max-width:150px;padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}
|
|
|
|
|
.host-chip:hover,.host-chip[aria-expanded="true"]{border-color:var(--accent);color:var(--ink)}
|
|
|
|
|
.host-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
|
|
|
.host-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:9;display:grid;gap:2px;min-width:190px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--menu);box-shadow:0 14px 34px rgba(0,0,0,.35)}
|
|
|
|
|
.host-menu button{display:flex;align-items:center;gap:8px;padding:7px 9px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:13px;text-align:left;cursor:pointer}
|
|
|
|
|
.host-menu button:hover,.host-menu button:focus-visible{background:rgba(255,255,255,.08);outline:0}
|
|
|
|
|
.host-menu button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
|
|
|
.host-menu-label{padding:2px 9px 4px;color:var(--muted);font-size:11px}
|
|
|
|
|
.host-flag{margin-left:auto;color:var(--accent);font-size:11px;font-weight:650}
|
2026-09-12 09:36:36 +00:00
|
|
|
.run-wait-status{padding:6px 20px;color:var(--muted);font-size:12px;flex-shrink:0}
|
|
|
|
|
|
|
|
|
|
/* Task ownership remains visible without a stream of tool narration. */
|
|
|
|
|
.task-status-list { flex:0 0 auto; max-height:28vh; overflow:auto; border-bottom:1px solid var(--line); }
|
|
|
|
|
.task-status { padding:10px 18px; font-size:12px; }
|
|
|
|
|
.task-status-heading { display:flex; align-items:center; gap:8px; min-width:0; }
|
|
|
|
|
.task-status-heading strong { white-space:nowrap; }
|
|
|
|
|
.task-summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); flex:1; }
|
|
|
|
|
.task-probe { color:var(--muted); cursor:pointer; white-space:nowrap; }
|
|
|
|
|
.task-dot { width:7px; height:7px; border-radius:50%; background:#8b8b92; flex:none; }
|
|
|
|
|
.task-dot.taskWorking,.task-dot.taskRecovering { background:#21a56a; }
|
|
|
|
|
.task-dot.taskWaiting,.task-dot.needTaskInput { background:#c58b22; }
|
|
|
|
|
.task-dot.taskDisconnected,.task-dot.taskFailed { background:#c85b56; }
|
|
|
|
|
.task-status details { margin-top:5px; color:var(--muted); }
|
|
|
|
|
.task-status p { margin:6px 0; line-height:1.5; }
|
|
|
|
|
.advanced-settings { margin:12px 0; width:100%; }
|
|
|
|
|
.advanced-settings > summary { padding:8px 0; cursor:pointer; color:var(--muted); font-size:13px; }
|
|
|
|
|
.advanced-settings[open] > summary { margin-bottom:8px; }
|
|
|
|
|
.assistant-settings-nav { display:flex; gap:6px; flex-wrap:wrap; padding:12px 14px 0; }
|
|
|
|
|
.results-cards { display:grid; gap:10px; padding:12px; }
|
|
|
|
|
@media(max-width:700px) { .task-status{padding:8px 12px;} .task-probe{font-size:11px;} .task-status-list{max-height:22vh;} }
|
