:root{
  color-scheme: light;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-bottom-effective: env(safe-area-inset-bottom, 0px);
  --browser-bottom-gap: 0px;
  --chat-body-base-pad-top: 18px;
  --chat-body-base-pad-right: 18px;
  --chat-body-base-pad-bottom: 18px;
  --chat-body-base-pad-left: 18px;
  --chat-body-short-top-spacer: 0px;
  --app-top-offset: 0px;
  --composer-height: 0px;
  --composer-overlap-padding: 0px;
  --jump-bottom-offset: 96px;
  --keyboard-offset: 0px;
  --login-overlay-keyboard-inset: 0px;

  --max-width: 860px;
  --avatar-size: 36px;
  --avatar-inner-size: 30px;

  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 18px;
  --space-8: 20px;

  --font-title: 18px;
  --font-body: 15px;
  --font-meta: 13px;
  --font-caption: 12px;
  --font-micro: 11px;

  --bg-top: #eef3f8;
  --bg-bottom: #e7edf5;
  --page-bg: #dde6f0;

  --surface: rgba(255,255,255,.92);
  --surface-strong: #ffffff;
  --surface-muted: #f7f9fc;
  --surface-soft: rgba(255,255,255,.80);

  --text: #111827;
  --text-soft: #667085;
  --text-faint: #8b95a7;

  --border: rgba(15,23,42,.12);
  --border-strong: rgba(15,23,42,.18);

  --accent: #2f6fed;
  --accent-soft: #eaf2ff;
  --accent-border: #bcd0f6;
  --accent-ring: rgba(37,99,235,.10);

  --success: #16a34a;
  --success-soft: rgba(240,253,244,.92);
  --success-border: rgba(22,163,74,.16);

  --warning: #d97706;
  --warning-soft: rgba(255,251,235,.92);
  --warning-border: rgba(217,119,6,.18);

  --danger: #dc2626;
  --danger-soft: rgba(254,242,242,.92);
  --danger-border: rgba(220,38,38,.14);

  --shadow-1: 0 1px 2px rgba(15,23,42,.03), 0 6px 20px rgba(15,23,42,.04);
  --shadow-2: 0 2px 4px rgba(15,23,42,.05), 0 10px 28px rgba(15,23,42,.08);

  --login-radius: 14px;
  --login-shadow: 0 14px 34px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
  --login-btn-bg: #1f2328;
  --login-blue: #0b84d8;
  --login-blue-ring: rgba(11,132,216,.18);
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;

    --bg-top: #101418;
    --bg-bottom: #0b0f13;
    --page-bg: #0b0f13;

    --surface: rgba(10,14,20,.92);
    --surface-strong: #151b24;
    --surface-muted: #111722;
    --surface-soft: rgba(255,255,255,.06);

    --text: rgba(255,255,255,.92);
    --text-soft: rgba(255,255,255,.64);
    --text-faint: rgba(255,255,255,.48);

    --border: rgba(255,255,255,.10);
    --border-strong: rgba(255,255,255,.16);

    --accent-soft: rgba(37,99,235,.18);
    --accent-border: rgba(96,165,250,.34);
    --accent-ring: rgba(37,99,235,.18);

    --success-soft: rgba(22,101,52,.24);
    --success-border: rgba(34,197,94,.18);

    --warning-soft: rgba(146,64,14,.22);
    --warning-border: rgba(245,158,11,.20);

    --danger-soft: rgba(127,29,29,.24);
    --danger-border: rgba(248,113,113,.18);

    --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.28);
    --shadow-2: 0 2px 6px rgba(0,0,0,.40), 0 16px 32px rgba(0,0,0,.34);

    --login-shadow: 0 18px 60px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25);
    --login-blue-ring: rgba(74,168,255,.22);
  }
}

/* =========================
   2) Base
   ========================= */
html, body{
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--page-bg);
  color: var(--text);
}


body.ios-webkit{
  overflow: hidden;
  overscroll-behavior-y: none;
}

body.ios-webkit.ios-input-lock{
  overflow: hidden;
  overscroll-behavior: none;
}

body.ios-webkit .chat-container{
  position: fixed;
  top: var(--app-top-offset, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--page-bg);
}

body.ios-webkit.ios-keyboard-open .chat-container{
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
}

body.ios-webkit.ios-keyboard-open{
  --safe-bottom-effective: 0px;
}

body.ios-webkit:not(.ios-keyboard-open){
  --safe-bottom-effective: var(--safe-bottom);
}

body.ios-webkit #app{
  isolation: isolate;
}

body.ios-webkit .chat-header,
body.ios-webkit .composer{
  position: relative;
}

body.ios-webkit .chat-header{
  z-index: 50;
}

body.ios-webkit .composer{
  z-index: 40;
}

body.ios-webkit .chat-body{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable both-edges;
}

body.ios-webkit .composer{
  will-change: auto;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios-webkit .chat-input{
  overscroll-behavior: contain;
}

body.ios-webkit.ios-keyboard-open .chat-body{
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

body.ios-webkit:not(.ios-keyboard-open) .chat-body{
  -webkit-overflow-scrolling: touch;
}

body.ios-webkit.ios-keyboard-closing .chat-body{
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.ios-webkit.ios-history-focus .chat-body{
  scroll-behavior: auto !important;
}

body.ios-webkit.ios-keyboard-open .composer{
  transform: none !important;
  overflow: hidden;
  overscroll-behavior: none;
}

body.ios-webkit .msg-row,
body.ios-webkit .system-row,
body.ios-webkit .send-status-row{
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

a{
  color: inherit;
}

.ico{
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}
.ico.me-1{
  margin-right: .25rem;
}

body.widget-booting .jump-latest,
body.widget-booting .composer,
body.widget-booting .chat-body > *{
  visibility: hidden;
}
body.widget-booting .chat-body::after{
  content: none;
  display: none;
}
body.widget-ready .chat-body::after{
  display: none;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47,111,237,.18);
}
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (min-width: 900px){
  body:not(.widget-embedded-frame) .chat-container,
  body:not(.widget-embedded-frame) .app-shell{
    margin: 20px auto;
    height: calc(var(--app-height, 100svh) - 40px);
    min-height: calc(var(--app-height, 100svh) - 40px);
    max-height: calc(var(--app-height, 100svh) - 40px);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
    overflow: hidden;
  }
}
@media (pointer: coarse){
  .msg-row,
  .system-row,
  .send-status-row,
  .time-row{
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}

/* =========================
   3) Shell / layout
   ========================= */


#overlayRoot{
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.chat-container,
.app-shell{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--app-height, 100svh);
  min-height: var(--app-height, 100svh);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.chat-body{
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--chat-body-base-pad-top) + var(--chat-body-short-top-spacer)) var(--chat-body-base-pad-right) var(--chat-body-base-pad-bottom) var(--chat-body-base-pad-left);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  overflow-anchor: none;
  touch-action: pan-y;
  scroll-padding-bottom: 18px;
  background:
          radial-gradient(circle at top left, rgba(47,111,237,.05), transparent 26%),
          linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
}

.chat-body::-webkit-scrollbar{
  width: 6px;
}
.chat-body::-webkit-scrollbar-track{
  background: transparent;
}
.chat-body::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.14);
  border-radius: 999px;
}
.chat-body::-webkit-scrollbar-thumb:hover{
  background: rgba(15,23,42,.22);
}

