/* ============================================================
   Lawyer Pro — Mock product UI (dashboard + WhatsApp phone)
   ============================================================ */

/* ---------- App window chrome ---------- */
.app-win{
  border:1px solid var(--line-2);
  border-radius:16px;
  background:linear-gradient(180deg, var(--ink-2), var(--ink-1));
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.app-win::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.app-top{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,0.018);
}
.app-dots{ display:flex; gap:6px; }
.app-dots i{ width:10px; height:10px; border-radius:50%; background:var(--ink-4); display:block; }
.app-url{
  margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--muted-2);
  display:flex; align-items:center; gap:7px;
}
.app-url b{ color:var(--text-soft); font-weight:500; }

/* ---------- Dashboard ---------- */
.dash{ display:grid; grid-template-columns:188px 1fr; min-height:430px; }
.dash-side{ border-right:1px solid var(--line); padding:18px 14px; background:rgba(0,0,0,0.14); }
.dash-side .me{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.dash-side .av{ width:32px; height:32px; border-radius:8px; background:linear-gradient(150deg,var(--accent-deep),var(--ink-4)); display:grid; place-items:center; font-family:var(--display); font-size:14px; color:#fff; }
.dash-side .me .nm{ font-size:13px; font-weight:600; }
.dash-side .me .rl{ font-size:11px; color:var(--muted-2); }
.nav-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--muted); margin-bottom:3px; }
.nav-item svg{ width:15px; height:15px; }
.nav-item.on{ background:rgba(111,155,255,0.1); color:var(--text); }
.nav-item .badge{ margin-left:auto; font-family:var(--mono); font-size:10px; background:var(--accent); color:#08111f; padding:1px 6px; border-radius:20px; font-weight:600; }

.dash-main{ padding:18px 20px; }
.dash-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dash-h .t{ font-size:15px; font-weight:600; }
.dash-h .sort{ font-family:var(--mono); font-size:10.5px; color:var(--accent-soft); display:flex; align-items:center; gap:6px; }
.dash-sub{ font-size:11.5px; color:var(--muted-2); margin-bottom:14px; }

.case{
  display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center;
  padding:13px 14px; border:1px solid var(--line); border-radius:11px; margin-bottom:9px;
  background:var(--ink-2); transition:border-color .2s, transform .2s;
}
.case:hover{ border-color:var(--line-2); transform:translateX(2px); }
.case.urgent{ border-color:rgba(224,96,106,0.35); background:linear-gradient(90deg, rgba(224,96,106,0.06), var(--ink-2) 40%); }
.case .cid{ font-family:var(--mono); font-size:10px; color:var(--muted-2); letter-spacing:0.04em; }
.case .ttl{ font-size:13.5px; font-weight:600; color:var(--text); margin-top:1px; }
.case .meta{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.chip{ font-size:10.5px; font-family:var(--mono); padding:2px 8px; border-radius:20px; border:1px solid var(--line-2); color:var(--text-soft); display:inline-flex; align-items:center; gap:5px; }
.chip.s-hearing{ color:#ffd9a0; border-color:rgba(255,200,120,0.3); background:rgba(255,200,120,0.06); }
.chip.s-drafting{ color:#a8c4ff; border-color:rgba(140,170,255,0.3); background:rgba(140,170,255,0.06); }
.chip.s-filed{ color:#9fe6cf; border-color:rgba(80,200,160,0.3); background:rgba(80,200,160,0.06); }
.chip .d{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.case .right{ text-align:right; }
.case .due{ font-size:11px; color:var(--muted); }
.case .due b{ color:#ff9aa2; font-weight:600; }
.case .action{
  margin-top:6px; font-size:11px; color:var(--accent-soft);
  display:inline-flex; align-items:center; gap:5px;
}
.case .action svg{ width:12px; height:12px; }

/* tiny next-hearing rail */
.rail{ margin-top:16px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:rgba(111,155,255,0.04); }
.rail .rh{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--accent-soft); font-family:var(--mono); letter-spacing:0.08em; text-transform:uppercase; }
.rail .rh svg{ width:13px; height:13px; }
.rail .rb{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.rail .rb .ev{ font-size:12.5px; color:var(--text-soft); }
.rail .rb .ev b{ color:var(--text); }
.rail .rb .when{ font-family:var(--mono); font-size:11px; color:var(--text); background:var(--ink-3); padding:4px 9px; border-radius:7px; border:1px solid var(--line-2); }

/* ---------- Layered hero (variation C) ---------- */
.layered{ position:relative; height:520px; }
.layered .app-win{ position:absolute; }
.layered .l-dash{ width:108%; right:0; top:24px; }
.layered .l-phone{ position:absolute; left:-4%; bottom:-10px; z-index:3; transform:rotate(-3deg); }
.layered .l-chip{
  position:absolute; right:6%; top:-8px; z-index:4;
  background:var(--ink-3); border:1px solid var(--line-2); border-radius:12px;
  padding:11px 14px; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:11px;
}
.layered .l-chip .ic{ width:30px; height:30px; border-radius:8px; background:rgba(203,164,90,0.12); border:1px solid rgba(203,164,90,0.3); display:grid; place-items:center; color:var(--gold-soft); }
.layered .l-chip .ic svg{ width:15px; height:15px; }
.layered .l-chip .tx{ font-size:11.5px; color:var(--muted); }
.layered .l-chip .tx b{ display:block; color:var(--text); font-size:13px; font-weight:600; }

/* ---------- WhatsApp phone ---------- */
.phone{
  width:300px; border-radius:38px; padding:11px; flex:none;
  background:linear-gradient(160deg,#222838,#0e1119);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow);
  position:relative;
}
.phone .screen{ border-radius:28px; overflow:hidden; background:#0b141a; position:relative; }
.phone .notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:120px; height:24px; background:#0a0d16; border-radius:0 0 16px 16px; z-index:6; }
.wa-top{
  background:#1f2c33; padding:34px 14px 12px; display:flex; align-items:center; gap:11px;
}
.wa-top .back{ color:#8aa0ab; font-size:18px; }
.wa-av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(150deg,#2a6b5a,#15402f); display:grid; place-items:center; font-family:var(--display); font-size:15px; color:#e7f6ee; flex:none; }
.wa-top .who{ line-height:1.25; }
.wa-top .who b{ color:#e9eef0; font-size:14px; font-weight:600; display:block; }
.wa-top .who span{ color:#8aa0ab; font-size:11px; }
.wa-body{
  padding:16px 12px 16px; min-height:360px;
  background:
    linear-gradient(rgba(11,20,26,0.92), rgba(11,20,26,0.92)),
    repeating-linear-gradient(45deg, #0e1a20 0 9px, #0c171d 9px 18px);
  display:flex; flex-direction:column; gap:9px;
}
.wa-day{ align-self:center; background:#182229; color:#8aa0ab; font-size:10px; padding:3px 11px; border-radius:8px; }
.bubble{ max-width:80%; padding:8px 11px 7px; border-radius:11px; font-size:12.5px; line-height:1.45; position:relative; }
.bubble .meta{ font-size:9.5px; color:rgba(255,255,255,0.45); margin-top:3px; text-align:right; }
.bubble.in{ background:#202d35; color:#e7edf0; align-self:flex-start; border-top-left-radius:3px; }
.bubble.out{ background:#114d3a; color:#e7f6ee; align-self:flex-end; border-top-right-radius:3px; }
.bubble.bot{ background:#13212b; border:1px solid rgba(111,155,255,0.3); align-self:flex-start; border-top-left-radius:3px; color:#dbe6f5; }
.bubble.bot .bn{ font-family:var(--mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-soft); display:flex; align-items:center; gap:5px; margin-bottom:4px; }
.bubble.bot .bn .d{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.bubble strong{ color:#fff; font-weight:600; }
.wa-input{ background:#1f2c33; padding:9px 12px; display:flex; align-items:center; gap:10px; }
.wa-input .box{ flex:1; background:#2a3942; border-radius:18px; padding:8px 12px; color:#6b7d87; font-size:11.5px; }
.wa-input .send{ width:32px; height:32px; border-radius:50%; background:var(--wa); display:grid; place-items:center; color:#06281a; flex:none; }
.wa-input .send svg{ width:15px; height:15px; }

/* spotlight layout */
.wa-spot{ display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:center; }
.wa-spot .phone-wrap{ display:flex; justify-content:center; }
.wa-feature-list{ margin-top:26px; display:grid; gap:20px; }
.wa-fi{ display:flex; gap:15px; align-items:flex-start; }
.wa-fi .ic{ width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(37,211,102,0.1); border:1px solid rgba(37,211,102,0.28); color:var(--wa); }
.wa-fi .ic svg{ width:19px; height:19px; }
.wa-fi h4{ font-size:17px; font-weight:600; font-family:var(--sans); }
.wa-fi p{ margin-top:5px; color:var(--muted); font-size:14.5px; line-height:1.55; }
.wa-p0{ display:inline-block; margin-left:9px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; color:var(--wa); border:1px solid rgba(37,211,102,0.4); border-radius:5px; padding:1px 6px; vertical-align:middle; }

@media (max-width:980px){
  .wa-spot{ grid-template-columns:1fr; gap:44px; }
  .layered{ height:auto; }
  .layered .app-win, .layered .l-phone, .layered .l-chip{ position:static; transform:none; width:100%; margin-bottom:18px; }
  .layered .l-phone{ display:none; }
}
@media (max-width:620px){
  .dash{ grid-template-columns:1fr; min-height:0; }
  .dash-side{ display:none; }
  .dash-main{ padding:16px 15px; }
  .phone{ width:100%; max-width:330px; margin:0 auto; }
  .ai-visual .phone{ max-width:300px; }
  .case .ttl{ font-size:14px; }
  .wa-fi .ic{ width:36px; height:36px; }
}