/* Workspace components: three-pane inbox, conversation, AI draft, customer & pet panel, call view. */

/* ---------------------------------------------------------------- panes */
.ws { display: grid; grid-template-columns: minmax(290px, 336px) minmax(0, 1fr) minmax(290px, 330px); gap: 18px; height: 100%; min-height: 0; }
.pane { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid transparent; border-radius: 22px; background: var(--glass); box-shadow: var(--drop); overflow: hidden; }
.pane-h { display: flex; align-items: center; gap: 10px; padding: 20px 20px 12px; }
.pane-h h2 { font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }
.only-narrow, .only-mid, .side-x { display: none !important; }

/* list */
.ti-tabs { display: flex; gap: 3px; margin: 0 16px 10px; padding: 3px; border-radius: 12px; background: var(--w08); box-shadow: inset 0 0 0 1px var(--w0c); flex: none; min-width: 0; }
.ti-tab { flex: 1 1 auto; min-width: 0; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent; color: var(--t2); font-size: 11.5px; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.ti-tab:hover { color: var(--t1); }
.ti-tab.on { background: var(--w16); color: var(--t1); box-shadow: inset 0 0 0 1px var(--w12); }
.ti-tab .n { color: var(--t3); font-size: 11px; }
.ti-tab.on .n { color: var(--t2); }
.ti-tab.hot .n { color: var(--brand-t); }
.ti-tab.more { flex: 0 0 auto; }
.ti-tab.more svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ti-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--w1c) transparent; }
.ti {
  position: relative; display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 12px 12px 10px; border-radius: 11px;
  transition: background 0.2s, box-shadow 0.2s; animation: tiIn 0.6s var(--ease) both; animation-delay: calc(var(--i) * 18ms);
}
.ti + .ti::after { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--w0b); }
.ti:hover + .ti::after, .ti.on + .ti::after, .ti:hover::after, .ti.on::after { opacity: 0; }
@keyframes tiIn { from { opacity: 0; transform: translateY(6px); } }
.ti:hover { background: var(--w08); }
.ti.on { background: var(--w17); box-shadow: inset 0 0 0 1px var(--w1a); }
.ti.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--t1); opacity: 0.7; }
.ti.arrive { animation: arrive 1.4s var(--ease) both; }
@keyframes arrive { 0% { opacity: 0; transform: translateY(-14px); background: #c8202b40; } 40% { opacity: 1; transform: none; background: #c8202b30; } 100% { background: transparent; } }
.ti-ch { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--w0d); box-shadow: inset 0 0 0 1px var(--w0f); }
.ti-ch svg { width: 14px; height: 14px; stroke: var(--t2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ti-ch.ch-telefoon { background: color-mix(in srgb, var(--up) 8%, transparent); } .ti-ch.ch-telefoon svg { stroke: var(--up-t); }
.ti-ch.ch-chat { background: color-mix(in srgb, var(--info) 8%, transparent); } .ti-ch.ch-chat svg { stroke: var(--info-t); }
.ti-ch.ch-mail svg { stroke: var(--t-nav); }
.ti-ch.lg { width: 38px; height: 38px; border-radius: 12px; } .ti-ch.lg svg { width: 16px; height: 16px; }
.ti-ch.sm { width: 22px; height: 22px; border-radius: 7px; } .ti-ch.sm svg { width: 11px; height: 11px; }
.ti-r1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ti-r1 b { font-weight: 500; font-size: 13px; min-width: 0; color: var(--t1); }
.ti-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: transparent; }
.u-direct .ti-dot { background: var(--brand-hi); box-shadow: 0 0 8px var(--brand); }
.u-hoog .ti-dot { background: var(--warn); }
.ti-w { margin-left: auto; font-size: 11px; color: var(--t3); flex: none; padding-left: 6px; }
.u-direct .ti-w { color: var(--brand-t); }
.ti-r2 { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 4px; padding-left: 13px; }
.ti-gl { flex: none; display: inline-flex; }
.ti-gl svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ti-sub { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t2); }
.ti-st { flex: none; font-size: 10.5px; color: var(--t3); white-space: nowrap; }
.ti-st.st-agent { color: var(--brand-t); }
.ti-guest { font-size: 11px; color: var(--t3); flex: none; }
.btn.xs.on { background: var(--w14); color: var(--t1); }
/* popover with free content: Filter, Labels */
.panel-pop { padding: 8px 10px 10px; }
.filter-pop { width: 320px; max-width: calc(100vw - 24px); max-height: none; }
.fp-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 0 6px 6px; }
.fp-row .chip { height: 26px; padding: 0 10px; font-size: 11.5px; }
.fp-a { display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; margin-top: 4px; }
.pop .fp-row button, .pop .fp-a button { width: auto; display: inline-flex; }
.pop .fp-row .chip.on { color: var(--t1); }
.labels-pop { width: 270px; }
.labels-pop .lab-row { display: flex; width: 100%; height: 34px; border-radius: 10px; background: transparent; box-shadow: none; padding: 0 8px 0 10px; }
.labels-pop .lab-row:hover { background: var(--w0c); }
.labels-pop .lab-row .lab-k { width: 92px; display: inline; }
.labels-pop .lab-row .lab-v { flex: 1; }
.ti-type { font-size: 10.5px; color: var(--t3); margin-left: 2px; }
.xs-tag { height: 17px !important; font-size: 10px !important; padding: 0 6px !important; flex: none; }
.empty { display: grid; place-items: center; gap: 4px; text-align: center; padding: 40px 10px; color: var(--t2); }
.empty svg { width: 22px; height: 22px; stroke: var(--t3); fill: none; stroke-width: 1.5; margin-bottom: 6px; }
.big-empty { flex: 1; }

/* conversation */
.ws-conv.swap-in > * { animation: cvIn 0.55s var(--ease) both; }
.ws-conv.swap-in > *:nth-child(2) { animation-delay: 40ms; } .ws-conv.swap-in > *:nth-child(3) { animation-delay: 80ms; } .ws-conv.swap-in > *:nth-child(4) { animation-delay: 120ms; }
@keyframes cvIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.cv-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 14px; flex: none; }
.cv-head-r { display: flex; align-items: center; gap: 14px; flex: none; }
.cv-title { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.ws-conv { container-type: inline-size; }
.ws-side { animation: cvIn 0.9s var(--ease) 0.15s both; }
@container (max-width: 780px) { .lab-k { display: none; } .lab { padding-left: 12px; } #via { display: none; } }
.cv-meta { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--t3); margin-top: 2px; }
.cv-meta span + span::before { content: '·'; margin-right: 6px; }
.ht { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--t3); }
.ht svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.eng-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--t3); white-space: nowrap; transition: color 0.4s; }
.eng-pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eng-pill.on { color: var(--up-t); }
.eng-pill.pending svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cv-labels { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 22px 8px; align-items: center; flex: none; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.cv-labels::-webkit-scrollbar { display: none; }
.cv-labels::after { content: ''; flex: none; width: 20px; }
.lab { flex: none; }
.lab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border: 0; border-radius: 999px; background: var(--w0a); box-shadow: none; font-size: 12px; transition: background 0.2s; }
.lab:hover { background: var(--w14); }
.lab > svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; }
.lab-k { color: var(--t3); }
.lab-v { color: var(--t1); font-weight: 500; }
.lab-urgency .lab-v { color: var(--t1); }
.lab-pet { background: color-mix(in srgb, var(--ai) 6%, transparent); box-shadow: none; }
.lab-more .dot { width: 6px; height: 6px; }
.lab-more.u-direct .dot { color: var(--brand-hi); } .lab-more.u-hoog .dot { color: var(--warn); }
.lab-more .lab-v { color: var(--t2); font-weight: 450; }
.lab-pet .pet-av { box-shadow: none; }

