/* Comment threads (thread.js). Dark surfaces to match the site; phone first, then wider. */
.bt { --bt-text: #F2EEE6; --bt-muted: rgba(250,246,238,.62); --bt-subtle: rgba(250,246,238,.42); --bt-line: rgba(255,255,255,.12); --bt-line2: rgba(255,255,255,.2); --bt-field: #16181B; --bt-accent: #D4A574; --bt-accent-wash: rgba(212,165,116,.15); --bt-warn: #E8A840; display: flex; flex-direction: column; min-height: 0; color: var(--bt-text); }
.bt-list { overflow-y: auto; overscroll-behavior: contain; min-height: 80px; padding-right: 4px; }
.bt-note { color: var(--bt-muted); font-size: 13px; font-style: italic; padding: 4px 0; }
.bt-msg { display: flex; gap: 10px; margin-bottom: 14px; border-radius: 8px; scroll-margin: 80px; }
.bt-msg.reply { margin-bottom: 10px; }
.bt-focus { background: rgba(74,111,165,.22); padding: 8px; margin-left: -8px; margin-right: -8px; }
.bt-av { width: 32px; height: 32px; border-radius: 50%; background: #3A3D45; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: 0 0 auto; object-fit: cover; }
.bt-av.sm { width: 26px; height: 26px; font-size: 11px; }
.bt-main { flex: 1; min-width: 0; }
.bt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.3; }
.bt-name { font-weight: 600; font-size: 13px; color: var(--bt-text); }
.bt-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--bt-accent); background: var(--bt-accent-wash); border: 1px solid var(--bt-accent); border-radius: 4px; padding: 0 5px; }
.bt-time { font-size: 11px; color: var(--bt-subtle); }
.bt-body { font-size: 14px; line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; word-break: break-word; }
.bt-emote { height: 20px; vertical-align: -5px; }
.bt-std { font-size: 1.15em; vertical-align: -1px; }
.bt-deleted { color: var(--bt-subtle); font-style: italic; font-size: 13px; margin-top: 3px; }
.bt-system { text-align: center; color: var(--bt-subtle); font-style: italic; font-size: 12px; margin: 2px 0 14px; }
.bt-replies { border-left: 2px solid var(--bt-line2); margin: -6px 0 12px 15px; padding: 2px 0 0 14px; }
.bt-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; position: relative; }
.bt-pill { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--bt-line2); background: rgba(255,255,255,.05); color: var(--bt-muted); font-weight: 700; font-size: 12px; line-height: 1; font-family: inherit; cursor: pointer; }
.bt-pill img { width: 16px; height: 16px; }
.bt-pill.mine { border-color: var(--bt-accent); background: var(--bt-accent-wash); color: var(--bt-text); }
.bt-pill:disabled { cursor: default; }
.bt-pill.bt-add { justify-content: center; padding: 0; width: 34px; font-size: 16px; font-weight: 600; }
.bt-pills.bt-inline { display: inline-flex; margin: 0 10px 0 0; }
.bt-pills.bt-inline .bt-pill.bt-add { height: 26px; width: 30px; font-size: 14px; }
.bt-pill:hover:not(:disabled), .bt-pill:focus-visible { border-color: var(--bt-accent); outline: none; }
.bt-picker { position: absolute; bottom: 36px; left: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 2px; max-width: 260px; padding: 6px; background: var(--bt-field); border: 1px solid var(--bt-line2); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.bt-picker button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.bt-picker button:hover, .bt-picker button:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.bt-picker img { width: 24px; height: 24px; }
.bt-actions { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.bt-link { background: none; border: 0; padding: 4px 0; min-height: 28px; color: var(--bt-muted); font-weight: 600; font-size: 12px; font-family: inherit; cursor: pointer; }
.bt-link:hover, .bt-link:focus-visible { text-decoration: underline; color: var(--bt-text); outline: none; }
.bt-accent { color: var(--bt-accent); }
.bt-more { display: block; margin-bottom: 8px; }
.bt-dot { color: var(--bt-subtle); margin: 0 8px; font-size: 11px; }
.bt-ask { font-size: 12px; margin-right: 10px; }
.bt-ro { color: var(--bt-muted); font-size: 13px; margin-top: 12px; }
.bt-composer { margin-top: 12px; position: relative; }
.bt-chip { display: flex; align-items: center; gap: 8px; background: var(--bt-accent-wash); border-left: 3px solid var(--bt-accent); border-radius: 4px; padding: 4px 10px; margin-bottom: 6px; font-size: 12px; color: var(--bt-muted); }
.bt-chip-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-box { background: var(--bt-field); border: 1px solid var(--bt-line2); border-radius: 10px; padding: 6px 8px 8px; }
.bt-box:focus-within { border-color: var(--bt-accent); }
.bt-input { display: block; width: 100%; box-sizing: border-box; min-height: 64px; max-height: 180px; resize: none; background: transparent; color: var(--bt-text); border: 0; outline: none; font-size: 15px; line-height: 1.45; font-family: inherit; padding: 6px 4px; }
.bt-edit { background: var(--bt-field); border: 1px solid var(--bt-line2); border-radius: 8px; min-height: 56px; margin-top: 4px; padding: 8px; }
.bt-bar { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bt-emote-btn { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--bt-muted); cursor: pointer; font-size: 17px; }
.bt-status { flex: 1; min-width: 0; font-size: 11px; color: var(--bt-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-status.warn, .bt-count.warn { color: var(--bt-warn); white-space: normal; }
.bt-count { font-size: 11px; color: var(--bt-subtle); }
.bt-send { flex: 0 0 auto; height: 36px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--bt-accent); color: #0E0F11; font-weight: 700; font-size: 12px; letter-spacing: .03em; cursor: pointer; }
.bt-send:disabled { opacity: .45; cursor: default; }
.bt-palette { display: flex; flex-wrap: wrap; gap: 4px; max-height: 170px; overflow: auto; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bt-line); }
.bt-palette[hidden], .bt-chip[hidden], .bt-ro[hidden], .bt-composer[hidden] { display: none; }
.bt-palette button { width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.bt-palette button:hover { background: rgba(255,255,255,.08); }
.bt-palette img { height: 26px; }
@media (max-width: 520px) {
  .bt-status { display: none; }
  .bt-input { font-size: 16px; } /* 16px stops iOS zooming into the field */
  .bt-picker { max-width: calc(100vw - 48px); }
}