/**
 * Embed mode for main web UI (?embed=1). Ported from web-embed; uses #main-app.
 * Fullscreen by default; ?popup=1 = left-docked panel.
 */

/* Hide full-app chrome that the standalone UI shows */
body.embed-mode .app-header,
body.embed-mode .site-footer,
body.embed-mode .suggestions,
body.embed-mode #languageSelectorContainer,
body.embed-mode .scroll-to-bottom,
body.embed-mode .support-escalation-banner {
  display: none !important;
}

/* Login overlay is hidden by default in embed but JS can override via inline style
   to show it as a full-iframe modal (CSAT-style) when the user clicks Sign In.
   z-index must exceed .app-shell (10000) and .embed-reopen-btn (10001) so the
   overlay renders on top of the chat when showEmbedLoginOverlay() is called. */
body.embed-mode #login-overlay {
  display: none;
  z-index: 10100;
}

body.embed-mode #main-app .chat-container {
  /* fill main without header */
  flex: 1;
  min-height: 0;
}

/* Guest demo banner — embed: icon in collapsed rail, compact card when expanded */
body.embed-mode #main-app .test-user-banner--embed {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0.25rem 0 0.375rem;
  padding: 0 0.375rem;
  box-sizing: border-box;
  overflow: hidden;
}

body.embed-mode #main-app .test-user-banner--embed .test-user-banner__body {
  flex: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.125rem 0.375rem 0.5rem;
  font-size: var(--embed-nav-font-size);
  gap: 0.375rem;
  align-items: center;
  text-align: center;
}

body.embed-mode #main-app .test-user-banner--embed .test-user-banner__text {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: var(--embed-nav-font-size);
  line-height: 1.35;
  text-align: center;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body.embed-mode #main-app .test-user-banner--embed .test-user-banner__btn {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  font-size: var(--embed-sm-font-size);
  padding: 0.375rem 0.5rem;
  line-height: 1.25;
}

body.embed-mode #main-app .test-user-banner--embed .test-user-banner__close {
  top: 0.125rem;
  right: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.9375rem;
}

/* Collapsed rail: quota on icon tooltip only — never show the text card */
body.embed-mode #main-app.sidebar-collapsed .test-user-banner--embed .test-user-banner__body {
  display: none !important;
}

body.embed-mode #main-app.sidebar-collapsed .test-user-banner--embed .test-user-banner__icon-btn {
  display: flex !important;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  margin: 0 auto;
  padding: 0.4375rem;
}

body.embed-mode #main-app:not(.sidebar-collapsed) .test-user-banner--embed .test-user-banner__icon-btn {
  display: none !important;
}

body.embed-mode #main-app:not(.sidebar-collapsed) .test-user-banner--embed .test-user-banner__body {
  display: flex;
}
/**
 * Embed UI — fullscreen by default; ?popup=1 = left-docked panel.
 * Theme tokens aligned with mtsbu-theme (tailwind.config.js).
 */

/* mtsbu-theme: primary #398450, mint #EBF3ED, black #212121, gradient #44F6CE→#F8F38A */
body.embed-mode {
  --primary-50: #ebf3ed;
  /* Type scale; msg kept larger; other UI −1px */
  --embed-nav-font-size: 0.8rem; /* 14px */
  --embed-msg-font-size: 1rem; /* 16px — message bubbles */
  --embed-input-font-size: 0.875rem; /* 14px */
  --embed-meta-font-size: 0.6875rem; /* 11px */
  --embed-sm-font-size: 0.75rem; /* 12px */
  --primary-100: #f0f7f2;
  --primary-400: #0bab64;
  --primary-500: #398450;
  --primary-600: #046511;
  --success-500: #398450;
  --ink: #212121;
  --shades-50: #f9fafb;
  --shades-150: #e7eef3;
  --shades-200: #c3c3c3;
  --shades-250: #bec1c4;
  --shades-300: #999c9e;
  --shades-400: #6d727c;
  --shades-600: #212121;
  --default-gradient: linear-gradient(90deg, #44f6ce 0%, #f8f38a 100%);
}

body.embed-mode {
  height: 100%;
  overflow: hidden;
  background: transparent;
}

/* Inside theme iframe: fill the host panel completely */
html.embed-mode-html:not(.embed-standalone-preview) body.embed-mode,
html.embed-mode-html:not(.embed-standalone-preview) #main-app.app-shell {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

/* Standalone browser preview: mimic theme host — fullscreen overlay. */
html.embed-mode-html.embed-standalone-preview {
  background: var(--shades-50);
}

html.embed-mode-html.embed-standalone-preview body.embed-mode {
  min-height: 100dvh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background: transparent;
  position: relative;
}

html.embed-mode-html.embed-standalone-preview #main-app.app-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  z-index: 10000;
  transition: transform 0.25s ease;
}

