/* Load the exact "Segoe UI Web" font that Office / Excel on the web uses, from
   Microsoft's Fabric CDN. Without this the task pane falls back to the OS font
   (e.g. SF Pro on macOS) and visibly mismatches Excel's own chrome (the Share
   button, ribbon, etc.). */
@font-face {
  font-family: "Segoe UI Web (West European)";
  src: url("https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI Web (West European)";
  src: url("https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI Web (West European)";
  src: url("https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Excel / Fluent accent */
  --xl-accent:          #107c41;  /* Excel green */
  --xl-accent-hover:    #0e6b39;
  --xl-accent-pressed:  #0b5a30;
  --xl-accent-tint:     #eaf4ee;  /* very light green wash */

  /* Destructive (Fluent danger) — used for the "Clear chat" action */
  --xl-danger:          #a4262c;
  --xl-danger-tint:     #fdf3f4;

  /* Neutral surfaces */
  --xl-canvas:          #faf9f8;  /* task-pane background */
  --xl-surface:         #ffffff;
  --xl-subtle:          #f3f2f1;  /* neutralLighter */
  --xl-subtle-hover:    #edebe9;  /* neutralLight */

  /* Borders / strokes */
  --xl-border:          #edebe9;
  --xl-border-strong:   #d2d0ce;

  /* Text */
  --xl-text:            #323130;  /* neutralPrimary */
  --xl-text-secondary:  #605e5c;  /* neutralSecondary */
  --xl-text-disabled:   #a19f9d;

  --xl-radius:          4px;
  --xl-shadow:          0 1.6px 3.6px rgba(0,0,0,.10), 0 0.3px 0.9px rgba(0,0,0,.07);

  /* Prefer the CDN-loaded Segoe UI Web first so the typeface matches Excel's
     own UI exactly, even on platforms where a local "Segoe UI" isn't present. */
  --xl-font: "Segoe UI Web (West European)", "Segoe UI", -apple-system,
             BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", sans-serif;
}

/* --------------------------------------------------------------------------
   Page / container layout
   -------------------------------------------------------------------------- */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--xl-canvas);
}

#chat_container {
  height: 100%;
}

#chat {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   quikchat shell
   -------------------------------------------------------------------------- */