@media (prefers-color-scheme: dark){
  .chat-body::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.16);
  }
  .chat-body::-webkit-scrollbar-thumb:hover{
    background: rgba(255,255,255,.24);
  }
}

/* =========================
   4) Header
   ========================= */
.chat-header{
  grid-row: 1;
  min-width: 0;
  position: relative;
  z-index: 50;
  padding: calc(12px + var(--safe-top)) 18px 12px;
  background:
          linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)),
          radial-gradient(circle at top right, rgba(47,111,237,.10), transparent 42%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

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

.title-wrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-title,
#chatTitle{
  margin: 0;
  font-size: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--text);
}

.chat-subtitle{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-meta);
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-soft);
}

.status-dot{
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08);
}
.dot-connected{ background: var(--success); }
.dot-connecting{ background: var(--warning); }
.dot-offline{ background: #98a2b3; }

.header-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.header-window-actions{
  gap: 8px;
  margin-left: 12px;
}

.window-action-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  color: #667085;
  border-color: rgba(15,23,42,.12);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.window-action-btn .ico{
  width: 16px;
  height: 16px;
  display: block;
}

.window-action-btn#btnMinimizeChat{
  color: #475467;
}

.window-action-btn:hover{
  color: var(--text);
  background: #f8fafc;
}

.window-action-btn#btnCloseChat:hover{
  color: #dc2626;
}

.sound-toggle-btn .ico{
  width: 20px;
  height: 20px;
}

.sound-toggle-btn .sound-off-ico{
  display: none;
}

.sound-toggle-btn.is-muted .sound-on-ico{
  display: none;
}

.sound-toggle-btn.is-muted .sound-off-ico{
  display: block;
}

.sound-toggle-btn.is-muted{
  color: #98a2b3;
}

.sound-toggle-btn:hover{
  color: var(--accent);
}

.icon-btn{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.icon-btn:hover{
  background: var(--surface-strong);
  color: var(--accent);
  border-color: rgba(37,99,235,.18);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.icon-btn:active{
  transform: scale(.98);
}

@media (prefers-color-scheme: dark){
  .icon-btn{
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.76);
  }
  .icon-btn:hover{
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    border-color: var(--border-strong);
  }
}

/* =========================
   5) Time separators
   ========================= */
.time-row{
  position: relative;
  margin: 20px 0 14px;
  text-align: center;
  animation: fadeIn .25s ease;
}

.time-row::before,
.time-row::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(15,23,42,.06);
  transform: translateY(-50%);
}
.time-row::before{ left: 0; }
.time-row::after{ right: 0; }

.time-pill{
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 12px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  color: var(--text-faint);
  font-size: var(--font-micro);
  font-weight: 600;
  letter-spacing: .01em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark){
  .time-row::before,
  .time-row::after{
    background: rgba(255,255,255,.08);
  }
  .time-pill{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
    box-shadow: none;
  }
}

/* =========================
   6) Message rows / avatars
   ========================= */
.msg-row{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
  animation: fadeIn .25s ease;
  content-visibility: auto;
  contain-intrinsic-size: 60px;
}
.msg-row.me{
  justify-content: flex-end;
}
.msg-row:not(.me){
  justify-content: flex-start;
}

.msg-avatar{
  flex: 0 0 auto;
  width: var(--avatar-size);
  height: var(--avatar-size);
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  user-select: none;
}

.msg-avatar svg,
.msg-avatar img{
  display: block;
  width: var(--avatar-inner-size);
  height: var(--avatar-inner-size);
  object-fit: cover;
  border-radius: 50%;
}

.msg-col{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: calc(100% - 46px);
}
.msg-row.me .msg-col{
  align-items: flex-end;
}
.msg-row:not(.me) .msg-col{
  align-items: flex-start;
}

@media (prefers-color-scheme: dark){
  .msg-avatar{
    background: rgba(255,255,255,.06);
  }
}

/* =========================
   7) Bubbles / rich text
   ========================= */
.bubble{
  position: relative;
  display: inline-block;
  min-width: min(132px, 34vw);
  max-width: min(72ch, 80%);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.05);
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.bubble:hover,
.bubble:active{
  box-shadow: var(--shadow-2);
}

.bubble-head{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 11px 16px 6px;
  color: var(--text-soft);
  font-size: var(--font-caption);
  line-height: 1.25;
}

.bn-name{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--text);
}

.bn-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.bn-badge.ai{
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.16);
  color: #7c3aed;
}
.bn-badge.agent{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.16);
  color: #2563eb;
}
.bn-badge.me{
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.08);
  color: var(--text-soft);
}

.bubble-card,
.bubble-text{
  padding: 0 16px 12px;
  background: transparent;
  color: var(--text);
  font-size: var(--font-body);
  line-height: 1.62;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.bubble-text{
  white-space: pre-wrap;
}

.bubble-card strong,
.bubble-text strong{
  font-weight: 700;
}

.bubble a,
.bubble-card a{
  color: var(--accent);
  text-decoration: underline;
  word-break: break-word;
}
.bubble a:hover,
.bubble-card a:hover{
  text-decoration: underline;
}

.bubble-text ul,
.bubble-text ol{
  margin: 10px 0 10px 20px;
  padding: 0;
}
.bubble-text li{
  margin: 6px 0;
}

.bubble.ai-card{
  background: var(--surface-strong);
}

.msg-row:not(.me) .bubble-head,
.msg-row:not(.me) .bubble-text{
  color: var(--text);
}

.msg-row.me .bubble{
  background: linear-gradient(180deg, #eef4ff, #e6efff);
  border-color: var(--accent-border);
  border-bottom-right-radius: 10px;
  box-shadow: 0 1px 2px rgba(37,99,235,.08), 0 10px 24px rgba(37,99,235,.10);
}
.msg-row.me .bubble-head{
  color: #4b5565;
}
.msg-row.me .bn-name,
.msg-row.me .bubble-text{
  color: #0f172a;
}

@media (prefers-color-scheme: dark){
  .bubble,
  .bubble.ai-card{
    background: var(--surface-strong);
  }
  .msg-row.me .bubble{
    background: var(--accent-soft);
    border-color: var(--accent-border);
  }
  .msg-row.me .bubble-head,
  .msg-row:not(.me) .bubble-head{
    color: var(--text-soft);
  }
  .msg-row.me .bn-name,
  .msg-row:not(.me) .bn-name,
  .msg-row.me .bubble-text,
  .msg-row:not(.me) .bubble-text,
  .bubble-card{
    color: var(--text);
  }
}

/* =========================
   8) System + send status
   ========================= */
.system-row{
  display: flex;
  justify-content: center;
  margin: 14px 0;
  animation: fadeIn .25s ease;
  content-visibility: auto;
  contain-intrinsic-size: 60px;
}

.system-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(92%, 640px);
  padding: 10px 14px 10px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.76);
  color: var(--text-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  font-size: var(--font-caption);
  line-height: 1.45;
  font-weight: 500;
  text-align: left;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.system-pill::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #98a2b3;
  box-shadow: 0 0 0 4px rgba(152,162,179,.14);
}
.system-pill .btn{
  margin: 6px 4px 0;
}

.system-pill.is-waiting{
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: #9a6700;
}
.system-pill.is-waiting::before{
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(217,119,6,.14);
}

.system-pill.is-success{
  background: var(--success-soft);
  border-color: var(--success-border);
  color: #166534;
}
.system-pill.is-success::before{
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(22,163,74,.14);
}

.system-pill.is-ended,
.system-pill.is-warning{
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: #991b1b;
}
.system-pill.is-ended::before,
.system-pill.is-warning::before{
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(220,38,38,.12);
}

.send-status-row{
  display: flex;
  justify-content: center;
  margin: -2px 0 10px;
  animation: fadeIn .2s ease;
  content-visibility: auto;
  contain-intrinsic-size: 60px;
}

.send-pill{
  padding: 5px 11px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.80);
  color: var(--text-faint);
  font-size: var(--font-micro);
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
}
.send-pill.failed{
  background: rgba(254,242,242,.96);
  border-color: rgba(220,38,38,.16);
  color: #b42318;
  cursor: pointer;
}

