/* Optimal Trade — App UI Kit styles (depends on ../../colors_and_type.css) */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--ot-font-body);
  background: #0e1116;
  color: var(--ot-navy);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Stage / phone frame ---------- */
#root { min-height: 100%; }
.ot-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 32px;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(255,92,0,.18), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(72,66,200,.16), transparent 55%),
    #0e1116;
  flex-wrap: wrap;
}
.ot-phone {
  position: relative;
  width: 390px;
  height: 844px;
  background: #fff;
  border-radius: 46px;
  box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 11px #1c1f26, 0 0 0 13px #2a2e38;
  overflow: hidden;
  flex: none;
  display: flex;
  flex-direction: column;
}
.ot-viewport { flex: 1; position: relative; overflow: hidden; }
.ot-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ot-bg);
  overflow: hidden;
}
/* status bar */
.ot-statusbar {
  height: 50px; flex: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 26px 7px; font-family: var(--ot-font-body); font-weight: 600;
  font-size: 14px; color: var(--ot-navy); z-index: 30; position: relative;
}
.ot-statusbar.on-dark { color: #fff; }
.ot-statusbar .si { display: flex; gap: 6px; align-items: center; }
.ot-statusbar .si svg { width: 17px; height: 17px; }

/* scroll body */
.ot-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.ot-body::-webkit-scrollbar { width: 0; }
.ot-pad { padding: 4px 20px 24px; }

/* ---------- Bottom nav ---------- */
.ot-tabbar {
  flex: none; height: 86px; background: #fff; border-top: 1px solid var(--ot-gray-100);
  display: flex; padding: 10px 8px 26px; z-index: 20;
}
.ot-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; color: var(--ot-gray-400);
  font-family: var(--ot-font-body); font-weight: 600; font-size: 10px; letter-spacing: .02em;
}
.ot-tab svg { width: 23px; height: 23px; }
.ot-tab.active { color: var(--ot-orange); }

/* ---------- Reusable bits ---------- */
.ot-screen-head { padding: 8px 20px 10px; display: flex; align-items: center; gap: 12px; }
.ot-screen-head h1 { font: var(--ot-h2); letter-spacing: -.02em; margin: 0; flex: 1; }
.ot-iconbtn {
  width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--ot-gray-200);
  background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ot-navy); flex:none;
}
.ot-iconbtn svg { width: 20px; height: 20px; }
.ot-iconbtn:active { transform: scale(.94); }

