:root { color-scheme: dark; --accent: #76ff82; --accent-rgb: 118,255,130; --bg: #07100b; --panel: #101e17; --raised: #192b21; --ink: #d8efdf; --muted: #a0b3aa; --border: #304a3b; --error: #ffb4ab; --secondary: #86d9cd; font-family: ui-monospace, Consolas, monospace; }
body[data-palette="amber"] { --accent: #ffce73; --accent-rgb:255,206,115; }
body[data-palette="cyan"] { --accent: #86e4ef; --accent-rgb:134,228,239; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; background: var(--bg); color: var(--ink); height: 100dvh; overflow: hidden; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.app-bar { height: 60px; padding: 0 18px; display: flex; align-items: center; gap: 18px; background: var(--panel); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.brand img { width: 36px; height: 36px; object-fit: contain; image-rendering: auto; }
.connection { color: var(--muted); font-size: 12px; margin-left: auto; }
.connection.online { color: var(--secondary); }
nav { display: flex; gap: 4px; }
.icon-button { background: transparent; color: var(--ink); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 4px; flex-shrink: 0; }
.icon-button:hover { background: var(--raised); border-color: var(--border); color: var(--accent); }
.icon-button svg, .command svg, .primary svg { width: 20px; height: 20px; flex-shrink: 0; }
#conversejs { position: absolute; inset: 60px 0 0; height: calc(100dvh - 60px); }
#boot { position: fixed; inset: 60px 0 0; display: grid; place-content: center; justify-items: center; gap: 18px; font-size: 24px; color: var(--accent); z-index: 12; background: var(--bg); }
#boot img { width: 108px; height: 108px; }
#boot[hidden], [hidden] { display: none !important; }
#toast { position: fixed; bottom: max(24px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 14px 18px; border: 1px solid var(--border); background: var(--raised); z-index: 1100; max-width: min(520px,calc(100vw - 32px)); width: max-content; line-height: 1.5; border-radius: 4px; }
dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: 6px; width: min(420px,calc(100vw - 32px)); padding: 22px; max-height: calc(100dvh - 48px); overflow: auto; }
dialog::backdrop { background: #000a; }
dialog header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
dialog label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
dialog input, dialog select { display: block; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--border); min-height: 46px; padding: 10px 12px; border-radius: 3px; }
.primary, .command { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 3px; min-height: 46px; padding: 12px; width: 100%; border: 1px solid var(--border); white-space: normal; line-height: 1.4; }
.primary { background: var(--accent); color: var(--bg); font-weight: 600; margin-top: 16px; border-color: var(--accent); }
.command { margin-top: 14px; background: var(--bg); color: var(--ink); justify-content: start; text-align: left; }
.command:hover { border-color: var(--accent); }
.error { color: var(--error); font-size: 13px; line-height: 1.5; margin: 12px 0; }
.error:empty { display: none; }
.version { color: var(--muted); font-size: 11px; margin-top: 24px; }
.voice-time { font-size: 36px; color: var(--accent); text-align: center; margin: 24px 0; }
#voice-preview { width: 100%; margin: 12px 0; }
#conversejs .telekrol-voice-player { width: 320px; max-width: calc(100vw - 110px); height: 54px; }
#conversejs .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
#conversejs .alert-info { background: var(--raised); color: var(--ink); border-color: var(--border); }

/* Converse owns the protocol and chat views; these variables theme its supported UI. */
#conversejs.conversejs, #conversejs, .conversejs-bg, #conversejs-bg {
 --normal-font: ui-monospace,Consolas,monospace; --heading-font: ui-monospace,Consolas,monospace; --branding-font: ui-monospace,Consolas,monospace;
 --foreground-color: var(--ink); --background-color: var(--bg); --background-color-rgb: 7,16,11;
 --global-background-color: var(--bg); --controlbox-color: var(--secondary); --controlbox-width: 290px;
 --primary-color: var(--accent) !important; --primary-rgb: var(--accent-rgb); --secondary-color: var(--secondary) !important;
 --converse-body-bg: var(--bg); --converse-body-color: var(--ink) !important; --converse-body-font-family: ui-monospace,Consolas,monospace;
 --converse-primary: var(--accent); --converse-primary-rgb: var(--accent-rgb); --converse-secondary: var(--secondary);
 --converse-border-color: var(--border); --converse-border-radius: 4px;
 --chat-color: var(--accent); --chat-rgb: var(--accent-rgb); --chat-header-fg-color: var(--ink); --chat-header-bg-color: var(--panel);
 --muc-color: var(--secondary); --muc-header-fg-color: var(--ink); --muc-header-bg-color: var(--panel);
 --heading-color: var(--ink); --link-color: var(--secondary); --link-color-hover: var(--accent); --converse-link-color: var(--secondary) !important;
 --highlight-color: var(--raised); --highlight-color-hover: var(--raised); --focus-color: var(--accent); --subdued-color: var(--muted);
 --error-color: var(--error); --danger-color: var(--error); --disabled-color: var(--muted);
 --message-text-color: var(--ink); --text-color: var(--ink); --font-size: 14px; --message-font-size: 15px; --line-height: 21px;
 --avatar-border-radius: 4px; --button-border-radius: 4px; --chatbox-border-radius: 0;
 --fullpage-chat-height: calc(100dvh - 60px); --fullpage-chat-width: 100%; --raised-el-shadow: none;
}
#conversejs .btn { border-radius: 4px; min-height: 40px; box-shadow: none; }
#conversejs .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
#conversejs .form-control, #conversejs .form-select { background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 3px; min-height: 46px; }
#conversejs .form-control:focus { background: var(--bg); color: var(--ink); border-color: var(--accent); box-shadow: none; }
#conversejs .form-label { color: var(--muted); }
#conversejs .controlbox-pane { background: var(--bg); }
#conversejs .chat-head { border-bottom: 1px solid var(--border); }
#conversejs .chat-content { background: var(--bg); }
#conversejs .chat-textarea { background: var(--panel); color: var(--ink); }
#conversejs .chat-toolbar { background: var(--panel); border-color: var(--border); }
#conversejs .modal-content { background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: 6px; }
#conversejs .modal-header, #conversejs .modal-footer { border-color: var(--border); }
#conversejs converse-brand-heading { display: block; margin-bottom: 22px; }
#conversejs converse-brand-heading::before { content: ''; display: block; width: 96px; height: 96px; background: url('./assets/logo.png') center/contain no-repeat; margin: 0 auto 16px; }
#conversejs converse-brand-heading::after { content: 'TeleKrol'; display: block; text-align: center; color: var(--accent); font-size: 24px; font-weight: 600; }
#conversejs converse-brand-logo, #conversejs converse-footer { display: none; }
#conversejs .input-group .addon { display: none; }
#conversejs .logged-out .controlbox-pane { max-width: 430px; margin-inline: auto; padding: 24px; }
#conversejs .logged-out .btn { width: 100%; }
#conversejs .registration-form .instructions { display: none; }
@media(max-width:600px) {
 .app-bar { padding-inline: 10px; gap: 8px; } .brand { font-size: 17px; gap: 6px; } .brand img { width: 30px; height: 30px; }
 .connection { font-size: 10px; max-width: 76px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .icon-button { width: 38px; height: 42px; } nav { gap: 0; }
 #conversejs .logged-out .controlbox-pane { padding: 18px; } dialog { padding: 18px; }
}
@media(prefers-reduced-motion:no-preference) { button { transition: background-color .12s,border-color .12s; } dialog[open] { animation: enter .12s ease-out; } }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.app-bar { position: relative; z-index: 1040; }
#messenger { position: fixed; inset: 60px 0 0; }
#conversejs { position: absolute; inset: 0; height: 100%; width: 100%; }
#boot { z-index: 1100; }
#conversejs #controlbox.logged-out .controlbox-pane { width: min(430px,100%); padding: 24px; height: 100%; justify-content: center !important; gap: 18px; }
#conversejs #controlbox converse-login-form, #conversejs #controlbox converse-registration-form { width: 100% !important; margin: 0; padding: 0; }
#conversejs #controlbox converse-controlbox-navbar, #conversejs #controlbox converse-controlbox-buttons, #conversejs #controlbox converse-footer { display: none !important; }
#conversejs #controlbox converse-brand-logo { display: block; width: 100%; margin: 0; padding: 0; }
#conversejs #controlbox converse-brand-logo > a { display: none; }
#conversejs #controlbox converse-brand-logo::before { content: ''; display: block; width: 96px; height: 96px; background: url('./assets/logo.png') center/contain no-repeat; margin: 0 auto 16px; }
#conversejs #controlbox converse-brand-logo::after { content: 'TeleKrol'; display: block; text-align: center; color: var(--accent); font-size: 24px; font-weight: 600; }
#conversejs #controlbox .logged-out .input-group input { border-radius: 3px; }