html.embed-mode-html.embed-standalone-preview body.embed-panel-closed #main-app.app-shell {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Reopen FAB: popup layout only (hidden in fullscreen). */
.embed-reopen-btn {
  display: none;
}

html.embed-mode-html.embed-layout-popup.embed-standalone-preview .embed-reopen-btn {
  display: none;
  position: fixed;
  left: 1rem;
  right: auto;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 10001;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 0.35rem 1rem rgba(31, 32, 33, 0.2);
  align-items: center;
  justify-content: center;
}

html.embed-mode-html.embed-layout-popup.embed-standalone-preview body.embed-panel-closed .embed-reopen-btn {
  display: inline-flex;
}

html.embed-mode-html.embed-layout-popup.embed-standalone-preview .embed-reopen-btn:hover {
  background-image: var(--default-gradient);
  color: var(--ink);
}

/* Popup layout (?popup=1): left-docked panel — grows with iframe, no hard 32.5rem cap */
html.embed-mode-html.embed-layout-popup {
  --embed-panel-width: clamp(22.5rem, 42vw, 100%);
}

html.embed-mode-html.embed-layout-popup.embed-standalone-preview {
  background:
    linear-gradient(180deg, rgba(33, 33, 33, 0.04), rgba(33, 33, 33, 0.04)),
    var(--shades-50);
}

html.embed-mode-html.embed-layout-popup.embed-standalone-preview #main-app.app-shell {
  inset: auto;
  top: 0;
  left: 0;
  width: var(--embed-panel-width);
  max-width: 100vw;
  height: 100dvh;
  border-right: 1px solid var(--shades-200);
  transition: transform 0.25s ease, width 0.2s ease;
}

html.embed-mode-html.embed-layout-popup:not(.embed-standalone-preview) #main-app.app-shell {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--embed-panel-width);
  max-width: 100%;
  height: 100%;
  min-height: 100%;
}

body.embed-mode #main-app.app-shell {
  --sidebar-width: 20rem;
  --sidebar-rail-width: 2.75rem;
  /* Keep account footer border aligned with input bar border */
  --embed-bottom-bar-padding-y: 0.5rem;
  --embed-bottom-bar-content: 2.25rem;
  --embed-bottom-bar-height: calc(
    var(--embed-bottom-bar-padding-y) + var(--embed-bottom-bar-content) + var(--embed-bottom-bar-padding-y)
  );
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
  grid-template-rows: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--white);
}

body.embed-mode #main-app.app-shell:not(.sidebar-collapsed) {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

body.embed-mode #main-app .app-sidebar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  background: #F9FAFB;
  border-right: 1px solid var(--shades-150);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 5;
  position: relative;
  font-family: var(--font-family);
  font-size: var(--embed-nav-font-size);
  line-height: 1.43;
}

body.embed-mode #main-app .app-sidebar:has(.user-section-dropdown:not([hidden])) {
  overflow: visible;
}

body.embed-mode #main-app .app-main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--white);
  z-index: 1;
  position: relative;
  overflow: hidden;
}

body.embed-mode #main-app .sidebar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.embed-mode #main-app .sidebar-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.375rem 0.25rem;
  flex-shrink: 0;
}

body.embed-mode #main-app .sidebar-toggle {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--shades-400);
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.embed-mode #main-app .sidebar-toggle:hover {
  color: var(--shades-600);
  background: color-mix(in srgb, var(--primary-500) 10%, transparent);
}

body.embed-mode #main-app .sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem 0.375rem;
  flex-shrink: 0;
}

body.embed-mode #main-app .sidebar-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--shades-600);
  font-size: var(--embed-nav-font-size);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
}

body.embed-mode #main-app .sidebar-action-btn:hover {
  background: color-mix(in srgb, var(--primary-500) 10%, transparent);
}

