/* Rust in het Teamkanaal — aanvullingen shell (voorstel 9) · bouwer B
   Slimme zijbalk (bord 3), statusregel in de kop (bord 3 + 6.4), opgeruimd gesprek (bord 7), volgen (bord 8).
   Maten alleen 12 · 13,5 · 15 · 20; diktes 420/580; oranje alleen voor wat op jou wacht. */

/* ---------- zijbalk: zoek of doe ---------- */
.zoek.zoek-doe{height:34px;background:var(--wit,#FFFFFE);border-color:var(--lijn2,#D5D8D3)}
.zoek.zoek-doe input{font-size:var(--fs-ui,13.5px)}
.zoek.zoek-doe input::placeholder{color:var(--inkt3,#8B9195)}
.zoek.zoek-doe .kbd{font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);border:1px solid var(--lijn2,#D5D8D3);border-radius:4px;padding:0 4px;line-height:16px;flex:none}
.zoek.zoek-doe input::-webkit-search-cancel-button{display:none}

/* ---------- zijbalk: secties en rijen (één regel) ---------- */
.zij .vast-item{font-size:var(--fs-ui,13.5px);font-weight:var(--fw-b,580);padding:7px 10px}
.zsec{display:flex;align-items:center;gap:6px;height:28px;padding:0 18px 0 18px;margin-top:10px;font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);font-weight:var(--fw,420);width:100%;text-align:left}
.zsec .sp{flex:1}
.zsec svg.ster{width:12px;height:12px;fill:currentColor;stroke:none}
.zsec.knop{cursor:pointer;padding-left:14px}
.zsec.knop:hover{color:var(--inkt,#1D2124)}
.zsec .chev{width:12px;height:12px}
.zsec.knop.open .chev{transform:rotate(90deg)}
.zdicht{display:block;width:calc(100% - 16px);margin:0 8px;padding:5px 10px 5px 26px;text-align:left;font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:7px}
.zdicht:hover{background:var(--vlak2,#F6F7F5);color:var(--inkt2,#5C6368)}
.zrij{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px 0 9px;margin:0 8px;border-radius:7px;font-size:var(--fs-ui,13.5px);font-stretch:var(--rek-lijst,94%);white-space:nowrap;overflow:hidden;min-width:0;color:var(--inkt,#1D2124)}
.zrij:hover{background:var(--vlak2,#F6F7F5)}
.zrij.on{background:var(--vlak2,#F6F7F5);box-shadow:inset 0 0 0 1px var(--lijn,#E4E6E2)}
.zrij .nm{font-weight:var(--fw,420);overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;max-width:62%}
.zrij.on .nm{font-weight:var(--fw-b,580)}
.zrij .wat{color:var(--inkt3,#8B9195);overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:0}
.zrij .rt{margin-left:auto;font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);flex:none;padding-left:6px}
.zrij.volg .nm{flex:0 1 auto;max-width:none}
.zrij.volg .wat{flex:none;max-width:40%}
.zrij.volg .zbalk{width:36px}
.zij .leeg-z{font-size:var(--fs-meta,12px)}

/* kleine avatar met ring: jou/vast = ring, bezig = blauwe boog met voortgang, rust = geen ring */
.zav{position:relative;width:24px;height:24px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#ECECE8;color:var(--inkt,#1D2124);
  font-size:var(--fs-meta,12px);font-weight:var(--fw-b,580);font-stretch:88%;letter-spacing:-.01em;line-height:1}
.zav.zmi{background:var(--inkt,#1D2124);color:#fff}
.zav.jou{box-shadow:0 0 0 1.5px var(--vlak,#FBFBFA),0 0 0 3px var(--jou,#C9531D)}
.zav.vast{box-shadow:0 0 0 1.5px var(--vlak,#FBFBFA),0 0 0 3px var(--mis,#A8352B)}
.zav.bezig::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--bezig,#3F63A3) 0 var(--p,30%),var(--lijn,#E4E6E2) var(--p,30%) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px))}
.zav.pauze{opacity:.45}
.zav.lg{width:32px;height:32px;font-size:var(--fs-ui,13.5px)}

/* mini voortgangsbalk */
.zbalk{display:inline-block;width:48px;height:3px;border-radius:2px;background:var(--lijn,#E4E6E2);overflow:hidden;flex:none;vertical-align:middle;margin-left:6px}
.zbalk i{display:block;height:100%;background:var(--bezig,#3F63A3)}

/* ---------- kop: teamnaam + statusregel ---------- */
.dk.rk{min-height:56px;padding:8px 16px 8px 20px;gap:10px;position:relative}
.dk.rk>.zav{width:34px;height:34px;font-size:var(--fs-ui,13.5px)}
.dk.rk .mid{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.dk.rk .nm{font-size:var(--fs-lees,15px);font-weight:var(--fw-b,580);line-height:1.25}
.statusregel{display:inline-flex;align-items:center;gap:12px;margin:1px -6px 0;padding:1px 6px;border-radius:6px;font-size:var(--fs-meta,12px);color:var(--inkt2,#5C6368);white-space:nowrap;max-width:100%;overflow:hidden}
.statusregel:hover,.statusregel[aria-expanded="true"]{background:var(--vlak2,#F6F7F5)}
.statusregel .sd{display:inline-flex;align-items:center;gap:5px}
.statusregel .sd.kost{color:var(--inkt3,#8B9195)}
.statusregel .stip{width:7px;height:7px;border-radius:50%;background:var(--stil,#979DA1);flex:none}
.statusregel .stip.bezig{background:var(--bezig,#3F63A3)}
.statusregel .stip.jou{background:var(--jou,#C9531D)}
.statusregel .chev{width:12px;height:12px;color:var(--inkt3,#8B9195)}
.kstil{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:7px;font-size:var(--fs-ui,13.5px);color:var(--inkt2,#5C6368);flex:none;margin-left:auto}
.kstil:hover{background:var(--vlak2,#F6F7F5);color:var(--inkt,#1D2124)}
.kstil svg{width:14px;height:14px}
.dk.rk .ikoon{width:32px;height:32px}
.dk.rk .kinfo.aan{background:var(--vlak2,#F6F7F5);color:var(--inkt,#1D2124)}

/* ---------- zwevend menu (statusregel, ⋯) ---------- */
.rmenu{position:fixed;z-index:60;width:400px;max-width:calc(100vw - 16px);background:var(--vlak,#FBFBFA);border:1px solid var(--lijn2,#D5D8D3);border-radius:10px;box-shadow:0 8px 28px rgba(28,31,34,.12);padding:6px;
  font-size:var(--fs-ui,13.5px);font-stretch:var(--rek-lijst,94%)}
.rmenu .mk{font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);padding:6px 10px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmenu .mi{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:6px;white-space:nowrap;width:100%;text-align:left;min-width:0;color:var(--inkt,#1D2124)}
.rmenu .mi:hover,.rmenu .mi:focus-visible{background:var(--vlak2,#F6F7F5)}
.rmenu .mi svg{width:15px;height:15px;color:var(--inkt2,#5C6368)}
.rmenu .mi .nm{flex:none}
.rmenu .mi .wat{color:var(--inkt2,#5C6368);overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.rmenu .mi .rt{margin-left:auto;font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);flex:none;display:inline-flex;align-items:center}
.rmenu .mi .rt.sterk{color:var(--inkt,#1D2124);font-size:var(--fs-ui,13.5px)}
.rmenu .mi.zacht{color:var(--inkt2,#5C6368)}
.rmenu .mi .nm:only-of-type{flex:1}
.rmenu .sch{height:1px;background:var(--lijn,#E4E6E2);margin:6px 4px}
.rmenu .zav{width:22px;height:22px}

/* ---------- gesprek op leesbreedte ---------- */
.view.team .tijdlijn{padding:18px 24px 12px;gap:0}
.tl-kol{width:100%;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.view.team .composer{width:calc(100% - 48px);max-width:680px;margin:8px auto 14px}
.tl-kol .dagl{font-size:var(--fs-meta,12px);display:flex;align-items:center;gap:12px;margin:6px 0 2px}
.tl-kol .dagl::before,.tl-kol .dagl::after{content:"";flex:1;height:1px;background:var(--lijn,#E4E6E2)}
.tl-kol .msg{max-width:none}
.tl-kol .msg .van{display:flex;align-items:baseline;gap:7px;font-size:var(--fs-ui,13.5px);margin-bottom:1px}
.tl-kol .msg .van b{font-weight:var(--fw-b,580)}
.tl-kol .msg .van .tm{font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195)}
.tl-kol .msg .tx{font-size:var(--fs-lees,15px);line-height:1.55;font-stretch:var(--rek-lees,100%)}
.tl-kol .msg.vervolg{margin-top:-6px}
.tl-kol .avgat{width:34px;flex:none}
.tl-kol .msg.ik{max-width:78%;margin-left:auto}
.tl-kol .msg.ik .tx{background:#EFEFEC;color:var(--inkt,#1D2124);border-radius:12px;padding:8px 12px}
.tl-kol .msg.ik .van{display:block;font-size:var(--fs-meta,12px)}

/* updates gebundeld: één regel die openklapt */
.upd{display:flex;flex-direction:column}
.upd-k{display:flex;align-items:center;gap:6px;height:26px;font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);width:100%;text-align:left;min-width:0}
.upd-k:hover{color:var(--inkt2,#5C6368)}
.upd-k .chev{width:12px;height:12px;flex:none}
.upd-k[aria-expanded="true"] .chev{transform:rotate(90deg)}
.upd-k .n{flex:none}
.upd-k .uw{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.upd-k .lijn{flex:1;height:1px;background:var(--lijn,#E4E6E2);min-width:16px;margin:0 4px}
.upd-k .tm{flex:none}
.upd-l{padding:2px 0 4px 18px;display:flex;flex-direction:column}
.upd-r{display:flex;align-items:center;gap:8px;min-height:26px;font-size:var(--fs-meta,12px);color:var(--inkt2,#5C6368);min-width:0}
.upd-r b{color:var(--inkt,#1D2124);font-weight:var(--fw-b,580);flex:none}
.upd-r .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upd-r .rt{flex:none;color:var(--inkt3,#8B9195);display:inline-flex;align-items:center}
.upd-r.vast,.upd-r.vast b{color:var(--mis,#A8352B)}

/* plan: één regel met balkje, klik klapt de stappen open */
.plan{margin-top:8px;border:1px solid var(--lijn,#E4E6E2);border-radius:10px;background:var(--vlak,#FBFBFA);transition:box-shadow .3s}
.plan .ph{display:flex;align-items:center;gap:4px;padding-right:8px;min-width:0}
.plan .pk{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 12px;font-size:var(--fs-ui,13.5px);text-align:left;color:var(--inkt,#1D2124)}
.plan .pk svg{width:15px;height:15px;color:var(--inkt2,#5C6368)}
.plan .pk b{font-weight:var(--fw-b,580);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.plan .pk .sp{flex:1}
.plan .pk .n{font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);flex:none}
.plan .pk .zbalk{width:64px}
.plan .chevw{display:inline-flex;color:var(--inkt3,#8B9195);pointer-events:none}
.plan .chevw .chev{width:13px;height:13px}
.plan.open .chevw .chev{transform:rotate(90deg)}
.plan .pk:hover b{text-decoration:underline;text-decoration-color:var(--lijn2,#D5D8D3);text-underline-offset:3px}
.pstap{list-style:none;border-top:1px solid var(--lijn,#E4E6E2);padding:4px 12px 6px}
.pstap li{display:flex;align-items:center;gap:9px;min-height:30px;font-size:var(--fs-ui,13.5px);color:var(--inkt,#1D2124);min-width:0}
.pstap li .ck{width:13px;height:13px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;border:1.3px solid var(--lijn2,#D5D8D3);background:transparent}
.pstap li.on .ck{background:var(--klaar,#4C7A4F);border-color:var(--klaar,#4C7A4F);color:#fff}
.pstap li.on .ck svg,.pstap li.mis .ck svg{width:8px;height:8px;stroke-width:2.8}
.pstap li.nu .ck{border:2px solid var(--bezig,#3F63A3);border-right-color:transparent}
.pstap li.mis .ck{background:var(--mis,#A8352B);border-color:var(--mis,#A8352B);color:#fff}
.pstap li.on .tx{color:var(--inkt2,#5C6368)}
.pstap li .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.pstap li .pw{flex:none;font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195)}
.pstap li.leeg{color:var(--inkt3,#8B9195)}
.pstap li.bew{padding:4px 0}

/* volgen: ster */
.volgk{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border-radius:7px;font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195);flex:none}
.volgk svg{width:13px;height:13px}
.volgk:hover{background:var(--vlak2,#F6F7F5);color:var(--inkt,#1D2124)}
.volgk.aan{color:var(--inkt,#1D2124)}
.volgk.aan svg{fill:currentColor}
.volgk.klein{height:22px;padding:0 4px}
.upd-r .volgk.klein{opacity:.75}
.upd-r .volgk.klein.aan{opacity:1}

/* de kaart die op jou wacht: het enige oranje blok */
.tl-kol .obj{max-width:none}
.tl-kol .obj.vraag{box-shadow:none;border-color:var(--jou-rand,#E9C3AE);background:#FDF6F2}
.tl-kol .obj.vraag .oh{font-size:var(--fs-ui,13.5px);padding:9px 14px;color:var(--inkt2,#5C6368);gap:0;min-width:0}
.tl-kol .obj.vraag .oh b{color:var(--jou,#C9531D);font-weight:var(--fw-b,580);flex:none}
.tl-kol .obj.vraag .oh .wat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-right:10px}
.tl-kol .obj.vraag .oh .r{font-size:var(--fs-meta,12px);color:var(--inkt3,#8B9195)}
.tl-kol .obj.vraag .ob{background:#FDF6F2}
.tl-kol .obj.vraag .ov{background:#FDF6F2;border-top:0;padding-top:4px}
.flits{box-shadow:0 0 0 3px var(--lijn2,#D5D8D3)!important;border-radius:10px}

/* sinds je weg was */
.sinds{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px}
.sinds .streep{display:flex;align-items:center;gap:12px;font-size:var(--fs-meta,12px);font-weight:var(--fw-b,580);color:var(--inkt,#1D2124)}
.sinds .streep::before,.sinds .streep::after{content:"";flex:1;height:1px;background:var(--inkt,#1D2124)}
.sinds .sam{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--lijn,#E4E6E2);border-radius:10px;padding:10px 12px;background:var(--vlak2,#F6F7F5)}
.sinds .sam .in{flex:1;min-width:0}
.sinds .zin{font-size:var(--fs-lees,15px);line-height:1.5}
.sinds .zin b{font-weight:var(--fw-b,580)}
.sinds .acties{display:flex;gap:14px;margin-top:4px;flex-wrap:wrap}
.sinds .acties button{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-meta,12px);color:var(--inkt2,#5C6368);height:24px}
.sinds .acties button:hover{color:var(--inkt,#1D2124)}
.sinds .acties svg{width:12px;height:12px}

/* ---------- mobiel ---------- */
@media (max-width:860px){
  .zoek.zoek-doe .kbd{display:none}
  .zrij{height:44px;margin:0;border-radius:0;padding:0 18px;border-bottom:1px solid var(--lijn,#E4E6E2);font-size:var(--fs-lees,15px)}
  .zrij .rt{font-size:var(--fs-ui,13.5px)}
  .zsec{padding:0 18px;margin-top:14px}
  .zsec.knop{padding-left:16px}
  .zdicht{margin:0;width:100%;padding:10px 18px 10px 34px;border-radius:0}
  .dk.rk{padding:8px 8px 8px 6px;gap:6px}
  .dk.rk>.zav{display:none}
  .dk.rk .kstil .lbl{display:none}
  .dk.rk .kstil{padding:0 8px;margin-left:auto}
  .dk.rk .kinfo{display:none}
  .statusregel{gap:9px}
  .statusregel .sd.kost{display:none}
  .view.team .tijdlijn{padding:12px 14px 10px}
  .view.team .composer{width:calc(100% - 20px);margin:6px auto 8px}
  .tl-kol .msg.ik{max-width:88%}
  .tl-kol .avgat{width:34px}
  .plan .pk .zbalk{display:none}
  .volgk span{display:none}
  .rmenu{width:auto;left:8px!important;right:8px}
}