.quikchat-base {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none !important;
  background: var(--xl-canvas);
  color: var(--xl-text);
  font-family: var(--xl-font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* No title is set by the app and the host already provides a header, so the
   default "Title Area" placeholder is hidden. */
.quikchat-title-area {
  display: none;
}

/* --------------------------------------------------------------------------
   Messages area
   -------------------------------------------------------------------------- */
.quikchat-messages-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 8px;
  background: var(--xl-canvas);
  scroll-behavior: smooth;

  /* Thin, unobtrusive Fluent-style scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--xl-border-strong) transparent;
}
.quikchat-messages-area::-webkit-scrollbar {
  width: 10px;
}
.quikchat-messages-area::-webkit-scrollbar-thumb {
  background: var(--xl-border-strong);
  border: 3px solid var(--xl-canvas);
  border-radius: 999px;
}
.quikchat-messages-area::-webkit-scrollbar-thumb:hover {
  background: #b3b0ad;
}

/* The library can apply alternating-row helpers; keep them transparent so the
   conversation reads as a single clean surface. */
.quikchat-messages-area-alt .quikchat-message-1,
.quikchat-messages-area-alt .quikchat-message-2 {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Individual messages
   -------------------------------------------------------------------------- */
.quikchat-message {
  font-family: var(--xl-font);
  line-height: 1.5;
  padding: 6px 0;
  background: transparent !important;
}

/* The user-name label is redundant in a 1:1 assistant chat. */
.quikchat-user-label {
  display: none;
}

/* Assistant (left) messages render as plain flowing text on the canvas —
   the conversational, document-like style used across Microsoft Copilot. */
.quikchat-message-content {
  white-space: normal;
  color: var(--xl-text);
  word-break: break-word;
}

/* User (right) messages get a compact neutral bubble aligned to the right. */
.quikchat-message.right-singleline,
.quikchat-message.right-multiline {
  display: flex;
  justify-content: flex-end;
  background-color: initial !important;
}
.quikchat-message.right-singleline .quikchat-message-content,
.quikchat-message.right-multiline .quikchat-message-content {
  display: inline-block;
  max-width: 85%;
  padding: 8px 14px;
  background-color: var(--xl-subtle);
  border: 1px solid var(--xl-border);
  border-radius: 12px 12px 2px 12px;
  color: var(--xl-text);
}

/* --------------------------------------------------------------------------
   Rich markdown content inside messages
   -------------------------------------------------------------------------- */
.quikchat-message-content p {
  margin: 0 0 0.6em;
}
.quikchat-message-content p:last-child {
  margin-bottom: 0;
}
.quikchat-message-content ul,
.quikchat-message-content ol {
  padding-left: 1.6em;
  margin: 0.4em 0 0.6em;
}
.quikchat-message-content li {
  margin: 0.15em 0;
}
.quikchat-message-content a {
  color: var(--xl-accent);
  text-decoration: none;
}
.quikchat-message-content a:hover {
  text-decoration: underline;
}
.quikchat-message-content h1,
.quikchat-message-content h2,
.quikchat-message-content h3,
.quikchat-message-content h4 {
  margin: 0.8em 0 0.4em;
  font-weight: 600;
  line-height: 1.3;
}
.quikchat-message-content h1 { font-size: 1.25em; }
.quikchat-message-content h2 { font-size: 1.15em; }
.quikchat-message-content h3 { font-size: 1.05em; }

/* Inline + block code */
.quikchat-message-content code {
  font-family: "Cascadia Code", "Consolas", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.9em;
  background: var(--xl-subtle);
  border: 1px solid var(--xl-border);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.quikchat-message-content pre {
  background: var(--xl-subtle);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.6em 0;
}
.quikchat-message-content pre code {
  background: none;
  border: none;
  padding: 0;
}

/* Markdown tables — match the Fluent data-grid look used in Excel panes.
   display:block + overflow-x lets a wide table scroll inside the message
   rather than stretching the whole (narrow) task pane. */
.quikchat-message-content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 0.95em;
}
.quikchat-message-content th,
.quikchat-message-content td {
  border: 1px solid var(--xl-border);
  padding: 6px 10px;
  text-align: left;
}
.quikchat-message-content th {
  background: var(--xl-subtle);
  font-weight: 600;
  color: var(--xl-text-secondary);
}
.quikchat-message-content blockquote {
  margin: 0.6em 0;
  padding: 0.2em 0 0.2em 12px;
  border-left: 3px solid var(--xl-border-strong);
  color: var(--xl-text-secondary);
}

/* --------------------------------------------------------------------------
   Input area
   -------------------------------------------------------------------------- */
/* Reflowing layout: the textarea takes a full row and the action buttons wrap
   onto the row(s) below. This keeps everything usable in a narrow Excel task
   pane (~320–400px) instead of letting the button column overflow. */
.quikchat-input-area {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 16px;
  background: var(--xl-surface);
  border-top: 1px solid var(--xl-border);
}

.quikchat-input-textbox,
.quikchat-input-area textarea {
  flex: 1 1 100%;
  min-height: 96px;
  resize: none;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--xl-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--xl-text);
  background: var(--xl-surface);
  border: 1px solid var(--xl-border-strong);
  border-radius: var(--xl-radius);
  outline: none;
  transition: border-color .1s ease, box-shadow .1s ease;
}
.quikchat-input-textbox::placeholder,
.quikchat-input-area textarea::placeholder {
  color: var(--xl-text-disabled);
}
.quikchat-input-textbox:hover,
.quikchat-input-area textarea:hover {
  border-color: var(--xl-text-secondary);
}
.quikchat-input-textbox:focus,
.quikchat-input-area textarea:focus {
  border-color: var(--xl-accent);
  box-shadow: inset 0 0 0 1px var(--xl-accent);
}

/* --------------------------------------------------------------------------
   Buttons (send + injected Clear / Import / Change-columns buttons all share
   the .quikchat-input-send-btn class)
   -------------------------------------------------------------------------- */
/* Sized to match Excel's own Fluent buttons (e.g. the green "Share" button):
   32px tall, 14px regular weight, compact horizontal padding. (Excel's command
   buttons use regular, not Semibold, so 600 looked too bold next to them.) */
.quikchat-input-send-btn {
  flex: 1 1 auto;
  min-width: 84px;
  height: 32px;
  padding: 0 12px;
  font-family: var(--xl-font);
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  background: var(--xl-accent);
  border: 1px solid var(--xl-accent);
  border-radius: var(--xl-radius);
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.quikchat-input-send-btn:hover {
  background: var(--xl-accent-hover);
  border-color: var(--xl-accent-hover);
}
.quikchat-input-send-btn:active {
  background: var(--xl-accent-pressed);
  border-color: var(--xl-accent-pressed);
}
.quikchat-input-send-btn:focus-visible {
  outline: 2px solid var(--xl-text);
  outline-offset: 2px;
}
.quikchat-input-send-btn:disabled {
  background: var(--xl-subtle);
  border-color: var(--xl-border);
  color: var(--xl-text-disabled);
  cursor: default;
}

/* Secondary / less prominent actions rendered as Fluent "default" buttons so
   the panel isn't dominated by green and "Send" reads as the single primary
   action. (Each carries its own marker class in chat.js.) */
.ss-import-btn,
.change-columns-btn {
  background: var(--xl-surface) !important;
  border-color: var(--xl-border-strong) !important;
  color: var(--xl-text) !important;
}
.ss-import-btn:hover,
.change-columns-btn:hover {
  background: var(--xl-subtle) !important;
  border-color: var(--xl-border-strong) !important;
}

/* "Clear chat" is destructive: a neutral outline button with red text that
   intensifies to a light red wash on hover — distinct from the plain secondary
   buttons without shouting like a solid-red primary. */
.clear-btn {
  background: var(--xl-surface) !important;
  border-color: var(--xl-border-strong) !important;
  color: var(--xl-danger) !important;
}
.clear-btn:hover {
  background: var(--xl-danger-tint) !important;
  border-color: var(--xl-danger) !important;
  color: var(--xl-danger) !important;
}

/* --------------------------------------------------------------------------
   Settings button + flyout menu
   -------------------------------------------------------------------------- */
/* The gear sits in the input action row (next to Send / Clear chat) and is the
   positioning context for the menu, which flies up out of it — see
   #settings-panel. */
#settings-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
}

/* A compact icon button matching the height and outline of the other secondary
   action buttons (Clear chat / Select secure columns). */
#settings-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--xl-text-secondary);
  background: var(--xl-surface);
  border: 1px solid var(--xl-border-strong);
  border-radius: var(--xl-radius);
  cursor: pointer;
}
#settings-btn:hover {
  background: var(--xl-subtle);
  color: var(--xl-text);
}
#settings-btn:active {
  background: var(--xl-subtle-hover);
}
#settings-btn:focus-visible {
  outline: 2px solid var(--xl-accent);
  outline-offset: 1px;
}

