/* Chats: the list (phase 2). Site tokens only, so dark and light follow the site. */
.ch-wrap{width:100%; margin-inline:0; padding-bottom:0;}
.ch-shell{box-sizing:border-box; display:grid; grid-template-columns:minmax(300px,372px) minmax(0,1fr); height:max(480px,calc(100dvh - var(--ch-top,64px))); border-top:1px solid var(--border-soft); background:var(--white); overflow:hidden;}
.ch-side{display:flex; flex-direction:column; min-width:0; min-height:0; border-inline-end:1px solid var(--border-soft);}
.ch-pane{display:grid; place-items:center; min-width:0; background:var(--paper);}

.ch-head{display:grid; gap:12px; padding:16px 14px 0; border-bottom:1px solid var(--border-soft);}
.ch-head h1{margin:0; font:800 22px/1.3 'Sora','Inter',sans-serif; letter-spacing:-.01em; color:var(--navy);}
html[lang="ar"] .ch-head h1,html[lang="ja"] .ch-head h1{font-family:inherit; letter-spacing:0;}
.ch-search{position:relative; display:block;}
.ch-search svg{position:absolute; inset-block:0; inset-inline-start:12px; margin-block:auto; width:18px; height:18px; color:var(--navy-soft); pointer-events:none;}
.ch-search input{width:100%; box-sizing:border-box; height:40px; padding-inline:38px 12px; border-radius:12px; border:1px solid var(--border-soft); background:var(--paper); color:var(--navy); font:500 14px/1 'Inter',sans-serif;}
html[lang="ar"] .ch-search input,html[lang="ja"] .ch-search input{font-family:inherit;}
.ch-search input::placeholder{color:var(--navy-soft);}
.ch-search input:focus-visible{outline:2px solid var(--blue); outline-offset:1px; border-color:transparent;}
.ch-search input::-webkit-search-cancel-button{cursor:pointer;}

.ch-tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin-inline:-4px;}
.ch-tabs::-webkit-scrollbar{display:none;}
.ch-tabs a{position:relative; display:inline-flex; align-items:center; gap:6px; flex:none; padding:10px 10px 12px; color:var(--navy-soft); text-decoration:none; font:600 13.5px/1 'Inter',sans-serif; white-space:nowrap;}
html[lang="ar"] .ch-tabs a,html[lang="ja"] .ch-tabs a{font-family:inherit;}
.ch-tabs a:hover{color:var(--navy);}
.ch-tabs a.is-on{color:var(--navy);}
.ch-tabs a.is-on::after{content:""; position:absolute; inset-inline:8px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--teal);}
.ch-tabs a:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:8px;}
.ch-count{min-width:18px; box-sizing:border-box; padding:3px 5px; border-radius:999px; background:var(--teal); color:#fff; font:700 11px/1 'Inter',sans-serif; text-align:center;}

.ch-view{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
.ch-list{list-style:none; margin:0; padding:0;}
.ch-row{display:flex; align-items:center; gap:12px; padding:11px 14px; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--border-soft); transition:background .12s;}
.ch-row:hover{background:var(--paper);}
.ch-row.is-active{background:var(--blue-tint);}
.ch-row:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}

.ch-av{position:relative; flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--blue-tint); color:var(--blue-dark); font:700 18px/1 'Sora','Inter',sans-serif;}
.ch-av.is-group{border-radius:16px;}
.ch-av.is-premium{box-shadow:0 0 0 2px var(--white),0 0 0 4px #e0a93a;}
.ch-av svg{width:22px; height:22px; color:var(--navy-soft);}
.ch-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit;}
.ch-on{position:absolute; inset-inline-end:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; background:var(--teal); border:2.5px solid var(--white);}