.dots{
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.dot{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  animation: bounce 1.2s infinite ease-in-out;
}
.dot:nth-child(2){ animation-delay: .15s; }
.dot:nth-child(3){ animation-delay: .30s; }

@media (prefers-color-scheme: dark){
  .system-pill{
    background: rgba(255,255,255,.05);
    box-shadow: none;
  }
  .system-pill.is-waiting{ color: #fbbf24; }
  .system-pill.is-success{ color: #86efac; }
  .system-pill.is-ended,
  .system-pill.is-warning{ color: #fca5a5; }

  .send-pill{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
  }
  .send-pill.failed{
    background: rgba(127,29,29,.24);
    border-color: rgba(248,113,113,.18);
    color: #fca5a5;
  }
}

/* =========================
   9) Typing / thinking / handoff
   ========================= */
.typing-bubble{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 10px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-1);
}

.typing-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b5becc;
  animation: bounceBig 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2){ animation-delay: .15s; }
.typing-dot:nth-child(3){ animation-delay: .30s; }

.typing-inline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 18px;
}
.typing-inline .dot{
  width: 6px;
  height: 6px;
  background: rgba(0,0,0,.35);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.ai-thinking .bubble-body{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px 12px;
}
.thinking-dots{
  display: inline-flex;
  gap: 6px;
  padding: 6px 0;
}
.thinking-dots .dot{
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  animation: thinkingBounce 1.2s infinite ease-in-out;
}
.thinking-dots .dot:nth-child(2){ animation-delay: .15s; }
.thinking-dots .dot:nth-child(3){ animation-delay: .30s; }

.handoff-cta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0 14px 12px;
}
.handoff-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.82);
  box-shadow: none;
  font-size: var(--font-caption);
  font-weight: 650;
}
.handoff-btn:hover{
  background: rgba(0,0,0,.06);
  filter: none;
}
.handoff-btn:active{
  transform: scale(.99);
}
.handoff-ico{
  font-size: 14px;
  line-height: 1;
}
.handoff-wait{
  color: rgba(0,0,0,.48);
  font-size: var(--font-caption);
  white-space: nowrap;
}

@media (prefers-color-scheme: dark){
  .typing-inline .dot,
  .thinking-dots .dot{
    background: rgba(255,255,255,.38);
  }
  .handoff-btn{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.88);
  }
  .handoff-btn:hover{
    background: rgba(255,255,255,.12);
  }
  .handoff-wait{
    color: rgba(255,255,255,.55);
  }
}

/* =========================
   10) File / image messages
   ========================= */
.img-wrap{
  --chat-image-max-width: 280px;
  --chat-image-max-height: 360px;
  --chat-image-frame-pad: 0px;
  position: relative;
  display: block;
  width: fit-content;
  max-width: var(--chat-image-max-width);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  background-clip: padding-box;
  box-shadow: none;
  cursor: pointer;
}

.img-wrap img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--chat-image-max-height);
  border-radius: 8px;
  object-fit: contain;
  background: transparent;
}

.img-wrap.fixed-media{
  width: 260px;
  height: 195px;
  max-width: var(--chat-image-max-width);
  max-height: var(--chat-image-max-height);
}
.img-wrap.fixed-media img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}


