/* i3 Voice AI — components and motion on top of app.css */

/* ── Motion ──────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(234,106,18,.45); } 80%, 100% { box-shadow: 0 0 0 12px rgba(234,106,18,0); } }
@keyframes live-ring { 0% { box-shadow: 0 0 0 0 rgba(19,138,82,.5); } 80%, 100% { box-shadow: 0 0 0 10px rgba(19,138,82,0); } }
@keyframes wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.reveal > * { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
.reveal > *:nth-child(2) { animation-delay: .06s; } .reveal > *:nth-child(3) { animation-delay: .12s; }
.reveal > *:nth-child(4) { animation-delay: .18s; } .reveal > *:nth-child(5) { animation-delay: .24s; }
.reveal > *:nth-child(6) { animation-delay: .3s; } .reveal > *:nth-child(n+7) { animation-delay: .36s; }
.lift { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(60,35,15,.06), 0 14px 32px rgba(60,35,15,.10); }
.press:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .reveal > *, .wave-bars i, .live-dot, .orb { animation: none !important; } .lift:hover { transform: none; } }

/* ── Hero ────────────────────────────── */
.v-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 26px 28px; margin-bottom: 18px; color: #fff;
  background: radial-gradient(1200px 300px at 90% -40%, rgba(255,154,60,.55), transparent 60%), linear-gradient(120deg, #2a170b 0%, #4a250e 55%, #ea6a12 140%); }
.v-hero h2 { font-size: 24px; color: #fff; margin-bottom: 6px; }
.v-hero p { color: #f4dccb; max-width: 640px; }
.v-hero .row { gap: 10px; flex-wrap: wrap; }
.v-hero .btn { background: #fff; color: var(--brand-2); border-color: #fff; }
.v-hero .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.v-hero .orb { position: absolute; right: 34px; top: 50%; width: 120px; height: 120px; margin-top: -60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd3ad, #ff9a3c 45%, #c4560b 80%); animation: float 5s ease-in-out infinite; opacity: .95; }
.v-hero .orb::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); animation: pulse-ring 2.8s infinite; }
@media (max-width: 760px) { .v-hero .orb { display: none; } }

/* ── Wave bars (live / speaking) ─────── */
.wave-bars { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.wave-bars i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; animation: wave 1s ease-in-out infinite; transform-origin: center; }
.wave-bars i:nth-child(2) { animation-delay: .15s; } .wave-bars i:nth-child(3) { animation-delay: .3s; } .wave-bars i:nth-child(4) { animation-delay: .45s; } .wave-bars i:nth-child(5) { animation-delay: .6s; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: live-ring 1.8s infinite; }

/* ── Stat tiles ──────────────────────── */
.stat .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; float: right; }
.stat .ic svg { width: 19px; height: 19px; }
.meter { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; margin-top: 10px; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--brand)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.meter.warn > i { background: linear-gradient(90deg, #f5a524, var(--red)); }

/* ── Agent cards ─────────────────────── */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.agent-card { position: relative; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.agent-card .head { display: flex; gap: 12px; align-items: center; }
.agent-card .av { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
  background: linear-gradient(135deg, var(--accent), var(--brand-2)); flex: none; position: relative; }
.agent-card.live .av::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
.agent-card .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-card .foot { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--grey-soft); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.chip svg { width: 13px; height: 13px; }
.chip.or { background: var(--brand-soft); color: var(--brand-2); }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tpl { position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; transition: .2s; background: #fff; }
.tpl:hover { border-color: #f3b78b; }
.tpl input { position: absolute; opacity: 0; }
.tpl:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(234,106,18,.12); }
.tpl b { display: block; margin-bottom: 2px; }
.tpl small { line-height: 1.35; display: block; }

/* ── Agent editor ────────────────────── */
.editor { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.editor-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
.editor-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; text-decoration: none !important; transition: .15s; }
.editor-nav a svg { width: 17px; height: 17px; }
.editor-nav a:hover { background: var(--line-2); }
.editor-nav a.on { background: var(--brand-soft); color: var(--brand-2); }
.editor section { scroll-margin-top: 80px; }
.editor-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1250px) { .editor { grid-template-columns: minmax(0, 1fr) 300px; } .editor-nav { display: none; } }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } .editor-side { position: static; } }
.save-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -6px 24px rgba(60,35,15,.06); }

.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.voice { position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: #fff; transition: .18s; }
.voice input { position: absolute; opacity: 0; }
.voice b { display: flex; align-items: center; gap: 6px; }
.voice small { display: block; }
.voice:hover { border-color: #f3b78b; }
.voice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.voice:has(input:checked) .wave-bars { color: var(--brand); }
.voice .wave-bars { color: #d9c4b4; height: 12px; }
.voice:not(:has(input:checked)) .wave-bars i { animation: none; transform: scaleY(.4); }

.toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.toggle-row:first-of-type { border-top: 0; }
.toggle-row .txt { flex: 1; }
.toggle-row .txt b { display: block; }
.toggle-row .txt small { display: block; margin-top: 1px; }

.faq-row, .cap-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; margin-bottom: 8px; align-items: start; }
.cap-row { grid-template-columns: 1fr auto; }
.prompt-box { white-space: pre-wrap; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; background: #fbf8f6; border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 360px; overflow: auto; color: var(--ink-2); }

/* phone preview of the greeting */
.phone-mock { border-radius: 26px; padding: 14px; background: linear-gradient(160deg, #2a170b, #120a05); color: #fff; box-shadow: 0 18px 40px rgba(42,23,11,.25); }
.phone-mock .who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.phone-mock .who .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--brand)); display: grid; place-items: center; font-weight: 800; animation: pulse-ring 2.4s infinite; }
.phone-mock .say { background: rgba(255,255,255,.08); border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.phone-mock .wave-bars { color: var(--accent); }

/* ── Calls ───────────────────────────── */
.dir { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; }
.dir svg { width: 16px; height: 16px; }
.dir.in { background: var(--blue-soft); color: var(--blue); }
.dir.out { background: var(--brand-soft); color: var(--brand); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 14px; }
.filters .field { margin: 0; }
.filters input, .filters select { min-width: 130px; }
.transcript { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow: auto; padding: 4px 2px; }
.tr { max-width: 78%; padding: 9px 13px; border-radius: 14px; line-height: 1.5; font-size: 13.5px; animation: rise .35s both; }
.tr.agent { background: var(--brand-soft); border-bottom-left-radius: 4px; align-self: flex-start; }
.tr.caller { background: #f1f4f9; border-bottom-right-radius: 4px; align-self: flex-end; }
.tr.system { align-self: center; background: none; color: var(--ink-3); font-size: 12px; }
.tr small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
audio { width: 100%; height: 40px; border-radius: 99px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.sent { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sent::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grey); }
.sent.positive::before { background: var(--green); } .sent.negative::before { background: var(--red); } .sent.neutral::before { background: #f5a524; }

/* ── Charts ──────────────────────────── */
.vchart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; }
.vchart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.vchart .stack { flex: 1; width: 100%; max-width: 26px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 3px 3px; overflow: hidden; background: var(--line-2); }
.vchart .stack i { display: block; transition: height .8s cubic-bezier(.2,.8,.2,1); }
.vchart .stack i.in { background: var(--brand); } .vchart .stack i.out { background: #fdc597; }
.vchart .lbl { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.hbar { display: grid; grid-template-columns: 140px 1fr 50px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.hbar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .b { height: 10px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.hbar .b i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--brand)); border-radius: 99px; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.hours i { height: 34px; border-radius: 4px; background: var(--brand); }

/* ── Numbers ─────────────────────────── */
.num-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.num-card .big { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.num-card .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--brand-2)); color: #fff; }
.num-card .ic svg { width: 24px; height: 24px; }
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin: 6px 0 12px; }
.flow .arrow { color: var(--ink-3); }

/* ── Wallet ──────────────────────────── */
.wallet-card { border-radius: 18px; padding: 22px; color: #fff; background: radial-gradient(500px 200px at 100% 0, rgba(255,154,60,.55), transparent 60%), linear-gradient(135deg, #2a170b, #5a2c0f); box-shadow: 0 18px 40px rgba(42,23,11,.2); }
.wallet-card .amt { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.wallet-card small { color: #f4dccb; }
.amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.amounts button { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; transition: .15s; }
.amounts button:hover, .amounts button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }

/* ── Steps (checklist) ───────────────── */
.steps-h { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.step-h { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; text-decoration: none !important; color: var(--ink); transition: .2s; }
.step-h .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); font-weight: 800; font-size: 12px; flex: none; }
.step-h.ok .n { background: var(--green); color: #fff; }
.step-h.ok { opacity: .75; }
.step-h.next { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(234,106,18,.12); }
.step-h.next .n { background: var(--brand); color: #fff; animation: pulse-ring 2s infinite; }
@media (max-width: 1100px) { .steps-h { grid-template-columns: 1fr 1fr; } }

/* ── Admin bits ──────────────────────── */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.health { display: grid; gap: 8px; }
.health .row { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.json { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 11.5px; background: #1e1510; color: #f4dccb; border-radius: 10px; padding: 12px; max-height: 340px; overflow: auto; }
.inline-form { display: inline; }
.sticky-note { background: var(--amber-soft); border: 1px solid #f3dcae; border-radius: 12px; padding: 12px 14px; }
.skeleton { background: linear-gradient(90deg, var(--line-2) 25%, #fff 37%, var(--line-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }

/* modal titles use h2 in the voice views */
.modal-h h2 { margin: 0; flex: 1; font-size: 17px; }

/* grid items never push the page wider than the screen (tables scroll inside .tbl-wrap) */
.grid > *, .stack > *, .editor > * { min-width: 0; }
@media (max-width: 860px) {
  .side.open { box-shadow: 0 0 0 100vmax rgba(20, 10, 5, .45); }
  .page-head { gap: 8px; }
  .page-head .btn { height: 34px; }
  .filters input, .filters select { min-width: 0; width: 100%; }
  .filters .field { flex: 1 1 140px; }
  .kv { grid-template-columns: 110px 1fr; }
  .steps-h { grid-template-columns: 1fr; }
  .v-hero { padding: 20px; }
  .v-hero h2 { font-size: 20px; }
}
.g-side.side-400 { grid-template-columns: minmax(0, 1fr) 400px; }
.g-side.side-380 { grid-template-columns: minmax(0, 1fr) 380px; }
.g-side.side-360 { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 1100px) { .g-side.side-400, .g-side.side-380, .g-side.side-360 { grid-template-columns: 1fr; } }
.voice { padding-right: 46px; }
.voice-play { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.voice-play svg { width: 14px; height: 14px; }
.voice-play:hover, .voice-play.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* number chooser */
.num-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.num-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 2px 12px; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.num-tile:hover:not(:disabled) { border-color: var(--brand); box-shadow: 0 10px 26px -14px rgba(234, 108, 32, .55); transform: translateY(-2px); }
.num-tile:disabled { opacity: .5; cursor: not-allowed; }
.num-tile .nt-ic { grid-row: 1 / 4; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.num-tile .nt-ic svg { width: 19px; height: 19px; }
.num-tile .nt-num { font-size: 18px; font-weight: 800; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.num-tile .nt-num mark { background: #ffe1c7; color: var(--brand-2); border-radius: 4px; padding: 0 2px; }
.num-tile .nt-meta { font-size: 12.5px; color: var(--ink-3); }
.num-tile .nt-go { font-size: 13px; font-weight: 700; color: var(--brand); margin-top: 4px; }
@media (max-width: 600px) { .num-search { flex-wrap: wrap; } .num-search .field { max-width: none !important; flex-basis: 100%; } }
.num-tile .nt-vip { color: #b7791f; font-weight: 700; }

/* agent knowledge: details, products, topics, versions */
.kb-h { font-size: 14.5px; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.kb-h .bk-pill:empty { display: none; }
.bk-pill { background: var(--brand-soft); color: var(--brand-2); border-radius: 99px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.kb-rows { display: grid; gap: 8px; margin-bottom: 8px; }
.kb-row { display: grid; gap: 8px; align-items: start; }
.kb-row.prod { grid-template-columns: 1.3fr .8fr 2fr auto; }
.kb-row.topic { grid-template-columns: 1fr 2.6fr auto; }
.kb-versions { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.kb-versions summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.kb-ver { padding: 8px 0; border-bottom: 1px dashed var(--line); gap: 10px; flex-wrap: wrap; }
@media (max-width: 700px) { .kb-row.prod, .kb-row.topic { grid-template-columns: 1fr auto; } .kb-row.prod input:not(:first-child), .kb-row.topic textarea { grid-column: 1 / 2; } }

/* chat test */
.chat-box { max-width: 560px; display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.chat-box .modal-h { gap: 8px; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 280px; background: #fbf7f3; }
.cm { max-width: 82%; padding: 9px 13px; border-radius: 14px; line-height: 1.45; font-size: 14.5px; white-space: pre-wrap; animation: cm-in .25s ease; }
.cm.agent { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cm.caller { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.cm.tool { align-self: center; background: transparent; color: var(--ink-3); font-size: 12.5px; padding: 2px 6px; }
.cm.err { align-self: center; background: #fdecea; color: #b42318; font-size: 13px; }
.cm.typing { display: flex; gap: 4px; padding: 12px 14px; }
.cm.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: cm-dot 1s infinite ease-in-out; }
.cm.typing i:nth-child(2) { animation-delay: .15s; } .cm.typing i:nth-child(3) { animation-delay: .3s; }
.chat-in { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-in input { flex: 1; }
.chat-note { margin: 0; padding: 0 16px 12px; font-size: 12.5px; }
@keyframes cm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cm-dot { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* voice filter */
.voice-filter { display: inline-flex; gap: 4px; padding: 4px; background: #f6efe9; border-radius: 99px; margin-bottom: 14px; }
.voice-filter { flex-wrap: wrap; }
.voice-filter button { white-space: nowrap; border: 0; background: transparent; padding: 6px 14px; border-radius: 99px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.voice-filter button small { color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.voice-filter button.on { background: #fff; color: var(--brand-2); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .18); }
.voice-filter button.on small { color: var(--brand); }
.voice-grid .voice[hidden] { display: none !important; }
.voice-star { color: #e8a317; margin-left: 5px; font-size: 13px; }

/* voice engine choice */
.engine-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.engine { display: grid; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .2s, box-shadow .2s; }
.engine input { position: absolute; opacity: 0; pointer-events: none; }
.engine b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.engine b svg { width: 16px; height: 16px; color: var(--brand); }
.engine:has(input:checked) { border-color: var(--brand); box-shadow: 0 6px 18px -10px rgba(234, 108, 32, .6); background: #fffaf6; }
@media (max-width: 600px) { .engine-pick { grid-template-columns: 1fr; } }

/* VoiceLink client wallet on the admin client page */
.vl-wallet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.vl-wallet > div { background: #fbf7f3; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.vl-wallet b { font-size: 17px; }
@media (max-width: 600px) { .vl-wallet { grid-template-columns: 1fr 1fr; } }