:root {
--ink: #172033;
--muted: #667085;
--line: #e4e7ec;
--accent: #2563eb;
--bg: #f7f8fa;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
color: var(--ink);
font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--bg);
}

main {
max-width: 760px;
margin: 0 auto;
padding: 24px 16px;
}

h1 {
margin: 0 0 4px;
font-size: 22px;
}

p.lead {
margin: 0 0 24px;
color: var(--muted);
}

.card {
padding: 20px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
}

label {
display: block;
margin: 16px 0 6px;
font-weight: 600;
}

input[type='password'],
select,
textarea {
width: 100%;
padding: 10px 12px;
font: inherit;
border: 1px solid var(--line);
border-radius: 8px;
}

button,
a.button {
display: inline-block;
margin-top: 16px;
padding: 10px 18px;
color: #fff;
font: inherit;
font-weight: 600;
text-decoration: none;
background: var(--accent);
border: 0;
border-radius: 8px;
cursor: pointer;
}

button.secondary,
a.secondary {
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
}

button:disabled {
cursor: not-allowed;
opacity: 0.5;
}

.notice {
margin-top: 16px;
padding: 12px 14px;
background: #eff4ff;
border-radius: 8px;
}

.notice {
white-space: pre-line;
}

.notice.error {
color: #b42318;
background: #fef3f2;
}

.notice.ok {
color: #067647;
background: #ecfdf3;
}

#keyLink {
display: inline-block;
margin-top: 6px;
font-size: 14px;
}

details {
margin-top: 10px;
color: var(--muted);
font-size: 14px;
}

details pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}

.hidden {
display: none !important;
}

#log {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 50vh;
padding-bottom: 16px;
}

.bubble {
max-width: 85%;
padding: 10px 14px;
white-space: pre-wrap;
overflow-wrap: anywhere;
border-radius: 14px;
}

.bubble.user {
align-self: flex-end;
color: #fff;
background: var(--accent);
}

.bubble.assistant {
align-self: flex-start;
background: #fff;
border: 1px solid var(--line);
}

.bubble.change pre {
margin: 8px 0;
padding: 8px;
font-size: 13px;
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #f6f7f9;
border-radius: 8px;
}

.bubble.change button {
margin: 0 8px 0 0;
padding: 6px 14px;
}

label.check {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 14px;
font-weight: 400;
}

label.check input {
width: auto;
margin-top: 3px;
}

.bubble.system {
align-self: center;
color: var(--muted);
font-size: 14px;
}

form.composer {
position: sticky;
bottom: 0;
display: flex;
gap: 8px;
padding: 12px 0;
background: var(--bg);
}

form.composer textarea {
height: 48px;
resize: none;
}

form.composer button {
margin-top: 0;
}

h2 {
margin: 0 0 4px;
font-size: 18px;
}

dl.facts {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 16px;
margin: 0 0 8px;
}

dl.facts dt {
color: var(--muted);
}

dl.facts dd {
margin: 0;
overflow-wrap: anywhere;
}

dl.facts dd button.small {
margin: 0 0 0 8px;
}

pre.code {
margin: 0;
padding: 10px 12px;
font-size: 13px;
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #f6f7f9;
border-radius: 8px;
}

input.text {
width: 100%;
padding: 10px 12px;
font: inherit;
border: 1px solid var(--line);
border-radius: 8px;
}

.row {
display: flex;
gap: 8px;
align-items: center;
}

.row.pair {
margin-top: 8px;
}

.row.pair code {
flex: 0 0 auto;
min-width: 90px;
font-size: 13px;
}

button.small {
margin-top: 8px;
padding: 6px 12px;
font-size: 14px;
}

.row button.small {
margin-top: 0;
}

small.hint {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 13px;
}

ul.documents li span button {
margin-left: 8px;
}

ul.documents {
margin: 16px 0 0;
padding: 0;
list-style: none;
}

ul.documents li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-top: 1px solid var(--line);
}

ul.documents small {
color: var(--muted);
}


body.chat {
--brand: #12adee;
--brand-dark: #0e9ad6;

display: flex;
align-items: center;
justify-content: center;
height: 100vh;
height: 100dvh;
color: rgba(0, 0, 0, 85%);
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
background: #f0f2f5;
}