/* Fluent contextual-menu flyout — flies up out of the gear, left-aligned to it
   (the gear is the leftmost action button, so opening rightward keeps the menu
   on-screen). Width is clamped to the viewport so it can never overflow. */
#settings-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 248px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  display: none;
  font-family: var(--xl-font);
  font-size: 13px;
  color: var(--xl-text);
  background: var(--xl-surface);
  border: 1px solid var(--xl-border-strong);
  border-radius: var(--xl-radius);
  box-shadow: var(--xl-shadow);
  z-index: 1000;
}
#settings-panel.open {
  display: block;
}

/* Menu rows — full-width, left-aligned, transparent until hovered. This is the
   Fluent contextual-menu item look, not the boxed default button the browser
   renders for an unstyled <button>. */
.ss-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 10px;
  font-family: var(--xl-font);
  font-size: 13px;
  line-height: 1.3;
  color: var(--xl-text);
  background: transparent;
  border: none;
  border-radius: var(--xl-radius);
  cursor: pointer;
}
.ss-menu-item:hover {
  background: var(--xl-subtle);
}
.ss-menu-item:active {
  background: var(--xl-subtle-hover);
}
.ss-menu-item:focus-visible {
  outline: 2px solid var(--xl-accent);
  outline-offset: -2px;
}
/* Destructive row (e.g. "Remove plugin from current document"). */
.ss-menu-item-danger {
  color: var(--xl-danger);
}
.ss-menu-item-danger:hover {
  background: var(--xl-danger-tint);
}

/* Secondary helper text shown beneath a menu item (e.g. the export warning). */
.ss-menu-hint {
  padding: 0 10px 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--xl-text-secondary);
}
.ss-menu-hint-warning {
  color: var(--xl-danger);
}

/* --------------------------------------------------------------------------
   API key entry overlay
   -------------------------------------------------------------------------- */
#api-key-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .25);
  z-index: 2000;
}
.api-key-card {
  width: 100%;
  max-width: 360px;
  padding: 20px;
  font-family: var(--xl-font);
  color: var(--xl-text);
  background: var(--xl-surface);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius);
  box-shadow: var(--xl-shadow);
}
.api-key-heading {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}
.api-key-desc {
  font-size: 13px;
  color: var(--xl-text-secondary);
  margin: 0 0 12px;
}
.api-key-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: var(--xl-font);
  font-size: 13px;
  color: var(--xl-text);
  background: var(--xl-surface);
  border: 1px solid var(--xl-border-strong);
  border-radius: var(--xl-radius);
}
.api-key-input:focus {
  outline: none;
  border-color: var(--xl-accent);
}
.api-key-status {
  min-height: 18px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--xl-text-secondary);
}
.api-key-status.error {
  color: var(--xl-danger);
}
.api-key-save-btn {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--xl-font);
  font-size: 13px;
  color: #fff;
  background: var(--xl-accent);
  border: none;
  border-radius: var(--xl-radius);
  cursor: pointer;
}
.api-key-save-btn:hover {
  background: var(--xl-accent-hover);
}
.api-key-save-btn:disabled {
  background: var(--xl-text-disabled);
  cursor: default;
}
.api-key-cancel-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  font-family: var(--xl-font);
  font-size: 13px;
  color: var(--xl-text-secondary);
  background: transparent;
  border: 1px solid var(--xl-border-strong);
  border-radius: var(--xl-radius);
  cursor: pointer;
}
.api-key-cancel-btn:hover {
  background: var(--xl-surface-hover, var(--xl-surface));
  color: var(--xl-text);
}

/* --------------------------------------------------------------------------
   "Bot is thinking" animated dots
   -------------------------------------------------------------------------- */
.thinking-dots span {
  opacity: 0.2;
  font-size: 2em;
  line-height: 0.5;
  color: var(--xl-text-secondary);
  animation: thinking-blink 1.4s infinite both;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinking-blink {
  0%, 80%, 100% { opacity: 0.2; }
  40%           { opacity: 1; }
}