/* ============================================================
   HERO CYCLE — styles for the compact app mini-screens
   that the AI flicks through inside the desktop / phone in
   the Computer Vision page hero.
   ============================================================ */

@keyframes hcCaret { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes hcFadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: none; } }

/* Common screen shell — fills the cva-app-body */
.hc-d, .hc-p {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11.5px;
  color: #1a1f2b;
  background: #f4f6fa;
  overflow: hidden;
  animation: hcFadeIn 0.45s cubic-bezier(.2,.7,.2,1);
}

/* Top toolbar shared between desktop screens */
.hc-d-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid #e1e5ec;
  padding: 6px 10px;
  flex-shrink: 0;
}
.hc-d-tabs { display: flex; gap: 2px; }
.hc-d-tabs .t {
  padding: 4px 10px; font-size: 10.5px; color: #555a66; border-radius: 3px; cursor: default;
}
.hc-d-tabs .t.on { background: #eaf3ff; color: #0b5ed7; font-weight: 600; }
.hc-d-pill {
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.14em;
  padding: 3px 7px; border-radius: 2px; background: #eef1f6; color: #4a5365;
  text-transform: uppercase; font-weight: 600;
}
.hc-d-pill.cy { background: rgba(15,160,255,0.12); color: #0a73c4; }

/* ============================================================
   ERP / Approvals
   ============================================================ */
.hc-d-erp { background: #f7f9fc; }
.hc-d-erp-head { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0;
  background: #fff; border-bottom: 1px solid #e1e5ec; padding: 12px 14px; }
.hc-d-erp-head > div .k { font-family: var(--font-mono, monospace); font-size: 9px; color: #8a93a3; letter-spacing: 0.1em; }
.hc-d-erp-head > div .v { font-size: 13px; color: #1a1f2b; font-weight: 600; margin-top: 2px; }
.hc-d-erp-head > div .v.big { font-size: 18px; }
.hc-d-erp-table { background: #fff; margin: 10px 12px 0; border: 1px solid #e1e5ec; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.hc-d-erp-table .hr, .hc-d-erp-table .r {
  display: grid; grid-template-columns: 0.6fr 1fr 1fr 0.6fr 0.7fr; padding: 6px 10px;
  font-size: 11px; gap: 4px;
}
.hc-d-erp-table .hr { background: #eef1f6; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.1em; color: #6a738a; }
.hc-d-erp-table .r { border-top: 1px solid #eef1f6; }
.hc-d-erp-table .r .ok { color: #0a8a4f; font-weight: 600; }
.hc-d-erp-table .r .warn { color: #b06f00; font-weight: 600; }
.hc-d-erp-note { margin: 10px 12px 0; }
.hc-d-erp-note .lbl { font-family: var(--font-mono, monospace); font-size: 9px; color: #6a738a; letter-spacing: 0.14em; }
.hc-d-erp-note .ipt {
  margin-top: 4px; padding: 8px 10px; background: #fff; border: 1px solid #c9d1de;
  border-radius: 4px; font-size: 11.5px; color: #1a1f2b;
  box-shadow: 0 0 0 2px rgba(15,160,255,0.18) inset, 0 0 0 1px #4FC8FF;
}
.hc-d-erp-actions { margin: 10px 12px 12px; display: flex; gap: 8px; justify-content: flex-end; }
.hc-d-erp-actions .b {
  padding: 6px 14px; font-size: 11px; border-radius: 3px; cursor: default; font-weight: 600;
}
.hc-d-erp-actions .b.ghost { background: #fff; border: 1px solid #c9d1de; color: #4a5365; }
.hc-d-erp-actions .b.primary { background: #0a8a4f; color: #fff; }

/* ============================================================
   Excel / Sheets
   ============================================================ */
.hc-d-excel { background: #fff; }
.hc-d-fbar { display: flex; align-items: center; gap: 8px; padding: 4px 10px;
  background: #f8f9fa; border-bottom: 1px solid #e1e5ec; font-size: 11px; flex-shrink: 0; }
.hc-d-fbar .ref { font-family: var(--font-mono, monospace); width: 50px; padding: 3px 6px; background: #fff; border: 1px solid #d0d4dc; border-radius: 2px; }
.hc-d-fbar .fx { color: #6a738a; font-style: italic; }
.hc-d-fbar .form { font-family: var(--font-mono, monospace); flex: 1; padding: 3px 6px; background: #fff; border: 1px solid #d0d4dc; border-radius: 2px; color: #0a73c4; }
.hc-d-grid {
  display: grid; grid-template-columns: 30px repeat(8, 1fr); flex: 1; overflow: hidden;
  font-size: 10.5px;
}
.hc-d-grid .cell { border-right: 1px solid #e8ebf0; border-bottom: 1px solid #e8ebf0; padding: 3px 5px; background: #fff; }
.hc-d-grid .cell.colhd, .hc-d-grid .cell.rowhd { background: #f1f3f5; color: #6a738a; font-family: var(--font-mono, monospace); font-size: 9.5px; text-align: center; padding: 3px 0; font-weight: 600; }
.hc-d-grid .cell.corner { background: #f1f3f5; }
.hc-d-grid .cell.head { background: #fafbfc; font-weight: 600; }
.hc-d-grid .cell.active {
  background: #eaf4ff;
  box-shadow: 0 0 0 2px #0a73c4 inset;
  z-index: 2; position: relative;
  font-family: var(--font-mono, monospace);
  color: #0a73c4;
}

/* ============================================================
   Outlook / Gmail
   ============================================================ */
.hc-d-outlook { display: grid; grid-template-columns: 110px 200px 1fr; flex-direction: row; }
.hc-d-outlook .hc-d-side { background: #faf9f8; border-right: 1px solid #e1e5ec; padding: 8px 4px; font-size: 10.5px; }
.hc-d-outlook .hc-d-side .f { padding: 5px 9px; color: #3a3f4a; cursor: default; display: flex; justify-content: space-between; align-items: center; }
.hc-d-outlook .hc-d-side .f i { color: #8a93a3; font-style: normal; font-family: var(--font-mono, monospace); font-size: 9.5px; }
.hc-d-outlook .hc-d-side .f i.bd { color: #c44; font-weight: 700; background: #ffe8eb; padding: 0 5px; border-radius: 9px; }
.hc-d-outlook .hc-d-side .f.on { background: #eaf3ff; color: #0b5ed7; font-weight: 600; }
.hc-d-outlook .hc-d-list { background: #fff; border-right: 1px solid #e1e5ec; overflow: hidden; }
.hc-d-outlook .hc-d-list .row { padding: 7px 9px; border-bottom: 1px solid #eef1f6; cursor: default; display: grid; grid-template-columns: 1fr; gap: 1px; font-size: 10.5px; }
.hc-d-outlook .hc-d-list .row .from { font-weight: 600; color: #1a1f2b; }
.hc-d-outlook .hc-d-list .row .subj { color: #6a738a; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-d-outlook .hc-d-list .row .time { font-size: 9.5px; color: #8a93a3; font-family: var(--font-mono, monospace); position: absolute; right: 9px; }
.hc-d-outlook .hc-d-list .row { position: relative; }
.hc-d-outlook .hc-d-list .row.on { background: #eaf3ff; border-left: 3px solid #0b5ed7; }
.hc-d-outlook .hc-d-compose { background: #fff; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.hc-d-outlook .hc-d-compose .meta { display: flex; gap: 10px; font-size: 11px; padding-bottom: 5px; border-bottom: 1px solid #eef1f6; }
.hc-d-outlook .hc-d-compose .meta .k { color: #6a738a; min-width: 56px; }
.hc-d-outlook .hc-d-compose .body { flex: 1; overflow: hidden; padding-top: 4px; }
.hc-d-outlook .hc-d-compose .body pre { font-family: inherit; font-size: 11px; line-height: 1.55; white-space: pre-wrap; color: #1a1f2b; margin: 0; }
.hc-d-outlook .hc-d-compose .bar { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.hc-d-outlook .hc-d-compose .bar .b { padding: 5px 14px; font-size: 11px; border-radius: 3px; cursor: default; font-weight: 600; }
.hc-d-outlook .hc-d-compose .bar .b.primary { background: #0b5ed7; color: #fff; }

/* ============================================================
   CRM (Salesforce-ish)
   ============================================================ */
.hc-d-crm { background: #f4f6fa; }
.hc-d-crm-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid #e1e5ec; }
.hc-d-crm-search .i { color: #6a738a; font-size: 13px; }
.hc-d-crm-search .q { font-size: 14px; flex: 1; color: #1a1f2b; padding: 4px 0; border-bottom: 2px solid #0b5ed7; }
.hc-d-crm-search .hint { font-family: var(--font-mono, monospace); font-size: 9.5px; color: #8a93a3; padding: 2px 6px; border: 1px solid #d0d4dc; border-radius: 3px; }
.hc-d-crm-results { background: #fff; margin: 10px 12px 0; border: 1px solid #e1e5ec; border-radius: 4px; overflow: hidden; }
.hc-d-crm-results .hd, .hc-d-crm-results .r { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr 1fr; gap: 6px; padding: 7px 11px; font-size: 11px; }
.hc-d-crm-results .hd { background: #f1f3f5; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.1em; color: #6a738a; }
.hc-d-crm-results .r { border-top: 1px solid #eef1f6; }
.hc-d-crm-results .r.hl { background: #fff8e0; }
.hc-d-crm-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 10.5px; color: #6a738a; }

/* ============================================================
   Teams / Slack chat
   ============================================================ */
.hc-d-chat { display: grid; grid-template-columns: 130px 1fr; flex-direction: row; background: #fff; }
.hc-d-chat .hc-d-side.dark { background: #3F0E40; color: #fff; padding: 10px 0; font-size: 10.5px; }
.hc-d-chat .hc-d-side.dark .ws { padding: 4px 12px; font-weight: 700; font-size: 11px; }
.hc-d-chat .hc-d-side.dark .ch, .hc-d-chat .hc-d-side.dark .dm { padding: 4px 12px; color: rgba(255,255,255,0.75); }
.hc-d-chat .hc-d-side.dark .ch.on { background: #1264A3; color: #fff; }
.hc-d-chat .hc-d-side.dark .dm { padding: 3px 12px; }
.hc-d-chat-main { display: flex; flex-direction: column; overflow: hidden; }
.hc-d-chat-main .hd { padding: 9px 14px; border-bottom: 1px solid #e1e5ec; font-weight: 600; font-size: 11.5px; color: #1a1f2b; }
.hc-d-chat-main .msgs { flex: 1; padding: 12px 14px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.hc-d-chat-main .msgs .m { display: flex; flex-direction: column; }
.hc-d-chat-main .msgs .m b { font-size: 11px; color: #1a1f2b; display: inline; }
.hc-d-chat-main .msgs .m i { font-style: normal; font-family: var(--font-mono, monospace); font-size: 9.5px; color: #8a93a3; margin-left: 6px; }
.hc-d-chat-main .msgs .m p { margin: 2px 0 0; font-size: 11.5px; color: #1a1f2b; }
.hc-d-chat-main .msgs .m.bot p { background: #ecf3ff; padding: 6px 9px; border-radius: 4px; border-left: 3px solid #0b5ed7; }
.hc-d-chat-main .msgs .m .att { margin-top: 5px; padding: 5px 8px; background: #f1f3f5; border-radius: 3px; font-size: 10.5px; display: inline-flex; gap: 5px; align-items: center; align-self: flex-start; }
.hc-d-chat-input { padding: 8px 12px; border-top: 1px solid #e1e5ec; background: #fff; display: flex; align-items: center; gap: 10px; }
.hc-d-chat-input span:first-child { flex: 1; padding: 6px 10px; background: #f4f6fa; border: 1px solid #d0d4dc; border-radius: 3px; font-size: 11px; }

/* ============================================================
   Government / Customs portal form
   ============================================================ */
.hc-d-portal { background: #f4f6fa; }
.hc-d-portal-form { padding: 14px 16px; flex: 1; overflow: hidden; }
.hc-d-portal-form h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #1a1f2b; padding-bottom: 8px; border-bottom: 2px solid #0b5ed7; }
.hc-d-portal-form .row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin-bottom: 7px; }
.hc-d-portal-form .row label { font-size: 10.5px; color: #6a738a; font-weight: 600; }
.hc-d-portal-form .row .ipt { padding: 5px 8px; background: #fff; border: 1px solid #d0d4dc; border-radius: 3px; font-size: 11px; min-height: 22px; }
.hc-d-portal-form .row .ipt.filled { color: #1a1f2b; }
.hc-d-portal-form .row .ipt.active { box-shadow: 0 0 0 2px rgba(15,160,255,0.18) inset, 0 0 0 1px #4FC8FF; color: #0a73c4; font-family: var(--font-mono, monospace); font-weight: 600; }
.hc-d-portal-form .actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e5ec; }
.hc-d-portal-form .actions .b { padding: 6px 14px; font-size: 11px; border-radius: 3px; cursor: default; font-weight: 600; }
.hc-d-portal-form .actions .b.ghost { background: #fff; border: 1px solid #c9d1de; color: #4a5365; }
.hc-d-portal-form .actions .b.primary { background: #0b5ed7; color: #fff; }

/* ============================================================
   PHONE — common
   ============================================================ */
.hc-p { background: #fff; font-size: 11px; }
.hc-p .hd, .hc-p .hd-blue, .hc-p .hd-light, .hc-p .hd-dark { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; flex-shrink: 0; }
.hc-p .hd { background: #075E54; color: #fff; }
.hc-p .hd-blue { background: #0E5C99; color: #fff; }
.hc-p .hd-light { background: #f4f6fa; color: #1a1f2b; border-bottom: 1px solid #e1e5ec; }
.hc-p .hd-dark { background: #0a1828; color: #fff; }
.hc-p .back { font-size: 16px; font-weight: 700; }
.hc-p .av { width: 26px; height: 26px; border-radius: 50%; background: #4FC8FF; color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
.hc-p .t { display: flex; flex-direction: column; line-height: 1.2; flex: 1; font-size: 11px; }
.hc-p .t b { font-weight: 700; }
.hc-p .t i { font-style: normal; font-size: 9.5px; opacity: 0.85; }
.hc-p .actions { font-size: 13px; opacity: 0.9; }
.hc-p .dot { color: #4FC8FF; }

/* WhatsApp + SMS — chat list + input + keyboard */
.hc-p-wa, .hc-p-sms { background: #ECE5DD; }
.hc-p-sms { background: #fff; }
.hc-p .msgs { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.hc-p .msgs .m { max-width: 76%; padding: 6px 9px; border-radius: 6px; font-size: 11px; line-height: 1.35; }
.hc-p-wa .msgs .m.in { background: #fff; align-self: flex-start; }
.hc-p-wa .msgs .m.out { background: #DCF8C6; align-self: flex-end; }
.hc-p-sms .msgs .m.in { background: #e8ecf2; color: #1a1f2b; align-self: flex-start; }
.hc-p-sms .msgs .m.out { background: #0b5ed7; color: #fff; align-self: flex-end; }
.hc-p .ipt { padding: 7px 10px; display: flex; align-items: center; gap: 8px; background: #fff; border-top: 1px solid #e1e5ec; }
.hc-p .ipt span:first-child { flex: 1; padding: 5px 10px; background: #f4f6fa; border-radius: 16px; font-size: 11px; min-height: 20px; }
.hc-p .ipt .send { width: 28px; height: 28px; border-radius: 50%; background: #075E54; color: #fff; display: grid; place-items: center; font-size: 11px; }
.hc-p-sms .ipt .send { background: #0b5ed7; }
.hc-p .kb { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; padding: 8px 6px 10px; background: #c5cad1; flex-shrink: 0; }
.hc-p .kb .key { background: #fff; padding: 6px 0; text-align: center; font-size: 10.5px; border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,0.15); color: #1a1f2b; font-weight: 500; }

/* Field inspection app */
.hc-p-field { background: #f4f6fa; }
.hc-p-field .vh { padding: 12px; background: #fff; border-bottom: 1px solid #e1e5ec; }
.hc-p-field .vh-title { font-size: 13px; font-weight: 700; color: #1a1f2b; }
.hc-p-field .vh-sub { font-size: 10px; color: #6a738a; font-family: var(--font-mono, monospace); margin-top: 2px; }
.hc-p-field .check { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: #fff; border-bottom: 1px solid #e1e5ec; }
.hc-p-field .check .row { display: flex; justify-content: space-between; font-size: 11px; }
.hc-p-field .check .row .ok { color: #0a8a4f; font-weight: 700; }
.hc-p-field .note-lbl { padding: 10px 12px 4px; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.14em; color: #6a738a; }
.hc-p-field .note { margin: 0 12px; padding: 10px; background: #fff; border: 1px solid #c9d1de; border-radius: 4px; font-size: 11px; min-height: 60px; box-shadow: 0 0 0 2px rgba(15,160,255,0.18) inset, 0 0 0 1px #4FC8FF; }
.hc-p-field .ftr { padding: 12px; margin-top: auto; }
.hc-p-field .ftr .b { display: block; padding: 9px; text-align: center; background: #0a8a4f; color: #fff; border-radius: 4px; font-weight: 700; font-size: 12px; }

/* Banking */
.hc-p-bank { background: #0a1828; color: #fff; }
.hc-p-bank .amt { padding: 18px 14px 4px; font-size: 28px; font-weight: 700; text-align: center; letter-spacing: -0.02em; }
.hc-p-bank .amt span { font-size: 16px; opacity: 0.6; }
.hc-p-bank .lbl { text-align: center; font-size: 10.5px; color: rgba(255,255,255,0.6); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hc-p-bank .rows { padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.hc-p-bank .rows .r { display: flex; justify-content: space-between; font-size: 11px; }
.hc-p-bank .rows .r span:first-child { color: rgba(255,255,255,0.5); }
.hc-p-bank .rows .r span:last-child { color: #fff; font-family: var(--font-mono, monospace); }
.hc-p-bank .otp-lbl { padding: 14px 14px 6px; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); }
.hc-p-bank .otp { padding: 0 14px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hc-p-bank .otp .d { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 12px 0; text-align: center; font-size: 18px; font-weight: 700; font-family: var(--font-mono, monospace); }
.hc-p-bank .otp .d.on { background: rgba(79,200,255,0.15); border-color: #4FC8FF; color: #4FC8FF; }
.hc-p-bank .ftr { padding: 14px; margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.hc-p-bank .ftr .b { padding: 11px; background: #0b5ed7; text-align: center; border-radius: 4px; font-weight: 700; font-size: 12px; }
.hc-p-bank .ftr .hc-d-pill.cy { align-self: center; background: rgba(15,160,255,0.18); color: #4FC8FF; }

/* Force fade-in animation on every screen swap (the React key change retriggers it) */
.hc-d, .hc-p { animation: hcFadeIn 0.45s cubic-bezier(.2,.7,.2,1); }