/* --------------------------------------------------------
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 ── */
/* Colours (background, text) come from the UI5 theme; only the border is set here so
the card reads as a tile in both light and dark themes. */
.ah-card.sapMLIB {
border: 1px solid var(--sapList_BorderColor) !important;
border-radius: 6px !important;
margin-bottom: 6px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.15) !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;
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;
}
/* ── Recurring-task badge on board cards (specs/028) ──
A small repeat icon at the right of the card's top row, shown only when the
Task carries a recurrence rule; its tooltip carries the backend-computed human summary. */
.ah-recur-badge {
width: 12px;
height: 12px;
margin-inline-start: 2px;
flex: 0 0 auto;
color: #5aa9e6;
font-size: 11px;
}
/* ── Project (GitHub) affordance on board cards ──
A small icon at the right of the card's top row, shown only when the Task is
assigned to a Project; pressing it copies the full Task ID. Sized to match the
recurrence badge beside it, using the same .sapMBtn/.sapMBtnInner/.sapMBtnIcon
shrink recipe as .ah-copy-msg-btn — a sap.m.Button needs all three overridden,
since the control's own min-width/padding otherwise dominate its box. */
.ah-project-btn.sapMBtn {
width: 1.25rem !important;
height: 1.25rem !important;
margin-inline-start: 2px;
flex: 0 0 auto;
}
.ah-project-btn .sapMBtnInner {
width: 1.25rem !important;
height: 1.25rem !important;
min-width: 0 !important;
padding: 0 !important;
}
.ah-project-btn .sapMBtnIcon {
font-size: 0.7rem !important;
color: #5aa9e6 !important;
}
.ah-project-btn:hover .sapMBtnIcon { color: #8ecdf5 !important; }
/* ── Info-bar Run chip ── */
.ah-run-chip .sapMBtnText {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 10px;
}
/* ── Run Info dialog fields ── */
.ah-run-info-mono {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
color: #e0e0e0 !important;
word-break: break-all;
}
.ah-copy-run-info-btn.sapMBtn { width: 32px; height: 28px; flex-shrink: 0; }
.ah-copy-run-info-btn .sapMBtnIcon { font-size: 0.9rem !important; color: #888 !important; }
.ah-copy-run-info-btn:hover .sapMBtnIcon { color: #ccc !important; }
.ah-run-info-note {
font-size: 11px;
color: #8a98a8 !important;
line-height: 1.5;
}
/* ── 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;
}
/* specs/030-task-detail-layout: TaskBoard's runLogDialog body becomes a ROW (main column +
properties sidebar) — scoped override so the Chat dialog's own .ah-dialog-body column
layout is untouched. */
.ah-dialog-body.ah-detail-body-row {
flex-direction: row !important;
}
.ah-detail-main {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-width: 0 !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
.ah-detail-main-inner {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
.ah-prop-sidebar {
flex: 0 0 280px !important;
width: 280px !important;
height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border-left: 1px solid #2e3840 !important;
padding: 8px 10px !important;
box-sizing: border-box !important;
}
/* Property rows — press-enabled CustomListItems styled as quiet label/value lines */
.ah-prop-list .ah-prop-row.sapMLIB {
background: transparent !important;
border-bottom: 1px solid #232b33 !important;
min-height: 34px !important;
padding: 0 !important;
}
.ah-prop-list .ah-prop-row.sapMLIB:last-child { border-bottom: none !important; }
.ah-prop-list .ah-prop-row.sapMLIBHoverable:hover,
.ah-prop-list .ah-prop-row.sapMLIBSelected {
background: #232b33 !important;
}
.ah-prop-row-inner { width: 100%; }
.ah-prop-icon { color: #8a98a8 !important; flex-shrink: 0; }
.ah-prop-label {
font-size: 12px !important;
color: #8a98a8 !important;
flex-shrink: 0;
}
.ah-prop-value {
font-size: 12px !important;
font-weight: 600 !important;
color: #d5e0ea !important;
margin-inline-start: 8px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 150px;
}
html.ah-theme-light .ah-prop-sidebar { border-left-color: #d9dbde !important; }
html.ah-theme-light .ah-prop-list .ah-prop-row.sapMLIB { border-bottom-color: #e5e7ea !important; }
html.ah-theme-light .ah-prop-list .ah-prop-row.sapMLIBHoverable:hover,
html.ah-theme-light .ah-prop-list .ah-prop-row.sapMLIBSelected { background: #f0f2f4 !important; }
html.ah-theme-light .ah-prop-icon { color: #6a7682 !important; }
html.ah-theme-light .ah-prop-label { color: #6a7682 !important; }
html.ah-theme-light .ah-prop-value { color: #22303c !important; }
@media (max-width: 719px) {
.ah-prop-sidebar { display: none !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;
}
/* specs/029-task-dialog-ux: Task Brief card + long-message collapse */
.ah-task-brief-panel .ah-chat-text {
font-size: 13px !important;
color: #aebdca !important;
max-height: 220px;
overflow-y: auto;
}
.ah-show-more-btn.sapMBtn .sapMBtnText {
font-size: 11px !important;
color: #5aa9e6 !important;
padding: 0 4px !important;
}
.ah-show-more-btn.sapMBtn:hover .sapMBtnText {
color: #7ec0f0 !important;
text-decoration: underline;
}
.ah-msg-truncated {
color: #8a98a8;
font-size: 12px;
padding-top: 2px;
}
/* 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-stop-btn .sapMBtnIcon { color: var(--sapNegativeElementColor, #b00) !important; }
.ah-stop-btn:hover .sapMBtnIcon { color: var(--sapNegativeColor, #d00) !important; }
/* Artifact viewer — monospace pre block with word-wrap and max-height */
.ah-file-view {
font-family: var(--sapFontMonospaceFamily, 'Courier New', monospace);
font-size: 0.8125rem;
white-space: pre-wrap;
word-break: break-word;
max-height: 65vh;
overflow: auto;
padding: 0.75rem 1rem;
background: var(--sapBaseColor, #1d232a);
color: var(--sapTextColor, #e0e0e0);
border-radius: 4px;
border: 1px solid var(--sapGroup_ContentBorderColor, #3a3a3a);
line-height: 1.5;
margin: 0;
}
.ah-file-view code.hljs {
padding: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
}
.ah-file-info-bar {
font-size: 0.75rem;
color: var(--sapContent_LabelColor, #999);
margin-bottom: 0.25rem;
}
/* Remove default padding in the image/PDF content box so they fill the dialog */
.ah-artifact-view-nopad {
padding: 0 !important;
}
.ah-artifact-view-nopad .sapMHBox,
.ah-artifact-view-nopad .sapMVBox {
padding: 0;
}
/* highlight.js syntax colours — atom-one-dark palette, dark-bg by default */
.hljs { color: #abb2bf; background: transparent; }
.hljs-comment, .hljs-quote { color: #5c6370; font-style: italic; }
.hljs-doctag, .hljs-formula, .hljs-keyword { color: #c678dd; }
.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst { color: #e06c75; }
.hljs-literal { color: #56b6c2; }
.hljs-addition, .hljs-attribute, .hljs-meta .hljs-string, .hljs-regexp, .hljs-string { color: #98c379; }
.hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class,
.hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable { color: #d19a66; }
.hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title { color: #61aeee; }
.hljs-built_in, .hljs-class .hljs-title, .hljs-title.class_ { color: #e6c07b; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-link { text-decoration: underline; }
/* Light-theme override — keep syntax colours but use light background */
html.ah-theme-light .hljs { color: #383a42; }
html.ah-theme-light .hljs-comment, html.ah-theme-light .hljs-quote { color: #a0a1a7; }
html.ah-theme-light .hljs-doctag, html.ah-theme-light .hljs-formula, html.ah-theme-light .hljs-keyword { color: #a626a4; }
html.ah-theme-light .hljs-deletion, html.ah-theme-light .hljs-name,
html.ah-theme-light .hljs-section, html.ah-theme-light .hljs-selector-tag,
html.ah-theme-light .hljs-subst { color: #e45649; }
html.ah-theme-light .hljs-literal { color: #0184bb; }
html.ah-theme-light .hljs-addition, html.ah-theme-light .hljs-attribute,
html.ah-theme-light .hljs-meta .hljs-string, html.ah-theme-light .hljs-regexp,
html.ah-theme-light .hljs-string { color: #50a14f; }
html.ah-theme-light .hljs-attr, html.ah-theme-light .hljs-number,
html.ah-theme-light .hljs-selector-attr, html.ah-theme-light .hljs-selector-class,
html.ah-theme-light .hljs-selector-pseudo, html.ah-theme-light .hljs-template-variable,
html.ah-theme-light .hljs-type, html.ah-theme-light .hljs-variable { color: #986801; }
html.ah-theme-light .hljs-bullet, html.ah-theme-light .hljs-link,
html.ah-theme-light .hljs-meta, html.ah-theme-light .hljs-selector-id,
html.ah-theme-light .hljs-symbol, html.ah-theme-light .hljs-title { color: #4078f2; }
html.ah-theme-light .hljs-built_in, html.ah-theme-light .hljs-class .hljs-title,
html.ah-theme-light .hljs-title.class_ { color: #c18401; }
.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;
/* min-width: 0 is load-bearing, not cosmetic: a flex item defaults to `min-width: auto`,
which floors it at its min-content width. Combined with `white-space: nowrap` above,
that would make the label unshrinkable — it would refuse to give back the space
ellipsis is there to reclaim, and overflow the row instead of truncating. */
min-width: 0;
}
/* Composer row: [left group: Attach + filename + Knowledge] ......... [Send]
SpaceBetween does the pushing; see the view for why there is no ToolbarSpacer here.
`.ah-composer-left` carries `min-width: 0` for the same reason as the label above, so the
group as a whole can shrink rather than overflow: Attach (~90px) + Knowledge (~110px) =
~200px fits alongside Send (~90px) even on a 360px phone, with the label absorbing the
difference. `flex-wrap: wrap` is retained purely as a safety net — it is what keeps Send
from being silently CLIPPED (this row is inside a `flex: 0 0 auto` block in an
`overflow: hidden` column, which clips rather than scrolls) if those width estimates are
ever wrong; it should not be the mechanism that normally happens. */
.ah-composer-row { flex-wrap: wrap; row-gap: 4px; }
.ah-composer-left { min-width: 0; }
/* Send is never the thing that gives way — the left group absorbs all shrinkage instead. */
.ah-send-btn { flex-shrink: 0; }
.ah-knowledge-box { min-width: 0; max-width: 100%; }
/* 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: var(--sapList_Background);
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;
}
/* sap.m.VBox adds `sapMFlexBoxBGTransparent`, and the theme CSS (loaded after this file) sets
`background-color: transparent` at the same specificity, which silently wiped the drawer's own
background so page content showed through the Workspace switcher. Doubling the class selector
outranks the theme rule without `!important`. */
.ah-sidebar.sapMFlexBox {
background: var(--sapList_Background);
}
.ah-sidebar .sapMList {
flex: 1;
min-height: 0;
}
.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 var(--sapList_BorderColor);
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: var(--sapContent_LabelColor);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ah-agent-filter-bar.sapMTB {
padding: 0.75rem 1rem 0.5rem;
height: auto;
flex-wrap: wrap;
}
/* MCP Hub filter toolbar (search + three facet selects) is wider than a phone viewport.
A plain Toolbar serves .sapMTB { white-space: nowrap; overflow: hidden }, clipping
everything past the fold. Same wrapping recipe as .ah-agent-filter-bar above. */
.ah-mcp-filter-bar.sapMTB {
padding: 0.75rem 1rem 0.5rem;
height: auto;
flex-wrap: wrap;
}
/* Agent card: Integration Card (Object) hosted inside a GridListItem. The GridListItem supplies
the tile chrome and the press target. The grid stretches every item to the row height, but
the GridListItem wrappers are plain blocks, so the height has to be handed down explicitly:
item wrappers -> card (flex column) -> content (flex: 1). The footer (the badge strip) then
sits at the card bottom and lines up across cards of different heights. */
.ah-agent-card {
width: 100%;
}
.ah-agent-grid .sapFGLIWrapper,
.ah-agent-grid .sapMLIBContent {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
.ah-agent-card.sapFCard {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.ah-agent-card .sapFCardContent {
flex: 1 1 auto;
height: auto;
}
/* Footer badge strip (an OverflowToolbar): the strip starts with a flexible spacer that pushes
its items to the right; hide it so the badges start at the left edge like the description. */
.ah-agent-card .sapUiIntActionsStrip .sapMTBSpacerFlex {
display: none;
}
/* Squad cards: the leader button shows the leader's avatar image as its icon (an image URI
renders as a bare ![]()
at its natural aspect) — make it a small round avatar. Keyed on the
button's tooltip prefix; the font-icon fallback (no avatar) is unaffected. */
.ah-agent-card .sapUiIntActionsStrip button[title^="Leader:"] img {
/* sap.m.Button's own icon rules cap the image (max-width/height) — override them. */
width: 1.5rem !important;
height: 1.5rem !important;
min-width: 1.5rem !important;
max-width: 1.5rem !important;
padding: 0 !important;
margin: 0 0.5rem 0 0 !important;
border-radius: 50%;
object-fit: cover;
}
/* Centre the avatar and the name on one line (otherwise the inline image sits on the text
baseline and makes the button taller than its siblings). Only the avatar case has an ![]()
. */
.ah-agent-card .sapUiIntActionsStrip button[title^="Leader:"] .sapMBtnInner:has(img) {
display: inline-flex;
align-items: center;
}
/* --------------------------------------------------------
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 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;
}
/* Locked Enterprise rows (community-edition paywall, util/Paywall.js): the page's own icon stays on the
left and a coloured SAP-icons "locked" glyph (U+E153) is drawn at the right edge of the row. The
attribute is written by the row's CustomData (App.view.xml). Colour = the theme's critical/amber
accent so it reads as "premium" in both the light and dark theme. */
.ah-nav-list .sapMSLI[data-ao-locked="true"] .sapMLIBContent::after {
content: "\e153";
font-family: "SAP-icons";
font-size: 1rem;
margin-left: auto;
padding-left: 0.5rem;
color: var(--sapCriticalElementColor, #e9730c);
flex: 0 0 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 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: 0px 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: single vertical layout (mobile-style) on every viewport */
/* (the desktop horizontal variant was removed — cards use the vertical layout everywhere) */
@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-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; }
.ah-card-desc.sapMText { -webkit-line-clamp: 2 !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;
}
}
/* ── 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);
}
/* ========================================================
Light Theme — CSS overrides for sap_horizon / sap_belize
Gated behind html.ah-theme-light (set in index.html bootstrap)
======================================================== */
html.ah-theme-light .ah-auth-gate { background: #f5f6f7 !important; }
html.ah-theme-light .ah-login-panel {
background: #ffffff;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* ── Header / subheader ── */
html.ah-theme-light .ah-subheader.sapMTB { border-bottom-color: #d9dbde !important; }
/* ── Kanban cards: colours come from the theme (see .ah-card.sapMLIB) ── */
html.ah-theme-light .ah-card-archived.sapMLIB { opacity: 0.55; border-left-color: #c4c8cb !important; }
/* ── Agent / Project card grids ── */
html.ah-theme-light .ah-card-item.sapMLIB {
background: #ffffff;
border-color: #d9dbde;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
/* ── MCP server cards ── */
html.ah-theme-light .ah-mcp-card.sapMLIB {
background: #ffffff;
border-color: #d9dbde;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
html.ah-theme-light .ah-mcp-label { color: #6a6d70 !important; }
html.ah-theme-light .ah-mcp-value { color: #1d2d3a !important; }
html.ah-theme-light .ah-mcp-command { color: #3a5a7a !important; }
html.ah-theme-light .ah-mcp-status-msg { color: #6a6d70 !important; }
/* ── Task detail dialog ── */
html.ah-theme-light .ah-task-detail-infobar.sapMTB { border-bottom-color: #d9dbde !important; }
html.ah-theme-light .ah-reply-section { border-top-color: #d9dbde !important; }
/* ── Chat list ── */
html.ah-theme-light .ah-chat-list.sapMList {
background: #f5f6f7;
border-color: #d9dbde;
}
/* ── Chat text bubble ── */
html.ah-theme-light .ah-ts { color: #6a6d70 !important; }
html.ah-theme-light .ah-chat-log-msg { color: #3a5a7a !important; }
html.ah-theme-light .ah-chat-log-entry .ah-ts { color: #6a6d70 !important; }
html.ah-theme-light .ah-chat-log-detail { color: #2a6040 !important; }
html.ah-theme-light .ah-chat-text code,
html.ah-theme-light [id$="--chatList"] code {
background: #e8edf2;
color: #005a8c;
}
html.ah-theme-light .ah-chat-text pre,
html.ah-theme-light [id$="--chatList"] pre {
background: #f0f2f4;
border-color: #d9dbde;
}
html.ah-theme-light .ah-chat-text pre code,
html.ah-theme-light [id$="--chatList"] pre code { color: #1d2d3a; }
html.ah-theme-light .ah-chat-text blockquote,
html.ah-theme-light [id$="--chatList"] blockquote {
border-left-color: #0a6ed1;
color: #5b6b7a;
}
html.ah-theme-light .ah-chat-text th,
html.ah-theme-light [id$="--chatList"] th {
background: #e8edf2;
color: #005a8c;
}
html.ah-theme-light .ah-chat-text th,
html.ah-theme-light .ah-chat-text td,
html.ah-theme-light [id$="--chatList"] th,
html.ah-theme-light [id$="--chatList"] td { border-color: #d9dbde; }
html.ah-theme-light .ah-chat-text tr:nth-child(even),
html.ah-theme-light [id$="--chatList"] tr:nth-child(even) { background: #f5f6f7; }
html.ah-theme-light .ah-chat-text hr,
html.ah-theme-light [id$="--chatList"] hr { border-top-color: #d9dbde; }
/* ── Textarea overrides (log viewer, skill script editor/preview) ── */
html.ah-theme-light .ah-log-area .sapMTextAreaInner,
html.ah-theme-light .ah-log-area textarea {
background: #f0f2f4 !important;
color: #1d2d3a !important;
}
html.ah-theme-light .ah-script-preview .sapMTextAreaInner,
html.ah-theme-light .ah-script-editor .sapMTextAreaInner {
background: #f0f2f4 !important;
color: #1d2d3a !important;
}
/* ── Task badges ── */
html.ah-theme-light .ah-task-badge-text.sapMText { color: #5b6b7a; }
/* ── Status chips ── */
html.ah-theme-light .ah-status-chip-none { background: #e8edf2; color: #5b6b7a; }
html.ah-theme-light .ah-status-chip-success { background: #d5f0d5; color: #1a5c2a; }
html.ah-theme-light .ah-status-chip-error { background: #f8d7da; color: #8a1a1a; }
html.ah-theme-light .ah-status-chip-warning { background: #fff3cd; color: #8a6a0a; }
html.ah-theme-light .ah-status-chip-info { background: #d1ecf1; color: #0a4a6a; }
/* ── Column count badges ── */
html.ah-theme-light .ah-col-badge-running { background: #d1ecf1; color: #0a4a6a; }
html.ah-theme-light .ah-col-badge-review { background: #fff3cd; color: #8a6a0a; }
html.ah-theme-light .ah-col-badge-blocked { background: #f8d7da; color: #8a1a1a; }
html.ah-theme-light .ah-col-badge-done { background: #d5f0d5; color: #1a5c2a; }
/* ── Drop zone ── */
html.ah-theme-light .ah-col-dropzone { outline-color: #0a6ed1 !important; }
/* ── Model suggestion chips ── */
html.ah-theme-light .ah-model-chip.sapMBtn .sapMBtnInner {
background: #e8edf2 !important;
border-color: #c4c8cb !important;
color: #1d2d3a !important;
}
html.ah-theme-light .ah-model-chip.sapMBtn:hover .sapMBtnInner {
background: #d6dde3 !important;
border-color: #89919a !important;
}
/* ── Rich section cards (run-log) ── */
html.ah-theme-light .ah-section-card.sapMPanel {
background: #ffffff !important;
border-color: #d9dbde !important;
}
html.ah-theme-light .ah-section-card .sapMPanelHdr {
background: #f0f2f4 !important;
color: #5b6b7a !important;
}
html.ah-theme-light .ah-tool-name { color: #1d2d3a; }
html.ah-theme-light .ah-tool-detail { color: #3a5a7a; }
/* ── Interactive question / permission cards ── */
html.ah-theme-light .ah-interaction-card {
background: #f0f6ff;
border-color: #0070f2;
}
html.ah-theme-light .ah-interaction-header { color: #1d2d3a; }
html.ah-theme-light .ah-interaction-question-text { color: #3a5a7a; }
html.ah-theme-light .ah-interaction-option-label { color: #1d2d3a; }
html.ah-theme-light .ah-interaction-option-desc { color: #5b6b7a; }
/* ── Documentation page ── */
html.ah-theme-light .ah-docs-toc { border-right-color: #d9dbde; }
html.ah-theme-light .ah-docs-content-html code {
background: #e8edf2;
color: #005a8c;
}
html.ah-theme-light .ah-docs-content-html pre {
background: #f0f2f4;
border-color: #d9dbde;
}
html.ah-theme-light .ah-docs-content-html pre code { color: #1d2d3a; }
html.ah-theme-light .ah-docs-content-html blockquote {
border-left-color: #0a6ed1;
color: #5b6b7a;
}
html.ah-theme-light .ah-docs-content-html th,
html.ah-theme-light .ah-docs-content-html td { border-color: #d9dbde; }
html.ah-theme-light .ah-docs-content-html th { background: #e8edf2; color: #005a8c; }
html.ah-theme-light .ah-docs-content-html tr:nth-child(even) { background: #f5f6f7; }
html.ah-theme-light .ah-docs-content-html hr { border-top-color: #d9dbde; }
html.ah-theme-light .ah-docs-content-html h1,
html.ah-theme-light .ah-docs-content-html h2,
html.ah-theme-light .ah-docs-content-html h3,
html.ah-theme-light .ah-docs-content-html h4 { color: #1d2d3a; }
/* ── Skill version diff ── */
html.ah-theme-light .ah-diff-dialog .sapMDialogSection { background: #f5f6f7; }
html.ah-theme-light .ah-diff-section-title { color: #1d2d3a !important; border-bottom-color: #d9dbde; }
html.ah-theme-light .ah-diff-sidebyside { background: #ffffff; border-color: #d9dbde; }
html.ah-theme-light .ah-diff-col { background: #f5f6f7; }
html.ah-theme-light .ah-diff-col-header { color: #1d2d3a !important; background: #e8edf2; border-bottom-color: #d9dbde; }
html.ah-theme-light .ah-diff-line { color: #1d2d3a !important; }
html.ah-theme-light .ah-diff-added { background: #d5f0d5 !important; color: #1a5c2a !important; border-left-color: #4caf50; }
html.ah-theme-light .ah-diff-removed { background: #f8d7da !important; color: #8a1a1a !important; border-left-color: #f44336; }
html.ah-theme-light .ah-diff-unchanged { background: #f5f6f7 !important; color: #1d2d3a !important; }
html.ah-theme-light .ah-diff-empty { background: #edeff1 !important; color: #89919a !important; }
html.ah-theme-light .ah-diff-tool.ah-diff-added { background: #d5f0d5; color: #1a5c2a !important; }
html.ah-theme-light .ah-diff-tool.ah-diff-removed { background: #f8d7da; color: #8a1a1a !important; }
html.ah-theme-light .ah-diff-tool.ah-diff-unchanged { background: #e8edf2; color: #5b6b7a !important; }
html.ah-theme-light .ah-diff-example { color: #1d2d3a !important; }
/* ── Skill registry ── */
html.ah-theme-light .ah-skill-desc { color: #5b6b7a; }
html.ah-theme-light .ah-skill-more-agents { color: #89919a; }
/* ── Knowledge page ── */
html.ah-theme-light .ah-folder-meta { color: #6a6d70; }
/* ── Guardrails ── */
html.ah-theme-light .ah-guardrails-label { color: #1d2d3a; }
html.ah-theme-light .ah-guardrails-panel .sapMPanelHdr { background: #f0f2f4 !important; }
/* ── Changelog dialog ── */
html.ah-theme-light .ah-changelog-version { color: #1d2d3a; }
html.ah-theme-light .ah-changelog-date { color: #5b6b7a; }
html.ah-theme-light .ah-changelog-text { color: #3a4a5a; }
html.ah-theme-light .ah-changelog-item.sapMLIB { border-bottom-color: rgba(0,0,0,0.06); }
/* ── Version badge ── */
html.ah-theme-light .ah-version-badge .sapMBtnContent,
html.ah-theme-light .ah-version-badge .sapMBtnDefault .sapMBtnContent { color: #5b6b7a; }
/* ── Avatar chip (task card assignee) ── */
html.ah-theme-light .ah-avatar-chip { background: #e8edf2; color: #0a6ed1; }
html.ah-theme-light .ah-avatar-chip-agent { background: #d5f0d5; color: #1a5c2a; }
/* ── Greek design element ── */
html.ah-theme-light .ah-greek-symbols { color: #0a6ed1; }
/* ── Avatar hint ── */
html.ah-theme-light .ah-avatar-hint.sapMText { color: #6a6d70; }
/* ── Copy-to-clipboard button ── */
html.ah-theme-light .ah-copy-msg-btn .sapMBtnIcon { color: #6a6d70 !important; }
html.ah-theme-light .ah-copy-msg-btn:hover .sapMBtnIcon { color: #1d2d3a !important; }
/* ── File panel ── */
html.ah-theme-light .ah-file-size { color: #6a6d70; }
html.ah-theme-light .ah-attach-label { color: #6a6d70; }
html.ah-theme-light .ah-mcp-badge { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
/* ========================================================
Org Chart (custom control — Squad view)
======================================================== */
.org-chart {
position: relative;
box-sizing: border-box;
width: 100%;
min-height: 380px;
height: auto;
flex: 1 1 auto;
min-width: 0;
border-radius: 8px;
background: var(--sapGroup_ContentBackground, #fff);
touch-action: none;
user-select: none;
overflow: hidden;
}
.org-chart svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
cursor: grab;
}
.org-chart svg.isPanning {
cursor: grabbing;
}
.org-chart-link {
fill: none;
stroke: var(--sapContent_ForegroundBorderColor, #89919a);
stroke-width: 1.5;
}
.org-chart-node {
cursor: pointer;
}
.org-chart-node rect {
fill: var(--sapTile_Background, #fff);
stroke: var(--sapContent_ForegroundBorderColor, #89919a);
stroke-width: 1;
rx: 8;
ry: 8;
}
.org-chart-node.isLeader rect {
stroke: var(--sapSelectedColor, #0a6ed1);
stroke-width: 1.5;
}
.org-chart-node:focus {
outline: 1px solid var(--sapContent_FocusColor, #0070f2);
outline-offset: 1px;
}
.org-chart-avatar {
fill: var(--sapAccentColor6, #93c46f);
}
.org-chart-avatar-ring {
stroke: var(--sapContent_ForegroundBorderColor, #89919a);
stroke-width: 1;
}
/* Execution-tree status affordances (squad runs) — optional per-node `status` field */
.org-chart-node.is-running .org-chart-avatar-ring {
stroke: var(--sapCriticalColor, #e9730c);
stroke-width: 2;
animation: org-chart-pulse 1.4s ease-in-out infinite;
}
.org-chart-node.is-running rect {
stroke: var(--sapCriticalColor, #e9730c);
stroke-width: 1.5;
}
.org-chart-node.is-completed .org-chart-avatar-ring {
stroke: var(--sapPositiveColor, #2e8b57);
stroke-width: 2;
}
.org-chart-node.is-failed .org-chart-avatar-ring {
stroke: var(--sapNegativeColor, #bb0000);
stroke-width: 2;
}
.org-chart-node.is-queued {
opacity: 0.55;
}
@keyframes org-chart-pulse {
0%, 100% { stroke-width: 2; opacity: 1; }
50% { stroke-width: 4; opacity: 0.6; }
}
.org-chart-avatar-text {
fill: #fff;
font: 600 12px '72', Arial, sans-serif;
pointer-events: none;
}
.org-chart-name {
fill: var(--sapTextColor, #1d2d3e);
font: 600 13px '72', Arial, sans-serif;
pointer-events: none;
}
.org-chart-role {
fill: var(--sapContent_LabelColor, #556b82);
font: 12px '72', Arial, sans-serif;
pointer-events: none;
}
.org-chart-hint {
position: absolute;
right: 12px;
bottom: 8px;
padding: 4px 8px;
border-radius: 6px;
color: var(--sapContent_LabelColor, #556b82);
background: rgba(255, 255, 255, 0.88);
font: 12px '72', Arial, sans-serif;
pointer-events: none;
z-index: 2;
}
/* ── @Mentions (backlog task: mentions of Agents, Members and Squads) ─────────────── */
/* Chip in rendered message bubbles. Inherit the bubble's font-size so the chip scales
with long-message truncation; the colors follow the app's sapBlueTheme accent. */
.ah-mention {
display: inline-block;
padding: 0 0.35rem;
margin: 0 0.05rem;
border-radius: 0.5em;
background: rgba(0, 153, 216, 0.14);
color: var(--sapLinkColor, #0a6ed1);
font-weight: 600;
white-space: nowrap;
line-height: 1.4;
}
/* --------------------------------------------------------
Avatar picker (util/AvatarPicker.js — generated agent avatars)
-------------------------------------------------------- */
.ah-avatar-grid {
gap: 0.75rem;
}
.ah-avatar-pick {
cursor: pointer;
border-radius: 50%;
transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.ah-avatar-pick:hover {
transform: scale(1.06);
}
.ah-avatar-pick.ah-avatar-picked {
box-shadow: 0 0 0 3px var(--sapContent_FocusColor, #0070f2);
}