.bubble.media-bubble{
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  width: fit-content;
  max-width: min(100%, calc(var(--chat-image-max-width, 280px) + 24px));
  min-width: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.msg-row.me .bubble.media-bubble{
  align-items: flex-end;
  align-self: flex-end;
}
.bubble.media-bubble .bubble-head{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 10px 10px 4px;
}
.msg-row.me .bubble.media-bubble .bubble-head{
  align-self: flex-end;
}
.bubble.media-bubble .img-wrap{
  --chat-image-frame-pad: 0px;
  flex: 0 0 auto;
  width: auto;
  max-width: min(var(--chat-image-max-width, 280px), calc(100vw - 124px));
  margin: 0 10px 10px;
  border-radius: 12px;
}
.bubble.media-bubble .img-wrap img{
  border-radius: 10px;
}

.img-wrap.is-uploading,
.img-wrap.is-remote-loading{
  width: 260px;
  height: 195px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  cursor: default;
}

.img-wrap.is-uploading img,
.img-wrap.is-remote-loading img{
  opacity: 0;
}

.img-wrap.is-loading::after,
.img-wrap.is-remote-loading::after{
  content: "";
  position: absolute;
  inset: var(--chat-image-frame-pad);
  border-radius: 8px;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(1.5px);
}
.img-wrap.is-loading::before,
.img-wrap.is-remote-loading::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border: 2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.45);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.img-wrap.is-error::after{
  content: "";
  position: absolute;
  inset: var(--chat-image-frame-pad);
  border-radius: 8px;
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.img-wrap.is-error::before{
  content: "⚠";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  color: #c62828;
  font-size: 18px;
}

.upload-skeleton{
  position: absolute;
  inset: var(--chat-image-frame-pad);
  z-index: 1;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.07) 50%, rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

.upload-overlay{
  position: absolute;
  inset: var(--chat-image-frame-pad);
  z-index: 3;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.upload-ico{
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
}
.upload-ico::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -10px;
  margin-left: -8px;
  border-left: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  border-radius: 1px;
  transform: rotate(-45deg);
}
.upload-ico::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 60%;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-top: 8px solid rgba(0,0,0,.45);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.upload-title{
  color: rgba(0,0,0,.62);
  font-size: var(--font-caption);
  font-weight: 600;
}
.upload-bar-track{
  width: 70%;
  max-width: 240px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.upload-bar{
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.45);
  transition: width .12s ease;
}
.upload-pct{
  color: rgba(0,0,0,.58);
  font-size: var(--font-caption);
}

.file-item{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  cursor: pointer;
  user-select: none;
}

.file-ico{
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 12px;
  background: rgba(37,99,235,.08);
}
.file-ico::before{
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7 3h7l3 3v15a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12.5h7' stroke='%23000000' stroke-opacity='.25' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8.5 15.5h6' stroke='%23000000' stroke-opacity='.25' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.file-meta{
  flex: 1;
  min-width: 0;
}
.file-name{
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
}
.file-size{
  margin: 2px 0 0;
  color: rgba(0,0,0,.55);
  font-size: 12px;
}
.file-dl{
  flex: 0 0 auto;
  color: rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark){
  .img-wrap.is-uploading,
  .img-wrap.is-remote-loading{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
  }
  .upload-overlay{
    background: rgba(18,20,26,.78);
  }
  .upload-ico{
    background: rgba(255,255,255,.08);
  }
  .upload-ico::before{
    border-left-color: rgba(255,255,255,.55);
    border-bottom-color: rgba(255,255,255,.55);
  }
  .upload-ico::after{
    border-top-color: rgba(255,255,255,.55);
  }
  .file-item{
    background: var(--surface-strong);
  }
  .file-ico{
    background: rgba(96,165,250,.12);
    border-color: rgba(96,165,250,.18);
  }
  .file-size,
  .file-dl{
    color: rgba(255,255,255,.70);
  }
}

/* =========================
   11) Composer / input
   ========================= */
.composer{
  grid-row: 3;
  min-width: 0;
  position: relative;
  touch-action: manipulation;
  z-index: 40;
  padding: 12px 14px calc(12px + var(--safe-bottom-effective));
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(15,23,42,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: none !important;
}

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

.chat-header,
.chat-body,
.composer{
  min-width: 0;
}

.chat-body,
.composer{
  contain: none;
}

.attach-btn,
.send-btn{
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  user-select: none;
  touch-action: manipulation;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.attach-btn{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  color: #5b6576;
  cursor: pointer;
}
.attach-btn:hover{
  background: #fff;
  color: var(--accent);
  border-color: rgba(37,99,235,.18);
  transform: translateY(-1px);
}
.attach-btn:active{
  transform: scale(.98);
}
.attach-btn[aria-disabled="true"]{
  opacity: .55;
}

.input-shell{
  display: flex;
  align-items: flex-end;
  flex: 1;
  min-height: 46px;
  max-height: 140px;
  overflow: hidden;
  padding: 10px 15px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 6px rgba(15,23,42,.04);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.input-shell:focus-within{
  border-color: rgba(47,111,237,.46);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47,111,237,.12);
}

textarea.chat-input{
  width: 100%;
  touch-action: manipulation;
  max-height: 100px;
  margin: 2px 0;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}

.input-shell textarea.chat-input:focus,
.input-shell textarea.chat-input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

body.ios-webkit textarea.chat-input{
  transform: translateZ(0);
  -webkit-appearance: none;
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

body.ios-webkit .input-shell{
  min-height: 48px;
}

body.ios-webkit .attach-btn,
body.ios-webkit .send-btn{
  flex-basis: 48px;
  width: 48px;
  height: 48px;
}
body.ios-webkit input,
body.ios-webkit textarea,
body.ios-webkit select{
  font-size: 16px;
}

textarea.chat-input::placeholder{
  color: #98a2b3;
}

.send-btn{
  border: 1px solid rgba(15,23,42,.08);
  background: #1f2937;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15,23,42,.16);
}
.send-btn:hover{
  background: #111827;
  box-shadow: 0 10px 24px rgba(15,23,42,.20);
  transform: translateY(-1px);
}
.send-btn:active{
  transform: scale(.98);
}
.send-btn:disabled{
  cursor: not-allowed;
  background: #d0d5dd;
  border-color: #d0d5dd;
  color: #f8fafc;
  box-shadow: none;
  transform: none;
}

@media (prefers-color-scheme: dark){
  .chat-header{
    background:
            linear-gradient(180deg, rgba(12,16,24,.94), rgba(12,16,24,.88)),
            radial-gradient(circle at top right, rgba(96,165,250,.18), transparent 42%);
    border-bottom-color: rgba(255,255,255,.10);
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.24);
  }
  .chat-title,
  #chatTitle{
    color: rgba(255,255,255,.94);
  }
  .chat-subtitle{
    color: rgba(255,255,255,.68);
  }
  .window-action-btn{
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.72);
    border-color: rgba(255,255,255,.12);
  }
  .window-action-btn#btnMinimizeChat{
    color: rgba(255,255,255,.78);
  }
  .window-action-btn:hover{
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.94);
  }
  .window-action-btn#btnCloseChat:hover{
    background: rgba(220,38,38,.18);
    color: #fecaca;
  }
  .composer{
    background:
            linear-gradient(180deg, rgba(12,16,24,.88), rgba(10,14,20,.96)) !important;
    border-top-color: rgba(255,255,255,.10);
    box-shadow: 0 -10px 24px rgba(0,0,0,.24);
  }
  .attach-btn{
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.76);
  }
  .attach-btn:hover{
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    border-color: var(--border-strong);
  }
  .input-shell{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
  }
  .input-shell:focus-within{
    background: rgba(255,255,255,.07);
    border-color: rgba(96,165,250,.40);
    box-shadow: 0 0 0 3px var(--accent-ring);
  }
  textarea.chat-input{
    color: var(--text);
    caret-color: rgba(255,255,255,.90);
  }
  textarea.chat-input::placeholder{
    color: rgba(255,255,255,.38);
  }
  textarea.chat-input::selection{
    background: rgba(124,58,237,.35);
    color: #fff;
  }
  .send-btn{
    background: #eff6ff;
    color: #111827;
    border-color: rgba(255,255,255,.08);
    box-shadow: none;
  }
  .send-btn:hover{
    background: #ffffff;
  }
  .send-btn:disabled{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.38);
  }
}

/* =========================
   12) Jump-to-latest
   ========================= */
