/* Carglass brand palette, taken from their own logo and carglass.lt:
   yellow #FFDD00 · dark #1D2430 · red #E30518. evoiq shows up only as the maker's mark
   in the footer — this page has to look like the client's product, not like our template. */
:root{
  --cg-yellow:#FFDD00; --cg-yellow-dk:#E5C700;
  --cg-dark:#1D2430; --cg-dark-2:#2A3342;
  --cg-red:#E30518; --cg-red-dk:#B8040F;
  --ink:#1D2430; --muted:#6B7280; --line:#E3E6EB; --bg:#F4F5F7;
  --evoiq:#4681B3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:'Proxima Nova','Montserrat','Segoe UI',Arial,sans-serif;line-height:1.55}
a{color:var(--evoiq)}

/* ---------- top bar ---------- */
.top{background:var(--cg-dark);border-bottom:4px solid var(--cg-yellow)}
.top-in{max-width:840px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.top img{height:30px;display:block}
.nav{display:flex;gap:6px}
.nav a{color:#C3C9D4;text-decoration:none;font-size:13px;font-weight:700;
  padding:7px 13px;border-radius:6px;transition:.15s}
.nav a:hover{background:var(--cg-dark-2);color:#fff}
.nav a.on{background:var(--cg-yellow);color:var(--cg-dark)}

.wrap{max-width:840px;margin:0 auto;padding:26px 20px 40px}
.card{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(29,36,48,.10);
  padding:26px 30px 30px;margin-bottom:20px}
h1{font-size:23px;margin:0 0 4px;color:var(--cg-dark)}
h2{font-size:17px;margin:26px 0 12px;color:var(--cg-dark);
  border-bottom:2px solid var(--cg-yellow);padding-bottom:6px;display:inline-block}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 20px}

/* ---------- call header ---------- */
.phone{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--cg-dark);color:#fff;border-radius:10px;padding:15px 20px;margin-bottom:18px}
.phone .who{font-weight:700;font-size:15px}
.phone .num{font-size:12px;color:#9AA3B2;margin-top:2px}
.phone .time{font-size:24px;font-weight:800;color:var(--cg-yellow)}
.badge{display:inline-block;background:var(--cg-red);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.6px;padding:3px 9px;border-radius:10px;margin-top:4px}

/* ---------- mic ---------- */
.mic{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0 20px}
#talk{width:130px;height:130px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cg-yellow);color:var(--cg-dark);font-size:15px;font-weight:800;
  box-shadow:0 5px 18px rgba(255,221,0,.45);transition:.15s;font-family:inherit;padding:0 12px}
#talk:hover:not(:disabled){background:var(--cg-yellow-dk)}
#talk:disabled{opacity:.55;cursor:default}
#talk.rec{background:var(--cg-red);color:#fff;animation:pulse 1.2s infinite}
#talk.think{background:var(--cg-dark-2);color:#fff}
#talk.speak{background:var(--cg-dark);color:var(--cg-yellow)}
@keyframes pulse{0%,100%{box-shadow:0 5px 18px rgba(227,5,24,.4)}
  50%{box-shadow:0 5px 34px rgba(227,5,24,.8)}}
#state{font-size:13.5px;color:var(--muted);min-height:20px;text-align:center}

/* ---------- transcript ---------- */
.log{margin-top:4px;max-height:430px;overflow-y:auto}
.turn{display:flex;margin-bottom:11px}
.turn.client{justify-content:flex-end}
.bubble{max-width:78%;padding:10px 14px;border-radius:12px;font-size:14px}
.turn.agent .bubble{background:#FFF8CC;border:1px solid #FFE873;
  border-bottom-left-radius:3px}
.turn.client .bubble{background:#EEF0F3;border-bottom-right-radius:3px}
.spk{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:3px;color:var(--muted)}

.err{display:none;background:#FDECEE;border-left:4px solid var(--cg-red);padding:11px 15px;
  border-radius:5px;margin-bottom:16px;font-size:13px}
.err b{color:var(--cg-red-dk)}

.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
button.small{font-family:inherit;font-size:12.5px;font-weight:700;border:0;border-radius:7px;
  padding:9px 15px;cursor:pointer;background:#EEF0F3;color:var(--cg-dark)}
button.small:hover{background:#E3E6EB}
button.primary{background:var(--cg-dark);color:#fff}
button.primary:hover{background:var(--cg-dark-2)}
select{font-family:inherit;font-size:12.5px;padding:8px 10px;border:1px solid var(--line);
  border-radius:7px;color:var(--cg-dark);background:#fff}
.hint{font-size:12px;color:var(--muted)}

/* ---------- about page ---------- */
table.info{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 4px}
table.info th{background:var(--cg-dark);color:#fff;text-align:left;font-weight:700;
  padding:9px 12px;font-size:12.5px}
table.info td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.info td:first-child{width:210px;font-weight:600}
table.info tr:last-child td{border-bottom:0}
ul.clean{margin:8px 0 4px;padding-left:20px}
ul.clean li{margin:5px 0;font-size:14px}
.note{background:#FFF8CC;border-left:4px solid var(--cg-yellow);padding:13px 17px;
  border-radius:5px;font-size:13.5px;margin:16px 0}
.note b{color:var(--cg-dark)}
.pill{display:inline-block;background:#EEF0F3;color:var(--cg-dark);font-size:12px;
  font-weight:700;padding:3px 10px;border-radius:11px;margin:0 5px 5px 0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:10px;padding:22px 20px 40px;
  max-width:840px;margin-left:auto;margin-right:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot img{height:22px;display:block;opacity:.9}
.foot .made{font-size:12px;color:var(--muted)}
.foot a{font-weight:700;text-decoration:none}
.foot a:hover{text-decoration:underline}
@media(max-width:640px){.bubble{max-width:88%}.top-in{flex-direction:column;align-items:flex-start}}

/* Shown when the demo's end date has passed — deliberately calmer than .err, because
   this is a normal end of life, not a fault. */
.gone{display:none;background:var(--cg-dark);color:#fff;padding:16px 20px;
  border-radius:9px;margin-bottom:18px;font-size:14px;line-height:1.6;
  border-left:5px solid var(--cg-yellow)}
.gone b{color:var(--cg-yellow)}
.gone a{color:var(--cg-yellow);font-weight:700}