:root {
  --sage-chat-navy: #081c33;
  --sage-chat-navy-2: #0e3556;
  --sage-chat-teal: #14aaa7;
  --sage-chat-teal-dark: #087c80;
  --sage-chat-teal-soft: #e6f8f6;
  --sage-chat-bg: #f5f8fc;
  --sage-chat-surface: #ffffff;
  --sage-chat-border: #dbe4ee;
  --sage-chat-text: #10233f;
  --sage-chat-muted: #68778d;
  --sage-chat-green: #159a73;
  --sage-chat-amber: #d67b00;
  --sage-chat-red: #d94747;
  --sage-chat-purple: #625bdc;
}

#ask-sage-root *, #ask-sage-root *::before, #ask-sage-root *::after { box-sizing: border-box; }

.ask-sage-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 58px; height: 58px; border: 0; border-radius: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #19c0b6, #0b858d 58%, #0a385d);
  box-shadow: 0 16px 36px rgba(8, 34, 61, .28), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ask-sage-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(8,34,61,.34); }
.ask-sage-fab svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ask-sage-fab .ask-sage-fab-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #50d297; }

.ask-sage-overlay { position: fixed; inset: 0; z-index: 91; background: rgba(4, 20, 39, .26); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ask-sage-overlay.open { opacity: 1; pointer-events: auto; }

.ask-sage-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 92;
  width: min(570px, calc(100vw - 28px));
  display: grid; grid-template-rows: auto auto minmax(0,1fr) auto;
  color: var(--sage-chat-text); background: var(--sage-chat-surface);
  border-left: 1px solid rgba(255,255,255,.16);
  box-shadow: -28px 0 70px rgba(5, 24, 47, .23);
  transform: translateX(104%); transition: transform .2s ease;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ask-sage-drawer.open { transform: translateX(0); }

.ask-sage-header {
  min-height: 76px; padding: 14px 15px 13px 18px;
  display: flex; align-items: center; gap: 12px; color: #fff;
  background: radial-gradient(circle at 70% -20%, rgba(63, 131, 174, .34), transparent 45%), linear-gradient(110deg, var(--sage-chat-navy-2), var(--sage-chat-navy));
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ask-sage-brand-mark { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #22c7bd, #0b858d); box-shadow: 0 9px 18px rgba(20,170,167,.24); }
.ask-sage-brand-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ask-sage-header-copy { min-width: 0; flex: 1; }
.ask-sage-header-copy strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.ask-sage-header-copy small { display: block; margin-top: 3px; color: #b8cadd; font-size: 10.5px; }
.ask-sage-header-actions { display: flex; gap: 6px; }
.ask-sage-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 9px; }
.ask-sage-icon-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.09); }
.ask-sage-icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ask-sage-context-bar { min-height: 44px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; background: #f8fbfe; border-bottom: 1px solid var(--sage-chat-border); overflow-x: auto; scrollbar-width: none; }
.ask-sage-context-bar::-webkit-scrollbar { display: none; }
.ask-sage-context-label { color: var(--sage-chat-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ask-sage-context-chip { min-height: 25px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; color: #315978; background: #eaf3fb; border: 1px solid #d4e5f4; border-radius: 999px; font-size: 9.5px; font-weight: 650; white-space: nowrap; }
.ask-sage-context-chip.primary { color: var(--sage-chat-teal-dark); background: var(--sage-chat-teal-soft); border-color: #b9e7e1; }
.ask-sage-context-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.ask-sage-body { position: relative; min-height: 0; display: grid; grid-template-columns: 1fr; background: var(--sage-chat-bg); overflow: hidden; }
.ask-sage-messages { min-height: 0; padding: 18px 16px 26px; overflow-y: auto; scroll-behavior: smooth; }
.ask-sage-welcome { padding: 18px; background: linear-gradient(150deg, #fff, #f7fbff); border: 1px solid var(--sage-chat-border); border-radius: 14px; box-shadow: 0 8px 22px rgba(17,35,62,.06); }
.ask-sage-welcome-top { display: flex; align-items: flex-start; gap: 11px; }
.ask-sage-welcome-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--sage-chat-teal-dark); background: var(--sage-chat-teal-soft); border-radius: 10px; }
.ask-sage-welcome-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ask-sage-welcome h3 { margin: 1px 0 4px; font-size: 14px; }
.ask-sage-welcome p { margin: 0; color: var(--sage-chat-muted); font-size: 11px; line-height: 1.55; }
.ask-sage-suggestions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.ask-sage-suggestion { min-height: 31px; padding: 0 10px; color: #395771; background: #fff; border: 1px solid var(--sage-chat-border); border-radius: 8px; font-size: 10px; font-weight: 650; text-align: left; }
.ask-sage-suggestion:hover { color: var(--sage-chat-teal-dark); border-color: #9fdcd6; background: #f3fbfa; }

.ask-sage-message { margin-top: 16px; display: grid; gap: 7px; animation: askSageIn .18s ease both; }
@keyframes askSageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ask-sage-message.user { justify-items: end; }
.ask-sage-message.assistant { justify-items: start; }
.ask-sage-message-meta { display: flex; align-items: center; gap: 7px; color: #8491a3; font-size: 8.5px; }
.ask-sage-message-meta strong { color: #5b6b80; font-size: 9px; }
.ask-sage-bubble { max-width: 92%; padding: 11px 13px; border-radius: 13px; font-size: 11.5px; line-height: 1.58; overflow-wrap: anywhere; }
.ask-sage-message.user .ask-sage-bubble { color: #fff; background: linear-gradient(135deg, #139f9d, #087c80); border-bottom-right-radius: 4px; box-shadow: 0 7px 17px rgba(20,170,167,.17); }
.ask-sage-message.assistant .ask-sage-bubble { width: 100%; max-width: 100%; color: var(--sage-chat-text); background: #fff; border: 1px solid var(--sage-chat-border); border-bottom-left-radius: 4px; box-shadow: 0 5px 16px rgba(17,35,62,.05); }
.ask-sage-bubble p { margin: 0 0 8px; }
.ask-sage-bubble p:last-child { margin-bottom: 0; }
.ask-sage-bubble h2, .ask-sage-bubble h3, .ask-sage-bubble h4 { margin: 13px 0 6px; line-height: 1.3; }
.ask-sage-bubble h2 { font-size: 14px; } .ask-sage-bubble h3 { font-size: 13px; } .ask-sage-bubble h4 { font-size: 12px; }
.ask-sage-bubble ul, .ask-sage-bubble ol { margin: 7px 0 8px 18px; padding: 0; }
.ask-sage-bubble li { margin: 3px 0; }
.ask-sage-bubble code { padding: 2px 5px; color: #25415e; background: #edf3f8; border-radius: 5px; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ask-sage-bubble pre { margin: 9px 0; padding: 11px; overflow-x: auto; color: #dcebf6; background: #0c2138; border-radius: 8px; }
.ask-sage-bubble pre code { padding: 0; color: inherit; background: transparent; }
.ask-sage-citation { min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; color: var(--sage-chat-teal-dark); background: var(--sage-chat-teal-soft); border: 0; border-radius: 999px; font-size: 8px; font-weight: 800; vertical-align: super; }

.ask-sage-working { margin-top: 15px; padding: 12px 13px; display: none; align-items: center; gap: 10px; color: #50647c; background: #fff; border: 1px solid var(--sage-chat-border); border-radius: 11px; font-size: 10px; }
.ask-sage-working.show { display: flex; }
.ask-sage-spinner { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid #cbe9e6; border-top-color: var(--sage-chat-teal); border-radius: 50%; animation: askSageSpin .7s linear infinite; }
@keyframes askSageSpin { to { transform: rotate(360deg); } }
.ask-sage-working-copy { min-width: 0; flex: 1; }
.ask-sage-working-copy strong, .ask-sage-working-copy small { display: block; }
.ask-sage-working-copy small { margin-top: 2px; color: #8996a7; }
.ask-sage-stop { padding: 5px 8px; color: #a53d3d; background: #fff4f4; border: 1px solid #efc9c9; border-radius: 7px; font-size: 9px; font-weight: 700; }

.ask-sage-trace, .ask-sage-sources, .ask-sage-actions { width: 100%; max-width: 100%; }
.ask-sage-trace details { background: #f8fafc; border: 1px solid var(--sage-chat-border); border-radius: 9px; overflow: hidden; }
.ask-sage-trace summary { min-height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: #5f7085; cursor: pointer; font-size: 9px; font-weight: 720; list-style: none; }
.ask-sage-trace summary::-webkit-details-marker { display: none; }
.ask-sage-trace summary svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ask-sage-trace-list { padding: 5px 9px 9px; display: grid; gap: 6px; }
.ask-sage-trace-row { padding: 7px 8px; display: grid; grid-template-columns: 21px minmax(0,1fr) auto; gap: 7px; align-items: center; background: #fff; border: 1px solid #e2e8ef; border-radius: 7px; }
.ask-sage-trace-icon { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px; color: #2e6ecb; background: #e8f1ff; font-size: 9px; }
.ask-sage-trace-row.completed .ask-sage-trace-icon { color: var(--sage-chat-green); background: #e8f8f1; }
.ask-sage-trace-row.failed .ask-sage-trace-icon { color: var(--sage-chat-red); background: #feeeee; }
.ask-sage-trace-row.awaiting_approval .ask-sage-trace-icon { color: var(--sage-chat-amber); background: #fff4df; }
.ask-sage-trace-row strong { display: block; font-size: 9px; }
.ask-sage-trace-row small { display: block; margin-top: 2px; color: #8794a6; font-size: 7.5px; }
.ask-sage-trace-state { color: #7b899c; font-size: 7.5px; font-weight: 750; text-transform: uppercase; }

.ask-sage-sources { margin-top: 2px; padding: 10px; background: #fff; border: 1px solid var(--sage-chat-border); border-radius: 9px; }
.ask-sage-section-label { margin-bottom: 7px; color: #77869a; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ask-sage-source-list { display: grid; gap: 6px; }
.ask-sage-source { width: 100%; padding: 7px 8px; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; gap: 8px; align-items: center; color: inherit; text-align: left; background: #f9fbfd; border: 1px solid #e1e8ef; border-radius: 7px; }
.ask-sage-source:hover { border-color: #addbd7; background: #f2fbfa; }
.ask-sage-source-icon { width: 27px; height: 27px; display: grid; place-items: center; color: var(--sage-chat-teal-dark); background: var(--sage-chat-teal-soft); border-radius: 7px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.ask-sage-source strong, .ask-sage-source small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-sage-source strong { font-size: 9px; } .ask-sage-source small { margin-top: 2px; color: #8492a4; font-size: 7.5px; }
.ask-sage-source-arrow { color: #8593a5; font-size: 12px; }

.ask-sage-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-sage-action { min-height: 30px; padding: 0 10px; color: #315979; background: #edf5fd; border: 1px solid #d3e5f5; border-radius: 7px; font-size: 9px; font-weight: 730; }
.ask-sage-action.primary { color: #fff; background: var(--sage-chat-teal); border-color: var(--sage-chat-teal-dark); }
.ask-sage-action.danger { color: #a33b3b; background: #fff3f3; border-color: #efc7c7; }

.ask-sage-approval { width: 100%; padding: 12px; color: #5d4a27; background: linear-gradient(145deg, #fffaf0, #fff7e8); border: 1px solid #efd7a5; border-radius: 11px; }
.ask-sage-approval-head { display: flex; align-items: flex-start; gap: 9px; }
.ask-sage-approval-icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: var(--sage-chat-amber); background: #fff0d0; border-radius: 8px; }
.ask-sage-approval-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ask-sage-approval h4 { margin: 0; color: #624a20; font-size: 11px; }
.ask-sage-approval p { margin: 4px 0 0; color: #806a43; font-size: 9px; line-height: 1.5; }
.ask-sage-approval-actions { margin-top: 10px; display: flex; gap: 7px; }
.ask-sage-approve, .ask-sage-deny { min-height: 33px; padding: 0 11px; border-radius: 7px; font-size: 9px; font-weight: 760; }
.ask-sage-approve { color: #fff; background: var(--sage-chat-green); border: 1px solid #0f8662; }
.ask-sage-deny { color: #7d5a20; background: #fff; border: 1px solid #dfc897; }
.ask-sage-approval.resolved { opacity: .7; }

.ask-sage-composer { padding: 12px 13px 13px; background: #fff; border-top: 1px solid var(--sage-chat-border); }
.ask-sage-composer-box { padding: 7px 7px 7px 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; background: #f8fafc; border: 1px solid #cdd9e5; border-radius: 12px; box-shadow: inset 0 1px 2px rgba(16,35,63,.03); }
.ask-sage-composer-box:focus-within { border-color: var(--sage-chat-teal); box-shadow: 0 0 0 3px rgba(20,170,167,.1); }
.ask-sage-composer textarea { width: 100%; min-height: 34px; max-height: 126px; padding: 7px 0; resize: none; color: var(--sage-chat-text); background: transparent; border: 0; outline: none; font: 11px/1.5 inherit; }
.ask-sage-composer textarea::placeholder { color: #95a1b1; }
.ask-sage-send { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sage-chat-teal), var(--sage-chat-teal-dark)); border: 0; border-radius: 9px; box-shadow: 0 7px 16px rgba(20,170,167,.18); }
.ask-sage-send:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.ask-sage-send svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.ask-sage-composer-foot { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8b98a9; font-size: 7.5px; }
.ask-sage-model-status { display: inline-flex; align-items: center; gap: 5px; }
.ask-sage-model-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-chat-green); }

.ask-sage-history { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-rows: auto minmax(0,1fr); background: #fff; transform: translateX(103%); transition: transform .18s ease; }
.ask-sage-history.open { transform: translateX(0); }
.ask-sage-history-head { min-height: 52px; padding: 9px 12px 9px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--sage-chat-border); }
.ask-sage-history-head strong { font-size: 12px; }
.ask-sage-history-list { padding: 10px; overflow-y: auto; }
.ask-sage-history-empty { padding: 28px; color: var(--sage-chat-muted); text-align: center; font-size: 10px; }
.ask-sage-session-row { width: 100%; padding: 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; color: inherit; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 9px; }
.ask-sage-session-row:hover, .ask-sage-session-row.active { background: #f4faf9; border-color: #d3ebe8; }
.ask-sage-session-row strong, .ask-sage-session-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-sage-session-row strong { font-size: 10px; } .ask-sage-session-row small { margin-top: 3px; color: #8794a5; font-size: 8px; }
.ask-sage-session-meta { color: #8b98aa; font-size: 7.5px; white-space: nowrap; }

@media (max-width: 640px) {
  .ask-sage-drawer { width: 100vw; }
  .ask-sage-overlay { display: none; }
  .ask-sage-fab { right: 16px; bottom: 16px; }
  .ask-sage-bubble { max-width: 96%; }
}

/* Runtime mode and Azure model selection */
.ask-sage-runtime-control {
  min-height: 43px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: auto auto minmax(112px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  border-bottom: 1px solid var(--sage-chat-border);
}
.ask-sage-runtime-label {
  color: #748398;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ask-sage-runtime-modes {
  padding: 2px;
  display: inline-flex;
  gap: 2px;
  background: #edf2f6;
  border: 1px solid #dce4ec;
  border-radius: 8px;
}
.ask-sage-runtime-modes button {
  min-height: 25px;
  padding: 0 8px;
  color: #68788d;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 7.5px;
  font-weight: 730;
}
.ask-sage-runtime-modes button.active {
  color: #087b80;
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 35, 63, .09);
}
.ask-sage-runtime-modes button:disabled { cursor: not-allowed; opacity: .55; }
#ask-sage-model-select {
  height: 29px;
  padding: 0 8px;
  color: #30475f;
  background: #fff;
  border: 1px solid #cfdbe5;
  border-radius: 7px;
  outline: none;
  font-size: 7.5px;
  font-weight: 680;
}
#ask-sage-model-select:focus { border-color: var(--sage-chat-teal); box-shadow: 0 0 0 3px rgba(20, 170, 167, .08); }
#ask-sage-model-select:disabled { color: #94a0af; background: #f1f4f7; cursor: not-allowed; }
.ask-sage-runtime-effective {
  overflow: hidden;
  color: #697a90;
  font-size: 7.5px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-sage-runtime-effective.warning { color: #a06a12; }

@media (max-width: 520px) {
  .ask-sage-runtime-control {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ask-sage-runtime-modes { justify-self: end; }
  #ask-sage-model-select { grid-column: 1 / -1; width: 100%; }
  .ask-sage-runtime-effective { grid-column: 1 / -1; text-align: left; }
}