.ot-card { background: #fff; border-radius: var(--ot-r-lg); box-shadow: var(--ot-shadow-sm); }
.ot-card.flat { box-shadow: none; border: 1px solid var(--ot-gray-200); }

.ot-eyebrow { font: var(--ot-label); letter-spacing: var(--ot-track-eyebrow); text-transform: uppercase; color: var(--ot-fg-3); }
.ot-num { font-family: var(--ot-font-body); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* buttons */
.ot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ot-font-body); font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  border-radius: var(--ot-r-pill); border: none; cursor: pointer; padding: 15px 22px; width: 100%;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.ot-btn svg { width: 18px; height: 18px; }
.ot-btn-primary { background: var(--ot-orange); color: #fff; box-shadow: var(--ot-shadow-orange); }
.ot-btn-primary:active { background: var(--ot-orange-deep); transform: scale(.98); box-shadow: none; }
.ot-btn-dark { background: var(--ot-navy); color: #fff; }
.ot-btn-dark:active { transform: scale(.98); }
.ot-btn-ghost { background: var(--ot-orange-50); color: var(--ot-orange-deep); box-shadow: none; }
.ot-btn-outline { background: #fff; color: var(--ot-navy); border: 1.5px solid var(--ot-gray-300); box-shadow: none; }
.ot-btn:disabled { background: var(--ot-gray-200); color: var(--ot-gray-400); box-shadow: none; cursor: not-allowed; }

/* badges */
.ot-badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--ot-font-body);
  font-weight: 600; font-size: 11.5px; padding: 5px 10px; border-radius: var(--ot-r-pill); letter-spacing: -.01em;
}
.ot-badge svg { width: 12px; height: 12px; }
.ot-badge .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ot-badge.paid { background: var(--ot-success-bg); color: var(--ot-success); }
.ot-badge.pending { background: var(--ot-warning-bg); color: var(--ot-warning); }
.ot-badge.error { background: var(--ot-error-bg); color: var(--ot-error); }
.ot-badge.transit { background: var(--ot-info-bg); color: var(--ot-info); }
.ot-badge.locked { background: var(--ot-orange-50); color: var(--ot-orange-deep); }
.ot-badge.solid { background: var(--ot-navy); color: #fff; }

/* flag */
.ot-flag { border-radius: 50%; object-fit: cover; flex: none; background: var(--ot-gray-100); }

/* list row */
.ot-row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; }
.ot-row + .ot-row { border-top: 1px solid var(--ot-gray-100); }
.ot-row:active { background: var(--ot-orange-25); }
.ot-row .ic { width: 42px; height: 42px; border-radius: 13px; background: var(--ot-orange-50); color: var(--ot-orange-deep); display: flex; align-items: center; justify-content: center; flex: none; }
.ot-row .ic svg { width: 20px; height: 20px; }
.ot-row .tt { flex: 1; min-width: 0; }
.ot-row .tt b { font-family: var(--ot-font-body); font-weight: 600; font-size: 14.5px; color: var(--ot-navy); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-row .tt span { font-size: 12.5px; color: var(--ot-fg-2); font-weight: 500; }
.ot-row .chev { color: var(--ot-gray-300); display: flex; }
.ot-row .chev svg { width: 18px; height: 18px; }

/* sheet / modal */
.ot-sheet-scrim { position: absolute; inset: 0; background: rgba(12,14,20,.5); z-index: 60; display: flex; align-items: flex-end; animation: ot-fade .2s ease; }
.ot-sheet { width: 100%; background: #fff; border-radius: 28px 28px 0 0; padding: 10px 20px 30px; max-height: 88%; overflow-y: auto; animation: ot-up .26s cubic-bezier(.2,.8,.2,1); }
.ot-sheet .grab { width: 40px; height: 5px; border-radius: 999px; background: var(--ot-gray-200); margin: 4px auto 14px; }
@keyframes ot-fade { from { opacity: 0; } }
@keyframes ot-up { from { transform: translateY(40px); } }
@keyframes ot-slide-in { from { opacity:0; } to { opacity:1; } }
.ot-page-anim { animation: ot-slide-in .2s ease both; }

/* field */
.ot-field { display: flex; flex-direction: column; gap: 7px; }
.ot-field label { font-family: var(--ot-font-body); font-weight: 600; font-size: 12.5px; color: var(--ot-fg-2); }
.ot-input { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--ot-gray-200); border-radius: var(--ot-r-sm); padding: 14px; font-size: 15px; font-weight: 500; color: var(--ot-navy); }
.ot-input:focus-within { border-color: var(--ot-orange); box-shadow: 0 0 0 3px rgba(255,92,0,.14); }
.ot-input svg { width: 18px; height: 18px; color: var(--ot-gray-400); }
.ot-input input { border: none; outline: none; flex: 1; font: inherit; color: inherit; background: none; min-width: 0; }
.ot-input input::placeholder { color: var(--ot-gray-400); }

/* segmented */
.ot-seg { display: flex; background: var(--ot-gray-100); border-radius: var(--ot-r-sm); padding: 4px; gap: 4px; }
.ot-seg button { flex: 1; border: none; background: none; cursor: pointer; font-family: var(--ot-font-body); font-weight: 600; font-size: 13px; color: var(--ot-fg-2); padding: 9px; border-radius: 9px; }
.ot-seg button.active { background: #fff; color: var(--ot-navy); box-shadow: var(--ot-shadow-xs); }

.ot-divider { height: 1px; background: var(--ot-gray-100); margin: 0; border: none; }

/* admin desktop note */
.ot-admin-note { color: rgba(255,255,255,.5); font-size: 12px; max-width: 240px; text-align: center; line-height: 1.5; }
.ot-admin-note b { color: #fff; }

/* ============================== MOTION / NEW COMPONENTS ====================== */
/* tab-bar active bounce */
.ot-tab svg { transition: transform .25s var(--ot-spring); }
.ot-tab.active svg { animation: ot-tab-pop .42s var(--ot-spring); }
@keyframes ot-tab-pop { 0%{transform:scale(1);} 45%{transform:scale(1.18) translateY(-1px);} 100%{transform:scale(1);} }

/* skeleton shimmer */
.ot-skel { position: relative; overflow: hidden; background: var(--ot-gray-100); }
.ot-skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: ot-shimmer 1.2s ease-in-out infinite; }
@keyframes ot-shimmer { 100% { transform: translateX(100%); } }

/* amber pulse (rate lock last 10s) */
.ot-amber-pulse { animation: ot-amber 1s ease-in-out infinite; }
@keyframes ot-amber { 50% { opacity: .45; } }

/* swipe to pay */
.ot-swipe { position: relative; height: 60px; border-radius: var(--ot-r-pill); background: var(--ot-orange-50); display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; touch-action: none; }
.ot-swipe.armed { background: var(--ot-success-bg); }
.ot-swipe.disabled { background: var(--ot-gray-100); }
.ot-swipe-label { font-family: var(--ot-font-body); font-weight: 700; font-size: 15px; color: var(--ot-orange-deep); letter-spacing: -.01em; }
.ot-swipe.disabled .ot-swipe-label { color: var(--ot-gray-400); }
.ot-swipe-chev { position: absolute; right: 22px; display: flex; color: var(--ot-orange); animation: ot-chev 1.4s ease-in-out infinite; }
@keyframes ot-chev { 0%,100%{ transform: translateX(0); opacity:.5;} 50%{ transform: translateX(5px); opacity:1;} }
.ot-swipe-knob { position: absolute; left: 4px; top: 4px; width: 52px; height: 52px; border-radius: 50%; background: var(--ot-orange); color: #fff; display: flex; align-items: center; justify-content: center; cursor: grab; box-shadow: var(--ot-shadow-sm); touch-action: none; }
.ot-swipe.armed .ot-swipe-knob { background: var(--ot-success); }
.ot-swipe.disabled .ot-swipe-knob { background: var(--ot-gray-300); cursor: not-allowed; }
.ot-swipe-knob:active { cursor: grabbing; }

/* AI agent FAB */
.ot-fab { position: absolute; right: 16px; bottom: 100px; z-index: 18; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px 13px 15px; border: none; border-radius: var(--ot-r-pill); background: var(--ot-navy); color: #fff; font-family: var(--ot-font-body); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 12px 30px rgba(26,34,56,.34); }
.ot-fab svg { color: var(--ot-orange-300); }
.ot-fab:active { transform: scale(.96); }

/* progress pill (payment sending) */
.ot-pill { height: 56px; border-radius: var(--ot-r-pill); background: var(--ot-orange); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ot-font-body); font-weight: 700; font-size: 15px; }
.ot-pill .dots { display: inline-flex; gap: 5px; }
.ot-pill .dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: ot-bounce 1s ease-in-out infinite; }
.ot-pill .dots i:nth-child(2){ animation-delay:.15s; } .ot-pill .dots i:nth-child(3){ animation-delay:.3s; }
@keyframes ot-bounce { 0%,100%{ transform: translateY(0); opacity:.5;} 50%{ transform: translateY(-5px); opacity:1;} }

/* success ceremony */
.ot-ceremony-check { width: 96px; height: 96px; border-radius: 50%; background: var(--ot-success-bg); color: var(--ot-success); display: inline-flex; align-items: center; justify-content: center; animation: ot-pop .55s var(--ot-spring) both; }
@keyframes ot-pop { 0%{ transform: scale(0); } 60%{ transform: scale(1.12);} 100%{ transform: scale(1);} }

/* confetti */
.ot-confetti { position: absolute; left: 50%; top: 38%; pointer-events: none; z-index: 5; }
.ot-confetti i { position: absolute; display: block; border-radius: 1.5px; opacity: 0; animation: ot-conf .9s ease-out forwards; }
@keyframes ot-conf { 0%{ transform: translate(0,0) rotate(0); opacity:1;} 100%{ transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity:0;} }

/* bento + status chip helpers */
.ot-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--ot-r-pill); font-family: var(--ot-font-body); font-weight: 600; font-size: 12.5px; cursor: pointer; border: none; background: var(--ot-gray-100); color: var(--ot-fg-2); flex: none; }
.ot-chip.active { background: var(--ot-navy); color: #fff; }

/* card collapse (to-pay leaving home) */
.ot-collapse { animation: ot-collapse .45s var(--ot-ease-exit) forwards; overflow: hidden; }
@keyframes ot-collapse { to { opacity: 0; transform: scale(.94); max-height: 0; margin: 0; padding-top:0; padding-bottom:0; } }

/* stagger entrance for list items */
.ot-stagger > * { animation: ot-rise .32s var(--ot-ease-enter) both; }
.ot-stagger > *:nth-child(1){animation-delay:0ms;} .ot-stagger > *:nth-child(2){animation-delay:24ms;}
.ot-stagger > *:nth-child(3){animation-delay:48ms;} .ot-stagger > *:nth-child(4){animation-delay:72ms;}
.ot-stagger > *:nth-child(5){animation-delay:96ms;} .ot-stagger > *:nth-child(6){animation-delay:120ms;}
@keyframes ot-rise { from { opacity:0; transform: translateY(10px);} }

/* funds-in / paid glow on balance card */
.ot-glow { animation: ot-glow 1.4s var(--ot-ease-enter); }
@keyframes ot-glow { 0%,100%{ box-shadow: var(--ot-shadow-orange);} 35%{ box-shadow: 0 0 0 3px rgba(31,138,91,.5), 0 14px 34px rgba(31,138,91,.4);} }

/* chat bubbles (agent scene) */
.ot-bubble { animation: ot-rise .3s var(--ot-ease-enter) both; }
.ot-typing i { display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--ot-gray-400); animation: ot-bounce 1s ease-in-out infinite; }
.ot-typing i:nth-child(2){animation-delay:.15s;} .ot-typing i:nth-child(3){animation-delay:.3s;}

/* ============================== AGENT MISSION ================================= */
/* live agent header — pulsing sparkle avatar */
.ot-agent-orb { position: relative; width: 44px; height: 44px; border-radius: 13px; background: rgba(255,122,0,.18); color: var(--ot-orange-300); display: flex; align-items: center; justify-content: center; flex: none; }
.ot-agent-orb.live::after { content:""; position:absolute; inset:-4px; border-radius:16px; border:2px solid var(--ot-orange); opacity:.5; animation: ot-orb 1.6s ease-out infinite; }
@keyframes ot-orb { 0%{ transform: scale(.85); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }

/* phase rail */
.ot-rail { display: flex; gap: 4px; }
.ot-rail .ph { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ot-rail .ph .pdot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ot-gray-100); color: var(--ot-gray-400); transition: all .3s; }
.ot-rail .ph.active .pdot { background: var(--ot-orange); color: #fff; box-shadow: 0 0 0 4px var(--ot-orange-50); }
.ot-rail .ph.done .pdot { background: var(--ot-navy); color: #fff; }
.ot-rail .ph .plabel { font-size: 9.5px; font-weight: 700; color: var(--ot-gray-400); text-align: center; letter-spacing: .01em; }
.ot-rail .ph.active .plabel { color: var(--ot-orange-deep); }
.ot-rail .ph.done .plabel { color: var(--ot-navy); }
.ot-rail .ph .pline { position: absolute; }

/* phase divider in feed */
.ot-phase-div { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; animation: ot-rise .3s ease both; }
.ot-phase-div .l { flex: 1; height: 1px; background: var(--ot-gray-200); }
.ot-phase-div .t { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ot-fg-3); display: inline-flex; align-items: center; gap: 6px; }

/* agent "thinking" status line */
.ot-think { display: flex; align-items: center; gap: 9px; padding: 4px 2px; animation: ot-rise .3s ease both; }
.ot-think .sp { width: 15px; height: 15px; border: 2px solid var(--ot-orange-100); border-top-color: var(--ot-orange); border-radius: 50%; animation: ot-spin .7s linear infinite; flex: none; }
.ot-think span { font-size: 13px; color: var(--ot-fg-2); font-style: italic; }

/* scan card */
.ot-scan { background: var(--ot-navy); border-radius: var(--ot-r-lg); padding: 16px; color: #fff; animation: ot-rise .3s ease both; position: relative; overflow: hidden; }
.ot-scan .radar { position: absolute; right: -16px; top: -16px; color: rgba(255,122,0,.25); }
.ot-scan .num { font-family: var(--ot-font-body); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 30px; letter-spacing: -.02em; }
.ot-scanbar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; margin-top: 12px; }
.ot-scanbar i { display: block; height: 100%; background: var(--ot-orange); border-radius: 999px; animation: ot-scanfill 2.4s var(--ot-ease-move) forwards; }
@keyframes ot-scanfill { from { width: 4%; } to { width: 100%; } }
.ot-region { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.12); padding: 4px 9px; border-radius: 999px; }

/* candidate row with match ring */
.ot-cand { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: #fff; border: 1px solid var(--ot-gray-200); border-radius: var(--ot-r-md); }
.ot-match { position: relative; width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.ot-match .pct { font-family: var(--ot-font-body); font-weight: 700; font-size: 12px; color: var(--ot-navy); }

/* documentation card (Chinese) */
.ot-doc { display: flex; align-items: center; gap: 11px; padding: 12px; background: var(--ot-gray-50); border: 1px solid var(--ot-gray-200); border-radius: var(--ot-r-md); }
.ot-doc .fic { width: 38px; height: 44px; border-radius: 7px; background: #fff; border: 1px solid var(--ot-gray-200); display: flex; align-items: center; justify-content: center; color: var(--ot-error); flex: none; }
.ot-cn { font-size: 9px; font-weight: 800; background: var(--ot-navy); color: #fff; padding: 2px 5px; border-radius: 4px; letter-spacing: .02em; }

/* translate reveal */
.ot-translate { background: #fff; border: 1.5px solid var(--ot-orange-200); border-radius: var(--ot-r-md); padding: 14px; animation: ot-rise .3s ease both; }
.ot-xlate-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ot-chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ot-anchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.ot-anchip.ok { background: var(--ot-success-bg); color: var(--ot-success); }
.ot-anchip.warn { background: var(--ot-warning-bg); color: var(--ot-warning); }

/* win / concession card */
.ot-win { display: flex; align-items: center; gap: 11px; padding: 13px; background: var(--ot-success-bg); border-radius: var(--ot-r-md); animation: ot-pop .5s var(--ot-spring) both; }
.ot-win .wic { width: 34px; height: 34px; border-radius: 10px; background: var(--ot-success); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }

/* cn original line inside supplier bubble */
.ot-cnline { background: var(--ot-gray-50); border-radius: 8px; padding: 7px 9px; font-size: 13px; color: var(--ot-fg-2); margin-bottom: 6px; }
.ot-xtag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--ot-orange-deep); margin: 2px 0 4px; }