.jump-latest{
  position: absolute;
  right: 16px;
  bottom: var(--jump-bottom-offset);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.jump-latest.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.jump-fab{
  display: grid;
  place-items: center;
  touch-action: manipulation;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.jump-fab:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.jump-fab:active{
  transform: scale(.98);
}

@media (prefers-color-scheme: dark){
  .jump-fab{
    background: rgba(10,14,20,.92);
  }
}

/* =========================
   13) Toast
   ========================= */
.ivy-toast-wrap{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  z-index: 9999;
  width: min(360px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}
.ivy-toast-wrap .toast{
  pointer-events: auto;
}

.ivy-toast{
  width: 100%;
  border: 1px solid rgba(0,0,0,.10);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  color: rgba(15,23,42,.92);
}
.ivy-toast .toast-body{
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.25;
}
.ivy-toast .ivy-toast__ico{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.ivy-toast .ivy-toast__title{
  font-weight: 600;
}
.ivy-toast .ivy-toast__msg{
  margin-top: 2px;
  opacity: .85;
  font-size: 12.5px;
}
.ivy-toast .btn-close{
  filter: none;
  opacity: .55;
}
.ivy-toast .btn-close:hover{
  opacity: .8;
}

.ivy-toast--info{ border-left-color: #0ea5e9; }
.ivy-toast--success{ border-left-color: #16a34a; }
.ivy-toast--warning{ border-left-color: #f59e0b; }
.ivy-toast--danger{ border-left-color: #ef4444; }

@media (prefers-color-scheme: dark){
  .ivy-toast{
    background: rgba(17,24,39,.92);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
    box-shadow: 0 12px 32px rgba(0,0,0,.55);
  }
  .ivy-toast .btn-close{
    filter: invert(1);
    opacity: .65;
  }
}

/* =========================
   14) Route search / trip cards
   ========================= */
.route-search-card{
  padding: 2px 0;
}
.route-search-card .ai-card-title{
  margin-bottom: 10px;
  font-weight: 700;
}
.route-search-card .form-label{
  margin-bottom: 4px;
  color: rgba(0,0,0,.65);
  font-size: 12px;
}
.route-search-card .form-select,
.route-search-card .form-control{
  font-size: 14px;
}
.route-search-card .ts-wrapper,
.route-search-card .ts-control{
  width: 100%;
}

.route-search-card .form-control,
.route-search-card .form-select,
.route-search-card .ts-control,
.route-search-card .ts-control input,
.route-search-card .ts-control > .item,
.route-search-card .ts-control .item,
.route-search-card input[type="date"],
.chat-card.route-search .form-control,
.chat-card.route-search .form-select,
.chat-card.route-search .ts-control,
.chat-card.route-search .ts-control input,
.chat-card.route-search .ts-control > .item,
.chat-card.route-search .ts-control .item,
.chat-card.route-search input[type="date"]{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
}
.route-search-card .ts-wrapper.single .ts-control > .item,
.route-search-card .ts-wrapper.single .ts-control .item,
.chat-card.route-search .ts-wrapper.single .ts-control > .item,
.chat-card.route-search .ts-wrapper.single .ts-control .item{
  opacity: 1;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
.route-search-card .ts-wrapper.has-items .ts-control input,
.chat-card.route-search .ts-wrapper.has-items .ts-control input{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
.route-search-card .form-control::placeholder,
.route-search-card .ts-control input::placeholder,
.chat-card.route-search .form-control::placeholder,
.chat-card.route-search .ts-control input::placeholder{
  color: #9ca3af;
  -webkit-text-fill-color: #9ca3af;
  opacity: 1;
}
.route-search-card .ts-wrapper.ts-selected-placeholder .ts-control input::placeholder,
.route-search-card .ts-control.ts-selected-placeholder input::placeholder,
.route-search-card .ts-control input[data-selected-placeholder="1"]::placeholder,
.chat-card.route-search .ts-wrapper.ts-selected-placeholder .ts-control input::placeholder,
.chat-card.route-search .ts-control.ts-selected-placeholder input::placeholder,
.chat-card.route-search .ts-control input[data-selected-placeholder="1"]::placeholder{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  opacity: 1;
}
.route-search-card .form-control::selection,
.route-search-card .ts-control input::selection,
.route-search-card input[type="date"]::selection,
.chat-card.route-search .form-control::selection,
.chat-card.route-search .ts-control input::selection,
.chat-card.route-search input[type="date"]::selection{
  background: rgba(37,99,235,.18);
  color: #111827;
  -webkit-text-fill-color: #111827;
}
.route-search-card input[type="date"]::-webkit-date-and-time-value,
.chat-card.route-search input[type="date"]::-webkit-date-and-time-value{
  color: #111827;
}

.chat-card.route-search{
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.chat-card.route-search .card-header{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #fff;
  font-size: 16px;
  font-weight: 700;
}
.chat-card.route-search .card-body{
  padding: 14px;
}
.chat-card.route-search label{
  margin-bottom: 6px;
  color: rgba(0,0,0,.65);
  font-size: 12px;
}
.chat-card.route-search select,
.chat-card.route-search input[type="date"]{
  height: 40px;
  border-radius: 10px;
}
.chat-card.route-search .btn{
  height: 42px;
  border-radius: 10px;
  font-weight: 700;
}
.chat-card.route-search .btn:disabled{
  cursor: not-allowed;
  opacity: .55;
}

.im-trip-wrapper{
  font-size: 14px;
  line-height: 1.4;
}
.im-rich-html{
  white-space: normal;
}
.im-trip-header{
  margin-bottom: 12px;
}
.im-trip-title{
  font-size: 16px;
}
.im-trip-date{
  margin-left: 6px;
  color: #999;
}
.im-trip-card{
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  background: #fff;
}
.im-trip-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.im-trip-time{ font-weight: 600; }
.im-trip-price{
  white-space: nowrap;
  font-weight: 800;
}
.im-trip-stations{
  margin-top: 10px;
}
.im-trip-station{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.im-trip-dot{
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
}
.im-dot-depart{ background: #aaa; }
.im-dot-arrive{ background: #111; }
.im-trip-station-text{
  word-break: break-word;
  font-size: 13px;
}
.im-trip-arrow{
  margin: 4px 0 4px 4px;
  color: #bbb;
}
.im-trip-book{
  margin-top: 8px;
}
.im-trip-book a{
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #111;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.im-trip-book a:hover{
  background: #111;
  color: #fff;
}
.im-trip-empty{
  color: #888;
}

@media (prefers-color-scheme: dark){
  .route-search-card .form-label,
  .chat-card.route-search label{
    color: rgba(255,255,255,.65);
  }
  .chat-card.route-search{
    border-color: rgba(255,255,255,.08);
    background: var(--surface-strong);
    box-shadow: none;
  }
  .chat-card.route-search .card-header{
    background: rgba(255,255,255,.03);
    border-bottom-color: rgba(255,255,255,.08);
  }
  .im-trip-card{
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
  }
  .im-trip-date,
  .im-trip-arrow{
    color: rgba(255,255,255,.45);
  }
  .im-dot-depart{ background: rgba(255,255,255,.42); }
  .im-dot-arrive{ background: rgba(255,255,255,.92); }
  .im-trip-book a{
    border-color: rgba(255,255,255,.24);
    color: #fff;
  }
  .im-trip-book a:hover{
    background: rgba(255,255,255,.10);
  }
  .im-trip-empty{
    color: rgba(255,255,255,.55);
  }
}

/* =========================
   15) Viewers / modal media
   ========================= */
.img-viewer-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
}
.img-viewer-overlay img{
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
}
.img-viewer-top{
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  gap: 12px;
}
.img-viewer-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
}

/* WhatsApp-like fullscreen viewer */
.wa-img-modal{
  --viewer-backdrop-opacity: .96;
  overflow: hidden;
  border: 0;
  background: rgba(0,0,0,var(--viewer-backdrop-opacity));
  color: #fff;
}
.wa-icon-btn.wa-img-floating-close{
  position: absolute;
  top: max(12px, calc(env(safe-area-inset-top) + 6px));
  right: max(12px, calc(env(safe-area-inset-right) + 6px));
  z-index: 5;
  display: none;
}
.wa-img-topbar{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  background: rgba(0,0,0,.42);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wa-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.wa-icon-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  color: #fff;
  text-decoration: none;
}
.wa-img-title{
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.wa-img-tools{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 64vw;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wa-img-tools::-webkit-scrollbar{ display: none; }
.wa-img-tools .wa-icon-btn{
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
#imgReset{
  width: auto;
  padding: 0 10px;
  font-size: 12px;
}
.wa-img-filename{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: .95;
  font-size: 14px;
  font-weight: 600;
}
.wa-img-stage{
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  padding: 14px 18px 18px;
}
.wa-img-viewport{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
.wa-img-loader{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,.88);
  opacity: 0;
  background: transparent;
  pointer-events: none;
  transition: opacity .18s ease;
}
.wa-img-loader.is-visible{ opacity: 1; }

.wa-spinner{
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.88);
  border-radius: 50%;
  animation: waSpin .75s linear infinite;
}
.wa-img-status{
  max-width: min(80vw, 360px);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
#imgModalImg{
  max-width: min(92vw, 1200px);
  max-height: calc(100vh - 144px);
  max-height: calc(100dvh - 144px);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  object-fit: contain;
  transform-origin: center center;
  transition: transform 150ms ease-out, opacity 150ms ease-out;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
#imgModalImg.is-zoomed{ cursor: grab; }
#imgModalImg.dragging{
  cursor: grabbing;
  transition: none;
}
.wa-img-meta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}

#imageModal .modal-dialog{ margin: 0; }
#imageModal .modal-content{ border-radius: 0; }

@media (max-width: 767.98px){
  .wa-icon-btn.wa-img-floating-close{
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(18,18,18,.34);
    border-color: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .wa-img-topbar,
  .wa-img-meta{
    display: none;
  }
  .wa-img-stage{
    height: 100vh;
    height: 100dvh;
    padding: 0;
  }
  .wa-img-loader{
    padding: 0 20px;
  }
  #imgModalImg{
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: default;
  }
}

/* =========================
   16) Overlay / login
   ========================= */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  overflow-y: auto;
  padding: 18px 14px calc(18px + var(--safe-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.overlay.show{
  display: block;
}

.overlay-card{
  max-width: 480px;
  margin: 10px auto;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
}
.overlay-card .card-body{
  padding: 18px;
}

#loginOverlay{
  position: absolute;
  inset: var(--login-overlay-offset, calc(56px + var(--safe-top))) 0 0 0;
  z-index: 45;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  pointer-events: auto;
  padding: 0;
}
#loginOverlay .overlay-card{
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#loginOverlay .overlay-card .card-body{
  min-height: 100%;
  overflow: visible;
  padding: 22px 20px calc(22px + var(--safe-bottom) + var(--login-overlay-keyboard-inset, 0px));
}
#loginOverlay .overlay-card .card-title{
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
}
#loginOverlay .login-desc{
  max-width: 72ch;
  color: rgba(0,0,0,.72);
  font-size: 16px;
  line-height: 1.55;
}
#loginOverlay .login-desc-sub{
  max-width: 72ch;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  line-height: 1.45;
}
#loginOverlay .login-help-micro{
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
#loginOverlay .overlay-card .mb-3{
  margin-bottom: 16px !important;
}
#loginOverlay .form-label{
  color: rgba(0,0,0,.78);
  font-size: 12.5px;
  font-weight: 650;
}
#loginOverlay .req-star{
  margin-left: 4px;
  color: rgba(0,0,0,.45);
  font-weight: 700;
}
#loginOverlay .form-control{
  padding: 10px 12px;
  border-radius: var(--login-radius);
}
#loginOverlay .form-control:focus{
  border-color: rgba(11,132,216,.55) !important;
  box-shadow: 0 0 0 3px var(--login-blue-ring) !important;
}
#loginOverlay .btn.btn-dark{
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.16) !important;
  border-radius: var(--login-radius);
  background: var(--login-btn-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.10);
  font-weight: 650;
}
#loginOverlay .btn.btn-dark:hover{
  filter: brightness(1.05);
}
#loginOverlay .btn.btn-dark:active{
  filter: brightness(.98);
}
#loginOverlay .btn.btn-dark:disabled{
  opacity: .75;
}
#loginOverlay .login-legal{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}
#loginOverlay .login-legal-title{
  margin-bottom: 8px;
  color: rgba(0,0,0,.82);
  font-size: 14px;
  font-weight: 700;
}
#loginOverlay .login-legal-summary{
  color: rgba(0,0,0,.72);
  font-size: 13px;
  line-height: 1.45;
}
#loginOverlay .login-legal-list{
  margin: 0;
  padding-left: 18px;
}
#loginOverlay .login-legal-list li{
  margin: 5px 0;
}
#loginOverlay .legal-inline{
  color: rgba(11,132,216,.95);
  text-decoration: none;
}
#loginOverlay .legal-inline:hover{
  text-decoration: underline;
}

