@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");

:root { --brown:#5b2b08; --deep-brown:#3d1c05; --yellow:#f7df79; --ochre:#b96800; --cream:#fbf7e9; --paper:#fffdf7; --green:#087459; --border:#ead7ae; --muted:#76563c; }
.compact-ui { font-size:62.5%; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { display:flex; min-height:100vh; margin:0; flex-direction:column; color:var(--brown); background:radial-gradient(circle at 88% 10%,#fff4c9 0,transparent 30rem),var(--cream); font-family:Nunito,system-ui,sans-serif; }
.chat-page { height:100vh; overflow:hidden; }
.site-header { display:flex; align-items:center; gap:1.25rem; min-height:5.5rem; padding:.8rem clamp(1rem,3vw,3rem); background:var(--yellow); border-bottom:1px solid rgba(185,104,0,.25); box-shadow:0 4px 18px rgba(110,49,0,.12); }
.brand { display:flex; align-items:center; gap:.8rem; color:#6e3100; font-size:clamp(1.45rem,2.4vw,2.05rem); font-weight:900; letter-spacing:-.035em; text-decoration:none; }
.brand img { width:3.4rem; height:3.4rem; border:2px solid rgba(255,255,255,.7); border-radius:.9rem; object-fit:cover; box-shadow:0 5px 14px rgba(5,55,45,.24); }
.header-nav { display:flex; align-items:center; gap:.35rem; margin-left:auto; }.header-nav a { padding:.55rem .75rem; color:#6e3100; border-radius:.65rem; font-size:1.02rem; font-weight:800; text-decoration:none; }.header-nav a:hover { background:rgba(185,104,0,.13); }.identity-pill { min-width:0; max-width:19rem; min-height:2.7rem; padding:.55rem .85rem; overflow:hidden; color:#6e3100; text-overflow:ellipsis; white-space:nowrap; background:rgba(255,255,255,.32); border:1px solid rgba(110,49,0,.25); border-radius:.7rem; font:inherit; font-size:.98rem; font-weight:800; cursor:pointer; }.identity-pill[data-state="connected"] { background:rgba(255,253,247,.58); border-color:rgba(110,49,0,.32); }.identity-pill[data-state="pending"] { opacity:.8; }
main { width:min(100% - 2rem, 48rem); margin:0 auto; padding:clamp(3rem,8vw,6.5rem) 0 3rem; }
.chat-shell { display:grid; width:100%; min-height:0; height:calc(100vh - 5.5rem); flex:1; grid-template-columns:minmax(17rem,21rem) minmax(0,1fr); }
.chat-page main { width:100%; padding:2.25rem 0 0; }
.chat-authenticated main { padding-top:0; }
.chat-authenticated main,.chat-authenticated .room-card { min-height:0; height:100%; }.chat-authenticated .room-card { display:flex; flex-direction:column; }.chat-authenticated .timeline { min-height:0; max-height:none; flex:1; }
.chat-page .room-card > h2,.chat-page .room-card > #room-description { text-align:left; }
.chat-page .hero,
.chat-page .sign-in-card { width:min(100% - 2rem,48rem); margin-right:auto; margin-left:auto; }
.chat-authenticated .hero { display:none; }
.chat-page .room-card { margin-top:0; }
#room-description { white-space:pre-line; }
.room-participants { display:flex; flex-wrap:wrap; gap:.35rem; padding:0 1.5rem .85rem; text-align:left; }.room-participants[hidden] { display:none; }.participant-count { padding:.22rem .5rem; color:#527069; background:#edf4f1; border:1px solid #d1e1dc; border-radius:999px; font-size:.68rem; font-weight:800; font-variant-numeric:tabular-nums; }
.chat-composer { grid-template-columns:minmax(0,1fr) 2.75rem 3rem; }
.composer-expiry,.composer-expiry select { width:2.75rem; }
.composer-send { align-self:end; min-width:3rem; height:2.35rem; padding:0 .45rem; color:#fff; background:#2f8876; border:0; border-radius:.7rem; font:inherit; font-size:.72rem; font-weight:900; }.composer-send:disabled { color:#879b96; background:#edf2f0; }
.chat-sidebar { position:sticky; top:5.5rem; display:flex; height:calc(100vh - 5.5rem); flex-direction:column; }.sidebar-build { margin:auto .8rem 0; padding:1rem 0 .2rem; color:#9daca8; font-size:.58rem; font-variant-numeric:tabular-nums; letter-spacing:.02em; opacity:.55; text-align:center; }
.chat-page .chat-sidebar { margin-top:0; padding-top:0; }
.chat-sidebar { position:relative; z-index:1; padding:1.5rem 1rem; background:#fff; border-right:1px solid #d9e5e1; box-shadow:4px 0 18px rgba(29,77,67,.06); }.chat-search { display:block; margin-bottom:1rem; }.chat-search input { width:100%; padding:.78rem 1rem; color:#28443d; background:#f4f2ee; border:1px solid #d6dfdc; border-radius:999px; font-size:.95rem; }.chat-search input:focus { outline:3px solid rgba(19,166,130,.16); border-color:#2f8876; }.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.room-list { display:grid; gap:.35rem; }.room-item { display:flex; align-items:center; gap:.75rem; min-height:4.25rem; padding:.65rem .8rem; color:#29443e; border-radius:.8rem; font-size:1.05rem; font-weight:900; text-decoration:none; }.room-item:hover { color:#29443e; background:#eef5f2; }.room-item.selected { color:white; background:#2f8876; }.room-avatar { display:grid; width:2.75rem; height:2.75rem; flex:0 0 2.75rem; place-items:center; color:white; background:#229ed9; border:2px solid rgba(255,255,255,.75); border-radius:50%; font-size:.9rem; box-shadow:0 1px 4px rgba(25,74,64,.2); }.meta-avatar { background:#b96800; }.test-avatar { background:#7b68ad; }.room-item[hidden] { display:none; }
.hero { max-width:42rem; margin-bottom:2.4rem; text-align:center; }.eyebrow,.step { margin:0 0 .4rem; color:var(--ochre); font-size:.76rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }.hero h1 { max-width:12ch; margin:0 auto; color:var(--deep-brown); font-size:clamp(2.6rem,8vw,4.7rem); line-height:.98; letter-spacing:-.065em; }.lede { max-width:38rem; margin:1.25rem auto 0; color:var(--muted); font-size:1.12rem; }
.sign-in-card { padding:clamp(1.4rem,5vw,2.5rem); background:var(--paper); border:1px solid var(--border); border-radius:1.4rem; box-shadow:0 18px 48px rgba(91,43,8,.12); }.card-heading { display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; }.badge { display:grid; flex:0 0 auto; place-items:center; width:3.1rem; height:3.1rem; color:var(--paper); background:var(--green); border-radius:.9rem; font-size:1.45rem; }.card-heading h2 { margin:0; color:var(--deep-brown); font-size:clamp(1.4rem,4vw,2rem); line-height:1.05; letter-spacing:-.04em; }
label { display:block; margin-bottom:.45rem; font-size:.92rem; font-weight:900; }.input-row { display:flex; gap:.65rem; } input { min-width:0; flex:1; padding:.82rem .95rem; color:var(--deep-brown); background:#fffefa; border:1px solid #cbb890; border-radius:.65rem; font:inherit; font-size:1rem; } input:focus { outline:3px solid rgba(8,116,89,.2); border-color:var(--green); }.primary { padding:.8rem 1.15rem; color:white; background:var(--green); border:0; border-radius:.65rem; font:inherit; font-weight:900; cursor:pointer; }.primary:hover { background:#065e48; }.field-help { margin:.6rem 0 0; color:var(--muted); font-size:.86rem; }.or { display:flex; align-items:center; gap:.75rem; margin:1.8rem 0 1rem; color:#8b7258; font-size:.8rem; font-weight:800; }.or::before,.or::after { height:1px; flex:1; background:var(--border); content:""; }.or span { white-space:nowrap; }
.signer-options { display:grid; gap:.7rem; }.signer-button { display:flex; align-items:center; gap:.8rem; width:100%; padding:.8rem; color:var(--brown); background:#fffaf0; border:1px solid var(--border); border-radius:.8rem; text-align:left; font:inherit; cursor:pointer; }.signer-button:hover { border-color:var(--ochre); background:#fff5d7; }.signer-button:disabled { opacity:.6; cursor:wait; }.signer-icon { display:grid; flex:0 0 auto; place-items:center; width:2.4rem; height:2.4rem; color:var(--green); background:#dff1e8; border-radius:.6rem; font-size:1.25rem; font-weight:900; }.signer-button strong,.signer-button small { display:block; }.signer-button small { margin-top:.05rem; color:var(--muted); font-size:.78rem; }.arrow { margin-left:auto; color:var(--ochre); font-size:1.35rem; }.status { min-height:1.5rem; margin:1.35rem 0 0; color:var(--muted); font-size:.92rem; }.status.error { color:#a5261c; }.status.success { color:var(--green); font-weight:800; }.result { margin-top:1.1rem; padding:1rem; background:#e8f4eb; border:1px solid #b8ddc1; border-radius:.8rem; }.result-label { margin:0 0 .3rem; color:var(--green); font-size:.76rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.result code { display:block; overflow-wrap:anywhere; color:#064d3c; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.92rem; font-weight:800; }.result-copy { margin:.65rem 0 0; color:#45685b; font-size:.84rem; }
.setup-link { margin:.85rem 0 0; color:var(--muted); font-size:.84rem; }.setup-link a { color:var(--green); font-weight:900; }
.notes { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.2rem; }.notes div { padding:1rem; }.notes strong,.notes span { display:block; }.notes strong { margin-bottom:.35rem; color:var(--deep-brown); }.notes span { color:var(--muted); font-size:.87rem; }.notes a { color:var(--green); font-weight:800; } footer { display:flex; justify-content:space-between; gap:1rem; width:min(100% - 2rem,48rem); margin:0 auto; padding:1.4rem 0 2rem; color:var(--muted); font-size:.88rem; } footer a { color:var(--green); font-weight:800; text-decoration:none; }
.about-link { margin:1.5rem 0 0; color:var(--muted); text-align:center; }.about-link a { color:var(--green); font-weight:800; }
.chat-footer { display:block; margin-top:auto; padding:1.25rem 0 2rem; border-top:1px solid var(--border); text-align:center; }.chat-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 2rem; }.chat-footer a { color:var(--green); font-size:.88rem; font-weight:800; text-decoration:none; }.chat-footer a:hover { color:var(--deep-brown); text-decoration:underline; text-underline-offset:.2em; }.footer-build { display:block; margin-top:.7rem; color:#8a7463; font-size:.76rem; font-variant-numeric:tabular-nums; }
.room-card { margin-top:1.25rem; padding:0; overflow:hidden; text-align:center; background:#fff; border:1px solid #c8dce7; border-radius:1.2rem; box-shadow:0 18px 48px rgba(40,82,105,.14); }.chat-page .room-card { width:100%; border-right:0; border-left:0; border-radius:0; box-shadow:0 -8px 30px rgba(40,82,105,.1); }.room-card > .result-label { margin:0; padding:1.15rem 1.5rem .2rem; color:#229ed9; }.room-card h2 { margin:0; padding:0 1.5rem; color:#19384a; font-size:clamp(1.45rem,4vw,2rem); overflow-wrap:anywhere; }.room-card > p:not(.result-label):not(.result-copy):not(.timeline-status) { margin:.45rem 0 0; padding:0 1.5rem 1rem; color:#66808f; }.room-link { display:inline-block; margin:0 0 1.1rem; padding:.75rem 1.15rem; text-decoration:none; background:#229ed9; }.room-link:hover { background:#168ac1; }.room-card .result-copy { margin:0; padding:0 1rem 1.1rem; color:#718895; font-size:.8rem; }
.timeline-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0; padding:.8rem clamp(1rem,3vw,2.5rem); color:#466979; background:#fbfcfb; border-top:1px solid #d8e7ee; border-bottom:1px solid #d8e7ee; text-align:left; }.timeline-heading h3 { margin:0; color:#31586b; font-size:.9rem; }.timeline-heading button { padding:.35rem .65rem; color:#2f8876; background:white; border:1px solid #c8dfda; border-radius:1rem; font:inherit; font-size:.78rem; font-weight:900; cursor:pointer; }.timeline-status { margin:0; padding:.65rem clamp(1rem,3vw,2.5rem); color:#587382; background:#f5f7f6; text-align:left; font-size:.84rem; }.timeline-status:empty { display:none; }.timeline-status.error { color:#a5261c; }.timeline { display:flex; min-height:22rem; max-height:65vh; margin:0; padding:1.1rem clamp(1rem,3vw,2.5rem) 1.5rem; overflow:auto; flex-direction:column; gap:.8rem; background:#fbfaf7; list-style:none; text-align:left; }.timeline-message { display:flex; align-items:flex-end; gap:.55rem; }.timeline-avatar { display:grid; width:2.15rem; height:2.15rem; flex:0 0 2.15rem; place-items:center; color:white; background:var(--avatar-color,#54a8cf); border-radius:50%; font-size:.78rem; font-weight:900; box-shadow:0 1px 3px rgba(31,77,99,.2); }.timeline-bubble { position:relative; width:fit-content; max-width:min(76%,52rem); padding:.75rem .9rem .5rem; background:#f1efeb; border-radius:0 1rem 1rem 1rem; box-shadow:0 1px 1px rgba(39,75,91,.08); }.timeline-meta { margin-bottom:.25rem; }.timeline-sender { display:block; overflow:hidden; color:#2f8876; font-size:.78rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.timeline-body { margin:0; color:#29423c; font-size:.96rem; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; }.timeline-time { display:block; width:max-content; margin:.4rem 0 0 auto; color:#819c96; border-bottom:1px solid #c6d4d0; font-size:.7rem; font-variant-numeric:tabular-nums; }.timeline-message[data-msgtype="m.emote"] .timeline-body { color:#4d6875; font-style:italic; }.message-copy { width:2.4rem; height:2.4rem; flex:0 0 2.4rem; color:#668b83; background:#fff; border:1px solid #cfe1dd; border-radius:.7rem; font:inherit; font-size:1.25rem; cursor:pointer; }.message-copy:hover { color:#2f8876; background:#f2f8f6; }.chat-composer { position:sticky; bottom:0; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.55rem; padding:.65rem clamp(.75rem,2vw,1.5rem) .4rem; background:#fff; border-top:1px solid #7bb6a8; }.chat-composer textarea { width:100%; min-height:3.5rem; padding:.8rem 1rem; resize:none; color:#4d6d66; background:#f1eee8; border:1px solid #6eaa9c; border-radius:1rem; font:inherit; font-size:1rem; box-shadow:inset 0 1px 2px rgba(41,80,71,.05); }.chat-composer .composer-emoji { width:2.7rem; height:2.7rem; padding:0; color:#547b72; background:#f5f3ee; border:1px solid #cbded9; border-radius:.8rem; font-size:1.15rem; }.composer-expiry { display:grid; gap:.15rem; color:#64837c; font-size:.62rem; font-weight:900; letter-spacing:.06em; text-align:center; text-transform:uppercase; }.composer-expiry span { grid-column:auto; margin:0; color:inherit; font-size:inherit; text-align:center; }.composer-expiry select { padding:.4rem .55rem; color:#54736c; background:#f1eee8; border:1px solid #b8cfca; border-radius:.65rem; font:inherit; font-size:.78rem; }.chat-composer > span { grid-column:1 / -1; color:#879b96; font-size:.68rem; text-align:right; }.chat-composer textarea:focus { outline:none; }.chat-composer textarea::placeholder { color:#78938d; opacity:1; }
.chat-composer { grid-template-columns:minmax(0,1fr) 2.75rem 3rem; gap:.35rem; padding-right:.55rem; padding-left:.55rem; }
.chat-authenticated .chat-composer { flex:0 0 auto; margin-top:auto; }
.timeline-sender[href] { width:fit-content; text-decoration:underline; text-underline-offset:.15em; }
.timeline-retry { align-self:flex-end; margin:.45rem .75rem 0; padding:.35rem .65rem; color:#2f8876; background:white; border:1px solid #c8dfda; border-radius:1rem; font:inherit; font-size:.78rem; font-weight:900; cursor:pointer; }
.message-actions { display:grid; align-self:flex-end; gap:.3rem; }.message-delete { display:grid; width:2.4rem; height:2.4rem; padding:0; place-items:center; color:#9b3c35; background:#fff; border:1px solid #e3c7c3; border-radius:.55rem; font:inherit; font-size:1rem; cursor:pointer; }.message-delete:disabled { opacity:.45; cursor:wait; }
.message-reactions { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }.message-reaction { padding:.2rem .48rem; color:#356e62; background:#e4f1ed; border:1px solid #bed8d1; border-radius:999px; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; }
.footer-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; }.commit-link { display:inline-flex; align-items:center; gap:.4rem; }.commit-link svg { width:1.25rem; height:1.25rem; }.footer-build .commit-link,.sidebar-build .commit-link { margin-left:.55rem; vertical-align:middle; }.license-badge { display:inline-flex; align-items:center; }.license-badge img { width:71px; height:25px; }.nostr-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem; }.nostr-actions a,.nostr-actions button { padding:.7rem .9rem; color:var(--paper); background:var(--ochre); border:0; border-radius:.7rem; font:inherit; font-size:.9rem; font-weight:900; text-decoration:none; cursor:pointer; }.nostr-actions button { color:var(--brown); background:#fff2c9; border:1px solid var(--border); }
.docs-page { width:min(100% - 2rem,48rem); padding-bottom:5rem; }.docs-page h1 { max-width:15ch; margin:0; color:var(--deep-brown); font-size:clamp(2.5rem,7vw,4.4rem); line-height:1; letter-spacing:-.06em; }.docs-page .lede { margin:1.25rem 0 3rem; text-align:left; }.docs-page section { margin-top:2.25rem; padding-top:2.25rem; border-top:1px solid var(--border); }.docs-page h2 { margin:0 0 .8rem; color:var(--deep-brown); font-size:clamp(1.45rem,4vw,2.1rem); line-height:1.05; letter-spacing:-.04em; }.docs-page p { color:var(--muted); }.docs-page code { padding:.12rem .3rem; color:var(--deep-brown); background:#fff2c9; border-radius:.28rem; font-size:.92em; }.docs-page a { color:var(--green); font-weight:800; }.docs-back { margin-top:3rem; }
.comparison-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:.9rem; background:var(--paper); }.comparison { width:100%; border-collapse:collapse; text-align:left; }.comparison th,.comparison td { min-width:11rem; padding:.8rem .9rem; vertical-align:top; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }.comparison th:last-child,.comparison td:last-child { border-right:0; }.comparison tbody tr:last-child td { border-bottom:0; }.comparison th { color:var(--deep-brown); background:#fff2c9; font-size:.9rem; }.comparison td { color:var(--muted); font-size:.86rem; line-height:1.4; }
dialog { position:relative; width:min(100% - 2rem,32rem); padding:2rem; color:var(--brown); background:var(--paper); border:1px solid var(--border); border-radius:1rem; box-shadow:0 24px 80px rgba(61,28,5,.3); } dialog::backdrop { background:rgba(61,28,5,.48); backdrop-filter:blur(3px); } dialog h2 { margin:.2rem 0 .8rem; color:var(--deep-brown); line-height:1.1; }.dialog-note { padding:.8rem; color:#76521c; background:#fff2c9; border-radius:.6rem; font-size:.9rem; }.close { position:absolute; top:.7rem; right:.7rem; width:2.3rem; height:2.3rem; color:var(--brown); background:#f9eab9; border:0; border-radius:50%; font-size:1.5rem; cursor:pointer; }
/* Compact chat layout */
.chat-page,
.chat-shell {
  height: 100dvh;
}

.chat-shell {
  height: calc(100dvh - 5.5rem);
}

.chat-sidebar {
  padding: 12px 10px;
}

.sidebar-footer {
  display: flex;
  margin: auto 6px 0;
  padding: 10px 4px 2px;
  align-items: center;
  justify-content: space-between;
  color: #708881;
  border-top: 1px solid #dbe6e2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 1;
  text-align: left;
}

.sidebar-footer > span {
  color: #8a9d98;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sidebar-footer > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sidebar-footer .commit-link {
  display: grid;
  width: 26px;
  height: 26px;
  margin: 0;
  place-items: center;
  color: #42665e;
  background: #eef5f2;
  border-radius: 50%;
}

.sidebar-footer .commit-link:hover,
.sidebar-footer .commit-link:focus-visible {
  color: #fff;
  background: #2f8876;
}

.sidebar-footer .commit-link svg {
  width: 15px;
  height: 15px;
}

.sidebar-footer time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chat-search {
  margin-bottom: 6px;
}

.chat-search-status {
  min-height: 16px;
  padding: 0 8px 4px;
  color: #6d8780;
  font-size: 11px;
}

.room-item {
  min-height: 48px;
  padding: 6px 8px;
}

.room-match-count {
  min-width: 20px;
  margin-left: auto;
  padding: 1px 6px;
  color: #2f8876;
  background: #e4f1ed;
  border-radius: 999px;
  font-size: 11px;
  text-align: center;
}

.room-item.selected .room-match-count {
  color: #1e6254;
  background: white;
}

.room-card h2 {
  padding: 10px 16px 0;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.1;
}

.room-card > #room-description {
  margin: 4px 0 0;
  padding: 0 16px 5px;
  font-size: 14px;
  line-height: 1.35;
}

#result > .room-policy {
  margin: 0;
  padding: 5px 16px;
  color: #526f67;
  background: #eef5f2;
  border-block: 1px solid #d8e7e2;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.room-participants {
  padding: 6px 16px;
}

.timeline-older,
.timeline-retry {
  min-height: 36px;
}

.timeline-older {
  align-self: center;
  margin: 6px 0 0;
  padding: 5px 12px;
  color: #2f8876;
  background: white;
  border: 1px solid #c8dfda;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.timeline {
  min-height: 0;
  padding: 10px clamp(10px, 2vw, 24px) 12px;
  gap: 8px;
}

.timeline-wrap {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
}

.timeline-wrap .timeline {
  flex: 1;
}

.timeline-wrap .timeline-status {
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 4px 9px;
  background: rgba(245, 247, 246, .94);
  border: 1px solid #d7e3df;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(35, 71, 63, .1);
  font-size: 12px;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.timeline-message {
  align-items: flex-end;
  gap: 7px;
}

.timeline-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  overflow: hidden;
  font-size: 12px;
}

.timeline-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-bubble {
  max-width: min(82%, 720px);
  padding: 8px 10px 6px;
}

.timeline-meta {
  margin-bottom: 2px;
}

.timeline-sender {
  font-size: 12px;
}

.timeline-body {
  font-size: 15px;
  line-height: 1.38;
}

.message-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
}

.message-footer .timeline-time {
  margin: 0;
  font-size: 11px;
}

.message-delete {
  width: 24px;
  height: 24px;
  border-color: transparent;
  background: transparent;
  font-size: 12px;
}

.message-reactions {
  position: relative;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.message-reaction,
.message-reaction-add,
.reaction-picker button {
  min-height: 28px;
  padding: 2px 7px;
  color: #356e62;
  background: #e4f1ed;
  border: 1px solid #bed8d1;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.message-reaction-add {
  min-width: 28px;
  padding-inline: 6px;
  color: #52756d;
  background: transparent;
  border-style: dashed;
}

.message-reaction:hover,
.message-reaction:focus-visible {
  background: #d4e9e3;
  border-color: #91beb3;
}

.message-reaction.mine {
  color: #fff;
  background: #2f8876;
  border-color: #2f8876;
}

.reaction-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 3;
  display: flex;
  width: max-content;
  max-width: 156px;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid #c7ddd7;
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(35, 71, 63, .18);
}

.reaction-picker[hidden] {
  display: none;
}

.reaction-picker button {
  min-width: 32px;
  padding: 3px 5px;
  background: #f4f8f6;
  border-color: transparent;
  font-size: 16px;
}

.reaction-picker button:hover,
.reaction-picker button:focus-visible {
  background: #e0efeb;
}

.room-readonly {
  margin: 0 !important;
  padding: 10px 16px !important;
  color: #71352f !important;
  background: #fff0ed;
  border-top: 2px solid #c85f52;
  font-size: 13px;
  text-align: left;
}

@media (max-width: 760px) {
  .site-header {
    min-height: 52px;
    padding: 6px 10px;
  }

  .brand {
    min-width: 0;
    flex: 0 1 auto;
    gap: 7px;
    font-size: 17px;
    white-space: nowrap;
  }

  .brand img {
    width: 36px;
    height: 36px;
  }

  .header-nav {
    display: none;
  }

  .identity-pill {
    max-width: 48vw;
    min-height: 38px;
    margin-left: auto;
    padding: 6px 9px;
    font-size: 12px;
  }

  .chat-shell {
    height: calc(100dvh - 52px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .chat-sidebar {
    position: static;
    height: auto;
    padding: 7px 8px 6px;
    border-right: 0;
    border-bottom: 1px solid #d9e5e1;
  }

  .chat-search input {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 16px;
  }

  .chat-search-status:empty {
    display: none;
  }

  .room-list {
    display: flex;
    gap: 5px;
    overflow-x: auto;
  }

  .room-item {
    min-width: 0;
    min-height: 42px;
    flex: 1 0 auto;
    gap: 6px;
    padding: 5px 8px;
    font-size: 14px;
  }

  .room-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 11px;
  }

  .sidebar-build {
    display: none;
  }

  .chat-page main,
  .chat-authenticated main {
    min-height: 0;
    height: 100%;
    padding-top: 0;
  }

  .room-card h2 {
    padding: 8px 12px 0;
    font-size: 19px;
  }

  .room-card > #room-description {
    padding: 0 12px 4px;
    font-size: 13px;
  }

  #result > .room-policy {
    padding: 5px 12px;
    font-size: 12px;
  }

  .room-participants {
    padding: 5px 12px;
  }

  .participant-count {
    font-size: 11px;
  }

  .timeline-status {
    padding: 5px 12px;
    font-size: 12px;
  }

  .timeline {
    padding: 8px 9px 10px;
  }

  .timeline-bubble {
    max-width: calc(100% - 41px);
  }

  .chat-composer {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
    gap: 5px;
    padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .chat-composer textarea {
    min-height: 46px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .composer-expiry,
  .composer-expiry select {
    width: 48px;
  }

  .composer-expiry select {
    min-height: 34px;
    padding: 4px;
    font-size: 16px;
  }

  .composer-send {
    width: 48px;
    min-width: 48px;
    height: 40px;
    font-size: 12px;
  }

  .chat-composer > span {
    display: none;
  }
}

@media (max-width: 390px) {
  .brand span {
    font-size: 0;
  }

  .brand span::after {
    content: "hitchhiking";
    font-size: 16px;
  }

  .identity-pill {
    max-width: 54vw;
  }

  .timeline-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .timeline-bubble {
    max-width: calc(100% - 37px);
  }
}