/* Design tokens */
:root {
  --brand: #dc2626; /* red-600 */
  --brand-700: #b91c1c;
  --brand-500: #ef4444;
  --brand-200: #fecaca;
  --ink: #111827; /* gray-900 */
  --muted: #6b7280; /* gray-500 */
  --bg-soft: #fff;
}

/* Components */
.card {
  background: var(--bg-soft);
  border: 1px solid var(--brand-200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.btn { display: inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.5rem .875rem; border-radius: .5rem; font-weight:600; }
.btn-primary { background: var(--brand); color:#fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-outline { border:1px solid var(--brand-200); color:var(--brand-700); background:#fff; }
.btn-outline:hover { border-color: var(--brand); color:#fff; background: var(--brand); }
.btn-danger { background:#991b1b; color:#fff; }
.btn-danger:hover { background:#7f1d1d; }

.input, .textarea, .select { width:100%; border:1px solid #e5e7eb; border-radius:.5rem; padding:.5rem .75rem; }
.input:focus, .textarea:focus, .select:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220,38,38,.15); }

.alert { border:1px solid var(--brand-200); border-radius:.75rem; padding:.75rem 1rem; background:#fff; }
.alert.success { border-color:#bbf7d0; background:#f0fdf4; }
.alert.error { border-color:#fecaca; background:#fef2f2; }
.alert.warning { border-color:#fde68a; background:#fffbeb; }
.alert.info { border-color:#bae6fd; background:#eff6ff; }

.segmented { display:inline-flex; border:1px solid var(--brand-200); border-radius:999px; overflow:hidden; background:#fff; }
.segmented a { padding:.35rem .8rem; font-size:.9rem; }
.segmented a.active { background:#fee2e2; color:var(--brand-700); }

/* Mobile bottom nav helpers */
.mbottom-nav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--brand-200); display:flex; justify-content:space-around; padding:.35rem 0 calc(env(safe-area-inset-bottom)); z-index:40; }
.mbottom-nav a, .mbottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.75rem; color:#7f1d1d; gap:2px; }
.mbottom-nav a, .mbottom-nav form { flex:1 1 0; min-width:0; }
.mbottom-nav button { width:100%; background:transparent; border:0; padding:0; cursor:pointer; }
.mbottom-nav svg { width:22px; height:22px; flex:0 0 auto; }
.mbottom-nav span { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Composer */
.composer { border-radius: 16px; }
.composer-inner { display:flex; flex-direction:column; gap:.5rem; }
.ta-ghost { width:100%; border:1px solid var(--brand-200); border-radius: 12px; padding:.25rem .7rem; background:#fff; min-height:1.75rem; line-height:1.5; }
.ta-ghost:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.composer-actions { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:999px; border:1px solid var(--brand-200); background:#fff; color:var(--brand-700); }
.icon-btn:hover { border-color: var(--brand); color:#fff; background: var(--brand); }
.send-btn { width:2.4rem; height:2.4rem; border-radius:999px; background: var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.send-btn:hover { background: var(--brand-700); }
.filechip { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .55rem; border-radius:999px; border:1px solid var(--brand-200); background:#fff; font-size:.75rem; color:#7f1d1d; }
.filechip .x { cursor:pointer; font-weight:700; }
.attach-preview { display:flex; gap:.4rem; flex-wrap:wrap; }
.attach-preview img { width:56px; height:56px; border-radius:.5rem; object-fit:cover; border:1px solid var(--brand-200); }

/* Since timers */
.sincebar { gap:.5rem; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; border:1px solid var(--brand-200); background:#fff; color:#7f1d1d; }
.chip .val { font-variant-numeric: tabular-nums; color:#111827; font-weight:600; }
/* Global overflow guards to prevent sideways scroll on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
.container { max-width: 900px; overflow-x: hidden; }
#feed { max-width: 100%; overflow-x: hidden; overscroll-behavior: contain; }