/* ============================================================
   REE Add-Listing · Conversational Chat · v3 (Messaging App)
   Inspired by WhatsApp / Telegram · Refined, tactile, native-feel
   Uses the existing JS class names (no JS refactor needed)
   Palette: Navy + Cream + Soft Blue (NO gold)
   Fonts: Cairo (AR) / Plus Jakarta Sans (EN)
   ============================================================ */

/* ---- Hide site chrome completely ---- */
html.ree-chat-host,
html.ree-chat-host body,
body.has-ree-chat {
  background: #0F1B2C !important;
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.ree-chat-host > body > header,
html.ree-chat-host #mainHeader,
html.ree-chat-host #mobileBottomNav,
html.ree-chat-host .mbn-container,
html.ree-chat-host .mbn-nav,
html.ree-chat-host .mbn-popup-overlay,
html.ree-chat-host .mbn-popup,
html.ree-chat-host > body > footer,
html.ree-chat-host .ft-footer,
html.ree-chat-host .le-fab-wrap,
html.ree-chat-host #reeFloatingCta,
html.ree-chat-host #pvFloatingCta,
html.ree-chat-host #fullScreenMenu,
html.ree-chat-host #searchOverlay,
body.has-ree-chat > header,
body.has-ree-chat #mainHeader,
body.has-ree-chat #mobileBottomNav,
body.has-ree-chat .mbn-container,
body.has-ree-chat .mbn-nav,
body.has-ree-chat .mbn-popup-overlay,
body.has-ree-chat > footer,
body.has-ree-chat .ft-footer,
body.has-ree-chat .le-fab-wrap,
body.has-ree-chat #reeFloatingCta,
body.has-ree-chat #pvFloatingCta,
body.has-ree-chat #fullScreenMenu,
body.has-ree-chat #searchOverlay {
  display: none !important;
  visibility: hidden !important;
}

/* ---- NUCLEAR: hide every body child except our chat + scripts ---- */
html.ree-chat-host body > :not(main.ree-chat-page):not(script):not(style):not(noscript):not(link):not(meta),
body.has-ree-chat > :not(main.ree-chat-page):not(script):not(style):not(noscript):not(link):not(meta) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============ ROOT ============ */
.ree-chat-page {
  /* Override any site layout margin/padding */
  margin: 0 !important;
  padding-top: 0 !important;
  --navy:      #0F1B2C;
  --navy-2:    #152942;
  --navy-3:    #1E3A5F;
  --navy-deep: #08101C;

  --blue:      #2563EB;
  --blue-2:    #3B82F6;
  --blue-soft: #DBEAFE;

  --cream:     #F7F5EF;
  --cream-2:   #EFEBE0;

  --text:      #0F1B2C;
  --text-soft: #475569;
  --text-mute: #94A3B8;

  --surface:   #FFFFFF;
  --chat-bg:   #E6DFCE;
  --chat-bg-2: #DED6C3;
  --border:    #E2E8F0;

  --bubble-bot:  #FFFFFF;
  --bubble-user: #DCF8C6;

  --success:#16A34A;
  --warning:#D97706;
  --danger: #DC2626;

  --r-md: 14px;
  --r-lg: 20px;
  --r-bubble: 16px;

  --shadow-sm: 0 1px 2px rgba(15,27,44,.08);
  --shadow-md: 0 4px 16px rgba(15,27,44,.10);
  --shadow-lg: 0 24px 60px rgba(15,27,44,.28);

  position: fixed;
  inset: 0;
  z-index: 99999;
  font-family: "Cairo", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--navy-deep);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ree-chat-page[data-locale="en"] {
  font-family: "Plus Jakarta Sans", "Cairo", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.ree-chat-page *,
.ree-chat-page *::before,
.ree-chat-page *::after { box-sizing: border-box; }

/* ============ APP SHELL ============ */
.ree-chat-app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  position: relative;
  overflow: hidden;
}

/* ============ HEADER ============ */
.ree-chat-head {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-inline-start: calc(14px + env(safe-area-inset-left));
  padding-inline-end: calc(14px + env(safe-area-inset-right));
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 12px rgba(0,0,0,.22);
  position: relative;
  z-index: 5;
}

.ree-back-btn,
.ree-restart-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  font-size: 20px;
}
.ree-back-btn:hover,
.ree-restart-btn:hover { background: rgba(255,255,255,.14); }
.ree-back-btn:active,
.ree-restart-btn:active { background: rgba(255,255,255,.24); }

