@font-face {
  font-family: "Cairo";
  src: url("./assets/fonts/Cairo-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --mt-arabic-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --mt-latin-font: Helvetica, Arial, sans-serif;
  --mt-blue: #007dc5;
  --mt-blue-hover: #0069a6;
  --mt-navy: #061b36;
  --mt-white: #fff;
  --mt-bg: #f5f8fb;
  --mt-pale: #edf6fc;
  --mt-border: #d7e0e8;
  --mt-steel: #617386;
  --mt-text: #0e2947;
  --mt-success: #16865b;
  --mt-warning: #9b6a11;
  --mt-danger: #c73838;
  --mt-shadow: 0 18px 48px rgba(6, 27, 54, .18), 0 4px 14px rgba(6, 27, 54, .08);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; min-height: 100vh; background: #f4f7fa; color: var(--mt-text); font-family: var(--mt-arabic-font); }
button, input, select { font: inherit; }

.mira-app-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(0, 125, 197, 0.08), transparent 38%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
}

/* Standalone /mira/ shell.
   The hero previously stretched to min-height:100vh with the brand pinned to one
   grid column and the copy to another, so on a phone the logo floated near the top,
   the text sat near the bottom, and the middle was empty. It read as a broken page
   rather than an app screen. Centre the content as one column and let it size to
   its content, so the closed state looks deliberate at every width. */
.mira-app-shell {
  align-content: center;
  display: grid;
  gap: 22px;
  min-height: 100vh;
  padding: 22px clamp(16px, 4vw, 42px) calc(28px + env(safe-area-inset-bottom));
}

.mira-app-hero {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0, 125, 197, .14);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7, 26, 47, .08);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1120px;
  padding: clamp(22px, 4vw, 34px);
  width: 100%;
}

/* Below the two-column breakpoint the brand and copy stack and centre, which keeps
   the card compact instead of spreading the logo and text to opposite screen edges. */
@media (max-width: 720px) {
  .mira-app-hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .mira-app-brand img {
    max-width: 168px;
  }
}

.mira-app-brand {
  align-items: center;
  display: flex;
}

.mira-app-brand img {
  display: block;
  height: auto;
  max-width: 220px;
  width: 100%;
}