.cv-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--w1c) transparent; }
.cv-thread { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.guard { flex: none; }
.hist { flex: none; }
.hist-line { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 2px; text-align: left; font-size: 12.5px; color: var(--t3); border-radius: 8px; }
.hist-line:hover { color: var(--t1); }
.hist-line svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; transition: transform 0.3s var(--ease); }
.hist.open .hist-line svg:last-child { transform: rotate(180deg); }
.hist-rows { display: none; padding: 4px 0 2px 20px; }
.hist.open .hist-rows { display: block; animation: cvIn 0.4s var(--ease) both; }
.hist-i { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 5px 2px; text-align: left; font-size: 12.5px; color: var(--t2); border-radius: 8px; }
button.hist-i:hover { background: var(--w08); color: var(--t1); }
.hist-d { width: 86px; flex: none; }
.hist-o { max-width: 40%; }
.msg { max-width: 82%; padding: 11px 14px 12px; border-radius: 18px; background: var(--w0c); box-shadow: inset 0 0 0 1px var(--w0d); animation: cvIn 0.5s var(--ease) both; }
.msg.in { align-self: flex-start; border-top-left-radius: 6px; }
.msg.out { align-self: flex-end; border-top-right-radius: 6px; background: linear-gradient(180deg, var(--bub-a), var(--bub-b)); box-shadow: inset 0 0 0 1px var(--w14); }
.msg.from-ai { background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 8%, transparent), color-mix(in srgb, var(--ai) 4%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 15%, transparent); }
.msg.older { opacity: 0.6; }
.msg.summary { max-width: 92%; }
.msg.sending { animation: sendIn 0.8s var(--ease) both; }
@keyframes sendIn { from { opacity: 0; transform: translateY(30px) scale(0.97); filter: blur(4px); } }
.msg-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 4px; flex-wrap: wrap; }
.msg-h b { font-weight: 500; color: var(--t1); }
.msg-b { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: var(--t1); }
.msg-prods { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mp { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: var(--w0d); color: var(--t2); }
.live-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--up-t); padding: 4px 10px 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--up) 7%, transparent); }
.live-status .live { width: 6px; height: 6px; }
.sys { align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--t2); padding: 6px 12px; border-radius: 999px; background: var(--k2e); box-shadow: inset 0 0 0 1px var(--w0a); max-width: 92%; }
.sys svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 1.7; flex: none; }
.sys.pro { color: var(--info-t); } .sys.pro svg { stroke: var(--info); }

/* composer & draft */
.cv-comp { padding: 4px 18px 22px; }
.draft { position: relative; border-radius: 18px; padding: 18px 20px; border: 1px solid transparent;
  background: linear-gradient(180deg, var(--draft-a), var(--draft-b)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--ai) 40%, transparent), var(--w10) 35%, #c8202b33 100%) border-box;
  box-shadow: 0 -20px 40px -30px var(--kff), 0 20px 40px -30px var(--kff); animation: cvIn 0.5s var(--ease) both; }
