:root{
  --bg:#f7f7fb;
  --panel:#ffffff;
  --ink:#25213a;
  --muted:#7a7691;
  --brand:#673ab7;
  --brand-ink:#fff;
  --accent:#ede7ff;
  --border:#eae7f5;
  --out:#e9e6f4;
  --green:#2e7d32;
  --red:#d32f2f;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.45 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* layout */
.app{
  display:grid; grid-template-columns:360px 1fr; gap:0; height:100vh; width:100%;
}

/* sidebar */
.sidebar{
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  min-height:0;
}

.left-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--brand)}
.brand .icon{width:24px; height:24px}
.btn-edit{border:0; background:transparent; color:var(--muted); cursor:pointer}
.btn-edit .icon{width:22px; height:22px}

.me{
  display:flex; align-items:center; gap:12px; padding:14px;
  border-bottom:1px solid var(--border);
}
.me-photo{width:58px; height:58px; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px #0000000d; background:linear-gradient(135deg,#ffdcea,#d9ccff)}
.me-photo svg{width:100%; height:100%; display:block}
.me-name{font-weight:800}
.me-phone{color:var(--muted); font-size:13px}
#kidPhone{font-weight:700; font-size:12px}

/* chip de idade no rodapé da foto */
.me-photo{position:relative}
.me-photo img{width:100%; height:100%; object-fit:cover; display:block}
.age-chip{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:4px; padding:2px 6px; border-radius:999px;
  font-size:11px; font-weight:500; color:var(--ink);
  background:#fff; border:1px solid var(--out);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.left-tools{padding:10px 12px; border-bottom:1px solid var(--border); display:flex; gap:8px}
.search-wrap{flex:1 1 auto; display:flex; align-items:center; gap:8px; background:#faf9ff; padding:8px 10px; border:1px solid var(--out); border-radius:10px}
.search-wrap .icon{width:18px; height:18px; color:var(--muted)}
#searchBox{border:0; outline:0; width:100%; background:transparent}
.btn-primary{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px; border:0;
  background:var(--brand); color:var(--brand-ink); cursor:pointer;
}
.btn-primary .icon{width:18px; height:18px}

.contact-list{
  list-style:none; margin:0; padding:0; overflow:auto; min-height:0;
}
.contact-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer;
  border-bottom:1px solid var(--border);
}
.contact-item:hover{background:#faf9ff}
.contact-item.active{background:#f1ecff}
.avatar{width:42px; height:42px; border-radius:12px; background:#eee; overflow:hidden; display:grid; place-items:center}
.avatar-img{width:100%; height:100%; object-fit:cover; display:block}
.contact-content{display:flex; flex-direction:column; min-width:0}
.contact-name{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.contact-sub{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.empty-list{color:var(--muted); padding:14px}

/* chat */
.chat{display:flex; flex-direction:column; min-height:0}
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:var(--brand); color:#fff;
}
.peer{display:flex; align-items:center; gap:10px}
.peer-avatar .icon{width:36px; height:36px}
.peer-name{font-weight:800}
.peer-phone{font-size:12px; opacity:.9}
.head-btn{border:0; background:transparent; color:#fff; cursor:pointer}
.head-btn .icon{width:22px; height:22px}

.messages{flex:1 1 auto; overflow:auto; padding:14px}

.composer{
  display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); background:var(--panel);
}
#msgBox{
  flex:1 1 auto; border:1px solid var(--out); border-radius:10px; padding:10px 12px; outline:0;
}
.btn-send{
  border:0; background:var(--brand); color:#fff; border-radius:10px; padding:10px; cursor:pointer;
}
.btn-send .icon{width:20px; height:20px}

/* modal */
.modal{
  position:fixed; inset:0; display:grid; place-items:center; background:#00000066; z-index:50;
}
.modal[hidden]{display:none}
.modal-card{
  width:min(92vw,420px); background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 40px #00000030;
}
.modal-head{padding:14px 16px; border-bottom:1px solid var(--border)}
.modal-head .title{font-weight:800}
.modal-body{padding:16px}
.modal-foot{padding:12px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px}
.pin-wrap{display:flex; justify-content:center}
.pin-wrap input{
  font-size:20px; padding:10px 12px; letter-spacing:3px; text-align:center; width:220px;
  border-radius:12px; border:1px solid var(--out); outline:0;
}
.error{color:var(--red); font-weight:700; margin-top:10px; min-height:1em}

/* util */
.icon{width:20px; height:20px}
.icon.white{color:#fff}
.icon.muted{color:var(--muted)}

@media (max-width: 920px){
  .app{grid-template-columns:1fr}
  .sidebar{max-height:48vh}
}