body.embed-mode #main-app .sidebar-action-btn .hicon svg {
  width: 1rem;
  height: 1rem;
}

body.embed-mode #main-app .sidebar-new-chat .hicon {
  color: var(--primary-600);
}

body.embed-mode #main-app .app-sidebar .sidebar-action-chats {
  display: none;
}

/* Collapsed icon rail */
body.embed-mode #main-app.sidebar-collapsed .sidebar-top {
  justify-content: center;
}

body.embed-mode #main-app.sidebar-collapsed .sidebar-actions {
  align-items: center;
  padding: 0.25rem;
}

body.embed-mode #main-app.sidebar-collapsed .sidebar-action-btn {
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  padding: 0.4375rem;
  gap: 0;
}

body.embed-mode #main-app.sidebar-collapsed .sidebar-action-chats {
  display: flex;
}

body.embed-mode #main-app.sidebar-collapsed .sidebar-label,
body.embed-mode #main-app.sidebar-collapsed .sidebar-search,
body.embed-mode #main-app.sidebar-collapsed .conversation-list {
  display: none;
}

body.embed-mode #main-app.sidebar-collapsed .sidebar-footer {
  align-items: center;
  padding: var(--embed-bottom-bar-padding-y) 0.25rem;
}

body.embed-mode #main-app.sidebar-collapsed .sidebar-footer-row {
  justify-content: center;
  width: 100%;
}

body.embed-mode #main-app.sidebar-collapsed .user-section-label {
  display: none;
}

body.embed-mode #main-app.sidebar-collapsed .user-section-trigger {
  width: 2rem;
  height: var(--embed-bottom-bar-content);
  min-height: var(--embed-bottom-bar-content);
  justify-content: center;
  padding: 0;
  margin-inline: auto;
}

/* Expanded sidebar */
body.embed-mode #main-app:not(.sidebar-collapsed) .sidebar-top {
  justify-content: flex-start;
  padding-left: 0.5rem;
}

body.embed-mode #main-app:not(.sidebar-collapsed) .sidebar-actions {
  padding: 0.25rem 0.5rem;
}

body.embed-mode #main-app:not(.sidebar-collapsed) .sidebar-action-btn {
  padding: 0.4375rem 0.5rem;
}

body.embed-mode #main-app .sidebar-search {
  padding: 0.125rem 0 0;
}

body.embed-mode #main-app .sidebar-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--shades-150);
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--shades-600);
  font-size: var(--embed-nav-font-size);
  line-height: 1.35;
  font-family: var(--font-family);
}

body.embed-mode #main-app .sidebar-search-input:focus {
  outline: none;
  border-color: var(--primary-500);
}

body.embed-mode #main-app .conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem;
  min-height: 0;
}

body.embed-mode #main-app .conversation-item {
  width: 100%;
  padding: 0.375rem 0.5rem;
  margin-bottom: 0.25rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.125rem;
  font-family: var(--font-family);
}

body.embed-mode #main-app .conversation-item:hover,
body.embed-mode #main-app .conversation-item.active {
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
}

body.embed-mode #main-app .conversation-item-content {
  flex: 1;
  min-width: 0;
}

body.embed-mode #main-app .conversation-item-name {
  display: block;
  font-size: var(--embed-nav-font-size);
  font-weight: 500;
  line-height: 1.35;
  color: var(--shades-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.embed-mode #main-app .conversation-item-date {
  font-size: var(--embed-sm-font-size);
  line-height: 1.25;
}

body.embed-mode #main-app .conversation-pin-btn,
body.embed-mode #main-app .conversation-delete-btn {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

body.embed-mode #main-app .conversation-empty {
  padding: 0.5rem;
  font-size: var(--embed-nav-font-size);
  line-height: 1.35;
  color: var(--shades-400);
  text-align: center;
}

body.embed-mode #main-app .sidebar-footer {
  flex-shrink: 0;
  margin-top: auto;
  box-sizing: border-box;
  min-height: var(--embed-bottom-bar-height);
  height: auto;
  padding: var(--embed-bottom-bar-padding-y) 0.625rem;
  border-top: 1px solid var(--shades-150);
  background: #F9FAFB;
  position: relative;
  z-index: 20;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

body.embed-mode #main-app .sidebar-footer .sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--embed-bottom-bar-content);
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  color: var(--shades-400);
  font-size: var(--embed-nav-font-size);
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
}