.draft.own { background: var(--glass-2); }
.draft-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 8px; }
.draft-h b { font-weight: 500; }
.draft-h > svg { width: 14px; height: 14px; stroke: var(--t2); fill: none; stroke-width: 1.7; }
.ai-mark { width: 16px; height: 16px; border-radius: 6px; flex: none; background: conic-gradient(from 200deg, var(--ai), #c8202b, var(--warn), var(--ai)); animation: spin 6s linear infinite; box-shadow: 0 0 12px #c8202b66; }
.draft-wait { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--t2); padding: 6px 0 4px; }
.think { display: inline-flex; gap: 3px; }
.think i { width: 5px; height: 5px; border-radius: 50%; background: var(--ai); animation: think 1s ease-in-out infinite; }
.think i:nth-child(2) { animation-delay: 0.15s; } .think i:nth-child(3) { animation-delay: 0.3s; }
@keyframes think { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.draft-t { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; color: var(--t1); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--ai); animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.draft-t.clamp { max-height: calc(1.6em * 4); overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.more-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 0 0; font-size: 12px; color: var(--ai); }
.more-btn:hover { color: var(--t1); }
.more-btn[hidden] { display: none; }
.more-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pcards.thumbs { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pthumb { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 180px; max-width: 260px; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--w08); animation: pcIn 0.6s var(--ease) both; animation-delay: calc(var(--j) * 100ms); cursor: default; }
.pthumb.later { opacity: 0.7; }
.pt-more { align-self: center; padding: 0 4px; }
.pcards.thumbs { flex-wrap: nowrap; }
.pcards.thumbs .pthumb { flex: 1 1 0; }
.pt-img { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex: none; background: radial-gradient(80% 80% at 50% 30%, var(--w1c), var(--w06)); }
.pt-t { display: flex; flex-direction: column; min-width: 0; }
.pt-n { font-size: 12px; font-weight: 500; }
.srcs .more-btn { color: var(--t3); padding: 0; }
.srcs .src-list { display: none; flex-wrap: wrap; gap: 6px; width: 100%; }
.srcs.open .src-list { display: flex; }
.draft-ta { width: 100%; min-height: 160px; font-size: 13.5px; line-height: 1.6; }
.pcards { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pcards:empty { display: none; }
.pcard { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--w08); box-shadow: inset 0 0 0 1px var(--w0f); animation: pcIn 0.7s var(--ease) both; animation-delay: calc(var(--j) * 120ms); }
.pcard.later { opacity: 0.72; }
@keyframes pcIn { from { opacity: 0; transform: translateY(8px); } }
.pc-img { width: 62px; height: 62px; border-radius: 12px; display: grid; place-items: center; flex: none; background: radial-gradient(80% 80% at 50% 30%, var(--w1c), var(--w06)); }
.pc-n { font-weight: 500; font-size: 13px; line-height: 1.3; }
.pc-m { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 4px 0 5px; font-size: 11.5px; }
.pc-m b { font-weight: 500; font-size: 13px; }
.av { display: inline-flex; align-items: center; gap: 5px; color: var(--t2); }
.av.ok .dot { color: var(--up); } .av.warn .dot { color: var(--warn); }
.pc-why { font-size: 12px; color: var(--t2); line-height: 1.45; }
.pc-ed { display: flex; flex-direction: column; gap: 5px; flex: none; }
.noprod { display: flex; align-items: center; gap: 6px; }
.noprod svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.srcs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.srcs:empty { display: none; }
.src { display: inline-flex; align-items: center; gap: 5px; max-width: 280px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 11px; color: var(--t2); background: var(--k33); box-shadow: inset 0 0 0 1px var(--w0d); animation: pcIn 0.6s var(--ease) both; animation-delay: calc(300ms + var(--j) * 80ms); }
.src svg { width: 11px; height: 11px; stroke: var(--ai); fill: none; stroke-width: 1.8; flex: none; }
.src b { font-weight: 500; color: var(--t1); flex: none; }
.draft-x:empty { display: none; }
.draft-x { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.missing { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--warn-t); padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 7%, transparent); }
.missing svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.member-hint, .follow { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, #c8202b1c, #c8202b08); box-shadow: inset 0 0 0 1px #c8202b33; font-size: 12.5px; animation: pcIn 0.6s var(--ease) both; }
.member-hint > svg, .follow > svg { width: 16px; height: 16px; stroke: var(--brand-t); fill: none; stroke-width: 1.6; flex: none; }
.member-hint b, .follow b { font-weight: 500; }
.follow { background: linear-gradient(90deg, color-mix(in srgb, var(--ai) 9%, transparent), color-mix(in srgb, var(--ai) 2%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 18%, transparent); margin-top: 8px; }
.follow > svg { stroke: var(--ai); }
.follow.ok { background: color-mix(in srgb, var(--up) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 16%, transparent); }
.follow.ok > svg { stroke: var(--up); }
.follow select.input { width: auto; }
.draft-a { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.draft-a > .grow { flex: 1 1 200px; }
/* the actions stay in reach while the draft is longer than the pane; sticky only inside the draft box, so it never covers the message */
.draft:not(.own) > .draft-a { position: sticky; bottom: 0; z-index: 2; margin: 12px -20px -18px; padding: 12px 20px 16px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, var(--draft-b), var(--draft-b) 40%); backdrop-filter: blur(8px); }
.done-note { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: var(--k2e); box-shadow: inset 0 0 0 1px var(--w0d); font-size: 12.5px; color: var(--t2); }
.done-note > svg { width: 15px; height: 15px; stroke: var(--up); fill: none; stroke-width: 2; flex: none; }

/* pop menu */
.pop { position: fixed; z-index: 260; min-width: 220px; max-width: 360px; max-height: 340px; overflow-y: auto; padding: 5px; border-radius: 14px; background: var(--pop); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--w1a), 0 24px 50px -16px var(--kff); animation: popIn 0.32s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.pop button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; color: var(--t2); }
.pop button:hover { background: var(--w10); color: var(--t1); }
.pop button.on { color: var(--t1); }
.pop button svg { width: 13px; height: 13px; stroke: var(--up); fill: none; stroke-width: 2; }
.pop button.retired { opacity: 0.45; text-decoration: line-through; }
.pop-h { font-size: 11px; color: var(--t3); padding: 6px 10px 4px; }

/* ---------------------------------------------------------------- customer & pet panel */
.ws-side { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--w1c) transparent; }
.cp { padding: 22px 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.cp-head { display: flex; align-items: center; gap: 11px; }
.cp-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #f3efeb, #cfc8c2); color: #12100f; font-weight: 600; font-size: 13px; flex: none; }
.cp-av.guest { background: var(--w10); }
.cp-av.guest svg { width: 16px; height: 16px; stroke: var(--t2); fill: none; stroke-width: 1.6; }
.cp-name { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.cp-value { display: flex; flex-direction: column; gap: 9px; }
.cp-line { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--t2); margin-top: -4px; }
.cp-line b { font-weight: 500; color: var(--t1); }
.cp-line span::before { content: '·'; margin-right: 8px; color: var(--t3); }
.cp-pets { display: flex; flex-direction: column; gap: 8px; }
.sugg { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ai) 5%, transparent); font-size: 12.5px; }
.sugg b { font-weight: 500; }
.ai-mark.sm { width: 12px; height: 12px; border-radius: 4px; box-shadow: none; }
.discs { display: flex; flex-direction: column; margin-top: 2px; }
.disc { border-top: 1px solid var(--w08); }
.disc-h { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 12px 2px; text-align: left; font-size: 12.5px; color: var(--t1); min-width: 0; }
.disc-t { font-weight: 500; flex: none; }
.disc-s { flex: 1; min-width: 0; text-align: right; font-size: 11.5px; color: var(--t3); }
.disc-h > svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; flex: none; transition: transform 0.3s var(--ease); }
.disc.open .disc-h > svg { transform: rotate(180deg); }
.disc-b { display: none; padding: 0 2px 14px; }
.disc.open .disc-b { display: block; animation: cvIn 0.4s var(--ease) both; }
.cp-value b { font-weight: 450; font-size: 14px; }
.vmeter { position: relative; height: 6px; border-radius: 999px; background: var(--w0d); }
.vmeter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #c8202b66, var(--brand-hi)); animation: grow 1.2s var(--ease) both; transform-origin: 0 50%; }
@keyframes grow { from { transform: scaleX(0); } }
.vt { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--w66); }
.cp-mem { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: var(--w07); font-size: 12.5px; }
.cp-mem.on { background: linear-gradient(90deg, #c8202b20, #c8202b08); box-shadow: inset 0 0 0 1px #c8202b33; }
.cp-mem > svg { width: 15px; height: 15px; stroke: var(--t2); fill: none; stroke-width: 1.6; flex: none; }
.cp-mem.on > svg { stroke: var(--brand-t); }
.cp-contact { display: grid; gap: 5px; }
.cr { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); min-width: 0; }
.cr svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 1.6; flex: none; }
.cp-sub { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--info-t); padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--info) 6%, transparent); }
.cp-sub svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; }
.cp-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.cp-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--t1); }
.cp-sh .seg button { padding: 3px 9px; font-size: 11px; }
.pet { padding: 11px 12px; border-radius: 16px; background: var(--w06); display: flex; flex-direction: column; gap: 9px; transition: box-shadow 0.3s, background 0.3s; }
.pet.on { background: color-mix(in srgb, var(--ai) 5%, transparent); }
.pet:not(.on) { cursor: pointer; }
.pet:not(.on):not(.x) .pet-f, .pet:not(.on):not(.x) .traits { display: none; }
.pet.fresh { animation: freshIn 1.4s var(--ease) both; }
@keyframes freshIn { 0% { opacity: 0; transform: translateY(8px); box-shadow: inset 0 0 0 1px var(--up); } 60% { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 53%, transparent); } }
.pet.gone-pet { opacity: 0.6; }
.pet.temp { background: repeating-linear-gradient(135deg, var(--w05) 0 8px, transparent 8px 16px); box-shadow: inset 0 0 0 1px var(--w14); border: 1px dashed var(--w1c); }
.pet-n { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px; }
.pet-n .tag { height: 18px; font-size: 10px; }
.pet-av { display: grid; place-items: center; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--pt) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pt) 32%, transparent); }
.pet-av svg { width: 58%; height: 58%; stroke: var(--pt); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pet-f { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.pet-f > div { display: flex; flex-direction: column; font-size: 11px; color: var(--t3); }
.pet-f b { font-weight: 450; font-size: 12px; color: var(--t1); }
.pet-f .miss b { color: var(--warn); }
.pet-f .new b { color: var(--up-t); }
.traits { display: flex; flex-wrap: wrap; gap: 5px; }
.trait { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 4px 0 9px; border-radius: 999px; font-size: 11.5px; background: var(--w0c); color: var(--t1); }
.trait i { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: var(--k40); color: var(--t3); }
.trait em { display: none; }
.trait.o-gesprek i { color: var(--ai); } .trait.o-app i { color: var(--info); }
.trait.fresh { animation: freshIn 1.4s var(--ease) both; background: color-mix(in srgb, var(--up) 10%, transparent); }
.enrich { margin-top: 10px; }
.en-a { display: flex; justify-content: flex-end; gap: 6px; }
.en-i { display: flex; flex-direction: column; gap: 7px; padding: 14px 0; border-top: 1px solid var(--w0a); transition: opacity 0.35s, transform 0.4s var(--ease), max-height 0.4s, padding 0.4s; max-height: 200px; overflow: hidden; }
.en-i:first-of-type { border-top: 0; }
.en-i.gone { opacity: 0; transform: translateX(16px); max-height: 0; padding: 0; }
.en-i b { font-weight: 500; font-size: 12.5px; }
.en-i > .row > svg { width: 14px; height: 14px; stroke: var(--up); fill: none; stroke-width: 2; }
.en-v { font-size: 12px; color: var(--up-t); margin-left: auto; }
.en-q { font-size: 12px; color: var(--t2); font-style: italic; padding-left: 10px; border-left: 2px solid var(--w1a); }
.ord { padding: 2px 0 0; }
.ord.late { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 5%, transparent); }
.ord b { font-weight: 500; }
.live.off { background: var(--t3); } .live.off::after { display: none; }
.ord-tl { display: flex; flex-direction: column; gap: 0; margin-left: 3px; }
.ev { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 0 0 8px 16px; }
.ev::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: -2px; width: 1px; background: var(--w1a); }
.ev.last::before { display: none; }
.ev i { position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--w33); }
.ev.last i { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 20%, transparent); }
.late .ev.last i { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.ord-items { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.oi { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2); min-width: 0; }
.oi svg { flex: none; }
.buys { display: flex; flex-direction: column; }
.buy { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--w08); }
.buy:last-child { border-bottom: 0; }
.buy > .xs { width: 70px; flex: none; }
.pc { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; }
.route { display: flex; flex-direction: column; gap: 0; }
.rs { position: relative; display: flex; gap: 10px; padding: 0 0 12px; opacity: 0.5; transition: opacity 0.4s; }
.rs::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 1px; background: var(--w14); }
.rs:last-child::before { display: none; }
.rs.done, .rs.cur { opacity: 1; }
.rs > i { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; flex: none; background: var(--w10); color: var(--t2); }
.rs.done > i { background: color-mix(in srgb, var(--up) 16%, transparent); } .rs.done > i svg { width: 12px; height: 12px; stroke: var(--up); fill: none; stroke-width: 2.4; }
.rs.cur > i { background: var(--inv-bg); color: var(--inv-fg); box-shadow: 0 0 0 4px var(--w14); }
.rs b { font-weight: 500; font-size: 12.5px; }
.nc { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--info) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 15%, transparent); }
.nc > svg { width: 16px; height: 16px; stroke: var(--info); fill: none; stroke-width: 1.6; flex: none; margin-top: 2px; }
.nc b { font-weight: 500; }
.vok, .vfail { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 12px; font-size: 12.5px; animation: pcIn 0.5s var(--ease) both; }
.vok { background: color-mix(in srgb, var(--up) 8%, transparent); color: var(--up-t); }
.vfail { background: color-mix(in srgb, var(--down) 8%, transparent); color: var(--down-t); }
.vfail svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.offer3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.offer3 > div { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; background: var(--w07); font-size: 12px; }
.offer3 svg { width: 14px; height: 14px; stroke: var(--t2); fill: none; stroke-width: 1.6; margin-bottom: 3px; }
.offer3 b { font-weight: 500; }
.guest-facts { display: flex; flex-direction: column; gap: 9px; }
.guest-facts > div { display: flex; gap: 9px; font-size: 12px; color: var(--t2); line-height: 1.45; }
.guest-facts svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 1.6; flex: none; margin-top: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--t2); margin-top: 6px; cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--brand); }

