/* home.css — Brewly Home shell: bottom tab bar, feed cards, whispers, sub-tabs.
   Extends brewly.css + profile.css. */

/* ============================================================
   Bottom tab bar
   ============================================================ */
.tabbar {
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:flex-end; justify-content:space-around;
  padding:10px 8px 30px; gap:2px;
  background:var(--paper);
  border-top:2.5px solid var(--ink);
  box-shadow:0 -4px 0 0 rgb(var(--soft-rgb) / .06);
}
.tab {
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer; padding:4px 2px;
  color:var(--ink-muted); font-family:'Patrick Hand',cursive; font-size:12.5px;
  -webkit-tap-highlight-color:transparent; transition:color .12s;
}
.tab--on { color:var(--accent); }
.tab__ic { position:relative; display:flex; }
.tab__badge {
  position:absolute; top:-5px; right:-8px; min-width:17px; height:17px; padding:0 4px;
  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%; background:var(--accent); color:var(--on-accent);
  border:2px solid var(--paper); font-family:'Kalam',cursive; font-weight:700; font-size:10px;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
}
/* center "Spill" raised button */
.tab--spill { flex:0 0 auto; }
.tab__spill {
  width:58px; height:58px; margin-top:-22px; border-radius:var(--wob-blob);
  background:var(--accent); color:var(--on-accent); border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--sh-hard); transition:transform .12s, box-shadow .12s;
}
.tab__spill:hover { transform:translateY(-2px) rotate(calc(var(--tilt) * -5deg)); box-shadow:var(--sh-hard-lg); }
.tab__spill:active { transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--shadow-ink); }

/* ============================================================
   Sub-tabs (For You / Stakeout)
   ============================================================ */