body.embed-mode #main-app .sidebar-footer .sidebar-link:hover {
  background: color-mix(in srgb, var(--primary-500) 10%, transparent);
  color: var(--shades-600);
}

body.embed-mode #main-app .sidebar-footer .sidebar-link .hicon svg {
  width: 1rem;
  height: 1rem;
}

body.embed-mode #main-app.sidebar-collapsed .sidebar-footer .sidebar-link {
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  margin: 0 auto;
  padding: 0.4375rem;
}

body.embed-mode #main-app .sidebar-footer-row {
  display: flex;
  width: 100%;
  height: var(--embed-bottom-bar-content);
  align-items: center;
  overflow: visible;
}

body.embed-mode #main-app .user-section-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 21;
}

body.embed-mode #main-app .user-section-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  min-height: var(--embed-bottom-bar-content);
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  color: var(--shades-400);
  font-size: var(--embed-nav-font-size);
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
  padding: 0 0.5rem;
  font-family: var(--font-family);
  box-sizing: border-box;
}

body.embed-mode #main-app .user-section-trigger:hover,
body.embed-mode #main-app .user-section-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--primary-500) 10%, transparent);
  color: var(--shades-600);
}

body.embed-mode #main-app .user-section-trigger .hicon svg {
  width: 1rem;
  height: 1rem;
}

body.embed-mode #main-app .user-section-dropdown {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.35rem);
  min-width: 9rem;
  max-width: min(14rem, calc(100% - 0.75rem));
  padding: 0.5rem 0.625rem;
  background: var(--white);
  border: 1px solid var(--shades-150);
  border-radius: 0.5rem;
  z-index: 100;
  box-sizing: border-box;
}

/* Collapsed rail: keep popover above the account icon (not beside / over the input) */
body.embed-mode #main-app.sidebar-collapsed .user-section-dropdown {
  left: 0.25rem;
  right: auto;
  bottom: calc(100% + 0.35rem);
  width: max-content;
  min-width: 8.5rem;
}

body.embed-mode #main-app .user-section-dropdown[hidden] {
  display: none !important;
}

body.embed-mode #main-app .embed-account-dropdown-name {
  display: block;
  font-size: var(--embed-nav-font-size);
  font-weight: 400;
  line-height: 1.43;
  color: var(--shades-600);
}

body.embed-mode #main-app .embed-account-dropdown-hint {
  display: block;
  font-size: var(--embed-nav-font-size);
  line-height: 1.25rem;
  color: var(--shades-400);
  margin-top: 0.125rem;
}

/* Floating controls (mobile menu / popup close) — no top title panel */
body.embed-mode #main-app .header-menu-btn {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 6;
}

body.embed-mode #main-app .embed-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 6;
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 0.4375rem;
  background: transparent;
  color: var(--shades-400);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

html.embed-mode-html.embed-layout-popup #main-app .embed-close-btn {
  display: inline-flex;
}

html.embed-mode-html.embed-layout-popup #main-app .embed-close-btn:hover {
  background: color-mix(in srgb, var(--shades-600) 8%, transparent);
  color: var(--shades-600);
}

html.embed-mode-html.embed-layout-popup #main-app .embed-close-btn .hicon svg {
  width: 1rem;
  height: 1rem;
}

body.embed-mode #main-app .embed-chat-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.embed-mode #main-app .embed-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.625rem;
  min-height: 0;
  background: var(--white);
  /* Override styles.css centering column so bubbles use full panel width */
  align-items: stretch;
}

body.embed-mode #main-app .embed-chat-messages > * {
  max-width: none;
  width: 100%;
}

body.embed-mode #main-app .embed-welcome {
  font-size: var(--embed-meta-font-size);
  color: var(--shades-400);
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Same top row as menu (left) / close (popup right) — text on the right edge */
body.embed-mode #main-app .welcome-message {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  font-size: var(--embed-nav-font-size);
  text-align: right;
  margin-bottom: 0.75rem;
  min-height: 2rem;
}

/* Leave room for floating × so label sits opposite menu, beside close */
html.embed-mode-html.embed-layout-popup #main-app .welcome-message {
  padding-right: 2rem;
}

