/* ===========================================================================
   ADNOC Dist — demo replica
   Modern premium glass: frosted cards over a fixed ADNOC-blue gradient mesh.
   Swap the --adnoc-* tokens if you drop in the official brand sheet.
   ======================================================================== */

:root {
  --adnoc-navy:      #00214F;
  --adnoc-blue:      #00338D;
  --adnoc-blue-mid:  #0B57BE;
  --adnoc-blue-lite: #2E86E8;
  --adnoc-cyan:      #00B5E2;
  --adnoc-gold:      #F2A900;
  --adnoc-green:     #12A150;

  --ink:      #0A1424;
  --ink-2:    #3E4C64;
  --ink-3:    #7C8BA4;
  --hairline: rgba(10, 32, 72, .07);
  --base:     #EEF3FA;

  /* frosted glass over the mesh */
  --glass:      rgba(255, 255, 255, .64);
  --glass-soft: rgba(255, 255, 255, .46);
  --glass-brd:  rgba(255, 255, 255, .78);
  --blur:       blur(30px) saturate(180%);

  /* glass on the dark blue band */
  --glass-dark:     rgba(255, 255, 255, .13);
  --glass-dark-brd: rgba(255, 255, 255, .20);

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 34px;

  --lift:      0 12px 40px rgba(8, 28, 68, .10), 0 2px 8px rgba(8, 28, 68, .04);
  --lift-lg:   0 22px 60px rgba(8, 28, 68, .16), 0 4px 12px rgba(8, 28, 68, .05);

  --tabbar-h: 64px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #070E1A;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; -webkit-tap-highlight-color: transparent; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 100%; height: 100%; display: block; }
ul { list-style: none; }

/* ---------------------------------------------------------------- stage ---
   Phone fills the viewport; desktop gets a bezel so a screen-share still
   reads as a mobile app.
   ------------------------------------------------------------------------ */

.stage { height: 100%; display: grid; place-items: center; }

.device {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--base);
}

@media (min-width: 720px) and (min-height: 760px) {
  .stage { background: radial-gradient(1200px 700px at 50% -10%, #16305c 0%, #070E1A 60%); }
  .device {
    width: 400px;
    height: 844px;
    border-radius: 54px;
    box-shadow: 0 0 0 12px #171F2E, 0 0 0 14px #2A3345, 0 50px 110px rgba(0, 0, 0, .62);
  }
  .device::before {
    content: '';
    position: absolute;
    z-index: 60;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 118px; height: 30px;
    background: #060B14;
    border-radius: 18px;
    pointer-events: none;
  }
  .app, .screen { padding-top: 46px; }
}

.app {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--base);
  isolation: isolate;
}

/* ----------------------------------------------------------------- mesh ---
   Fixed behind the scrolling content. Without this the frosted cards have
   nothing to refract and glassmorphism collapses into flat translucency.
   ------------------------------------------------------------------------ */

.app__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* colour blobs sit ABOVE the band so the top reads as a mesh, not flat blue */
    radial-gradient(44% 26% at 86% 3%,  rgba(0, 214, 240, .60) 0%, rgba(0, 214, 240, 0) 100%),
    radial-gradient(46% 26% at 10% 0%,  rgba(0, 160, 235, .46) 0%, rgba(0, 160, 235, 0) 100%),
    radial-gradient(40% 20% at 62% 22%, rgba(112, 92, 245, .28) 0%, rgba(112, 92, 245, 0) 100%),
    radial-gradient(58% 24% at 95% 44%, rgba(124, 92, 245, .16) 0%, rgba(124, 92, 245, 0) 100%),
    radial-gradient(50% 22% at 2%  56%, rgba(0, 181, 226, .14) 0%, rgba(0, 181, 226, 0) 100%),
    radial-gradient(64% 28% at 60% 92%, rgba(46, 134, 232, .12) 0%, rgba(46, 134, 232, 0) 100%),
    /* Deep ADNOC blue band behind the header. Stops are in px, not %, so the
       fade lands just below the wallet card on every viewport height rather
       than stretching on tall screens. */
    linear-gradient(180deg,
      var(--adnoc-blue) 0px,
      #0A4AAB 190px,
      rgba(24, 104, 210, .46) 300px,
      rgba(130, 180, 236, .14) 380px,
      rgba(238, 243, 250, 0) 460px),
    var(--base);
}

