/* AppMe testchat — stijl */
:root{
  /* Kleurthema: --p (hoofdkleur), --a (accent) en --g (icoon/knop, mag een verloop zijn) worden door de app gezet */
  --p:#8E1B3A; --a:#E3A93B; --g:var(--p);
  --brand:var(--p); --brand-2:color-mix(in srgb,var(--p) 80%,#fff); --brand-ink:#fff; --accent:var(--a);
  --bg:color-mix(in srgb,var(--p) 4%,#F7F5F4); --panel:#FFFFFF; --ink:#1D1719; --ink-2:#6E6467;
  --line:color-mix(in srgb,var(--p) 10%,#E9E5E3);
  --mine:color-mix(in srgb,var(--p) 16%,#FFFFFF); --mine-ink:#1D1719; --theirs:#FFFFFF;
  --chat-bg:color-mix(in srgb,var(--p) 7%,#F3F1F0);
  --danger:#C92A2A; --ok:#2B8A3E; --shadow:0 1px 2px rgba(20,14,16,.08),0 4px 16px rgba(20,14,16,.06);
  --r:18px; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:color-mix(in srgb,var(--p) 82%,#fff); --brand-2:color-mix(in srgb,var(--p) 65%,#fff);
    --bg:color-mix(in srgb,var(--p) 7%,#0E0C0D); --panel:color-mix(in srgb,var(--p) 10%,#161314);
    --ink:#F6F0F2; --ink-2:#B5A9AE; --line:color-mix(in srgb,var(--p) 14%,#2A2527);
    --mine:color-mix(in srgb,var(--p) 58%,#140F11); --mine-ink:#FFFFFF;
    --theirs:color-mix(in srgb,var(--p) 9%,#221E20); --chat-bg:color-mix(in srgb,var(--p) 5%,#0E0C0D);
    --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overscroll-behavior:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:var(--brand)}
html,body{overflow:hidden;position:fixed;inset:0;width:100%}
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
[hidden]{display:none!important}

/* splash / logo */
.splash{flex:1;display:grid;place-items:center}
.logo-mark{width:72px;height:72px;border-radius:22px;background:var(--g);
  position:relative;box-shadow:var(--shadow)}
.logo-mark::after{content:"";position:absolute;inset:25% 22% 31% 22%;background:#fff;border-radius:28% 28% 28% 6%}

/* auth */
.auth{flex:1;overflow:auto;padding:calc(32px + var(--safe-t)) 20px calc(24px + var(--safe-b));display:flex;flex-direction:column;align-items:center}
.auth .logo-mark{margin:12px 0 14px}
.auth h1{margin:0;font-size:28px;letter-spacing:-.02em}
.auth p.sub{margin:4px 0 22px;color:var(--ink-2);text-align:center}
.card{width:100%;max-width:400px;background:var(--panel);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.tabs{display:flex;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:14px}
.tabs button{flex:1;padding:9px;border-radius:9px;color:var(--ink-2);font-weight:600}
.tabs button[aria-selected=true]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
label.f{display:block;margin:10px 0 0;font-size:13px;color:var(--ink-2);font-weight:600}
.inp{width:100%;margin-top:5px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);outline:none}
.inp:focus{border-color:var(--brand)}
.pw{position:relative}
.pw .inp{padding-right:48px}
.eye{position:absolute;right:4px;top:calc(50% + 2.5px);transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;color:var(--ink-2);border-radius:10px}
.eye svg{width:22px;height:22px}
.btn svg,.install-tip svg,.menu-list svg{width:20px;height:20px;flex:none}
.hint{font-size:12px;color:var(--ink-2);margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;
  background:var(--brand);color:var(--brand-ink);font-weight:700}
.btn.block{width:100%;margin-top:16px}
.btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--line)}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid var(--line)}
.btn:disabled{opacity:.55}
.err{color:var(--danger);font-size:14px;margin-top:10px;min-height:1em}
.foot{margin-top:18px;font-size:12px;color:var(--ink-2);text-align:center;max-width:400px}

/* layout */
.shell{flex:1;display:flex;min-height:0}
.pane-list{width:100%;display:flex;flex-direction:column;background:var(--panel);min-height:0}
.pane-chat{display:none;flex:1;flex-direction:column;min-width:0;min-height:0;background:var(--chat-bg)}
.shell.has-chat .pane-list{display:none}
.shell.has-chat .pane-chat{display:flex}
@media (min-width:860px){
  .pane-list{width:360px;flex:none;border-right:1px solid var(--line);display:flex!important}
  .pane-chat{display:flex}
  .back-btn{display:none!important}
}
.bar{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 12px 10px;min-height:58px;background:var(--panel);border-bottom:1px solid var(--line)}
.bar h2{margin:0;font-size:20px;flex:1;letter-spacing:-.01em}
.bar .title{flex:1;min-width:0;cursor:pointer}
.bar .title b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .title small{display:block;color:var(--ink-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);flex:none}
.icon-btn:active{background:var(--bg)}
.icon-btn svg{width:22px;height:22px}
.search{padding:8px 12px}
.search .inp{margin:0;padding:10px 14px;background:var(--bg);border-color:transparent}

/* conversation list */
.list{flex:1;overflow:auto;padding-bottom:var(--safe-b)}
.row{display:flex;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;width:100%;text-align:left}
.row:active,.row.active{background:var(--bg)}
.row .meta{flex:1;min-width:0;border-bottom:1px solid var(--line);padding-bottom:10px}
.row:last-child .meta{border-bottom:0}
.row .top{display:flex;gap:8px;align-items:baseline}
.row .top b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650}
.row .top time{font-size:12px;color:var(--ink-2)}
.row .bot{display:flex;gap:8px;align-items:center;margin-top:2px}
.row .bot span{flex:1;color:var(--ink-2);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--accent);color:#1B1300;font-size:12px;font-weight:700;display:grid;place-items:center}
.row.unread .top time{color:var(--accent);font-weight:600}
.avatar{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;position:relative;text-transform:uppercase}
.avatar.sm{width:36px;height:36px;font-size:14px}
.avatar .dot{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:#37B24D;border:2px solid var(--panel)}
.empty{padding:40px 24px;text-align:center;color:var(--ink-2)}
.empty .btn{margin-top:14px}
.fab{position:absolute;right:18px;bottom:calc(18px + var(--safe-b));width:56px;height:56px;border-radius:18px;background:var(--g);color:var(--brand-ink);display:grid;place-items:center;box-shadow:0 6px 20px color-mix(in srgb,var(--p) 40%,transparent)}
.fab svg{width:26px;height:26px}
.pane-list{position:relative}
.install-tip{margin:8px 12px;padding:10px 12px;border-radius:12px;background:var(--mine);color:var(--mine-ink);font-size:14px;display:flex;gap:10px;align-items:center}
.install-tip span{flex:1}
.install-tip .btn{padding:7px 12px;font-size:14px}

/* chat */
.msgs{flex:1;overflow:auto;padding:10px 10px 6px;display:flex;flex-direction:column;gap:2px}
.day{align-self:center;margin:10px 0 6px;padding:4px 10px;border-radius:10px;background:var(--panel);color:var(--ink-2);font-size:12px;box-shadow:var(--shadow)}
.sys{align-self:center;margin:6px 0;color:var(--ink-2);font-size:12.5px;text-align:center;max-width:80%}
.msg{max-width:min(78%,560px);padding:7px 10px 5px;border-radius:var(--r);background:var(--theirs);box-shadow:var(--shadow);align-self:flex-start;position:relative;word-wrap:break-word;overflow-wrap:anywhere;margin-top:2px}
.msg.mine{align-self:flex-end;background:var(--mine);color:var(--mine-ink)}
.msg.first{margin-top:8px}
.msg.first:not(.mine){border-top-left-radius:6px}
.msg.first.mine{border-top-right-radius:6px}
.msg .who{font-size:12.5px;font-weight:700;margin-bottom:1px}
.msg .txt{white-space:pre-wrap}
.msg .txt.big{font-size:34px;line-height:1.15}
.msg .foot{display:inline-flex;float:right;gap:4px;align-items:center;margin:6px 0 -2px 10px;font-size:11px;color:var(--ink-2);max-width:none}
.msg.mine .foot{color:color-mix(in srgb,var(--mine-ink) 60%,transparent)}
.tick{font-size:12px;letter-spacing:-3px}
.tick.read{color:var(--accent)}

.msg img.photo{display:block;max-width:100%;max-height:340px;border-radius:12px;margin:-2px -4px 4px;cursor:zoom-in;background:var(--line);min-width:120px;min-height:80px;object-fit:cover}
.msg audio{width:240px;max-width:100%;height:40px;margin:2px 0}
.msg.deleted .txt{font-style:italic;color:var(--ink-2)}
.quote{border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent);padding:4px 8px;border-radius:8px;margin:2px 0 5px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.quote b{display:block;color:var(--brand);font-size:12.5px}
.msg.flash{animation:flash 1.2s}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:var(--shadow)}}
.more-old{align-self:center;margin:4px 0 8px}

/* composer */
.composer{display:flex;align-items:flex-end;gap:6px;padding:8px 8px calc(8px + var(--safe-b));background:var(--chat-bg)}
.composer .box{flex:1;display:flex;align-items:flex-end;background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:2px 4px;min-width:0}
.composer textarea{flex:1;border:0;outline:none;resize:none;background:transparent;padding:10px 6px;max-height:32dvh;min-height:44px;line-height:1.35}
.send{width:48px;height:48px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.send svg{width:22px;height:22px}
.send.rec{background:var(--danger);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.replying{display:flex;gap:8px;align-items:center;margin:0 8px;padding:8px 10px;background:var(--panel);border-radius:14px 14px 0 0;font-size:13.5px;color:var(--ink-2)}
.replying div{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--brand);padding-left:8px}
.rec-bar{flex:1;display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--danger);font-weight:600;min-height:48px}
.rec-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:pulse 1s infinite}
.rec-bar span{flex:1}

/* sheets / dialogs */
.sheet-back{position:fixed;inset:0;background:rgba(10,12,24,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:520px;max-height:88dvh;background:var(--panel);border-radius:22px 22px 0 0;display:flex;flex-direction:column;padding-bottom:var(--safe-b);animation:up .2s ease-out}
@media (min-width:600px){.sheet-back{align-items:center}.sheet{border-radius:22px}}
@keyframes up{from{transform:translateY(30px);opacity:.6}}
.sheet header{display:flex;align-items:center;gap:8px;padding:14px 14px 6px}
.sheet header h3{flex:1;margin:0;font-size:18px}
.sheet .content{overflow:auto;padding:4px 16px 16px}
.pick{display:flex;gap:12px;align-items:center;padding:9px 4px;width:100%;text-align:left;border-radius:12px}
.pick:active{background:var(--bg)}
.pick .meta{flex:1;min-width:0}
.pick .meta small{display:block;color:var(--ink-2)}
.check{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none}
.pick.on .check{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.menu-list button{display:flex;gap:12px;align-items:center;width:100%;padding:13px 6px;text-align:left;border-bottom:1px solid var(--line)}
.menu-list button:last-child{border-bottom:0}
.menu-list button.danger{color:var(--danger)}
.viewer{position:fixed;inset:0;background:#000;z-index:30;display:grid;place-items:center}
.viewer img{max-width:100vw;max-height:100dvh;object-fit:contain}
.viewer .icon-btn{position:absolute;top:calc(10px + var(--safe-t));right:10px;color:#fff;background:rgba(255,255,255,.12)}

#toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:12px;font-size:14px;z-index:40;max-width:90vw;box-shadow:var(--shadow)}
.welcome{flex:1;display:grid;place-items:center;color:var(--ink-2);text-align:center;padding:24px}
.welcome .logo-mark{margin:0 auto 14px}
.pill{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--bg);font-size:12px;color:var(--ink-2)}

/* kleurkeuze in profiel */
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 4px}
.th{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);text-align:center;line-height:1.15}
.th i{width:46px;height:46px;border-radius:14px;position:relative;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent);border:3px solid transparent}
.th i::after{content:"";position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:var(--sw-a);border:2px solid var(--panel)}
.th[aria-pressed=true] i{border-color:var(--ink)}
.th[aria-pressed=true]{color:var(--ink);font-weight:700}

.typing{color:var(--brand)!important;font-style:italic;font-weight:600}
.bar .title small.typing{color:var(--brand)}

/* --- groot bewerkscherm --- */
.composer .expand{width:36px;height:36px;align-self:flex-end;margin-bottom:4px;color:var(--brand)}
.composer .expand svg{width:19px;height:19px}
.big-editor{position:fixed;inset:0;z-index:60;background:var(--panel);display:flex;flex-direction:column;animation:up .18s ease-out}
.big-editor .title b{font-size:15.5px}
.big-editor .big-count{display:block;color:var(--ink-2);font-size:12.5px}
.btn.small{padding:8px 14px;font-size:14.5px;border-radius:20px}
.btn.small svg{width:17px;height:17px}
.big-ta{flex:1;width:100%;border:0;outline:none;resize:none;background:var(--panel);color:var(--ink);font:inherit;font-size:17px;line-height:1.55;
  padding:18px 18px calc(18px + var(--safe-b));overflow:auto}

/* --- bellen --- */
.call{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--p) 70%,#000) 0%,#120c0e 70%);animation:fadein .2s ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.call video.remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .3s}
.call.has-remote video.remote{opacity:1}
.call video.local{position:absolute;right:14px;top:calc(14px + var(--safe-t));width:28vw;max-width:150px;aspect-ratio:3/4;object-fit:cover;border-radius:16px;
  background:#000;box-shadow:0 6px 24px #0008;z-index:3;transform:scaleX(-1);display:none;cursor:pointer}
.call.video video.local{display:block}
.call.back-cam video.local{transform:none}
.call.cam-off video.local{opacity:.25}
.call.swap.has-remote video.local{inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;z-index:0}
.call.swap.has-remote video.remote{inset:auto;right:14px;top:calc(14px + var(--safe-t));width:28vw;max-width:150px;height:auto;aspect-ratio:3/4;border-radius:16px;z-index:3}
.call-top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:calc(70px + var(--safe-t)) 20px 0;text-align:center}
.call.has-remote .call-top{padding-top:calc(18px + var(--safe-t));align-items:flex-start;text-shadow:0 1px 6px #000a}
.call.has-remote .call-top .avatar{display:none}
.avatar.xl{width:116px;height:116px;font-size:42px;box-shadow:0 0 0 8px #ffffff14,0 0 0 18px #ffffff0a}
.call.incoming .avatar.xl{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 14px #ffffff22,0 0 0 30px #ffffff0c}}
.call-name{font-size:28px;font-weight:700;letter-spacing:-.01em}
.call-status{font-size:16px;opacity:.85;font-variant-numeric:tabular-nums}
.call-ctrls{position:relative;z-index:2;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  padding:20px 16px calc(34px + var(--safe-b));background:linear-gradient(transparent,#0009)}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;font-size:12.5px;min-width:64px}
.cbtn > span svg{width:28px;height:28px;padding:18px;box-sizing:content-box;border-radius:50%;background:#ffffff26;backdrop-filter:blur(8px)}
.cbtn.off > span svg{background:#fff;color:#1d1719}
.cbtn.red > span svg{background:#E03131}
.cbtn.green > span svg{background:#2F9E44}
.call.incoming .cbtn > span svg{width:32px;height:32px;padding:20px}
.call.incoming .call-ctrls{gap:72px}
.call.incoming .cbtn.green > span svg{animation:wiggle 1.2s ease-in-out infinite}
@keyframes wiggle{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}}
.call.ended{opacity:.7;transition:opacity .4s}
@media (min-width:760px){.call video.local{width:220px;max-width:220px}}
.call.incoming video.local{display:none!important}
.big-editor{animation:none}