/* The look of the whole web client, taken from the portal chat: the Radix gray scale, 16px bubbles, a floating composer,
   thin scrollbars. The public page (main.simple) and the full chat share these tokens and the controls below. */
/* The public chat page, drawn like the portal chat: the Radix gray scale, 16px bubbles, a floating composer, thin scrollbars. */
:root {
  color-scheme: light dark;
  --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #f0f0f0; --gray-4: #e8e8e8; --gray-5: #e0e0e0; --gray-6: #d9d9d9;
  --gray-7: #cecece; --gray-8: #bbb; --gray-9: #8d8d8d; --gray-10: #838383; --gray-11: #646464; --gray-12: #202020;
  --gray-a3: #00000012; --gray-a8: #00000044; --gray-a9: #00000072; --sky-3: #e1f6fd; --sky-11: #00749e;
  --color-background: #fff;
  --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px #00000008, 0 12px 32px -16px var(--gray-a3);
  --chat-max-width: 824px;
  --composer-height: 150px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gray-1: #111; --gray-2: #191919; --gray-3: #222; --gray-4: #2a2a2a; --gray-5: #313131; --gray-6: #3a3a3a;
    --gray-7: #484848; --gray-8: #606060; --gray-9: #6e6e6e; --gray-10: #7b7b7b; --gray-11: #b4b4b4; --gray-12: #eee;
    --gray-a3: #ffffff12; --gray-a8: #ffffff44; --gray-a9: #ffffff72; --sky-3: #0d3849; --sky-11: #75c7f0;
    --color-background: #111;
    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px #00000040, 0 12px 32px -16px var(--gray-a3);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--color-background); color: var(--gray-12); font: 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#shell { height: 100%; display: flex; flex-direction: column; }
#top { flex: none; display: flex; align-items: center; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--gray-a3); font-size: 14px; }
#top strong { font-weight: 500; }

/* Scrolling: a thin rounded thumb that shows on hover, the gutter reserved on both edges. */
#scroller { height: 100%; width: 100%; overflow: auto; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; }
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--gray-a8) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: transparent; border: 4px solid transparent; border-radius: 12px; background-clip: content-box; }
*:hover::-webkit-scrollbar-thumb { background-color: var(--gray-a8); }
::-webkit-scrollbar-thumb:hover { background-color: var(--gray-a9); }


/* The public page (/). */
main.simple { position: relative; flex: 1; min-height: 0; }
main.simple #log { display: flex; flex-direction: column; gap: 16px; max-width: var(--chat-max-width); margin: 0 auto; padding: 32px 32px calc(var(--composer-height) + 44px); }
main.simple .row { display: flex; gap: 8px; }
main.simple .col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
main.simple .row.mine .col { align-items: flex-end; }
main.simple .row.theirs .col { align-items: flex-start; }
main.simple .avatar { flex: none; width: 32px; height: 32px; margin-top: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-3); color: var(--sky-11); font-size: 14px; font-weight: 500; }
main.simple .name { font-size: 12px; color: var(--gray-11); }
main.simple .bubble { max-width: 70%; padding: 8px 16px; border-radius: 16px; background: var(--gray-3); font-size: 16px; line-height: 24px; white-space: pre-wrap; overflow-wrap: break-word; }
main.simple .bubble.deleted { font-style: italic; color: var(--gray-10); }
main.simple .row.failed .bubble { box-shadow: inset 0 0 0 1px #dc2626; }
main.simple .meta { font-size: 12px; color: var(--gray-9); display: flex; gap: 4px; align-items: center; }
main.simple .row.pending .bubble { opacity: 0.6; }
main.simple .empty { opacity: 1; margin: auto; text-align: center; color: var(--gray-10); font-size: 16px; padding-top: 20vh; }
main.simple .round { position: absolute; left: 50%; bottom: calc(var(--composer-height) + 16px); transform: translateX(-50%); width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--gray-1); color: var(--gray-12); box-shadow: var(--shadow-4); border: 0; cursor: pointer; transition: opacity .3s ease-in-out; }
main.simple .round[data-visible="false"] { opacity: 0; pointer-events: none; }
main.simple #dock { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--chat-max-width); margin: 0 auto; padding: 0 32px 32px; background: linear-gradient(to bottom, transparent 20px, var(--color-background) 50%, var(--color-background)); }
main.simple #error { color: #dc2626; font-size: 12px; min-height: 0; padding: 0; }
main.simple #error:not(:empty) { padding: 0 0 8px; }
main.simple #form { display: block; padding: 0; border-top: 0; gap: 0; position: relative; border-radius: 12px; background: var(--gray-1); box-shadow: var(--shadow-4); overflow: hidden; }
main.simple #text { display: block; width: 100%; min-height: 96px; max-height: 220px; padding: 16px 16px 48px; border: 0; outline: 0; resize: none; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 24px; }
main.simple #text::placeholder { color: var(--gray-9); }
main.simple #send { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: var(--gray-12); color: var(--gray-1); cursor: pointer; }
main.simple #send:hover:not(:disabled) { opacity: 0.85; }
main.simple #send:disabled { background: var(--gray-a3); color: var(--gray-8); cursor: default; }
main.simple #suggestions { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; margin-bottom: 8px; }
main.simple #suggestions[hidden] { display: none; }
main.simple .hint { margin: 0; font-size: 12px; color: var(--gray-11); }
main.simple .suggestion { background: var(--gray-2); border-radius: 12px; box-shadow: var(--shadow-4); overflow: hidden; }
main.simple .suggestion-title { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 8px 16px; cursor: pointer; font-weight: 500; }
main.simple .suggestion-title:hover, main.simple .suggestion.open .suggestion-title { background: var(--gray-3); }
main.simple .suggestion-body { padding: 4px 16px 12px; font-size: 14px; overflow-wrap: break-word; }
main.simple .suggestion-body[hidden] { display: none; }
main.simple .suggestion-body p { margin: 8px 0 0; }
main.simple .suggestion-actions { padding-top: 8px; }
main.simple .suggestion-actions button { padding: 4px 12px; border: 0; border-radius: 8px; background: var(--gray-12); color: var(--gray-1); font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gray-8); outline-offset: 1px; }
@media (max-width: 600px) {
main.simple #log { padding: 16px 8px calc(var(--composer-height) + 44px); }
main.simple #dock { padding: 0 8px 12px; }
main.simple .bubble { max-width: 85%; }
}

