:root {
  --bg: #0a0a0a;
  --card: #181818;
  --elev: #262626;
  --hover: #1e1e1e;
  --border: #2d2d2d;
  --border-strong: #3d3d3d;
  --text: #f3f5f7;
  --muted: #777777;
  --muted-2: #999999;
  --accent: #0095f6;
  --like: #ff3040;
  --repost: #00c06b;
  --trend: #ffd84d;
  --btn-solid-bg: #f3f5f7;
  --btn-solid-fg: #000;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  --radius: 28px;
  --col: 640px;
  --side: 252px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --card: #ffffff;
    --elev: #f5f5f5;
    --hover: #f6f6f6;
    --border: #e5e5e5;
    --border-strong: #d0d0d0;
    --text: #000000;
    --muted: #999999;
    --muted-2: #737373;
    --trend: #fff2a8;
    --btn-solid-bg: #000;
    --btn-solid-fg: #fff;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ic { flex-shrink: 0; display: block; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--side);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 26px 8px; }
.brand { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 25px; letter-spacing: -0.8px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-gap { height: 22px; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 5px 10px; min-height: 32px; border-radius: 8px;
  font-size: 15px; width: 100%; text-align: left; transition: background 0.12s;
}
.nav-ic .ic { width: 21px; height: 21px; }
.nav-link:hover { background: var(--hover); }
.nav-link.on { background: var(--elev); font-weight: 600; }
.nav-link--plain { padding-left: 12px; }
.nav-ic { position: relative; display: inline-flex; }
.badge-dot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--like); border: 2px solid var(--bg); }
.nav-section { margin-top: 30px; display: flex; flex-direction: column; gap: 0; }
.nav-section-title { color: var(--muted); font-size: 13px; font-weight: 600; padding: 0 10px 8px; }
.guest-box { margin-top: 28px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); display: grid; gap: 10px; }
.guest-box p { margin: 0 0 4px; color: var(--muted-2); font-size: 14px; }

.column { max-width: var(--col); margin: 0 auto; padding: 0 0 120px; position: relative; }
.mobile-head, .tabbar { display: none; }