.ch-main{flex:1; min-width:0; display:grid; gap:4px;}
.ch-top,.ch-bot{display:flex; align-items:center; gap:6px; min-width:0;}
.ch-name{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 15px/1.3 'Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .ch-name,html[lang="ja"] .ch-name{font-family:inherit;}
.ch-crown{flex:none; display:inline-grid; width:16px; height:16px; color:#e0a93a;} .ch-crown svg{width:16px; height:16px; color:inherit;}
.ch-time{margin-inline-start:auto; flex:none; font:500 11.5px/1.3 'JetBrains Mono',ui-monospace,monospace; color:var(--navy-soft); white-space:nowrap;}
.is-unread .ch-time{color:var(--ch-ok); font-weight:600;}
.ch-pv{flex:1; min-width:0; display:flex; align-items:center; gap:5px; color:var(--navy-soft); font:400 13.5px/1.35 'Inter',sans-serif;}
html[lang="ar"] .ch-pv,html[lang="ja"] .ch-pv{font-family:inherit;}
.is-unread .ch-pv{color:var(--navy);}
.is-unread .ch-name{font-weight:800;}
.ch-tx{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ch-tx.is-soft{font-style:italic;}
.ch-who{flex:none; color:var(--navy-soft); font-weight:500; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ch-media{flex:none; display:inline-flex; align-items:center; gap:4px;} .ch-media svg{width:15px; height:15px;}
.ch-tick{flex:none; display:inline-grid; width:17px; height:17px; color:var(--navy-soft);} .ch-tick svg{width:17px; height:17px;}
.ch-tick.is-seen{color:var(--teal);}
.ch-flag{flex:none; display:inline-grid; width:15px; height:15px; color:var(--navy-soft);} .ch-flag svg{width:15px; height:15px;}
.ch-badge{flex:none; min-width:20px; box-sizing:border-box; padding:4px 6px; border-radius:999px; background:var(--teal); color:#fff; font:700 11.5px/1 'Inter',sans-serif; text-align:center;}
.ch-badge.is-muted{background:var(--navy-soft);}

.ch-more{display:flex; justify-content:center; padding:14px;}
.ch-more.is-busy .btn{opacity:.55; pointer-events:none;}
.ch-empty{display:grid; justify-items:center; align-content:center; gap:8px; padding:48px 24px; text-align:center; color:var(--navy-soft);}
.ch-empty svg{width:40px; height:40px; color:var(--blue);}
.ch-empty b{font:700 17px/1.4 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .ch-empty b,html[lang="ja"] .ch-empty b{font-family:inherit;}
.ch-empty span{max-width:36ch; line-height:1.6; font-size:14px;}
.ch-empty .btn{margin-top:8px;}
.ch-empty.is-page{border:1px dashed var(--border-soft); border-radius:22px; padding:56px 20px;}

.ch-sk{display:flex; align-items:center; gap:12px; padding:13px 14px;}
.ch-sk i,.ch-sk span{display:block; background:linear-gradient(90deg,var(--border-soft),var(--paper),var(--border-soft)); background-size:200% 100%; animation:ch-sh 1.3s linear infinite; border-radius:8px;}
.ch-sk i{width:48px; height:48px; border-radius:50%; flex:none;}
.ch-sk div{flex:1; display:grid; gap:9px;} .ch-sk span{height:11px;} .ch-sk span+span{width:70%;}
@keyframes ch-sh{to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){.ch-sk i,.ch-sk span{animation:none;}}



/* ---------------------------------------------------------------- the conversation (phase 3) */
.cv-pill[hidden],.cv-conn[hidden],.cv-bar[hidden],.cv-count[hidden],.cv-older[hidden],.ch-count[hidden]{display:none;}
.ch-pane{position:relative; overflow:hidden; place-items:stretch;}
.ch-pane>.ch-empty{place-self:center;}
.cv{display:flex; flex-direction:column; width:100%; height:100%; min-width:0; min-height:0; background:var(--paper);}
.cv-head{display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--white); border-bottom:1px solid var(--border-soft);}
.cv-back{display:none; flex:none; width:38px; height:38px; margin-inline-start:-8px; border:0; border-radius:50%; background:transparent; color:var(--navy); cursor:pointer;}
.cv-back:hover{background:var(--paper);} .cv-back:focus-visible,.cv-act:focus-visible,.cv-bar-x:focus-visible,.cv-send:focus-visible,.cv-q:focus-visible{outline:2px solid var(--blue); outline-offset:1px;}
[dir=rtl] .cv-back .cv-i{transform:scaleX(-1);}
.cv-i{display:inline-grid; place-items:center;} .cv-i svg{width:20px; height:20px;}
.cv-avbox .ch-av{width:40px; height:40px; font-size:16px;}
.cv-who{display:grid; min-width:0; gap:2px;}
.cv-name{display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 15.5px/1.3 'Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .cv-name,html[lang="ja"] .cv-name{font-family:inherit;}
.cv-crown{color:#e0a93a;} .cv-crown svg{width:15px; height:15px;}
.cv-sub{min-height:16px; font:500 12.5px/1.3 'Inter',sans-serif; color:var(--navy-soft);} .cv-sub.is-on{color:var(--ch-ok);}

.cv-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 16px;}
.cv-msgs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.cv-older,.cv-none{text-align:center; color:var(--navy-soft); font-size:13px; padding:10px;}
.cv-none{margin:auto; padding:40px 12px;}
.cv-day{display:flex; justify-content:center; margin:14px 0 8px;}
.cv-day span{padding:4px 12px; border-radius:999px; background:var(--white); border:1px solid var(--border-soft); color:var(--navy-soft); font:600 11.5px/1.4 'Inter',sans-serif;}
.cv-m{position:relative; display:flex; align-items:flex-end; gap:8px; margin-top:2px; max-width:100%;}
.cv-m.is-first{margin-top:10px;}
.cv-m.is-mine{justify-content:flex-end; flex-direction:row;}
.cv-avslot{flex:none; width:28px;} .cv-avslot .ch-av{width:28px; height:28px; font-size:12px;} .cv-avslot .ch-av svg{width:14px; height:14px;}
.cv-b{position:relative; max-width:min(560px,78%); min-width:0; padding:8px 12px 6px; border-radius:16px; background:var(--white); border:1px solid var(--border-soft); color:var(--navy); overflow-wrap:anywhere;}
.is-mine .cv-b{background:var(--blue-tint); border-color:transparent;}
.cv-m:not(.is-mine) .cv-b{border-end-start-radius:5px;} .cv-m.is-mine .cv-b{border-end-end-radius:5px;}
.cv-m:not(.is-last) .cv-b{border-end-start-radius:16px;} .cv-m.is-mine:not(.is-last) .cv-b{border-end-end-radius:16px;}
.cv-author{display:block; margin-bottom:2px; font:700 12.5px/1.4 'Inter',sans-serif; color:var(--ch-ok);}
.cv-t{unicode-bidi:plaintext; white-space:pre-wrap; font:400 14.5px/1.5 'Inter',sans-serif;}
html[lang="ar"] .cv-t,html[lang="ja"] .cv-t{font-family:inherit;}
.cv-t.is-soft{font-style:italic; color:var(--navy-soft); display:flex; align-items:center; gap:6px; white-space:normal;} .cv-mi svg{width:16px; height:16px;}
.cv-link{color:var(--blue-dark); text-decoration:underline; text-underline-offset:2px;}
.cv-meta{display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:2px; font:500 11px/1.2 'JetBrains Mono',ui-monospace,monospace; color:var(--navy-soft);}
.cv-meta em{font-style:normal; opacity:.85;}
.cv-tick svg{width:15px; height:15px;} .cv-tick.is-seen{color:var(--teal);}
.cv-m.is-pending .cv-b{opacity:.7;} .cv-m.is-failed .cv-b{border-color:var(--ch-bad); opacity:1;}
.cv-fail{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:6px; font-size:12.5px; color:#c24a42;}
.cv-fail button{border:0; background:none; padding:0; color:var(--blue-dark); font:600 12.5px/1 'Inter',sans-serif; cursor:pointer; text-decoration:underline;}
.cv-q{display:grid; width:100%; gap:1px; margin-bottom:6px; padding:5px 9px; text-align:start; border:0; border-inline-start:3px solid var(--teal); border-radius:8px; background:rgba(127,140,160,.14); color:var(--navy); cursor:pointer; font:inherit;}
.cv-q b{font:700 12px/1.4 'Inter',sans-serif; color:var(--ch-ok);} .cv-q span{font-size:12.5px; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cv-m.is-flash .cv-b{animation:cv-fl 1.4s ease;} @keyframes cv-fl{0%,60%{box-shadow:0 0 0 3px var(--teal);}100%{box-shadow:0 0 0 0 transparent;}}
.cv-acts{display:flex; gap:2px; align-self:center; opacity:0; transition:opacity .12s;}
.cv-m:hover .cv-acts,.cv-m:focus-within .cv-acts,.cv-m.is-tapped .cv-acts{opacity:1;}
.cv-m.is-mine .cv-acts{order:-1;}
.cv-act{display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:var(--white); border:1px solid var(--border-soft); color:var(--navy-soft); cursor:pointer;}
.cv-act:hover{color:var(--navy);} .cv-act .cv-i svg{width:15px; height:15px;} .cv-act.is-done{color:var(--teal);}
@media (hover:none){.cv-acts{display:none;} .cv-m.is-tapped .cv-acts{display:flex;}}

.cv-pill{position:absolute; inset-inline:0; bottom:84px; margin-inline:auto; width:max-content; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:0; border-radius:999px; background:var(--navy); color:var(--paper); font:600 13px/1 'Inter',sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25);}
.cv-pill .cv-i svg{width:16px; height:16px;}
.cv-conn{margin:0 16px 8px; padding:8px 12px; border-radius:10px; background:#f6e4c2; color:#6b4a0a; font-size:13px; text-align:center;}
.cv-conn.is-bad{margin:12px 16px; background:#f6d5d1; color:#7a1f18; cursor:pointer;}
.cv-foot{background:var(--white); border-top:1px solid var(--border-soft);}
.cv-bar{display:flex; align-items:center; gap:10px; padding:8px 14px 0;}
.cv-bar-i{color:var(--ch-ok);} .cv-bar-t{flex:1; min-width:0; display:grid; padding-inline-start:10px; border-inline-start:3px solid var(--teal);}
.cv-bar-t b{font:700 12.5px/1.4 'Inter',sans-serif; color:var(--ch-ok);} .cv-bar-t span{font-size:13px; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cv-bar-x{display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--navy-soft); cursor:pointer;}
.cv-comp{display:flex; align-items:flex-end; gap:10px; padding:10px 14px 12px;}
.cv-box{position:relative; flex:1; min-width:0;}
.cv-ta{display:block; width:100%; box-sizing:border-box; max-height:140px; padding:11px 14px; resize:none; border:1px solid var(--border-soft); border-radius:18px; background:var(--paper); color:var(--navy); font:400 14.5px/1.4 'Inter',sans-serif;}
html[lang="ar"] .cv-ta,html[lang="ja"] .cv-ta{font-family:inherit;}
.cv-ta::placeholder{color:var(--navy-soft);} .cv-ta:focus-visible{outline:2px solid var(--blue); outline-offset:1px; border-color:transparent;}
.cv-count{position:absolute; inset-inline-end:12px; top:-18px; font:600 11px/1 'JetBrains Mono',ui-monospace,monospace; color:var(--navy-soft);}
.cv-send{flex:none; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:var(--teal); color:#fff; cursor:pointer;}
.cv-send:disabled{background:var(--border-soft); color:var(--navy-soft); cursor:default;}
[dir=rtl] .cv-send .cv-i{transform:scaleX(-1);}
.cv-banner{display:grid; justify-items:center; gap:6px; padding:18px 16px; text-align:center; color:var(--navy-soft); font-size:13.5px; line-height:1.5;}
.cv-banner b{font:700 15px/1.4 'Inter',sans-serif; color:var(--navy);} html[lang="ar"] .cv-banner b,html[lang="ja"] .cv-banner b{font-family:inherit;}
.cv-banner-row{display:flex; gap:10px; margin-top:6px;}
.cv-banner.is-off{background:var(--paper);}

@media (max-width:820px){
  .ch-wrap{width:100%; padding-bottom:0;}
  .ch-shell{grid-template-columns:1fr; height:max(420px,calc(100dvh - var(--ch-top,64px))); border-radius:0; border-inline:0;}
  .ch-side{border-inline-end:0;}
  .ch-pane{display:none;}
  .ch-shell.is-open .ch-side{display:none;}
  .ch-shell.is-open .ch-pane{display:block;}
  .cv-back{display:inline-grid; place-items:center;}
  .cv-b{max-width:84%;}
}
@media (prefers-reduced-motion:reduce){.cv-m.is-flash .cv-b{animation:none;}}

/* ---------------------------------------------------------------- message menu, reactions, pins (phase 4) */
.ch-shell{position:relative;}
.cv-hbtn{margin-inline-start:auto; flex:none; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:transparent; color:var(--navy-soft); cursor:pointer;}
.cv-hbtn:hover{background:var(--paper); color:var(--navy);} .cv-hbtn:focus-visible,.cv-item:focus-visible,.cv-em:focus-visible,.cv-pins:focus-visible,.cv-rx:focus-visible{outline:2px solid var(--blue); outline-offset:1px;}
.cv-pins[hidden]{display:none;}
.cv-pins{display:flex; align-items:center; gap:10px; width:100%; padding:8px 18px; border:0; border-bottom:1px solid var(--border-soft); background:var(--white); color:var(--navy); text-align:start; cursor:pointer; font:inherit;}
.cv-pins-i{color:var(--ch-ok);} .cv-pins-i svg{width:16px; height:16px;}
.cv-pins-t{display:grid; min-width:0; padding-inline-start:10px; border-inline-start:3px solid var(--teal);}
.cv-pins-t b{font:700 12px/1.4 'Inter',sans-serif; color:var(--ch-ok);} .cv-pins-t span{font-size:13px; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cv-pinmark svg{width:12px; height:12px; color:var(--ch-ok);}
.cv-rx{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; padding:0; border:0; background:none; cursor:pointer; font:inherit;}
.cv-chip{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:var(--paper); border:1px solid var(--border-soft); font-size:13px; line-height:1.4; color:var(--navy);}
.cv-chip i{font:600 11px/1 'JetBrains Mono',ui-monospace,monospace; font-style:normal; color:var(--navy-soft);}
.cv-chip.is-mine{background:var(--blue-tint); border-color:var(--teal);}
.cv-m.is-mine .cv-chip{background:var(--white);}

.cv-back-d{position:absolute; inset:0; z-index:30; background:transparent;}
.cv-pop{position:absolute; z-index:31; width:260px; max-width:calc(100% - 16px); padding:6px; border-radius:16px; background:var(--white); border:1px solid var(--border-soft); box-shadow:0 10px 30px rgba(0,0,0,.28);}
.cv-react{display:flex; justify-content:space-between; gap:2px; padding:4px 4px 8px; border-bottom:1px solid var(--border-soft); margin-bottom:4px;}
.cv-em{display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:transparent; font-size:23px; line-height:1; cursor:pointer; color:var(--navy);}
.cv-em:hover{background:var(--paper);} .cv-em.is-on{background:var(--blue-tint); box-shadow:inset 0 0 0 2px var(--teal);}
.cv-em-more svg{width:18px; height:18px; color:var(--navy-soft);}
.cv-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; max-height:260px; overflow-y:auto; padding:4px;}
.cv-mlist{display:grid;}
.cv-item{display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:transparent; color:var(--navy); text-align:start; cursor:pointer; font:600 14px/1.3 'Inter',sans-serif;}
html[lang="ar"] .cv-item,html[lang="ja"] .cv-item{font-family:inherit;}
.cv-item:hover{background:var(--paper);} .cv-item .cv-i svg{width:18px; height:18px; color:var(--navy-soft);}
.cv-item.is-danger,.cv-item.is-danger .cv-i svg{color:var(--ch-bad);}
.cv-confirm{display:grid; gap:6px; padding:12px; text-align:center;} .cv-confirm b{font:700 15px/1.4 'Inter',sans-serif; color:var(--navy);} .cv-confirm span{font-size:13px; color:var(--navy-soft); line-height:1.5;}
.cv-confirm-row{display:flex; gap:8px; justify-content:center; margin-top:8px;}
.btn-danger{background:#d4574e; border-color:var(--ch-bad); color:#fff;}
.cv-pop.is-list{width:300px;} .cv-list-h{padding:8px 10px; font:700 14px/1.3 'Inter',sans-serif; color:var(--navy);}
.cv-list-b{max-height:300px; overflow-y:auto; display:grid; padding:2px 4px 6px; font-size:13px; color:var(--navy-soft);}
.cv-list-r{display:flex; align-items:center; gap:10px; padding:6px;} .cv-list-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--navy); font-weight:600;} .cv-list-e{font-size:20px;}
.cv-av.is-sm{width:32px; height:32px; font-size:13px;}
@media (hover:none){.cv-acts{display:none;}}
@media (max-width:820px){
  .cv-back-d{background:rgba(0,0,0,.4);}
  .cv-pop{position:fixed; inset-inline:0; bottom:0; top:auto !important; left:0 !important; width:auto; max-width:none; border-radius:18px 18px 0 0; padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));}
  .cv-pop.is-list{width:auto;} .cv-em{width:46px; height:46px;} .cv-grid{grid-template-columns:repeat(7,1fr);}
}

/* ===== phase 5: media ===== */
.cv-foot{position:relative;}
.cv-m.has-media .cv-b{padding:4px 4px 6px;} .cv-m.has-media .cv-t{padding:6px 8px 0;} .cv-m.has-media .cv-meta{padding:0 8px;} .cv-m.has-media .cv-author,.cv-m.has-media .cv-q{margin-inline:8px;}
.cv-m.has-media .cv-author{margin-top:4px;} .cv-m.has-media .cv-q{margin-top:4px;}
.cv-ph{display:grid; gap:3px; border-radius:12px; overflow:hidden; width:min(320px,70vw);}
.cv-ph.n2,.cv-ph.n4{grid-template-columns:1fr 1fr;} .cv-ph.n3{grid-template-columns:1fr 1fr;} .cv-ph.n3 .cv-ph-i:first-child{grid-column:1 / -1;}
.cv-ph-i{position:relative; display:block; padding:0; border:0; background:var(--paper); cursor:zoom-in; overflow:hidden; aspect-ratio:1; width:100%;}
.cv-ph.n1 .cv-ph-i{aspect-ratio:4 / 3; max-height:360px;} .cv-ph.n3 .cv-ph-i:first-child{aspect-ratio:2 / 1;}
.cv-ph-i img,.cv-vid img,.cv-gif img{display:block; width:100%; height:100%; object-fit:cover;}
.cv-ph-i:focus-visible,.cv-vid:focus-visible,.cv-gif:focus-visible,.cv-vo-b:focus-visible,.cv-attach:focus-visible,.cv-gifs-i:focus-visible,.cv-stickers-i:focus-visible,.cv-st-tab:focus-visible,.cv-view button:focus-visible,.cv-panel-x:focus-visible,.cv-tile-x:focus-visible,.cv-stage-add:focus-visible,.cv-rec button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.cv-vid{position:relative; display:block; width:min(320px,70vw); padding:0; border:0; border-radius:12px; overflow:hidden; background:#000; cursor:pointer; aspect-ratio:16 / 9; max-height:380px;}
.cv-vid-p{position:absolute; inset:0; margin:auto; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.55); color:#fff;} .cv-vid-p .cv-i{width:26px; height:26px;} .cv-vid-p.is-sm{width:30px; height:30px;} .cv-vid-p.is-sm .cv-i{width:16px; height:16px;}
.cv-vid-d{position:absolute; inset-inline-end:8px; bottom:8px; padding:2px 7px; border-radius:99px; background:rgba(0,0,0,.6); color:#fff; font:600 11px/1.4 'JetBrains Mono',ui-monospace,monospace;}
.cv-gif{position:relative; display:block; width:min(260px,64vw); padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--paper); cursor:zoom-in; min-height:90px;} .cv-gif img{height:auto; max-height:320px;}
.cv-gif-tag{position:absolute; inset-inline-start:8px; top:8px; padding:1px 7px; border-radius:99px; background:rgba(0,0,0,.6); color:#fff; font:700 10px/1.5 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.04em;}
.cv-m.is-sticker .cv-b{background:transparent; border-color:transparent; padding:2px;} .cv-m.is-sticker .cv-reply,.cv-m.is-sticker .cv-q{display:none;}
.cv-st img{display:block; width:min(160px,44vw); height:auto; max-height:160px; object-fit:contain;}
.cv-m.is-sticker .cv-meta{background:rgba(0,0,0,.45); color:#fff; border-radius:99px; padding:1px 8px; width:max-content; margin-inline-start:auto;}
.cv-prog{position:absolute; inset-inline:0; bottom:0; height:4px; background:rgba(0,0,0,.35);} .cv-prog i{display:block; height:100%; width:0; background:var(--teal); transition:width .15s linear;}
.cv-m.is-pending .cv-ph,.cv-m.is-pending .cv-vid{opacity:.8;}
/* voice note */
.cv-vo{display:flex; align-items:center; gap:10px; width:min(260px,62vw); padding:6px 8px;}
.cv-vo-b{flex:none; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:var(--teal); color:#fff; cursor:pointer;} .cv-vo-b .cv-i{width:18px; height:18px;}
.cv-vo-bar{position:relative; flex:1; min-width:0; height:6px; border-radius:99px; background:var(--border-soft); cursor:pointer;} .cv-vo-bar::before{content:""; position:absolute; inset:-10px 0;}
.cv-vo-bar i{position:absolute; inset-block:0; inset-inline-start:0; width:0; border-radius:99px; background:var(--teal);}
.cv-vo-t{flex:none; font:600 12px/1 'JetBrains Mono',ui-monospace,monospace; color:var(--navy-soft); min-width:34px; text-align:end;}
.cv-vo.is-bad{opacity:.55;}
/* composer additions */
.cv-attach{flex:none; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--navy-soft); cursor:pointer;} .cv-attach:hover,.cv-attach[aria-expanded=true]{background:var(--paper); color:var(--navy);} .cv-attach .cv-i{width:22px; height:22px; transition:transform .15s;} .cv-attach[aria-expanded=true] .cv-i{transform:rotate(45deg);}
.cv-attmenu{position:absolute; z-index:20; inset-inline-start:10px; bottom:calc(100% + 6px); width:220px; padding:6px; border-radius:16px; background:var(--white); border:1px solid var(--border-soft); box-shadow:0 10px 30px rgba(0,0,0,.28);}
.cv-attmenu .cv-item .cv-i{width:20px; height:20px; color:var(--blue-dark);}
.cv-stage{display:flex; gap:8px; align-items:center; padding:10px 14px 0; overflow-x:auto;}
.cv-tile{position:relative; flex:none; width:68px; height:68px; border-radius:12px; overflow:hidden; background:var(--paper);} .cv-tile img{display:block; width:100%; height:100%; object-fit:cover;}
.cv-tile-x{position:absolute; inset-inline-end:3px; top:3px; width:22px; height:22px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; padding:0;} .cv-tile-x .cv-i{width:12px; height:12px;}
.cv-stage-add{flex:none; width:68px; height:68px; display:grid; place-items:center; border:2px dashed var(--border-soft); border-radius:12px; background:transparent; color:var(--navy-soft); cursor:pointer;}
.cv-rec{display:flex; align-items:center; gap:12px; padding:10px 14px 12px;} .cv-rec-x{flex:none; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:var(--paper); color:var(--ch-bad); cursor:pointer;}
.cv-rec-dot{width:10px; height:10px; border-radius:50%; background:#d4574e; animation:cv-pulse 1.2s infinite;} @keyframes cv-pulse{50%{opacity:.25;}}
.cv-rec-l{flex:1; font:600 14px/1 'Inter',sans-serif;} .cv-rec-t{font:600 14px/1 'JetBrains Mono',ui-monospace,monospace; color:var(--navy-soft);}
/* panels */
.cv-panel{border-bottom:1px solid var(--border-soft); background:var(--white);}
.cv-panel-h{display:flex; align-items:center; gap:8px; padding:10px 14px 6px;}
.cv-panel-q{flex:1; min-width:0; box-sizing:border-box; padding:10px 14px; border:1px solid var(--border-soft); border-radius:99px; background:var(--paper); color:var(--navy); font:400 14px/1.2 'Inter',sans-serif;} .cv-panel-q:focus-visible{outline:2px solid var(--blue); outline-offset:1px;}
.cv-panel-x{flex:none; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--navy-soft); cursor:pointer; margin-inline-start:auto;} .cv-panel-x:hover{background:var(--paper);}
.cv-panel-b{max-height:min(300px,38vh); overflow-y:auto; padding:4px 14px 12px;}
.cv-panel-n{padding:18px 0; text-align:center; color:var(--navy-soft); font:500 13px/1.4 'Inter',sans-serif;} .cv-more{display:block; margin:8px auto 0;}
.cv-gifs{columns:3 120px; column-gap:6px;} .cv-gifs-i{display:block; width:100%; margin:0 0 6px; padding:0; border:0; border-radius:10px; overflow:hidden; background:var(--paper); cursor:pointer; break-inside:avoid;} .cv-gifs-i img{display:block; width:100%; height:auto; min-height:50px;}
.cv-st-tabs{display:flex; gap:6px; flex:1; min-width:0; overflow-x:auto; padding-bottom:2px;} .cv-st-tab{position:relative; flex:none; width:40px; height:40px; display:grid; place-items:center; padding:5px; border:2px solid transparent; border-radius:12px; background:var(--paper); color:var(--navy); cursor:pointer; font:700 14px/1 'Inter',sans-serif;} .cv-st-tab.is-on{border-color:var(--teal);} .cv-st-tab img{width:100%; height:100%; object-fit:contain;}
.cv-st-lk{position:absolute; inset-inline-end:-2px; bottom:-2px; width:16px; height:16px; padding:2px; border-radius:50%; background:var(--navy); color:var(--white);} .cv-st-lk svg{width:100%; height:100%;}
.cv-stickers{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px;} .cv-stickers-i{padding:4px; border:0; border-radius:12px; background:transparent; cursor:pointer;} .cv-stickers-i:hover:not(:disabled){background:var(--paper);} .cv-stickers-i img{display:block; width:100%; aspect-ratio:1; object-fit:contain;}
.cv-stickers.is-locked{opacity:.4;} .cv-stickers-i:disabled{cursor:not-allowed;}
.cv-lock{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 0 2px; font:600 13px/1.3 'Inter',sans-serif; color:var(--navy-soft);} .cv-lock .cv-i{width:16px; height:16px;}
/* viewer */
.cv-view{position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(5,10,20,.92);}
.cv-view-s{display:grid; place-items:center; width:100%; height:100%; padding:56px 16px; box-sizing:border-box;} .cv-view-s img,.cv-view-s video{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; background:#000;}
.cv-view-x,.cv-view-n{position:absolute; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; padding:0;} .cv-view-x:hover,.cv-view-n:hover{background:rgba(255,255,255,.26);}
.cv-view-x{top:max(12px,env(safe-area-inset-top,0px)); inset-inline-end:12px;} .cv-view-n{top:50%; margin-top:-22px;} .cv-view-n.is-prev{inset-inline-start:12px;} .cv-view-n.is-next{inset-inline-end:12px;}
.cv-view-n.is-prev .cv-i{transform:rotate(90deg);} .cv-view-n.is-next .cv-i{transform:rotate(-90deg);} [dir=rtl] .cv-view-n.is-prev .cv-i{transform:rotate(-90deg);} [dir=rtl] .cv-view-n.is-next .cv-i{transform:rotate(90deg);}
.cv-view-c{position:absolute; bottom:max(14px,env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); padding:3px 12px; border-radius:99px; background:rgba(255,255,255,.14); color:#fff; font:600 12px/1.4 'JetBrains Mono',ui-monospace,monospace;}
@media (max-width:820px){
  .cv-attmenu{inset-inline:10px; width:auto; bottom:calc(100% + 6px);}
  .cv-ph,.cv-vid{width:min(300px,68vw);}
}
@media (prefers-reduced-motion:reduce){.cv-rec-dot{animation:none;} .cv-attach .cv-i,.cv-prog i{transition:none;}}
.cv-comp[hidden],.cv-stage[hidden],.cv-panel[hidden]{display:none;}

.cv-ta{min-height:44px;} .cv-attach,.cv-send,.cv-vo-b,.cv-ph-i,.cv-vid,.cv-gif,.cv-gifs-i,.cv-stickers-i,.cv-st-tab,.cv-item{-webkit-tap-highlight-color:transparent;}

/* ---- Phase 6: group tools ---- */
.ch-title{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ch-tools{display:flex; gap:4px;}
.ch-tool,.gp-ib{display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--navy-soft); cursor:pointer; flex:none;}
.ch-tool:hover,.gp-ib:hover{background:var(--paper); color:var(--navy);}
.ch-tool:focus-visible,.gp-ib:focus-visible,.gp-opt:focus-visible,.gp-tab:focus-visible,.gp-type:focus-visible{outline:2px solid var(--blue); outline-offset:1px;}
.ch-tool .cv-i,.gp-ib .cv-i{display:grid;}
.ch-tool .cv-i svg,.gp-ib .cv-i svg{width:20px; height:20px;}
.ch-invites{padding:10px 14px; border-bottom:1px solid var(--border-soft); background:var(--blue-tint); display:grid; gap:8px;}
.ch-invites[hidden]{display:none;}
.gp-ih{font:700 12px/1 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-soft);}
html[lang="ar"] .gp-ih,html[lang="ja"] .gp-ih{letter-spacing:0; font-family:inherit;}
.gp-inv{display:flex; align-items:center; gap:10px;}
.gp-gt{display:grid; gap:2px; min-width:0; flex:1;}
.gp-gt b{font:700 14px/1.3 'Inter',sans-serif; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gp-gt small,.gp-meta{font:500 12.5px/1.4 'Inter',sans-serif; color:var(--navy-soft);}
html[lang="ar"] .gp-gt b,html[lang="ja"] .gp-gt b,html[lang="ar"] .gp-gt small,html[lang="ja"] .gp-gt small{font-family:inherit;}
.gp-gi{font:400 13px/1.4 'Inter',sans-serif; color:var(--navy-soft); overflow-wrap:anywhere;}
.gp-ga{display:flex; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end;}
.gp-small{padding:6px 12px; font-size:13px; min-height:0;}
.ch-av.is-xl{width:88px; height:88px; font-size:32px; border-radius:28px;} .ch-av.is-xl svg{width:38px; height:38px;}

.gp-back{position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:16px; background:rgba(8,16,30,.5);}
.gp-modal{box-sizing:border-box; width:min(460px,100%); max-height:100%; display:flex; flex-direction:column; border-radius:20px; background:var(--white); border:1px solid var(--border-soft); box-shadow:0 18px 50px rgba(0,0,0,.28); overflow:hidden;}
.gp-mh{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 12px 12px 18px; border-bottom:1px solid var(--border-soft);}
.gp-mh b{font:800 17px/1.3 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .gp-mh b,html[lang="ja"] .gp-mh b{font-family:inherit;}
.gp-mb{display:grid; gap:12px; padding:16px 18px 18px; overflow-y:auto; align-content:start;}
.gp-f{display:grid; gap:6px;}
.gp-fl{font:700 13px/1.2 'Inter',sans-serif; color:var(--navy);}
.gp-fh{color:var(--navy-soft); font-size:12px;}
.gp-in{width:100%; box-sizing:border-box; padding:10px 12px; border-radius:12px; border:1px solid var(--border-soft); background:var(--paper); color:var(--navy); font:500 14px/1.4 'Inter',sans-serif; resize:vertical;}
html[lang="ar"] .gp-in,html[lang="ja"] .gp-in{font-family:inherit;}
.gp-in:focus-visible{outline:2px solid var(--blue); outline-offset:1px; border-color:transparent;}
.gp-types{display:grid; gap:8px;}
.gp-type{display:flex; align-items:center; gap:12px; padding:10px 12px; text-align:start; border-radius:14px; border:1.5px solid var(--border-soft); background:var(--white); color:var(--navy); cursor:pointer;}
.gp-type[aria-checked="true"]{border-color:var(--teal); background:var(--mint-tint);}
.gp-type .cv-i svg{width:22px; height:22px; color:var(--ch-ok);}
.gp-type span:last-child{display:grid; gap:2px;} .gp-type b{font:700 14px/1.3 'Inter',sans-serif;} .gp-type small{font:500 12.5px/1.3 'Inter',sans-serif; color:var(--navy-soft);}
html[lang="ar"] .gp-type b,html[lang="ja"] .gp-type b,html[lang="ar"] .gp-type small,html[lang="ja"] .gp-type small{font-family:inherit;}
.gp-cost{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--paper); color:var(--navy);}
.gp-cost[hidden]{display:none;}
.gp-cost .cv-i svg{width:22px; height:22px; color:#e0a93a;} .gp-cost span:last-child{display:grid; gap:2px;} .gp-cost small{color:var(--navy-soft); font-size:12.5px;}
.gp-cost.is-low small{color:var(--ch-bad); font-weight:700;}
.gp-row{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}
.gp-check{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:14px; border:1px solid var(--border-soft); cursor:pointer;}
.gp-check input{margin-top:3px; width:18px; height:18px; accent-color:var(--teal);} .gp-check span{display:grid; gap:2px;} .gp-check b{font:700 14px/1.3 'Inter',sans-serif; color:var(--navy);} .gp-check small{color:var(--navy-soft); font-size:12.5px;}
.gp-glist,.gp-mlist{list-style:none; margin:0; padding:0; display:grid;}
.gp-grow{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft);}
.gp-none{padding:22px 8px; text-align:center; color:var(--navy-soft); font:500 14px/1.5 'Inter',sans-serif; list-style:none;}
.gp-more{justify-self:center;}
.gp-more[hidden]{display:none;}

.gp-panel,.gp-card{position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; background:var(--white);}
.gp-ph,.gp-cbar{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border-soft);}
.gp-ph b{font:800 16px/1.3 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .gp-ph b,html[lang="ja"] .gp-ph b{font-family:inherit;}
[dir=rtl] .gp-ph .gp-ib .cv-i,[dir=rtl] .gp-cbar .gp-ib .cv-i{transform:scaleX(-1);}
.gp-tabs{display:flex; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border-soft); padding-inline:8px;}
.gp-tabs::-webkit-scrollbar{display:none;}
.gp-tab{position:relative; display:inline-flex; align-items:center; gap:6px; flex:none; padding:12px 12px; border:0; background:transparent; color:var(--navy-soft); font:600 13.5px/1 'Inter',sans-serif; cursor:pointer;}
html[lang="ar"] .gp-tab,html[lang="ja"] .gp-tab{font-family:inherit;}
.gp-tab.is-on{color:var(--navy);} .gp-tab.is-on::after{content:""; position:absolute; inset-inline:8px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--teal);}
.gp-pb,.gp-cbody{flex:1; min-height:0; overflow-y:auto; padding:16px; display:grid; gap:12px; align-content:start; width:100%; box-sizing:border-box; max-width:640px; margin-inline:auto;}
.gp-ctop{display:grid; justify-items:center; gap:6px; text-align:center;}
.gp-ctop h2{margin:6px 0 0; font:800 20px/1.3 'Sora','Inter',sans-serif; color:var(--navy); overflow-wrap:anywhere;}
html[lang="ar"] .gp-ctop h2,html[lang="ja"] .gp-ctop h2{font-family:inherit;}
.gp-avwrap{position:relative;}
.gp-cam{position:absolute; inset-inline-end:-6px; bottom:-6px; width:34px; height:34px; background:var(--teal); color:#fff; border:3px solid var(--white);} .gp-cam:hover{background:var(--teal-dark); color:#fff;}
.gp-intro{margin:0; font:400 14.5px/1.6 'Inter',sans-serif; color:var(--navy); white-space:pre-wrap; overflow-wrap:anywhere;}
html[lang="ar"] .gp-intro,html[lang="ja"] .gp-intro{font-family:inherit;}
.gp-tags{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
.gp-tag{padding:4px 10px; border-radius:999px; background:var(--blue-tint); color:var(--blue-dark); font:600 12.5px/1.2 'Inter',sans-serif;}
.gp-note{display:flex; gap:8px; align-items:center; justify-content:center; padding:8px 12px; border-radius:12px; background:var(--paper); color:var(--navy-soft); font:500 13px/1.4 'Inter',sans-serif;}
.gp-note .cv-i svg{width:16px; height:16px;}
.gp-h{margin:8px 0 0; font:700 12px/1 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-soft);}
html[lang="ar"] .gp-h,html[lang="ja"] .gp-h{letter-spacing:0; font-family:inherit;}
.gp-opts{display:grid; border:1px solid var(--border-soft); border-radius:16px; overflow:hidden;}
.gp-opt{display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border:0; border-bottom:1px solid var(--border-soft); background:var(--white); color:var(--navy); font:600 14px/1.3 'Inter',sans-serif; text-align:start; cursor:pointer;}
html[lang="ar"] .gp-opt,html[lang="ja"] .gp-opt{font-family:inherit;}
.gp-opt:last-child{border-bottom:0;} .gp-opt:hover{background:var(--paper);}
.gp-opt .cv-i svg{width:19px; height:19px; color:var(--navy-soft);}
.gp-opt.is-danger,.gp-opt.is-danger .cv-i svg{color:var(--ch-bad);}
.gp-confirm{display:grid; gap:6px; padding:14px; background:var(--paper); border-top:1px solid var(--border-soft);}
.gp-confirm b{font:700 14px/1.3 'Inter',sans-serif; color:var(--navy);} .gp-confirm span{font:400 13px/1.45 'Inter',sans-serif; color:var(--navy-soft);}
.gp-addbtn{justify-self:start; display:inline-flex; align-items:center; gap:4px;} .gp-addbtn .cv-i svg{width:16px; height:16px;}
.gp-add{display:grid; gap:8px; padding:12px; border-radius:14px; background:var(--paper);} .gp-add[hidden]{display:none;}
.gp-m{border-bottom:1px solid var(--border-soft);}
.gp-mline{display:flex; align-items:center; gap:12px; padding:10px 0;}
.gp-msub{display:grid; margin:0 0 10px; border:1px solid var(--border-soft); border-radius:14px; overflow:hidden;} .gp-msub[hidden]{display:none;}
.gp-role{display:inline-block; justify-self:start; padding:2px 8px; border-radius:999px; background:var(--blue-tint); color:var(--blue-dark); font-weight:700;}
.gp-role.is-r1{background:var(--mint-tint); color:var(--ch-ok);}
.gp-done{color:var(--ch-ok); font:700 13px/1 'Inter',sans-serif;}
.gp-toast{position:absolute; z-index:40; inset-inline:16px; bottom:18px; margin-inline:auto; width:fit-content; max-width:calc(100% - 32px); padding:10px 16px; border-radius:12px; background:var(--navy); color:#fff; font:600 13.5px/1.4 'Inter',sans-serif; opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; pointer-events:none; text-align:center;}
html[lang="ar"] .gp-toast,html[lang="ja"] .gp-toast{font-family:inherit;}
.gp-toast.is-on{opacity:1; transform:none;} .gp-toast.is-bad{background:#b3382f;}
.gp-card .gp-cbar{border-bottom:0;}
@media (min-width:821px){.gp-back-btn{display:none;}}
@media (max-width:820px){
  .gp-back{position:fixed; align-items:end; padding:0; z-index:1000;}
  .gp-modal{width:100%; max-height:92%; border-radius:20px 20px 0 0;}
}
@media (prefers-reduced-motion:reduce){.gp-toast{transition:none;}}

/* Phase 7: text colours that keep 4.5:1 contrast on either theme (the accents are pulled toward the page's text colour) */
.ch-shell{--ch-ok:var(--teal-dark); --ch-bad:#d4574e;}
@supports (color:color-mix(in srgb,red,blue)){
  .ch-shell{--ch-ok:color-mix(in srgb,var(--teal-dark) 62%,var(--navy)); --ch-bad:color-mix(in srgb,#d4574e 66%,var(--navy));}
}
.gp-h{margin-top:8px;}

/* Full-width layout: the chat fills the page under the site header; on wide screens the group panel docks as a third column */
@media (min-width:1181px){
  .gp-panel{inset-inline-start:auto; width:336px; border-inline-start:1px solid var(--border-soft); z-index:6;}
  .gp-panel .gp-pb{padding:14px;}
  .ch-pane.has-gp>.cv{width:calc(100% - 336px);}
  .gp-panel .gp-pback .cv-i{transform:none !important;}
}