/* 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: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0c; 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: #ffffff16; color: var(--t1); box-shadow: inset 0 0 0 1px #ffffff12; }
.ti-tab .n { color: var(--t3); font-size: 11px; }
.ti-tab.on .n { color: var(--t2); }
.ti-tab.hot .n { color: #ffb0b3; }
.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: #ffffff1c 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: #ffffff0b; }
.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: #ffffff08; }
.ti.on { background: #ffffff17; box-shadow: inset 0 0 0 1px #ffffff1a; }
.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: #dd061140; } 40% { opacity: 1; transform: none; background: #dd061130; } 100% { background: transparent; } }
.ti-ch { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff0f; }
.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: #8fd19e14; } .ti-ch.ch-telefoon svg { stroke: #a6dcb1; }
.ti-ch.ch-chat { background: #9cc3e814; } .ti-ch.ch-chat svg { stroke: #b4d3ef; }
.ti-ch.ch-mail svg { stroke: #e3ddd8; }
.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: #ffb0b3; }
.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: #ffb8bb; }
.ti-guest { font-size: 11px; color: var(--t3); flex: none; }
.btn.xs.on { background: #ffffff14; 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: #ffffff0c; }
.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: #a6dcb1; }
.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: #ffffff0a; box-shadow: none; font-size: 12px; transition: background 0.2s; }
.lab:hover { background: #ffffff14; }
.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: #f3c7a20f; 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: #ffffff1c 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: #ffffff08; 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: #ffffff0c; box-shadow: inset 0 0 0 1px #ffffff0d; 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, #2a2725e6, #221f1ee6); box-shadow: inset 0 0 0 1px #ffffff14; }
.msg.from-ai { background: linear-gradient(180deg, #f3c7a214, #f3c7a20a); box-shadow: inset 0 0 0 1px #f3c7a226; }
.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: #ece7e3; }
.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: #ffffff0d; color: var(--t2); }
.live-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: #c9ecd2; padding: 4px 10px 4px 8px; border-radius: 999px; background: #8fd19e12; }
.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: #0000002e; box-shadow: inset 0 0 0 1px #ffffff0a; max-width: 92%; }
.sys svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 1.7; flex: none; }
.sys.pro { color: #b4d3ef; } .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, #24201ef5, #1b1817f7) padding-box, linear-gradient(120deg, #f3c7a266, #ffffff10 35%, #dd061133 100%) border-box;
  box-shadow: 0 -20px 40px -30px #000, 0 20px 40px -30px #000; 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, #f3c7a2, #dd0611, #e9b872, #f3c7a2); animation: spin 6s linear infinite; box-shadow: 0 0 12px #dd061166; }
.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: #f1ece8; }
.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: #ffffff08; 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%, #ffffff1c, #ffffff06); }
.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: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0f; 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%, #ffffff1c, #ffffff06); }
.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: #00000033; box-shadow: inset 0 0 0 1px #ffffff0d; 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: #efc78e; padding: 8px 10px; border-radius: 12px; background: #e9b87212; }
.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, #dd06111c, #dd061108); box-shadow: inset 0 0 0 1px #dd061133; font-size: 12.5px; animation: pcIn 0.6s var(--ease) both; }
.member-hint > svg, .follow > svg { width: 16px; height: 16px; stroke: #ffb0b3; fill: none; stroke-width: 1.6; flex: none; }
.member-hint b, .follow b { font-weight: 500; }
.follow { background: linear-gradient(90deg, #f3c7a218, #f3c7a206); box-shadow: inset 0 0 0 1px #f3c7a22e; margin-top: 8px; }
.follow > svg { stroke: var(--ai); }
.follow.ok { background: #8fd19e10; box-shadow: inset 0 0 0 1px #8fd19e2a; }
.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, #1c1918e6, #1b1817fa 40%); backdrop-filter: blur(8px); }
.done-note { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: #0000002e; box-shadow: inset 0 0 0 1px #ffffff0d; 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: #1c1a19f7; backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px #ffffff1a, 0 24px 50px -16px #000; 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: #ffffff10; 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: #ffffff1c 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: #ffffff10; }
.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: #f3c7a20d; 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 #ffffff08; }
.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: #ffffff0d; }
.vmeter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #dd061166, 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: #ffffff66; }
.cp-mem { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: #ffffff07; font-size: 12.5px; }
.cp-mem.on { background: linear-gradient(90deg, #dd061120, #dd061108); box-shadow: inset 0 0 0 1px #dd061133; }
.cp-mem > svg { width: 15px; height: 15px; stroke: var(--t2); fill: none; stroke-width: 1.6; flex: none; }
.cp-mem.on > svg { stroke: #ffb0b3; }
.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: #b4d3ef; padding: 8px 10px; border-radius: 12px; background: #9cc3e810; }
.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: #ffffff06; display: flex; flex-direction: column; gap: 9px; transition: box-shadow 0.3s, background 0.3s; }
.pet.on { background: #f3c7a20d; }
.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 #8fd19e; } 60% { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px #8fd19e88; } }
.pet.gone-pet { opacity: 0.6; }
.pet.temp { background: repeating-linear-gradient(135deg, #ffffff05 0 8px, transparent 8px 16px); box-shadow: inset 0 0 0 1px #ffffff14; border: 1px dashed #ffffff1c; }
.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: #a6dcb1; }
.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: #ffffff0c; color: var(--t1); }
.trait i { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: #00000040; 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: #8fd19e1a; }
.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 #ffffff0a; 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: #a6dcb1; margin-left: auto; }
.en-q { font-size: 12px; color: var(--t2); font-style: italic; padding-left: 10px; border-left: 2px solid #ffffff1a; }
.ord { padding: 2px 0 0; }
.ord.late { padding: 10px 12px; border-radius: 14px; background: #e9b8720d; }
.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: #ffffff1a; }
.ev.last::before { display: none; }
.ev i { position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #ffffff33; }
.ev.last i { background: var(--up); box-shadow: 0 0 0 3px #8fd19e33; }
.late .ev.last i { background: var(--warn); box-shadow: 0 0 0 3px #e9b87233; }
.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 #ffffff08; }
.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: #ffffff14; }
.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: #ffffff10; color: var(--t2); }
.rs.done > i { background: #8fd19e2a; } .rs.done > i svg { width: 12px; height: 12px; stroke: var(--up); fill: none; stroke-width: 2.4; }
.rs.cur > i { background: var(--t1); color: #12100f; box-shadow: 0 0 0 4px #ffffff14; }
.rs b { font-weight: 500; font-size: 12.5px; }
.nc { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: #9cc3e810; box-shadow: inset 0 0 0 1px #9cc3e826; }
.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: #8fd19e14; color: #c9ecd2; }
.vfail { background: #f0837a14; color: #f5a097; }
.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: #ffffff07; 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: #ffffff0c; }
.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 #000; }
  .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: #ffffff10; 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; }