.col-head {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  display: flex; align-items: center; justify-content: space-between; height: 74px; padding: 0 28px;
}
.col-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.col-title h1 { margin: 0; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.col-sub { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.back-btn { margin-left: -6px; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
  min-height: calc(100vh - 74px); overflow: hidden;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; color: var(--text); transition: background 0.12s, transform 0.1s; cursor: pointer; list-style: none;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn:active { transform: scale(0.92); }
summary.icon-btn::-webkit-details-marker { display: none; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 15px;
  border: 1px solid var(--border-strong); white-space: nowrap; transition: opacity 0.12s, transform 0.08s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.4; pointer-events: none; }
.btn-solid { background: var(--btn-solid-bg); color: var(--btn-solid-fg); border-color: var(--btn-solid-bg); }
.btn-outline { background: transparent; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 50px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }
.link-btn { font-size: 16px; padding: 6px 2px; }
.link-btn.strong { font-weight: 700; }
.danger { color: var(--like) !important; }
.chip { display: inline-block; font-size: 12px; background: var(--elev); color: var(--muted-2); padding: 2px 8px; border-radius: 8px; margin-left: 6px; }

/* ---------- dropdowns (details) ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--muted); }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; z-index: 30;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 6px;
  font-size: 15px; font-weight: 600;
}
.side-menu .dropdown-menu { left: auto; right: 0; }
.dropdown-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.account-menu .dropdown-menu { min-width: 220px; }
.col-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.profile-menu { display: none; }
.profile-menu .dropdown-menu { left: auto; right: 0; }
.dropdown-menu a, .dropdown-menu button { display: block; width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px; color: var(--text); }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--hover); }
.dropdown-menu a.on::after { content: '✓'; float: right; }

/* ---------- composer inline ---------- */
.inline-composer {
  display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); cursor: text;
}
.inline-composer .placeholder { flex: 1; color: var(--muted); font-size: 15px; }

.avatar { border-radius: 50%; object-fit: cover; background: var(--elev); display: block; flex-shrink: 0; }

/* ---------- post ---------- */
.post { padding: 14px 24px 10px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; }
.post--chain { border-bottom: 0; padding-bottom: 4px; }
.pair .post--chain + .post { padding-top: 4px; }
.post-context { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 0 0 6px 30px; }
.post-context--trend span { background: color-mix(in srgb, var(--trend) 22%, transparent); color: var(--text); padding: 1px 5px; border-radius: 4px; }
.post-grid { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.post-side { display: flex; flex-direction: column; align-items: center; }
.post-avatar { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.follow-badge {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--btn-solid-bg); color: var(--btn-solid-fg); border: 2px solid var(--card);
  display: grid; place-items: center; transition: transform 0.15s;
}
.follow-badge:hover { transform: scale(1.12); }
.follow-badge.done { background: var(--card); color: var(--text); }
.thread-line { flex: 1; width: 2px; min-height: 12px; background: var(--border-strong); margin-top: 8px; border-radius: 2px; }
.post-head { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.post-user { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-user:hover { text-decoration: underline; }
.verified { flex-shrink: 0; }
.topic-sep { color: var(--muted); }
.post-topic { color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.post-topic:hover { text-decoration: underline; }
.post-time { color: var(--muted); margin-left: 4px; white-space: nowrap; font-size: 15px; }
.post-time:hover { text-decoration: underline; }
.post-head-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.post-more { width: 32px; height: 32px; margin-right: -8px; color: var(--muted-2); }
.author-liked { position: relative; display: inline-flex; margin-right: 4px; }
.author-liked .ic { position: absolute; left: -5px; bottom: -2px; color: var(--like); z-index: 1; }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0 6px; font-size: 15px; line-height: 1.45; }
.post-text a { color: var(--accent); }
.post-text a:hover { text-decoration: underline; }

.media { margin: 8px 0 4px; display: flex; gap: 6px; }
.media img { border-radius: 8px; border: 1px solid var(--border); object-fit: cover; background: var(--elev); cursor: zoom-in; display: block; }
/* uma imagem: largura do post, altura natural (limitada), como no Threads */
.media--one img { max-height: 600px; width: auto; max-width: 100%; height: auto; }
.media--many { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
.media--many::-webkit-scrollbar { display: none; }
/* várias imagens: carrossel com altura fixa e largura pela proporção (limitada) */
.media--many img { height: 280px; width: auto; max-width: 420px; min-width: 160px; scroll-snap-align: start; flex-shrink: 0; }

.post-actions { display: flex; gap: 4px; margin: 4px 0 0 -12px; }
.act {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border-radius: 18px;
  color: var(--text); font-size: 13px; transition: background 0.12s;
}
.act:hover { background: var(--hover); }
.act .n:empty { display: none; }
.act.like.on { color: var(--like); }
.act.like.on .ic { fill: var(--like); }
.act.like.pop .ic { animation: pop 0.35s ease; }
.act.repost.on { color: var(--repost); }
@keyframes pop { 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* post em foco (página da thread) */
.post--focus { cursor: default; padding-top: 18px; }
.focus-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.focus-head .post-head { flex: 1; }
.post--focus .post-text { font-size: 16px; }
.post--focus .post-actions { margin-top: 8px; margin-bottom: 4px; }

.thread-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px 10px; border-top: 1px solid var(--border); }
.thread-bar .dropdown > summary { color: var(--text); gap: 6px; }
.post--chain + .thread-bar, .post--focus + .thread-bar { border-top: 1px solid var(--border); }
.reply-bar {
  display: flex; align-items: center; gap: 10px; margin: 6px 16px 14px; padding: 10px 12px;
  background: var(--elev); border-radius: 28px; border: 1px solid var(--border);
}
.reply-bar textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent; padding: 6px 0; max-height: 200px; line-height: 1.4;
}
.reply-bar textarea::placeholder { color: var(--muted); }
.reply-bar .icon-btn { color: var(--muted-2); width: 34px; height: 34px; }
.reply-bar--guest { color: var(--muted); justify-content: center; padding: 16px; }
#replies { border-top: 1px solid var(--border); }

/* ---------- vazio / loading ---------- */
.empty { padding: 60px 24px; text-align: center; }
.empty-title { font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.empty a { color: var(--accent); }
.sentinel { display: grid; place-items: center; padding: 28px; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border-strong); border-top-color: var(--text); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- perfil ---------- */
.profile-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 28px 8px; }
.profile-name { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.profile-handle { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 15px; }
.profile > .post-text { padding: 6px 28px 0; margin: 0; }
.profile-meta { padding: 14px 28px 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.profile-followers { display: inline-flex; align-items: center; gap: 6px; }
.profile-followers:hover, .profile-link:hover { text-decoration: underline; }
.stack { display: inline-flex; }
.stack .avatar { border: 2px solid var(--card); margin-left: -6px; }
.stack .avatar:first-child { margin-left: 0; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 28px 4px; }
.profile-actions .btn { height: 36px; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); margin-top: 14px; }
.tabs--2 { grid-template-columns: 1fr 1fr; margin-top: 0; }
.tabs a { text-align: center; padding: 14px 0; color: var(--muted); font-weight: 600; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--text); border-bottom-color: var(--text); }

.complete { padding: 18px 28px 24px; border-bottom: 1px solid var(--border); }
.complete-head { display: flex; justify-content: space-between; margin-bottom: 14px; }
.complete-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-right: -28px; padding-right: 28px; }
.complete-row::-webkit-scrollbar { display: none; }
.complete-card {
  flex: 0 0 220px; background: var(--elev); border-radius: 16px; padding: 18px 14px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.complete-card p { margin: 0 0 6px; flex: 1; }
.complete-card .btn { width: 100%; }
.complete-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--card); display: grid; place-items: center; margin-bottom: 6px; }

/* ---------- usuários / busca ---------- */
.user-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.user-item-link { flex: 1; display: flex; gap: 12px; min-width: 0; }
.user-item-body { min-width: 0; }
.user-item-body > div:first-child { display: flex; align-items: center; gap: 4px; }
.user-item-bio { margin-top: 4px; font-size: 14px; }
.search-box {
  display: flex; align-items: center; gap: 10px; margin: 18px 24px 8px; padding: 0 16px; height: 46px;
  background: var(--elev); border: 1px solid var(--border); border-radius: 16px; color: var(--muted);
}
.search-box input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; }
.block { padding-top: 8px; }
.block-title { margin: 12px 24px 6px; font-size: 16px; }
.block-title.pad { margin-top: 22px; }
.trend { display: flex; align-items: center; gap: 14px; padding: 12px 24px; color: var(--muted); }
.trend:hover { background: var(--hover); }
.trend-rank { width: 18px; text-align: center; font-weight: 600; }
.trend-body { flex: 1; display: flex; flex-direction: column; color: var(--text); }

/* ---------- atividade ---------- */
.notif { display: flex; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.notif.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-av { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.nbadge {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--card); color: #fff;
}
.nbadge--like { background: var(--like); }
.nbadge--reply, .nbadge--mention { background: var(--accent); }
.nbadge--follow { background: #6e3def; }
.nbadge--repost { background: #c837ab; }
.notif-body { flex: 1; min-width: 0; }
.notif-head { display: flex; align-items: center; gap: 4px; }
.notif-desc { display: block; color: var(--muted); margin-top: 1px; }
.notif-post { margin-top: 6px; cursor: pointer; }
.notif-post .post { padding: 0; border: 0; }
.notif-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }

/* ---------- insights ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px 24px 4px; }
.tile { background: var(--elev); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.tile b { font-size: 24px; }

/* ---------- FAB ---------- */

/* ---------- modais ---------- */
dialog { color: var(--text); }
.modal {
  width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 80px); padding: 0; border: 1px solid var(--border);
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
.modal[open] { animation: rise 0.18s ease-out; display: block; }
.modal::backdrop { background: rgba(0, 0, 0, 0.72); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.modal form { display: block; }
.modal-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-head > :first-child { justify-self: start; }
.modal-head > :last-child { justify-self: end; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 18px; gap: 12px; }

.compose-body { overflow-y: auto; padding: 16px 24px 4px; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
.compose-parent { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding-bottom: 6px; color: var(--muted-2); }
.compose-parent .post-text { color: var(--text); max-height: 140px; overflow: hidden; }
.compose-parent .side { display: flex; flex-direction: column; align-items: center; }
.entry { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.entry-side { display: flex; flex-direction: column; align-items: center; }
.entry-main { padding-bottom: 12px; min-width: 0; }
.entry-head { display: flex; align-items: center; gap: 4px; }
.topic-wrap { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); flex: 1; min-width: 0; }
.topic-input { border: 0; outline: 0; background: transparent; color: var(--muted-2); padding: 2px; width: 100%; }
.topic-input:not(:placeholder-shown) { color: var(--text); }
.entry + .entry .topic-wrap { display: none; }
.entry-remove { width: 26px; height: 26px; color: var(--muted); margin-left: auto; }
.entry:only-child .entry-remove { display: none; }
.entry textarea {
  display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; padding: 2px 0;
  font-size: 15px; line-height: 1.45; min-height: 24px; max-height: 50vh;
}
.entry textarea::placeholder { color: var(--muted); }
.entry-media { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.entry-media:not(:empty) { margin: 8px 0; }
.thumb { position: relative; flex-shrink: 0; }
.thumb img { height: 180px; width: auto; border-radius: 10px; display: block; border: 1px solid var(--border); object-fit: cover; }
.thumb.loading img { opacity: 0.5; }
.thumb .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; display: grid; place-items: center; }
.entry-tools { display: flex; align-items: center; gap: 4px; margin: 6px 0 0 -8px; color: var(--muted-2); }
.entry-tools .icon-btn { width: 34px; height: 34px; color: var(--muted-2); }
.counter { margin-left: auto; }
.counter.warn { color: var(--like); }
.compose-add { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; color: var(--muted); padding: 2px 0 10px; text-align: left; width: 100%; }
.compose-add-av { display: flex; justify-content: center; opacity: 0.5; }

.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; object-fit: contain; }
.lightbox-close { position: fixed; top: 18px; left: 18px; color: #fff; background: rgba(255, 255, 255, 0.1); }

.popover {
  position: absolute; z-index: 60; min-width: 220px; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); padding: 6px; font-weight: 600;
}
.popover button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 12px; border-radius: 10px; }
.popover button:hover { background: var(--hover); }

#toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--btn-solid-bg); color: var(--btn-solid-fg); padding: 12px 18px; border-radius: 12px; font-weight: 600;
  transition: opacity 0.2s, transform 0.2s; z-index: 100; max-width: calc(100vw - 32px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast a { text-decoration: underline; margin-left: 8px; }

/* ---------- auth (login / cadastro) ---------- */
.auth {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: clamp(56px, 14vh, 140px) 16px 28px; position: relative; background: var(--bg);
}
body.bare { background: var(--bg); }
.auth-brand { margin-bottom: 28px; display: inline-flex; }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 432px; }
.auth-card h1 { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 22px; }
.auth-form { display: grid; gap: 8px; }
.field { display: grid; gap: 4px; }
.auth .field-box {
  display: flex; align-items: center; background: var(--elev); border: 1px solid transparent; border-radius: 12px;
  padding: 0 16px; height: 56px; transition: border-color 0.12s;
}
.auth .field-box:focus-within { border-color: var(--border-strong); }
.auth .field-box input, .auth .field-box select {
  flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; height: 100%; min-width: 0; color: var(--text);
}
.auth .field-box input::placeholder { color: var(--muted); }
.field-prefix { color: var(--muted); margin-right: 2px; font-size: 15px; }
.field-hint { font-size: 12px; color: var(--muted); padding: 0 6px 4px; }
.field-hint.ok { color: var(--repost); }
.field-error, .field-hint.bad { font-size: 12px; color: var(--like); padding: 0 6px 4px; }
.has-error .field-box { border-color: var(--like) !important; }
.form-error { background: color-mix(in srgb, var(--like) 14%, transparent); color: var(--text); padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.btn-xl { height: 58px; border-radius: 12px; font-size: 16px; margin-top: 6px; }
.btn-xl:disabled { opacity: 1; color: var(--muted); }
.auth-note { color: var(--muted); font-size: 12px; text-align: center; margin: 10px 0 0; }
.auth-or { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--muted); margin: 26px 0 18px; }
.auth-or::before, .auth-or::after { content: ''; width: 32px; height: 1px; background: var(--border-strong); }
.auth-alt {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 16px;
  transition: background 0.12s;
}
.auth-alt:hover { background: var(--hover); }
.auth-alt-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--text); color: var(--bg); display: grid; place-items: center; }
.auth-alt-body { flex: 1; display: flex; flex-direction: column; }
.auth-alt-body b { font-size: 16px; }
.auth-alt .ic { color: var(--muted); }
.auth-legal { margin-top: auto; padding-top: 40px; color: var(--muted); font-size: 12px; position: relative; z-index: 1; }

/* seletor de país (combobox próprio; o <select> fica como fallback sem JS) */
.country-box { position: relative; cursor: pointer; }
.country-box select { cursor: pointer; appearance: none; }
.country-btn { flex: 1; display: flex; align-items: center; gap: 10px; height: 100%; text-align: left; font-size: 15px; }
.country-btn .flag { font-size: 20px; line-height: 1; }
.country-btn .name { flex: 1; }
.country-btn .ic { color: var(--muted); }
.country-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.country-pop input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; outline: 0; padding: 14px 16px; font-size: 15px; color: var(--text);
}
.country-list { max-height: 280px; overflow-y: auto; padding: 6px; margin: 0; list-style: none; }
.country-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.country-list li .flag { font-size: 20px; }
.country-list li[aria-selected='true'] { font-weight: 600; }
.country-list li[aria-selected='true']::after { content: '✓'; margin-left: auto; }
.country-list li.active { background: var(--hover); }
.country-empty { padding: 16px; color: var(--muted); text-align: center; }

/* ---------- responsivo ---------- */
@media (max-width: 1240px) {
  :root { --side: 84px; }
  .sidebar { align-items: center; padding: 22px 12px; }
  .brand span, .nav-label, .nav-section-title, .guest-box p { display: none; }
  .sidebar-top { flex-direction: column; gap: 12px; }
  .side-menu { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 61; }
  .side-menu .dropdown-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; z-index: 60; }
  .sidebar { overflow: visible; z-index: 30; }
  .sidebar-top { padding: 0 0 18px; }
  .nav-link { justify-content: center; padding: 12px; }
  .nav-section { margin-top: 18px; }
  .nav-link--plain { display: none; }
  .guest-box { padding: 10px; border: 0; background: none; }
  .guest-box .btn { padding: 0 10px; font-size: 13px; }
  .column { margin-left: max(var(--side), calc((100vw - var(--col)) / 2)); }
}
@media (max-width: 760px) {
  .sidebar { display: none; }
  .profile-menu { display: inline-block; }
  .column { margin: 0; padding-bottom: 90px; }
  .mobile-head {
    display: flex; align-items: center; justify-content: center; height: 56px; position: relative;
  }
  .mobile-head .btn { position: absolute; right: 12px; }
  .col-head { height: 52px; padding: 0 16px; top: 0; }
  .card { border-radius: 0; border-left: 0; border-right: 0; min-height: calc(100vh - 108px); }
  .post, .user-item, .notif, .inline-composer { padding-left: 16px; padding-right: 16px; }
  .media--many { margin-right: -16px; padding-right: 16px; }
  .profile-top, .profile-meta, .profile-actions, .complete { padding-left: 16px; padding-right: 16px; }
  .profile > .post-text { padding: 6px 16px 0; }
  .thread-bar { padding: 14px 16px 8px; }
  .reply-bar { margin: 6px 10px 12px; }
  .tiles { grid-template-columns: 1fr 1fr; padding: 16px; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-around; align-items: center;
    height: calc(64px + var(--sab)); padding-bottom: var(--sab);
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .tabbar > * { color: var(--muted); padding: 10px 16px; border-radius: 10px; display: inline-flex; }
  .tabbar .on { color: var(--text); }
  .tabbar-new { background: var(--elev); color: var(--muted) !important; padding: 8px 18px !important; }
  .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  /* no mobile o modal tem altura fixa (tela cheia), então aqui o flex é seguro */
  .modal[open] { display: flex; flex-direction: column; }
  .modal form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .compose-body { flex: 1 1 auto; max-height: none; }
  .media--one img { max-height: 420px; }
  .media--many img { height: 240px; max-width: 75vw; }
}

/* ---------- datepicker (Air Datepicker) no tema do app ---------- */
.air-datepicker.air-datepicker {
  --adp-font-family: inherit;
  --adp-font-size: 14px;
  --adp-width: 300px;
  --adp-padding: 8px;
  --adp-z-index: 200;
  --adp-background-color: var(--card);
  --adp-background-color-hover: var(--hover);
  --adp-background-color-active: var(--elev);
  --adp-border-color: var(--border);
  --adp-border-color-inner: var(--border);
  --adp-border-radius: 16px;
  --adp-color: var(--text);
  --adp-color-secondary: var(--muted);
  --adp-color-other-month: var(--muted);
  --adp-color-disabled: color-mix(in srgb, var(--muted) 45%, transparent);
  --adp-accent-color: var(--text);
  --adp-color-current-date: var(--accent);
  --adp-cell-background-color-selected: var(--btn-solid-bg);
  --adp-cell-background-color-selected-hover: var(--btn-solid-bg);
  --adp-cell-background-color-hover: var(--hover);
  --adp-cell-border-radius: 10px;
  --adp-day-name-color: var(--muted);
  --adp-nav-arrow-color: var(--text);
  --adp-nav-color-secondary: var(--muted);
  --adp-btn-color: var(--text);
  --adp-btn-background-color-hover: var(--hover);
  --adp-overlay-background-color: rgba(0, 0, 0, 0.6);
  box-shadow: var(--shadow);
}
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- { color: var(--btn-solid-fg); font-weight: 600; }
.air-datepicker-cell.-year-, .air-datepicker-cell.-month- { font-weight: 500; }
.air-datepicker-nav--title { font-weight: 600; }
.air-datepicker-nav--title i { color: var(--muted); font-style: normal; margin-left: 4px; }
.air-datepicker--pointer { display: none; }
.air-datepicker.air-datepicker.-is-mobile- { --adp-width: min(92vw, 360px); --adp-mobile-day-cell-height: 44px; }

/* ---------- recuperação de senha ---------- */
.auth-forgot { display: block; text-align: center; color: var(--muted-2); font-size: 15px; margin-top: 14px; }
.auth-forgot:hover { color: var(--text); }
.auth-lead { color: var(--muted-2); font-size: 14px; line-height: 1.5; text-align: center; margin: -8px 0 10px; }
.auth-notice { background: var(--elev); border-radius: 16px; padding: 20px; text-align: center; margin-bottom: 14px; }
.auth-notice b { font-size: 16px; }
.auth-notice p { color: var(--muted-2); font-size: 14px; line-height: 1.5; margin: 8px 0 0; }

/* ---------- emoji e GIF no composer ---------- */
.entry-tools .icon-btn[aria-expanded='true'] { color: var(--text); background: var(--hover); }
.entry-panel { margin: 8px 0 4px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }
.panel-loading { display: grid; place-items: center; padding: 40px; }
.panel-msg { color: var(--muted); text-align: center; padding: 28px 16px; margin: 0; font-size: 14px; }
emoji-picker {
  width: 100%; height: 330px; display: block;
  --background: var(--card); --border-color: var(--border); --border-size: 0;
  --button-hover-background: var(--hover); --button-active-background: var(--elev);
  --indicator-color: var(--text); --input-border-color: var(--border); --input-font-color: var(--text);
  --input-placeholder-color: var(--muted); --input-border-radius: 10px; --input-padding: 8px 12px;
  --outline-color: var(--border-strong); --category-font-color: var(--muted-2);
  --emoji-size: 1.45rem; --num-columns: 9;
}
.gif-panel { display: flex; flex-direction: column; height: 360px; }
.gif-search {
  margin: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--elev);
  color: var(--text); outline: 0; font-size: 15px;
}
.gif-grid { flex: 1; overflow-y: auto; padding: 0 10px 10px; columns: 3 120px; column-gap: 6px; }
.gif-grid .panel-loading, .gif-grid .panel-msg { column-span: all; }
.gif-item { display: block; width: 100%; margin: 0 0 6px; border-radius: 8px; overflow: hidden; break-inside: avoid; background: var(--elev); }
.gif-item img { display: block; width: 100%; height: auto; }
.gif-item:hover img, .gif-item:focus-visible img { opacity: 0.8; }
.gif-foot { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); text-align: right; padding: 6px 12px; border-top: 1px solid var(--border); }
.thumb--gif .gif-badge {
  position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.7); color: #fff;
}
.media img[data-gif] { cursor: zoom-in; }
@media (max-width: 760px) {
  emoji-picker { --num-columns: 8; height: 300px; }
  .gif-grid { columns: 2 120px; }
}