body.embed-mode #main-app .embed-static-message,
body.embed-mode #main-app .embed-dynamic-message,
body.embed-mode #main-app .message {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.embed-mode #main-app .embed-dynamic-message.user-message,
body.embed-mode #main-app .message.user-message {
  flex-direction: row-reverse;
}

body.embed-mode #main-app .bot-avatar,
body.embed-mode #main-app .user-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.embed-mode #main-app .bot-avatar {
  background: var(--primary-50);
  color: var(--primary-600);
}

body.embed-mode #main-app .user-avatar {
  background: var(--shades-150);
  color: var(--shades-400);
}

body.embed-mode #main-app .bot-avatar .hicon svg,
body.embed-mode #main-app .user-avatar .hicon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Bot stack uses most of the row, with a small gutter so bubbles aren't full-bleed */
body.embed-mode #main-app .bot-message .message-stack {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 88%;
  width: auto;
}

body.embed-mode #main-app .message-content {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--shades-50);
  border: 1px solid var(--shades-150);
}

/* User bubbles stay content-sized, capped to most of the row */
body.embed-mode #main-app .user-message .message-content {
  width: fit-content;
  max-width: min(88%, 100%);
  margin-left: auto;
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

body.embed-mode #main-app .message-text {
  font-size: var(--embed-msg-font-size);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: keep-all;
}

body.embed-mode #main-app .message-bottom-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

body.embed-mode #main-app .message-bottom-actions-btns {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Hide confidence / intent / category labels in embed */
body.embed-mode #main-app .message-metadata {
  display: none !important;
}

/* Keep “Ready to work” on the static greeting only */
body.embed-mode #main-app [data-static-greeting="true"] .message-bottom-actions {
  justify-content: space-between;
}

body.embed-mode #main-app [data-static-greeting="true"] .message-metadata {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  font-size: var(--embed-meta-font-size);
  color: var(--shades-400);
  opacity: 0.75;
  flex: 1;
  min-width: 0;
}

body.embed-mode #main-app [data-static-greeting="true"] .message-metadata .hicon svg {
  width: 0.875rem;
  height: 0.875rem;
}

body.embed-mode #main-app .source-urls-summary {
  font-size: var(--embed-sm-font-size);
}

body.embed-mode #main-app .source-urls-item {
  font-size: var(--embed-sm-font-size);
}

body.embed-mode #main-app .message-copy-btn,
body.embed-mode #main-app .message-rate-btn,
body.embed-mode #main-app .message-redo-btn {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--shades-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.embed-mode #main-app .message-copy-btn .hicon svg,
body.embed-mode #main-app .message-rate-btn .hicon svg,
body.embed-mode #main-app .message-redo-btn .hicon svg {
  width: 1rem;
  height: 1rem;
}

body.embed-mode #main-app .message-copy-btn:hover,
body.embed-mode #main-app .message-rate-btn:hover,
body.embed-mode #main-app .message-redo-btn:hover {
  color: var(--primary-500);
  background: transparent;
}

body.embed-mode #main-app .message-rate-btn.message-rate-btn--done {
  color: var(--shades-400);
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* CSAT modal — same overlay pattern as main web UI */
body.embed-mode .csat-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(31, 32, 33, 0.5);
  backdrop-filter: blur(0.25rem);
  z-index: 10050;
  overflow: hidden;
  box-sizing: border-box;
}

body.embed-mode .csat-modal-overlay.csat-modal-visible {
  display: flex;
}

body.embed-mode .csat-modal {
  position: relative;
  max-width: min(37.5rem, 100%);
  width: 100%;
  overflow: hidden;
}

body.embed-mode .csat-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.4375rem;
  line-height: 1;
  color: var(--primary-500);
  opacity: 0.7;
  cursor: pointer;
  padding: 0.25rem;
  z-index: 1;
  border-radius: 0.25rem;
  transition: opacity 0.2s ease, background 0.2s ease;
}

body.embed-mode .csat-modal-close:hover {
  opacity: 1;
  color: var(--primary-400);
}

body.embed-mode .csat-modal-body {
  padding: 2.5rem 2rem 2rem;
}

body.embed-mode .csat-modal .csat-card,
body.embed-mode .csat-modal-form.csat-card {
  margin: 0;
  padding: 0;
  max-width: none;
  box-shadow: none;
}

body.embed-mode .csat-modal-form {
  margin: 0;
  box-shadow: none;
}

