/* ==========================================================================
   PHONE — telefon maketi korpusi + hero mock ichki elementlari
   (Korpus .phone/.screen scrolly bo'limida ham qayta ishlatiladi — DRY)
   ========================================================================== */

.phone{width:min(330px,100%);border-radius:38px;padding:13px;position:relative;
  background:var(--glass-strong);border:1px solid var(--line);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 1px 0 var(--highlight),var(--shadow)}
.screen{background:var(--bg1);border:1px solid var(--line);border-radius:27px;padding:16px 14px 18px;overflow:hidden;position:relative}
.notch{width:88px;height:5px;border-radius:99px;background:var(--line);margin:2px auto 14px}
.app-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.app-head .t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--glass)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* Xabar kartasi */
.msg-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px;margin-bottom:11px;
  box-shadow:inset 0 1px 0 var(--highlight)}
.msg-card .mt{font-weight:700;font-size:.88rem;margin-bottom:4px}
.msg-card .mb{color:var(--muted);font-size:.8rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--muted);padding:4px 9px;border-radius:8px;background:var(--glass);border:1px solid var(--line)}
.chip .icon{width:12px;height:12px}

/* Keyingi yuborish qatori */
.next-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 13px;margin-bottom:11px}
.next-row .lbl{font-size:.75rem;color:var(--muted);font-weight:600}
.countdown{font-variant-numeric:tabular-nums;font-weight:800;font-size:1rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Mini diagramma */
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.chart-card .lbl{font-size:.75rem;color:var(--muted);font-weight:600;margin-bottom:9px}
.bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.bars b{flex:1;border-radius:5px 5px 2px 2px;background:var(--grad);opacity:.9;
  transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mock-on .bars b{transform:scaleY(1)}
.bars b:nth-child(1){height:38%;transition-delay:.05s}
.bars b:nth-child(2){height:55%;transition-delay:.12s}
.bars b:nth-child(3){height:44%;transition-delay:.19s}
.bars b:nth-child(4){height:72%;transition-delay:.26s}
.bars b:nth-child(5){height:60%;transition-delay:.33s}
.bars b:nth-child(6){height:88%;transition-delay:.4s}
.bars b:nth-child(7){height:78%;transition-delay:.47s}

/* Muvaffaqiyat toast'i (takrorlanuvchi dekorativ animatsiya) */
.toast{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;
  background:var(--glass-strong);border:1px solid rgba(46,230,160,.35);border-radius:13px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:9px 13px;font-size:.78rem;font-weight:700;color:var(--ok);
  opacity:0;transform:translateY(14px);animation:toast 7s ease-in-out infinite 1.6s}
.toast .icon{width:14px;height:14px;stroke-width:2.4}
@keyframes toast{0%,8%{opacity:0;transform:translateY(14px)}14%,55%{opacity:1;transform:none}62%,100%{opacity:0;transform:translateY(14px)}}

/* Suzuvchi bezak chiplar */
.float-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;padding:9px 14px;border-radius:14px;
  background:var(--glass-strong);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);animation:floaty 7s ease-in-out infinite alternate}
.float-chip.c1{top:11%;left:-22px}
.float-chip.c2{bottom:14%;right:-18px;animation-delay:-3.5s}
.float-chip .icon{width:15px;height:15px;color:var(--violet)}
@keyframes floaty{to{transform:translateY(-13px)}}

@media (max-width: 640px){
  .float-chip{display:none}
}