@media (prefers-color-scheme: dark){
  .overlay{
    background: rgba(0,0,0,.62);
  }
  .overlay-card{
    background: rgba(20,22,28,.92);
    border-color: rgba(255,255,255,.10);
    box-shadow: var(--login-shadow);
  }
  .overlay-card .form-label,
  .overlay-card .card-title,
  .overlay-card .text-muted{
    color: rgba(255,255,255,.85) !important;
  }
  .overlay-card .form-control{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
  }
  .overlay-card .form-control::placeholder{
    color: rgba(255,255,255,.42);
  }

  #loginOverlay .login-desc{ color: rgba(255,255,255,.78); }
  #loginOverlay .login-desc-sub,
  #loginOverlay .login-help-micro{ color: rgba(255,255,255,.55); }
  #loginOverlay .form-label{ color: rgba(255,255,255,.80); }
  #loginOverlay .req-star{ color: rgba(255,255,255,.45); }
  #loginOverlay .form-control:focus{
    border-color: rgba(74,168,255,.55) !important;
    box-shadow: 0 0 0 3px rgba(74,168,255,.22) !important;
  }
  #loginOverlay .login-legal{
    border-top-color: rgba(255,255,255,.10);
  }
  #loginOverlay .login-legal-title{
    color: rgba(255,255,255,.88);
  }
  #loginOverlay .login-legal-summary{
    color: rgba(255,255,255,.72);
  }
  #loginOverlay .legal-inline{
    color: rgba(120,190,255,.95);
  }
  #loginOverlay .btn.btn-dark{
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 26px rgba(0,0,0,.55);
  }
}

@media (max-width: 480px){
  #loginOverlay .overlay-card{
    max-width: none;
  }
  #loginOverlay .overlay-card .card-body{
    padding: 18px 16px calc(18px + var(--safe-bottom) + var(--login-overlay-keyboard-inset, 0px));
  }
  #loginOverlay .overlay-card .card-title{
    font-size: 18px;
  }
}

/* =========================
   17) Small misc
   ========================= */
#reviewModal .review-star{
  width: 32px;
  height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
#reviewModal .review-star svg{
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
  pointer-events: none;
}
#reviewModal .review-star .star-icon{
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#reviewModal .review-star .star-icon.is-outline{
  fill: #ffffff !important;
  stroke: #93c5fd !important;
}
#reviewModal .review-star .star-icon.is-filled{
  fill: #93c5fd !important;
  stroke: #93c5fd !important;
}
#reviewModal .review-star:hover{
  background: transparent !important;
  border-color: transparent !important;
}
#reviewModal .review-star:focus,
#reviewModal .review-star:focus-visible{
  outline: none;
  box-shadow: none !important;
}
#reviewModal .review-star:active{
  transform: translateY(1px);
}
#reviewModal .review-star.active{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#reviewStars{
  gap: 8px !important;
  flex-wrap: wrap;
}
#reviewStarsText{
  display: inline-flex;
  align-items: center;
  margin-left: 8px !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2563eb;
  font-weight: 600;
  line-height: 1;
  min-width: 0;
  height: auto;
}

/* =========================
   18) Mobile adjustments
   ========================= */
@media (max-width: 768px){
  .chat-header{
    padding: calc(12px + var(--safe-top)) 14px 12px;
  }
  .chat-title{
    font-size: 16px;
  }
  .chat-subtitle{
    font-size: 12px;
  }
  .chat-body{
    --chat-body-base-pad-top: 14px;
    --chat-body-base-pad-right: 12px;
    --chat-body-base-pad-bottom: 12px;
    --chat-body-base-pad-left: 12px;
  }

  .bubble{
    min-width: min(116px, 38vw);
    max-width: 86%;
  }
  .bubble-head,
  .bubble-card,
  .bubble-text{
    padding-left: 14px;
    padding-right: 14px;
  }

  .msg-avatar{
    width: 36px;
    height: 36px;
  }

  .img-wrap:not(.fixed-media) img{
    max-width: 250px;
  }

  .img-wrap.fixed-media{
    max-width: min(250px, 100%);
    max-height: 320px;
  }

  .img-wrap.fixed-media img{
    max-width: none;
    width: 100%;
    height: 100%;
  }

  .bubble.media-bubble{
    max-width: min(100%, calc(min(250px, 100%) + 24px));
  }
  .bubble.media-bubble .img-wrap{
    max-width: min(250px, calc(100vw - 112px));
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
  }
  .bubble.media-bubble .bubble-head{
    padding: 10px 8px 4px;
  }

  .system-pill{
    max-width: 94%;
    padding: 9px 12px 9px 30px;
    font-size: 12px;
  }
  .system-pill::before{
    left: 12px;
  }

  .composer{
    padding-left: 10px;
    padding-right: 10px;
  }
}