body.embed-mode .csat-title-stars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

body.embed-mode .csat-card .csat-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--shades-600);
  margin: 0;
}

body.embed-mode .csat-stars {
  display: flex;
  gap: 0.375rem;
  margin: 0;
}

body.embed-mode .csat-star {
  font-size: 1.4375rem;
  color: var(--shades-400);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

body.embed-mode .csat-star:hover,
body.embed-mode .csat-star.active,
body.embed-mode .csat-star.selected {
  color: var(--primary-400);
}

body.embed-mode .csat-star:hover,
body.embed-mode .csat-star.active {
  transform: scale(1.1);
}

body.embed-mode .csat-feedback-container {
  margin-bottom: 0.75rem;
}

body.embed-mode .csat-feedback textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 5rem;
  padding: 0.875rem 1.1875rem;
  font-size: 1.0625rem;
  resize: vertical;
  font-family: inherit;
}

body.embed-mode .csat-submit-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

body.embed-mode .csat-submit {
  min-width: 7.5rem;
  white-space: nowrap;
}

body.embed-mode .csat-status {
  font-size: var(--embed-sm-font-size);
  color: var(--shades-600);
}

body.embed-mode .csat-modal-error {
  padding: 1.5rem;
  text-align: center;
  color: var(--shades-600);
}

body.embed-mode #main-app .user-message .message-copy-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  padding-top: 0.375rem;
}

body.embed-mode #main-app .user-message .message-copy-btn {
  color: rgba(255, 255, 255, 0.75);
}

body.embed-mode #main-app .user-message .message-copy-btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

body.embed-mode #main-app .copy-toast {
  position: absolute;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%);
  max-width: calc(100% - 1.5rem);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: var(--embed-sm-font-size);
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
  box-sizing: border-box;
}

body.embed-mode #main-app .copy-toast.is-visible {
  opacity: 1;
}

body.embed-mode #main-app .embed-input-container {
  flex-shrink: 0;
  box-sizing: border-box;
  height: var(--embed-bottom-bar-height);
  min-height: var(--embed-bottom-bar-height);
  padding: var(--embed-bottom-bar-padding-y) 0.625rem;
  border-top: none;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--white);
}

body.embed-mode #main-app .embed-input-container:has(.embed-input:not(:placeholder-shown)),
body.embed-mode #main-app .embed-input-container:has(.embed-input:focus) {
  height: auto;
  min-height: var(--embed-bottom-bar-height);
  overflow: visible;
}

body.embed-mode #main-app .embed-input-container:has(.embed-input:not(:placeholder-shown)) .input-wrapper,
body.embed-mode #main-app .embed-input-container:has(.embed-input:focus) .input-wrapper {
  height: auto;
  min-height: var(--embed-bottom-bar-content);
}

body.embed-mode #main-app .embed-input-container .input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  height: var(--embed-bottom-bar-content);
  min-height: var(--embed-bottom-bar-content);
  padding: 0 0.25rem 0 0.75rem;
  border: 0.0625rem solid var(--shades-150);
  border-radius: var(--default-border-radius);
  background: var(--white);
  box-shadow: none;
  transition: border-color 0.35s ease-in-out;
}

body.embed-mode #main-app .embed-input-container .input-wrapper:focus-within {
  border-color: var(--shades-200);
}

body.embed-mode #main-app .embed-input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  resize: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0 0.25rem;
  font-family: inherit;
  font-size: var(--embed-input-font-size);
  line-height: var(--embed-bottom-bar-content);
  height: var(--embed-bottom-bar-content);
  min-height: var(--embed-bottom-bar-content);
  max-height: 5rem;
  outline: none;
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: keep-all;
  text-align: center;
  box-sizing: border-box;
}

body.embed-mode #main-app .embed-input:not(:placeholder-shown),
body.embed-mode #main-app .embed-input:focus {
  height: auto;
  min-height: var(--embed-bottom-bar-content);
  line-height: 1.4;
  padding: 0.375rem 0.25rem;
  text-align: left;
}

body.embed-mode #main-app .embed-input::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: var(--shades-300);
}

body.embed-mode #main-app .embed-input:focus {
  outline: none;
}

