/**
 * ACS Chat Room Styles
 * Styles for the Limited MCP ACS Chat Room interface
 * Extracted from limited-mcp-chat-room.html for better maintainability
 * Updated to use Fluent 2 Design System variables from styles.css
 */

/* Note: Base styles (*, body font, margin) are handled by styles.css */

/**
 * Full-viewport shell layout for the Teams app page only (`teamsapp.html` uses `body.teams-app-body`).
 * Must NOT apply to arbitrary host pages: the Chrome extension injects this file globally, and an
 * unscoped `body { overflow: hidden }` would lock scrolling on every site.
 */
body.teams-app-body {
  /* Layout specific to ACS Chat Room — validation #5336719 items #14, #19.
   * `100dvh` (with `100vh` fallback) ensures the bottom composer is never
   * pushed below the iOS Safari URL bar or the Teams meeting side panel
   * footer. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent body scroll */
  /* Reserve room for the iOS home indicator / Android nav bar so the
   * typing field stays tappable. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

/* ==========================================================================
 * GLYDE scope boundary (CSS isolation)
 * --------------------------------------------------------------------------
 * Every rule below is wrapped in `@scope (.glyde-app, .glyde-scope,
 * [id^='glyde-'])` so that the generic selectors used by the chat UI
 * (`.message`, `.content`, `.input-area`, `.loading`, `.title-text`, etc.) only
 * match elements inside a GLYDE root and never leak onto, or inherit from, an
 * arbitrary host page (the Chrome extension injects this file globally). A GLYDE
 * root is any of: `.glyde-app` (owned page <body>), `.glyde-scope` (explicitly
 * tagged side-panel/popout <body> + body-appended raw-data modal), or
 * `[id^='glyde-']` (injected `#glyde-chat-modal` etc.). `[class^='glyde-']` is
 * intentionally excluded because the launcher adds `glyde-has-links-launcher` to
 * the HOST <body>. Host-body launcher offsets (`body.glyde-has-links-launcher …`)
 * must remain global and are therefore kept OUTSIDE this scope block.
 * ========================================================================== */
@scope (.glyde-app, .glyde-scope, [id^='glyde-']) {
  /* Message Container - Teams Channel Style */
  .message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  padding: 4px 0;
  animation: slideIn 0.2s ease-out;
}

.message.no-animate {
  animation: none;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Message Avatar - Teams Style with Depth */
.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--colorNeutralBackground2, #f3f2f1);
  color: var(--colorNeutralForeground1, #323130);
  border: 1px solid var(--colorNeutralStroke1, #dcdcdc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.message-avatar:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.message-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.message-avatar-initials,
.message-avatar-emoji {
  font-size: 16px;
}

/* Message Content Container */
.message-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 70%;
  position: relative;
}

/* Bot replies render inline (no bubble), so the 70% bubble cap serves no
 * purpose on them — and it starves server-built result tables (~30% dead
 * space to the right of every table). Let bot content use the row width. */
.message.bot:not(.welcome-message) .message-content-wrapper {
  max-width: none;
}

/* Ensure message container allows overflow for icons */
.message {
  position: relative;
  overflow: visible;
}

/* Sender Name - Teams Style */
.message .sender {
  font-weight: 600;
  font-size: 13px;
  color: var(--colorNeutralForeground1, #323130);
  margin-bottom: 2px;
  line-height: 1.2;
}

.message.bot .sender {
  color: var(--color-brand-primary, #6264a7);
}

/* Message timestamp - subtle and compact */
.message-time,
.fluent-messages .message-time {
  font-size: 11px;
  color: var(--colorNeutralForeground3, #8a8886);
  margin-top: 2px;
  line-height: 1.2;
}

/* Message Bubble - Teams Channel Style Refined with Depth */
.message .content {
  background: var(--colorNeutralBackground1, white);
  padding: 10px 14px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
  font-size: 14px;
  color: var(--colorNeutralForeground1, #242424);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: box-shadow 0.2s ease;
}

.message .content:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Bot messages - Left aligned with depth */
.message.bot .content {
  background: var(--colorNeutralBackground1, white);
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

.message.bot .content:hover {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.14),
    0 2px 5px rgba(0, 0, 0, 0.1);
}

/* LLM agent replies should render inline, without the user-style card or avatar.
   Keep the branded welcome message and user bubbles unchanged. */
.message.bot:not(.welcome-message) .message-avatar {
  display: none;
}

.message.bot:not(.welcome-message) .content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.message.bot:not(.welcome-message) .content:hover {
  box-shadow: none !important;
}

/* Agent markdown (core/utils renderAgentMarkdown) — compact typography inside bot bubbles */
.message.bot .content.glyde-agent-md strong.glyde-md-heading {
  display: block;
  margin: 0.35em 0 0.2em;
  font-size: 1.02em;
}
.message.bot .content.glyde-agent-md .glyde-agent-md-block + .glyde-agent-md-block {
  margin-top: 0.5em;
}
.message.bot .content.glyde-agent-md ul {
  margin: 0.35em 0 0.45em 1.2em;
  padding: 0;
  list-style: disc;
}
.message.bot .content.glyde-agent-md li {
  margin: 0.15em 0;
}
.message.bot .content.glyde-agent-md code {
  font-size: 0.92em;
  padding: 0.08em 0.35em;
  border-radius: 4px;
  background: var(--colorNeutralBackground3, #f0f0f0);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
   Rich agent markdown (core/markdown.js — marked + DOMPurify).
   Real block elements replace the legacy <br>-joined text, so
   pre-wrap must be disabled on agent content (newlines between
   block tags would otherwise render as spurious blank lines);
   pre/code re-enable it locally.
   ============================================================ */
.message.bot .content.glyde-agent-md {
  white-space: normal;
}

.message.bot .content.glyde-agent-md p {
  margin: 0.3em 0 0.4em;
}

.message.bot .content.glyde-agent-md > :first-child,
.message.bot .content.glyde-agent-md .glyde-agent-md-block > :first-child {
  margin-top: 0;
}

.message.bot .content.glyde-agent-md > :last-child,
.message.bot .content.glyde-agent-md .glyde-agent-md-block > :last-child {
  margin-bottom: 0;
}

.message.bot .content.glyde-agent-md h1,
.message.bot .content.glyde-agent-md h2,
.message.bot .content.glyde-agent-md h3,
.message.bot .content.glyde-agent-md h4,
.message.bot .content.glyde-agent-md h5,
.message.bot .content.glyde-agent-md h6 {
  margin: 0.6em 0 0.25em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--colorNeutralForeground1, #242424);
}

.message.bot .content.glyde-agent-md h1 {
  font-size: 1.12em;
}

.message.bot .content.glyde-agent-md h2 {
  font-size: 1.07em;
}

.message.bot .content.glyde-agent-md ol {
  margin: 0.35em 0 0.45em 1.4em;
  padding: 0;
  list-style: decimal;
}

.message.bot .content.glyde-agent-md ul {
  list-style: disc;
}

.message.bot .content.glyde-agent-md blockquote {
  margin: 0.4em 0;
  padding: 0.15em 0 0.15em 0.7em;
  border-left: 3px solid var(--color-brand-primary, #6264a7);
  color: var(--colorNeutralForeground2, #424242);
}

.message.bot .content.glyde-agent-md hr {
  border: none;
  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  margin: 0.6em 0;
}

.message.bot .content.glyde-agent-md a {
  color: var(--color-brand-primary, #6264a7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message.bot .content.glyde-agent-md pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0.4em 0;
  padding: 0.5em 0.7em;
  border-radius: 6px;
  background: var(--colorNeutralBackground3, #f5f5f5);
  border: 1px solid var(--colorNeutralStroke2, #e8e8e8);
  overflow-x: auto;
  max-width: 100%;
}

.message.bot .content.glyde-agent-md pre code {
  padding: 0;
  background: transparent;
  font-size: 0.88em;
  line-height: 1.45;
}

/* Markdown-emitted tables (session HTML/markdown) — dense, horizontally scrollable */
.message.bot .content.glyde-agent-md table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0.45em 0;
  font-size: 0.9em;
}

/* Server-built result tables must NOT inherit the markdown-table shrink-to-fit
 * display model — they carry width:100% and their own card styling. */
.message.bot .content .result-table {
  display: table;
  width: 100%;
  overflow: visible;
  font-size: 12.5px;
}

.message.bot .content.glyde-agent-md th,
.message.bot .content.glyde-agent-md td {
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
}

.message.bot .content.glyde-agent-md th {
  background: var(--colorNeutralBackground2, #f3f2f1);
  font-weight: 600;
}

/* Collapsible JSON viewer (fenced ```json blocks and json-format sessions) */
.glyde-json-viewer {
  margin: 0.45em 0;
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  border-radius: 6px;
  background: var(--colorNeutralBackground1, #fff);
  overflow: hidden;
}

.glyde-json-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: var(--colorNeutralBackground2, #f3f2f1);
  border-bottom: 1px solid var(--colorNeutralStroke2, #e8e8e8);
}

.glyde-json-viewer-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colorNeutralForeground3, #616161);
}

.glyde-json-copy {
  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
  border-radius: 4px;
  background: var(--colorNeutralBackground1, #fff);
  color: var(--colorNeutralForeground2, #424242);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
}

.glyde-json-copy:hover {
  background: var(--colorNeutralBackground2, #f3f2f1);
}

.glyde-json-pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 320px;
  overflow: auto;
  white-space: pre;
  font-size: 0.85em;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--colorNeutralForeground1, #242424);
}

.glyde-json-pre code {
  font-family: inherit;
  background: transparent;
  padding: 0;
}

/* ============================================================
   Chat-embedded interactive forms (features/forms — `form`
   blocks in the structured envelope). DOM is built from an
   allowlisted field schema; the model never supplies HTML.
   ============================================================ */
.glyde-chat-form {
  margin: 0.5em 0;
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  border-radius: 8px;
  background: var(--colorNeutralBackground1, #ffffff);
  padding: 10px 12px;
  max-width: 100%;
}

.glyde-chat-form-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--colorNeutralForeground1, #242424);
  margin-bottom: 2px;
}

.glyde-chat-form-description {
  font-size: 12px;
  color: var(--colorNeutralForeground3, #616161);
  margin-bottom: 8px;
  line-height: 1.35;
}

.glyde-chat-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.glyde-chat-form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.glyde-chat-form-field:has(textarea) {
  grid-column: 1 / -1;
}

.glyde-chat-form-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
}

.glyde-chat-form-field--checkbox .glyde-chat-form-input {
  width: auto;
}

.glyde-chat-form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--colorNeutralForeground2, #424242);
}

.glyde-chat-form-req {
  color: var(--color-danger, #d13438);
  font-style: normal;
}

.glyde-chat-form-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--colorNeutralForeground1, #242424);
  background: var(--colorNeutralBackground1, #ffffff);
}

.glyde-chat-form-input:focus {
  outline: 2px solid var(--color-brand-primary, #6264a7);
  outline-offset: -1px;
}

textarea.glyde-chat-form-input {
  resize: vertical;
  min-height: 54px;
}

.glyde-chat-form-input:disabled {
  background: var(--colorNeutralBackground3, #f5f5f5);
  color: var(--colorNeutralForeground3, #616161);
}

.glyde-chat-form-field--error .glyde-chat-form-input {
  border-color: var(--color-danger, #d13438);
}

.glyde-chat-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.glyde-chat-form-submit {
  background: var(--color-brand-primary, #6264a7);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.glyde-chat-form-submit:hover:not(:disabled) {
  background: var(--color-brand-primary-hover, #7476b9);
}

.glyde-chat-form-dismiss {
  background: transparent;
  color: var(--colorNeutralForeground2, #424242);
  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}

.glyde-chat-form-dismiss:hover:not(:disabled) {
  background: var(--colorNeutralBackground2, #f3f2f1);
}

.glyde-chat-form--submitted,
.glyde-chat-form--dismissed {
  border-style: dashed;
  font-size: 12.5px;
  color: var(--colorNeutralForeground2, #424242);
}

/* Read-only value summaries (post-submission + user bubble card) */
.glyde-form-summary {
  margin-top: 4px;
}

.glyde-form-summary-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 12.5px;
  line-height: 1.35;
}

.glyde-form-summary-key {
  color: var(--colorNeutralForeground3, #616161);
  min-width: 90px;
  font-weight: 600;
  flex-shrink: 0;
}

.glyde-form-summary-value {
  color: var(--colorNeutralForeground1, #242424);
  word-break: break-word;
  min-width: 0;
}

.glyde-form-submitted-card {
  border: 1px solid var(--color-brand-light, #e7e7f4);
  border-radius: 8px;
  background: var(--colorNeutralBackground1, #ffffff);
  padding: 8px 10px;
  max-width: 100%;
}

.glyde-form-submitted-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--colorNeutralForeground1, #242424);
  margin-bottom: 2px;
}

/* ============================================================
   Compact density for narrow chat surfaces (Chrome side panel,
   candidate drawer). Container queries on the chat shell; the
   base styles above stay as the roomy default.
   ============================================================ */
.acs-chat-full-container,
.acs-chat-drawer,
.glyde-drawer-content {
  container-type: inline-size;
}

@container (max-width: 420px) {
  .message-content-wrapper {
    max-width: 88%;
  }

  .glyde-chat-form-fields {
    grid-template-columns: 1fr;
  }

  .message.bot .content.glyde-agent-md {
    font-size: 13px;
    line-height: 1.45;
  }

  .message.bot .content.glyde-agent-md pre,
  .glyde-json-pre {
    font-size: 0.8em;
  }

  .glyde-json-pre {
    max-height: 240px;
  }

  .result-table {
    font-size: 12px;
  }

  .result-table th,
  .result-table td {
    padding: 3px 6px;
  }
}

/* User messages - Right aligned with depth */
.message:not(.bot) {
  flex-direction: row-reverse !important;
}

.message:not(.bot) .message-content-wrapper {
  align-items: flex-end !important;
}

.message:not(.bot) .content {
  background: var(--color-brand-lighter, #f4f4fb) !important;
  color: var(--colorNeutralForeground1, #242424) !important;
  border: 1px solid var(--color-brand-light, #e7e7f4) !important;
  box-shadow:
    0 2px 6px rgba(98, 100, 167, 0.15),
    0 1px 3px rgba(98, 100, 167, 0.1) !important;
}

.message:not(.bot) .content:hover {
  box-shadow:
    0 4px 10px rgba(98, 100, 167, 0.2),
    0 2px 5px rgba(98, 100, 167, 0.15) !important;
}

.message:not(.bot) .message-avatar {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

/* Raw Data Icons - Positioned tight to outer right of bot message bubble */
.message.bot {
  position: relative;
}

/* Raw data icons positioned relative to message-content-wrapper */
.message-content-wrapper .raw-data-icons {
  position: absolute;
  right: -32px;
  top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
  z-index: 10;
}

/* Ensure fluent messages container allows overflow */
.fluent-messages .message {
  overflow: visible;
  position: relative;
  will-change: auto; /* No will-change — prevents layout thrashing during message updates */
}

.fluent-messages .message-content-wrapper {
  overflow: visible;
}

.fluent-messages .message-content-wrapper .raw-data-icons {
  position: absolute;
  right: -32px;
  top: 4px;
}

.raw-data-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colorNeutralBackground1, white);
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  color: var(--colorNeutralForeground2, #605e5c);
}

.raw-data-icon:hover {
  background: var(--colorNeutralBackground2, #f3f2f1);
  border-color: var(--color-brand-primary, #6264a7);
  color: var(--color-brand-primary, #6264a7);
  transform: scale(1.1);
}

.raw-data-icon:active {
  transform: scale(0.95);
}

.raw-data-icon svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* Raw Data Modal */
.raw-data-modal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}

.raw-data-modal.active {
  display: flex !important;
  pointer-events: all !important;
}

.raw-data-modal-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  z-index: 1;
}

.raw-data-modal-content {
  position: relative !important;
  margin: auto !important;
  width: 90% !important;
  max-width: 800px !important;
  max-height: 90vh !important;
  background: var(--colorNeutralBackground1, white) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.raw-data-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  background: var(--colorNeutralBackground2, #f3f2f1);
}

.raw-data-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--colorNeutralForeground1, #242424);
}

.raw-data-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--colorNeutralForeground2, #605e5c);
  transition: all 0.2s ease;
  padding: 0;
}

.raw-data-modal-close:hover {
  background: var(--colorNeutralBackground3, #edebe9);
  color: var(--colorNeutralForeground1, #242424);
}

.raw-data-modal-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.raw-data-content {
  margin: 0;
  padding: 16px;
  background: var(--colorNeutralBackground2, #f3f2f1);
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  border-radius: 8px;
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--colorNeutralForeground1, #242424);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

/* Markdown styling - Tighter spacing */
.message .content h1,
.message .content h2,
.message .content h3 {
  margin-top: 8px;
  margin-bottom: 4px;
  font-weight: 600;
  line-height: 1.2;
}

.message .content p {
  margin: 0 0 8px;
  line-height: 1.55;
}

.message .content ul,
.message .content ol {
  margin: 4px 0;
  padding-left: 20px;
}

.message .content li {
  margin: 2px 0;
}

/* Input Area - Modern/Teams Style */
.input-area {
  /* Validation #5336719 items #14, #19 — bottom padding includes the iOS
   * home-indicator safe area so the input field is never hidden under
   * device chrome on phones / the Teams meeting side panel. */
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--colorNeutralBackground1, white);
  border-top: 1px solid var(--colorNeutralStroke2, #edebe9);
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
  z-index: 100;
}

.input-area .fluent-send-btn {
  background: var(--color-brand-primary, #6264a7);
  color: var(--color-white, white);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
  font-size: 0;
}

.input-area .fluent-send-btn:hover {
  background: var(--color-brand-primary-hover, #4b4d8c);
}

.input-area .fluent-send-btn svg {
  width: 16px;
  height: 16px;
  fill: white;
}

/* Send Icon (using text fallback or svg if available) */
.input-area .fluent-send-btn::after {
  content: '➤';
  font-size: 14px;
  margin-left: 2px;
}

.input-area .fluent-send-btn:disabled {
  background: var(--colorNeutralStroke1, #ccc);
  cursor: not-allowed;
}

/* Stop mode — while an agent run executes the send button doubles as the
   stop control (click with empty composer stops the run; text queues). */
.input-area .fluent-send-btn.fluent-send-btn--stop {
  background: var(--colorPaletteRedBackground3, #d13438);
}

.input-area .fluent-send-btn.fluent-send-btn--stop::after {
  content: '■';
  font-size: 11px;
  margin-left: 0;
}

.input-area .fluent-send-btn.fluent-send-btn--stop:hover {
  background: var(--colorPaletteRedBackground2, #a4262c);
}

/* Queued follow-up strip — messages typed while a run executes, auto-sent
   in order when the run finishes. Rendered above the composer controls. */
.acs-queue-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  padding: 0 6px 6px;
}

.acs-queue-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 3px 6px 3px 10px;
  border-radius: 12px;
  background: var(--colorNeutralBackground3, #f0f0f0);
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  font-size: 12px;
  color: var(--colorNeutralForeground2, #5b5b5b);
}

.acs-queue-pill__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acs-queue-pill__remove {
  border: none;
  background: transparent;
  color: var(--colorNeutralForeground3, #707070);
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 50%;
  cursor: pointer;
}

.acs-queue-pill__remove:hover {
  background: var(--colorNeutralStroke1, #d1d1d1);
  color: var(--colorNeutralForeground1, #242424);
}

/* Loading Spinner */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

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

/* Status Messages - Teams Style */
.status-message {
  text-align: center;
  padding: 10px 16px;
  margin: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid;
}

.status-message.info {
  background: var(--color-info-light, #deecf9);
  color: var(--color-info, #004578);
  border-color: #c7e0f4;
}

.status-message.error {
  background: var(--color-danger-light, #fde7e9);
  color: var(--color-danger, #a80000);
  border-color: #f1bbbb;
}

.status-message.success {
  background: var(--color-success-light, #dff6dd);
  color: var(--color-success, #107c10);
  border-color: #92c5f7;
}

/* Typing Indicator - GLYDE Unwrap Animation */
.typing-indicator {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

@keyframes status-fade-in {
  from {
    opacity: 0;
    transform: translateX(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* GLYDE Loader - Unwrap Animation for Typing Indicator */
.typing-indicator .glyde-loader {
  --loader-size: 24px;
  --loader-stroke: 2px;
  --loader-color: var(--color-brand-primary, #6264a7);
  --trail-width: calc(var(--loader-size) * 3.14159);
  --animation-duration: 3.5s;

  position: relative;
  width: calc(var(--trail-width) + var(--loader-size));
  height: var(--loader-size);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.typing-indicator .glyde-loader__ring {
  position: absolute;
  left: 0;
  width: var(--loader-size);
  height: var(--loader-size);
  animation: glyde-ring-position var(--animation-duration) ease-in-out infinite;
}

.typing-indicator .glyde-loader__ring svg {
  width: 100%;
  height: 100%;
  animation: glyde-ring-rotate var(--animation-duration) ease-in-out infinite;
}

.typing-indicator .glyde-loader__ring circle {
  fill: none;
  stroke: var(--loader-color);
  stroke-width: var(--loader-stroke);
  stroke-linecap: round;
  stroke-dasharray: 282.74;
  stroke-dashoffset: 35;
  transform-origin: center;
  animation: glyde-ring-arc var(--animation-duration) ease-in-out infinite;
}

.typing-indicator .glyde-loader__trail {
  position: absolute;
  left: calc(var(--loader-size) / 2);
  top: calc(var(--loader-size) - var(--loader-stroke) / 2);
  height: var(--loader-stroke);
  background: var(--loader-color);
  transform-origin: left center;
  border-radius: calc(var(--loader-stroke) / 2);
  animation: glyde-trail-motion var(--animation-duration) ease-in-out infinite;
}

/* Ring position - moves right during unwrap, stays left during wind-up */
@keyframes glyde-ring-position {
  0%,
  30% {
    left: 0;
  }
  55% {
    left: var(--trail-width);
  }
  64.9% {
    left: var(--trail-width);
  }
  65%,
  93%,
  100% {
    left: 0;
  }
}

/* Ring rotation - clockwise throughout */
@keyframes glyde-ring-rotate {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(720deg);
  }
  55% {
    transform: rotate(1080deg);
  }
  64.9%,
  65% {
    transform: rotate(1080deg);
  }
  93%,
  100% {
    transform: rotate(1440deg);
  }
}

/* Ring arc length - unwinding/winding effect */
@keyframes glyde-ring-arc {
  0%,
  30% {
    stroke-dashoffset: 35;
  }
  55%,
  65% {
    stroke-dashoffset: 282.74;
  }
  93%,
  100% {
    stroke-dashoffset: 35;
  }
}

/* Trail - extend right, retract from right */
@keyframes glyde-trail-motion {
  0%,
  29.9% {
    width: 0;
    transform-origin: left center;
  }
  30% {
    width: 0;
    transform-origin: left center;
  }
  55%,
  65% {
    width: var(--trail-width);
    transform-origin: left center;
  }
  65.1% {
    width: var(--trail-width);
    transform: scaleX(1);
    transform-origin: left center;
  }
  93% {
    width: var(--trail-width);
    transform: scaleX(0);
    transform-origin: left center;
  }
  93.1%,
  100% {
    width: 0;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Note: .glyde-hidden is removed as it is handled by styles.css */

/* Legacy `.status-indicator` styles removed — the single self-replacing
 * status pill was replaced by the accumulating `.activity-stack` (search
 * "Live activity stack"). `hideStatusMessage()` still removes any
 * `.status-indicator` node defensively for stale cached bundles.
 */

/* ============================================================
   Live activity stack — replaces the single status pill while an
   agent run executes. Both transports (HTTP stream, SSE) append
   steps here; the arriving bot message removes the stack.
   ============================================================ */
.activity-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  margin: 4px 0 8px;
}

.activity-stack__more {
  font-size: 11px;
  font-weight: 600;
  color: var(--colorNeutralForeground3, #8a8886);
  padding-left: 18px;
}

.activity-stack__line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--colorNeutralForeground1, #242424);
  animation: status-fade-in 0.3s ease-out;
}

.activity-stack__line--done {
  color: var(--colorNeutralForeground3, #8a8886);
  font-size: 12.5px;
}

.activity-stack__spinner {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-brand-primary, #6264a7);
  animation: activity-pulse 1.2s ease-in-out infinite;
}

.activity-stack__line--done .activity-stack__spinner {
  animation: none;
  background: var(--colorNeutralStroke2, #d1d1d1);
  opacity: 0.6;
}

/* Run finished (isComplete status) — pause the spinner until the bot
   message lands; the bot-message handler removes the stack. */
.activity-stack[data-complete='1'] .activity-stack__spinner {
  animation-play-state: paused;
  opacity: 0.5;
}

.activity-stack--error .activity-stack__line:last-child {
  color: var(--color-danger, #d13438);
}

@keyframes activity-pulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

.activity-stack__line.activity-phase-routing .activity-stack__spinner {
  background: var(--color-info, #0078d4);
}

.activity-stack__line.activity-phase-tool .activity-stack__spinner {
  background: var(--color-brand-primary, #6264a7);
}

.activity-stack__line.activity-phase-finalizing .activity-stack__spinner {
  background: var(--color-warning, #ffb900);
}

.activity-stack__line.activity-phase-error .activity-stack__spinner {
  background: var(--color-danger, #d13438);
}

/* Dark mode: live activity stack (kept adjacent to its base rules — see the
   @scope cascade note at the top of this file). */
@media (prefers-color-scheme: dark) {
  .activity-stack__line {
    color: var(--colorNeutralForeground1, #e0e0e0);
  }

  .activity-stack__line--done,
  .activity-stack__more {
    color: var(--colorNeutralForeground3, #8a8886);
  }

  .activity-stack__line--done .activity-stack__spinner {
    background: var(--colorNeutralStroke2, #555);
  }
}

/* Persisted run-activity trace (envelope `activity` block) — collapsed
   expander under the answer. Overrides the generic citation `details`
   styling above with a neutral treatment (higher specificity + later order). */
.message .content details.glyde-activity {
  margin: 8px 0 2px;
  border-left: none;
  background: transparent;
  border-radius: 8px;
  overflow: visible;
}

.message .content details.glyde-activity summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--colorNeutralBackground2, #f5f5f5);
  color: var(--colorNeutralForeground2, #424242);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: background 0.15s;
}

.message .content details.glyde-activity summary:hover {
  background: var(--colorNeutralBackground3, #ececec);
}

.message .content details.glyde-activity summary::-webkit-details-marker {
  display: none;
}

.message .content details.glyde-activity[open] summary {
  margin-bottom: 4px;
}

.glyde-activity__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--color-brand-primary, #6264a7);
}

.glyde-activity__steps {
  margin: 6px 0 2px 10px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--colorNeutralForeground2, #424242);
}

.glyde-activity__steps li {
  margin: 3px 0;
  line-height: 1.45;
}

.glyde-activity__label {
  font-weight: 500;
}

.glyde-activity__detail {
  color: var(--colorNeutralForeground3, #8a8886);
}

/* Planner reasoning text — the model's plan from Unity's deliberative loop. */
.glyde-activity__plan {
  margin: 8px 0 2px;
  padding: 6px 10px;
  border-left: 3px solid var(--color-brand-primary, #6264a7);
  background: var(--colorNeutralBackground2, #f5f5f5);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--colorNeutralForeground2, #424242);
}

.glyde-activity__step--failed .glyde-activity__label {
  color: var(--color-danger, #d13438);
}

.glyde-activity__fail-mark {
  color: var(--color-danger, #d13438);
  font-weight: 700;
  margin-right: 4px;
}

/* Intermediate result sets from a multi-search chain, nested in the trace. */
.glyde-activity__tables-label {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colorNeutralForeground3, #8a8886);
}

.message .content details.glyde-activity__result-set {
  margin: 4px 0;
  border-left: none;
  background: transparent;
  border-radius: 8px;
  overflow: visible;
}

.message .content details.glyde-activity__result-set summary {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--colorNeutralBackground2, #f5f5f5);
  color: var(--colorNeutralForeground2, #424242);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.message .content details.glyde-activity__result-set summary:hover {
  background: var(--colorNeutralBackground3, #ececec);
}

.message .content details.glyde-activity__result-set summary::-webkit-details-marker {
  display: none;
}

/* Dark mode: persisted activity expander */
@media (prefers-color-scheme: dark) {
  .message .content details.glyde-activity summary {
    background: var(--colorNeutralBackground3, #2d2d2d);
    color: var(--colorNeutralForeground2, #c8c8c8);
  }

  .message .content details.glyde-activity summary:hover {
    background: var(--colorNeutralStroke1, #404040);
  }

  .glyde-activity__steps {
    color: var(--colorNeutralForeground2, #c8c8c8);
  }

  .glyde-activity__detail {
    color: var(--colorNeutralForeground3, #8a8886);
  }

  .glyde-activity__plan {
    background: var(--colorNeutralBackground3, #2d2d2d);
    color: var(--colorNeutralForeground2, #c8c8c8);
  }

  .message .content details.glyde-activity__result-set summary {
    background: var(--colorNeutralBackground3, #2d2d2d);
    color: var(--colorNeutralForeground2, #c8c8c8);
  }

  .message .content details.glyde-activity__result-set summary:hover {
    background: var(--colorNeutralStroke1, #404040);
  }
}

/* Loading State Styles - Consolidated from limited-mcp-chat-room.html */
.loading-container {
  font-size: 48px;
  margin-bottom: 20px;
}

.loading-large {
  width: 60px;
  height: 60px;
  border-width: 5px;
  border-color: rgba(98, 100, 167, 0.3);
  border-top-color: var(--color-brand-primary, #6264a7);
}

.loading-subtitle {
  color: var(--colorNeutralForeground3, #666);
  margin-top: 10px;
}

/* Collapsible citation styles for raw JSON responses */
.message .content details {
  margin: 12px 0;
  border-left: 3px solid var(--color-info, #0078d4);
  background: var(--colorNeutralBackground2, #f8f9fa);
  border-radius: 4px;
  overflow: hidden;
}

.message .content details summary {
  cursor: pointer;
  padding: 10px 14px;
  color: var(--color-info, #0078d4);
  font-size: 0.9em;
  font-weight: 500;
  user-select: none;
  background: var(--color-info-light, #f0f6ff);
  transition: background 0.2s;
  list-style: none;
  line-height: 1.5;
}

.message .content details summary::-webkit-details-marker {
  display: none;
}

.message .content details summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.2s;
  font-size: 0.8em;
}

.message .content details[open] summary::before {
  transform: rotate(90deg);
}

.message .content details summary:hover {
  background: #e6f2ff;
}

.message .content details pre {
  background: var(--colorNeutralBackground1, #ffffff);
  padding: 14px;
  margin: 0;
  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.5;
}

.message .content details code {
  background: none;
  color: var(--colorNeutralForeground1, #333);
  font-family: 'Courier New', 'Consolas', monospace;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  body {
    height: 100dvh; /* Dynamic viewport height - accounts for keyboard */
  }

  .input-area {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--colorNeutralBackground1, white);
  }

  .message {
    margin-bottom: 12px; /* Slightly reduced for mobile */
  }

  .message .content {
    padding: 10px 14px; /* Slightly reduced for mobile */
  }

  /* --- Welcome message width override for mobile view --- */
  /*
     The .welcome-message bubble must reach same width as input-area.
     By default, message-content-wrapper's max-width: 70%;
     For mobile, force .welcome-message (which contains .message-content-wrapper)
     and children to span most or all of the container width but with the same left/right padding as the input-area (16px)
  */
  .welcome-message .message-content-wrapper {
    max-width: none !important;
    width: 100vw;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
  /* If body or .messages-area uses padding, adjust -16px offset accordingly */

  .welcome-message .content {
    border-radius: 0 !important;
  }

  /* Remove extra margin from .glyde-welcome to allow flush sides */
  .welcome-message .glyde-welcome {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Starter Prompts - MS Copilot Style */
.starter-prompts-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
}

.starter-prompts-header {
  text-align: center;
  margin-bottom: 24px;
}

.starter-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
}

.starter-prompts-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--colorNeutralForeground1, #242424);
  margin: 0;
}

.starter-prompts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 600px;
  width: 100%;
  padding: 0 16px;
}

.starter-prompt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  background: var(--colorNeutralBackground1, white);
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  height: 100%;
}

.starter-prompt-card:hover {
  background: var(--colorNeutralBackground1Hover, #f5f5f5);
  box-shadow: var(--shadow-2, 0 2px 8px rgba(0, 0, 0, 0.08));
  border-color: var(--colorNeutralStroke1, #d1d1d1);
  transform: translateY(-2px);
}

.prompt-icon {
  font-size: 20px;
  margin-bottom: 8px;
}

.prompt-text {
  font-size: 14px;
  color: var(--colorNeutralForeground1, #242424);
  font-weight: 500;
  line-height: 1.4;
}

}
/* === END GLYDE scope: host-body launcher offsets below stay global === */

@media (max-width: 720px) {
  body.glyde-has-links-launcher .acs-chat-full-container .input-area {
    padding-left: calc(16px + 72px);
  }

  body.glyde-has-links-launcher .acs-chat-full-container .voice-toggle-pill {
    min-width: 44px;
    padding: 8px 10px !important;
  }

  body.glyde-has-links-launcher .acs-chat-full-container .voice-toggle-pill .voice-pill-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* === GLYDE scope resumes === */
@scope (.glyde-app, .glyde-scope, [id^='glyde-']) {
  @media (max-width: 480px) {
    .starter-prompts-grid {
    grid-template-columns: 1fr;
  }
}

/* Full Mode Container (for general GLYDEBuddy chat) */
.acs-chat-full-container {
  position: relative; /* anchors .acs-popout-btn--floating */
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--color-surface-primary, #f3f2f1);
}

.acs-chat-full-container .acs-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Override drawer animation styles - full mode should be visible and scrollable */
  min-height: 0 !important; /* Critical: allows flex item to shrink and enable scrolling */
  opacity: 1 !important; /* Make visible (override drawer hidden state) */
  height: unset !important; /* Remove fixed height from drawer animation */
}

.acs-chat-full-container .input-area {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* Fluent 2 Modern Styling Overrides                                          */
/* -------------------------------------------------------------------------- */

/* 1. Modern Header */
.fluent-header {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important; /* Soft rectangle, not pill */
  margin: 12px 16px !important;
  min-height: 64px !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* Header: let title grow; right controls shrink to fit visible content */
#glyde-chat-header .header-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

#glyde-chat-header .header-right {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.title-text {
  font-family: 'Segoe UI Variable Display', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--colorNeutralForeground1);
}

.subtitle-text {
  font-size: 12px;
  color: var(--colorNeutralForeground3);
  display: block;
}

/* 2. Chat Bubbles (Softer & Larger Radius) */
.fluent-messages {
  padding-top: 100px !important; /* Clear the absolute header */
  flex: 1;
  overflow-y: auto;
}

.fluent-messages .message .content {
  border-radius: 16px !important;
  padding: 12px 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  font-size: 14px;
  line-height: 1.5;
  transition: box-shadow 0.2s ease;
}

.fluent-messages .message .content:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Bot Message - With depth */
.fluent-messages .message.bot .content {
  background: #ffffff !important;
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0) !important;
  border-bottom-left-radius: 4px !important; /* Tail effect */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.fluent-messages .message.bot .content:hover {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.14),
    0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.fluent-messages .message.bot:not(.welcome-message) .content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.fluent-messages .message.bot:not(.welcome-message) .content:hover {
  box-shadow: none !important;
}

/* User Message - With depth (right-aligned, stable during updates) */
.fluent-messages .message:not(.bot) {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
}

.fluent-messages .message:not(.bot) .message-content-wrapper {
  align-items: flex-end !important;
  text-align: right;
}

.fluent-messages .message:not(.bot) .content {
  background: var(--color-brand-lighter, #f4f4fb) !important;
  color: var(--colorNeutralForeground1, #242424) !important;
  border: 1px solid var(--color-brand-light, #e7e7f4) !important;
  border-bottom-right-radius: 4px !important; /* Tail effect */
  box-shadow:
    0 2px 6px rgba(98, 100, 167, 0.15),
    0 1px 3px rgba(98, 100, 167, 0.1) !important;
}

.fluent-messages .message:not(.bot) .content:hover {
  box-shadow:
    0 4px 10px rgba(98, 100, 167, 0.2),
    0 2px 5px rgba(98, 100, 167, 0.15) !important;
}

.fluent-messages .message:not(.bot) .message-avatar {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

/* 3. Floating Input Area */
.fluent-input-area {
  margin: 0 16px 16px 16px;
  border-radius: 24px;
  border: 1px solid var(--colorNeutralStroke2) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  padding: 8px 12px !important;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* Response-format selector (markdown|plain|html|json) — circular chip with a
   short format code; opens a popover with the full labels */
.acs-format-selector {
  position: relative;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}

.acs-format-chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-brand-primary, #6264a7);
  background: var(--colorNeutralBackground1, #ffffff);
  color: var(--color-brand-primary, #6264a7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.acs-format-chip:hover {
  background: var(--color-brand-lighter, #f4f4fb);
}

.acs-format-chip:focus {
  outline: 2px solid var(--color-brand-primary, #6264a7);
  outline-offset: 1px;
}

.acs-format-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 130px;
  background: var(--colorNeutralBackground1, #ffffff);
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  padding: 4px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acs-format-menu.glyde-hidden {
  display: none;
}

.acs-format-menu-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--colorNeutralForeground1, #242424);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

.acs-format-menu-item:hover {
  background: var(--colorNeutralBackground2, #f3f2f1);
}

.acs-format-menu-item.is-selected {
  font-weight: 600;
  color: var(--color-brand-primary, #6264a7);
}

.acs-format-menu-item.is-selected::before {
  content: '✓';
  margin-right: 6px;
  font-size: 11px;
}

.acs-format-menu-item:not(.is-selected)::before {
  content: '✓';
  margin-right: 6px;
  font-size: 11px;
  visibility: hidden;
}

.fluent-input {
  border: none !important;
  background: transparent !important;
  padding-left: 12px !important;
  font-size: 14px;
  line-height: 1.4;
  min-height: 1.4em;
  width: 100%;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}

.fluent-input:focus {
  box-shadow: none !important;
}

.input-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.fluent-input:empty::before {
  content: attr(data-placeholder);
  color: var(--colorNeutralForeground3, #707070);
  pointer-events: none;
}

.acs-composer-token {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 2px;
}

.fluent-send-btn {
  width: 32px !important;
  height: 32px !important;
  background: var(--color-brand-primary) !important;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fluent-send-btn:hover:not(:disabled) {
  transform: scale(1.1);
  background: var(--color-brand-primary-hover) !important;
}

/* 4. Fluent Dropdown (Select) */
.fluent-select-wrapper {
  position: relative;
  display: inline-block;
}

.fluent-select {
  appearance: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 28px 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--colorNeutralForeground1);
  cursor: pointer;
  transition: all 0.2s;
}

.fluent-select:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.fluent-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--colorNeutralForeground3);
  pointer-events: none;
}

/* 5. Icons & Buttons */
.fluent-icon-btn {
  color: var(--colorNeutralForeground2) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  transition: background 0.2s;
}

.fluent-icon-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--color-brand-primary) !important;
}

/* 6. Drawer Header Status Indicator */
.drawer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Popout button — injected by ACSChatInterface once a room exists.
   Drawer mode: sits in .drawer-controls; full mode: floats top-right. */
.acs-popout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--colorNeutralForeground2, #616161);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.acs-popout-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-brand-primary, #6264a7);
}

.acs-popout-btn--floating {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: var(--colorNeutralBackground1, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* "Start a new chat" icon (GLYDEBuddy agent rooms) — same chrome as the
   popout button; the floating variant sits left of the popout icon. */
.acs-new-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--colorNeutralForeground2, #616161);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.acs-new-chat-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-brand-primary, #6264a7);
}

.acs-new-chat-btn--floating {
  position: absolute;
  top: 8px;
  right: 38px;
  z-index: 5;
  background: var(--colorNeutralBackground1, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.drawer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.drawer-status.glyde-hidden {
  display: none;
}

.drawer-status .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(98, 100, 167, 0.2);
  border-top-color: var(--color-brand-primary, #6264a7);
  border-radius: 50%;
  animation: drawer-spin 0.8s linear infinite;
}

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

.drawer-status .status-icon {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.drawer-status .status-icon.success {
  color: var(--color-success, #107c10);
}

.drawer-status .status-icon.error {
  color: var(--color-danger, #a80000);
}

.drawer-status .status-icon.glyde-hidden {
  display: none;
}

/* Note: Conflicting .glyde-right-pane, .glyde-center-pane, and .glyde-crm-details overrides have been removed */

/* -------------------------------------------------------------------------- */
/* Voice Toggle Pill Button - Metallic Shine Design                           */
/* -------------------------------------------------------------------------- */

.voice-toggle-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  border-radius: 24px !important;
  border: none !important;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  flex-shrink: 0;
  width: auto !important;
  height: auto !important;
  min-width: 120px;

  /* Default state - Dark green metallic */
  background: linear-gradient(135deg, #1a3a2a 0%, #0d2818 50%, #1a3a2a 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.voice-toggle-pill .mic-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.voice-toggle-pill .voice-pill-text {
  white-space: nowrap;
}

/* Metallic shine animation overlay */
.voice-pill-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 100%
  );
  animation: metallic-shine 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes metallic-shine {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

/* Hover state - Show "enable voice" with red background */
.voice-toggle-pill:hover:not(.voice-active) {
  background: linear-gradient(135deg, #8b2635 0%, #6b1d29 50%, #8b2635 100%) !important;
  box-shadow:
    0 2px 12px rgba(139, 38, 53, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.voice-toggle-pill:hover:not(.voice-active) .voice-pill-text {
  font-size: 0;
}

.voice-toggle-pill:hover:not(.voice-active) .voice-pill-text::after {
  font-size: 12px;
  content: 'enable voice';
}

/* Active/Listening state - Bright green */
.voice-toggle-pill.voice-active {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 50%, #28a745 100%) !important;
  box-shadow:
    0 2px 12px rgba(40, 167, 69, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.voice-toggle-pill.voice-active .voice-pill-shine {
  animation: metallic-shine-fast 1.5s ease-in-out infinite;
}

@keyframes metallic-shine-fast {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

/* Active hover - Show red "Voice Off" */
.voice-toggle-pill.voice-active:hover {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #dc3545 100%) !important;
  box-shadow:
    0 2px 12px rgba(220, 53, 69, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.voice-toggle-pill.voice-active:hover .voice-pill-text {
  font-size: 0;
}

.voice-toggle-pill.voice-active:hover .voice-pill-text::after {
  font-size: 12px;
  content: 'Voice Off';
}

/* Listening pulse animation */
.voice-toggle-pill.voice-listening {
  animation: voice-pill-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-pill-pulse {
  0%,
  100% {
    box-shadow:
      0 2px 12px rgba(40, 167, 69, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow:
      0 2px 20px rgba(40, 167, 69, 0.6),
      0 0 30px rgba(40, 167, 69, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  }
}

/* Processing state */
.voice-toggle-pill.voice-processing {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 50%, #ffc107 100%) !important;
  color: #212529 !important;
}

/* Speaking state */
.voice-toggle-pill.voice-speaking {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 50%, #17a2b8 100%) !important;
}

/* Error state */
.voice-toggle-pill.voice-error {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #dc3545 100%) !important;
  animation: voice-pill-error-shake 0.5s ease-in-out;
}

/* Icon-only voice pill: collapses to a circle; the state text stays in the
   DOM (visually hidden) for screen readers, and the hover "enable voice" /
   "Voice Off" text tricks are disabled. */
.voice-toggle-pill {
  min-width: 0;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  justify-content: center;
  border-radius: 50% !important;
  gap: 0;
}

.voice-toggle-pill .voice-pill-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.voice-toggle-pill:hover:not(.voice-active) .voice-pill-text::after,
.voice-toggle-pill.voice-active:hover .voice-pill-text::after {
  content: none;
}

@keyframes voice-pill-error-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

/* -------------------------------------------------------------------------- */
/* Input Wrapper with Listening Indicator                                     */
/* -------------------------------------------------------------------------- */

.input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.voice-listening-indicator {
  position: absolute;
  left: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #28a745;
  opacity: 0;
  transform: translateY(2px);
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-listening-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

.voice-listening-indicator.active::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
  animation: listening-dot-pulse 1s ease-in-out infinite;
}

@keyframes listening-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* Adjust input padding when listening indicator is active */
.input-wrapper .fluent-input {
  transition: padding-left 0.2s ease;
}

.input-wrapper:has(.voice-listening-indicator.active) .fluent-input {
  padding-left: 100px !important;
}

/* Fallback for browsers without :has() support */
.voice-listening-indicator.active + .fluent-input {
  padding-left: 100px !important;
}

/* -------------------------------------------------------------------------- */
/* Message Deduplication Fix - Prevent user messages from jumping             */
/* -------------------------------------------------------------------------- */

/* Ensure optimistic messages maintain position until confirmed */
.message.optimistic {
  opacity: 0.85;
}

/* (Duplicate .fluent-messages alignment rules consolidated into the canonical
   message blocks above — see ".fluent-messages .message" and the
   "User Message" section.) */

/* -------------------------------------------------------------------------- */
/* Result Tables - LLM-generated HTML tables for structured data              */
/* -------------------------------------------------------------------------- */

/* ============================================================
   Status badges — leading bold verdicts (Hold: / Sent: / Blocked:)
   promoted client-side to colored pills (_applyStatusBadges).
   ============================================================ */
.glyde-status-badge {
  display: inline-block;
  padding: 2px 10px;
  margin-right: 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: 1px;
}

.glyde-status-badge--sent,
.glyde-status-badge--done {
  background: var(--color-success-light, #dff6dd);
  color: var(--color-success, #0e700e);
}

.glyde-status-badge--hold,
.glyde-status-badge--blocked,
.glyde-status-badge--skipped {
  background: var(--color-warning-light, #fff4ce);
  color: #8a5300;
}

.glyde-status-badge--failed,
.glyde-status-badge--error {
  background: var(--color-danger-light, #fde7e9);
  color: #a4262c;
}

@media (prefers-color-scheme: dark) {
  .glyde-status-badge--sent,
  .glyde-status-badge--done {
    background: rgba(16, 124, 16, 0.25);
    color: #6ccb5f;
  }

  .glyde-status-badge--hold,
  .glyde-status-badge--blocked,
  .glyde-status-badge--skipped {
    background: rgba(255, 185, 0, 0.18);
    color: #f2c811;
  }

  .glyde-status-badge--failed,
  .glyde-status-badge--error {
    background: rgba(209, 52, 56, 0.22);
    color: #f1707a;
  }
}

.result-table {
  /* Card-like data table: raised off the background, defined rounded edges,
     subtle cell borders, and a faint pastel header row. Compact density —
     the chat panel is narrow; generous cell padding starves the content. */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 10px 0;
  font-size: 12.5px;
  background: var(--colorNeutralBackground1, #ffffff);
  border: 1px solid var(--glyde-table-border, rgba(98, 100, 167, 0.16));
  border-radius: var(--border-radius-large, 12px);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 16px rgba(15, 23, 42, 0.1);
}

.result-table thead {
  /* Faint brand-tinted pastel so the header reads as a distinct band. */
  background: var(--glyde-table-header-bg, #f3f2fb);
}

.result-table th {
  padding: 7px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--colorNeutralForeground1, #242424);
  border-bottom: 1px solid var(--glyde-table-border, rgba(98, 100, 167, 0.16));
  white-space: nowrap;
}

.result-table td {
  padding: 7px 10px;
  /* Subtler inner row separators than the outer card edge. */
  border-bottom: 1px solid var(--glyde-table-row-border, rgba(15, 23, 42, 0.06));
  color: var(--colorNeutralForeground1, #242424);
  vertical-align: middle;
}

.result-table tbody tr:last-child td {
  border-bottom: none;
}

.result-table tbody tr:hover {
  background: var(--colorNeutralBackground1Hover, #f6f6fb);
}

/* Collapsible tables — hide rows beyond the preview limit until expanded */
.result-table-wrap {
  margin: 12px 0;
}

.result-table-wrap .result-table {
  margin: 0;
}

.result-table--collapsible .result-table-row-collapsed {
  display: none;
}

.result-table-expand-link {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-brand-primary, #6264a7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.result-table-expand-link:hover {
  color: var(--color-brand-primary-hover, #464775);
}

/* Status badges in tables */
.result-table .status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.result-table .status-badge.new-lead,
.result-table .status-badge.new {
  background: var(--colorPaletteGreenBackground2, #dff6dd);
  color: var(--colorPaletteGreenForeground2, #0e700e);
}

.result-table .status-badge.placed,
.result-table .status-badge.hired {
  background: var(--colorPaletteBlueBerryBackground2, #e0e8ff);
  color: var(--colorPaletteBlueBerryForeground2, #3b49df);
}

.result-table .status-badge.shortlisted,
.result-table .status-badge.qualified {
  background: var(--colorPaletteYellowBackground2, #fff4ce);
  color: var(--colorPaletteYellowForeground2, #835c00);
}

/* -------------------------------------------------------------------------- */
/* Interactive Record Links - Clickable elements that prefill chat input      */
/* -------------------------------------------------------------------------- */

.record-link {
  color: var(--color-brand-primary, #6264a7);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px dotted transparent;
}

.record-link:hover {
  color: var(--color-brand-primary-hover, #4b4d8c);
  border-bottom-color: var(--color-brand-primary, #6264a7);
  text-decoration: none;
}

.record-link:active {
  transform: scale(0.98);
}

/* Visual feedback when link is clicked */
.record-link.clicked {
  background: var(--colorPaletteBlueBerryBackground2, #e0e8ff);
  border-radius: 3px;
  padding: 0 2px;
}

/* Tooltip hint on hover */
.record-link::after {
  content: ' →';
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 10px;
}

.record-link:hover::after {
  opacity: 0.6;
}

.acs-macro-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--colorNeutralStroke2, #d0d7de);
  background: var(--colorPaletteBlueBackground2, #eff6ff);
  color: var(--colorPaletteBlueForeground2, #0f548c);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  vertical-align: middle;
}

.acs-macro-pill--entity-record {
  background: var(--colorPaletteBlueBackground2, #eff6ff);
  color: var(--colorPaletteBlueForeground2, #0f548c);
}

.acs-macro-pill--page-context {
  background: var(--colorPaletteGreenBackground2, #f0fdf4);
  color: var(--colorPaletteGreenForeground2, #166534);
}

.acs-macro-pill-icon {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

.acs-macro-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ACS composer attach controls (file + current page) — icon only, no button chrome */
.acs-composer-attach-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}

.acs-composer-icon-btn,
.input-area .acs-composer-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  border: none;
  border-radius: 0;
  background: transparent !important;
  color: var(--colorNeutralForeground3, #707070);
  cursor: pointer;
  flex-shrink: 0;
  font-size: inherit;
  box-shadow: none;
}

.acs-composer-icon-btn::after,
.input-area .acs-composer-icon-btn::after {
  content: none !important;
  display: none !important;
}

.acs-composer-icon-btn svg,
.input-area .acs-composer-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none !important;
  stroke: currentColor;
}

.acs-composer-icon-btn:hover,
.input-area .acs-composer-icon-btn:hover {
  background: transparent !important;
  color: var(--colorNeutralForeground1, #242424);
}

.acs-composer-icon-btn:active,
.input-area .acs-composer-icon-btn:active {
  background: transparent !important;
  color: var(--colorNeutralForeground1, #242424);
  opacity: 0.75;
}

.acs-macro-pill--file-context {
  border-color: var(--colorPaletteBlueBorderActive, #0f6cbd);
  background: var(--colorPaletteBlueBackground2, #ebf3fc);
}

.acs-document-confirm-banner {
  margin: 12px 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--colorPaletteYellowBorder2, #eaa300);
  background: var(--colorPaletteYellowBackground1, #fff9e6);
}

.acs-document-confirm-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--colorNeutralForeground1, #242424);
}

.acs-document-confirm-actions {
  display: flex;
  gap: 8px;
}

.acs-document-confirm-yes,
.acs-document-confirm-no {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
}

.acs-document-confirm-yes {
  background: var(--colorBrandBackground, #6264a7);
  color: #fff;
  border-color: transparent;
}

.acs-document-confirm-no {
  background: var(--colorNeutralBackground1, #fff);
}

/* Mobile-friendly tap targets */
@media (max-width: 768px) {
  .result-table {
    font-size: 12px;
  }

  .result-table th,
  .result-table td {
    padding: 8px 10px;
  }

  .record-link {
    padding: 4px 2px;
  }

  .acs-macro-pill {
    max-width: 100%;
  }
}

/* Dark mode support for tables.
 * Use dedicated --glyde-table-*-dark tokens for contrast-critical colors.
 * Do NOT use Fluent --colorNeutralForeground1 / --colorNeutralBackground1 here:
 * styles.css locks those to the light palette, so dark thead + Fluent fg yields
 * invisible dark-on-dark headers when prefers-color-scheme is dark. */
@media (prefers-color-scheme: dark) {
  .result-table {
    background: var(--glyde-table-bg-dark, #1f1f1f);
    /* Card border + raised shadow tuned for dark surfaces. */
    border-color: var(--glyde-table-border-dark, rgba(139, 141, 217, 0.28));
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 6px 16px rgba(0, 0, 0, 0.45);
  }

  .result-table thead {
    /* Faint brand-tinted pastel band for dark mode. */
    background: var(--glyde-table-header-bg-dark, #2b2a3d);
  }

  .result-table th {
    color: var(--glyde-table-header-fg-dark, #f5f5f8);
    border-bottom-color: var(--glyde-table-border-dark, rgba(139, 141, 217, 0.28));
  }

  .result-table td {
    color: var(--glyde-table-cell-fg-dark, #e8e8ed);
    border-bottom-color: var(--glyde-table-row-border-dark, rgba(255, 255, 255, 0.07));
  }

  .result-table tbody tr:hover {
    background: var(--glyde-table-row-hover-dark, #2a2a35);
  }

  .record-link {
    color: var(--color-brand-primary, #8b8dd9);
  }

  .record-link:hover {
    color: var(--color-brand-primary-hover, #a5a7e8);
  }

  .acs-macro-pill {
    border-color: var(--colorNeutralStroke1, #404040);
    background: var(--colorNeutralBackground3, #2d3b4f);
    color: var(--colorPaletteBlueForeground2, #9cc9ff);
  }
}

/* -------------------------------------------------------------------------- */
/* Welcome Message - ACS-safe styling via CSS classes                          */
/* ACS strips inline styles and data-* attributes, so we use classes instead  */
/* -------------------------------------------------------------------------- */

/* Welcome message: override standard message bubble styling so the custom
   banner/capabilities/suggestions layout renders edge-to-edge within the bubble. */
.welcome-message .content {
  padding: 0;
  background: transparent;
}

.welcome-message .message-content-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.glyde-welcome {
  margin: -4px -8px 8px -8px;
  /* Single source for the banner gradient — flip the whole look in one line
     (kept as the distinctive indigo→violet brand moment; UI accents elsewhere
     stay Teams purple #6264a7). */
  --glyde-welcome-banner-bg: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
}

.glyde-welcome-banner {
  background: var(--glyde-welcome-banner-bg);
  color: #fff;
  padding: 14px 16px;
  border-radius: 12px 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Full avatar in welcome banner, constrained to 44px (sized next to the 40px
 * message avatars, not towering over them). Transparent SVG background. */
.glyde-welcome-avatar {
  max-height: 44px;
  max-width: 44px;
  width: auto;
  height: auto;
  border-radius: 50%;
  flex-shrink: 0;
  /* Removed border and box-shadow for no circular border or halo */
  border: none;
  box-shadow: none;
  object-fit: cover;
  background-color: transparent; /* Ensure transparent background for SVGs */
}

.glyde-welcome-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.glyde-welcome-banner b {
  font-size: 16px;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.message-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Capabilities: compact icon lines — the LAST section of the card, so it
   carries the bottom border + radius (suggestions are now the middle band). */
.glyde-welcome-capabilities {
  padding: 10px 18px 12px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  font-size: 13px;
  color: #374151;
}

.glyde-welcome-cap-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 5px 0;
  line-height: 1.5;
}

.glyde-welcome-cap-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-brand-primary, #6264a7);
}

.glyde-welcome-suggestions {
  padding: 10px 18px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
}

.glyde-welcome-suggestions b {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin-bottom: 8px;
  font-weight: 600;
}

.support-opening-context-hint {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e3a5f;
  font-size: 13px;
}

.support-opening-context-hint__title {
  font-weight: 600;
  margin-bottom: 6px;
}

.support-opening-context-hint ul {
  margin: 0 0 8px 18px;
  padding: 0;
}

.support-opening-context-hint__cta {
  color: #475569;
  font-size: 12px;
}

/* Startup intro card (support chat auto-opened on app startup). Extends the
   welcome card: heading band ("Why did this chat open?") + capability list +
   opt-out footer. Reuses .glyde-welcome / .glyde-welcome-cap-line structure. */
.support-startup-intro__head {
  border-top: 1px solid #e5e7eb;
  border-radius: 12px 12px 0 0;
}

.support-startup-intro__lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

.support-startup-intro__body {
  border-radius: 0;
}

.support-startup-intro__body .glyde-welcome-cap-line b {
  color: #111827;
}

.support-startup-intro__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 18px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.support-startup-intro__optout {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: transparent;
  color: #4f46e5;
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}

.support-startup-intro__optout:hover {
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.support-startup-intro__footnote {
  font-size: 12px;
  color: #6b7280;
}

.support-startup-intro__done {
  font-size: 13px;
  color: #374151;
  padding: 10px 4px;
}

@media (prefers-color-scheme: dark) {
  .support-startup-intro__lede {
    color: #d1d5db;
  }

  .support-startup-intro__body .glyde-welcome-cap-line b {
    color: #f9fafb;
  }

  .support-startup-intro__footer {
    background: #1f2430;
    border-color: #374151;
  }

  .support-startup-intro__optout {
    border-color: #4b5563;
    color: #a5b4fc;
  }

  .support-startup-intro__optout:hover {
    background: rgba(165, 180, 252, 0.12);
  }

  .support-startup-intro__footnote {
    color: #9ca3af;
  }
}

/* Suggestion chips - clickable pill buttons that prefill the chat input */
.glyde-suggestion-chip {
  display: inline-block;
  background: #f0f2f5;
  color: #242424;
  border-radius: 16px;
  padding: 6px 14px;
  margin: 3px 4px 3px 0;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
}

.glyde-suggestion-chip:hover {
  background: #ececf6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: #242424;
}

.glyde-suggestion-chip:active {
  background: #d8dade;
  transform: scale(0.98);
}

/* Dark mode for welcome message */
@media (prefers-color-scheme: dark) {
  .glyde-welcome {
    --glyde-welcome-banner-bg: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #9333ea 100%);
  }

  .glyde-welcome-capabilities {
    background: var(--colorNeutralBackground1, #1f1f1f);
    border-color: var(--colorNeutralStroke1, #404040);
    color: var(--colorNeutralForeground1, #e0e0e0);
  }

  .glyde-welcome-cap-icon {
    color: #a7abf2;
  }

  .glyde-welcome-suggestions b {
    color: var(--colorNeutralForeground2, #a0a0a0);
  }

  .glyde-welcome-suggestions {
    background: var(--colorNeutralBackground1, #1f1f1f);
    border-color: var(--colorNeutralStroke1, #404040);
  }

  .glyde-suggestion-chip {
    background: var(--colorNeutralBackground3, #2d2d2d);
    color: var(--colorNeutralForeground1, #e0e0e0);
    border-color: var(--colorNeutralStroke1, #404040);
  }

  .glyde-suggestion-chip:hover {
    background: var(--colorNeutralBackground1Hover, #383838);
    color: var(--colorNeutralForeground1, #e0e0e0);
  }

  .message.bot .content .acs-oauth-card {
    border-color: var(--colorNeutralStroke1, #404040);
    background: var(--colorNeutralBackground3, #2d2d2d);
    box-shadow: none;
  }

  .message.bot .content .acs-oauth-card-title {
    color: var(--colorNeutralForeground1, #e0e0e0);
  }

  .message.bot .content .acs-oauth-card-copy {
    color: var(--colorNeutralForeground2, #c8c8c8);
  }
}

/* ATS OAuth prompt from Limited MCP bot (HTML message) */
.message.bot .content .acs-oauth-card {
  max-width: 100%;
  padding: 16px 18px;
  margin: 4px 0 0;
  border-radius: 12px;
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
  background: var(--colorNeutralBackground2, #fafafa);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.message.bot .content .acs-oauth-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.message.bot .content .acs-oauth-brand-icon {
  flex-shrink: 0;
  line-height: 0;
}

.message.bot .content .acs-oauth-brand-icon svg {
  display: block;
}

.message.bot .content .acs-oauth-card-titles {
  min-width: 0;
}

.message.bot .content .acs-oauth-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--colorNeutralForeground1, #242424);
  line-height: 1.3;
}

.message.bot .content .acs-oauth-card-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--colorNeutralForeground3, #707070);
}

.message.bot .content .acs-oauth-card-copy {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--colorNeutralForeground2, #424242);
}

.message.bot .content .acs-oauth-actions {
  margin: 0 0 8px;
}

.message.bot .content .acs-oauth-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  background: var(--color-brand-primary, #6264a7);
  color: var(--color-white, #fff) !important;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(98, 100, 167, 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.message.bot .content .acs-oauth-login-btn:hover {
  background: var(--color-brand-primary-hover, #4b4d8c);
  color: var(--color-white, #fff) !important;
  box-shadow: 0 3px 8px rgba(98, 100, 167, 0.45);
}

.message.bot .content .acs-oauth-login-btn:active {
  transform: translateY(1px);
}

.acs-chat-signin-prompt {
  padding: 1.25rem 1rem;
  text-align: center;
}

.acs-chat-signin-prompt__message {
  margin: 0 0 1rem;
  line-height: 1.45;
}

.acs-chat-signin-prompt__button {
  min-width: 220px;
}

.message.bot .content .acs-oauth-btn-label {
  pointer-events: none;
}

.message.bot .content .acs-oauth-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--colorNeutralForeground3, #707070);
}

/* Initializing placeholder — visible loading state in the messages area while
   the room is created / history loads (previously a blank screen on full-page
   surfaces, which only have the drawer-mode header spinner). Removed as soon
   as real messages render. */
.acs-init-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: auto;
  padding: 32px 24px;
  text-align: center;
}

.acs-init-placeholder-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--colorNeutralStroke2, #e0e0e0);
  border-top-color: var(--color-brand-primary, #6264a7);
  border-radius: 50%;
  animation: acs-init-spin 0.9s linear infinite;
}

.acs-init-placeholder-text {
  font-size: 13px;
  color: var(--colorNeutralForeground2, #616161);
}

@keyframes acs-init-spin {
  to {
    transform: rotate(360deg);
  }
}
/* === END GLYDE scope === */
}