/* ---------- editar perfil ---------- */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
.edit-modal { width: min(540px, calc(100vw - 24px)); }
.edit-body { padding: 20px 24px 24px; }
.edit-card { border: 1px solid var(--border); border-radius: 18px; padding: 0 20px; background: var(--card); }
.edit-row { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.edit-row:last-child { border-bottom: 0; }
.edit-row--top { flex-direction: row; align-items: center; gap: 16px; }
.edit-field { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.edit-label { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; }
.edit-count { font-weight: 400; font-size: 12px; color: var(--muted); }
.edit-count.warn { color: var(--like); }
.edit-static { color: var(--muted-2); font-size: 15px; }
.edit-row input, .edit-row textarea {
  width: 100%; border: 0; outline: 0; background: transparent; padding: 0; font-size: 15px; line-height: 1.45; resize: none; color: var(--text);
}
.edit-row input::placeholder, .edit-row textarea::placeholder { color: var(--muted); }
.edit-row textarea { min-height: 22px; max-height: 160px; overflow-y: auto; }
.edit-row input:focus-visible, .edit-row textarea:focus-visible { outline: 0; }
.edit-row:focus-within .edit-label { color: var(--text); }
.edit-avatar-wrap { position: relative; flex-shrink: 0; }
.edit-avatar { position: relative; display: block; border-radius: 50%; }
.edit-avatar .avatar { transition: filter 0.15s; }
.edit-avatar:hover .avatar { filter: brightness(0.8); }
.edit-avatar-cam {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--btn-solid-bg); color: var(--btn-solid-fg); border: 2px solid var(--card); display: grid; place-items: center;
}
.edit-avatar-busy { position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; }
.edit-avatar-busy .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; min-width: 210px; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); font-weight: 600;
}
.avatar-menu button { display: block; width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px; }
.avatar-menu button:hover { background: var(--hover); }
.edit-error { margin: 12px 4px 0; color: var(--like); font-size: 14px; }
.modal-head .link-btn[disabled] { opacity: 0.35; cursor: default; }
.modal-head .link-btn { border-radius: 8px; padding: 6px 8px; margin: 0 -8px; }
@media (max-width: 760px) {
  .edit-body { padding: 16px; }
}

