/* Paleta / base / layout — beta0.0.7 */
:root{
  --p1:#8E7AEF; --p2:#A694FF; --p3:#C4B1FF;
  --pink1:#FFD1EC; --pink2:#FFB1C9; --pink3:#FF8EAE;
  --ink:#2b2250; --muted:#7a6fb0;
  --card:#fff; --soft:#f6f3ff;
  --out:#C8BBFF; --in:#FFE0EE;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(160deg,#a68ff1 0%, #c7b5ff 60%, #d7c6ff 100%) fixed;
}
.app{height:100%;max-width:1280px;margin:0 auto;padding:18px;display:grid;grid-template-columns:360px 1fr;gap:16px}
@media (max-width:1000px){.app{grid-template-columns:1fr}}
.sidebar{background:#fff;border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.16);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.chat{background:#fff;border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.16);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.left-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(120deg,var(--pink1),var(--pink2),var(--pink3));border-top-left-radius:18px;border-top-right-radius:18px;color:#fff}
.lh-brand{display:flex;gap:10px;align-items:center}
.lh-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#ffffff22;box-shadow:inset 0 0 0 2px #ffffff40;overflow:hidden}
.logo-img{width:40px;height:40px;object-fit:contain;display:block}
.lh-title{font-weight:900;color:#fff}
.lh-sub{color:#fff;opacity:.9;font-size:12px;margin-top:2px}
.lh-titles{display:flex;flex-direction:column}
.lh-actions{display:flex;gap:8px}
.chip{border:0;cursor:pointer;width:36px;height:36px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--p1),var(--pink2));display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.chip .icon{width:20px;height:20px}
.me-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px;margin:10px 12px;border-radius:16px;background:var(--pink1);
  border:1px solid #ffffffa8;box-shadow:0 8px 18px rgba(0,0,0,.06) inset;
  overflow:hidden;
}
.me-photo{width:58px;height:58px;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 6px 14px rgba(0,0,0,.10), inset 0 0 0 2px #ffffffa8;background:linear-gradient(135deg,#ffdcea,#d9ccff)}
.photo-slot{position:absolute;inset:0}
.me-photo img,.me-photo svg{width:100%;height:100%;display:block;object-fit:cover}
.me-name{font-weight:800}
.me-phone{color:var(--muted);font-size:13px}
#kidPhone{font-weight:700;font-size:11px}
.age-badge{
  position:absolute;left:50%;transform:translateX(-50%);bottom:3px;z-index:2;
  padding:1px 6px;border-radius:999px;font-size:10px;font-weight:400;color:#fff;
  background:linear-gradient(135deg,var(--p2),var(--pink2));
  box-shadow:0 4px 10px rgba(0,0,0,.18), inset 0 0 0 1px #ffffff66;white-space:nowrap;letter-spacing:.1px;
}
.btn-edit{border:0;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--p2),var(--p3));color:#fff;border-radius:14px;padding:10px 14px;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.12);font-weight:700;justify-self:end;white-space:nowrap;max-width:100%}
.btn-edit .icon{width:20px;height:20px}
.search{padding:0 12px 12px}
.search input{width:100%;background:var(--soft);border:0;border-radius:12px;padding:10px 12px}
.contact-list{list-style:none;margin:0;padding:8px 12px 14px;overflow:auto;flex:1;min-height:0}
.contact-list .placeholder{padding:18px 10px;color:#7b74a8;font-size:13px;opacity:.9}
.contact-item{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;margin:8px 0;border-radius:14px;background:#fff;border:1px solid #efe7ff;box-shadow:0 4px 12px rgba(0,0,0,.06);cursor:pointer;min-height:68px}
.contact-item:hover{background:#faf7ff}
.contact-item.active{background:#f1ebff;border-color:#d7cfff}
.c-photo{width:44px;height:44px;border-radius:12px;position:relative;background:linear-gradient(135deg,#cdb9ff,#ffd3e5)}
.c-photo img,.c-photo svg{width:100%;height:100%;display:block;border-radius:12px}
.c-initials{display:grid;place-items:center;width:100%;height:100%;font-weight:800;color:#5a3e8f;background:transparent}
.badge{position:absolute; right:-10px; bottom:-6px; z-index:2; min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--p2),var(--pink2));color:#fff;font-weight:800;font-size:11px;box-shadow:0 2px 6px rgba(0,0,0,.15);border:2px solid #fff}
.c-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-last{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.c-time{font-size:12px;color:var(--muted)}
.btn-trash{width:30px;height:30px;border-radius:12px;border:0;background:linear-gradient(135deg,var(--p2),var(--pink2));color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .12s, box-shadow .12s}
.btn-trash:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.16)}
.btn-trash .icon{width:16px;height:16px}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(120deg,var(--pink1),var(--pink2),var(--pink3));border-top-left-radius:18px;border-top-right-radius:18px;color:#fff}
.peer{display:flex;align-items:center;gap:10px;min-width:0}
.peer-photo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#ffd3e5,#cdb9ff);box-shadow:inset 0 0 0 2px #ffffff40;flex:0 0 auto;overflow:hidden}
.peer-photo svg{width:100%;height:100%}
.peer-photo img{width:100%;height:100%;object-fit:cover;display:block}
.peer-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peer-phone{opacity:.9;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-btn{border:0;background:none;cursor:pointer}.icon.white{color:#fff}.icon{width:22px;height:22px}
.messages{padding:14px;overflow:auto;min-height:0;flex:1;position:relative;background:
  radial-gradient(circle at 20px 20px,#efeaff 2px,transparent 3px) 0 0/28px 28px,
  radial-gradient(circle at 10px 10px,#ffe7f1 2.2px,transparent 3px) 0 0/28px 28px,
  radial-gradient(circle at 16px 16px,#e3dbff 4px,transparent 5px) 0 0/56px 56px}
.messages::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.30);pointer-events:none}
.bubble{max-width:78%;margin:6px 0;padding:10px 12px;border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.08);position:relative}
.bubble::after{content:"";position:absolute;width:10px;height:10px;bottom:6px;background:inherit;transform:rotate(45deg)}
.b-in{background:var(--in);border-bottom-left-radius:6px}
.b-in::after{left:-5px;border-bottom-left-radius:2px}
.b-out{margin-left:auto;background:var(--out);border-bottom-right-radius:6px;color:#fff}
.b-out::after{right:-5px;border-bottom-right-radius:2px}
.b-time{display:block;font-size:11px;color:rgba(0,0,0,.55);margin-top:4px}
.b-out .b-time{color:rgba(255,255,255,.85)}
.composer{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid #eee;background:var(--pink1)}
.icon-btn{width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.9);box-shadow:0 6px 14px rgba(0,0,0,.08);display:grid;place-items:center;color:var(--p2);transition:.12s}
.icon-btn:hover{background:#fff;color:#ff8eae;transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.12)}
.icon-btn .icon{width:22px;height:22px}
.input-wrap{flex:1;position:relative}
.input-wrap input{width:100%;background:#fff;border:0;border-radius:14px;padding:12px 14px}
.right-action{display:flex;gap:8px}
.btn-send{width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(120deg,var(--p1),var(--p3));color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.15)}
.btn-send .icon{width:22px;height:22px}
.in-icon{display:none}
#sendBtn{position:relative}
#sendBtn::before{
  content:"";display:inline-block;width:22px;height:22px;vertical-align:middle;background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2L15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E");
}
#sendBtn.has-icon::before{display:none}
#sendBtn svg{display:inline-block;vertical-align:middle}
.contacts-footer{margin-top:auto;padding:10px 12px;display:flex;justify-content:center}
.credit{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:#6a6799;font-size:12px;text-decoration:none;background:#fff;border-radius:16px;padding:6px 10px;box-shadow:0 6px 12px rgba(0,0,0,.08)}
.dreamaisit-img{height:18px;display:block}
.version-tag{
  font-size:11px;
  color:#6a6799;
  opacity:.9;
  margin-left:2px;
}
@media (max-width:768px){.contacts-footer{display:none}}
.modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,rgba(142,122,239,.92),rgba(255,171,199,.92));z-index:10000}
.modal-backdrop[hidden]{display:none !important}
.modal{width:min(560px,92vw);background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden}
.modal-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(120deg,var(--p1),var(--p3));color:#fff}
.brand-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff2;overflow:hidden}
.brand-logo-img{width:44px;height:44px;object-fit:contain;display:block}
.brand-txt{display:flex;flex-direction:column}
.brand-txt strong{font-size:18px}
.modal-body{padding:16px}
.pin6-label{margin-bottom:10px;display:block;font-weight:700;text-align:center}
.pin-grid{display:flex;gap:10px;flex-wrap:nowrap;justify-content:center;width:100%;margin:0 auto 12px auto;}
.pin-cell{width:52px;height:52px;border-radius:12px;border:1px solid #e9e1ff;background:var(--soft);text-align:center;font-size:24px;font-weight:800;color:#5a3e8f;outline:none;box-shadow:inset 0 0 0 2px #ffffff;}
.pin-cell:focus{border-color:#b9a8ff;box-shadow:0 0 0 4px rgba(185,168,255,.25)}
@media (max-width:480px){.pin-cell{width:46px;height:46px;font-size:22px}}
.actions-row{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.btn-outline{border:1px solid var(--p2);background:#fff;color:#6a5acd;border-radius:12px;padding:0 16px;height:44px;line-height:44px;cursor:pointer}
.btn-danger{border:0;border-radius:12px;padding:0 16px;height:44px;line-height:44px;color:#fff;cursor:pointer;background:linear-gradient(120deg,#ff6b6b,#ff8ea1)}
.btn-grad{border:0;border-radius:12px;padding:0 16px;height:44px;line-height:44px;color:#fff;cursor:pointer;background:linear-gradient(120deg,var(--p1),var(--pink2))}
.btn-full{width:100%;margin-top:4px}
.error{color:#e53935;margin-top:8px}
.confirm-text{font-size:15px}
.ie-viewport{width:100%; height:280px; border-radius:14px; background:var(--soft); position:relative; overflow:hidden;}
@media (max-width:480px){ .ie-viewport{ height:230px; } }
.ie-toolbar{display:flex;gap:8px;flex-wrap:wrap}
.btn-icon{display:inline-flex;align-items:center;gap:8px}
.btn-icon .icon{width:18px;height:18px}
@media (max-width:768px){
  html,body{height:100vh;height:100svh;overflow:hidden}
  .app{height:100vh;height:100svh;display:flex;flex-direction:column}
  .sidebar,.chat{flex:0 0 50%;min-height:0;overflow:auto}
  .composer{gap:10px;padding:12px;background:var(--pink1)}
  .btn-send{width:50px;height:50px}
  .icon-btn{display:none}
  .in-icon{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;padding:0;display:block}
  .in-emoji{left:10px}
  .in-clip{right:44px}
  .in-clip .icon{width:16px;height:16px}
  .in-camera{right:10px}
}
.nc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.nc-col label{display:block;margin-bottom:6px;font-weight:600}
.nc-col input,.nc-col select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);outline:none;background:#fff}
.nc-col input:focus,.nc-col select:focus{border-color:rgba(138,121,230,.55);box-shadow:0 0 0 3px rgba(138,121,230,.18)}
.nc-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.btn-plain{background:transparent;border:none;padding:10px 14px;cursor:pointer;border-radius:12px;color:#555}
@media (max-width:768px){.nc-row{grid-template-columns:1fr}}
#newContactModal .modal-body{overflow:visible}
#ncName{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);outline:none;background:#fff}
#ncName:focus{border-color:rgba(138,121,230,.55);box-shadow:0 0 0 3px rgba(138,121,230,.18)}
#ecName{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);outline:none;background:#fff}
#ecName:focus{border-color:rgba(138,121,230,.55);box-shadow:0 0 0 3px rgba(138,121,230,.18)}
.ec-preview-wrap{margin-top:12px}
.ec-preview{width:96px;height:96px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#ffdcea,#d9ccff);border:1px solid #eee;box-shadow:inset 0 0 0 2px #ffffff}
.ec-preview img{width:100%;height:100%;object-fit:cover;display:block}