/* Nova-app: donker, warm, met de orb als hart. Mobiel eerst (iPhone/Android als app op het startscherm). */
:root {
  --bg: #0b1016; --bg2: #101823; --card: #151f2b; --card2: #1b2735; --line: #233244;
  --ink: #eef4f8; --ink2: #b7c6d2; --muted: #7d8fa0;
  --a1: #27b7e0; --a2: #7c5cff; --a3: #ff5ca8; --a4: #ffb547; --ok: #3ddc97; --bad: #ff6b6b;
  --me: linear-gradient(135deg, #2a6df4, #7c5cff);
  --r: 20px; --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font); overscroll-behavior: none; }
body { background: radial-gradient(120% 60% at 50% -10%, #1a3550 0%, var(--bg) 55%) fixed, var(--bg); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--a1); }
.hidden { display: none !important; }

/* ---- orb ---- */
.orb { --s: 72px; width: var(--s); height: var(--s); border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(from 0deg, var(--a1), var(--a2), var(--a3), var(--a4), var(--a1)); animation: spin 9s linear infinite;
  box-shadow: 0 0 calc(var(--s) * .5) #7c5cff55, 0 0 var(--s) #27b7e026; }
.orb::before { content: ""; position: absolute; inset: calc(var(--s) * .08); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a3b47, #0c1318 70%); }
.orb::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--s) * .36); color: #fff; text-shadow: 0 0 18px #9fdcff; animation: spin 9s linear infinite reverse; }
.orb.think { animation-duration: 1.6s; }
.orb.think::after { animation-duration: 1.6s; }
.orb.big { --s: 148px; }
.orb.small { --s: 34px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .orb, .orb::after { animation: none !important; } }

/* ---- schermen ---- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; padding-top: var(--safe-t); }
.center { align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 18px; }
.center h1 { margin: 6px 0 0; font-size: 34px; letter-spacing: -.5px; }
.center p { margin: 0; color: var(--ink2); max-width: 340px; }
.btn { border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 650; cursor: pointer; background: var(--card2); color: var(--ink); display: inline-flex; gap: 8px; align-items: center; justify-content: center; text-decoration: none; }
.btn.pri { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 8px 24px #7c5cff44; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.small { padding: 8px 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; }
.err { color: var(--bad); font-size: 14px; }

/* ---- onboarding ---- */
.steps { display: flex; gap: 6px; }
.steps i { width: 26px; height: 5px; border-radius: 9px; background: var(--line); }
.steps i.on { background: linear-gradient(90deg, var(--a1), var(--a2)); }
.check { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px; background: #3ddc9722; color: var(--ok); font-weight: 600; }
.hint { font-size: 14px; color: var(--muted); }
.ios-share { display: inline-block; padding: 1px 7px; border: 1px solid var(--muted); border-radius: 6px; font-size: 13px; }

/* ---- chat ---- */
header.top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #0b1016cc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff0f; z-index: 2; }
header.top .who { flex: 1; min-width: 0; }
header.top b { display: block; font-size: 17px; }
header.top small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.top small.live { color: var(--a1); }
.icon { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--card); display: grid; place-items: center; cursor: pointer; font-size: 19px; flex: none; }
.icon.call { background: linear-gradient(135deg, #2fd27a, #13a35a); box-shadow: 0 6px 18px #2fd27a44; }

#feed { flex: 1; overflow-y: auto; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.day { align-self: center; font-size: 12px; color: var(--muted); background: var(--card); padding: 3px 10px; border-radius: 999px; margin: 6px 0; }
.msg { max-width: min(86%, 620px); padding: 10px 14px; border-radius: var(--r); white-space: pre-wrap; overflow-wrap: anywhere; position: relative; animation: pop .18s ease-out; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }
.msg.nova { align-self: flex-start; background: var(--card); border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; background: var(--me); color: #fff; border-bottom-right-radius: 6px; }
.msg .t { display: block; font-size: 11px; opacity: .55; margin-top: 4px; text-align: right; }
.msg blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--a2); background: #ffffff08; border-radius: 0 10px 10px 0; color: var(--ink2); }
.msg code { background: #ffffff14; padding: 1px 5px; border-radius: 5px; font-size: 14px; }
.msg a { color: #8fd8ff; }
.msg.me a { color: #fff; }
.msg .pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; margin: -2px -6px 6px; }
.msg .pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.kb { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.kb .row { display: flex; gap: 6px; }
.kb button, .kb a { flex: 1; border: 1px solid #ffffff1c; background: #ffffff0d; border-radius: 12px; padding: 9px 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; text-align: center; }
.kb button:active { transform: scale(.98); }
.kb.done button { opacity: .4; pointer-events: none; }
.kb.done button.chosen { opacity: .85; outline: 2px solid var(--accent, #7c5cff); }

/* kaarten */
.card-mail { background: #0f1720; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 2px 0 4px; white-space: normal; }
.card-mail .hd { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 3px; font-size: 14px; }
.card-mail .hd span { color: var(--muted); display: inline-block; min-width: 72px; }
.card-mail .hd .sub { font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 2px; }
.card-mail .bd { padding: 12px 14px; white-space: pre-wrap; color: var(--ink2); max-height: 230px; overflow: hidden; position: relative; }
.card-mail .bd.open { max-height: none; }
.card-mail .bd:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, #0f1720); }
.card-mail .more { display: block; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 9px; color: var(--a1); font-weight: 600; cursor: pointer; }
.card-nav { border-radius: 16px; padding: 16px; background: radial-gradient(120% 120% at 0% 0%, #1f4a3a, #0f1f1a); border: 1px solid #2fd27a33; white-space: normal; }
.card-nav b { display: block; font-size: 17px; margin: 2px 0 10px; }

.typing { align-self: flex-start; display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; padding: 4px 6px; }

/* invoer */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 1px solid var(--line); background: var(--bg2); border-radius: 999px; padding: 7px 13px; font-size: 14px; cursor: pointer; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(10px + var(--safe-b)); background: #0b1016ee; border-top: 1px solid #ffffff0f; }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); background: var(--bg2); border-radius: 22px; padding: 11px 16px; max-height: 140px; outline: none; line-height: 1.35; }
.composer textarea:focus { border-color: #7c5cff88; }
/* chat met contactpersonen: bolletje rechtsonder (boven het tekstvak) en een zwevend venstertje */
.cbub { position: fixed; right: 14px; bottom: calc(86px + var(--safe-b)); z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--a1), var(--a2)); font-size: 22px; box-shadow: 0 6px 20px #0008; cursor: pointer; }
.cbub i { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--a3); color: #fff; font: 700 12px/20px var(--font); font-style: normal; }
.cpop { position: fixed; right: 12px; bottom: calc(86px + var(--safe-b)); z-index: 41; width: min(360px, calc(100vw - 24px)); max-height: min(60vh, 520px);
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--a1); border-radius: 18px; box-shadow: 0 12px 40px #000a; animation: cpop .18s ease-out; }
@keyframes cpop { from { transform: translateY(12px); opacity: 0; } }
.cpop-h { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px 12px; border-bottom: 1px solid var(--line); }
.cpop-tabs { flex: 1; display: flex; gap: 6px; overflow-x: auto; }
.cpop-tabs button { border: 1px solid var(--line); background: var(--bg2); border-radius: 14px; padding: 4px 10px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.cpop-tabs button.on { background: var(--a2); border-color: var(--a2); font-weight: 600; }
.cpop-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.cpop-list .m { max-width: 82%; padding: 7px 11px; border-radius: 14px; background: var(--card2); font-size: 15px; align-self: flex-start; word-wrap: break-word; }
.cpop-list .m.mijn { align-self: flex-end; background: var(--me); }
.cpop-list .m small { display: block; font-size: 11px; color: #ffffffa6; margin-top: 2px; }
.cpop-list .m small .ck { color: #ffffff8c; }
.cpop-list .m small .ck.rd { color: #8ff4ff; font-weight: 700; text-shadow: 0 0 6px #8ff4ff66; }
.cpop-list .leeg { color: var(--muted); font-size: 14px; text-align: center; margin: auto; }
.cpop-f { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.cpop-f .icon { flex: none; }
.cpop.drop { outline: 2px dashed var(--a1); }
.cpop-att { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px 0; }
.cpop-att span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 3px 4px 3px 6px; font-size: 13px; }
.cpop-att img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.cpop-att b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.cpop-att button { border: 0; background: none; cursor: pointer; padding: 0 4px; opacity: .7; }
.cpop-list .m img { display: block; max-width: 100%; max-height: 200px; border-radius: 10px; margin: 2px 0 4px; cursor: zoom-in; }
.cpop-list .m a.f, .msg a.f { display: inline-block; margin: 2px 0 4px; padding: 5px 9px; border-radius: 10px; background: #ffffff14; color: inherit; text-decoration: none; word-break: break-all; }
.cpop-f input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg2); border-radius: 18px; padding: 9px 14px; outline: none; font-size: 16px; }
.composer .icon { width: 44px; height: 44px; }
.composer .send { background: linear-gradient(135deg, var(--a1), var(--a2)); }
.rec { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 22px; background: #ff5ca81f; color: #ffb3d4; font-weight: 600; }
.rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--a3); animation: pulse 1s infinite; }
.preview { display: flex; gap: 6px; padding: 0 12px 6px; overflow-x: auto; }
.preview .p { position: relative; flex: none; }
.preview img, .preview .doc { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--card); font-size: 12px; }
.preview .x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #000c; cursor: pointer; font-size: 12px; }

/* instellingen */
.sheet { position: fixed; inset: 0; background: #000a; display: flex; align-items: flex-end; z-index: 10; }
.sheet .panel { width: 100%; max-height: 88vh; overflow-y: auto; background: var(--bg2); border-radius: 24px 24px 0 0; padding: 18px 18px calc(22px + var(--safe-b)); animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.panel h2 { margin: 2px 0 14px; font-size: 20px; }
.panel h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--card); border-radius: 14px; margin-bottom: 6px; }
.set small { display: block; color: var(--muted); font-size: 13px; }
.set input[type=time], .set select { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.sw { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw:checked { background: linear-gradient(135deg, var(--a1), var(--a2)); }
.sw:checked::after { transform: translateX(20px); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--muted); }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

/* bellen */
.call-screen { background: radial-gradient(90% 60% at 50% 30%, #23144a 0%, #0b1016 70%); }
.call-screen .state { font-size: 18px; color: var(--ink2); min-height: 27px; }
.call-screen .said { font-size: 15px; color: var(--muted); max-width: 340px; min-height: 44px; }
.call-screen .orb.listen { animation-duration: 4s; box-shadow: 0 0 90px #27b7e088, 0 0 160px #7c5cff55; }
.call-screen .orb.talk { animation: spin 3s linear infinite, pulse 1.1s ease-in-out infinite; }
.call-screen .end { width: 68px; height: 68px; border-radius: 50%; border: 0; background: #ff3b47; font-size: 28px; cursor: pointer; box-shadow: 0 8px 26px #ff3b4766; }

/* wachtspinner in het gesprek */
.spin { display: flex; gap: 8px; height: 14px; align-items: center; }
.spin i { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a2)); animation: bounce 1.1s infinite ease-in-out; }
.spin i:nth-child(2) { animation-delay: .15s; } .spin i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* bestanden slepen naar de chat */
#s-chat.drop::after { content: "Laat los om toe te voegen 📎"; position: absolute; inset: 70px 12px 90px; display: grid; place-items: center; border: 2px dashed #7c5cffaa; border-radius: 24px; background: #0b1016cc; color: var(--ink); font-size: 18px; font-weight: 650; z-index: 5; pointer-events: none; }

/* gesprek als balk boven de chat */
.callbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: radial-gradient(120% 160% at 0% 0%, #2a1660 0%, #12101f 70%); border-bottom: 1px solid #7c5cff44; box-shadow: 0 8px 24px #0006; z-index: 3; }
.callbar .orb { --s: 64px; cursor: pointer; }
.callbar .orb.listen { animation-duration: 4s; box-shadow: 0 0 40px #27b7e088, 0 0 80px #7c5cff55; }
.callbar .orb.think { animation-duration: 1.4s; }
.callbar .orb.talk { animation: spin 3s linear infinite, pulse 1.1s ease-in-out infinite; }
.cb-txt { flex: 1; min-width: 0; }
.cb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-top b { font-size: 15px; }
.cb-top .state { color: var(--ink2); font-size: 14px; }
.callbar .said { color: var(--muted); font-size: 14px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.callbar .end { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #ff3b47; color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 6px 20px #ff3b4766; flex: none; }
.callbar .spin i { width: 7px; height: 7px; }

/* Nova typt live */
.msg.live .caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: linear-gradient(180deg, #a78bfa, #27b7e0); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* installeren */
.inst-tip { max-width: 360px; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff1a; color: var(--ink2); font-size: 14px; line-height: 1.45; text-align: left; }
.inst-tip .btn { margin-top: 10px; display: inline-flex; }
.steps-l { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.steps-l li { display: flex; gap: 12px; align-items: flex-start; }
.steps-l .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: linear-gradient(135deg, #7c5cff, #27b7e0); color: #fff; }
.steps-l b { display: block; font-weight: 600; }
.steps-l small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ios-share { display: inline-block; padding: 0 6px; border-radius: 6px; background: #ffffff14; font-weight: 600; }
.warn { padding: 10px 12px; border-radius: 12px; background: #ff3b4722; border: 1px solid #ff3b4755; font-size: 14px; }

/* wachten op "hey Nova" */
.wakebar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: linear-gradient(90deg, #1b1440, #10202c); border-bottom: 1px solid #7c5cff33; font-size: 14px; color: var(--ink2); z-index: 3; }
.wakebar #wake-txt { flex: 1; min-width: 0; }
.wakebar button { border: 0; background: #ffffff12; color: var(--ink2); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: none; }
.wakebar .ear { width: 12px; height: 12px; border-radius: 50%; background: #27b7e0; box-shadow: 0 0 0 0 #27b7e088; animation: earp 1.8s ease-out infinite; flex: none; }
@keyframes earp { 0% { box-shadow: 0 0 0 0 #27b7e088; } 100% { box-shadow: 0 0 0 12px #27b7e000; } }
.wakebar.got { background: linear-gradient(90deg, #4b2bd6, #1aa3cf); color: #fff; }
.wakebar.got .ear { background: #fff; animation-duration: .6s; }
.wakebar.off { background: #1a1a24; }
.wakebar.off .ear { background: #6b7280; animation: none; }
.top #btn-ear.on { background: #27b7e033; box-shadow: 0 0 0 2px #27b7e066; }

/* micro uit tijdens het bellen */
.callbar .mute { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff2a; background: #ffffff12; font-size: 19px; cursor: pointer; flex: none; }
.callbar .mute.on { background: #ffb02033; border-color: #ffb020aa; box-shadow: 0 0 0 3px #ffb02022; }
.callbar #btn-name.on { background: #27b7e033; border-color: #27b7e0aa; box-shadow: 0 0 0 3px #27b7e022; }
.msg.ignored { opacity: .5; font-style: italic; }
.msg.chat { border-left: 3px solid #27b7e0; }
.msg .rc { display: block; font-size: 11px; opacity: .6; text-align: right; margin-top: 2px; }
.msg .rc.read { color: #27b7e0; opacity: 1; }
#feed.only-chat > :not(.chat) { display: none; }
.top #btn-msgs.on { background: #27b7e033; }

/* invoer en snelknoppen: compacter en netjes op gsm */
.composer { align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + var(--safe-b)); }
.composer textarea { box-sizing: border-box; min-height: 44px; font-size: 16px; line-height: 1.35; padding: 11px 16px; overflow-y: auto; }
.composer textarea::placeholder { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .icon { width: 44px; height: 44px; font-size: 19px; }
.chips { gap: 6px; padding: 2px 10px 6px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.chips button { padding: 6px 12px; font-size: 13.5px; line-height: 1.2; }
.chips button:last-child { margin-right: 28px; }
#s-chat.kbd-open .chips { display: none; }
.typing { font-size: 13.5px; padding: 2px 4px; }
.typing .orb.small { --s: 28px; width: 28px; height: 28px; }
@media (max-width: 420px) {
  .composer { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .composer .icon { width: 42px; height: 42px; font-size: 18px; }
}

/* bijlagen in een mailconcept */
.card-mail .att { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px; }
.card-mail .att img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.card-mail .att span { padding: 8px 10px; border-radius: 10px; background: #ffffff0d; border: 1px solid var(--line); font-size: 13px; }

/* foto groot bekijken */
#lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; overflow: auto; cursor: zoom-out; }
#lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; cursor: zoom-in; }
#lightbox.full { display: block; }
#lightbox.full img { max-width: none; max-height: none; cursor: zoom-out; }
#lightbox .lb-x { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; z-index: 1; }
.msg .pics img, .msg .att img { cursor: zoom-in; }
.msg a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* zware klussen: voortgangsbalk boven het invoerveld */
.klusbox{padding:6px 64px 0 12px;display:flex;flex-direction:column;gap:6px}
.klus{background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(0,200,255,.10));border:1px solid rgba(140,160,255,.35);border-radius:14px;padding:9px 12px 10px;font-size:13px;box-shadow:0 4px 18px rgba(80,90,255,.12)}
.klus-kop{display:flex;justify-content:space-between;gap:8px;align-items:center}.klus-kop span{opacity:.75;font-variant-numeric:tabular-nums;font-size:12px}
.klus-titel{opacity:.8;font-size:12px;margin:2px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klus-meter{height:8px;border-radius:99px;background:rgba(127,127,160,.22);overflow:hidden;position:relative}
.klus-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c5cff,#20c4ff,#4be3a0);background-size:200% 100%;animation:klusglans 2.4s linear infinite;transition:width .8s ease}
.klus.los .klus-meter::after{content:"";position:absolute;inset:0;width:35%;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(160,200,255,.75),transparent);animation:klusloop 1.5s ease-in-out infinite}
.klus-stap{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12.5px}.klus-stap em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.klus.vraag{border-color:rgba(255,190,60,.6);background:linear-gradient(135deg,rgba(255,190,60,.18),rgba(255,140,60,.08))}.klus.vraag .klus-meter i{animation:none;background:#ffbe3c}
.klus.klaar{border-color:rgba(75,227,160,.6)}.klus.klaar .klus-meter i{animation:none;background:#4be3a0}
.klus.fout{border-color:rgba(255,100,100,.55)}.klus.fout .klus-meter i{animation:none;background:#ff6464}
@keyframes klusglans{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes klusloop{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.klus-meter i,.klus.los .klus-meter::after{animation:none}}

/* emoji: kiezer en :naam:-suggesties boven het invoerveld */
.composer { position: relative; }
.emo-sug, .emo-pick { position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 30; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 34px #0008; }
.emo-sug { padding: 4px; min-width: 220px; max-width: calc(100% - 20px); display: flex; flex-direction: column; }
.emo-r { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; text-align: left; background: none; color: inherit; border: 0; cursor: pointer; font: inherit; }
.emo-r.aan, .emo-r:hover { background: #7c5cff33; }
.emo-e { font-size: 20px; width: 24px; text-align: center; } .emo-n { opacity: .8; font-size: 13px; }
.emo-pick { width: 360px; max-width: calc(100vw - 20px); box-sizing: border-box; padding: 8px; }
.emo-pick input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--bg); color: inherit; border-radius: 10px; padding: 8px 10px; outline: none; font: inherit; }
.emo-cats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px; margin: 6px 0; }
.emo-cats button { background: none; border: 0; font-size: 18px; padding: 4px 6px; border-radius: 8px; cursor: pointer; opacity: .65; }
.emo-cats button.aan, .emo-cats button:hover { opacity: 1; background: #ffffff14; }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); max-height: 240px; overflow-y: auto; }
.emo-grid button { background: none; border: 0; font-size: 23px; line-height: 1; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.emo-grid button:hover { background: #ffffff14; }
.emo-leeg { grid-column: 1 / -1; opacity: .7; font-size: 13px; margin: 10px 4px; }
.cpop-f { position: relative; }
.cpop-f .emo-pick { left: 0; width: 100%; }
/* chatvenstertje: breder, 📎 en 🙂 klein op een rij erboven, het invoerveld groot over de volle breedte met ➤ ernaast */
.cpop { width: min(420px, calc(100vw - 24px)); }
.cpop-f { flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 8px 8px; }
.cpop-f #cpop-clip, .cpop-f #cpop-emo { width: 32px; height: 32px; font-size: 17px; opacity: .8; }
.cpop-f #cpop-clip:hover, .cpop-f #cpop-emo:hover { opacity: 1; }
.cpop-f input { flex: 1 1 calc(100% - 56px); min-height: 46px; padding: 11px 16px; border-radius: 22px; font-size: 16px; }
.cpop-f .send { width: 46px; height: 46px; }