/* Send: same height as account sector content row */
body.embed-mode #main-app .embed-send-btn.btn-filled.btn-round {
  width: var(--embed-bottom-bar-content);
  height: var(--embed-bottom-bar-content);
  min-width: var(--embed-bottom-bar-content);
  min-height: var(--embed-bottom-bar-content);
}

body.embed-mode #main-app .embed-typing-dots {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
}

body.embed-mode #main-app .embed-typing-dots span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--shades-300);
  animation: embed-bounce 1.2s infinite ease-in-out;
}

body.embed-mode #main-app .embed-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
body.embed-mode #main-app .embed-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes embed-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-2px); opacity: 1; }
}

/* Header menu / sidebar close — desktop defaults */
body.embed-mode #main-app .header-menu-btn,
body.embed-mode #main-app .sidebar-close {
  display: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--shades-400);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.embed-mode #main-app .header-menu-btn:hover,
body.embed-mode #main-app .sidebar-close:hover {
  color: var(--shades-600);
  background: color-mix(in srgb, var(--primary-500) 10%, transparent);
}

body.embed-mode #main-app .header-menu-btn .hicon svg,
body.embed-mode #main-app .sidebar-close .hicon svg {
  width: 1.125rem;
  height: 1.125rem;
}

body.embed-mode #main-app .sidebar-backdrop {
  display: none;
}

/* ============================================================
   Adaptive breakpoints
   ============================================================ */

@media (max-width: 64em) {
  body.embed-mode #main-app.app-shell {
    --sidebar-width: 19rem;
  }

  html.embed-mode-html.embed-layout-popup {
    --embed-panel-width: clamp(22.5rem, 48vw, 100%);
  }
}

