/* --------------------------------------------------------
   Fonts
   -------------------------------------------------------- */

@font-face {
	font-family: '72';
	font-style: normal;
	font-weight: 400;
	src: url('../../resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2') format('woff2'), local('72');
}

@font-face {
	font-family: '72-Light';
	font-style: normal;
	src: url('../../resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2') format('woff2'), local('72-Light');
}

/* ========================================================
   Kanban Board — Fiori Compact Card Design
   ======================================================== */

/* Board — align columns to the top, allow page to scroll vertically */
.ah-board {
  align-items: flex-start !important;
  padding-bottom: 16px;
}

/* Column container */
.ah-col {
  min-width: 0;
}

/* Valid drop zone during drag — subtle highlight to show allowed transitions */
.ah-col-dropzone {
  outline: 2px dashed #0a6ed1 !important;
  outline-offset: -2px;
  
  min-height: 120px !important;
}

/* Column list — fixed max-height so it scrolls within column.
   padding-right reserves space so the thin scrollbar sits INSIDE the column
   and never overlays the card content. */
.ah-col-list.sapMList {
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important; /* inset from right edge — scrollbar lives here */
  box-sizing: border-box;
  /* Thin scrollbar */
  scrollbar-width: thin;
}
.ah-col-list::-webkit-scrollbar       { width: 4px; }

/* Ensure the UL inside doesn't fight the overflow */
.ah-col-list .sapMListItems { overflow: visible !important; }

/* Column header */
.ah-col-header {
  padding: 0 4px 6px 0;
  margin-bottom: 6px;
}
.ah-col-title.sapMTitle {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: 1;
}