/* Rules of the full chat page. */
#top #role { flex: 1; font-size: 13px; opacity: 0.7; }
.actions { display: flex; gap: 8px; margin-top: 8px; }
main.split { flex: 1; display: flex; min-height: 0; }
main.notice, section.notice { padding: 24px; max-width: 640px; }
#side { width: 240px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.side-head { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border); }
#who { font-size: 12px; opacity: 0.7; }
#tabs { display: flex; border-bottom: 1px solid var(--border); }
button.tab { flex: 1; background: transparent; color: inherit; border-radius: 0; padding: 8px 4px; font-size: 13px; border-bottom: 2px solid transparent; }
button.tab.current { border-bottom-color: var(--accent); font-weight: 600; }
#chats { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
button.chat { all: unset; cursor: pointer; padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
button.chat.active { background: var(--gray-3); }
button.chat .title { font-weight: 600; }
button.chat .preview { font-size: 12px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 14px; font-size: 13px; opacity: 0.7; }
#pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pane-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; }
.pane-head h1 { font-size: 16px; margin: 0; flex: 1; }
#state { font-size: 12px; opacity: 0.7; }
#log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 70%; padding: 8px 16px; border-radius: 16px; background: var(--gray-3); border: 0; font-size: 16px; line-height: 24px; white-space: pre-wrap; word-break: break-word; }
.msg.mine { align-self: flex-end; background: var(--gray-3); color: var(--gray-12); border-color: transparent; }
.msg.pending { opacity: 0.6; }
.msg.failed { border-color: #dc2626; }
.system { align-self: center; font-size: 12px; opacity: 0.75; padding: 2px 10px; border-radius: 10px; background: var(--gray-3); text-align: center; }
#quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; }
#quick:empty { display: none; }
.msg .who { display: block; font-size: 11px; opacity: 0.7; margin-bottom: 2px; }
form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
input[type="text"], textarea { flex: 1; width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--gray-a3); outline: 0; font: inherit; background: transparent; color: inherit; }
button { padding: 8px 16px; border-radius: 8px; border: 0; background: var(--gray-12); color: var(--gray-1); font: inherit; cursor: pointer; }
button.secondary { background: transparent; color: inherit; border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; }
button:disabled { opacity: 0.5; cursor: default; }
#error, #signin-error { color: #dc2626; padding: 0 16px 8px; min-height: 1em; font-size: 13px; }
.suggestions { border-top: 1px solid var(--border); padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; max-height: 40%; overflow-y: auto; }
.suggestions[hidden] { display: none; }
.suggestions-head { display: flex; align-items: center; gap: 12px; font-size: 12px; opacity: 0.85; }
.suggestions-head input { max-width: 260px; padding: 4px 8px; font-size: 13px; }
.hint { margin: 0; font-size: 12px; opacity: 0.75; }
.suggestion { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-4); border: 0; }
.suggestion-title { all: unset; cursor: pointer; display: block; width: 100%; padding: 8px 12px; font-weight: 600; box-sizing: border-box; }
.suggestion-title:hover, .suggestion.open .suggestion-title { background: var(--gray-3); }
.suggestion-meta { font-size: 11px; opacity: 0.7; font-weight: 400; margin-left: 8px; }
.suggestion-preview { margin: 0; padding: 0 12px 8px; font-size: 13px; opacity: 0.8; }
.suggestion-body { padding: 4px 12px 10px; font-size: 14px; word-break: break-word; }
.suggestion-body[hidden] { display: none; }
.solution-form { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; max-width: 360px; }
.solution-form label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; opacity: 0.9; }
.solution-form input { padding: 6px 8px; font-size: 14px; }
.solution-form button[type=submit] { align-self: flex-start; }
.solution-result { border-left: 3px solid var(--border); padding: 4px 10px; font-size: 14px; }
.solution-result[hidden] { display: none; }
.suggestion-actions { display: flex; gap: 8px; padding-top: 8px; flex-wrap: wrap; }