.ree-brand {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ree-brand-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,.4), 0 0 0 2px rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.ree-brand-avatar img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.ree-brand-avatar::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #22C55E;
  border: 2px solid var(--navy);
  border-radius: 50%;
  bottom: 0;
  inset-inline-end: 0;
}
.ree-brand-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ree-brand-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ree-brand-info .ree-status {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ============ PROGRESS ============ */
.ree-progress-wrap {
  flex: 0 0 auto;
  height: 3px;
  background: rgba(0,0,0,.08);
  position: relative;
  z-index: 4;
  overflow: hidden;
}
.ree-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-2), var(--blue));
  width: 0%;
  transition: width .35s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 0 10px rgba(59,130,246,.5);
}

/* ============ MESSAGES AREA ============ */
.ree-msgs {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 12px 12px;
  padding-inline-start: calc(12px + env(safe-area-inset-left));
  padding-inline-end: calc(12px + env(safe-area-inset-right));
  background:
    radial-gradient(ellipse 600px 300px at 50% 0%, rgba(59,130,246,.06), transparent 70%),
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(37,99,235,.04), transparent 70%),
    linear-gradient(180deg, #F7F8FC 0%, #F2F4F9 100%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  scroll-behavior: smooth;
}
.ree-msgs::-webkit-scrollbar { width: 4px; }
.ree-msgs::-webkit-scrollbar-track { background: transparent; }
.ree-msgs::-webkit-scrollbar-thumb { background: rgba(15,27,44,.18); border-radius: 2px; }

/* ============ BOT MESSAGE ROW (iMessage-style refined) ============ */
.ree-bot {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  align-self: flex-start;
  max-width: 86%;
  margin: 1px 0;
  animation: reeBubbleIn .26s cubic-bezier(.2,.8,.3,1);
}
/* Only show avatar on FIRST bot message of a sequence */
.ree-bot-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15,27,44,.12), 0 0 0 1.5px rgba(37,99,235,.15);
  margin-bottom: 2px;
}
.ree-bot-avatar img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.ree-bot + .ree-bot .ree-bot-avatar { visibility: hidden; }
.ree-bot + .ree-bot { margin-top: -3px; }

.ree-bot-bubble {
  background: #fff;
  color: var(--text);
  padding: 10px 14px 11px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(15,27,44,.06), 0 0 0 1px rgba(15,27,44,.035);
  font-size: 14.5px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  position: relative;
}
[dir="rtl"] .ree-bot-bubble {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 6px;
}
.ree-bot-bubble strong { font-weight: 700; color: var(--navy); }
.ree-bot-bubble .ree-hint {
  display: block;
  margin-top: 8px;
  padding: 7px 10px;
  background: var(--blue-soft);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--blue);
  font-style: normal;
  font-weight: 500;
}

/* ============ USER MESSAGE ROW ============ */
.ree-user {
  display: flex;
  align-self: flex-end;
  max-width: 82%;
  margin: 1px 0;
  animation: reeBubbleIn .26s cubic-bezier(.2,.8,.3,1);
}
.ree-user + .ree-user { margin-top: -3px; }

.ree-user-bubble {
  background: linear-gradient(135deg, var(--blue-2) 0%, var(--blue) 100%);
  color: #fff;
  padding: 10px 14px 11px;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
  font-size: 14.5px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  font-weight: 500;
}
[dir="rtl"] .ree-user-bubble {
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 6px;
}

@keyframes reeBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ TYPING ============ */
.ree-typing {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  align-self: flex-start;
  margin: 1px 0;
  animation: reeBubbleIn .26s ease;
}
.ree-typing-dots {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(15,27,44,.06), 0 0 0 1px rgba(15,27,44,.035);
  align-items: center;
}
[dir="rtl"] .ree-typing-dots {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 6px;
}
.ree-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-mute);
  animation: reeTypeDot 1.3s ease-in-out infinite;
}
.ree-typing-dots span:nth-child(2) { animation-delay: .15s; }
.ree-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes reeTypeDot {
  0%,60%,100% { transform: translateY(0); opacity: .4; }
  30%         { transform: translateY(-5px); opacity: 1; }
}

/* ============ INPUT ZONE ============ */
.ree-input-zone {
  flex: 0 0 auto;
  background: var(--cream);
  border-top: 1px solid rgba(15,27,44,.06);
  padding: 8px 10px;
  padding-inline-start: calc(10px + env(safe-area-inset-left));
  padding-inline-end: calc(10px + env(safe-area-inset-right));
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  position: relative;
  z-index: 5;
  box-shadow: 0 -2px 14px rgba(15,27,44,.08);
  max-height: 50vh;
  overflow-y: auto;
}