/* search modal */
.search-modal { width: 620px; }
.sr-ic { width: 14px; height: 14px; stroke: var(--t3); fill: none; stroke-width: 1.7; }
.search-modal .input { width: 100%; height: 42px; font-size: 14px; }
.sr { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; min-height: 60px; }
.sr-i { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; background: none; text-align: left; border-radius: 12px; animation: pcIn 0.4s var(--ease) both; }
.sr-i:hover { background: var(--w0c); }
.sr-i > svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 1.7; }
.sr-i .tag { width: 76px; justify-content: center; }

/* ---------------------------------------------------------------- responsive workspace */
@media (max-width: 1360px) {
  .ws { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  .ws-side { position: absolute; top: 0; right: 12px; bottom: 12px; width: 380px; max-width: calc(100% - 24px); z-index: 20; transform: translateX(calc(100% + 30px)); transition: transform 0.55s var(--ease); box-shadow: -30px 0 80px -20px var(--kff); }
  .ws.show-side .ws-side { transform: none; }
  .only-mid, .side-x { display: inline-flex !important; }
  .side-x { position: absolute; top: 10px; right: 10px; z-index: 2; }
  .cp { padding-top: 44px; }
}
@media (max-width: 860px) {
  .ws { grid-template-columns: 1fr; }
  .ws-list, .ws-conv { grid-row: 1; grid-column: 1; }
  .ws.show-list .ws-conv { display: none; }
  .ws.show-conv .ws-list, .ws.show-side .ws-list { display: none; }
  .ws-side { right: 0; bottom: 0; width: 100%; max-width: none; border-radius: 22px; }
  .only-narrow { display: inline-grid !important; }
  .cv-head { padding: 12px 12px 10px; gap: 8px; flex-wrap: wrap; }
  .cv-labels { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .cv-head .ti-ch.lg { display: none; }
  .ht { display: none; }
  .cv-labels { padding: 0 12px 10px; }
  .cv-thread { padding: 12px; }
  .msg { max-width: 92%; }
  .cv-comp { padding: 0 8px 12px; }
  .cv-head-r { width: 100%; padding-left: 40px; flex-wrap: wrap; }
  .draft { padding: 12px; }
  .draft:not(.own) > .draft-a { margin: 10px -12px -12px; padding: 10px 12px 12px; }
  .pcard { flex-wrap: wrap; }
  .pc-ed { flex-direction: row; width: 100%; }
  .hist-o { display: none; }
  #via { display: none; }
}

/* prepared reply: full product cards and how the draft was made */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pcard { min-width: 0; }
.pc-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pc-later { height: 18px; font-size: 10.5px; }
.pc-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.srcs .src-list { flex-direction: column; gap: 12px; padding-top: 10px; }
.how { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
.how-i { display: flex; gap: 10px; align-items: flex-start; }
.how-i b { font-weight: 500; font-size: 12.5px; }
.how-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11px; background: var(--w10); color: var(--t2); }
.src-g { display: flex; flex-direction: column; gap: 6px; }
.src-row { display: flex; flex-wrap: wrap; gap: 6px; }
.src-engage svg { stroke: var(--info); }
.cv-labels .lab { flex: none; }

.pcard .pc-img { width: 48px; height: 48px; }
.pcard .pc-img svg { width: 40px; height: 40px; }
.pc-m { gap: 4px 10px; }

/* ===================================================================== inbox v2: start list + ticket pages */
.ib { max-width: 1240px; margin: 0 auto; }
.ib.swap-in > * { animation: cvIn 0.5s var(--ease) both; }
.ib.swap-in > *:nth-child(2) { animation-delay: 40ms; } .ib.swap-in > *:nth-child(3) { animation-delay: 80ms; }
.ib-head { display: flex; align-items: flex-end; gap: 16px; margin: 8px 0 18px; flex-wrap: wrap; }
.ib-head h1 { font-size: 36px; font-weight: 400; letter-spacing: -0.045em; line-height: 1.04; color: var(--on-photo-1); }
.ib-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--on-photo-2); }
.ib-counts b { font-weight: 500; color: var(--t1); }
.ib-counts b.hot { color: var(--brand-t); }
.ib-counts .sep { color: var(--t3); }
.ib-act { display: flex; gap: 6px; }
.ib-act .btn { background: var(--chrome); box-shadow: inset 0 0 0 1px var(--w10); }
.ib-bar { display: flex; align-items: center; gap: 4px; margin: 0 2px 12px; border-bottom: 1px solid var(--line); }
/* underline tabs: the list filters and the sections of a ticket */
.ib-tab, .tk-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--on-photo-2); font-size: 13px; font-weight: 450; text-decoration: none; white-space: nowrap; transition: color 0.2s; flex: none; }
.ib-tab::after, .tk-tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform 0.35s var(--ease); }
.ib-tab:hover, .tk-tab:hover { color: var(--t1); }
.ib-tab.on, .tk-tab.on { color: var(--t0); }
.ib-tab.on::after, .tk-tab.on::after { transform: none; }
.ib-tab .n, .tk-tab .n { font-size: 11.5px; color: var(--t3); }
.ib-tab.hot .n { color: var(--brand-t); }
.ib-tab.more svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tk-tab .xs-tag { font-weight: 500; }
.ib-panel { padding: 6px; }
.ib-list { display: flex; flex-direction: column; }
.ib-row {
  position: relative; display: grid; grid-template-columns: 22px 30px minmax(150px, 230px) 220px minmax(0, 1fr) 110px 56px; align-items: center; gap: 14px;
  padding: 13px 16px 13px 14px; border-radius: 14px; color: var(--t1); text-decoration: none; transition: background 0.2s;
  animation: tiIn 0.5s var(--ease) both; animation-delay: calc(var(--i) * 16ms);
}
.ib-row + .ib-row::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--line-2); }
.ib-row:hover { background: var(--w08); }
.ib-row:hover::before, .ib-row:hover + .ib-row::before { opacity: 0; }
.ib-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ib-row.arrive { animation: arrive 1.8s var(--ease) both; }
.ib-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ib-name b { font-weight: 500; font-size: 13.5px; min-width: 0; }
.ib-sub { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--t2); font-size: 13px; }
.ib-subt { min-width: 0; }
.ib-tags { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ib-tag { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--w0d); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--t2); font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.ib-tag.m-bezorgd { color: var(--warn-t, #9a6412); background: color-mix(in srgb, var(--warn, #d9a441) 12%, transparent); box-shadow: none; }
.ib-tag.m-ontevreden { color: var(--brand-t); background: color-mix(in srgb, var(--brand-hi) 10%, transparent); box-shadow: none; }
/* guardrail tag: same source and tone as the in-ticket banner (soft brand red, red icon) */
.ib-guard { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 8px 0 6px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--brand-hi) 34%, transparent); background: color-mix(in srgb, var(--brand-hi) 11%, transparent); color: var(--brand-t); font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: help; }
.ib-guard svg { width: 12px; height: 12px; flex: none; stroke: var(--brand-hi); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ib-guard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gtip { position: fixed; z-index: 400; max-width: min(320px, calc(100vw - 24px)); padding: 7px 10px; border-radius: 9px; background: var(--inv-bg); color: var(--inv-fg); font-size: 12px; line-height: 1.35; box-shadow: 0 12px 30px -12px var(--kaa); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 0.16s, transform 0.16s var(--ease); }
.gtip.on { opacity: 1; transform: none; }
.ib-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); white-space: nowrap; }
.ib-st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.8; flex: none; }
.ib-st.st-agent { color: var(--brand-t); } .ib-st.st-review { color: var(--ai-t); } .ib-st.st-proactief { color: var(--info-t); } .ib-st.st-auto { color: var(--up-t); }
.ib-age { text-align: right; font-size: 12px; color: var(--t3); }
.u-direct .ib-age { color: var(--brand-t); }