/* ---------- autocomplete @ / # ---------- */
.ac-menu {
  position: fixed; z-index: 300; width: 290px; max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.ac-item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ac-item b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item.active, .ac-item:hover { background: var(--hover); }
.ac-hash { width: 32px; height: 32px; border-radius: 50%; background: var(--elev); display: grid; place-items: center; font-weight: 700; color: var(--muted-2); flex-shrink: 0; }

/* ---------- mensagens: dois painéis (lista | conversa) ---------- */
body[data-page='messages'] .column { max-width: none; margin: 0 0 0 var(--side); padding: 0; }
.dm { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; height: 100vh; height: 100dvh; border-left: 1px solid var(--border); }
.dm-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.dm-list-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 14px 24px; }
.dm-list-head h1 { margin: 0; font-size: 22px; }
.dm-filter {
  display: flex; align-items: center; gap: 10px; margin: 0 20px; padding: 0 16px; height: 46px; border-radius: 24px;
  background: var(--elev); color: var(--muted);
}
.dm-filter input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--text); min-width: 0; }
.dm-tabs { display: flex; gap: 8px; padding: 14px 20px 8px; }
.dm-tabs a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-strong);
  font-size: 14px; font-weight: 600; color: var(--muted-2);
}
.dm-tabs a.on { color: var(--text); background: var(--elev); }
.dm-tab-count { background: var(--like); color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 6px; }
.dm-convs { flex: 1; overflow-y: auto; padding: 4px 8px 20px; }
.dm-empty-list { color: var(--muted); text-align: center; padding: 40px 16px; font-size: 14px; }
.conv { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; }
.conv:hover { background: var(--hover); }
.conv.on { background: var(--elev); }
.conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-top { display: flex; align-items: center; gap: 4px; }
.conv-last { display: flex; color: var(--muted); font-size: 14px; min-width: 0; }
.conv-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { flex-shrink: 0; white-space: pre; }
.conv.unread .conv-text { color: var(--text); font-weight: 600; }
.conv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.link-inline { color: var(--accent); font-weight: 600; }
.dm-search { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.dm-search input { width: 100%; border: 0; outline: 0; background: var(--elev); border-radius: 10px; padding: 11px 14px; font-size: 15px; }
.dm-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.dm-user { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 12px; text-align: left; }
.dm-user:hover { background: var(--hover); }
.dm-user > span { display: flex; flex-direction: column; }

.dm-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dm-placeholder { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 24px; }
.dm-placeholder-ic { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--text); display: grid; place-items: center; margin-bottom: 10px; }
.dm-placeholder b { font-size: 20px; }
.dm-placeholder p { margin: 0 0 12px; }

