/* ==========================================================================
   Community v2 — Messages + Find people (mockups: Community v2.dc.html)
   Loads AFTER plates.css and wins. Scope: .agv2 (replaces .pl.ag6 on the
   community wrap). Dark theme = default; html.daymode = light.
   ========================================================================== */

.agv2{
  --bg:#06090e; --panel:#0b0d13; --card:#101720;
  --ink:#ece7dd; --ink2:#b3aca0; --ink3:#7e786d; --ink4:#57534a;
  --line:rgba(236,231,221,.08); --line2:rgba(236,231,221,.12); --line3:rgba(236,231,221,.16);
  --accent:#84b680; --accent-quiet:#678f65; --accent-line:rgba(132,182,128,.35);
  --green:#5fbf87; --green-ink:#84b680;
  --bubble-in-bg:#101720; --bubble-in-border:rgba(236,231,221,.08); --bubble-in-ink:#c8c2b6;
  --bubble-out-bg:#e8e2d5; --bubble-out-ink:#211d16;
  --btn-bg:#ece7dd; --btn-ink:#08190e;
  --badge-bg:#84b680; --badge-ink:#08190e;
  --hover:#10131a; --active-row:#101720;
  --serif:'Newsreader','Fraunces',Georgia,serif;
  --sans:'Schibsted Grotesk',system-ui,sans-serif;
  font-family:var(--sans); color:var(--ink);
}
html.daymode .agv2{
  --bg:#faf8f3; --panel:#f4f1e9; --card:#fff;
  --ink:#211d16; --ink2:#6b6455; --ink3:#8d8574; --ink4:#8d8574;
  --line:rgba(33,29,22,.08); --line2:rgba(33,29,22,.12); --line3:rgba(33,29,22,.16);
  --accent:#568653; --accent-quiet:#568653; --accent-line:rgba(86,134,83,.35);
  --green:#4d9a63; --green-ink:#4d9a63;
  --bubble-in-bg:#fff; --bubble-in-border:rgba(33,29,22,.08); --bubble-in-ink:#39332a;
  --bubble-out-bg:#211d16; --bubble-out-ink:#f4f1e9;
  --btn-bg:#211d16; --btn-ink:#faf8f3;
  --badge-bg:#568653; --badge-ink:#fff;
  --hover:rgba(33,29,22,.04); --active-row:#fff;
}

/* ── header room-nav (in #app-top, shown only on the Community view) ─────── */
#comm-rooms{display:none; align-items:center; gap:4px; margin-left:.2rem;}
body.comm-open #comm-rooms{display:flex;}
body.comm-open .app-nav{display:none;} /* the rooms take the nav slot */
#comm-back{display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:.5rem .4rem;}
#comm-back svg{stroke:var(--ink3, #7e786d);}
#comm-back span{font:600 .74rem 'Schibsted Grotesk',sans-serif; color:#84b680;}
html.daymode #comm-back span{color:#568653;}
#comm-rooms .comm-room{background:none; border:none; cursor:pointer; font:500 .74rem 'Schibsted Grotesk',sans-serif; color:rgba(120,115,105,.95); padding:.5rem .9rem; border-bottom:2px solid transparent;}
#comm-rooms .comm-room:hover{color:#b3aca0;}
html.daymode #comm-rooms .comm-room:hover{color:#211d16;}
#comm-rooms .comm-room.active{font-weight:600; color:#ece7dd; border-bottom-color:#84b680;}
html.daymode #comm-rooms .comm-room.active{color:#211d16; border-bottom-color:#568653;}
#comm-rooms .comm-sep{width:1px; height:18px; background:rgba(236,231,221,.14); margin:0 .5rem 0 .2rem;}
html.daymode #comm-rooms .comm-sep{background:rgba(33,29,22,.14);}
#comm-rooms .seg-badge{display:inline-grid; place-items:center; min-width:15px; height:15px; border-radius:99px; background:#84b680; color:#08190e; font-size:.6rem; font-weight:700; padding:0 4px; vertical-align:2px;}