body.chat ::selection {
background: rgba(18, 173, 238, 20%);
}

.chat-app {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
}
@media (min-width: 560px) {
.chat-app {
width: 480px;
height: min(760px, calc(100dvh - 48px));
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 20%);
}
}

.chat-header {
position: relative;
z-index: 1;
display: flex;
flex: none;
gap: 10px;
align-items: center;
padding: 12px 16px;
color: #fff;
background: var(--brand);
box-shadow: 0 2px 8px rgba(0, 0, 0, 15%);
}

.chat-header h1 {
margin: 0;
font-weight: 700;
font-size: 18px;
line-height: 1.3;
overflow-wrap: anywhere;
}

.avatar {
flex: none;
width: 40px;
height: 40px;
object-fit: cover;
background: var(--brand);
border-radius: 50%;
}

.chat-header .avatar {
width: 28px;
height: 28px;
}

span.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
}

span.avatar svg {
width: 18px;
height: 18px;
fill: currentcolor;
}

body.chat main.chat-main {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
max-width: none;
margin: 0;
padding: 16px;
overflow-y: auto;
background: #fafafa;
}

body.chat main.chat-main::-webkit-scrollbar {
width: 8px;
}

body.chat main.chat-main::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 8px;
}

body.chat #log {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
padding: 0;
}

.msg {
display: flex;
gap: 8px;
align-items: flex-start;
}

.msg.user {
justify-content: flex-end;
}

.msg.system {
justify-content: center;
}

body.chat .bubble {
max-width: 78%;
padding: 10px 14px;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 5%);
}

body.chat .msg.assistant .bubble {
margin-top: 2px;
}

body.chat .bubble.user {
color: #fff;
background: var(--brand);
border-bottom-right-radius: 4px;
}

body.chat .bubble.assistant {
color: rgba(0, 0, 0, 85%);
background: #fff;
border: 1px solid rgba(0, 0, 0, 5%);
border-bottom-left-radius: 4px;
}

body.chat .bubble.system {
max-width: 90%;
padding: 8px 12px;
color: rgba(0, 0, 0, 55%);
font-size: 13px;
text-align: center;
background: #fff;
border: 1px solid rgba(0, 0, 0, 6%);
box-shadow: none;
}

body.chat .bubble.typing {
color: rgba(0, 0, 0, 45%);
}

body.chat .bubble.change button {
background: var(--brand);
}

body.chat .bubble.change button.secondary {
color: rgba(0, 0, 0, 85%);
background: #fff;
border: 1px solid #d9d9d9;
}

.chat-footer {
flex: none;
padding: 12px;
background: #fff;
border-top: 1px solid #f0f0f0;
}

body.chat form.composer {
position: static;
display: flex;
gap: 8px;
align-items: flex-end;
padding: 0;
background: transparent;
}

body.chat form.composer textarea {
flex: 1;
height: 32px;
min-height: 32px;
max-height: 96px;
padding: 4px 11px;
color: rgba(0, 0, 0, 85%);
font: inherit;
line-height: 1.5715;
border: 1px solid #d9d9d9;
border-radius: 6px;
outline: 0;
transition: border-color 0.2s;
resize: none;
}

body.chat form.composer textarea::placeholder {
color: #bfbfbf;
}

body.chat form.composer textarea:hover,
body.chat form.composer textarea:focus {
border-color: #b0b0b0;
}

body.chat form.composer button {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
background: var(--brand);
border: 1px solid transparent;
border-radius: 6px;
transition: background-color 0.2s;
}

body.chat form.composer button:hover:not(:disabled) {
background: var(--brand-dark);
}

body.chat form.composer button:disabled {
background: #f5f5f5;
border-color: #d9d9d9;
opacity: 1;
}

body.chat form.composer button:disabled svg {
fill: rgba(0, 0, 0, 25%);
}

body.chat form.composer button svg {
width: 14px;
height: 14px;
fill: #fff;
}

body.chat button:focus-visible,
body.chat a.button:focus-visible {
outline: 2px solid var(--brand-dark);
outline-offset: 2px;
}

body.chat #gate {
max-width: 380px;
margin: auto;
text-align: center;
border-color: #f0f0f0;
}

body.chat #gate .notice {
margin-top: 0;
background: #fafafa;
}

body.chat #gate a.button {
background: var(--brand);
}