/* Mobile — full-width panel, off-canvas history drawer */
@media (max-width: 48em) {
  body.embed-mode {
    --embed-nav-font-size: 0.75rem; /* 13px */
    --embed-msg-font-size: 0.9375rem; /* 15px — message bubbles */
    --embed-input-font-size: 1rem; /* 16px — avoids iOS zoom on focus */
    --embed-meta-font-size: 0.6875rem; /* 11px */
    --embed-sm-font-size: 0.75rem; /* 12px */
  }

  body.embed-mode #main-app.app-shell {
    --sidebar-width: min(85vw, 18rem);
    --sidebar-rail-width: 0px;
    grid-template-columns: minmax(0, 1fr);
  }

  body.embed-mode #main-app.app-shell:not(.sidebar-collapsed) {
    grid-template-columns: minmax(0, 1fr);
  }

  html.embed-mode-html.embed-layout-popup.embed-standalone-preview .embed-reopen-btn {
    width: 3.25rem;
    height: 3.25rem;
  }

  html.embed-mode-html.embed-layout-popup {
    --embed-panel-width: 100%;
  }

  html.embed-mode-html.embed-layout-popup.embed-standalone-preview #main-app.app-shell {
    width: 100vw;
    max-width: 100vw;
    border-right: none;
  }

  html.embed-mode-html.embed-layout-popup.embed-standalone-preview .embed-reopen-btn {
    left: auto;
    right: 1rem;
  }

  body.embed-mode #main-app .app-main {
    grid-column: 1;
  }

  body.embed-mode #main-app .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(33, 33, 33, 0.4);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.embed-mode #main-app.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.embed-mode #main-app .sidebar-backdrop[hidden] {
    display: none;
  }

  body.embed-mode #main-app .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 1100;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    border-right: 1px solid var(--shades-150);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.embed-mode #main-app.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  /* Mobile drawer always shows labels / list (ignore collapsed rail) */
  body.embed-mode #main-app .sidebar-label,
  body.embed-mode #main-app.sidebar-collapsed .sidebar-label {
    display: inline;
  }

  body.embed-mode #main-app .sidebar-search:not([hidden]),
  body.embed-mode #main-app.sidebar-collapsed .sidebar-search:not([hidden]) {
    display: block;
  }

  body.embed-mode #main-app .conversation-list,
  body.embed-mode #main-app.sidebar-collapsed .conversation-list {
    display: block;
  }

  body.embed-mode #main-app .user-section-label,
  body.embed-mode #main-app.sidebar-collapsed .user-section-label {
    display: block;
  }

  body.embed-mode #main-app .sidebar-actions,
  body.embed-mode #main-app.sidebar-collapsed .sidebar-actions {
    align-items: stretch;
    padding: 0.25rem 0.5rem;
  }

  body.embed-mode #main-app .sidebar-action-btn,
  body.embed-mode #main-app.sidebar-collapsed .sidebar-action-btn {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.625rem 0.75rem;
    gap: 0.5rem;
  }

  body.embed-mode #main-app .sidebar-action-chats,
  body.embed-mode #main-app.sidebar-collapsed .sidebar-action-chats {
    display: none;
  }

  body.embed-mode #main-app .sidebar-footer,
  body.embed-mode #main-app.sidebar-collapsed .sidebar-footer {
    align-items: center;
    padding: var(--embed-bottom-bar-padding-y) 0.75rem;
  }

  body.embed-mode #main-app .sidebar-footer-row,
  body.embed-mode #main-app.sidebar-collapsed .sidebar-footer-row {
    justify-content: flex-start;
  }

  body.embed-mode #main-app .user-section-trigger,
  body.embed-mode #main-app.sidebar-collapsed .user-section-trigger {
    width: 100%;
    height: 100%;
    min-height: var(--embed-bottom-bar-content);
    justify-content: flex-start;
    padding: 0 0.75rem;
    margin-inline: 0;
  }

  body.embed-mode #main-app .user-section-dropdown,
  body.embed-mode #main-app.sidebar-collapsed .user-section-dropdown {
    left: 0;
    bottom: calc(100% + 0.35rem);
  }

  body.embed-mode #main-app .sidebar-toggle {
    display: none;
  }

  body.embed-mode #main-app .sidebar-close,
  body.embed-mode #main-app .header-menu-btn {
    display: inline-flex;
  }

  body.embed-mode #main-app .sidebar-top {
    justify-content: space-between;
    padding: 0.625rem 0.75rem 0.375rem;
  }

  body.embed-mode #main-app .embed-chat-messages {
    padding: 0.75rem;
  }

  body.embed-mode #main-app .user-message .message-content {
    max-width: min(90%, 100%);
  }

  body.embed-mode #main-app.app-shell {
    --embed-bottom-bar-padding-y: 0.625rem;
    --embed-bottom-bar-content: 2.5rem;
  }

  body.embed-mode #main-app .sidebar-footer {
    padding: var(--embed-bottom-bar-padding-y) 0.75rem;
    padding-bottom: max(var(--embed-bottom-bar-padding-y), env(safe-area-inset-bottom));
    min-height: calc(
      var(--embed-bottom-bar-padding-y) + var(--embed-bottom-bar-content) +
      max(var(--embed-bottom-bar-padding-y), env(safe-area-inset-bottom))
    );
    height: auto;
  }

  body.embed-mode #main-app .embed-input-container {
    padding: var(--embed-bottom-bar-padding-y) 0.75rem;
    padding-bottom: max(var(--embed-bottom-bar-padding-y), env(safe-area-inset-bottom));
    min-height: calc(
      var(--embed-bottom-bar-padding-y) + var(--embed-bottom-bar-content) +
      max(var(--embed-bottom-bar-padding-y), env(safe-area-inset-bottom))
    );
    height: calc(
      var(--embed-bottom-bar-padding-y) + var(--embed-bottom-bar-content) +
      max(var(--embed-bottom-bar-padding-y), env(safe-area-inset-bottom))
    );
  }

  body.embed-mode #main-app .embed-input-container .input-wrapper {
    height: var(--embed-bottom-bar-content);
    min-height: var(--embed-bottom-bar-content);
  }

  body.embed-mode #main-app .embed-input {
    font-size: var(--embed-input-font-size);
    height: var(--embed-bottom-bar-content);
    min-height: var(--embed-bottom-bar-content);
    line-height: var(--embed-bottom-bar-content);
  }

  body.embed-mode #main-app .embed-send-btn.btn-filled.btn-round {
    width: var(--embed-bottom-bar-content);
    height: var(--embed-bottom-bar-content);
    min-width: var(--embed-bottom-bar-content);
    min-height: var(--embed-bottom-bar-content);
  }

  html.embed-mode-html.embed-layout-popup #main-app .embed-close-btn,
  body.embed-mode #main-app .header-menu-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.embed-mode #main-app .app-sidebar,
  body.embed-mode #main-app .sidebar-backdrop,
  html.embed-mode-html.embed-standalone-preview #main-app.app-shell {
    transition: none;
  }
}