/* ---- iOS Keyboard — pixel-matched iPhone 15 Pro (393px) ---- */
/* Total height = 44(pred) + 8(top) + 4×42(rows) + 3×12(gaps) + 4(bot) = 260px */
#vkbd{position:absolute;bottom:0;left:0;right:0;z-index:4;height:0;overflow:hidden;background:#d1d3d9;
  transition:height .28s cubic-bezier(.4,0,.2,1);direction:ltr}
.screen.dark #vkbd{background:#1c1c1e}
#vkbd.kshow{height:260px}
/* prediction / autocorrect bar */
.kpred{height:44px;display:flex;align-items:center;position:relative;width:100%}
.kpred::after{content:'';position:absolute;bottom:0;left:0;right:0;
  height:.5px;background:rgba(0,0,0,.18)}
.screen.dark .kpred::after{background:rgba(255,255,255,.12)}
.kpred-cell{flex:1;display:flex;align-items:center;justify-content:center;height:100%;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;
  color:rgba(0,0,0,.85);padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.screen.dark .kpred-cell{color:rgba(255,255,255,.85)}
.kpred-sep{width:.5px;height:22px;background:rgba(0,0,0,.22);flex:none;align-self:center}
.screen.dark .kpred-sep{background:rgba(255,255,255,.18)}
/* key rows */
.kkeys{padding:8px 3px 4px}
.krow{display:flex;gap:6px;height:42px;margin-bottom:12px;align-items:stretch}
.krow.krowbot{margin-bottom:0}
.kkey{flex:1;border-radius:5px;background:#ffffff;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:22px;font-weight:400;color:#000;
  display:flex;align-items:center;justify-content:center;
  cursor:default;user-select:none;position:relative;min-width:0}
.screen.dark .kkey{background:#3a3a3c;color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.55)}
.kkey.ksp{background:#aab0bb;font-size:14px;font-weight:500}
.screen.dark .kkey.ksp{background:#1c1c1e}
.kkey.kspace{background:#ffffff;font-size:15.5px;font-weight:400}
.screen.dark .kkey.kspace{background:#3a3a3c}
.kkey.k123{flex:none;width:44px}
.kkey.kreturn{flex:none;width:88px}
.kkey.ktap{background:#c4c7cf!important;box-shadow:0 0 0 rgba(0,0,0,0)!important}
.kkey.ksp.ktap{background:#909aa6!important}
.screen.dark .kkey.ktap{background:#545458!important}
.kpop{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  background:#fff;border-radius:10px 10px 10px 3px;min-width:44px;height:56px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:300;color:#000;
  box-shadow:0 4px 14px rgba(0,0,0,.15),0 0 0 .5px rgba(0,0,0,.06);
  pointer-events:none;z-index:30;opacity:0;white-space:nowrap;padding:0 8px}
.kpop::after{content:'';position:absolute;bottom:-5px;left:calc(50% - 5px);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid #fff}
.kkey.ktap .kpop{opacity:1}
/* typing text + cursor inside input field */
#vtypetxt{display:block;flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;
  font-size:16px;color:#111;line-height:21px;padding:1px 0;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.screen.dark #vtypetxt{color:#e9edef}
#vtypecursor{display:inline-block;width:2px;height:16px;
  background:#007aff;vertical-align:text-bottom;margin:0 0 0 1px;
  animation:kblink .9s step-end infinite}
@keyframes kblink{0%,100%{opacity:1}50%{opacity:0}}

/* ---- Media Send Flow ---- */
.vflow{position:absolute;left:0;right:0;top:0;bottom:0;z-index:50;pointer-events:none;overflow:hidden}
.vflow.vf-active{pointer-events:auto}
.vflow-dim{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .3s}
.vflow-dim.on{background:rgba(0,0,0,.16)}
/* Attach sheet — the SVG itself is the source of truth (393×382, flat top).
   backdrop-filter blurs the chat behind; the SVG's 0.8-opacity fill tints it. */
.vattach{position:absolute;left:0;right:0;bottom:0;overflow:hidden;
  transform:translateY(101%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  -webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}
.vattach.vin{transform:translateY(0)}
.vattach-svg{display:block;width:100%;height:auto}
/* iOS WhatsApp photo picker — light bottom sheet, chat visible behind */
.vgallery{position:absolute;left:0;right:0;bottom:0;top:62%;
  background:#f6f6f6;border-radius:12px 12px 0 0;overflow:hidden;
  transform:translateY(101%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.vgallery.vin{transform:translateY(0)}
.screen.dark .vgallery{background:#1c1c1e}
/* header */
.vg2-head{flex:none;position:relative;height:54px;display:flex;align-items:center;
  justify-content:space-between;padding:0 14px;direction:ltr;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.vg2-cancel{font-size:17px;color:#000;flex:none}
.screen.dark .vg2-cancel{color:#fff}
.vg2-seg{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;background:#e3e3e8;border-radius:9px;padding:2px}
.screen.dark .vg2-seg{background:#2c2c2e}
.vg2-seg>span{font-size:14px;font-weight:500;color:#000;padding:5px 15px;border-radius:7px}
.screen.dark .vg2-seg>span{color:#fff}
.vg2-seg .vg2-seg-on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.screen.dark .vg2-seg .vg2-seg-on{background:#636366}
.vg2-hd{font-size:13px;font-weight:600;color:#000;border:1px solid rgba(0,0,0,.28);
  border-radius:7px;padding:3px 8px;flex:none}
.screen.dark .vg2-hd{color:#fff;border-color:rgba(255,255,255,.3)}
/* grid */
.vg2-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  overflow:hidden;align-content:start;background:#fff}
.screen.dark .vg2-grid{background:#000}
.vg2-cell{position:relative;aspect-ratio:1;overflow:hidden;background:#d2d5db}
.vg2-cell img{width:100%;height:100%;object-fit:cover;display:block}
.vg2-dur{position:absolute;left:6px;bottom:5px;color:#fff;font-size:13px;font-weight:600;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;text-shadow:0 0 3px rgba(0,0,0,.55)}
.vg2-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:11px;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;box-shadow:0 0 0 1.5px #fff}
.vg2-check.on{opacity:1}
/* Media preview */
.vmpreview{position:absolute;inset:0;background:#111;
  transform:translateY(101%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.vmpreview.vin{transform:translateY(0)}
.vmpreview-nav{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex:none}
.vmpreview-close{color:#fff;font-size:22px;line-height:1;cursor:default}
.vmpreview-edit{color:#007aff;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px}
.vmpreview-img{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.vmpreview-img img{max-width:100%;max-height:100%;object-fit:contain}
.vmpreview-bar{height:56px;background:#1f2c34;display:flex;align-items:center;padding:0 10px;gap:8px;flex:none}
.vmpreview-field{flex:1;height:36px;background:#2a3942;border-radius:18px;display:flex;
  align-items:center;padding:0 14px;color:#8696a0;font-size:14px;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.vmpreview-sendbtn{width:40px;height:40px;border-radius:20px;background:#00a884;
  display:flex;align-items:center;justify-content:center;flex:none;transition:transform .1s}
.vmpreview-sendbtn.vtap{transform:scale(.82)}
/* Plus button tap flash */
.ipls.vtap{opacity:.5 !important}