/* Styles for the content modules: news, rules, tips & guides, forum, chat, editor. */

/* ---------- menu badges ---------- */
.nav-ic { position: relative; display: inline-flex; }
.nav-ic .badge { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
.badge.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; top: -2px; right: -4px; }
.badge[hidden] { display: none !important; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 2px; }
.chip { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; background: var(--panel); }
.chip.active { background: var(--text); border-color: var(--text); color: var(--bg); }

/* ---------- rich text ---------- */
.md { font-size: 15px; line-height: 1.6; word-wrap: break-word; overflow-wrap: anywhere; }
.md > * + * { margin-top: .65em; }
.md h2 { font-size: 19px; margin-top: 1.1em; }
.md h3 { font-size: 16.5px; margin-top: 1em; }
.md h4 { font-size: 15px; }
.md ul, .md ol { padding-left: 22px; margin-top: .5em; }
.md li + li { margin-top: .25em; }
.md a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.md blockquote { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; color: var(--muted); }
.md code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.md hr { border: 0; border-top: 1px solid var(--line); }
.md-img { max-width: 100%; border-radius: 12px; display: block; border: 1px solid var(--line); }

/* ---------- editor ---------- */
.editor { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.editor-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.editor-bar .btn { min-height: 32px; padding: 5px 9px; }
.editor-text { border: 0 !important; box-shadow: none !important; border-radius: 0; min-height: 140px; }
.editor-preview { padding: 12px; min-height: 140px; }
.editor-help { padding: 4px 10px 6px; }
.thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; }

/* ---------- news ---------- */
.post { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.post.unread { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.post-author { display: flex; align-items: center; gap: 10px; }
.post-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.post-h { font-size: 24px; }
.post-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; display: block; }
.post-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.reactions { display: flex; gap: 4px; flex-wrap: wrap; }
.reaction { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 9px; font-size: 14px; cursor: pointer; min-height: 32px; }
.reaction span { font-size: 12px; font-weight: 700; color: var(--muted); }
.reaction.mine { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.reaction:hover { border-color: var(--accent); }
.must-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); color: var(--text); flex-wrap: wrap; }
.must-banner .ic { color: var(--danger); }
.must-card { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.must-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); display: grid; place-items: center; flex: none; }
.news-row.unread b, .news-row.unread div[style*="font-weight:600"] { color: var(--text); }
.news-row.unread::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-right: -4px; }
.comment-form { display: flex; gap: 8px; padding: 12px 18px 18px; border-top: 1px solid var(--line); align-items: flex-end; }
.comment-form textarea { min-height: 44px; }

/* ---------- rules ---------- */
.rule { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.rule.needs-ack { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 12%, transparent); }
.rule-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- tips & guides ---------- */
.kb-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s; }
.kb-card:hover { border-color: var(--accent); }
.kb-card h3 { font-size: 16px; }
.article { padding: 28px; }
.article h1 { font-size: 26px; }
.helpful { display: flex; align-items: center; gap: 8px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 600px) { .article { padding: 18px; } }

/* ---------- forum ---------- */
.forum-cat { display: flex; gap: 14px; padding: 16px 18px; align-items: flex-start; }
.forum-cat:hover { border-color: var(--accent); }
.forum-cat-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.thread-row.unread b { color: var(--text); }
.thread-row.unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.thread-meta { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.forum-post { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- chat ---------- */
.page.chat-page { max-width: none; padding: 0; height: calc(100vh - 60px); overflow: hidden; }
.chat-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100%; border-top: 1px solid var(--line); }
.ch-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); }
.ch-head { display: flex; align-items: center; gap: 6px; padding: 14px 14px 8px; }
.ch-scroll { overflow-y: auto; flex: 1; padding-bottom: 12px; }
.ch-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 14px 14px 6px; }
.ch-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 1px 6px; border-radius: 10px; min-width: 0; }
.ch-item .grow { min-width: 0; }
.ch-item:hover { background: var(--panel-2); }
.ch-item.active { background: var(--accent-soft); }
.ch-item.unread .ch-name { font-weight: 700; color: var(--text); }
.ch-name { font-weight: 500; }
.ch-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); color: var(--muted); display: grid; place-items: center; font-weight: 700; flex: none; }
.ch-ic.big { width: 36px; height: 36px; }
.conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.conv-empty { margin: auto; }
.conv-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.conv-head .back-btn { display: none; }
.msgs { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; }
.msg { display: flex; gap: 10px; padding: 4px 6px; border-radius: 10px; position: relative; margin-top: 8px; }
.msg.grouped { margin-top: 0; }
.msg:hover { background: var(--panel-2); }
.msg-av { width: 34px; flex: none; }
.msg-main { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; }
.msg-body { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.45; }
.msg-body a { color: var(--accent-text); text-decoration: underline; }
.msg-body.deleted { color: var(--faint); font-style: italic; }
.msg .mention { background: var(--accent-soft); color: var(--accent-text); border-radius: 5px; padding: 0 3px; font-weight: 600; }
.msg-img { max-width: min(320px, 100%); max-height: 320px; border-radius: 12px; margin-top: 6px; display: block; border: 1px solid var(--line); }
.msg-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.msg-menu { position: absolute; right: 6px; top: 2px; opacity: 0; }
.msg:hover .msg-menu, .msg-menu:focus { opacity: 1; }
@media (hover: none) { .msg-menu { opacity: .6; } }
.day-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; color: var(--faint); font-size: 12px; font-weight: 600; }
.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.composer.readonly { justify-content: center; padding: 16px; }
.composer-box { flex: 1; position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.composer-box:focus-within { border-color: var(--accent); }
.composer textarea { width: 100%; border: 0; background: transparent; outline: none; resize: none; padding: 10px 12px; font-size: 15px; max-height: 160px; display: block; }
.attach-preview { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; font-size: 13px; }
.attach-preview img { height: 54px; border-radius: 8px; }
.mention-pop { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; z-index: 5; }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.mention-item.active, .mention-item:hover { background: var(--accent-soft); }
.send-btn { border-radius: 12px; width: 44px; height: 44px; }

@media (max-width: 860px) {
  .page.chat-page { padding: 0; }
  .chat-layout { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .chat-layout.has-conv .ch-list { display: none; }
  .chat-layout:not(.has-conv) .conv { display: none; }
  .ch-list { border-right: 0; }
  .conv-head .back-btn { display: inline-flex; }
  /* inside a conversation on a phone the bottom menu gives way to the message box */
  body.in-conversation .bottomnav { display: none; }
  .msg-menu { opacity: .6; }
}

/* ---------- phones: comfort fixes from the UX review ---------- */
@media (max-width: 860px) {
  /* iOS zooms into any field under 16px; keep them at 16px */
  .input, textarea, select, .composer textarea { font-size: 16px; }
  /* inside a conversation the chat header replaces the app header */
  body.in-conversation .topbar { display: none; }
  .msg-main { padding-right: 30px; }
  .reaction, .chip, .editor-bar .btn { min-height: 40px; }
  .reaction { padding: 6px 12px; }
}
.ch-browse summary { cursor: pointer; list-style: none; }
.ch-browse summary::-webkit-details-marker { display: none; }