/* ticket */
.tk-head { display: flex; align-items: center; gap: 16px; padding: 4px 0 12px; min-width: 0; }
.tk-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px 0 10px; border-radius: 999px; color: var(--t2); text-decoration: none; font-size: 12.5px; font-weight: 500; background: var(--chrome); box-shadow: inset 0 0 0 1px var(--w14); flex: none; transition: color 0.2s, background 0.2s; }
.tk-back:hover { color: var(--t1); background: var(--chrome-hi); }
.tk-back svg, .tk-hint svg, .tk-mini > svg, a.sugg > svg, .tl-i > svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tk-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.tk-name { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--on-photo-1); }
.tk-id { font-size: 11.5px; color: var(--t3); font-weight: 400; margin-left: 10px; letter-spacing: 0; }
.tk-subj { font-size: 13px; color: var(--on-photo-2); margin-top: 1px; }
.tk-meta { display: flex; align-items: center; gap: 14px; flex: none; }
.tk-pn { display: flex; align-items: center; gap: 2px; flex: none; }
.tk-pn .icon-btn.off { opacity: 0.3; pointer-events: none; }
.tk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.tk-tabs::-webkit-scrollbar { display: none; }
.tk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.tk-body.with-aside { grid-template-columns: minmax(0, 1fr) 320px; }
.tk-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tk-aside { position: sticky; top: 8px; padding: 0; }
.tk-aside .cp { padding: 20px; gap: 14px; }
.tk-aside .more-btn { align-self: flex-start; }
a.more-btn { text-decoration: none; }