.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.chat-back { display: none; }
.chat-peer { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-peer b { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.chat-status { display: block; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-menu .dropdown-menu { left: auto; right: 0; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 20px 24px 12px; }
.chat-more { align-self: center; color: var(--muted-2); font-size: 13px; padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; }
.chat-more:hover { background: var(--hover); }
/* intro empurrada para o fim quando há poucas mensagens, como no Threads */
.chat-intro { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 30px 0 24px; text-align: center; font-size: 14px; }
.chat-intro b { font-size: 20px; margin: 10px 0 6px; }
.chat-intro-actions { display: flex; gap: 8px; margin-top: 12px; }
.chat-sep { align-self: center; color: var(--muted); font-size: 12px; margin: 14px 0 8px; }
.msg { display: flex; }
.msg.mine { justify-content: flex-end; }
.bubble { max-width: min(75%, 520px); padding: 9px 14px; border-radius: 20px; background: var(--elev); }
.bubble .post-text { margin: 0; font-size: 15px; }
.msg.mine .bubble { background: var(--accent); color: #fff; }
.msg.mine .bubble a { color: #fff; text-decoration: underline; }
.msg.mine + .msg.mine .bubble { border-top-right-radius: 6px; }
.msg.theirs + .msg.theirs .bubble { border-top-left-radius: 6px; }
.msg.only-media .bubble { padding: 0; background: none; }
.msg-media { display: flex; flex-direction: column; gap: 4px; }
.msg-media img { display: block; max-width: min(280px, 100%); max-height: 340px; width: auto; height: auto; border-radius: 16px; cursor: zoom-in; object-fit: cover; }
.bubble .msg-media + .post-text { margin-top: 8px; }
.msg.pending .bubble { opacity: 0.6; }
.msg.failed .bubble { background: color-mix(in srgb, var(--like) 70%, transparent); }
.chat-seen { align-self: flex-end; color: var(--muted); font-size: 12px; margin: 2px 4px 0; }
.chat-typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 12px 14px; border-radius: 20px; background: var(--elev); margin-top: 4px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.chat-request { border-top: 1px solid var(--border); padding: 20px 24px; text-align: center; }
.chat-request p { margin: 6px auto 14px; font-size: 13px; max-width: 460px; }
.chat-request-actions { display: flex; gap: 10px; justify-content: center; }
.chat-request-actions .btn { min-width: 120px; }
.danger-outline { color: var(--like); }
.chat-foot { border-top: 1px solid var(--border); padding: 0 20px 18px; }
.chat-notice { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 0 4px; font-size: 13px; }
.chat-notice b { font-size: 15px; }
.chat-composer { display: flex; align-items: flex-end; gap: 10px; padding-top: 14px; flex-wrap: wrap; position: relative; }
.chat-plus-wrap { position: relative; }
.chat-plus { width: 46px; height: 46px; border-radius: 50%; background: var(--elev); display: grid; place-items: center; color: var(--text); }
.chat-plus:hover { filter: brightness(1.2); }
.chat-plus-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 10; min-width: 170px; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); font-weight: 600;
}
.chat-plus-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; }
.chat-plus-menu button:hover { background: var(--hover); }
.chat-input { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; background: var(--elev); border-radius: 24px; padding: 3px 8px 3px 6px; min-height: 46px; }
.chat-input .icon-btn { width: 40px; height: 40px; color: var(--muted-2); }
.chat-input textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; padding: 11px 4px; max-height: 160px; line-height: 1.4; font-size: 15px; }
.chat-send { color: var(--accent); font-weight: 700; padding: 0 10px; height: 40px; }
.chat-panel { flex-basis: 100%; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.chat.offline .chat-foot { position: relative; }
.chat.offline .chat-foot::before {
  content: 'Reconectando…'; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--muted); background: var(--card); padding: 2px 10px; border-radius: 10px;
}
.mobile-dm { position: absolute; right: 8px; }

/* ---------- modal de confirmação ---------- */
.confirm-modal { width: min(340px, calc(100vw - 32px)); padding: 0; text-align: center; }
.confirm-body { padding: 26px 24px 20px; }
.confirm-body h2 { margin: 0; font-size: 17px; }
.confirm-body p { margin: 10px 0 0; color: var(--muted-2); font-size: 14px; line-height: 1.45; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.confirm-actions button { padding: 15px; font-size: 16px; }
.confirm-actions button + button { border-left: 1px solid var(--border); font-weight: 700; }
.confirm-actions button:hover { background: var(--hover); }

@media (max-width: 1240px) {
  .dm { grid-template-columns: minmax(280px, 340px) 1fr; }
}
@media (max-width: 760px) {
  body[data-page='messages'] .column { margin: 0; }
  body[data-page='messages'] .tabbar { display: none; }
  .dm { display: block; height: calc(100dvh - 56px); border-left: 0; }
  .dm-list, .dm-pane { height: 100%; border-right: 0; }
  .dm:not(.dm--open) .dm-pane { display: none; }
  .dm--open .dm-list { display: none; }
  body:has(.dm--open) .mobile-head { display: none; }
  .dm--open { height: 100dvh; }
  .chat-back { display: inline-flex; margin-left: -8px; }
  .chat-head { padding: 10px 12px; }
  .chat-log { padding: 16px 12px 10px; }
  .chat-foot { padding: 0 10px calc(10px + var(--sab)); }
  .msg-media img { max-width: 240px; }
}

/* ---------- recorte da foto de perfil ---------- */
.crop-modal { width: min(520px, calc(100vw - 24px)); }
.crop-stage { height: min(420px, 60vh); background: #000; }
.crop-stage img { display: block; max-width: 100%; }
.crop-modal .cropper-view-box, .crop-modal .cropper-face { border-radius: 50%; }
.crop-modal .cropper-view-box { outline: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.crop-modal .cropper-modal { background: #000; opacity: 0.6; }
.crop-tools { display: flex; align-items: center; gap: 10px; padding: 14px 20px 4px; }
.crop-tools .icon-btn { font-size: 20px; line-height: 1; color: var(--text); }
.crop-tools input[type='range'] { flex: 1; accent-color: var(--text); }
.crop-hint { text-align: center; margin: 4px 0 16px; }
@media (max-width: 760px) { .crop-stage { height: 60vh; } }

/* ---------- notificações ao vivo ---------- */
#live-notifs { position: fixed; top: 16px; right: 16px; z-index: 400; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.live-notif {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
  animation: notif-in 0.25s ease-out; transition: opacity 0.3s, transform 0.3s;
}
.live-notif:hover { background: var(--hover); }
.live-notif.out { opacity: 0; transform: translateX(20px); }
.live-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.live-notif-body b { font-size: 14px; line-height: 1.3; }
.live-notif-body span { color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-notif-x { color: var(--muted); width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.live-notif-x:hover { background: var(--elev); color: var(--text); }
@keyframes notif-in { from { opacity: 0; transform: translateY(-8px); } }
.notif-prompt { display: flex; align-items: center; gap: 10px; margin: 4px 6px 10px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--elev); }
.notif-prompt > span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.notif-prompt .icon-btn { width: 28px; height: 28px; color: var(--muted); }
@media (max-width: 760px) { #live-notifs { top: 10px; right: 10px; left: 10px; width: auto; } }

/* ---------- painel admin ---------- */
body[data-page='admin'] .column { max-width: 1120px; padding: 0 24px 80px; margin-left: max(calc(var(--side) + 8px), calc((100vw - 1120px) / 2)); margin-right: auto; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 18px; }
.admin-head h1 { margin: 0; font-size: 22px; }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-tabs a { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-strong); font-size: 14px; font-weight: 600; color: var(--muted-2); }
.admin-tabs a.on { color: var(--text); background: var(--elev); }
.admin-note { margin: -4px 0 16px; color: var(--muted-2); font-size: 14px; }
.admin-note a { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat-label { color: var(--muted-2); font-size: 13px; }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--muted); font-size: 12px; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; margin-bottom: 16px; }
.chart { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px 12px; }
.chart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.chart-plot { position: relative; padding-left: 0; }
.chart-max { position: absolute; top: -2px; left: 0; font-size: 11px; }
.chart-bars {
  display: flex; align-items: flex-end; gap: 2px; height: 140px; padding-top: 16px;
  border-bottom: 1px solid var(--border); /* linha de base discreta */
}
.chart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; cursor: default; }
.chart-bar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 0; transition: opacity 0.12s; }
.chart-bars:hover .chart-bar { opacity: 0.45; }
.chart-col:hover .chart-bar { opacity: 1; }
.chart-col:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--btn-solid-bg); color: var(--btn-solid-fg); font-size: 12px; font-weight: 600;
  padding: 5px 8px; border-radius: 8px; pointer-events: none; z-index: 2;
}
.chart-axis { display: flex; justify-content: space-between; font-size: 11px; margin-top: 6px; }
.chart-table { margin-top: 8px; font-size: 13px; color: var(--muted-2); }
.chart-table summary { cursor: pointer; }
.chart-table table { margin-top: 8px; border-collapse: collapse; width: 100%; }
.chart-table td, .chart-table th { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 8px; }
.panel h2 { font-size: 15px; margin: 8px 10px 6px; }
.panel .pad { padding: 10px; margin: 0; font-size: 14px; }
.row-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
.row-link:hover { background: var(--hover); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main b { display: flex; align-items: center; gap: 4px; }
.row-meta { flex-shrink: 0; }
.admin-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-filters input { flex: 1; min-width: 200px; border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 0 14px; height: 38px; outline: 0; color: var(--text); }
.admin-filters select { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 12px; padding: 0 12px; height: 38px; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-weight: 600; color: var(--muted-2); font-size: 12px; padding: 12px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--hover); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .actions { text-align: right; }
.admin-table tr.is-suspended td { color: var(--muted); }
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-user > span { display: flex; flex-direction: column; }
.cell-user b { display: flex; align-items: center; gap: 4px; }
.cell-text { white-space: normal !important; min-width: 260px; max-width: 420px; }
.cell-text a:hover { text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.pill-ok { background: color-mix(in srgb, var(--repost) 15%, transparent); color: var(--repost); }
.pill-bad { background: color-mix(in srgb, var(--like) 15%, transparent); color: var(--like); }
.pill-admin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.pager { display: flex; justify-content: space-between; margin-top: 14px; }
.log-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.log-row:last-child { border-bottom: 0; }
.log-row a { color: var(--accent); }
.confirm-note { width: 100%; margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--elev); padding: 8px 10px; resize: none; font-size: 14px; color: var(--text); outline: 0; }
@media (max-width: 760px) {
  body[data-page='admin'] .column { padding: 0 12px 90px; margin: 0; }
  .stat-value { font-size: 22px; }
}

/* ---------- sair (rodapé da barra lateral) ---------- */
.nav-bottom { margin-top: auto; padding-top: 16px; }
.nav-logout { color: var(--muted-2); }
.nav-logout:hover { color: var(--like); background: color-mix(in srgb, var(--like) 10%, transparent); }
@media (max-width: 1240px) {
  /* barra recolhida: "Sair" logo acima do menu ≡ do rodapé */
  .nav-bottom { margin-bottom: 52px; }
}

/* ---------- prévia de link ---------- */
.link-card {
  display: block; margin: 10px 0 4px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--card); max-width: 520px; transition: background 0.12s;
}
a.link-card:hover { background: var(--hover); }
.link-card img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: var(--elev); border-bottom: 1px solid var(--border); }
.link-card-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; }
.link-card-site { color: var(--muted); font-size: 13px; }
.link-card-title { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card-desc { color: var(--muted-2); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card--loading { display: flex; align-items: center; gap: 10px; padding: 14px; }
.link-card--loading .spinner { width: 16px; height: 16px; }
.entry-link { position: relative; }
.entry-link .link-card { margin-top: 8px; }
.link-card-x {
  position: absolute; top: 16px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.7); color: #fff; display: grid; place-items: center; font-size: 13px;
}

/* ---------- enquetes ---------- */
.poll { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; max-width: 560px; }
.poll-opt {
  text-align: left; padding: 0 18px; min-height: 48px; border: 1px solid var(--border-strong); border-radius: 14px;
  font-size: 15px; font-weight: 600; transition: background 0.12s, border-color 0.12s;
}
.poll-opt:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); }
.poll-opt.chosen { border-color: var(--text); }
.poll-res {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 18px;
  border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--elev) 50%, transparent);
}
.poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--elev); border-radius: 14px; transition: width 0.5s ease; }
.poll-res.lead .poll-bar { background: color-mix(in srgb, var(--text) 16%, var(--elev)); }
.poll-text, .poll-pct { position: relative; font-size: 15px; }
.poll-res.mine .poll-text, .poll-res.lead .poll-pct { font-weight: 700; }
.poll-pct { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.poll-res.lead .poll-pct { color: var(--text); }
.poll-foot { color: var(--muted); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }

.entry-poll { margin: 10px 0 2px; }
.poll-edit { display: flex; flex-direction: column; gap: 8px; }
.poll-in {
  height: 48px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 14px; background: transparent;
  font-size: 15px; outline: 0; color: var(--text);
}
.poll-in:focus { border-color: var(--muted); }
.poll-in::placeholder { color: var(--muted); }
.poll-add {
  height: 48px; padding: 0 16px; border: 1px dashed var(--border-strong); border-radius: 14px; text-align: left;
  color: var(--muted); font-size: 15px; font-weight: 600;
}
.poll-add:hover { color: var(--text); border-color: var(--muted); }
.poll-edit-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 2px 2px 0; }
.poll-hours { border: 0; background: transparent; color: var(--muted-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.poll-remove { color: var(--muted-2); font-weight: 600; font-size: 13px; }
.poll-remove:hover { color: var(--text); }
.tool-poll.on { color: var(--text) !important; background: var(--hover); }
.entry + .entry .tool-poll { display: none; }

/* ---------- página do post: respostas aninhadas ---------- */
.thread-activity { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 15px; }
.thread-activity:hover { color: var(--text); }
.rthread { border-bottom: 1px solid var(--border); }
.rthread > .post { border-bottom: 0; }
.rthread.has-child > .post { padding-bottom: 0; }
.rchildren { position: relative; }
/* recuo: o avatar da resposta-filha fica alinhado ao texto da resposta-pai */
.rchild { position: relative; margin-left: 48px; }
.rchild .post { border-bottom: 0; padding-top: 8px; padding-bottom: 6px; }
/* linha curva: desce do avatar da resposta-pai e entra no avatar da filha */
.rchild:first-child::before {
  content: ''; position: absolute; left: -7px; top: -4px; width: 26px; height: 34px;
  border-left: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); border-bottom-left-radius: 16px;
}
.show-replies {
  display: flex; align-items: center; gap: 8px; padding: 2px 24px 16px 72px; color: var(--muted-2);
  font-size: 15px; font-weight: 600; width: 100%; text-align: left;
}
.show-replies:hover { color: var(--text); }
.show-replies .stack .avatar { border: 2px solid var(--card); }
.activity-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px 24px 8px; color: var(--muted-2); font-size: 14px; }
.activity-summary b { color: var(--text); font-size: 16px; }
@media (max-width: 760px) {
  .rchild { margin-left: 40px; }
  .rchild:first-child::before { left: -15px; }
  .show-replies { padding-left: 56px; }
}