.ios-debug-panel{
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(var(--jump-bottom-offset) + 56px);
  z-index: 999;
  pointer-events: none;
  white-space: pre-wrap;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #e2e8f0;
  background: rgba(15,23,42,.84);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   19) Animations
   ========================= */
@keyframes fadeIn{
  from{
    opacity: 0;
    transform: translateY(8px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce{
  0%, 70%, 100%{ transform: translateY(0); }
  35%{ transform: translateY(-2px); }
}

@keyframes bounceBig{
  0%, 70%, 100%{ transform: translateY(0); }
  35%{ transform: translateY(-6px); }
}

@keyframes typingBounce{
  0%, 80%, 100%{
    opacity: .45;
    transform: translateY(0);
  }
  40%{
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes thinkingBounce{
  0%, 80%, 100%{
    opacity: .35;
    transform: translateY(0);
  }
  40%{
    opacity: .8;
    transform: translateY(-4px);
  }
}

@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

@keyframes waSpin{
  to{ transform: rotate(360deg); }
}


/* Existing helper classes used by templates */
.lazy-img{
  display: block;
}
.login-head{
  text-align: center;
}
.login-logo{
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
}
.upload-pct-val{
  font-variant-numeric: tabular-nums;
}


@media (max-width: 767.98px){
  .header-row{
    align-items: flex-start;
  }

  .header-window-actions{
    gap: 6px;
    margin-left: 8px;
  }

  .window-action-btn{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
}

/* =========================
   Review modal fixes (iOS / dark mode)
   ========================= */
#reviewModal .modal-content{
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
}
#reviewModal .modal-header,
#reviewModal .modal-body,
#reviewModal .modal-footer{
  background: #ffffff !important;
  color: #111827 !important;
}
#reviewModal .modal-header{
  border-bottom-color: rgba(15,23,42,.10);
}
#reviewModal .modal-footer{
  border-top-color: rgba(15,23,42,.10);
}
#reviewModal .modal-title,
#reviewModal .small,
#reviewModal .text-muted,
#reviewModal .fw-semibold,
#reviewModal .form-check-label,
#reviewModal .btn,
#reviewModal #reviewStarsText{
  color: #111827 !important;
}
#reviewModal .text-muted{
  color: #6b7280 !important;
}
#reviewModal .btn-close{
  filter: none;
  opacity: .7;
}
#reviewModal .btn-close:hover{
  opacity: 1;
}
#reviewModal .form-check{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 6px;
}
#reviewModal .form-check-input{
  flex: 0 0 auto;
  margin-top: 0;
}
#reviewModal .form-check-label{
  line-height: 1.35;
  user-select: none;
  -webkit-user-select: none;
}
@media (prefers-color-scheme: dark){
  #reviewModal .modal-content,
  #reviewModal .modal-header,
  #reviewModal .modal-body,
  #reviewModal .modal-footer{
    background: #ffffff !important;
    color: #111827 !important;
  }
}


body.widget-embedded-frame{
  overscroll-behavior: none;
}

body.widget-embedded-frame .chat-container,
body.widget-embedded-frame .app-shell{
  border-radius: 0;
}

.chat-container[data-scroll-owner="historyRead"] .chat-body,
body.widget-history-mode .chat-body{
  scroll-behavior: auto !important;
}

.chat-container[data-viewport-freeze="1"] .chat-body,
body.widget-viewport-freeze .chat-body{
  scroll-behavior: auto !important;
  overflow-anchor: none;
}

.chat-body.chat-body-jump-lock,
body.widget-viewport-freeze .chat-body.chat-body-jump-lock{
  scroll-behavior: auto !important;
  overflow-anchor: none;
}

body.ios-webkit .chat-body.chat-body-jump-lock{
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.chat-body.ios-jump-repaint{
  will-change: scroll-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body.ios-webkit .chat-body.chat-body-jump-lock .msg-row,
body.ios-webkit .chat-body.chat-body-jump-lock .system-row,
body.ios-webkit .chat-body.chat-body-jump-lock .send-status-row,
body.ios-webkit .chat-body.chat-body-jump-lock .time-row{
  content-visibility: visible !important;
}

#overlayRoot > *{
  pointer-events: auto;
}

body.widget-overlay-active #overlayRoot:not(:empty){
  pointer-events: auto;
}

/* =========================================================
   Chatwoot-inspired refactor states (v6)
========================================================= */
body[data-lifecycle-phase="background"] .chat-container {
  filter: none;
}

.chat-refactor-repaint {
  transform: translateZ(0);
}

#app[data-shell-ready="1"] {
  opacity: 1;
}

body.widget-ready .chat-container {
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
}

body.widget-overlay-active .chat-body {
  overscroll-behavior: contain;
}

body.widget-backgrounded .composer,
body.widget-viewport-freeze .composer {
  will-change: auto;
}

body.widget-history-mode .jump-latest {
  opacity: 1;
}

body.widget-ready .chat-header {
  backdrop-filter: saturate(140%) blur(12px);
}

body.widget-ready .composer {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.98));
}

