.ch-bg { height: 100%; padding: 22px 28px; background: #dcd9d1; }
.ch-window { display: flex; flex-direction: column; height: 100%; max-width: 820px; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #efede8; box-shadow: 0 18px 40px rgb(40 36 28 / .18); }
.ch-top { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #f8f7f3; border-bottom: 1px solid #dedad0; }
.ch-top b { display: block; font-size: 15px; }
.ch-top small { font-size: 12px; color: var(--ink-2); }
.ch-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #f8f7f3; font: 700 15px var(--mono); flex: none; }
.ch-avatar.is-small { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.ch-pin { background: #f8f7f3; border-bottom: 1px solid #dedad0; }
.ch-pin-bar { position: relative; display: block; width: 100%; padding: 8px 64px 8px 18px; border: 0; background: none; text-align: left; font-size: 12.5px; color: #3e4440; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-pin-bar b { margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #e6e3da; font-size: 11px; }
.ch-pin-bar em, .ch-pin-list em { font: 600 11.5px var(--mono); font-style: normal; color: var(--ink); }
.ch-pin-bar span { position: absolute; right: 18px; top: 8px; color: var(--green); }
.ch-rest { color: var(--ink-2); }
.ch-pin-list { margin: 0; padding: 0 18px 10px 18px; list-style: none; font-size: 13px; }
.ch-pin-list li { display: grid; grid-template-columns: 30px 1fr auto; gap: 6px; padding: 2px 0; }
.ch-pin-list small { color: var(--ink-2); }
.ch-stream { flex: 1; overflow: auto; padding: 14px 22px 22px; }
.ch-day { margin: 18px 0 6px; text-align: center; font: 11px var(--mono); color: #8c897f; }
.ch-sys { margin: 4px auto 8px; width: fit-content; max-width: 80%; padding: 3px 10px; border-radius: 999px; background: #e3e0d8; font-size: 11.5px; color: #6c695f; text-align: center; }
.ch-sys.is-clock { background: #f3e7c9; color: #6a5520; }
.ch-msg { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; }
.ch-msg.is-me { justify-content: flex-end; }
.ch-bubble { position: relative; max-width: 78%; padding: 10px 14px 18px; border-radius: 4px 14px 14px 14px; background: #fff; font-size: 13.5px; line-height: 1.65; box-shadow: 0 1px 1px rgb(0 0 0 / .06); }
.ch-msg.is-me .ch-bubble { border-radius: 14px 4px 14px 14px; background: #e2ddd0; }
.ch-bubble.is-note { background: #ebe0f0; }
.ch-bubble.is-local { background: #fff; border: 1.5px dashed var(--green); }
.ch-bubble.is-quiet { padding: 6px 12px 16px; color: #6c695f; font-size: 12.5px; }
.ch-bubble small { display: block; font-size: 11px; color: #6c695f; }
.ch-bubble strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.ch-bubble p { margin: 0 0 6px; color: #3e4440; }
.ch-bubble time { position: absolute; right: 10px; bottom: 3px; font: 10px var(--mono); color: #9a978d; }
.ch-changes { margin: 6px 0; padding: 8px 10px; list-style: none; border-radius: 8px; background: #f4f3ef; font-size: 12.5px; }
.ch-changes li { padding: 1px 0; }
.ch-changes i { display: inline-block; width: 18px; font-style: normal; font-weight: 700; color: var(--ink-2); }
.ch-changes small { display: inline; margin-left: 6px; }
.ch-ack { font-size: 12px; color: var(--ink-2); }
.ch-ask { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid #dedad0; }
.ch-ask b { display: block; margin: 1px 0 6px; }
.ch-ask.is-stale { opacity: .55; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-chips button { padding: 4px 12px; border: 1.5px solid var(--green); border-radius: 999px; background: #fff; color: var(--green); font-size: 13px; font-weight: 600; }
.ch-chips button.is-rec { background: var(--green); color: #fff; }
.ch-chips button:disabled { border-color: #cfccc3; background: #f4f3ef; color: #9a978d; cursor: default; }
.ch-more { display: block; margin: 0 auto 8px; padding: 4px 12px; border: 1px solid #cfccc3; border-radius: 999px; background: #f8f7f3; font-size: 12px; color: var(--ink-2); }
.ch-compose { display: flex; gap: 8px; padding: 10px 14px; background: #f8f7f3; border-top: 1px solid #dedad0; }
.ch-compose input { flex: 1; padding: 8px 12px; border: 1px solid #dedad0; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; }
.ch-compose button { padding: 0 16px; border: 0; border-radius: 999px; background: #cfccc3; color: #fff; }
.ch-side { margin: 0; font-size: 12.5px; color: var(--ink-2); }