/* ------------------------------------------------------------ scrolling ---
   Native-app feel: scrolling stays, scrollbars never show. Every scroll
   container in the app is listed here -- add new ones to this rule rather
   than repeating the incantation locally.
   (The bot's own chat scrollbar lives in a cross-origin iframe and is out of
   our reach.)
   ------------------------------------------------------------------------ */

.screen,
.rail,
.voice__log,
.voice__chips {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
}

.screen::-webkit-scrollbar,
.rail::-webkit-scrollbar,
.voice__log::-webkit-scrollbar,
.voice__chips::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                /* Safari + Chrome */
}

/* --------------------------------------------------------------- screens --- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 30px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}

.screen.is-active { opacity: 1; visibility: visible; transform: none; }

/* ------------------------------------------------------------------ hero --- */

.hero {
  position: relative;
  padding: 16px 20px 62px;
  color: #fff;
}

/* the mesh supplies the gradient now */
.hero__bg { display: none; }

.hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__mark { font-size: 21px; font-weight: 800; letter-spacing: .15em; }
.brand__sub {
  margin-top: 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}

.hero__actions { display: flex; align-items: center; gap: 10px; }

.iconbtn {
  position: relative;
  width: 40px; height: 40px;
  padding: 10px;
  border-radius: 50%;
  color: #fff;
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-brd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .18s;
}
.iconbtn:active { background: rgba(255, 255, 255, .26); }
.iconbtn .dot {
  position: absolute;
  top: 8px; right: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF5252;
  box-shadow: 0 0 0 2.5px #0A44A0;
}

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--adnoc-blue);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 20, 60, .22);
}

.hero__greet { margin-top: 24px; }
.greet__hi {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .74);
}
.greet__name {
  margin-top: 3px;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.032em;
}

.rewards-strip {
  margin-top: 20px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--r-md);
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-brd);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.rewards-strip__left {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
}
.rewards-strip__left svg { width: 17px; height: 17px; color: #FFC94D; }
.rewards-strip__right {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .74);
}
.rewards-strip__right strong { font-size: 16.5px; font-weight: 750; color: #fff; letter-spacing: -.02em; }
.rewards-strip__right .chev { width: 15px; height: 15px; align-self: center; opacity: .7; }

/* ----------------------------------------------------------------- sheet --- */

.sheet {
  position: relative;
  margin-top: -48px;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ----------------------------------------------------------------- glass --- */

.wallet, .txns, .promo-voice {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--lift);
}

.wallet {
  padding: 18px;
  border-radius: var(--r-lg);
}
.wallet--solo { margin: 18px 18px 0; }

.wallet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wallet__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wallet__amount {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -.01em;
}
.wallet__amount strong {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.035em;
}

.wallet__foot {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallet__hint { font-size: 11px; font-weight: 500; color: var(--ink-3); line-height: 1.4; }

.chip {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.chip--muted { background: rgba(10, 32, 72, .06); color: var(--ink-2); }

/* ------------------------------------------------------------------ btns --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: -.005em;
  transition: transform .12s var(--ease), filter .18s;
}
.btn:active { transform: scale(.955); }
.btn--sm { padding: 11px 17px; font-size: 13px; }
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--adnoc-blue-lite), var(--adnoc-blue));
  box-shadow: 0 8px 20px rgba(0, 51, 141, .30);
}
.btn--primary svg { width: 14px; height: 14px; }
.btn--ghost {
  margin-top: 20px;
  padding: 12px 20px;
  font-size: 13px;
  color: var(--adnoc-blue-mid);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

/* ------------------------------------------------------------------ grid ---
   Borderless: icon plus label, no card. Lets the mesh read through.
   ------------------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: transform .14s var(--ease);
}
.tile:active { transform: scale(.93); }

.tile__ico {
  width: 50px; height: 50px;
  padding: 14px;
  border-radius: 17px;
  color: #fff;
  display: grid;
  place-items: center;
}
.tile__ico--blue  { background: linear-gradient(145deg, #3D8CEE, #0B57BE); box-shadow: 0 10px 22px rgba(11, 87, 190, .30); }
.tile__ico--cyan  { background: linear-gradient(145deg, #3FD3F5, #0098C9); box-shadow: 0 10px 22px rgba(0, 152, 201, .30); }
.tile__ico--gold  { background: linear-gradient(145deg, #FFCB52, #E08A00); box-shadow: 0 10px 22px rgba(224, 138, 0, .28); }
.tile__ico--navy  { background: linear-gradient(145deg, #5A79A8, #1B3862); box-shadow: 0 10px 22px rgba(27, 56, 98, .28); }
.tile__ico--green { background: linear-gradient(145deg, #3ED688, #0B8443); box-shadow: 0 10px 22px rgba(11, 132, 67, .28); }
.tile__ico--slate { background: linear-gradient(145deg, #99A8BF, #52627C); box-shadow: 0 10px 22px rgba(82, 98, 124, .26); }

.tile__label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -.005em;
  color: var(--ink-2);
}

/* ----------------------------------------------------------- voice promo --- */

.promo-voice {
  position: relative;
  padding: 16px 17px;
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  border-radius: var(--r-lg);
  color: var(--ink);
  overflow: hidden;
  transition: transform .14s var(--ease);
}
.promo-voice:active { transform: scale(.982); }

.promo-voice__orb {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #B6F0FF 0%, #35AEF5 40%, #2B5BE8 70%, #7A3BF0 100%);
  box-shadow: 0 0 0 6px rgba(90, 160, 250, .12), 0 6px 18px rgba(43, 91, 232, .34);
  animation: promoPulse 2.9s ease-in-out infinite;
}
@keyframes promoPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 6px  rgba(90,160,250,.12), 0 6px 18px rgba(43,91,232,.34); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 11px rgba(90,160,250,.06), 0 6px 22px rgba(43,91,232,.40); }
}

.promo-voice__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.promo-voice__text strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.017em; }
.promo-voice__text em {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
}
.promo-voice__chev { width: 18px; height: 18px; margin-left: auto; color: var(--ink-3); opacity: .55; flex: 0 0 auto; }