/* Gesprek */
.tk-conv { overflow: visible; }
.tk-sum { border-bottom: 1px solid var(--line-2); }
.tk-sum-line { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 16px 24px; text-align: left; font-size: 13px; color: var(--t1); border-radius: 22px 22px 0 0; }
.tk-sum-line:hover .tk-sum-k { color: var(--t1); }
.tk-sum-line .ti-dot { background: var(--t3); }
.tk-sum-line .ti-dot.u-dot-direct { background: var(--brand-hi); box-shadow: 0 0 8px var(--brand); }
.tk-sum-line .ti-dot.u-dot-hoog { background: var(--warn); }
.tk-sum-k { font-size: 12px; color: var(--t3); transition: color 0.2s; }
.tk-sum-line > svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; flex: none; transition: transform 0.3s var(--ease); }
.tk-sum.open .tk-sum-line > svg { transform: rotate(180deg); }
.tk-details { display: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; padding: 2px 24px 20px; }
.tk-sum.open .tk-details { display: grid; animation: cvIn 0.4s var(--ease) both; }
.tk-d { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-dk { font-size: 11.5px; color: var(--t3); }
.tk-d .lab { width: fit-content; max-width: 100%; }
.tk-dnote { grid-column: 1 / -1; }
.tk-hint { display: flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 12.5px; color: var(--t3); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: color 0.2s; }
.tk-hint:hover { color: var(--t1); }
.tk-thread { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.tk-cta {
  position: sticky; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; border-radius: 18px; border: 1px solid transparent;
  background: linear-gradient(180deg, var(--draft-a), var(--draft-b)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--ai) 45%, transparent), var(--w10) 40%, #c8202b33) border-box;
  box-shadow: var(--drop), 0 18px 40px -24px var(--k99);
}
.tk-cta b { font-weight: 500; font-size: 13.5px; }
.tk-cta .btn.primary { height: 38px; padding: 0 18px; text-decoration: none; }
.tk-cta .btn { text-decoration: none; }
.tk-cta.quiet { position: static; background: var(--glass); }
.tk-cta.quiet > svg { width: 16px; height: 16px; stroke: var(--up); fill: none; stroke-width: 2; flex: none; }

/* Antwoord */
.tk-quote { padding: 14px 18px 15px; border-radius: 16px; border: 1px solid transparent; background: var(--glass); box-shadow: var(--drop); position: relative; }
.tk-quote::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--t3); opacity: 0.5; }
.tk-qh { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }
.tk-qh b { font-weight: 500; }
.tk-qh .more-btn { padding: 0; color: var(--t3); }
.tk-qt { font-size: 13.5px; color: var(--t2); line-height: 1.55; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tk-sent { display: flex; flex-direction: column; gap: 12px; }
.tk-sent:empty { display: none; }
.tk-comp .draft { padding: 24px 26px; }
.tk-comp .draft:not(.own) > .draft-a { margin: 20px -26px -24px; padding: 14px 26px 18px; }
.tk-comp .draft-t { font-size: 14px; line-height: 1.65; }
.tk-comp .draft-h { margin-bottom: 14px; }
.pwrap { margin-top: 20px; }
.pwrap .pcards { margin-top: 10px; }
.pwrap.shut .pcards { display: none; }
.ptoggle { padding: 0; color: var(--t2); }
.ptoggle svg { transition: transform 0.3s var(--ease); }
.pwrap.shut .ptoggle svg { transform: rotate(-90deg); }
.tk-comp .pcard { box-shadow: none; background: var(--w06); }
.tk-comp .srcs { margin-top: 14px; }

/* context aside */
.tk-mini { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--w06); color: var(--t1); text-decoration: none; font-size: 12.5px; transition: background 0.2s; }
.tk-mini:hover, a.sugg:hover { background: var(--w0c); }
.tk-mini.late { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.tk-mini b { font-weight: 500; }
a.sugg { color: var(--t1); text-decoration: none; transition: background 0.2s; }

/* Klant, Bestellingen, Historie */
.tk-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.tk-card { display: flex; flex-direction: column; gap: 14px; }
.tk-card.narrow { max-width: 780px; }
.tk-h { font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; }
.tk-kv { display: flex; flex-direction: column; }
.tk-kvr { display: grid; grid-template-columns: 16px 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; font-size: 13px; border-top: 1px solid var(--line-2); }
.tk-kvr svg { width: 14px; height: 14px; stroke: var(--t3); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-kvk { color: var(--t3); font-size: 12.5px; }
.tk-pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pet.lg { padding: 16px; gap: 12px; cursor: default; }
.sugg-panel .enrich { margin-top: 0; }
.cp-sec.hilite { padding: 12px; margin: 0 -12px; border-radius: 14px; background: color-mix(in srgb, var(--ai) 10%, transparent); animation: pcIn 0.5s var(--ease) both; }
.tk-tl { display: flex; flex-direction: column; padding-top: 4px; }
.tl-i { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 0 0 22px; color: var(--t1); text-decoration: none; }
.tl-i::before { content: ''; position: absolute; left: 10.5px; top: 28px; bottom: 4px; width: 1px; background: var(--line); }
.tl-i:last-child { padding-bottom: 0; }
.tl-i:last-child::before { display: none; }
.tl-i b { display: block; font-weight: 500; font-size: 13.5px; margin: 2px 0; }
a.tl-i:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tl-i > svg { margin-top: 4px; color: var(--t3); }
.tl-i.now .ti-ch { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }

@media (max-width: 860px) {
  .ib-head { margin: 4px 0 14px; }
  .ib-head h1 { font-size: 28px; }
  .ib-bar { overflow-x: auto; scrollbar-width: none; }
  .ib-tab, .tk-tab { padding: 0 10px; }
  .ib-panel { padding: 4px; }
  .ib-row { grid-template-columns: 22px 28px minmax(0, 1fr) auto; grid-template-areas: 'dot ch name age' 'dot ch sub st' 'dot ch tags tags'; gap: 3px 12px; padding: 12px 10px; }
  .ib-row > .ib-sel { grid-area: dot; } .ib-row > .ti-ch { grid-area: ch; }
  .ib-name { grid-area: name; } .ib-sub { grid-area: sub; font-size: 12.5px; } .ib-tags { grid-area: tags; margin-top: 3px; } .ib-tag { height: 18px; padding: 0 6px; border-radius: 6px; font-size: 11px; }
  .ib-guard { height: 18px; padding: 0 6px 0 5px; border-radius: 6px; font-size: 11px; }
  .ib-sub { min-height: 18px; } .ib-st { grid-area: st; font-size: 11px; justify-self: end; } .ib-age { grid-area: age; }
  .tk-head { flex-wrap: wrap; gap: 10px 12px; padding-bottom: 8px; }
  .tk-who { order: 3; flex-basis: 100%; }
  .tk-who .ti-ch { display: none; }
  .tk-id { display: none; }
  .tk-meta { margin-left: auto; }
  .tk-tabs { margin: 0 -16px 16px; padding: 0 10px; }
  .tk-body.with-aside { grid-template-columns: minmax(0, 1fr); }
  .tk-aside { position: static; }
  .tk-grid2 { grid-template-columns: minmax(0, 1fr); }
  .tk-sum-line { padding: 14px 16px; }
  .tk-details { padding: 2px 16px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-hint { padding: 12px 16px; }
  .tk-thread { padding: 16px; }
  .tk-cta { bottom: 8px; flex-wrap: wrap; padding: 12px; }
  .tk-cta .grow { flex-basis: calc(100% - 40px); }
  .tk-cta .btn { margin-left: auto; }
  .tk-comp .draft { padding: 16px; }
  .tk-comp .draft:not(.own) > .draft-a { margin: 14px -16px -16px; padding: 12px 16px 14px; }
  .tk-kvr { grid-template-columns: 16px 76px minmax(0, 1fr); }
  .tk-pets { grid-template-columns: minmax(0, 1fr); }
}
/* text that sits straight on the photograph: brighter and with a soft shade in dark */
.tk-head, .ib-bar, .tk-tabs, .ib-head { text-shadow: 0 1px 14px var(--k88); }
.tk-head .tk-id, .tk-pn .xs, .tk-head .ht, .tk-head .eng-pill:not(.on) { color: var(--on-photo-2); }
.tk-tab .xs-tag, .tk-tab .n { text-shadow: none; }
:root[data-theme="light"] .tk-head, :root[data-theme="light"] .ib-bar, :root[data-theme="light"] .tk-tabs, :root[data-theme="light"] .ib-head { text-shadow: none; }
.tk-tab .n, .tk-tab .tag:not(.ai):not(.warn):not(.ok) { color: var(--on-photo-2); }

/* ===================================================================== docked customer card */
.dock {
  position: fixed; right: 28px; bottom: 26px; z-index: 150; width: 320px; max-width: calc(100vw - 24px);
  transform-origin: 100% 100%; animation: dockIn 0.45s var(--ease) both;
}
.dock.out { animation: dockOut 0.24s ease forwards; pointer-events: none; }
@keyframes dockIn { from { opacity: 0; transform: translate(18px, 22px) scale(0.96); } }
@keyframes dockOut { to { opacity: 0; transform: translate(12px, 16px) scale(0.97); } }
.dock-card { border: 1px solid transparent; border-radius: 20px; background: var(--glass); box-shadow: var(--drop), 0 28px 70px -24px var(--kaa); overflow: hidden; }
.dock.grow-in .dock-card { animation: dockIn 0.4s var(--ease) both; }
.dock-bar { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 12px; font-size: 12px; font-weight: 500; color: var(--t2); background: var(--w06); border-bottom: 1px solid var(--line-2); }
.dock-bar .ti-ch.sm { width: 20px; height: 20px; border-radius: 6px; }
.dock-sf { font-size: 11px; color: var(--t3); font-weight: 400; }
.dock-x { width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; color: var(--t2); transition: background 0.2s, color 0.2s; }
.dock-x:hover { background: var(--w10); color: var(--t1); }
.dock-x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.dock-b { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 14px; }
.dock-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dock-head .cp-av { width: 36px; height: 36px; font-size: 12px; }
.dock-head .cp-name { font-size: 14px; }
.dock-line { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--t2); }
.dock-line b { font-weight: 500; color: var(--t1); }
.dock-line span::before { content: '·'; margin-right: 8px; color: var(--t3); }
.dock-pet { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ai) 6%, transparent); }
.dock-pet .pet-n { font-size: 13px; }
.dock-pet .pet-n .tag { height: 17px; font-size: 10px; }
.dock-facts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; font-size: 11px; color: var(--t2); }
.dock-facts span { padding: 1px 7px; border-radius: 999px; background: var(--w0a); white-space: nowrap; }
.dock-facts .miss { color: var(--warn-t); }
.dock-route { display: flex; flex-direction: column; gap: 6px; }
.dr { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--t3); }
.dr i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; background: var(--w10); color: var(--t2); flex: none; }
.dr.done { color: var(--t2); } .dr.done i { background: color-mix(in srgb, var(--up) 18%, transparent); }
.dr.done i svg { width: 10px; height: 10px; stroke: var(--up); fill: none; stroke-width: 2.6; }
.dr.cur { color: var(--t1); font-weight: 500; } .dr.cur i { background: var(--inv-bg); color: var(--inv-fg); }
.dock-state { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: var(--w06); font-size: 12px; color: var(--t2); }
.dock-state .live { width: 7px; height: 7px; }
.dock .more-btn { padding: 0; align-self: flex-start; }
.cp-av.sm { width: 24px; height: 24px; font-size: 9.5px; }
.cp-av.guest.sm svg { width: 12px; height: 12px; }
/* minimised: a slim pill in the same corner */
.dock-pill { display: none; align-items: center; gap: 9px; height: 44px; max-width: 100%; margin-left: auto; padding: 0 14px 0 10px; border: 1px solid transparent; border-radius: 999px; background: var(--glass); box-shadow: var(--drop), 0 18px 40px -18px var(--kaa); color: var(--t1); font-size: 13px; font-weight: 500; }
.dock-pill .dock-pn { min-width: 0; }
.dock-pill .tag { flex: none; }
.dock-pill > svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; transform: rotate(180deg); flex: none; }
.dock.min { width: auto; }
.dock.min .dock-card { display: none; }
.dock.min .dock-pill { display: flex; animation: dockIn 0.35s var(--ease) both; }
/* the card never covers an action: sticky bars stop short of it, the page ends above it */
.tk-body { padding-bottom: calc(var(--dock-h, 0px) + 12px); }
.tk-cta { margin-right: var(--dock-w, 0px); bottom: calc(14px + var(--dock-lift, 0px)); }
.tk-comp .draft:not(.own) > .draft-a { bottom: var(--dock-lift, 0px); padding-right: calc(26px + var(--dock-w, 0px)); }
.tk-comp .draft.own > .draft-a, .tk-comp .done-note { margin-right: var(--dock-w, 0px); }
.toasts:not(.top) { bottom: calc(22px + var(--dock-h, 0px)); transition: bottom 0.35s var(--ease); }
@media (max-width: 860px) {
  .dock { right: 12px; bottom: 12px; }
  .toasts:not(.top) { bottom: calc(16px + var(--dock-lift, 0px)); }
  .tk-comp .draft:not(.own) > .draft-a { padding-right: 16px; }
}
@media (max-width: 360px) { .ib-guard { padding: 0 5px; } .ib-guard .ib-gl { display: none; } }
@media (prefers-reduced-motion: reduce) { .dock, .dock.out, .dock .dock-card, .dock .dock-pill { animation: none !important; } .dock.out { opacity: 0; } }