.subtabs { display:flex; gap:24px; padding:2px 4px 0; }
.subtab {
  background:none; border:none; cursor:pointer; padding:6px 2px 10px; position:relative;
  font-family:'Kalam',cursive; font-weight:700; font-size:19px; color:var(--ink-muted);
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.subtab--on { color:var(--ink); }
.subtab--on::after {
  content:""; position:absolute; left:-2px; right:-2px; bottom:2px; height:6px;
  background:no-repeat center/100% 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'%3E%3Cpath d='M1 4c10-5 18 3 30 0s18-4 29 1' fill='none' stroke='%23ff4d4d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============================================================
   Feed card
   ============================================================ */
.fcard {
  border:2px solid var(--ink); border-radius:var(--wob-md);
  background:var(--surface); box-shadow:var(--sh-soft);
  padding:14px 15px 12px; margin-bottom:14px;
}
.fcard--tea { background:var(--postit); color:var(--postit-ink); }
.fcard__head { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.fcard__av { width:46px; height:46px; flex:0 0 auto; border-radius:var(--wob-blob); border:2px solid var(--ink); overflow:hidden; box-shadow:var(--sh-soft); }
.fcard__av img { width:100%; height:100%; object-fit:cover; display:block; }
.fcard__name { font-family:'Kalam',cursive; font-weight:700; font-size:18px; display:flex; align-items:center; gap:6px; }
.fcard__handle { font-family:'Patrick Hand',cursive; font-size:14px; color:var(--ink-muted); }
.fcard__body { font-family:'Patrick Hand',cursive; font-size:18px; line-height:1.4; margin:0 0 10px; }
.fcard__src {
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-family:'Patrick Hand',cursive; font-size:14px;
  color:var(--secondary); margin:0 0 10px;
}
/* reaction row */
.frow { display:flex; align-items:center; gap:18px; margin-top:10px; }
.frow button {
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  color:inherit; opacity:.78; font-family:'Patrick Hand',cursive; font-size:15px; padding:0;
  -webkit-tap-highlight-color:transparent; transition:opacity .12s, color .12s;
}
.frow button:hover { opacity:1; color:var(--accent); }

/* feed top note (wire / kettle headers) */
.feednote {
  border:2px solid var(--ink); border-radius:var(--wob-md); padding:12px 15px; margin-bottom:14px;
  display:flex; gap:11px; align-items:center; box-shadow:var(--sh-soft);
}

/* ============================================================
   Whispers
   ============================================================ */
.wrow {
  display:flex; align-items:center; gap:13px; width:100%; box-sizing:border-box;
  padding:13px 6px; cursor:pointer; text-align:left; background:none; border:none;
  border-bottom:2px dashed var(--muted); -webkit-tap-highlight-color:transparent;
  font-family:'Patrick Hand',cursive;
}
.wrow:last-child { border-bottom:none; }
.wrow__av { position:relative; width:54px; height:54px; flex:0 0 auto; border-radius:var(--wob-blob); border:2px solid var(--ink); overflow:hidden; box-shadow:var(--sh-soft); }
.wrow__av img { width:100%; height:100%; object-fit:cover; display:block; }
.wrow__dot { position:absolute; bottom:-2px; right:-2px; width:15px; height:15px; border-radius:50%; background:var(--green,#1f8a5b); border:2.5px solid var(--surface); }
.wrow__name { font-family:'Kalam',cursive; font-weight:700; font-size:18px; display:flex; align-items:center; gap:6px; }
.wrow__last { font-size:15px; color:var(--ink-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wrow__last--unread { color:var(--ink); }
.wrow__meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.wrow__time { font-size:13px; color:var(--ink-muted); }
.wrow__unread {
  min-width:22px; height:22px; padding:0 6px; border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  background:var(--accent); color:var(--on-accent); border:2px solid var(--ink);
  font-family:'Kalam',cursive; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-sizing:border-box;
}

/* whisper thread bubbles */
.bubble {
  max-width:74%; padding:10px 14px; font-family:'Patrick Hand',cursive; font-size:17px; line-height:1.35;
  border:2px solid var(--ink); box-shadow:var(--sh-soft); margin-bottom:10px;
}
.bubble--them { background:var(--surface); color:var(--ink); border-radius:22px 22px 22px 6px / 20px 20px 22px 8px; align-self:flex-start; }
.bubble--me { background:var(--accent); color:var(--on-accent); border-radius:22px 22px 6px 22px / 20px 20px 8px 22px; align-self:flex-end; }
.bubble__t { font-size:12px; opacity:.6; margin-top:3px; }

/* ============================================================
   Search
   ============================================================ */
.searchbar {
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  border:2.5px solid var(--ink); border-radius:var(--wob-pill); background:var(--surface);
  padding:10px 16px; box-shadow:var(--sh-soft);
}
.searchbar input {
  flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--ink);
  font-family:'Patrick Hand',cursive; font-size:19px;
}
.searchbar input::placeholder { color:var(--ink-muted); }

.urow {
  display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
  padding:12px 4px; cursor:pointer; text-align:left; background:none; border:none;
  border-bottom:2px dashed var(--muted); -webkit-tap-highlight-color:transparent;
}
.urow:last-child { border-bottom:none; }
.urow__av { width:52px; height:52px; flex:0 0 auto; border-radius:var(--wob-blob); border:2px solid var(--ink); overflow:hidden; box-shadow:var(--sh-soft); }
.urow__av img { width:100%; height:100%; object-fit:cover; display:block; }
.urow__name { font-family:'Kalam',cursive; font-weight:700; font-size:17px; display:flex; align-items:center; gap:5px; }
.urow__handle { font-family:'Patrick Hand',cursive; font-size:14px; color:var(--ink-muted); }
.urow__bio { font-family:'Patrick Hand',cursive; font-size:14px; color:var(--ink-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* follow button (compact + block) */
.followb {
  font-family:'Patrick Hand',cursive; font-size:16px; cursor:pointer; white-space:nowrap;
  border:2px solid var(--ink); border-radius:var(--wob-pill); padding:7px 16px; min-height:40px;
  background:var(--accent); color:var(--on-accent); box-shadow:var(--sh-soft);
  -webkit-tap-highlight-color:transparent; transition:all .12s; flex:0 0 auto;
}
.followb--on { background:var(--surface); color:var(--ink); }
.followb:active { box-shadow:none; transform:translate(2px,2px); }

/* trending chips */
.tchip {
  display:inline-flex; align-items:center; font-family:'Patrick Hand',cursive; font-size:16px;
  border:2px solid var(--ink); border-radius:var(--wob-pill); padding:7px 14px; background:var(--surface);
  color:var(--secondary); box-shadow:var(--sh-soft); cursor:pointer; -webkit-tap-highlight-color:transparent;
}