/* -------------------------------------------------------------- sections --- */

.sec { display: flex; flex-direction: column; gap: 13px; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; }
.sec__head h2 { font-size: 17px; font-weight: 750; letter-spacing: -.025em; }
.link { font-size: 12.5px; font-weight: 600; color: var(--adnoc-blue-mid); }

.rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 -18px;
  padding: 2px 18px 6px;
}

.offer {
  flex: 0 0 auto;
  width: 162px;
  min-height: 128px;
  padding: 15px;
  border-radius: var(--r-md);
  color: #fff;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .16);
}
.offer--a { background: linear-gradient(150deg, #2E86E8, #002F7E); box-shadow: 0 14px 32px rgba(0, 47, 126, .30); }
.offer--b { background: linear-gradient(150deg, #22BE8C, #08654F); box-shadow: 0 14px 32px rgba(8, 101, 79, .28); }
.offer--c { background: linear-gradient(150deg, #F09A24, #AE520A); box-shadow: 0 14px 32px rgba(174, 82, 10, .28); }

.offer__tag {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.offer h3 {
  margin-top: auto;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.24;
  letter-spacing: -.022em;
}
.offer p { margin-top: 6px; font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------------ txns --- */

.txns { border-radius: var(--r-lg); overflow: hidden; }

.txn { padding: 15px 16px; display: flex; align-items: center; gap: 13px; }
.txn + .txn { border-top: 1px solid var(--hairline); }

.txn__ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 13px;
}
.txn__ico--fuel { color: #0B57BE; background: rgba(11, 87, 190, .10); }
.txn__ico--top  { color: #0B8443; background: rgba(11, 132, 67, .10); }
.txn__ico--shop { color: #B4590C; background: rgba(180, 89, 12, .10); }

.txn__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.txn__body strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.txn__body em { font-size: 11px; font-style: normal; font-weight: 500; color: var(--ink-3); }

.txn__amt { font-size: 13px; font-weight: 750; white-space: nowrap; letter-spacing: -.02em; }
.txn__amt--pos { color: var(--adnoc-green); }

/* ------------------------------------------------------------ plain tabs --- */

.plain { padding: 26px 18px; }
.plain h1 { font-size: 27px; font-weight: 800; letter-spacing: -.032em; }
.plain__note { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.pointscard {
  margin-top: 18px;
  padding: 26px 20px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(145deg, #2E86E8, var(--adnoc-navy));
  box-shadow: var(--lift-lg);
  border: 1px solid rgba(255, 255, 255, .14);
}
.pointscard p { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .72; }
.pointscard strong { display: block; margin-top: 8px; font-size: 42px; font-weight: 800; letter-spacing: -.04em; }
.pointscard span { font-size: 12.5px; font-weight: 500; opacity: .78; }

.morelist {
  margin-top: 18px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--lift);
}
.morelist li { padding: 16px; font-size: 13.5px; font-weight: 550; letter-spacing: -.01em; }
.morelist li + li { border-top: 1px solid var(--hairline); }

.diag {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: #CBD9F0;
  background: #0C1B33;
}

/* ---------------------------------------------------------------- tabbar --- */

.tabbar {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(34px) saturate(150%);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 -8px 30px rgba(8, 28, 68, .07);
}

.tab {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink-3);
  transition: color .16s;
}
.tab svg { width: 22px; height: 22px; }
.tab span { font-size: 9.5px; font-weight: 600; }
.tab.is-active { color: var(--adnoc-blue-mid); }

/* ------------------------------------------------------------- mic button --- */

.tab-mic-slot {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
}

.tab-mic-label { font-size: 9.5px; font-weight: 700; color: var(--adnoc-blue-mid); }

.micbtn {
  position: absolute;
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  transition: transform .16s var(--ease);
}
.micbtn:active { transform: translateX(-50%) scale(.91); }

/* Between the old glossy orb and a dead-flat disc: one directional gradient
   (not a radial sphere), a soft coloured lift, and a hairline top edge. No
   glow halos, no specular highlight -- those were what read as a 3D button. */
.micbtn__core {
  position: relative;
  z-index: 2;
  width: 56px; height: 56px;
  padding: 13px;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #3D8CEE 0%, #0B57BE 58%, #0A47A0 100%);
  box-shadow:
    0 6px 18px rgba(11, 87, 190, .34),
    0 1px 3px rgba(10, 32, 72, .14),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Thin, closely spaced bars read as a live waveform rather than an icon of a
   microphone, and stay legible at 56px. */
.micbtn__core .wave { width: 30px; height: 30px; }

.wb {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: waveBar 1.5s ease-in-out infinite;
}
.wb2 { animation-delay: .09s; }
.wb3 { animation-delay: .18s; }
.wb4 { animation-delay: .27s; }
.wb5 { animation-delay: .36s; }
.wb6 { animation-delay: .45s; }
.wb7 { animation-delay: .54s; }

@keyframes waveBar {
  0%, 100% { transform: scaleY(.42); opacity: .8; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-voice__orb, .wb { animation: none; }
}

/* ============================== VOICE SHEET ============================== */

.voice { position: absolute; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; }
.voice.is-open { visibility: visible; pointer-events: auto; }

.voice__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 18, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .34s var(--ease);
}
.voice.is-open .voice__scrim { opacity: 1; }

.voice__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
  color: #EAF2FF;
  background:
    radial-gradient(130% 62% at 50% 6%,  rgba(46, 132, 255, .34) 0%, rgba(46, 132, 255, 0) 62%),
    radial-gradient(112% 52% at 12% 96%, rgba(124, 74, 245, .30) 0%, rgba(124, 74, 245, 0) 60%),
    radial-gradient(100% 48% at 92% 82%, rgba(0, 199, 226, .22) 0%, rgba(0, 199, 226, 0) 58%),
    linear-gradient(178deg, #04122B 0%, #030D1B 60%, #020810 100%);
  transform: translateY(100%);
  transition: transform .44s var(--ease);
}
.voice.is-open .voice__panel { transform: none; }

@media (min-width: 720px) and (min-height: 760px) { .voice__panel { padding-top: 40px; } }

.voice__grabber {
  width: 40px; height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  flex: 0 0 auto;
}

.voice__head {
  flex: 0 0 auto;
  padding: 14px 0 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.voice__id { display: flex; flex-direction: column; gap: 5px; }
.voice__title { font-size: 17px; font-weight: 750; letter-spacing: -.025em; }
.voice__by {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(206, 224, 255, .58);
}
.ylw { width: 7px; height: 7px; border-radius: 50%; background: #FFD400; box-shadow: 0 0 8px rgba(255, 212, 0, .8); }

.voice__close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  padding: 9px;
  border-radius: 50%;
  color: #DCE9FF;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.voice__close:active { background: rgba(255, 255, 255, .2); }

.voice__stage {
  flex: 0 0 auto;
  padding: 8px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.orb { width: 184px; height: 184px; display: block; }

.voice__state {
  min-height: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .015em;
  text-align: center;
  color: rgba(200, 220, 255, .76);
  transition: color .2s;
}
.voice__state.is-error { color: #FF9A9A; }

.voice__log {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
  padding: 4px 2px 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  max-width: 84%;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 20px;
  animation: bubbleIn .3s var(--ease) both;
  word-wrap: break-word;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(9px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.bubble--user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, #3D8CEE, #2B4FD8);
  border-bottom-right-radius: 7px;
  box-shadow: 0 6px 18px rgba(43, 79, 216, .3);
}
.bubble--user.is-partial { opacity: .6; }

.bubble--bot {
  align-self: flex-start;
  color: #E9F2FF;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-left-radius: 7px;
}

.bubble--err {
  align-self: flex-start;
  color: #FFD9D9;
  background: rgba(255, 86, 86, .14);
  border: 1px solid rgba(255, 86, 86, .3);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
  white-space: pre-wrap;
}

.typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 2px; }
.typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(220, 235, 255, .75);
  animation: typing 1.25s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .17s; }
.typing i:nth-child(3) { animation-delay: .34s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.voice__chips {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
}
.voice__chips:empty { display: none; }

.qchip {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  color: #D9E8FF;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .16s, transform .12s var(--ease);
}
.qchip:active { transform: scale(.95); background: rgba(255, 255, 255, .18); }

.voice__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding-top: 4px; }

.voice__typed {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.voice__typed input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 13.5px;
  color: #EAF2FF;
}
.voice__typed input::placeholder { color: rgba(190, 212, 245, .46); }
.voice__typed button {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  padding: 9px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.voice__mic {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  padding: 17px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 30% 22%, #B6F0FF 0%, #35AEF5 36%, #2B5BE8 66%, #7A3BF0 100%);
  box-shadow: 0 8px 24px rgba(43, 91, 232, .44);
  transition: transform .14s var(--ease), box-shadow .2s;
}
.voice__mic:active { transform: scale(.93); }
.voice__mic.is-live {
  background: radial-gradient(circle at 30% 22%, #FFC9C9 0%, #FF6B6B 40%, #E01F5A 100%);
  box-shadow: 0 8px 26px rgba(224, 31, 90, .55);
  animation: liveMic 1.5s ease-in-out infinite;
}
@keyframes liveMic {
  0%, 100% { box-shadow: 0 8px 26px rgba(224, 31, 90, .5), 0 0 0 0 rgba(224, 31, 90, .34); }
  50%      { box-shadow: 0 8px 26px rgba(224, 31, 90, .5), 0 0 0 13px rgba(224, 31, 90, 0); }
}
.voice__mic:disabled { opacity: .45; }

/* ---------------------------------------------------- widget (live bot) ---
   BOT_MODE=widget loads the official Yellow.ai widget loader into this page and
   drives it via the global ChatWidget. The widget opens on its own -- full
   screen, no ADNOC wrapper around it.

   The widget appends its DOM to <body> (outside .voice), so these rules are
   body-scoped and need !important: the widget sets inline styles on the same
   elements.
   ------------------------------------------------------------------------ */

/* the ADNOC mic is the only entry point; suppress v3's own launcher and its
   floating input bar (ids from the widget-v3 loader bundle) */
#ym-floating-button,
#ym-floating-input,
#ym-pulse-animation { display: none !important; }

/* Bottom sheet: the bot takes the lower portion and the ADNOC app stays
   visible above it, so the demo reads as an assistant *over* the app. */
:root {
  /* One knob for the sheet height. Both the phone and desktop-bezel rules
     derive from it, so they cannot drift apart. */
  --ym-sheet-frac: 0.92;
  --ym-sheet: calc(var(--ym-sheet-frac) * 100%);
}

.ym-scrim {
  position: absolute;
  inset: 0;
  z-index: 40;            /* over the app (1) and tab bar (30), under the sheet */
  background: rgba(4, 10, 22, .26);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s var(--ease), visibility .34s;
}
body.ym-embedded .ym-scrim { opacity: 1; visibility: visible; }

body.ym-embedded #ym-widget-v3-frame {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: var(--ym-sheet) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  overflow: hidden !important;
  box-shadow: 0 -14px 48px rgba(0, 0, 0, .38) !important;
  /* above the app, scrim and native sheet (50) */
  z-index: 58 !important;
}

/* On desktop the app sits in a 400x844 bezel while the widget is fixed to the
   viewport, so dock it onto the bezel's bottom edge, which is 422px above the
   viewport centre. Only the height depends on the sheet fraction; the bottom
   anchor does not. */
@media (min-width: 720px) and (min-height: 760px) {
  body.ym-embedded #ym-widget-v3-frame {
    left: calc(50% - 200px) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(50vh - 422px) !important;
    width: 400px !important;
    /* derived from --ym-sheet-frac so the height lives in one place */
    height: calc(844px * var(--ym-sheet-frac)) !important;
    border-radius: 26px 26px 40px 40px !important;
  }
}