/* ---------------------------------------------------------------- Controles: list of profile checks */
.ck-list { display: flex; flex-direction: column; }
.ck-page { padding: 6px; }
.ck-row {
  position: relative; display: grid; grid-template-columns: minmax(130px, 180px) minmax(110px, 150px) minmax(150px, 230px) minmax(0, 1fr) 92px 92px; align-items: center; gap: 14px;
  width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: none; color: var(--t1); text-align: left; font-size: 13px; cursor: pointer; transition: background 0.2s;
  animation: tiIn 0.5s var(--ease) both; animation-delay: calc(var(--i) * 18ms);
}
.ck-list.no-cu .ck-row { grid-template-columns: minmax(110px, 150px) minmax(150px, 230px) minmax(0, 1fr) 92px 84px; padding: 11px 8px; }
.ck-row + .ck-row::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--line-2); }
.ck-row:hover { background: var(--w08); }
.ck-row:hover::before, .ck-row:hover + .ck-row::before { opacity: 0; }
.ck-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ck-cu, .ck-pet { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 500; }
.ck-new { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--up) 14%, transparent); }
.ck-new svg { width: 12px; height: 12px; stroke: var(--up-t); fill: none; stroke-width: 2; }
.ck-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ck-what b { font-weight: 500; }
.ck-f { font-size: 11px; color: var(--t3); }
.ck-q { color: var(--t2); font-style: italic; font-size: 12.5px; }
.ck-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); white-space: nowrap; }
.ck-st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.ck-st.st-open { color: var(--ai-t); } .ck-st.st-bevestigd { color: var(--up-t); } .ck-st.st-aangepast { color: var(--info-t); }
.ck-go { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ck-go svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; transform: rotate(-90deg); }
.ck-row.s-genegeerd, .ck-row.s-bevestigd, .ck-row.s-aangepast { color: var(--t2); }
.ck-panel .ck-list { margin: 0 -8px; }

