html, body {
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Global keyboard-focus indicator. Applies on Tab / arrow / programmatic
focus but NOT on plain mouse clicks (`:focus-visible` heuristic). Pinned
to blue-600 so it matches the per-component `focus:ring-blue-500` already
used in `notify_dropdown.html`, `sidebar.html`, and `own_avatar_oob.html`.
Those three elements keep their custom ring: their `focus:outline-none`
utility has higher specificity than this selector and wins. */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
border-radius: 2px;
}
#main {
height: 100vh;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
/* Message body rendered as markdown.
*
* `whitespace-pre-wrap` is intentionally not applied at the container level
* because pulldown_cmark already emits explicit `
` for newlines (we map
* SoftBreak -> HardBreak server-side). The rules below restore minimal
* typography for elements Tailwind's preflight strips. Single-paragraph
* messages (the common case) render with no extra vertical margin so the
* row height matches what plain-text rendering used to produce. */
.lc-md > p {
margin: 0;
}
.lc-md > p + p,
.lc-md > * + * {
margin-top: 0.5rem;
}
.lc-md strong { font-weight: 600; }
.lc-md em { font-style: italic; }
.lc-md del { text-decoration: line-through; color: #64748b; }
.lc-md a { color: #2563eb; }
.lc-md a:hover { text-decoration: underline; }
.lc-md ul, .lc-md ol { padding-left: 1.5rem; margin: 0.25rem 0; }
.lc-md ul { list-style: disc; }
.lc-md ol { list-style: decimal; }
.lc-md li { margin: 0.125rem 0; }
.lc-md blockquote {
border-left: 3px solid #cbd5e1;
padding: 0.125rem 0.75rem;
margin: 0.25rem 0;
color: #475569;
}
.lc-md h1, .lc-md h2, .lc-md h3, .lc-md h4, .lc-md h5, .lc-md h6 {
font-weight: 700;
margin: 0.5rem 0 0.25rem;
line-height: 1.25;
}
.lc-md h1 { font-size: 1.25rem; }
.lc-md h2 { font-size: 1.15rem; }
.lc-md h3 { font-size: 1.05rem; }
.lc-md h4, .lc-md h5, .lc-md h6 { font-size: 1rem; }
.lc-md table { border-collapse: collapse; margin: 0.25rem 0; }
.lc-md th, .lc-md td {
border: 1px solid #e2e8f0;
padding: 0.25rem 0.5rem;
}
.lc-md th { background: #f1f5f9; font-weight: 600; }
.lc-md hr {
border: none;
border-top: 1px solid #e2e8f0;
margin: 0.5rem 0;
}
.lc-md-code,
.lc-md code:not(pre code) {
background: #f1f5f9;
color: #0f172a;
padding: 0.05rem 0.3rem;
border-radius: 0.25rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9em;
}
.lc-md pre {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
margin: 0.25rem 0;
overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.85em;
line-height: 1.4;
/* syntect emits inline `background-color` on the ; override so the
app's neutral surface wins. The token colours inside still apply. */
background-color: #f8fafc !important;
}
.lc-md pre code { background: transparent; padding: 0; }
/* Quote-reply UI.
*
* The chip is rendered inline above a message body to show the message it
* is responding to. A separate "reply bar" variant lives inside the
* composer; both share the same color palette but the in-message chip is
* compact and clickable while the composer bar adds an "x" to cancel.
*/
.lc-quote-chip {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
padding: 0.25rem 0.5rem;
border-left: 3px solid #cbd5e1;
background: #f8fafc;
border-radius: 0.25rem;
font-size: 0.85em;
color: #475569;
text-decoration: none;
max-width: 100%;
}
.lc-quote-chip:hover {
background: #f1f5f9;
}
.lc-quote-author {
font-weight: 600;
color: #1e293b;
white-space: nowrap;
}
.lc-quote-excerpt {
color: #475569;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.lc-quote-deleted {
font-style: italic;
color: #94a3b8;
}
.lc-quote-bar {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
padding: 0.25rem 0.5rem;
border-left: 3px solid #2563eb;
background: #eff6ff;
border-radius: 0.25rem;
font-size: 0.8em;
color: #1e293b;
}
.lc-quote-bar-inner {
display: flex;
gap: 0.4rem;
overflow: hidden;
align-items: baseline;
min-width: 0;
flex: 1;
}
.lc-quote-bar-label {
color: #64748b;
}
.lc-quote-bar-author {
font-weight: 600;
white-space: nowrap;
}
.lc-quote-bar-excerpt {
color: #475569;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lc-quote-bar-clear {
color: #64748b;
padding: 0 0.25rem;
line-height: 1;
}
.lc-quote-bar-clear:hover {
color: #1e293b;
}
/* Voice-message player (partials/attachment.html). Wired by the voice IIFE
in layout.html. */
.lc-voice {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background: #fff;
}
.lc-voice-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
background: #2563eb;
color: #fff;
flex: none;
}
.lc-voice-play:hover {
background: #1d4ed8;
}
/* Brief buffering state between the play click and canplaythrough. */
.lc-voice[data-loading] .lc-voice-play {
opacity: 0.5;
cursor: progress;
}
.lc-voice-play svg {
width: 1.1rem;
height: 1.1rem;
}
/* Play / pause icon swap is driven by the [data-playing] attribute the IIFE
toggles on the container. */
.lc-voice-icon-pause {
display: none;
}
.lc-voice[data-playing] .lc-voice-icon-play {
display: none;
}
.lc-voice[data-playing] .lc-voice-icon-pause {
display: inline;
}
.lc-voice-wave {
width: 320px;
max-width: 50vw;
height: 40px;
cursor: pointer;
}
.lc-voice-time {
font-size: 0.75rem;
color: #64748b;
font-variant-numeric: tabular-nums;
flex: none;
}