.mira-app-kicker {
  color: var(--mt-blue);
  font: 900 12px/1.4 var(--mt-latin-font);
  letter-spacing: .08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.mira-app-hero h1 {
  color: var(--mt-navy);
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.04;
  margin: 0;
}

.mira-app-hero p:not(.mira-app-kicker) {
  color: #52697e;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.8;
  margin: 10px 0 0;
  max-width: 760px;
}

.demo-page { min-height: 100vh; padding: clamp(72px, 11vh, 126px) clamp(24px, 7vw, 110px) 150px; background: linear-gradient(100deg, #f8fbfd 0 54%, #e5eef5 100%); }
.demo-logo { color: var(--mt-navy); font: 900 22px/1 var(--mt-latin-font); letter-spacing: .04em; }
.demo-logo span { color: var(--mt-blue); }
.demo-kicker { margin: 10px 0 26px; color: var(--mt-steel); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.demo-page h1 { max-width: 740px; margin: 0; color: var(--mt-navy); font-size: clamp(40px, 6vw, 78px); line-height: 1.08; letter-spacing: -.035em; }
.demo-page > p:not(.demo-kicker) { max-width: 640px; color: #52697e; font-size: 18px; line-height: 1.9; }
.demo-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.demo-features span { padding: 9px 13px; border: 1px solid #cbd9e4; border-radius: 999px; background: #fff; color: var(--mt-navy); font-size: 12px; font-weight: 800; }

#midtrans-shipping-copilot, #midtrans-shipping-copilot * { box-sizing: border-box; }
#midtrans-shipping-copilot { position: relative; z-index: 2147483000; color: var(--mt-text); font-family: var(--mt-latin-font); }
#midtrans-shipping-copilot[dir="rtl"], #midtrans-shipping-copilot [dir="rtl"], #midtrans-shipping-copilot [lang="ar"] { font-family: var(--mt-arabic-font); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.mtc-launcher-wrap { position: fixed; bottom: var(--mira-float-bottom, 24px); display: grid; justify-items: center; gap: 10px; transition: bottom .18s ease; }
#midtrans-shipping-copilot[dir="rtl"] .mtc-launcher-wrap { left: 24px; }
#midtrans-shipping-copilot[dir="ltr"] .mtc-launcher-wrap { right: 24px; }
.mtc-launcher-wrap[hidden] { display: none !important; }
.mtc-launcher { position: relative; width: 64px; height: 64px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #dfeaf2; color: #fff; box-shadow: 0 12px 30px rgba(0, 125, 197, .32); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.mtc-launcher:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(0, 125, 197, .38); }
.mtc-launcher-photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 34%; }
.mtc-badge { position: absolute; inset: -4px -4px auto auto; min-width: 21px; height: 21px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: var(--mt-danger); color: #fff; font: 800 11px/17px var(--mt-latin-font); }
.mtc-first-visit { position: relative; width: max-content; max-width: 230px; min-height: 44px; padding: 12px 50px 12px 13px; border: 1px solid var(--mt-border); border-radius: 12px; background: #fff; color: var(--mt-navy); box-shadow: 0 8px 24px rgba(6, 27, 54, .14); font-size: 12px; font-weight: 700; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; }
[dir="rtl"] .mtc-first-visit { padding: 12px 13px 12px 50px; }
.mtc-first-visit[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.mtc-first-visit::after { content: ""; position: absolute; bottom: -6px; inset-inline-end: 25px; width: 10px; height: 10px; border-right: 1px solid var(--mt-border); border-bottom: 1px solid var(--mt-border); background: #fff; transform: rotate(45deg); }
.mtc-first-visit button { position: absolute; top: 0; inset-inline-end: 0; width: 44px; height: 44px; padding: 13px; border: 0; border-radius: 8px; background: transparent; color: var(--mt-steel); cursor: pointer; }
.mtc-first-visit button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.mtc-panel { position: fixed; bottom: 104px; display: none; flex-direction: column; width: min(430px, calc(100vw - 36px)); height: min(720px, calc(100dvh - 124px)); min-height: 560px; overflow: hidden; border: 1px solid rgba(6, 27, 54, .13); border-radius: 22px; background: #fff; box-shadow: var(--mt-shadow); }
#midtrans-shipping-copilot[dir="rtl"] .mtc-panel { left: 24px; }
#midtrans-shipping-copilot[dir="ltr"] .mtc-panel { right: 24px; }
.mtc-panel[data-open="true"] { display: flex; animation: mtc-open .32s cubic-bezier(.2,.82,.2,1); }
@keyframes mtc-open { from { opacity: 0; transform: translateY(18px) scale(.94); clip-path: inset(76% 3% 2% 68% round 999px); } to { opacity: 1; transform: none; clip-path: inset(0 round 22px); } }

#midtrans-shipping-copilot[data-standalone="true"] {
  display: block;
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
  z-index: 1;
}

/* Standalone /mira/: the launcher is redundant while the panel fills the screen,
   but it is the only way back once the panel is closed. Scope the rule to the open
   state instead of hiding it unconditionally. */
body:not(.mira-panel-closed) #midtrans-shipping-copilot[data-standalone="true"] .mtc-launcher-wrap {
  display: none !important;
}

#midtrans-shipping-copilot[data-standalone="true"] .mtc-panel {
  bottom: auto;
  height: min(760px, calc(100dvh - 182px));
  left: auto !important;
  margin: 0 auto;
  min-height: 560px;
  position: relative;
  right: auto !important;
  width: min(980px, 100%);
}

#midtrans-shipping-copilot[data-standalone="true"] .mtc-panel[data-open="true"] {
  display: flex;
}

html.mira-embed,
body.mira-embed {
  background: transparent;
  height: 100%;
  overflow: hidden;
}

body.template-mira-app main {
  background: transparent !important;
}

body.mira-embed .mira-app-page,
body.mira-embed .mira-app-shell {
  background: #f4f7fa;
  min-height: 100dvh;
}

body.mira-embed .mira-app-shell {
  gap: 0;
  padding: 0;
}

body.mira-embed .mira-app-hero {
  display: none;
}

body.mira-embed #midtrans-shipping-copilot[data-standalone="true"] {
  height: 100dvh !important;
  max-width: none !important;
  width: 100% !important;
}

body.mira-embed #midtrans-shipping-copilot[data-standalone="true"] .mtc-panel {
  border: 0 !important;
  border-radius: 0 !important;
  bottom: auto !important;
  box-shadow: none !important;
  height: 100dvh !important;
  left: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  width: 100vw !important;
}

body.mira-embed #midtrans-shipping-copilot[data-standalone="true"] .mtc-minimize {
  display: none;
}

.mtc-header { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(92px, 1fr) repeat(5, auto); align-items: center; gap: 7px; min-height: 92px; padding: 14px; background: var(--mt-navy); color: #fff; }
.mtc-avatar { width: 52px; height: 52px; overflow: hidden; border: 2px solid rgba(255,255,255,.8); border-radius: 16px; background: #dfeaf2; }
.mtc-agent-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.mtc-title-wrap { min-width: 0; }
.mtc-title { margin: 0; overflow: hidden; color: #fff; font-size: 16px; font-weight: 900; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.mtc-subtitle { margin: 2px 0 0; overflow: hidden; color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.mtc-status { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: rgba(255,255,255,.88); font-size: 10px; white-space: nowrap; }
.mtc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3bc582; }
.mtc-home, .mtc-menu, .mtc-lang, .mtc-minimize, .mtc-close { display: grid; place-items: center; min-width: 40px; height: 44px; padding: 0 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.mtc-home:hover, .mtc-menu:hover, .mtc-lang:hover, .mtc-minimize:hover, .mtc-close:hover { background: rgba(255,255,255,.1); }
.mtc-home svg, .mtc-menu svg, .mtc-minimize svg, .mtc-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mtc-lang { font-size: 11px; font-weight: 900; }

.mtc-conversation { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--mt-bg); scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #aebdcc transparent; }
.mtc-message { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 13px; animation: mtc-content-arrive .28s cubic-bezier(.2,.75,.25,1) both; }
.mtc-message[data-role="user"] { justify-content: flex-end; }
.mtc-message-avatar { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #cfdbe5; border-radius: 50%; object-fit: cover; object-position: center 34%; }
.mtc-message-stack { display: grid; max-width: 84%; }
.mtc-bubble { padding: 11px 13px; border: 1px solid var(--mt-border); border-radius: 15px 15px 15px 5px; background: #fff; color: #223c57; font-size: 13px; line-height: 1.75; white-space: pre-wrap; box-shadow: 0 3px 10px rgba(6,27,54,.04); }
[dir="rtl"] .mtc-bubble { border-radius: 15px 15px 5px 15px; }
.mtc-message[data-role="user"] .mtc-bubble { border-color: #c6dff0; border-radius: 15px 15px 5px 15px; background: #dfeef9; color: var(--mt-navy); box-shadow: none; }
[dir="rtl"] .mtc-message[data-role="user"] .mtc-bubble { border-radius: 15px 15px 15px 5px; }
.mtc-time { margin-top: 3px; color: #7a8b9c; font: 500 9px/1.4 var(--mt-latin-font); }
.mtc-message[data-role="user"] .mtc-time { text-align: end; }

.mtc-intelligence-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mtc-intelligence-strip span { min-height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #cce0ec; border-radius: 999px; background: #f7fbfd; color: #315a75; font-size: 9px; font-weight: 800; }
.mtc-intelligence-strip span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #21a875; }
.mtc-thinking { display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0 0 12px; color: #52697e; font-size: 11px; }
.mtc-thinking img { width: 30px; height: 30px; border: 1px solid #cfdbe5; border-radius: 50%; object-fit: cover; }
.mtc-thinking span { min-width: 0; animation: mtc-thinking-stage .22s ease both; }
.mtc-thinking[data-stage="3"] span { color: #126a46; font-weight: 800; }
.mtc-thinking b { display: inline-flex; gap: 3px; }
.mtc-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--mt-blue); animation: mtc-thinking-pulse 1s infinite ease-in-out; }
.mtc-thinking i:nth-child(2) { animation-delay: .14s; }
.mtc-thinking i:nth-child(3) { animation-delay: .28s; }
@keyframes mtc-thinking-pulse { 0%, 70%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes mtc-thinking-stage { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mtc-thinking i { animation: none; opacity: .7; } }

.mtc-home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 4px 0 12px; }
.mtc-home-action { min-height: 84px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--mt-border); border-radius: 12px; background: #fff; color: var(--mt-text); text-align: start; cursor: pointer; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.mtc-home-action:hover { border-color: #8dc5e5; background: #fafdff; transform: translateY(-1px); }
.mtc-home-icon, .mtc-service-icon { display: grid; place-items: center; color: var(--mt-blue); }
.mtc-home-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mtc-home-action strong, .mtc-home-action small { display: block; }
.mtc-home-action strong { color: var(--mt-navy); font-size: 12px; line-height: 1.4; }
.mtc-home-action small { margin-top: 4px; color: var(--mt-steel); font-size: 10px; line-height: 1.5; }
.mtc-action-anchor { display: block; height: 1px; margin-top: 10px; scroll-margin-top: 10px; }
.mtc-action-anchor--active { animation: mtc-anchor-focus .85s ease; }
@keyframes mtc-anchor-focus { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 4px rgba(0,125,197,.22); } }
@media (prefers-reduced-motion: reduce) { .mtc-action-anchor--active { animation: none; } }
.mtc-more { margin-bottom: 8px; border-top: 1px solid var(--mt-border); }
.mtc-more summary { min-height: 44px; display: grid; place-items: center; color: var(--mt-blue); font-size: 12px; font-weight: 800; cursor: pointer; }
.mtc-more > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 0 10px; }
.mtc-more button { min-height: 42px; border: 1px solid var(--mt-border); border-radius: 9px; background: #fff; color: var(--mt-navy); font-size: 11px; cursor: pointer; }

.mtc-card, .mtc-quote { margin-top: 12px; padding: 14px; border: 1px solid var(--mt-border); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(6,27,54,.05); animation: mtc-content-arrive .34s cubic-bezier(.2,.75,.25,1) both; }
.mtc-card[data-kind="warning"] { border-color: #e4d4b2; background: #fffdf8; }
.mtc-card[data-kind="success"] { border-color: #afd8c7; background: #f7fcf9; }
.mtc-card h3, .mtc-quote h3 { margin: 0 0 7px; color: var(--mt-navy); font-size: 14px; line-height: 1.45; }
/* pre-line so a numbered or staged answer breaks one step per line instead of
   running together in a block. The chat bubble already had pre-wrap; the card
   body did not, which is where step-by-step answers are rendered. pre-line
   rather than pre-wrap: it keeps the newlines but still collapses stray runs of
   spaces, so accidental indentation in the knowledge base cannot open a gap. */
.mtc-card p, .mtc-card ul, .mtc-hint { margin: 0; color: #52697e; font-size: 12px; line-height: 1.75; white-space: pre-line; }
.mtc-card ul { margin-top: 8px; padding-inline-start: 19px; }

/* Operations panel — the shipment file as it is currently known.
   Deliberately quiet: it sits under the header as a status band, not a second
   screen competing with the conversation. States are carried by a small dot and
   text weight rather than colour alone, so the distinction survives greyscale
   and colour-blindness. */
.mtc-ops { padding: 10px 13px 11px; border-bottom: 1px solid var(--mt-border); background: #f7fafc; }
.mtc-ops[hidden] { display: none; }
.mtc-ops-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mtc-ops-title { color: var(--mt-navy); font-size: 12px; font-weight: 700; }
.mtc-ops-lane { color: #007DC5; font-size: 12px; font-weight: 700; }
.mtc-ops-lane[data-pending="true"] { color: #6b7f92; font-weight: 600; }
.mtc-ops-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.mtc-ops-list li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.6; }
.mtc-ops-list li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.mtc-ops-list li[data-state="ready"]::before { background: #1faf54; }
.mtc-ops-list li[data-state="pending"]::before { background: #d7dee6; }
.mtc-ops-key { color: #6b7f92; }
.mtc-ops-list li[data-state="ready"] .mtc-ops-val { color: var(--mt-navy); font-weight: 700; }
.mtc-ops-list li[data-state="pending"] .mtc-ops-val { color: #9aabbb; }
.mtc-ops-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mtc-ops-flags span { padding: 2px 8px; border: 1px solid #e4d4b2; border-radius: 999px; background: #fffdf8; color: #8a6d2f; font-size: 10.5px; font-weight: 700; }
.mtc-ops-next { display: flex; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--mt-border); font-size: 11.5px; }
.mtc-ops-next strong { flex: 0 0 auto; color: #007DC5; }
.mtc-ops-next span { color: #52697e; }
@media (prefers-reduced-motion: no-preference) {
  .mtc-ops { transition: background-color 200ms ease; }
}

/* Re-asked question: the earlier answer pulses instead of being reprinted, so
   the visitor sees where it already is rather than reading it twice. */
@keyframes mtc-recall {
  0%   { box-shadow: 0 4px 14px rgba(6,27,54,.05), 0 0 0 0 rgba(0,125,197,.34); border-color: var(--mt-border); }
  18%  { box-shadow: 0 4px 18px rgba(6,27,54,.10), 0 0 0 7px rgba(0,125,197,.16); border-color: #007DC5; }
  60%  { box-shadow: 0 4px 18px rgba(6,27,54,.08), 0 0 0 3px rgba(0,125,197,.10); border-color: #007DC5; }
  100% { box-shadow: 0 4px 14px rgba(6,27,54,.05), 0 0 0 0 rgba(0,125,197,0); border-color: var(--mt-border); }
}
.mtc-card.mtc-recalled { animation: mtc-recall 2.4s cubic-bezier(.2,.75,.25,1) both; }
/* Respect a reduced-motion preference: still mark the card, just do not pulse. */
@media (prefers-reduced-motion: reduce) {
  .mtc-card.mtc-recalled { animation: none; border-color: #007DC5; }
}

/* App-store badges inside a MIRA card. */
.mtc-store-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.mtc-store-badge { display: inline-flex; border-radius: 8px; transition: transform .18s ease, box-shadow .18s ease; }
.mtc-store-badge img { display: block; height: 40px; width: auto; }
.mtc-store-badge:hover, .mtc-store-badge:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(6,27,54,.16); }
.mtc-card-action { margin-top: 10px; }
.mtc-services-list { display: grid; margin-top: 12px; border: 1px solid var(--mt-border); border-radius: 11px; overflow: hidden; }
.mtc-services-list a { min-height: 62px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 1px solid var(--mt-border); color: var(--mt-text); text-decoration: none; }
.mtc-services-list a:last-child { border-bottom: 0; }
.mtc-services-list a:hover { background: #f6fbfe; }
.mtc-service-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mtc-services-list strong, .mtc-services-list small { display: block; }
.mtc-services-list strong { color: var(--mt-navy); font-size: 12px; }
.mtc-services-list small { margin-top: 3px; color: var(--mt-steel); font-size: 10px; line-height: 1.45; }
.mtc-services-list b { color: var(--mt-blue); font: 400 20px/1 var(--mt-latin-font); }
.mtc-service-link { color: var(--mt-blue); font-weight: 800; text-decoration: none; }

.mtc-tracking-form { margin-top: 12px; }
.mtc-tracking-form label { display: flex; min-height: 46px; overflow: hidden; border: 1px solid #c7d8e5; border-radius: 10px; background: #fff; }
.mtc-tracking-form input { flex: 1; min-width: 0; padding: 0 11px; border: 0; outline: 0; color: var(--mt-text); background: transparent; }
.mtc-tracking-form button { width: 46px; border: 0; background: var(--mt-blue); color: #fff; cursor: pointer; }
.mtc-tracking-form svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mtc-account-access { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--mt-border); }
.mtc-account-access h4 { margin: 0 0 6px; color: var(--mt-navy); font-size: 12px; }
.mtc-account-access p, .mtc-account-access ul { margin: 0; color: #52697e; font-size: 11px; line-height: 1.7; }
.mtc-account-access ul { margin-top: 7px; padding-inline-start: 18px; }
.mtc-account-access .mtc-secondary { width: 100%; margin-top: 10px; }
.mtc-news-feed { display: grid; gap: 9px; margin-top: 12px; }
.mtc-news-feed__heading { padding: 13px; border: 1px solid #c8ddea; border-radius: 12px; background: #f4f9fc; }
.mtc-news-feed__heading h3, .mtc-news-item h4 { margin: 0; color: var(--mt-navy); }
.mtc-news-feed__heading h3 { font-size: 14px; }
.mtc-news-feed__heading p, .mtc-news-item p { margin: 6px 0 0; color: #52697e; font-size: 11px; line-height: 1.65; }
.mtc-news-item { padding: 12px; border: 1px solid var(--mt-border); border-radius: 11px; background: #fff; }
.mtc-news-item h4 { margin-top: 7px; font-size: 12px; line-height: 1.5; }
.mtc-news-item__meta { display: flex; flex-wrap: wrap; gap: 6px; color: #708396; font-size: 9px; }
.mtc-news-item__meta > * { padding: 3px 7px; border-radius: 999px; background: #edf3f6; }
.mtc-news-item > a { display: inline-flex; margin-top: 9px; color: var(--mt-blue); font-size: 11px; font-weight: 850; text-decoration: none; }
.mtc-news-feed__more { justify-self: stretch; display: grid; place-items: center; text-decoration: none; }
.mtc-website-sources { display: grid; gap: 9px; margin-top: 11px; }
.mtc-website-source { padding: 11px; border: 1px solid var(--mt-border); border-radius: 10px; background: #fff; animation: mtc-source-arrive .38s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(var(--mtc-motion-order, 0) * 90ms + 90ms); }
.mtc-website-source h4 { margin: 0; color: var(--mt-navy); font-size: 12px; line-height: 1.45; }
.mtc-website-source p { margin: 6px 0 0; color: #52697e; font-size: 11px; line-height: 1.65; }
.mtc-website-source a { display: inline-flex; margin-top: 8px; color: var(--mt-blue); font-size: 11px; font-weight: 850; text-decoration: none; }
.mtc-website-source a:hover, .mtc-website-source a:focus-visible { text-decoration: underline; }
.mtc-quote-summary { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 12px 0 0; font-size: 12px; }
.mtc-quote-summary dt { color: var(--mt-steel); }
.mtc-quote-summary dd { margin: 0; color: var(--mt-navy); font-weight: 700; text-align: end; }
.mtc-summary-actions, .mtc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.mtc-text-button { min-height: 42px; padding: 0 10px; border: 0; background: transparent; color: var(--mt-steel); cursor: pointer; }

.mtc-answer-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--mt-border); font-size: 9px; animation: mtc-source-proof .34s ease-out .12s both; }
.mtc-confidence, .mtc-answer-source { min-height: 24px; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; text-decoration: none; }
.mtc-confidence-high { background: #e7f5ed; color: #126a46; }
.mtc-confidence-medium { background: #e8f3fa; color: #075f91; }
.mtc-confidence-low { background: #fff3d8; color: #855a0b; }
.mtc-answer-source { background: #edf1f4; color: #52697e; }
.mtc-context-note { display: grid; gap: 5px; margin-top: 10px; padding: 11px; border: 1px solid #c9dfea; border-radius: 11px; background: #f2f8fc; color: var(--mt-text); font-size: 11px; }
.mtc-context-note button { justify-self: start; min-height: 38px; padding: 0 11px; border: 0; border-radius: 9px; background: var(--mt-blue); color: #fff; font-weight: 800; cursor: pointer; }
.mtc-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mtc-chip { min-height: 40px; padding: 0 11px; border: 1px solid #bdd9e9; border-radius: 10px; background: #fff; color: var(--mt-blue); font-size: 11px; font-weight: 800; cursor: pointer; animation: mtc-option-arrive .3s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(var(--mtc-motion-order, 0) * 70ms); transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.mtc-chip:hover { border-color: #78badd; background: #f6fbfe; transform: translateY(-1px); }

@keyframes mtc-content-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mtc-option-arrive { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mtc-source-arrive { from { opacity: 0; transform: translateY(8px); border-color: rgba(0,125,197,.55); } to { opacity: 1; transform: none; border-color: var(--mt-border); } }
@keyframes mtc-source-proof { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mtc-progress { position: relative; padding-bottom: 10px; color: var(--mt-steel); font-size: 11px; font-weight: 700; }
.mtc-progress::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; border-radius: 999px; background: #e4eaf0; }
.mtc-progress b { position: absolute; inset: auto auto 0 0; z-index: 1; height: 5px; border-radius: 999px; background: var(--mt-blue); }
[dir="rtl"] .mtc-progress b { inset: auto 0 0 auto; }
.mtc-grid, .mtc-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mtc-field { display: grid; gap: 5px; color: var(--mt-steel); font-size: 11px; font-weight: 700; }
.mtc-field input, .mtc-field select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid #cbd7e1; border-radius: 9px; background: #fff; color: var(--mt-text); font-size: 12px; }
.mtc-choice { position: relative; }
.mtc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mtc-choice span { min-height: 58px; display: grid; place-items: center; padding: 9px; border: 1px solid var(--mt-border); border-radius: 10px; background: #fff; color: var(--mt-text); font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; }
.mtc-choice input:checked + span { border-color: var(--mt-blue); background: var(--mt-pale); color: var(--mt-blue-hover); box-shadow: 0 0 0 2px rgba(0,125,197,.1); }
.mtc-error { min-height: 17px; margin: 7px 0 0; color: var(--mt-danger); font-size: 11px; }
.mtc-confirm { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--mt-border); border-radius: 10px; background: #f8fafc; }
.mtc-confirm p { margin: 0; color: #52697e; font-size: 12px; line-height: 1.6; }

.mtc-primary, .mtc-secondary { min-height: 42px; padding: 0 13px; border-radius: 9px; font-size: 11px; font-weight: 850; cursor: pointer; }
.mtc-primary { border: 1px solid var(--mt-blue); background: var(--mt-blue); color: #fff; }
.mtc-primary:hover { background: var(--mt-blue-hover); }
.mtc-secondary { border: 1px solid #b9cbd8; background: #fff; color: var(--mt-blue-hover); }
/* The share control is an <a> reusing the secondary-button look; anchors need
   the flex centering buttons get for free. WhatsApp green for recognition. */
a.mtc-share-whatsapp { align-items: center; border-color: #b9dfc6; color: #128c4b; display: inline-flex; justify-content: center; margin-top: 8px; text-decoration: none; }
a.mtc-share-whatsapp:hover { background: #f2fbf5; border-color: #4fbf7c; }
.mtc-nav .mtc-primary { margin-inline-start: auto; }

.mtc-composer { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--mt-border); background: #fff; }
.mtc-input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid #c6d3de; border-radius: 12px; outline: 0; background: #fbfcfd; color: var(--mt-text); font-size: 13px; }
.mtc-input:focus { border-color: var(--mt-blue); box-shadow: 0 0 0 3px rgba(0,125,197,.12); background: #fff; }
.mtc-send, .mtc-attach { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; }
.mtc-send { background: var(--mt-blue); color: #fff; }
.mtc-send:hover { background: var(--mt-blue-hover); }
.mtc-send:disabled, .mtc-input:disabled { cursor: wait; opacity: .68; }
.mtc-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .mtc-send svg { transform: scaleX(-1); }
.mtc-attach { border: 1px solid var(--mt-border); background: #fff; color: var(--mt-blue); font-size: 20px; }
.mtc-footer { flex: 0 0 auto; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #edf1f4; background: #fff; color: var(--mt-steel); font-size: 10px; }
.mtc-footer-human { min-height: 30px; border: 0; background: transparent; color: var(--mt-blue); font-weight: 850; cursor: pointer; }
.mtc-privacy { color: var(--mt-steel); text-decoration: none; }

.mtc-launcher:focus-visible, .mtc-first-visit button:focus-visible, .mtc-home:focus-visible, .mtc-menu:focus-visible, .mtc-lang:focus-visible, .mtc-minimize:focus-visible, .mtc-close:focus-visible, .mtc-home-action:focus-visible, .mtc-more button:focus-visible, .mtc-chip:focus-visible, .mtc-primary:focus-visible, .mtc-secondary:focus-visible, .mtc-text-button:focus-visible, .mtc-send:focus-visible, .mtc-footer-human:focus-visible, .mtc-services-list a:focus-visible { outline: 3px solid rgba(0,125,197,.32); outline-offset: 2px; }

@media (max-width: 640px) {
  .mira-app-shell {
    gap: 10px;
    padding: 12px 0 0;
  }
  .mira-app-hero {
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .mira-app-brand img { max-width: 136px; }
  .mira-app-kicker {
    font-size: 10px;
    margin-bottom: 4px;
  }
  .mira-app-hero h1 {
    font-size: clamp(28px, 8vw, 34px);
  }
  .mira-app-hero p:not(.mira-app-kicker) {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 5px;
  }
  #midtrans-shipping-copilot[data-standalone="true"] .mtc-panel {
    height: calc(100dvh - 176px);
    min-height: 0;
    width: 100vw;
  }
  #midtrans-shipping-copilot[dir] .mtc-panel { inset: 0; width: 100vw; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  #midtrans-shipping-copilot[data-standalone="true"] .mtc-panel {
    height: calc(100dvh - 176px);
    inset: auto;
    min-height: 0;
    width: 100vw;
  }
  .mtc-header { padding-top: calc(10px + env(safe-area-inset-top)); }
  .mtc-conversation { padding: 14px; }
  .mtc-footer { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  #midtrans-shipping-copilot[dir="rtl"] .mtc-launcher-wrap { left: 18px; }
  #midtrans-shipping-copilot[dir="ltr"] .mtc-launcher-wrap { right: 18px; }
}

@media (min-width: 760px) {
  .mira-app-shell {
    align-items: center;
    grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1200px;
    padding-block: 24px;
  }

  .mira-app-hero {
    align-content: center;
    align-self: stretch;
    grid-template-columns: 1fr;
    margin: 0;
    max-width: none;
  }

  #midtrans-shipping-copilot[data-standalone="true"] {
    align-self: center;
    max-width: none;
  }

  #midtrans-shipping-copilot[data-standalone="true"] .mtc-panel {
    height: min(820px, calc(100dvh - 48px));
    width: min(760px, 100%);
  }
}

@media (max-width: 480px) {
  .mtc-header { grid-template-columns: auto minmax(80px, 1fr) repeat(4, auto); gap: 5px; min-height: 84px; padding-inline: 10px; }
  .mtc-minimize { display: none; }
  .mtc-avatar { width: 46px; height: 46px; border-radius: 14px; }
  .mtc-title { font-size: 13px; }
  .mtc-subtitle { display: none; }
  .mtc-status { font-size: 9px; }
  .mtc-home, .mtc-menu, .mtc-lang, .mtc-close { min-width: 44px; width: 44px; height: 44px; padding: 0; }
  .mtc-home-actions { grid-template-columns: 1fr; }
  .mtc-home-action { min-height: 70px; }
  .mtc-grid, .mtc-choice-grid, .mtc-more > div { grid-template-columns: 1fr; }
  .mtc-message-stack { max-width: 88%; }
}

@media (max-width: 360px) {
  .mtc-menu { display: none; }
  .mtc-header { grid-template-columns: auto minmax(72px, 1fr) repeat(3, auto); }
  .mtc-conversation { padding: 11px; }
  .mtc-composer { padding-inline: 9px; }
}

@media (max-height: 650px) and (min-width: 641px) {
  .mtc-panel { bottom: 12px; height: calc(100dvh - 24px); min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #midtrans-shipping-copilot *, #midtrans-shipping-copilot *::before, #midtrans-shipping-copilot *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* MIRA is a focused assistant surface; the public-site footer stays outside it. */
body.template-mira-app .site-footer {
  display: none !important;
}

/* Direct MIRA access: the hero shell is hidden while the assistant panel covers the
   screen, but it must come back when the panel is closed. The dedicated /mira/ page
   renders no site header, so without this the page was completely blank after
   closing, with no content and no way back. */
body.template-mira-app .mira-app-shell {
  display: none !important;
}

body.template-mira-app.mira-panel-closed .mira-app-shell {
  display: grid !important;
}

/* Inside the overlay iframe (?embed=1) the parent page already has its own chrome. */
body.mira-embed .site-header {
  display: none !important;
}

body.template-mira-app main {
  min-height: 0 !important;
  padding: 0 !important;
}

/* Standalone MIRA page (mtc-shell--mira): the panel fills a tall viewport, so a
   short welcome (greeting + quick actions) left a large empty gap above the
   pinned composer. Center the conversation content vertically instead — balanced
   spacing when short, and `safe` falls back to top-aligned + scroll once a real
   conversation grows past the available height. */
.mtc-shell--mira .mtc-conversation {
  display: flex;
  flex-direction: column;
}
/* Keep messages at their natural height — without this, flex children shrink to
   fit and a long conversation gets compressed instead of scrolling. */
.mtc-shell--mira .mtc-conversation > * {
  flex-shrink: 0;
}
/* Auto margins center the content block when it is shorter than the panel, and
   collapse to 0 once a real conversation overflows — so scrolling stays fully
   reachable (unlike justify-content:center, which strands overflow). */
.mtc-shell--mira .mtc-conversation > :first-child { margin-top: auto; }
.mtc-shell--mira .mtc-conversation > :last-child { margin-bottom: auto; }

/* The header status sits beside the home and menu buttons; a long string used to
   run underneath them. Clamp it to its own column instead of letting it overlap. */
.mtc-status {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mtc-title-wrap {
  min-width: 0;
}