/* the detail drawer: context left, editable profile right */
.drawer.ck-d { width: min(1080px, calc(100vw - 64px)); display: flex; flex-direction: column; overflow: hidden; }
.ck-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.ck-head .eyebrow { margin-bottom: 2px; }
.ck-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); overflow: hidden; }
.ck-ctx { overflow-y: auto; padding: 18px 20px 24px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.ck-prof { overflow-y: auto; padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
.ck-foot { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--line); }
.ck-h { font-size: 12px; font-weight: 500; color: var(--t2); letter-spacing: 0.01em; margin-bottom: 8px; }
.ck-ctx .ck-h { margin-bottom: -4px; }
.ck-sug { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--ai) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ai) 22%, transparent); }
.ck-sug-v { display: flex; align-items: center; gap: 10px; }
.ck-sug-v b { font-size: 15px; font-weight: 500; }
.ck-sug-a { justify-content: flex-end; }
.ck-msgs { display: flex; flex-direction: column; gap: 10px; }
.ck-msg { padding: 12px 14px; border-radius: 14px; background: var(--w06); }
.ck-msg p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; white-space: pre-line; color: var(--t1); }
.ck-msg mark { background: color-mix(in srgb, var(--warn) 18%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.ck-msg mark.on { background: color-mix(in srgb, var(--warn) 40%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 60%, transparent); }
.ck-mini { display: flex; flex-direction: column; gap: 2px; }
.ck-mi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--t1); font-size: 12.5px; text-align: left; cursor: pointer; }
.ck-mi:hover { background: var(--w08); }
.ck-mi.on { background: var(--w0c); font-weight: 500; }
.ck-sec { display: flex; flex-direction: column; }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; }
.ck-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--t3); }
.ck-fld .input { width: 100%; font-size: 12.5px; height: 32px; }
.ck-fld.ck-target .input, .ck-fld.ck-target .ck-traits { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ai) 70%, transparent); }
.ck-fld.ck-target .ck-traits { border-radius: 10px; padding: 6px; }
.ck-hint { color: var(--ai-t); font-size: 11.5px; }
.ck-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.ck-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.ck-facts span { font-size: 11.5px; color: var(--t3); }
.ck-facts b { font-weight: 500; }
.ck-pet-c { display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 16px; background: var(--w06); border: 1px solid transparent; }
.ck-pet-c.on { border-color: color-mix(in srgb, var(--ai) 40%, transparent); background: color-mix(in srgb, var(--ai) 5%, var(--w06)); }
.ck-pet-c.fresh { border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.ck-traits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ck-traits .trait { padding-right: 3px; }
.ck-tx { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ck-tx svg { width: 9px; height: 9px; stroke: var(--t3); fill: none; stroke-width: 2.2; }
.ck-tx:hover { background: var(--w17); }
.ck-add { width: 200px !important; height: 26px !important; }
.ck-addpet { align-self: flex-start; }
.ck-of { display: none; }

@media (max-width: 860px) {
  .ck-row, .ck-list.no-cu .ck-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'what st' 'q q' 'who go'; gap: 4px 12px; padding: 12px 10px; }
  .ck-row > .ck-what { grid-area: what; } .ck-row > .ck-st { grid-area: st; justify-self: end; }
  .ck-row > .ck-q { grid-area: q; }
  .ck-row > .ck-pet { grid-area: who; font-weight: 400; font-size: 12px; color: var(--t2); }
  .ck-row > .ck-cu { display: none; }
  .ck-row > .ck-go { grid-area: go; }
  .ck-of { display: inline; }
  .drawer.ck-d { width: 100vw; }
  .ck-head { padding: 14px 16px 12px; }
  .ck-body { display: block; overflow-y: auto; }
  .ck-ctx { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 16px 18px; overflow: visible; }
  .ck-prof { padding: 16px; overflow: visible; }
  .ck-grid { grid-template-columns: 1fr 1fr; }
  .ck-foot { padding: 10px 16px; flex-wrap: wrap; }
  .ck-foot .xs { flex-basis: 100%; }
  .ck-foot .btn { flex: 1; justify-content: center; }
}
.ck-list.no-cu .ck-go .num { display: none; }

/* ---------------------------------------------------------------- Opvolging: compact list + detail */
.fu-panel .fu-list { margin: 0 -8px; }
.fu-list { display: flex; flex-direction: column; }
.fu-row {
  position: relative; display: grid; grid-template-columns: 24px minmax(120px, 170px) minmax(130px, 210px) minmax(0, 1fr) 120px 84px 16px; align-items: center; gap: 14px;
  padding: 12px 10px; border-radius: 14px; font-size: 13px; cursor: pointer; transition: background 0.2s, opacity 0.3s;
  animation: tiIn 0.5s var(--ease) both; animation-delay: calc(var(--i) * 30ms);
}
.fu-row + .fu-row::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--line-2); }
.fu-row:hover { background: var(--w08); }
.fu-row:hover::before, .fu-row:hover + .fu-row::before { opacity: 0; }
.fu-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fu-row.done { opacity: 0.6; }
.fu-row .task-tick { margin: 0; }
.fu-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fu-who b { font-weight: 500; }
.fu-pet { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); }
.fu-why { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: 100%; }
.fu-why .ell { max-width: 100%; }
.fu-msg { color: var(--t2); font-size: 12.5px; }
.fu-row .due { text-align: right; font-size: 12px; color: var(--t2); white-space: nowrap; }
.fu-row .due.now { color: var(--bad-t, #b4472f); }
.fu-hist { display: flex; flex-direction: column; gap: 8px; }
.fu-hi { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--w05, rgba(0,0,0,.03)); box-shadow: inset 0 0 0 1px var(--line-2); }
.fu-fl { display: inline-flex; align-items: center; gap: 6px; color: var(--ai-t); }
.fu-fl svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.fu-edit { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line-2); }
.fu-edit .ck-h { margin: 10px 0 0; }
.fu-opts { display: grid; grid-template-columns: auto auto; gap: 10px 16px; justify-content: start; }
.fu-opts .fu-when { grid-column: 1 / -1; }
.fu-opts .seg { align-self: flex-start; }
.fu-ta { min-height: 128px; }
.fu-ta.flash { animation: fuFlash 0.9s var(--ease); }
@keyframes fuFlash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.fu-chips { align-items: center; }
.drawer.fu-d .ck-body { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
@media (max-width: 1100px) {
  .fu-row { grid-template-columns: 24px minmax(110px, 1fr) minmax(0, 1.4fr) 84px 16px; }
  .fu-row .fu-msg, .fu-row .ck-st { display: none; }
}
.fu-note { transition: color 0.3s; } .fu-note.on { color: var(--up-t); }

/* ---------------------------------------------------------------- several tickets at once: tabs + selection */
.ws-strip { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 4px; margin: -6px -8px 14px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ws-strip::-webkit-scrollbar { display: none; }
.ws-strip.empty { display: none; }
.ws-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; height: 34px; max-width: 220px; padding: 0 6px 0 7px; border-radius: 10px; color: var(--t2); text-decoration: none; font-size: 12.5px; transition: background 0.2s, color 0.2s; animation: wsIn 0.35s var(--ease) both; }
.ws-tab:hover { background: var(--w0d); color: var(--t1); }
.ws-tab.on { background: var(--panel); color: var(--t1); box-shadow: 0 1px 2px var(--k2b), inset 0 0 0 1px var(--line); }
.ws-tab.home { padding: 0 10px; gap: 7px; }
.ws-tab.home svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ws-tab .n { font-size: 11.5px; color: var(--t3); }
.ws-tab.home + .ws-tab::before { content: ''; position: absolute; left: -3px; top: 9px; bottom: 9px; width: 1px; background: var(--line); }
.ws-n { min-width: 0; font-weight: 500; }
.ws-st { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--t3); }
.ws-st.s-bad { background: var(--brand-hi); } .ws-st.s-brand { background: var(--brand); } .ws-st.s-ai { background: var(--ai); } .ws-st.s-ok { background: var(--up); }
.ws-x { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 0; border-radius: 6px; background: none; color: var(--t3); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.ws-x svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.ws-tab:hover .ws-x, .ws-tab.on .ws-x, .ws-x:focus-visible { opacity: 1; }
.ws-x:hover { background: var(--w14); color: var(--t1); }
.ws-all { flex: none; margin-left: auto; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--t3); font-size: 12px; cursor: pointer; white-space: nowrap; }
.ws-all:hover { color: var(--t1); background: var(--w0d); }
@keyframes wsIn { from { opacity: 0; transform: translateY(-4px); } }

.ib-sel { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; cursor: pointer; }
.ib-sel > svg { position: absolute; z-index: 1; width: 11px; height: 11px; stroke: var(--inv-fg, #fff); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ib-sel::after { content: ''; position: absolute; inset: 2px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--w33); opacity: 0; transition: opacity 0.15s; }
.ib-row:hover .ib-sel::after, .ib.selecting .ib-sel::after, .ib-sel:focus-visible::after { opacity: 1; }
.ib-row:hover .ib-sel .ti-dot, .ib.selecting .ib-sel .ti-dot { opacity: 0; }
.ib-sel.on::after { opacity: 1; background: var(--brand); box-shadow: none; }
.ib-sel.on > svg { opacity: 1; stroke: #fff; }
.ib-sel.on .ti-dot { opacity: 0; }
.ib-sel:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ib-row.sel { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.ib-row.in-ws .ib-name b::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: var(--t3); vertical-align: middle; }
.ib-bulk { display: none; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 6px 20px var(--k2b); font-size: 13px; position: sticky; top: 54px; z-index: 5; }
.ib-bulk.on { display: flex; animation: wsIn 0.3s var(--ease) both; }
.ib-bulk .btn svg { width: 13px; height: 13px; }
@media (max-width: 860px) { .ib-bulk { flex-wrap: wrap; } .ws-tab { max-width: 160px; } }