/* ---------- PWA ---------- */
.install-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.install-banner img { border-radius: 10px; flex-shrink: 0; }
.install-banner > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.install-banner .icon-btn { width: 30px; height: 30px; color: var(--muted); }

/* "Instalar app" fica logo acima de "Sair", no rodapé da barra */
.nav-install { margin-top: auto; }
.nav-install:not([hidden]) + .nav-bottom { margin-top: 0; padding-top: 2px; }
.nav-install:not([hidden]) { color: var(--accent); }
.install-banner .btn { flex-shrink: 0; }
.confirm-actions.single { grid-template-columns: 1fr; }

/* ---------- iPhone: áreas seguras (Dynamic Island / notch / barra de gestos) ----------
   No app instalado o conteúdo ocupa a tela inteira (viewport-fit=cover + barra translúcida).
   Tudo que encosta nas bordas desconta a área segura; no navegador comum ela vale 0. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
body { padding-left: var(--sal); padding-right: var(--sar); }
/* faixa sólida atrás da ilha: nada passa por baixo dela ao rolar */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--sat); background: var(--bg); z-index: 90; pointer-events: none;
}
.col-head { top: var(--sat); }
.lightbox-close { top: calc(18px + var(--sat)); left: calc(18px + var(--sal)); }
#live-notifs { top: calc(16px + var(--sat)); }
.auth { padding-top: calc(clamp(56px, 14vh, 140px) + var(--sat)); padding-bottom: calc(28px + var(--sab)); }
#toast { bottom: calc(32px + var(--sab)); }
@media (max-width: 760px) {
  .mobile-head { padding-top: var(--sat); height: calc(56px + var(--sat)); }
  #live-notifs { top: calc(10px + var(--sat)); }
  #toast { bottom: calc(80px + var(--sab)); }
  /* modais em tela cheia: cabeçalho abaixo da ilha, rodapé acima da barra de gestos */
  .modal:not(.confirm-modal) { padding-top: var(--sat); padding-bottom: var(--sab); }
  /* confirmações continuam um cartão centralizado (não tela cheia) */
  /* fit-content (e não auto): o <dialog> é posicionado com topo e base 0, então "auto" esticaria até a tela inteira */
  .confirm-modal {
    width: min(320px, calc(100vw - 48px)); max-width: none; height: fit-content; max-height: calc(100dvh - var(--sat) - var(--sab) - 32px);
    border-radius: 16px; border: 1px solid var(--border); margin: auto;
  }
  .confirm-modal[open] { display: block; }
  .confirm-body { padding: 22px 20px 18px; }
  .confirm-actions button { padding: 16px; min-height: 52px; }
  /* mensagens */
  .dm { height: calc(100dvh - 56px - var(--sat)); }
  .dm--open { height: 100dvh; padding-top: var(--sat); }
  body:has(.dm--open)::before { z-index: 90; }
  .column { padding-bottom: calc(90px + var(--sab)); }
}
/* iPhone deitado: o recorte fica na lateral */
@media (orientation: landscape) and (max-width: 1000px) {
  .sidebar { padding-left: calc(16px + var(--sal)); }
}

/* foco por toque não mostra contorno (só navegação por teclado) */
@media (pointer: coarse) {
  .confirm-actions button:focus-visible, .modal-head .link-btn:focus-visible { outline: 0; }
}