/* Cards: what a message of the chat shows besides its text (a suggested solution and its form, the outcome of its tool). */
.card { align-self: flex-start; max-width: min(560px, 92%); border: 1px solid var(--border); border-radius: 12px; background: var(--gray-2); overflow: hidden; }
.card-head { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; padding: 8px 12px; font-weight: 600; }
.card-head:hover { background: var(--gray-3); }
.card-head:focus-visible { outline: 2px solid var(--gray-12); outline-offset: -2px; }
.card-chevron::before { content: '\25BE'; display: inline-block; transition: transform 0.15s; }
.card.collapsed .card-chevron::before { transform: rotate(-90deg); }
.card-body { padding: 0 12px 10px; font-size: 14px; word-break: break-word; }
.card.collapsed .card-body { display: none; }
.card-answer { padding-top: 2px; }
.card-actions { display: flex; gap: 8px; padding-top: 10px; flex-wrap: wrap; }
.card.result { padding: 8px 12px; border-left: 3px solid var(--gray-8); background: var(--gray-3); }
.card.result.status-not_found, .card.result.status-not_eligible, .card.result.status-unavailable, .card.result.status-review { border-left-color: #b45309; background: var(--gray-3); }
.card.result .card-actions { padding-top: 8px; }
.card .solution-form { padding-top: 10px; }

/* MCP Apps: the interfaces of the tools of the suggested solutions, drawn in sandboxed frames. */
.mcp-app { display: block; width: 100%; border: 0; height: 40px; background: transparent; }
.agent-entry { align-self: flex-start; max-width: min(560px, 92%); border: 1px solid var(--border); border-radius: 12px; padding: 6px 12px; background: var(--gray-2); }
.agent-entry .agent-title { font-weight: 600; font-size: 13px; padding-bottom: 4px; }
.agent-entry.call { font-size: 12px; opacity: 0.8; background: transparent; border-style: dashed; }
.agent-entry.result { border-left: 3px solid var(--gray-8); background: var(--gray-3); }
.agent-entry.result.handoff { border-left-color: #b45309; background: var(--gray-3); }

/* A link that looks like a button (sign-in with OpenID Connect). */
a.button { display: inline-block; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); text-decoration: none; color: inherit; font-size: 14px; }

/* The full chat (/chat): sidebar and pane in the same gray scale. */
:root { --accent: var(--gray-12); --border: var(--gray-a3); }
#shell { width: 100%; }
#top #role { flex: 1; font-size: 13px; color: var(--gray-11); }
.system { color: var(--gray-11); }
button.secondary { background: transparent; color: var(--gray-12); border: 1px solid var(--gray-6); }
button.secondary:hover:not(:disabled) { background: var(--gray-3); }
#side { background: var(--gray-2); }
.pane-head { border-bottom-color: var(--gray-a3); }
.msg .who { color: var(--gray-11); }