.ree-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px;
}
.ree-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 11px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  min-height: 44px;
}
.ree-input-row input::placeholder { color: var(--text-mute); }
.ree-input-row input:focus {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}

.ree-send-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(37,99,235,.4);
  transition: transform .15s, box-shadow .2s, opacity .2s;
  font-size: 18px;
}
.ree-send-btn:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(37,99,235,.5); }
.ree-send-btn:active { transform: scale(.95); }
.ree-send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
[dir="rtl"] .ree-send-btn { transform: scaleX(-1); }
[dir="rtl"] .ree-send-btn:hover { transform: scaleX(-1) scale(1.06); }
[dir="rtl"] .ree-send-btn:active { transform: scaleX(-1) scale(.95); }

.ree-inline-note {
  margin: 6px 4px 0;
  font-size: 12.5px;
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ree-inline-note.is-success { color: var(--success); }

.ree-warn {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #78350F;
  margin: 6px 4px;
}

/* ============ CHIPS (yes/no, unit type, finishing, etc.) ============ */
.ree-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ree-chip {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s, box-shadow .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  white-space: nowrap;
}
.ree-chip:hover { border-color: var(--blue-2); background: var(--blue-soft); }
.ree-chip:active { transform: scale(.96); }
.ree-chip.is-primary {
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.ree-chip-icon { font-size: 17px; }

/* Smart-suggestion chip shown on the final title step */
.ree-chip.ree-chip-suggest {
  width: 100%;
  justify-content: flex-start;
  text-align: start;
  padding: 12px 16px;
  background: linear-gradient(135deg, #EEF4FF, #F8FAFF);
  border: 1.5px dashed var(--blue);
  color: var(--blue);
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
.ree-chip.ree-chip-suggest:hover {
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  border-style: solid;
}

/* ============ AUTOCOMPLETE SUGGESTIONS ============ */
.ree-suggestion {
  position: absolute;
  inset-inline-start: 10px;
  inset-inline-end: 10px;
  bottom: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  padding: 4px;
}
.ree-suggestion-item,
.ree-suggestion > div {
  padding: 11px 14px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--text);
  transition: background .12s;
}
.ree-suggestion-item:hover,
.ree-suggestion > div:hover,
.ree-suggestion-item.is-active { background: var(--blue-soft); }

/* ============ STEPPERS ============ */
.ree-steppers {
  display: flex;
  gap: 10px;
  padding: 4px;
  flex-wrap: wrap;
}
.ree-stepper {
  flex: 1 1 0;
  min-width: 140px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.ree-stepper-label {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 600;
}
.ree-stepper-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ree-stepper-ctrl button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--cream-2);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ree-stepper-ctrl button:hover { background: var(--blue-soft); }
.ree-stepper-ctrl button:active { transform: scale(.92); }
.ree-stepper-ctrl button:disabled { opacity: .35; cursor: not-allowed; }
.ree-stepper-val {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
}

/* ============ PHOTOS ============ */
.ree-photo-widget {
  border: 2px dashed var(--blue-2);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  background: linear-gradient(180deg, #F0F7FF 0%, #E0EFFF 100%);
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .15s;
  margin-bottom: 10px;
}
.ree-photo-widget:hover { background: linear-gradient(180deg, #E0EFFF 0%, #CFE4FF 100%); border-color: var(--blue); }
.ree-photo-widget:active { transform: scale(.99); }
.ree-photo-widget.is-drop-active { background: #BFDCFF; border-color: var(--blue); border-style: solid; }
.ree-photo-widget .ree-photo-icon { font-size: 32px; line-height: 1; margin-bottom: 6px; }
.ree-photo-widget .ree-photo-text { font-size: 14px; color: var(--navy); font-weight: 700; }
.ree-photo-widget .ree-photo-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 3px; font-weight: 500; }
.ree-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.ree-photo-item {
  aspect-ratio: 1;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  position: relative;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ree-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ree-photo-item.is-upload {
  border: 2px dashed var(--blue-2);
  background: var(--blue-soft);
  color: var(--blue);
  cursor: pointer;
  flex-direction: column;
  gap: 3px;
  transition: background .15s;
}
.ree-photo-item.is-upload:hover { background: #C7DFFF; }
.ree-photo-icon { font-size: 26px; line-height: 1; }
.ree-photo-text { font-size: 11px; font-weight: 700; }
.ree-photo-sub { font-size: 10px; color: var(--text-soft); }
.ree-photo-progress {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
}
.ree-photo-cover-label {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: .3px;
}
.ree-photo-remove {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15,27,44,.75);
  color: #fff;
  border: 0;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.ree-photo-remove:hover { background: var(--danger); }
.ree-photo-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-soft);
  padding: 0 6px 6px;
  font-weight: 600;
}
.ree-photo-count.is-ok { color: var(--success); }
.ree-photo-count.is-warning { color: var(--warning); }

/* ============ BUTTONS ============ */
.ree-btn-primary,
.ree-btn-outline {
  padding: 12px 22px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .15s;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
}
.ree-btn-primary {
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.4);
}
.ree-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,.5); }
.ree-btn-primary:active { transform: translateY(0); }
.ree-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.ree-btn-outline {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.ree-btn-outline:hover { background: var(--cream); border-color: var(--navy); }

.ree-submit-row {
  display: flex;
  gap: 8px;
  padding: 4px;
}
.ree-submit-row .ree-btn-primary,
.ree-submit-row .ree-btn-outline { flex: 1 1 0; }

/* ============ SUMMARY ============ */
.ree-summary {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin: 4px 0 8px;
  box-shadow: var(--shadow-sm);
  border-inline-start: 3px solid var(--blue);
}
.ree-summary h4 {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy);
}
.ree-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
}
.ree-summary-row:last-child { border-bottom: 0; }
.ree-summary-row .ree-k { color: var(--text-soft); font-weight: 600; }
.ree-summary-row .ree-v { color: var(--text); font-weight: 700; text-align: end; max-width: 60%; word-break: break-word; }

.ree-price-big {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
  border-radius: 12px;
  margin: 4px 0;
}

/* ============ MODAL ============ */
.ree-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,16,28,.75);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200000;
  padding: 20px;
  animation: reeFadeIn .25s ease;
}
.ree-modal.is-open { display: flex; }
@keyframes reeFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ree-modal-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px 26px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  animation: reeModalPop .32s cubic-bezier(.2,.8,.3,1);
  box-shadow: var(--shadow-lg);
}
@keyframes reeModalPop {
  from { transform: translateY(20px) scale(.94); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.ree-modal-icon { font-size: 48px; margin-bottom: 12px; }
.ree-modal-card h3 { margin: 0 0 8px; font-size: 19px; color: var(--navy); font-weight: 800; }
.ree-modal-card p { margin: 0 0 22px; color: var(--text-soft); font-size: 14.5px; line-height: 1.5; }
.ree-modal-actions { display: flex; gap: 10px; }
.ree-modal-actions .ree-btn-primary,
.ree-modal-actions .ree-btn-outline { flex: 1 1 0; }

/* ============ KEYBOARD OPEN STATE ============ */
.ree-chat-app.is-keyboard-open .ree-msgs { scroll-behavior: auto; }

/* ============ TABLET ============ */
@media (min-width: 768px) {
  .ree-chat-page {
    background:
      radial-gradient(ellipse at 30% 0%, rgba(59,130,246,.12) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 100%, rgba(247,245,239,.05) 0%, transparent 55%),
      linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%);
    padding: 24px;
    align-items: center;
  }
  .ree-chat-app {
    width: 100%;
    max-width: 480px;
    height: 100%;
    max-height: 820px;
    border-radius: 22px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
  }
}

/* ============ DESKTOP ============ */
@media (min-width: 1024px) {
  .ree-chat-page { padding: 36px; }
  .ree-chat-app { max-width: 460px; max-height: 760px; border-radius: 28px; }
}
@media (min-width: 1400px) {
  .ree-chat-app { max-width: 480px; max-height: 820px; }
}

/* ============ LANDSCAPE SHORT ============ */
@media (max-height: 500px) and (orientation: landscape) {
  .ree-chat-head { min-height: 52px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .ree-brand-avatar { width: 36px; height: 36px; font-size: 13px; }
  .ree-brand-info h3 { font-size: 14px; }
  .ree-brand-info .ree-status { font-size: 11px; }
  .ree-msgs { padding: 10px 12px; }
  .ree-input-zone { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}

/* ============ FOLDABLE / VERY NARROW ============ */
@media (max-width: 340px) {
  .ree-bot, .ree-user { max-width: 92%; }
  .ree-bot-bubble, .ree-user-bubble { font-size: 13.5px; }
  .ree-chip { padding: 9px 12px; font-size: 13px; }
  .ree-input-row input { padding: 10px 14px; font-size: 14.5px; }
}

/* ============ A11Y ============ */
@media (prefers-reduced-motion: reduce) {
  .ree-bot, .ree-user, .ree-typing,
  .ree-modal, .ree-modal-card,
  .ree-typing-dots span,
  .ree-progress { animation: none !important; transition: none !important; }
}