/* =========================================================
   ES Dental Albania — WhatsApp-style Chat Landing
   chat.css
   ========================================================= */
:root{
  --wa-bg:#0b141a;
  --wa-panel:#111b21;
  --wa-header:#202c33;
  --wa-in:#202c33;        /* incoming bubble */
  --wa-out:#005c4b;       /* outgoing bubble */
  --wa-green:#00a884;
  --wa-green-btn:#008069;
  --wa-text:#e9edef;
  --wa-text-dim:#8696a0;
  --wa-tick:#53bdeb;
  --wa-input-bg:#2a3942;
  --wa-divider:rgba(134,150,160,.15);
  --gold:#D4A12A;         /* brand touch */
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--wa-bg);
  color:var(--wa-text);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- App shell ---------- */
.app{
  display:flex;
  flex-direction:column;
  height:100dvh;
  max-width:520px;
  margin:0 auto;
  background:var(--wa-panel);
  position:relative;
}

/* ---------- Header ---------- */
.hdr{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:var(--wa-header);
  border-bottom:1px solid var(--wa-divider);
  z-index:3;
}
.hdr .back{
  color:var(--wa-text-dim);
  display:flex;align-items:center;
  font-size:22px;line-height:1;
}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:#161318;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar span{letter-spacing:.5px;font-weight:700;color:#161318;font-size:16px}
.hdr .who{flex:1;min-width:0}
.hdr .name{font-size:15px;font-weight:600;line-height:1.2;display:flex;align-items:center;gap:6px}
.hdr .verified{width:15px;height:15px;flex-shrink:0}
.hdr .status{font-size:12px;color:var(--wa-green);margin-top:1px}
.hdr .icons{display:flex;gap:20px;color:var(--wa-text-dim)}
.hdr .icons svg{width:20px;height:20px;fill:currentColor}

/* ---------- Chat area ---------- */
.chat{
  flex:1;
  overflow-y:auto;
  padding:14px 10px 6px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background-color:var(--wa-bg);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.015) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.012) 0 2px, transparent 2px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,.01) 0 2px, transparent 2px);
  background-size:180px 180px;
  scroll-behavior:smooth;
}
.chat::-webkit-scrollbar{width:6px}
.chat::-webkit-scrollbar-thumb{background:rgba(134,150,160,.25);border-radius:3px}

.daypill{
  align-self:center;
  background:var(--wa-header);
  color:var(--wa-text-dim);
  font-size:11px;font-weight:600;
  padding:5px 12px;border-radius:8px;
  margin:2px 0 6px;
  text-transform:uppercase;letter-spacing:.03em;
}
.encnote{
  align-self:center;
  background:rgba(24,42,54,.85);
  color:#ffd279;
  font-size:11px;
  padding:6px 12px;border-radius:8px;
  margin-bottom:4px;text-align:center;max-width:85%;line-height:1.4;
}
.encnote svg{width:11px;height:11px;vertical-align:-1px;fill:#ffd279;margin-right:3px}

/* ---------- Bubbles ---------- */
.bubble{
  max-width:78%;
  padding:8px 10px 7px;
  border-radius:10px;
  font-size:14.5px;
  line-height:1.42;
  position:relative;
  word-wrap:break-word;
  box-shadow:0 1px .5px rgba(11,20,26,.35);
  opacity:0;
  transform:translateY(6px);
  animation:pop .28s ease forwards;
}
@keyframes pop{to{opacity:1;transform:translateY(0)}}
.bubble.in{
  background:var(--wa-in);
  align-self:flex-start;
  border-top-left-radius:2px;
}
.bubble.out{
  background:var(--wa-out);
  align-self:flex-end;
  border-top-right-radius:2px;
}
.bubble .time{
  font-size:10.5px;
  color:var(--wa-text-dim);
  float:right;
  margin:6px 0 -2px 10px;
  display:flex;align-items:center;gap:3px;
}
.bubble.out .time{color:rgba(233,237,239,.6)}
.bubble .time svg{width:15px;height:11px;fill:var(--wa-tick)}
.bubble b{font-weight:700;color:#fff}
.bubble .em{color:var(--gold);font-weight:600}

/* ---------- Typing ---------- */
.typing{
  align-self:flex-start;
  background:var(--wa-in);
  border-radius:10px;border-top-left-radius:2px;
  padding:12px 14px;
  display:flex;gap:4px;
}
.typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--wa-text-dim);
  animation:blink 1.2s infinite both;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- Input dock ---------- */
.dock{
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--wa-header);
  z-index:3;
}
.starter{
  display:flex;justify-content:center;
  padding:2px 4px 10px;
}
.starter button{
  background:var(--wa-out);
  color:#fff;border:none;
  padding:11px 20px;border-radius:22px;
  font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 2px 8px rgba(0,92,75,.4);
  transition:transform .15s,box-shadow .15s;
}
.starter button:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,92,75,.5)}
.starter button svg{width:18px;height:18px;fill:currentColor}

.inputrow{display:flex;align-items:flex-end;gap:8px}
.field{
  flex:1;
  background:var(--wa-input-bg);
  border-radius:24px;
  display:flex;align-items:center;
  padding:4px 6px 4px 14px;
  min-height:46px;
}
.field .iti{flex:1}
.field input{
  flex:1;width:100%;
  background:transparent;border:none;outline:none;
  color:var(--wa-text);
  font-family:inherit;font-size:16px;
  padding:10px 4px;
}
.field input::placeholder{color:var(--wa-text-dim)}
.send{
  width:46px;height:46px;border-radius:50%;
  background:var(--wa-green-btn);
  border:none;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .2s;
}
.send:hover{transform:scale(1.05);background:var(--wa-green)}
.send:disabled{opacity:.5;cursor:not-allowed;transform:none}
.send svg{width:22px;height:22px;fill:#fff}

.err{
  color:#ff8a80;font-size:12px;
  text-align:center;padding:6px 12px 0;min-height:0;
}
.gd{
  font-size:10px;color:var(--wa-text-dim);
  text-align:center;padding:8px 16px 2px;line-height:1.4;
}
.gd a{color:var(--wa-green);text-decoration:none}

/* ---------- intl-tel-input dark overrides ---------- */
.iti{width:100%}
.iti--separate-dial-code .iti__selected-flag{background:transparent;border-radius:20px}
.iti__selected-dial-code{color:var(--wa-text);font-size:15px}
.iti__arrow{border-top-color:var(--wa-text-dim)}
.iti__arrow--up{border-bottom-color:var(--wa-text-dim)}
.iti__country-list{
  background:var(--wa-header);
  border:1px solid var(--wa-divider);
  color:var(--wa-text);
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  z-index:99999;max-height:220px;
}
.iti__country{padding:9px 10px}
.iti__country.iti__highlight{background:var(--wa-input-bg)}
.iti__country-name{color:var(--wa-text)}
.iti__dial-code{color:var(--wa-text-dim)}
.iti__divider{border-bottom-color:var(--wa-divider)}

@media (prefers-reduced-motion:reduce){
  .bubble{animation:none;opacity:1;transform:none}
  .chat{scroll-behavior:auto}
}