/* ── shell ────────────────────────────────────────────────────────────────── */
#view-community .community-wrap.agv2{max-width:90rem; margin:0 auto; padding:1.6rem 2rem 2.6rem; background:none;}
@media (min-width:1920px){ #view-community .community-wrap.agv2{max-width:90rem;} }

/* the two-pane console */
.agv2 .agv2-console{display:grid; grid-template-columns:330px 1fr; min-height:640px; height:calc(100vh - 180px); background:var(--bg); border:1px solid var(--line2); border-radius:16px; overflow:hidden;}
@media (min-width:1920px){ .agv2 .agv2-console{max-width:1440px; margin:0 auto; grid-template-columns:360px 1fr; box-shadow:0 8px 32px -20px rgba(0,0,0,.35);} }

/* sidebar */
.agv2 .agv2-side{display:flex; flex-direction:column; min-height:0; background:var(--panel); border-right:1px solid var(--line);}
.agv2 .agv2-side-head{padding:22px 20px 14px;}
.agv2 .agv2-side-titlerow{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;}
.agv2 .agv2-side-title{font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0; color:var(--ink); letter-spacing:0;}
.agv2 .agv2-roundbtn{width:30px; height:30px; border-radius:50%; background:var(--btn-bg); color:var(--btn-ink); border:none; font-size:1rem; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0;}
.agv2 .agv2-pillbtn{height:30px; border-radius:99px; background:var(--btn-bg); color:var(--btn-ink); border:none; font:600 .72rem var(--sans); padding:0 13px; cursor:pointer;}
.agv2 .agv2-search{display:flex; gap:9px; align-items:center; background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:9px 13px; color:var(--ink3);}
html.daymode .agv2 .agv2-search{background:#fff;}
.agv2 .agv2-search input{flex:1; background:none; border:none; outline:none; font-family:var(--sans); font-size:.8rem; color:var(--ink); box-shadow:none; padding:0; min-width:0;}
.agv2 .agv2-search input::placeholder{color:var(--ink4); font-style:normal;}
.agv2 .agv2-search:focus-within{border-color:var(--accent-line);}

/* people section nav */
.agv2 .agv2-nav{display:flex; flex-direction:column; gap:2px; padding:4px 10px 0;}
.agv2 .agv2-nav button{display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 12px; border-radius:10px; font:500 .84rem var(--sans); color:var(--ink2); background:none; border:none; cursor:pointer; text-align:left;}
.agv2 .agv2-nav button:hover{background:var(--hover); color:var(--ink);}
.agv2 .agv2-nav button.on{font-weight:600; color:var(--ink); background:var(--active-row);}
html.daymode .agv2 .agv2-nav button.on{box-shadow:0 1px 6px -3px rgba(33,29,22,.2);}
html:not(.daymode) .agv2 .agv2-nav button.on{border:1px solid var(--line); padding:9px 11px;}
.agv2 .agv2-count{font-size:.72rem; color:var(--ink3); font-weight:400;}
.agv2 .agv2-badge{display:inline-grid; place-items:center; min-width:19px; height:19px; border-radius:99px; background:var(--badge-bg); color:var(--badge-ink); font-size:.66rem; font-weight:700; padding:0 5px;}

/* sidebar foot — how you appear */
.agv2 .agv2-side-foot{margin-top:auto; padding:16px 20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px;}
.agv2 .agv2-side-foot .hyw-t{font-size:.8rem; font-weight:600; color:var(--ink);}
.agv2 .agv2-side-foot .hyw-s{font-size:.71rem; color:var(--ink3); margin-top:1px;}
.agv2 .agv2-side-foot .hyw-s .lnk{color:var(--accent-quiet); cursor:pointer; background:none; border:none; padding:0; font:inherit;}
.agv2 .agv2-toggle{position:relative; width:34px; height:20px; border-radius:99px; background:var(--accent); border:none; cursor:pointer; flex:none; padding:0;}
.agv2 .agv2-toggle .knob{position:absolute; top:3px; left:17px; width:14px; height:14px; border-radius:50%; background:var(--bg); transition:left .2s;}
html.daymode .agv2 .agv2-toggle .knob{background:#fff;}
.agv2 .agv2-toggle[aria-checked="true"] .knob{left:3px;}

/* ── list pane (shared) ──────────────────────────────────────────────────── */
.agv2 .agv2-main{display:flex; flex-direction:column; min-height:0; background:var(--bg);}
.agv2 .agv2-main-head{display:flex; align-items:baseline; justify-content:space-between; padding:22px 30px 0;}
.agv2 .agv2-main-title{font-family:var(--serif); font-weight:500; font-size:1.3rem; margin:0; color:var(--ink);}
.agv2 .agv2-main-sub{font-size:.76rem; color:var(--ink4);}
.agv2 .agv2-scroll{flex:1; overflow-y:auto; min-height:0; padding:14px 30px 26px;}
@media (min-width:1920px){ .agv2 .agv2-grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 44px;} }

/* person rows (userRow output) */
.agv2 .user-row{display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); background:none; border-radius:0;}
.agv2 .agv2-scroll .user-row:last-child{border-bottom:none;}
.agv2 .ur-avatar{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:1rem; font-weight:700; color:#fff; flex:none; text-transform:uppercase; position:relative;}
.agv2 .pres-dot{position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2.5px var(--bg);}
.agv2 .ur-main{flex:1; min-width:0;}
.agv2 .ur-name{font-size:.94rem; font-weight:600; color:var(--ink); cursor:pointer;}
.agv2 .ur-when{font:400 .74rem var(--sans); color:var(--ink3); letter-spacing:0;}
.agv2 .ur-when.online{color:var(--green-ink);}
.agv2 .ur-bio{font-family:var(--serif); font-style:italic; font-size:.84rem; color:var(--ink2); margin-top:3px;}
.agv2 .ur-meta{font-size:.74rem; color:var(--ink3); margin-top:3px;}
.agv2 .ur-meta.shared{color:var(--accent);}
html.daymode .agv2 .ur-meta.shared{color:#568653;}
.agv2 .ur-action{background:var(--btn-bg); color:var(--btn-ink); border:none; border-radius:99px; padding:9px 17px; font:600 .76rem var(--sans); cursor:pointer; white-space:nowrap;}
.agv2 .ur-action.quiet{background:none; border:none; color:var(--ink3); font-weight:500; padding:9px 4px;}
.agv2 .ur-action.quiet:hover{color:var(--ink2);}
.agv2 .ur-action.ghost{background:none; border:1px solid var(--line3); color:var(--ink);}
.agv2 .ur-action.ghost:hover{border-color:var(--accent-line);}
.agv2 .find-empty,.agv2 .friends-empty{font-size:.8125rem; color:var(--ink3); padding:14px 0;}

/* ── messages: conversation list ─────────────────────────────────────────── */
.agv2 #msg-conversations{flex:1; overflow-y:auto; padding:0 10px 16px; margin-top:0; display:flex; flex-direction:column; gap:2px;}
.agv2 .conv-row{display:flex; gap:12px; padding:12px; border-radius:12px; cursor:pointer; border:none; background:none;}
.agv2 .conv-row:hover{background:var(--hover);}
.agv2 .conv-row.on{background:var(--active-row);}
html.daymode .agv2 .conv-row.on{box-shadow:0 1px 6px -3px rgba(33,29,22,.2);}
html:not(.daymode) .agv2 .conv-row.on{border:1px solid var(--line); padding:11px;}
.agv2 .conv-av{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:.9rem; font-weight:700; color:#fff; flex:none; position:relative; text-transform:uppercase;}
.agv2 .conv-main{flex:1; min-width:0; display:block;}
.agv2 .conv-line{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.agv2 .conv-name{font-family:var(--sans); font-size:.86rem; font-weight:700; color:var(--ink);}
.agv2 .conv-when{font-size:.68rem; color:var(--ink3); white-space:nowrap;}
.agv2 .conv-when.unread{color:var(--accent); font-weight:600;}
.agv2 .conv-prev{font-size:.8rem; color:var(--ink3); margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; -webkit-line-clamp:unset;}
.agv2 .conv-prev.serifprev{font-family:var(--serif); font-style:italic; color:var(--ink2);}
.agv2 .conv-prev.unread{color:var(--ink); font-weight:600;}
.agv2 .conv-unread{align-self:center; min-width:19px; height:19px; border-radius:99px; background:var(--badge-bg); color:var(--badge-ink); font-size:.66rem; font-weight:700; display:grid; place-items:center; padding:0 5px; margin:0; flex:none;}

/* ── messages: thread ────────────────────────────────────────────────────── */
.agv2 .thread-head{display:flex; align-items:center; gap:13px; padding:15px 26px; border-bottom:1px solid var(--line);}
.agv2 .thread-head .conv-av{width:38px; height:38px; font-size:.85rem;}
.agv2 .thread-id{flex:1; min-width:0;}
.agv2 #thread-name{font-family:var(--sans); font-size:.92rem; font-weight:700; color:var(--ink);}
.agv2 .thread-sub{font-size:.72rem; color:var(--ink3); margin-top:1px;}
.agv2 .thread-sub.online{color:var(--green-ink);}
.agv2 .thread-mini{background:none; border:1px solid var(--line3); color:var(--ink); border-radius:99px; padding:7px 15px; font:600 .74rem var(--sans); cursor:pointer;}
.agv2 .thread-mini:hover{border-color:var(--accent-line);}
.agv2 #msg-thread{display:flex; flex-direction:column; gap:4px; padding:24px 30px; overflow-y:auto; flex:1; min-height:0;}
.agv2 .msg-day{display:flex; align-items:center; gap:14px; margin:2px 0 14px;}
.agv2 .msg-day::before,.agv2 .msg-day::after{content:''; flex:1; height:1px; background:var(--line);}
.agv2 .msg-day span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);}
.agv2 .agv2-msg{max-width:68%; margin-top:12px;}
.agv2 .agv2-msg.cont{margin-top:6px;}
.agv2 .agv2-msg.them{display:flex; gap:10px;}
.agv2 .agv2-msg.me{margin-left:auto;}
.agv2 .agv2-msg .msg-av{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#fff; flex:none; align-self:flex-end; text-transform:uppercase;}
.agv2 .agv2-msg.cont .msg-av{visibility:hidden;}
.agv2 .agv2-bubble{border-radius:18px 18px 18px 5px; padding:12px 16px; background:var(--bubble-in-bg); border:1px solid var(--bubble-in-border);}
html.daymode .agv2 .agv2-bubble{box-shadow:0 1px 5px -3px rgba(33,29,22,.15);}
.agv2 .agv2-bubble p{font-family:var(--serif); font-size:.94rem; line-height:1.6; margin:0; color:var(--bubble-in-ink); overflow-wrap:break-word;}
.agv2 .agv2-msg.me .agv2-bubble{border-radius:18px 18px 5px 18px; background:var(--bubble-out-bg); border:none;}
.agv2 .agv2-msg.me .agv2-bubble p{color:var(--bubble-out-ink);}
.agv2 .msg-time{font-size:.66rem; color:var(--ink3); margin-top:5px;}
.agv2 .agv2-msg.me .msg-time{text-align:right;}
@media (min-width:1920px){ .agv2 .agv2-msg{max-width:62ch;} }

/* saved-quote / share cards riding in the thread */
.agv2 .agv2-card{background:var(--bubble-in-bg); border:1px solid var(--accent-line); border-left:3px solid var(--accent); border-radius:12px; padding:14px 16px;}
html.daymode .agv2 .agv2-card{box-shadow:0 1px 5px -3px rgba(33,29,22,.15);}
.agv2 .agv2-card-label{font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:7px;}
.agv2 .agv2-card-quote{font-family:var(--serif); font-style:italic; font-size:.9rem; line-height:1.55; color:var(--ink);}
.agv2 .agv2-card-by{font-size:.7rem; color:var(--ink3); margin-top:7px;}

/* composer */
.agv2 .msg-composer{display:block; padding:14px 26px 18px; border-top:1px solid var(--line); position:relative;}
.agv2 .composer-chips{display:flex; gap:8px; margin-bottom:10px;}
.agv2 .composer-chips button{background:none; border:1px solid var(--line2); color:var(--ink2); border-radius:99px; padding:5px 12px; font:500 .72rem var(--sans); cursor:pointer;}
.agv2 .composer-chips button:hover{border-color:var(--accent-line); color:var(--ink);}
.agv2 .composer-row{display:flex; gap:10px; align-items:flex-end;}
.agv2 .msg-composer textarea{flex:1; background:var(--bubble-in-bg); border:1px solid var(--line3); border-radius:14px; padding:12px 16px; font-family:var(--serif); font-size:.9rem; font-style:italic; color:var(--ink); resize:none; min-height:0;}
.agv2 .msg-composer textarea::placeholder{color:var(--ink4); font-style:italic;}
.agv2 .composer-send{width:42px; height:42px; border-radius:50%; background:var(--btn-bg); color:var(--btn-ink); border:none; cursor:pointer; display:grid; place-items:center; flex:none; font-size:0; padding:0;}
.agv2 .composer-send svg{width:16px; height:16px;}
.agv2 .composer-attach{display:none;} /* chips replace the + on desktop */

/* attach menu (kept for phone) */
.agv2 .attach-menu{position:absolute; bottom:74px; left:22px; background:var(--card); border:1px solid var(--line2); border-radius:12px; padding:6px; display:none; flex-direction:column; gap:2px; z-index:6; box-shadow:0 14px 44px -18px rgba(0,0,0,.4);}
.agv2 .attach-menu.show{display:flex;}
.agv2 .attach-menu button{display:flex; gap:8px; align-items:center; background:none; border:none; color:var(--ink2); font-size:.78rem; padding:8px 12px; border-radius:8px; cursor:pointer; text-align:left;}
.agv2 .attach-menu button:hover{background:var(--hover); color:var(--ink);}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  #view-community .community-wrap.agv2{padding:0 0 1.4rem;}
  /* rooms: pill row under the header */
  body.comm-open #comm-rooms{display:flex; overflow-x:auto; scrollbar-width:none; gap:7px; padding:8px 16px 12px; margin:0; border-bottom:1px solid var(--line, rgba(236,231,221,.08));}
  #comm-rooms::-webkit-scrollbar{display:none;}
  #comm-rooms .comm-sep,#comm-back{display:none;}
  #comm-rooms .comm-room{border:1px solid var(--line3, rgba(236,231,221,.16)); border-radius:99px; padding:6px 13px; white-space:nowrap;}
  #comm-rooms .comm-room.active{background:var(--btn-bg, #ece7dd); color:var(--btn-ink, #08190e); border-color:transparent;}
  /* console collapses */
  .agv2 .agv2-console{display:block; height:auto; min-height:0; border:none; border-radius:0; background:none;}
  .agv2 .agv2-side{border-right:none; background:none;}
  .agv2 .agv2-side-head{padding:18px 18px 0;}
  .agv2 .agv2-side-title{font-size:1.55rem;}
  .agv2 .agv2-nav{flex-direction:row; overflow-x:auto; scrollbar-width:none; padding:12px 18px 4px; gap:7px;}
  .agv2 .agv2-nav::-webkit-scrollbar{display:none;}
  .agv2 .agv2-nav button{width:auto; border:1px solid var(--line3); border-radius:99px; padding:5px 12px; font-size:.72rem; white-space:nowrap; gap:6px;}
  .agv2 .agv2-nav button.on{background:var(--btn-bg); color:var(--btn-ink); border-color:transparent; box-shadow:none;}
  .agv2 .agv2-side-foot{border-top:none; padding:10px 18px;}
  .agv2 .agv2-main-head,.agv2 .agv2-scroll{padding-left:18px; padding-right:18px;}
  /* messages single-pane: list OR thread (reuses existing thread-open class) */
  .agv2 #msg-thread-wrap{display:none;}
  #cpanel-messages.thread-open .agv2-side,#cpanel-messages.thread-open #msg-conv-wrap{display:none!important;}
  #cpanel-messages.thread-open #msg-thread-wrap{display:flex!important; flex-direction:column; height:calc(100vh - 160px);}
  .agv2 .agv2-msg{max-width:86%;}
  .agv2 .thread-head{padding:14px 12px;}
  .agv2 #msg-thread{padding:18px 16px;}
  .agv2 .msg-composer{padding:10px 12px 18px;}
  .agv2 .composer-chips{display:none;}
  .agv2 .composer-attach{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--bubble-in-bg); border:1px solid var(--line3); color:var(--ink2); font-size:1.1rem; cursor:pointer; flex:none;}
  .agv2 .msg-back{display:inline-flex; align-items:center; background:none; border:none; color:var(--ink); font:600 .8rem var(--sans); cursor:pointer; padding:12px 12px 0;}
  /* person rows stack their bio under the action row */
  .agv2 .user-row{flex-wrap:wrap; gap:12px; padding:15px 0;}
  .agv2 .ur-avatar{width:46px; height:46px;}
  .agv2 .ur-bio,.agv2 .ur-meta{flex-basis:100%; margin-top:0;}
  .agv2 .ur-action.quiet{display:none;}
}
@media (min-width:901px){
  .agv2 .msg-back{display:none;}
  .agv2 #msg-conv-wrap{display:flex!important; flex-direction:column; min-height:0;}
  .agv2 #msg-thread-wrap{display:flex!important; flex-direction:column; min-height:0;}
  #cpanel-messages.agv2-panel:not(.thread-open) #msg-thread-wrap>*{display:none;}
  #cpanel-messages.agv2-panel:not(.thread-open) #msg-thread-wrap::before{content:'Choose a conversation'; display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink4); font-family:var(--serif); font-style:italic; font-size:.94rem;}
}

/* ── daymode integration (this repo) ─────────────────────────────────────────
   The site's light theme is a GLOBAL invert (plates.css: html.daymode{filter:
   invert(1) hue-rotate(180deg)}). This surface authors its own explicit light
   palette instead, so the console counter-inverts (the same trick img/video/
   .noinvert use) and the `html.daymode .agv2` variables above then render
   exactly as written. The header room-nav is OUTSIDE .agv2 and stays under
   the global invert like the rest of the header, so the handoff's daymode
   rules for it are reset to the dark values here (the invert produces the
   light look from them, consistently with the app nav beside it). */
html.daymode #view-community .community-wrap.agv2{filter:invert(1) hue-rotate(180deg);}
html.daymode #comm-back span{color:#84b680;}
html.daymode #comm-rooms .comm-room:hover{color:#b3aca0;}
html.daymode #comm-rooms .comm-room.active{color:#ece7dd; border-bottom-color:#84b680;}
html.daymode #comm-rooms .comm-sep{background:rgba(236,231,221,.14);}

/* ≤900px: the room pills take their own full-width line under the wordmark
   instead of colliding with it inside the header flex row */
@media (max-width:900px){
  body.comm-open #app-top{flex-wrap:wrap;}
  body.comm-open #comm-rooms{flex-basis:100%; order:99; margin-left:0;}
}

/* The three untouched rooms (Feed / Debates / Groups) keep their plates
   styling by carrying .pl.ag6 on the panel itself; cap them at the old
   wrap width so they keep their 65rem composure inside the 90rem v2 wrap */
.agv2 .comm-panel.pl.ag6{max-width:65rem; margin-left:auto; margin-right:auto;}