/* Krappels (krappels.js): Hyves-knipoog in HAG-goud. Een inhoud, twee plekken: het paneel op de telefoon, de kolom op Home op de computer. */
.krappel-titel{margin:0 0 10px;font-size:22px;font-weight:800;letter-spacing:.03em;background:linear-gradient(100deg,#8d6d2c 0%,#d9bb7a 30%,#fff3cf 50%,#d9bb7a 70%,#8d6d2c 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:feest-glans 3s linear infinite}
.krappel-vorm{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
/* 16 punten: kleiner laat de iPhone inzoomen bij het typen (Simon, 22-9-2026), net als bij de zoekbalk. */
.krappel-invoer{width:100%;box-sizing:border-box;resize:vertical;font-size:16px}
.krappel-lijst{display:flex;flex-direction:column;gap:10px}
.krappel{position:relative;padding:10px 12px;border:1px solid var(--gold-a30);border-radius:14px 14px 14px 4px;background:var(--surface)}
.krappel-voor-mij{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-a30)}
/* Ongelezen: een gouden stip; de lijntjes "Nieuw" en "Eerder" verdelen de lijst. */
.krappel-nieuw::before{content:"";position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.krappel-nieuw .krappel-kop time{margin-right:16px}
.krappel-scheiding{display:flex;align-items:center;gap:10px;font-size:var(--fs-meta);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light)}
.krappel-scheiding::before,.krappel-scheiding::after{content:"";flex:1;height:1px;background:var(--gold-a30)}
.krappel-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-meta)}
.krappel-kop time{margin-left:auto}
.krappel-tekst{margin:8px 0 0;line-height:1.4;overflow-wrap:anywhere}
.krappel-weg{margin-top:6px;font-size:var(--fs-meta)}
/* Het lipje rechts, op elk toestel. */
.krappel-lip{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--gold-a35);border-right:0;border-radius:12px 0 0 12px;background:var(--surface);color:var(--gold-light);font:inherit;font-size:11px;letter-spacing:.06em;cursor:pointer;box-shadow:var(--shadow-fab)}
.krappel-lip span{writing-mode:vertical-rl;transform:rotate(180deg)}
.krappel-lip-appel{width:22px;height:auto}
/* Ongelezen: een rood bolletje met het aantal, links bovenop het lipje (zelfde rood als de To do-badge). */
.krappel-lip-aantal{position:absolute;top:-8px;left:-10px;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;border-radius:11px;background:#bf3038;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.krappel-paneel{position:fixed;inset:0;z-index:30}
.krappel-achter{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
/* Het paneel hangt los van de boven- en onderrand (Simon, 22-9-2026): niet over de hele hoogte,
   zodat het kruisje van het app-venster rechtsboven niet voor de sluitknop wordt aangezien.
   Alleen verticaal scrollen; opzij nooit. */
.krappel-zij{position:absolute;top:calc(64px + var(--safe-top));right:0;bottom:calc(64px + var(--safe-onder));width:min(92vw,420px);box-sizing:border-box;padding:16px 16px 20px;overflow-y:auto;overflow-x:hidden;background:var(--bg);border:1px solid var(--gold-a30);border-right:0;border-radius:18px 0 0 18px;transform:translateX(100%);transition:transform .22s ease-out}
.krappel-zij .chips{margin:0;padding:0;overflow:visible;flex-wrap:wrap}
.krappel-inhoud{max-width:100%;min-width:0}
.krappel-open .krappel-achter{opacity:1}
.krappel-open .krappel-zij{transform:none}
.krappel-dicht{margin-bottom:12px}
/* Op de computer hetzelfde lipje en paneel als op de telefoon (Simon, 22-9-2026: niet te prominent). */