html, body { margin: 0; padding: 0; height: 100%; }
* { box-sizing: border-box; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--color-neutral-800); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
@keyframes blip { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }
textarea, input, select, button { font-family: inherit; }
.sidebar-item { transition: background 0.12s ease, color 0.12s ease; }
.sidebar-item:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-neutral-100); }
.account-btn { transition: background 0.12s ease; }
.account-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.msg-row { transition: background 0.12s ease; }
.msg-row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.msg-actions { opacity: 0; transition: opacity 0.1s linear; }
.msg-row:hover .msg-actions { opacity: 1; }
/* Shift held -- delete skips the confirm() dialog, so its hover state
   previews that as an immediate-danger red instead of the usual ghost tint. */
.btn-delete { transition: background 0.1s ease, color 0.1s ease; }
body.shift-down .btn-delete:hover { background: oklch(0.6 0.18 25); color: white; }
.send-btn { transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.send-btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.composer-box { transition: border-color 0.12s ease; }
.composer-box:focus-within { border-color: var(--color-accent); }
.msg-enter { animation: pop 0.18s ease-out; }
#app { display: none; }
body.ready #app { display: flex; }