/* Column count badge */
.ah-col-badge {
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  padding: 0 5px;
  margin-left: 6px;
  border: 1px solid;
}
.ah-col-badge-running { background: #1a3a5c; color: #8dd0ff; }
.ah-col-badge-review  { background: #4a3a1a; color: #ffd700; }
.ah-col-badge-blocked { background: #4a1a1a; color: #ff9999; }
.ah-col-badge-done    { background: #1a3a2a; color: #81c784; }

/* ── Card ── */
.ah-card.sapMLIB {
  background: #2e3840 !important;
  border: 1px solid #3a4550 !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  transition: box-shadow 0.15s, transform 0.12s !important;
  padding: 0 !important;
}
.ah-card.sapMLIB:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.35) !important;
  transform: translateY(-1px);
}

/* Status variant borders (left accent line) */

/* Card body padding */
.ah-card-body {
  padding: 8px 10px 6px 10px;
}

/* Card top row — priority dot + title */
.ah-card-top {
  gap: 6px;
  align-items: flex-start !important;
  margin-bottom: 6px;
}
.ah-card-title.sapMTitle {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #e0e0e0 !important;
  line-height: 1.3 !important;
  flex: 1;
}

/* Card footer */
.ah-card-footer {
  margin-top: 2px;
}

/* ── Priority dot ── */
.ah-prio {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.ah-prio-critical { background: #cc1919; box-shadow: 0 0 0 2px rgba(204,25,25,0.2); }
.ah-prio-high     { background: #e9730c; }
.ah-prio-medium   { background: #0070d2; }
.ah-prio-low      { background: #8a8a8a; }

/* ── Priority icon colors ── */
.ah-prio-icon-critical.sapUiIcon { color: #cc1919 !important; }
.ah-prio-icon-high.sapUiIcon     { color: #e9730c !important; }
.ah-prio-icon-medium.sapUiIcon   { color: #0070d2 !important; }
.ah-prio-icon-low.sapUiIcon      {  }

/* ── Priority label on card (ObjectStatus) ── */
.ah-prio-label.sapMObjStatus {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Column sort button ── */
.ah-col-sort-btn.sapMBtn {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.ah-col-sort-btn.sapMBtn:hover { opacity: 1; }

/* ── Assignee chip ── */
.ah-avatar-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #e8f0ff;
  color: #0a6ed1;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 0 5px;
  letter-spacing: 0.03em;
}
.ah-avatar-chip-agent {
  background: #e8f5e9;
  color: #1b5e20;
}

/* ── Running animation on card ── */
.ah-card-running.sapMLIB {
  animation: ah-pulse-border 2s ease-in-out infinite !important;
}

/* ── Archived column ── */
.ah-card-archived.sapMLIB {
  opacity: 0.65;
  border-left: 3px solid #555 !important;
}
.ah-card-archived.sapMLIB:hover { opacity: 0.85; }

/* ── Archive icon button ── */
.ah-archive-btn.sapMBtn { height: 20px !important; }
.ah-archive-btn .sapMBtnInner {
  height: 20px !important;
  min-width: 0 !important;
  padding: 0 4px !important;
  
}

/* ── Quick status-move buttons on task cards (Ready/Run/Done) ── */
.ah-quick-btn.sapMBtn {
  height: 20px !important;
}
.ah-quick-btn .sapMBtnInner {
  height: 25px !important;
  min-width: 0 !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

/* ── Running / done icons ── */
.ah-running-icon.sapUiIcon { color: #0a6ed1 !important; }
.ah-done-icon.sapUiIcon    { color: #0a7a2e !important; }

/* ── CustomListItem reset — remove default padding/border ── */
.ah-card .sapMLIBContent { padding: 0 !important; }
.ah-card.sapMLIB .sapMLIBMain { padding: 0 !important; }

/* ── Suppress sap.m.List separators ── */
[id$="backlogList"] .sapMLIBShowSeparator,
[id$="readyList"] .sapMLIBShowSeparator,
[id$="runningList"] .sapMLIBShowSeparator,
[id$="reviewList"] .sapMLIBShowSeparator,
[id$="blockedList"] .sapMLIBShowSeparator,
[id$="doneList"] .sapMLIBShowSeparator {
  border-bottom: none !important;
}

/* ── core:HTML span wrapper reset ── */
.ah-card-top .sapUiHtmlContent,
.ah-card-top > div { display: contents; }

/* ========================================================
   Run Detail Dialog — Info bar + Chat
   ======================================================== */

/* Dialog section must not add its own scrollbar — chat list handles scrolling internally */
.sapMDialogSection.sapUiScrollDelegate {
  overflow: hidden !important;
}

/* ── Status chip (task detail info bar) — plain span, no button ── */
.ah-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 0 10px;
  height: 24px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: none;
  outline: none;
  cursor: default;
  user-select: none;
}
.ah-status-chip-none    { background: #2e3840; color: #aaa; }
.ah-status-chip-success { background: #1a3a28; color: #6fcf97; }
.ah-status-chip-error   { background: #3a1a1a; color: #f47878; }
.ah-status-chip-warning { background: #3a2e10; color: #f0c040; }
.ah-status-chip-info    { background: #1a2a3a; color: #82b4e0; }

/* Available Models panel (RuntimeManagement.controller.js's detail dialog) — one badge per
 * discovered model, reusing .ah-status-chip's pill look on a plain sap.m.Text control (see
 * .ah-task-badge-text.sapMText above for the same "style a Text control via its rendered
 * .sapMText class" convention). .ah-status-chip itself has no gap between instances when several
 * wrap onto multiple lines inside the panel's HBox — this adds that spacing. */
.ah-model-badge.sapMText { margin: 0 6px 6px 0; }

/* ── Three-tab run detail layout ─────────────────────────────────────────── */
/* Tab SegmentedButton in toolbar */
.ah-tab-seg.sapMSegB { border-radius: 6px !important; }
.ah-tab-seg .sapMSegBBtn { min-width: 70px !important; font-size: 12px !important; }
/* Files panel scrolls its own content */
.ah-files-panel { padding: 8px 16px !important; }

/* Run-log dialog: make the content section fill its height and pin reply at bottom.
   Use an `[id$="..."]` suffix selector, not a bare `#__xmlview0--runLogDialog` — the literal
   `__xmlview0` id is only assigned to whichever unnamed XMLView instance happens to be created
   *first* in the whole app session (a global OpenUI5 auto-increment counter), which is NOT
   reliably TaskBoard: on a fresh/expired session, `App.controller.js` instantiates the unnamed
   Login view first (before the router ever mounts TaskBoard), so TaskBoard becomes `__xmlview1`
   (or higher) and these rules silently never matched at all — found live via Miri's "Analyze SAP"
   task, whose long conversation had nowhere bounded to scroll within, so content simply overflowed
   past the dialog with no scrollbar. The `--chatList`/`--reviewList`/etc. selectors elsewhere in
   this file already use this exact suffix-selector pattern for the same reason; this was the one
   place it was missed. */
[id$="--runLogDialog"] .sapMDialogSection {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
[id$="--runLogDialog"] .sapMDialogScrollCont {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  height: auto !important;
  width: 100% !important;
}
[id$="--runLogDialog"] .sapMDialogScroll {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  height: auto !important;
  width: 100% !important;
}
.ah-dialog-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
}
.ah-dialog-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* Artifact tree */
.ah-artifact-tree.sapMTree  { background: transparent !important; }
.ah-artifact-tree .sapMTreeItemBase { background: transparent !important; border-bottom: none !important; }
.ah-artifact-row { width: 100%; min-height: 32px; }
.ah-artifact-icon { flex-shrink: 0; }

/* Workspace Files tab — tree fills full tab height */

.ah-reply-section {
  flex: 0 0 auto !important;
  border-top: 1px solid #2e3840 !important;
  padding: 8px 16px !important;
  margin: 0 !important;
}

/* Thin info bar at top of dialog content */
.ah-task-detail-infobar.sapMTB {
  background: transparent !important;
  border-bottom: 1px solid #2e3840 !important;
  padding: 0 4px !important;
  min-height: 40px !important;
  height: 40px !important;
  margin-bottom: 4px;
}

/* Agent chip */
.ah-agent-chip.sapMBtn .sapMBtnInner {
  background: #2a3440 !important;
  border: 1px solid #3a4550 !important;
  border-radius: 14px !important;
  color: #c8d8e8 !important;
  padding: 0 10px !important;
  height: 26px !important;
  min-height: 26px !important;
  font-size: 12px !important;
  transition: background 0.15s;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ah-agent-chip.sapMBtn .sapMBtnContent {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
/* Injected avatar inside the agent chip button */
.ah-agent-chip.sapMBtn .ah-chip-avatar-img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 6px !important;
  flex-shrink: 0;
  vertical-align: middle;
}
.ah-agent-chip.sapMBtn .ah-chip-avatar-fallback {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #3a4a5a !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
  flex-shrink: 0;
  color: #c8d8e8 !important;
}
.ah-agent-chip.sapMBtn:hover .sapMBtnInner {
  background: #354050 !important;
  border-color: #5a7090 !important;
}
.ah-agent-chip.sapMBtn:focus .sapMBtnInner,
.ah-agent-chip.sapMBtn:active .sapMBtnInner,
.ah-agent-chip.sapMBtn.sapMBtnActive .sapMBtnInner {
  outline: none !important;
  box-shadow: none !important;
  border-color: #3a4550 !important;
  background: #2a3440 !important;
}

/* Chat list — scrolling handled by parent .ah-dialog-scroll */
.ah-chat-list .sapMListUl {
  overflow: visible !important;
}
.ah-chat-list.sapMList {
  border: 1px solid #3a4550;
  border-radius: 6px;
  background: #1d232a;
  margin-bottom: 8px;
  overflow: hidden !important;
}

.ah-chat-bubble-wrap { padding: 2px 0; }

.ah-chat-sender { font-size: 12px; font-weight: 600; }

.ah-ts { color: #888; font-size: 11px; }

/* ── Copy-to-clipboard button on agent chat messages ── */
.ah-copy-msg-btn.sapMBtn {
  width: 1.5rem !important;
  height: 1.5rem !important;
}
.ah-copy-msg-btn .sapMBtnInner {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.ah-copy-msg-btn .sapMBtnIcon { font-size: 0.75rem !important; color: #888 !important; }
.ah-copy-msg-btn:hover .sapMBtnIcon { color: #ccc !important; }

.ah-chat-text code {
  font-family: monospace;
  background: #2e3840;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Log textarea — dark theme */
.ah-log-area .sapMTextAreaInner {
  font-family: "Courier New", monospace !important;
  font-size: 12px !important;
  background: #1e1e2e !important;
  color: #cdd6f4 !important;
  border-radius: 4px;
}

/* Workspace files panel */
.ah-file-item.sapMLIB { padding: 0 !important; }
.ah-file-icon.sapUiIcon { color: #0a6ed1; flex-shrink: 0; }
.ah-file-info { flex: 1; min-width: 0; }
.ah-file-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-file-size { font-size: 11px; color: #888; }
.ah-dl-btn.sapMBtn .sapMBtnInner { color: #666 !important; }
.ah-del-btn.sapMBtn:hover .sapMBtnInner { color: #cc1919 !important; }

/* Reply section */
.ah-reply-section { border-top: 1px solid #3a4550; padding-top: 8px; }

.ah-attach-label {
  color: #999; font-size: 12px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Header title colour variants for terminal states */


/* Log area */
.ah-log-area textarea,
.ah-log-area .sapMTextAreaInner {
  font-family: "Courier New", monospace !important;
  font-size: 12px !important;
  background: #1e1e2e !important;
  color: #cdd6f4 !important;
  border-radius: 4px;
}



/* chatList outer div must NOT scroll — only the inner ul scrolls */
#__xmlview0--chatList,
[id$="--chatList"] {
  overflow: hidden !important;
}

/* ── Markdown rendering inside chat bubbles ────────────────────────────────── */

/* Inline code */
.ah-chat-text code,
[id$="--chatList"] code {
  font-family: "Fira Mono", "Consolas", monospace;
  background: #1e2a35;
  color: #7ec8e3;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.88em;
}

/* Fenced code blocks */
.ah-chat-text pre,
[id$="--chatList"] pre {
  background: #1a2330;
  border: 1px solid #2e3f50;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 8px 0;
  overflow-x: auto;
  white-space: pre;
}
.ah-chat-text pre code,
[id$="--chatList"] pre code {
  background: transparent;
  color: #cdd6f4;
  padding: 0;
  font-size: 0.85em;
  border-radius: 0;
}

/* Blockquote */
.ah-chat-text blockquote,
[id$="--chatList"] blockquote {
  border-left: 3px solid #0a6ed1;
  margin: 6px 0;
  padding: 4px 12px;
  color: #aab4c0;
  font-style: italic;
}

/* Headings — scaled down so they fit in chat context */
.ah-chat-text h1, [id$="--chatList"] h1 { font-size: 1.15em; font-weight: 700; margin: 8px 0 4px; }
.ah-chat-text h2, [id$="--chatList"] h2 { font-size: 1.08em; font-weight: 700; margin: 8px 0 4px; }
.ah-chat-text h3, [id$="--chatList"] h3 { font-size: 1.0em;  font-weight: 600; margin: 6px 0 3px; }
.ah-chat-text h4, [id$="--chatList"] h4 { font-size: 0.95em; font-weight: 600; margin: 4px 0 2px; }

/* Lists */
.ah-chat-text ul, .ah-chat-text ol,
[id$="--chatList"] ul, [id$="--chatList"] ol {
  margin: 4px 0 4px 18px;
  padding: 0;
}
.ah-chat-text li, [id$="--chatList"] li { margin: 2px 0; }

/* Tables */
.ah-chat-text table,
[id$="--chatList"] table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 0.88em;
}
.ah-chat-text th, .ah-chat-text td,
[id$="--chatList"] th, [id$="--chatList"] td {
  border: 1px solid #2e3f50;
  padding: 5px 10px;
  text-align: left;
}
.ah-chat-text th, [id$="--chatList"] th {
  background: #1e2a35;
  font-weight: 600;
  color: #7ec8e3;
}
.ah-chat-text tr:nth-child(even), [id$="--chatList"] tr:nth-child(even) {
  background: #1a2530;
}

/* Horizontal rule */
.ah-chat-text hr, [id$="--chatList"] hr {
  border: none;
  border-top: 1px solid #2e3f50;
  margin: 10px 0;
}

/* Paragraphs — avoid double spacing */
.ah-chat-text p, [id$="--chatList"] p {
  margin: 0 0 6px;
}
.ah-chat-text p:last-child, [id$="--chatList"] p:last-child {
  margin-bottom: 0;
}

/* Links */
.ah-chat-text a, [id$="--chatList"] a {
  color: #4a9eff;
  text-decoration: underline;
}

/* --------------------------------------------------------
   Run Detail Dialog — "Agent is working" button animation
   -------------------------------------------------------- */

@keyframes ah-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ah-working-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Spinner via ::before on the button's inner span.
   position:relative on parent is required for absolute ::before. */
.ah-working-btn .sapMBtnInner {
  position: relative !important;
  padding-left: 28px !important;
  animation: ah-working-pulse 1.8s ease-in-out infinite !important;
}

.ah-working-btn .sapMBtnInner::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  margin-top: -7px !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid currentColor !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  animation: ah-spin 0.8s linear infinite !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------
   Task Board — Review column highlight
   -------------------------------------------------------- */

.ah-review-column > .sapMTitle {
  color: #e9730c;
}

/* Subtle left border on review cards */
[id$="--reviewList"] .sapMLIB {
  border-left: 3px solid #e9730c !important;
}

/* --------------------------------------------------------
   Task Board — Running task animation
   -------------------------------------------------------- */

/* --------------------------------------------------------
   Sidebar — fixed to viewport, full-height left drawer
   -------------------------------------------------------- */
.ah-sidebar {
  position: fixed;
  top: 48px;
  left: 0;
  width: 250px;
  height: calc(100vh - 48px);
  background: #1d232a !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.4);
  /* Deliberately a low single-digit value, NOT 1000 — found live: a `sap.m.Select`'s native
     popover (e.g. the workspace switcher's dropdown list, `App.view.xml`'s `workspaceSelect`,
     itself a child of this sidebar) is appended by UI5 to a separate top-level `#sap-ui-static`
     container and gets its own dynamically-assigned `z-index` from UI5's internal Popup registry
     — confirmed via direct DOM inspection to be as low as `10` for the very first popup opened in
     a session. A z-index of `1000` here (this app's original value) sat ABOVE that popover, so it
     rendered visually underneath this sidebar and was completely invisible/unclickable even though
     it was genuinely open in the DOM with correct data (a real Playwright session against
     `christopher.bouveret@simplifier.io`'s account reproduced this exactly: the popup's own
     computed style showed `display: flex; opacity: 1`, but `document.elementsFromPoint(...)` at
     its own coordinates returned this sidebar's elements on top of it). Any value from `1`-`9` is
     safe here — comfortably above ordinary un-positioned page content (which needs no explicit
     z-index to lose to a `position: fixed` element in the first place) and comfortably below every
     UI5 popup/dialog this app opens (confirmed a plain `sap.m.Select` popover already starts at
     `10`; `sap.m.Dialog`s observed even higher). Keep `.ah-backdrop` immediately below this value if
     either is ever changed again — see that rule's own comment. */
  z-index: 3;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
html .ah-sidebar.sapMVBox {
  background: #1d232a !important;
}
.ah-sidebar .sapMList,
html .ah-sidebar .sapMList {
  flex: 1;
  min-height: 0;
  background: #1d232a !important;
}
.ah-sidebar-open {
  transform: translateX(0);
}
/* --------------------------------------------------------
   Workspace switcher — fixed at top of sidebar, Administrator-only
   (specs/004-workspace-management)
   -------------------------------------------------------- */
.ah-workspace-switcher {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.ah-workspace-actions {
  margin-top: 0.375rem;
}
/* The Workspace Select alone in its own row, flexing to fill the full row width. Targets
 * .ah-workspace-select (a custom class added directly, not sap.m.Select's own internal rendered
 * class) so this doesn't depend on knowing/guessing an OpenUI5-internal class name. Workspace
 * Settings used to share this row (hence the row wrapper still existing) — moved into
 * .ah-workspace-actions below, grouped next to Edit Workspace, since it crowded the dropdown here. */
.ah-workspace-select-row .ah-workspace-select {
  flex: 1 1 auto;
  min-width: 0;
}
/* --------------------------------------------------------
   Auth gate — full-viewport overlay shown until authenticated
   (specs/005-standalone-authentication)
   -------------------------------------------------------- */
.ah-auth-gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: #1d232a;
  display: flex;
}
.ah-login-box {
  width: 100%;
}
.ah-login-panel {
  background: #262e38;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
/* --------------------------------------------------------
   Workspace Settings — header panel (view/WorkspaceSettings.view.xml)
   -------------------------------------------------------- */
.ah-settings-header-panel .sapMPanelHdr {
  background: transparent;
  border-bottom: none;
  padding: 0.5rem 1rem;
}
/* --------------------------------------------------------
   Backdrop — transparent overlay behind sidebar
   -------------------------------------------------------- */
.ah-backdrop.sapMBtn {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Must stay just below .ah-sidebar's own z-index (see that rule's comment for why both are
     deliberately low single-digit values, not the original 999/1000) — this backdrop needs to
     render behind the sidebar but in front of ordinary page content, to catch outside clicks. */
  z-index: 2;
  padding: 0;
  border: none;
  min-width: 0;
  min-height: 0;
}
.ah-backdrop .sapMBtnInner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------
   Agent cards — grid layout, 2 columns
   -------------------------------------------------------- */
.ah-card-grid.sapMList {
  background: transparent;
  border: none;
  box-sizing: border-box;
  width: 100%;
}
.ah-card-grid .sapMListItems {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.ah-card-item.sapMLIB {
  background: #2e3840;
  border: 1px solid #3a4550;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: box-shadow 0.2s, transform 0.15s;
}
.ah-card-item.sapMLIB:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}
.ah-card-item .sapMLIBContent {
  padding: 0 !important;
}
.ah-card-avatar.sapMAvatar {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 9px !important;
}
.ah-desc-text {
  display: block;
  width: 100%;
}
/* Model suggestion chips in AgentDetail */
.ah-model-chip.sapMBtn .sapMBtnInner {
  border: 1px solid #3a4550 !important;
  border-radius: 12px !important;
  padding: 0 10px !important;
  height: 26px !important;
  min-height: 26px !important;
  font-size: 11px !important;
  color: #b0d4f1 !important;
  background: #1d2830 !important;
  margin: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ah-model-chip.sapMBtn .sapMBtnContent {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.ah-model-chip.sapMBtn:hover .sapMBtnInner {
  background: #2a3a4a !important;
  border-color: #5a7090 !important;
}

/* Skill script editor / preview */
.ah-script-preview .sapMTextAreaInner,
.ah-script-editor .sapMTextAreaInner {
  font-family: "Courier New", Consolas, monospace !important;
  font-size: 12px !important;
  background: #1e1e2e !important;
  color: #cdd6f4 !important;
  border-radius: 4px;
}

.ah-task-badge-text.sapMText {
  font-size: 11px;
  color: #888;
}

.ah-card-desc.sapMText {
  font-size: 12px;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --------------------------------------------------------
   Header toolbar — main app header
   -------------------------------------------------------- */
#headerToolbar.sapMTB {
  background: #105577;
}
#headerToolbar .sapMBtn .sapMBtnInner,
#headerToolbar .sapMBtn .sapUiIcon {
  color: #ffffff !important;
}

/* --------------------------------------------------------
   MCP Server grid cards
   -------------------------------------------------------- */
.ah-mcp-grid .sapMListItems {
  grid-template-columns: 1fr 1fr;
}
.ah-mcp-card.sapMLIB {
  background: #2e3840;
  border: 1px solid #3a4550;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ah-mcp-card .sapMLIBContent { padding: 0 !important; }
.ah-mcp-icon.sapUiIcon { color: #1c98d5; font-size: 1rem; }
.ah-mcp-command { font-family: monospace; font-size: 12px; color: #b0c4d4; }
.ah-mcp-label { font-size: 11px; color: #888; min-width: 32px; }
.ah-mcp-connect-btn .sapMBtnInner { color: #1c98d5 !important; font-size: 12px !important; }
.ah-mcp-value { font-size: 12px; color: #ccc; }
.ah-mcp-status-msg { font-size: 11px; color: #888; font-style: italic; }

/* --------------------------------------------------------
   Register Runtime Dialog — VBox margin/padding
   -------------------------------------------------------- */
.ah-register-dialog-vbox {
  padding: 2rem 2rem 1rem 2rem !important;
}
.ah-register-dialog-section {
  margin-bottom: 1.25rem !important;
}

/* ── MCP dialog form layout */
.ah-mcp-dialog-content {
  padding: 16px;
  box-sizing: border-box;
  gap: 4px;
}
.ah-mcp-dialog-content .sapMLabel {
  margin-top: 12px;
  display: block;
}
.ah-mcp-dialog-content .sapMLabel:first-child {
  margin-top: 0;
}
.ah-mcp-name-box { flex: 1; min-width: 0; }

/* Avatar upload */
.ah-avatar-clickable { cursor: pointer; transition: opacity 0.15s; }
.ah-avatar-clickable:hover { opacity: 0.75; }
.ah-avatar-hint.sapMText { font-size: 11px; color: #888; }

/* Agent detail profile tab layout */
.ah-avatar-col {
  flex-shrink: 0;
  width: 9rem;
  text-align: center;
}
.ah-profile-fields {
  width: 22rem;
  max-width: 22rem;
  flex-shrink: 0;
}

/* Agent detail — 3x avatar (default M ~2.5rem → 7.5rem) */
.ah-avatar-large.sapMAvatar {
  width:  7.5rem !important;
  height: 7.5rem !important;
  min-width: 7.5rem !important;
  font-size: 3rem !important;
  border-radius: 50% !important;
}
.ah-avatar-large.sapMAvatar .sapMavatarImage {
  width:  7.5rem !important;
  height: 7.5rem !important;
}

/* Agent list — top margin only; side padding lives on .sapMListItems */
.ah-agent-list.sapMList {
  margin-top: 0.5rem !important;
}

/* Project list — same card-grid layout as Agents, top margin only */
.ah-project-list.sapMList {
  margin-top: 0.5rem !important;
}

.ah-mcp-dialog-content .sapMInput,
.ah-mcp-dialog-content .sapMTextArea {
  width: 100% !important;
  margin-top: 4px;
}

/* --------------------------------------------------------
   SubHeader — route-specific title + action buttons
   -------------------------------------------------------- */
.ah-subheader.sapMTB {
  border-bottom: 1px solid #2e3840;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
}

/* --------------------------------------------------------
   Nav list in sidebar — fill remaining height, scroll
   -------------------------------------------------------- */
.ah-nav-list.sapMList {
  border: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

@keyframes ah-pulse-border {
  0%   { box-shadow: 0 0 0 0 rgba(10, 110, 209, 0.55); }
  60%  { box-shadow: 0 0 0 5px rgba(10, 110, 209, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 110, 209, 0); }
}

@keyframes ah-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Applied to <li> DOM nodes of items in the Running column */
.ah-task-running {
  animation: ah-pulse-border 2s ease-in-out infinite;
  border-left: 3px solid #0a6ed1 !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer stripe sweeping across the card */
.ah-task-running::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(10, 110, 209, 0.08) 45%,
    rgba(10, 110, 209, 0.15) 50%,
    rgba(10, 110, 209, 0.08) 55%,
    transparent 100%
  );
  background-size: 400px 100%;
  animation: ah-shimmer 2s linear infinite;
  pointer-events: none;
}

/* --------------------------------------------------------
   Page defaults
   -------------------------------------------------------- */

body {
	box-sizing: border-box;
	font-family: "72", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #666;
	font-weight: normal;
	margin: 10px 0;
}

p {
	margin: 12px 0 16px 0;
}

a {
	text-decoration: none;
	color: #1366a2;
}

a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------
   Header
   -------------------------------------------------------- */

.header {
	background-color: #1366a2;
	height: 600px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.header .background {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	width: 1920px;
	height: 1398px;
	transform: translate(-499px,-398px);
	opacity: .5;
}

.header .inner {
	margin: 20px;
	position: relative;
}

.header .content {
	margin-top: 166px;
	padding-top: 103px;
}

.header .content > .openui5 {
	margin: auto;
	width: 264px;
}

.header .headline {
	color: white;
	font-family: "72-Light", Arial, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2em;
	text-align: center;
}

@media (max-width: 1440px) {
	.header {
		height: 480px;
	}
	.header .background {
		width: 1800px;
		height: 1311px;
		transform: translate(-700px,-415px);
	}
	.header .content {
		margin-top: 125px;
		padding-top: 82px;
	}
}

@media (max-width: 980px) {
	.header {
		height: 465px;
	}
	.header .background {
		width: 1700px;
		height: 1238px;
		transform: translate(-900px,-386px);
	}
}

@media (max-width: 767px) {
	.header {
		height: 300px;
	}
	.header .background {
		width: 1200px;
		height: 874px;
		transform: translate(-600px,-286px);
	}
	.header .content {
		margin-top: 65px;
		padding-top: 64px
	}
	.header .content > .openui5 {
		width: 198px;
	}
	.header .headline {
		font-size: 24px;
	}
}

/* --------------------------------------------------------
   Content Area
   -------------------------------------------------------- */

.main-content {
	max-width: 800px;
	text-align: center;
	margin: auto;
}

.main-content .margin-box {
	margin: 20px;
}

.main-content h2 {
	font-family: "72", Arial, sans-serif;
	font-size: 33px;
}

.codeblock .margin-box {
	margin: 20px;
}

.codeblock {
	background-color: white;
	border-radius: 4px;
	box-shadow: none;
	color: black;
	font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
	font-size: 14px;
	line-height: 1.2rem;
	overflow: auto;
	text-align: left;
	width: 100%;
	margin-bottom: 20px;
}

.codeblock .meta {
	color: #888;
}

.codeblock .tag {
	color: #1366a2;
}

.codeblock .name {
	color: #1366a2;
}

.codeblock .local {
	color: rgba(34, 34, 34, 0.6);
}

.codeblock .attr {
	color: #666;
}

.codeblock .kwd {
	color: rgb(9, 113, 241);
	font-weigt: bold;
	font-style: italic;
}

.codeblock .str {
	color: rgb(176, 90, 242);
}

.codeblock .highlight {
	color: rgb(255, 0, 0);
	font-style: italic;
	font-weight: bold;
	background-color: rgba(255, 255, 0, 0.25);
}

/* --------------------------------------------------------
   Footer
   -------------------------------------------------------- */

.footer {
	background-color: #1366a2;
}

.footer .margin-box {
	padding: 20px;
}

.footer .copyright {
	color: white;
}

/* --------------------------------------------------------
   Greek design element — fixed bottom-right, all views
   -------------------------------------------------------- */

@keyframes ah-greek-drift {
  0%   { transform: translateY(0px) scale(1);      opacity: 0.13; }
  40%  { transform: translateY(-14px) scale(1.01); opacity: 0.20; }
  70%  { transform: translateY(-7px) scale(0.99);  opacity: 0.15; }
  100% { transform: translateY(0px) scale(1);      opacity: 0.13; }
}

.ah-greek-symbols {
  display: none !important;
  position: fixed;
  bottom: -1vw;
  right: 1vw;
  font-size: 18vw;
  line-height: 1;
  font-family: "Georgia", "Times New Roman", serif;
  color: #b0d4f1;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  z-index: 1;
  animation: ah-greek-drift 14s ease-in-out infinite;
  transform-origin: bottom right;
}

/* App version badge — sits just below the Greek design element, bottom-right corner,
   all views. Text is set in App.controller.js from manifest.json's applicationVersion.
   A real sap.m.Button (clickable — opens the Changelog dialog) styled to look like plain text:
   all button chrome stripped, only a hover/focus affordance added back in. */
.ah-version-badge.sapMBtn {
  position: fixed;
  bottom: 0.5rem;
  right: 1rem;
  z-index: 2;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-width: 0 !important;
}
.ah-version-badge .sapMBtnInner {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  height: auto !important;
  min-width: 0 !important;
}
.ah-version-badge .sapMBtnContent,
.ah-version-badge .sapMBtnDefault .sapMBtnContent {
  font-size: 11px;
  color: #7a90a8;
  opacity: 0.55;
  user-select: none;
  cursor: pointer;
}
.ah-version-badge:hover .sapMBtnContent { opacity: 0.9; text-decoration: underline; }

/* Presence button — green icon when collaboration is active */
.ah-collab-active .sapMBtnIcon { color: #2ecc71 !important; }

.ah-presence-badge {
  position: absolute;
  top: 8px;
  right: -1px;
  background: #e74c3c;
  color: white;
  font-size: 9px;
  font-weight: bold;
  min-width: 10px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  padding: 0 3px;
  pointer-events: none;
}

.ah-max-width-44 { max-width: 44rem; }
.ah-transparent-toolbar { background: transparent !important; border: none !important; }

/* Clickable InfoLabel badge — makes the status badge in SkillDetail feel interactive */
.ah-clickable-badge { cursor: pointer; }
.ah-clickable-badge:hover { opacity: 0.85; }

/* ── Changelog dialog (opened from the version badge) — release-style version history,
   grouped by version, newest first. Deliberately distinct from AuditLog.view.xml's flat
   per-action event table: this is "what changed in each release", not "who did what when".
   The Dialog's own contentHeight does NOT actually clip/scroll its content here (confirmed
   empirically — .sapMDialogScrollCont renders with overflow-y:visible/max-height:none
   regardless of contentHeight, so a long list simply overflows past the dialog's visible
   bounds instead of scrolling within it) — force scrolling directly on the list instead. */
.ah-changelog-list.sapMList {
  max-height: 460px;
  overflow-y: auto;
  display: block;
}
.ah-changelog-item.sapMLIB { border-bottom: 1px solid rgba(255,255,255,0.06); }
.ah-changelog-version { color: #e8edf2; }
.ah-changelog-date { color: #7a90a8; font-size: 12px; }
.ah-changelog-category.sapMObjStatus { flex-shrink: 0; min-width: 5.5rem; }
.ah-changelog-text { color: #c8d2db; font-size: 13px; }

/* --------------------------------------------------------
   Runtime Management — card status accents
   -------------------------------------------------------- */

/* Selected card highlight */
.aghCardSelected.sapMGT {
  box-shadow: 0 0 0 2px #0a6ed1 !important;
  outline: 2px solid #0a6ed1;
}

/* Left border accent by status */
.aghRuntimeHealthy.sapMGT .sapMGTHdrContent {
  border-top: 3px solid #107E3E !important;
}
.aghRuntimeDegraded.sapMGT .sapMGTHdrContent {
  border-top: 3px solid #E9730C !important;
}
.aghRuntimeUnhealthy.sapMGT .sapMGTHdrContent {
  border-top: 3px solid #BB0000 !important;
}

/* ── Chat: log-style entries (agent work output inline in chat) ──────────── */
.ah-chat-log-entry {
  padding: 2px 12px;
}
.ah-chat-log-row {
  padding: 1px 0;
}
.ah-chat-log-entry .ah-ts {
  font-size: 10px;
  color: #4a6070;
  min-width: 68px;
  font-family: monospace;
}
.ah-chat-log-msg {
  font-size: 11px;
  color: #8ab0c8;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ah-chat-log-detail {
  font-size: 11px;
  color: #5a8070;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  padding-left: 78px;
  margin-top: 1px;
}

/* ── Run-log: rich section cards ─────────────────────────────────────────── */
.ah-sections-wrap { gap: 4px; }

.ah-section-card.sapMPanel {
  background: #1c2530 !important;
  border: 1px solid #2e3840 !important;
  border-radius: 6px !important;
  margin-bottom: 4px !important;
}
.ah-section-card .sapMPanelHdr {
  background: #202d3a !important;
  border-radius: 6px 6px 0 0 !important;
  font-size: 12px !important;
  color: #a0b4c8 !important;
  padding: 6px 10px !important;
  min-height: 32px !important;
}
.ah-section-card .sapMPanelContent { padding: 4px 0 !important; }

.ah-section-icon { font-size: 1rem; }

.ah-tool-item-list.sapMList { background: transparent !important; }
.ah-tool-row.sapMLIB { background: transparent !important; border-bottom: none !important; padding: 0 !important; }

.ah-tool-name  { font-size: 12px; font-weight: 600; color: #c8d8e8; }
.ah-tool-detail { font-size: 11px; color: #7a9ab8; white-space: pre-wrap; word-break: break-all; }

.ah-tool-status-icon { flex-shrink: 0; }

/* ── Documentation page (specs/008-in-app-documentation) ─────────────────── */
.ah-docs-layout {
  align-items: stretch;
  height: calc(100vh - 6rem);
}
.ah-docs-toc {
  width: 16rem;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #2e3840;
}
.ah-docs-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.5rem;
}

/* Same dark-theme Markdown palette as .ah-chat-text, but at full document scale
   (not scaled down for a chat-bubble context) since this is a dedicated reading page. */
.ah-docs-content-html h1 { font-size: 1.6em; font-weight: 700; margin: 0.6em 0 0.3em; }
.ah-docs-content-html h2 { font-size: 1.3em; font-weight: 700; margin: 0.9em 0 0.3em; }
.ah-docs-content-html h3 { font-size: 1.1em; font-weight: 600; margin: 0.8em 0 0.3em; }
.ah-docs-content-html h4 { font-size: 1.0em; font-weight: 600; margin: 0.7em 0 0.3em; }
.ah-docs-content-html p  { line-height: 1.6; margin: 0.5em 0; }
.ah-docs-content-html ul, .ah-docs-content-html ol { margin: 0.5em 0 0.5em 1.4rem; }
.ah-docs-content-html li { margin: 0.2em 0; line-height: 1.5; }

.ah-docs-content-html code {
  font-family: "Fira Mono", "Consolas", monospace;
  background: #1e2a35;
  color: #7ec8e3;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}
.ah-docs-content-html pre {
  background: #1a2330;
  border: 1px solid #2e3f50;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0.8em 0;
  overflow-x: auto;
  white-space: pre;
}
.ah-docs-content-html pre code {
  background: transparent;
  color: #cdd6f4;
  padding: 0;
  font-size: 0.9em;
}
.ah-docs-content-html blockquote {
  border-left: 3px solid #0a6ed1;
  margin: 0.6em 0;
  padding: 4px 14px;
  color: #aab4c0;
  font-style: italic;
}
.ah-docs-content-html table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.8em 0;
  font-size: 0.92em;
}
.ah-docs-content-html th, .ah-docs-content-html td {
  border: 1px solid #2e3f50;
  padding: 6px 12px;
  text-align: left;
}
.ah-docs-content-html th { background: #1e2a35; font-weight: 600; color: #7ec8e3; }
.ah-docs-content-html tr:nth-child(even) { background: #1a2530; }
.ah-docs-content-html a { color: #7ec8e3; }
.ah-docs-content-html img { width: 50% !important; height: auto !important; border-radius: 4px; }
.ah-docs-content-html hr { border: none; border-top: 1px solid #2e3840; margin: 1em 0; }

/* ── Active project selector in title bar ────────────────────────────────── */
.ah-project-select.sapMSlt { font-size: 13px !important; }
.ah-project-select .sapMSltLabel { font-size: 13px !important; }

/* ── Skill Registry list ─────────────────────────────────────────────────── */
.ah-skill-name { font-size: 14px; font-weight: 600; }
.ah-skill-desc { font-size: 12px; color: #7a8a9a; }
.ah-skill-agents { flex-shrink: 0; gap: 2px; }
.ah-skill-more-agents { font-size: 11px; color: #5a6a7a; padding-left: 4px; }

/* ── Knowledge page ───────────────────────────────────────────────────────── */
.ah-folder-meta { font-size: 11px; color: #5a6a7a; }

/* ── Guardrails switches ──────────────────────────────────────────────────── */
.ah-guardrails-label { font-size: 13px; }
.ah-guardrails-panel.sapMPanel { margin-bottom: 4px !important; }
.ah-guardrails-panel .sapMPanelHdr { background: #1c2530 !important; font-size: 13px !important; padding: 6px 10px !important; min-height: 28px !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Logo: desktop vs mobile */
.ah-logo-desktop { display: inline !important; }
.ah-logo-mobile  { display: none !important; }

/* Kanban: desktop horizontal vs mobile vertical tabs */
.ah-kanban-desktop { display: flex !important; }
.ah-kanban-mobile  { display: none !important; }

/* Agent cards: desktop horizontal (XL avatar) vs mobile vertical (M avatar) */
.ah-agent-card-desktop { display: flex !important; }
.ah-agent-card-mobile  { display: none !important; }

/* Project cards: desktop horizontal (XL avatar) vs mobile vertical (M avatar) */
.ah-project-card-desktop { display: flex !important; }
.ah-project-card-mobile  { display: none !important; }

@media (max-width: 599px) {
  .ah-logo-desktop       { display: none !important; }
  .ah-logo-mobile        { display: inline !important; }
  .ah-kanban-desktop     { display: none !important; }
  .ah-kanban-mobile      { display: flex !important; }
  .ah-agent-card-desktop { display: none !important; }
  .ah-agent-card-mobile  { display: flex !important; }
  .ah-project-card-desktop { display: none !important; }
  .ah-project-card-mobile  { display: flex !important; }
  .ah-folder-search      { width: 10rem !important; }
  .ah-project-select     { width: 5rem  !important; }
  .ah-dashboard-title    { font-size: 1.5rem !important; }
  .ah-dashboard-tile     { width: 100% !important; }
  .ah-activity-when      { width: 5rem !important; }
}
/* MCP server badge in context view */
.ah-mcp-badge {
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.ah-mcp-badge-name {
    font-size: 0.8125rem;
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Interactive question / permission cards (specs/015-run-interactivity) ── */
.ah-interaction-card {
  background: #1c2530;
  border: 1px solid #0070f2;
  border-radius: 8px;
  padding: 10px 12px;
}
.ah-interaction-card.ah-interaction-timedout {
  border-color: #e9730c;
}
.ah-interaction-header {
  font-size: 13px;
  font-weight: 600;
  color: #e0eaf4;
}
.ah-interaction-question-text {
  font-size: 12.5px;
  color: #b8c8d8;
}
.ah-interaction-options-list.sapMList { background: transparent !important; }
.ah-interaction-option-row.sapMLIB {
  background: transparent !important;
  border-bottom: none !important;
  padding: 2px 0 !important;
}
/* Vertically center the CheckBox against its label (and description, if present) — the
   CheckBox's own touch-target box is taller than a single line of Text, so without this the
   label sits noticeably higher than the checkbox glyph next to it. */
.ah-interaction-option-hbox { align-items: center; }
.ah-interaction-option-hbox .sapMCb { margin-top: 0; }
.ah-interaction-option-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #d0dce8;
}
.ah-interaction-option-desc {
  font-size: 11px;
  color: #7a9ab8;
}
.ah-interaction-submit-btn { margin-top: 4px; }

/* Hide SegmentedButtonItem text when it's empty (icon-only tabs) */
.ah-tab-seg .sapMSegBBtn .sapMSegBBtnInner {
  min-width: 2.5rem !important;
}
.ah-tab-seg .sapMSegBBtn .sapMSegBBtnText {
  display: none !important;
}

/* ── Mobile: Task Detail info bar — icon-only buttons ── */
@media (max-width: 599px) {
  .ah-task-detail-infobar .sapMBtn .sapMBtnContent {
    font-size: 0 !important;
  }
  .ah-task-detail-infobar .sapMBtn .sapMBtnContent .sapMBtnIcon {
    font-size: 1rem !important;
  }
  .ah-task-detail-infobar .ah-chip-avatar-img {
    display: none !important;
  }
}

/* ── Mobile: Agent Detail page ── */
@media (max-width: 599px) {
  /* Compact inline header: keep avatar small + name on one row */
  .ah-agent-header {
    flex-direction: row !important;
    align-items: center !important;
  }
  .ah-agent-header .sapMAvatar {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  .ah-agent-header .ah-agent-avatar-box {
    margin-bottom: 0 !important;
  }
  .ah-agent-header .ah-agent-info-box {
    margin-left: 0.5rem !important;
    text-align: left;
    flex: 1;
    min-width: 0;
  }
  .ah-agent-header .ah-agent-info-box .sapMTitle {
    font-size: 1.1rem !important;
  }
  /* Hide description on mobile to save space */
  .ah-agent-header .ah-agent-desc-label {
    display: none !important;
  }
  /* MCP server card actions: wrap to avoid overflow */
  .ah-mcp-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  /* MCP card: stack name and actions vertically */
  .ah-mcp-card > .sapUiVBox > .sapUiHBox:first-child {
    flex-direction: column !important;
  }
  .ah-mcp-card .ah-mcp-actions {
    margin-top: 8px;
    width: 100%;
  }
}

/* ── White Label: logo gallery thumbnails ── */
.ah-logo-thumb {
  object-fit: contain;
  max-width: 120px;
  background: #f4f5f6;
  border-radius: 3px;
}

/* ── Skill Version Diff (specs/019-posthog-otel-logs) ── */
.ah-diff-dialog .sapMDialogSection {
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem;
}
.ah-diff-section {
  margin-bottom: 1.5rem;
}
.ah-diff-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #f0f0f0 !important;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #555;
}
.ah-diff-sidebyside {
  display: flex;
  gap: 2px;
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 4px;
  overflow: hidden;
}
.ah-diff-col {
  flex: 1 1 50%;
  overflow-x: auto;
  background: #1e1e1e;
}
.ah-diff-col-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ccc !important;
  padding: 4px 8px;
  background: #333;
  border-bottom: 1px solid #555;
  white-space: nowrap;
}
.ah-diff-line {
  margin: 0;
  padding: 2px 8px;
  font-family: "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #ddd !important;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 3px solid transparent;
}
.ah-diff-added {
  background: #1b3a2a !important;
  color: #7ee08a !important;
  border-left-color: #4caf50;
}
.ah-diff-removed {
  background: #3a1b1b !important;
  color: #f08a8a !important;
  border-left-color: #f44336;
}
.ah-diff-unchanged {
  background: #1e1e1e !important;
  color: #ddd !important;
}
.ah-diff-empty {
  background: #1a1a1a !important;
  color: #555 !important;
}
.ah-diff-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}
.ah-diff-tool {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.ah-diff-tool.ah-diff-added {
  background: #1b3a2a;
  color: #7ee08a !important;
}
.ah-diff-tool.ah-diff-removed {
  background: #3a1b1b;
  color: #f08a8a !important;
  text-decoration: line-through;
}
.ah-diff-tool.ah-diff-unchanged {
  background: #333;
  color: #ccc !important;
}
.ah-diff-examples {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ah-diff-example {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: #ddd !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.ah-diff-example.ah-diff-added {
  background: #1b3a2a;
  color: #7ee08a !important;
  border-left: 3px solid #4caf50;
}
.ah-diff-example.ah-diff-removed {
  background: #3a1b1b;
  color: #f08a8a !important;
  border-left: 3px solid #f44336;
}
.ah-diff-example.ah-diff-unchanged {
  background: #333;
  color: #ccc !important;
}
.ah-diff-no-changes {
  padding: 16px;
  text-align: center;
  color: #ccc !important;
  font-style: italic;
}

/* ── Chat with Agents (specs/021-agent-chat) ──────────────────────────────── */

/* Floating chat button — fixed bottom-left, mirroring .ah-version-badge's low-z-index convention
   (see the .ah-sidebar comment: fixed-position overlays must stay at low single-digit z-index or
   they cover UI5 popups). */
.ah-chat-fab.sapMBtn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.ah-chat-fab .sapMBtnInner {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.ah-chat-fab .sapMBtnIcon {
  top: 5px;
}

/* Chat dialog — same flex/overflow pattern as the run-log dialog (see that comment block
   above): a Dialog's contentHeight does NOT clip long content on its own, so the content
   section must be forced into a flex column with overflow hidden, and the message list
   (ScrollContainer) flexed to fill the remaining height. */
[id$="--chatDialog"] .sapMDialogSection {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
[id$="--chatDialog"] .sapMDialogScrollCont {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  height: auto !important;
  width: 100% !important;
}
[id$="--chatDialog"] .sapMDialogScroll {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  height: auto !important;
  width: 100% !important;
}
.ah-chat-body {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}
/* The Chat view is added via chatViewContainer.addItem(...) (a VBox), so UI5 decorates it with a
   `sapMFlexItem` class which by default only takes its content's natural height — the view (and
   its HBox) then never grow, so the inner ScrollContainer has no bounded height to scroll within.
   Force the flex item + view to fill the dialog body. Scoped to `--chatDialog` because
   `ah-dialog-body` is *also* TaskBoard's `taskDetailBody` (runLogDialog), and in this UI5 version
   FlexBox puts `sapMFlexItem` directly on every child root — an unscoped `.ah-dialog-body >
   .sapMFlexItem` (specificity 0,2,0) overrides `.ah-reply-section`'s `flex: 0 0 auto !important`
   (0,1,0), flex-growing the reply composer and pushing the chat input out of the dialog's clipped
   bounds on a long message history. */
[id$="--chatDialog"] .ah-dialog-body > .sapMFlexItem {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
[id$="--chatDialog"] .ah-dialog-body > .sapMFlexItem > .sapUiView {
  height: 100% !important;
}

/* Thread pane — the collapsible left sidebar of the master/detail HBox. */
.ah-chat-thread-pane {
  border-right: 1px solid #d9d9d9;
  width: 15rem;
  min-width: 15rem;
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ah-chat-thread-title {
  flex: 1 1 auto;
  min-width: 0;
}
.ah-chat-thread-list {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Conversation pane — right column */
.ah-chat-conv-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ah-chat-conv-active {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ah-chat-conv-header {
  flex: 0 0 auto;
  border-bottom: 1px solid #d9d9d9;
}
.ah-chat-empty-flex {
  flex: 1 1 auto;
  min-height: 0;
}

/* Message list — scrollable body (mirrors the run-log dialog's .ah-dialog-scroll: a FlexBox
   child with flex:1 + overflow-y:auto, NOT a ScrollContainer). */
.ah-chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.ah-chat-message-list {
  flex: 1 1 auto;
  min-height: 0;
}

/* Message bubble body — full width so markdown tables/code blocks don't clip */
.ah-chat-bubble-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Composer — bottom row, flex: 0 0 auto (mirrors the run-log dialog's .ah-reply-section). */
.ah-chat-composer {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #d9d9d9;
  background: var(--sapBackgroundColor, #fff);
}