body.widget-ready .input-shell {
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

body.widget-ready .msg-row .bubble {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

body.widget-ready .msg-row.me .bubble {
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.msg-row-virtualized {
  content-visibility: auto;
  contain-intrinsic-size: 120px;
}

@media (pointer: coarse) {
  .msg-row-virtualized {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  body.widget-viewport-freeze .chat-body,
  body.widget-overlay-active .chat-body {
    content-visibility: visible;
  }
}

@media (prefers-color-scheme: dark){
  body.widget-ready .chat-header{
    background:
            linear-gradient(180deg, rgba(12,16,24,.96), rgba(12,16,24,.90)),
            radial-gradient(circle at top right, rgba(96,165,250,.16), transparent 42%);
  }
  body.widget-ready .composer{
    background: linear-gradient(180deg, rgba(12,16,24,.95), rgba(10,14,20,.98));
    border-top-color: rgba(255,255,255,.10);
  }
  body.widget-ready .input-shell{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  }
}

/* =========================
   Route search mobile fullscreen picker (v9)
   ========================= */
.route-picker-mobile-field{
  display: none;
}

.route-date-desktop-field{
  display: block;
}
.route-date-desktop-input{
  background: #fff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  cursor: pointer;
}
.route-date-desktop-input[readonly]{
  user-select: none;
}
.route-date-value-input{
  display: none;
}

.route-picker-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #ced4da;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.route-picker-trigger:focus-visible{
  outline: 0;
  border-color: rgba(13,110,253,.55);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.route-picker-trigger.is-disabled,
.route-picker-trigger:disabled{
  background: #f8fafc;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 1;
}
.route-picker-trigger.is-invalid{
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.12);
}
.route-picker-trigger-value{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-picker-trigger-value.is-placeholder{
  color: #9ca3af;
}
.route-picker-trigger-icon{
  flex: 0 0 auto;
  color: rgba(17,24,39,.45);
  font-size: 18px;
  line-height: 1;
}

.route-picker-overlay{
  padding: 0;
  background: rgba(255,255,255,.98);
}
.route-picker-overlay-desktop{
  position: fixed;
  inset: 0;
  z-index: 110;
}
.route-picker-desktop-backdrop{
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
}
.route-picker-popup{
  position: fixed;
  z-index: 2;
  pointer-events: auto;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.16), 0 6px 14px rgba(15,23,42,.10);
  overflow: hidden;
}
.route-picker-popup-calendar .route-picker-calendar-wrap-desktop{
  padding: 14px;
  gap: 12px;
}
.route-picker-popup-calendar .route-picker-calendar-grid{
  gap: 6px;
}
.route-picker-popup-calendar .route-picker-calendar-cell{
  min-height: 40px;
}
.route-picker-page{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.route-picker-topbar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.route-picker-title{
  min-width: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.route-picker-topbar-btn,
.route-picker-topbar-spacer{
  min-width: 64px;
}
.route-picker-topbar-btn{
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.route-picker-topbar-btn,
.route-picker-option,
.route-picker-month-btn,
.route-picker-calendar-day{
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(37,99,235,.12);
}
.route-picker-search-wrap{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: #fff;
}
.route-picker-search-input{
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  background: #f8fafc;
  color: #111827;
  font-size: 16px;
}
.route-picker-search-input:focus{
  outline: 0;
  border-color: rgba(37,99,235,.42);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.12);
  background: #fff;
}
.route-picker-list{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0 calc(16px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.route-picker-option{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: #fff;
  color: #111827;
  font-size: 16px;
  text-align: left;
}
.route-picker-option.is-selected{
  background: rgba(37,99,235,.06);
  color: #0f172a;
  font-weight: 600;
}
.route-picker-option-check{
  color: #2563eb;
  font-weight: 700;
}
.route-picker-empty{
  padding: 24px 16px;
  color: #6b7280;
  font-size: 14px;
}

.route-picker-page-calendar{
  background: #f8fafc;
}
.route-picker-calendar-wrap{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 16px calc(20px + var(--safe-bottom));
  gap: 14px;
}
.route-picker-calendar-header{
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
}
.route-picker-month-btn{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-size: 24px;
  line-height: 1;
}
.route-picker-month-label{
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.route-picker-calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.route-picker-calendar-weekday{
  text-align: center;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.route-picker-calendar-cell{
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: 16px;
  font-weight: 600;
}
.route-picker-calendar-cell.is-empty{
  visibility: hidden;
  pointer-events: none;
}
.route-picker-calendar-day{
  border: 1px solid rgba(15,23,42,.06);
}
.route-picker-calendar-day.is-today{
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.35);
}
.route-picker-calendar-day.is-selected{
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.route-picker-calendar-footer{
  color: #6b7280;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 768px){
  .route-picker-mobile-field{
    display: block;
  }
  .route-date-desktop-field{
    display: none;
  }
  .route-native-control-mobile-hidden{
    display: none !important;
  }
}

@media (prefers-color-scheme: dark){
  .route-picker-trigger{
    background: rgba(17,24,39,.9);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
  }
  .route-picker-trigger.is-disabled,
  .route-picker-trigger:disabled{
    background: rgba(17,24,39,.72);
    color: rgba(255,255,255,.42);
  }
  .route-picker-trigger-value.is-placeholder,
  .route-picker-trigger-icon{
    color: rgba(255,255,255,.42);
  }
  .route-picker-overlay,
  .route-picker-page,
  .route-picker-search-wrap,
  .route-picker-list{
    background: #0f172a;
  }
  .route-picker-topbar{
    background: rgba(15,23,42,.96);
    border-bottom-color: rgba(255,255,255,.08);
  }
  .route-picker-title,
  .route-picker-option,
  .route-picker-month-label,
  .route-picker-month-btn,
  .route-picker-calendar-cell{
    color: rgba(255,255,255,.92);
  }
  .route-picker-search-input,
  .route-picker-option,
  .route-picker-month-btn,
  .route-picker-calendar-day{
    background: rgba(15,23,42,.88);
    border-color: rgba(255,255,255,.10);
  }
  .route-picker-option{
    border-bottom-color: rgba(255,255,255,.08);
  }
  .route-picker-option.is-selected{
    background: rgba(37,99,235,.22);
  }
  .route-picker-empty,
  .route-picker-calendar-weekday,
  .route-picker-calendar-footer{
    color: rgba(255,255,255,.55);
  }
  .route-picker-page-calendar{
    background: #020617;
  }
}


/* Route picker city page stays light on mobile, including iOS dark mode */
.route-picker-page-city,
.route-picker-page-city .route-picker-search-wrap,
.route-picker-page-city .route-picker-list{
  color-scheme: light;
  background: #fff;
}
.route-picker-page-city .route-picker-topbar{
  background: rgba(255,255,255,.96);
  border-bottom-color: rgba(15,23,42,.08);
}
.route-picker-page-city .route-picker-title,
.route-picker-page-city .route-picker-option,
.route-picker-page-city .route-picker-search-input{
  color: #111827;
}
.route-picker-page-city .route-picker-option{
  background: #fff;
  border-bottom-color: rgba(15,23,42,.06);
}
.route-picker-page-city .route-picker-option.is-selected{
  background: rgba(37,99,235,.10);
  color: #111827;
}
.route-picker-page-city .route-picker-search-input{
  background: #fff;
  border-color: rgba(15,23,42,.12);
}
.route-picker-page-city .route-picker-search-input::placeholder{
  color: #9ca3af;
}
.route-picker-page-city .route-picker-topbar-btn{
  color: #2563eb;
}
.route-picker-page-city .route-picker-option:last-child{
  border-bottom: 0;
}
@media (prefers-color-scheme: dark){
  .route-picker-page-city,
  .route-picker-page-city .route-picker-search-wrap,
  .route-picker-page-city .route-picker-list{
    background: #fff;
  }
  .route-picker-page-city .route-picker-topbar{
    background: rgba(255,255,255,.96);
    border-bottom-color: rgba(15,23,42,.08);
  }
  .route-picker-page-city .route-picker-title,
  .route-picker-page-city .route-picker-option,
  .route-picker-page-city .route-picker-search-input{
    color: #111827;
  }
  .route-picker-page-city .route-picker-topbar-btn{
    color: #2563eb;
  }
  .route-picker-page-city .route-picker-option,
  .route-picker-page-city .route-picker-search-input{
    background: #fff;
    border-color: rgba(15,23,42,.12);
  }
  .route-picker-page-city .route-picker-option.is-selected{
    background: rgba(37,99,235,.10);
    color: #111827;
  }
}



/* Embedded iframe surface hardening for iOS keyboard animation */
body.widget-embedded-frame{
  background: var(--page-bg);
}

body.widget-embedded-frame #app,
body.widget-embedded-frame .chat-container,
body.widget-embedded-frame .app-shell{
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body.widget-embedded-frame .chat-header{
  background: var(--surface-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(15,23,42,.05);
}

body.widget-embedded-frame .composer{
  background: var(--surface-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.widget-embedded-frame .chat-body{
  background:
          radial-gradient(circle at top left, rgba(47,111,237,.05), transparent 26%),
          linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0)),
          linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body.widget-embedded-frame .ios-bottom-viewport-cover{
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}