/* ============================================================ Imeritas Agent — Design Tokens (CSS Custom Properties) Override these per-tenant via a theme class on or inject from tenant config in the future. ============================================================ */ :root { /* Brand — derived from the Imeritas logo (blue chain link) */ --color-primary: #2563EB; --color-primary-light: #60A5FA; --color-primary-dark: #1D4ED8; --color-primary-bg: #EFF6FF; /* Neutrals */ --color-bg: #FFFFFF; --color-bg-secondary: #F9FAFB; --color-bg-tertiary: #F3F4F6; --color-border: #E5E7EB; --color-border-light: #F3F4F6; /* Text */ --color-text: #1F2937; --color-text-secondary: #6B7280; --color-text-muted: #9CA3AF; --color-text-inverse: #FFFFFF; /* Status */ --color-success: #059669; --color-success-bg: #ECFDF5; --color-error: #DC2626; --color-error-bg: #FEF2F2; --color-warning: #D97706; --color-warning-bg: #FFFBEB; --color-info: #2563EB; --color-info-bg: #EFF6FF; /* Layout */ --sidebar-width: 260px; --topbar-height: 52px; /* Typography */ --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.8125rem; --font-size-base: 0.875rem; --font-size-lg: 1rem; --font-size-xl: 1.125rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text); background: var(--color-bg-secondary); -webkit-font-smoothing: antialiased; } /* ============================================================ App Shell — Sidebar + Topbar + Content ============================================================ */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--topbar-height) 1fr; grid-template-areas: "sidebar topbar" "sidebar content"; height: 100vh; overflow: hidden; } /* --- Sidebar --- */ .sidebar { grid-area: sidebar; background: var(--color-bg); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; overflow: hidden; } .sidebar-brand { display: flex; align-items: center; padding: var(--space-5) var(--space-4); gap: var(--space-3); flex-shrink: 0; } .sidebar-brand img { max-width: 100%; max-height: 36px; width: auto; height: auto; } .sidebar-close-btn { display: none; background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); margin-left: auto; } .sidebar-close-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text); } /* Search input */ .sidebar-search { padding: 0 var(--space-3); flex-shrink: 0; } .sidebar-search input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-family: var(--font-family); color: var(--color-text); background: var(--color-bg-secondary); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .sidebar-search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); background: var(--color-bg); } .sidebar-search input::placeholder { color: var(--color-text-muted); } /* New Chat button area */ .sidebar-actions { padding: var(--space-2) var(--space-3) var(--space-3); flex-shrink: 0; } .sidebar-actions .session-new-btn { width: 100%; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } /* Session list in sidebar (scrollable) */ .sidebar > .session-list { flex: 1; overflow-y: auto; padding: var(--space-2) 0; } /* Sidebar footer: user section with expandable menu */ .sidebar-footer { border-top: 1px solid var(--color-border); flex-shrink: 0; } /* User toggle row: avatar + name + chevron */ .sidebar-user-toggle { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); cursor: pointer; user-select: none; transition: background 0.15s; border-radius: var(--radius-md); margin: var(--space-1); } .sidebar-user-toggle:hover { background: var(--color-bg-tertiary); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 600; flex-shrink: 0; } .user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .user-display-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-status { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; } .user-menu-chevron { flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.2s; } .sidebar-user-toggle.expanded .user-menu-chevron { transform: rotate(180deg); } /* Expandable user menu */ .sidebar-user-menu { overflow: hidden; max-height: 500px; transition: max-height 0.25s ease; padding: 0 var(--space-2) var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); } .sidebar-user-menu.collapsed { max-height: 0; padding-bottom: 0; } .sidebar-user-menu a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; transition: background 0.15s, color 0.15s; } .sidebar-user-menu a:hover { background: var(--color-bg-tertiary); color: var(--color-text); } .sidebar-user-menu a.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 600; } .sidebar-user-menu .nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; } .user-menu-section-label { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); padding: var(--space-2) var(--space-3) 0; } .user-menu-divider { height: 1px; background: var(--color-border-light); margin: var(--space-1) var(--space-3); } /* Inline "switch tenant" link in user status row */ .user-status-separator { color: var(--color-text-muted); margin: 0 2px; } .switch-tenant-link { font-size: inherit; color: var(--color-primary); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; transition: color 0.15s, text-decoration-style 0.15s; } .switch-tenant-link:hover { color: var(--color-primary); text-decoration-style: solid; } /* --- Status Indicators (extensible: license, plugin health, etc.) --- */ .status-indicator { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); padding-top: 2px; } .status-indicator-icon { flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; } .status-indicator-icon svg { width: 12px; height: 12px; } .status-indicator.warning { color: var(--color-warning); } .status-indicator.error { color: var(--color-error); } .status-indicator-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tenant switch modal */ .tenant-modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.4); align-items: center; justify-content: center; } .tenant-modal-overlay.visible { display: flex; } .tenant-modal { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); width: 320px; max-width: 90vw; overflow: hidden; } .tenant-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: var(--font-size-base); } .tenant-modal-close { background: none; border: none; font-size: 1.25rem; color: var(--color-text-muted); cursor: pointer; padding: 0; line-height: 1; } .tenant-modal-close:hover { color: var(--color-text); } .tenant-modal-list { padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); } .tenant-modal-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-3) var(--space-4); border: none; border-radius: var(--radius-md); background: none; font-size: var(--font-size-sm); font-family: var(--font-family); color: var(--color-text); cursor: pointer; transition: background 0.15s; text-align: left; } .tenant-modal-item:hover { background: var(--color-bg-tertiary); } .tenant-modal-item.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 600; } .tenant-modal-current { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; } /* Unread indicator dot on session items */ .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); position: absolute; right: 13px; top: 50%; transform: translateY(-50%); transition: opacity 0.15s; } /* Hide unread dot when delete button is visible to avoid overlap */ .session-item:hover .unread-dot { opacity: 0; } /* Hamburger button (mobile only, hidden by default) */ .hamburger-btn { display: none; background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); } .hamburger-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text); } /* Sidebar overlay backdrop (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 99; } /* --- Topbar --- */ .topbar { grid-area: topbar; background: var(--color-bg); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--space-5); gap: var(--space-4); } .topbar-left { margin-right: auto; display: flex; align-items: center; gap: var(--space-2); } .topbar-page-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); } .topbar-page-subtitle { font-size: var(--font-size-xs); color: var(--color-text-muted); } .health-indicator { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: 600; } .health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); transition: background 0.3s; } .health-dot.disconnected { background: var(--color-error); } .health-dot.connecting { background: var(--color-warning); animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .user-menu { display: flex; align-items: center; gap: var(--space-2); } /* --- Main Content --- */ .main-content { grid-area: content; overflow: hidden; display: flex; flex-direction: column; background: var(--color-bg-secondary); } /* ============================================================ Chat Page ============================================================ */ /* Chat page: full-width column within main-content */ .session-item { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); margin: 0 var(--space-2); border-radius: var(--radius-md); cursor: pointer; transition: background 0.15s; gap: 2px; position: relative; } .session-item:hover { background: var(--color-bg-tertiary); } .session-item.active { background: var(--color-primary-bg); } .session-item-title { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .session-item.active .session-item-title { color: var(--color-primary); font-weight: 600; } .session-item-time { font-size: var(--font-size-xs); color: var(--color-text-muted); } .session-item-delete { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; } .session-item:hover .session-item-delete { opacity: 1; } .session-item-delete:hover { color: var(--color-error); background: var(--color-error-bg); } .session-item-delete.confirming { opacity: 1; color: var(--color-error); font-size: var(--font-size-xs); font-weight: 600; font-family: var(--font-family); padding: 2px var(--space-2); background: var(--color-error-bg); white-space: nowrap; } .session-item-delete.confirming:hover { background: var(--color-error); color: var(--color-text-inverse); } .chat-column { display: flex; flex-direction: column; overflow: hidden; height: 100%; min-width: 0; } /* Editable session title in topbar */ .session-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: background 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; } .session-title:hover { background: var(--color-bg-tertiary); } .session-title-input { font-size: var(--font-size-lg); font-weight: 600; font-family: var(--font-family); color: var(--color-text); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); outline: none; box-shadow: 0 0 0 2px var(--color-primary-bg); max-width: 400px; width: 300px; } .chat-messages { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } /* Welcome screen */ .chat-welcome { flex: 1; display: flex; align-items: center; justify-content: center; } .chat-welcome-greeting { font-size: 1.75rem; font-weight: 600; color: var(--color-text-secondary); } /* Message bubbles */ .msg { display: flex; max-width: 80%; animation: msg-in 0.2s ease-out; } @keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .msg.user { align-self: flex-end; } .msg.assistant { align-self: flex-start; display: flex; align-items: flex-start; gap: var(--space-2); } .msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-secondary); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .msg-bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); line-height: 1.6; font-size: var(--font-size-base); white-space: pre-wrap; word-wrap: break-word; } .msg.user .msg-bubble { background: var(--color-primary); color: var(--color-text-inverse); border-bottom-right-radius: var(--radius-sm); } .msg.assistant .msg-bubble { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); } .msg.system { align-self: center; } .msg.system .msg-bubble { background: var(--color-bg-secondary); color: var(--color-text-secondary); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); font-size: 0.85rem; max-width: 90%; } .msg.system .system-text { margin: 0; font-family: inherit; font-size: inherit; white-space: pre-wrap; } .msg-time { display: flex; align-items: center; gap: var(--space-2); font-size: 0.65rem; margin-top: var(--space-1); opacity: 0.5; line-height: 1; } .msg.user .msg-time { text-align: right; } /* System message (code-block style) */ .msg.system { align-self: center; max-width: 90%; } .msg.system .msg-bubble { background: var(--color-bg-tertiary); color: var(--color-text-muted); border: 1px solid var(--color-border-light); font-family: var(--font-mono); font-size: var(--font-size-xs); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } /* Typing indicator */ .typing-indicator { display: inline-flex; gap: 4px; padding: var(--space-2) var(--space-3); align-self: flex-start; background: var(--color-bg); border-radius: var(--radius-full); margin-bottom: var(--space-2); } .typing-indicator span { width: 6px; height: 6px; background: var(--color-primary-light); border-radius: 50%; animation: typing 1.4s infinite; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } } /* Chat input — contained card (Claude Desktop style) */ .chat-input-wrapper { padding: var(--space-3) var(--space-5) var(--space-4); background: var(--color-bg-secondary); display: flex; flex-direction: column; align-items: center; } /* Slash command suggestions popup */ .slash-commands { display: none; width: 100%; max-width: 768px; margin-bottom: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; } .slash-command-item { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-3); cursor: pointer; transition: background 0.1s; } .slash-command-item:hover, .slash-command-item.selected { background: var(--color-bg-tertiary); } .slash-command-name { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text); white-space: nowrap; } .slash-command-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-input-card { width: 100%; max-width: 768px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color 0.15s, box-shadow 0.15s; } .chat-input-card:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); } .chat-input-textarea-row { display: flex; align-items: flex-end; gap: var(--space-3); } /* Attach button */ .attach-btn { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 4px; border-radius: 4px; transition: color 0.15s, background 0.15s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .attach-btn:hover { color: var(--color-primary); background: var(--color-primary-bg); } /* Attachment preview strip */ .attachment-preview-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 4px; border-bottom: 1px solid var(--color-border-light); } .attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--color-surface-alt, #f5f5f5); border: 1px solid var(--color-border-light); border-radius: 6px; font-size: 12px; color: var(--color-text-secondary); max-width: 200px; } .attach-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; } .attach-chip .attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-chip .attach-remove { cursor: pointer; color: var(--color-text-muted); font-size: 14px; line-height: 1; padding: 0 2px; border: none; background: none; } .attach-chip .attach-remove:hover { color: var(--color-danger, #dc3545); } .attach-chip.uploading { opacity: 0.6; } /* Drag-drop overlay */ .chat-input-wrapper.drag-over::after { content: 'Drop files here'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--color-primary-rgb, 59,130,246), 0.1); border: 2px dashed var(--color-primary); border-radius: 12px; color: var(--color-primary); font-size: 14px; font-weight: 500; pointer-events: none; z-index: 10; } .chat-input-wrapper { position: relative; } /* Attachment indicators in messages */ .msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .msg-attach-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--color-surface-alt, #f0f0f0); border-radius: 4px; font-size: 11px; color: var(--color-text-muted); } .msg-attach-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; cursor: pointer; } .msg-attach-chip img:hover { opacity: 0.8; } .chat-input-card textarea { flex: 1; min-width: 0; border: none; outline: none; resize: none; font-size: var(--font-size-base); font-family: var(--font-family); color: var(--color-text); background: transparent; line-height: 1.5; max-height: 120px; overflow-y: auto; } .chat-input-card textarea::placeholder { color: var(--color-text-muted); } .chat-input-controls { display: flex; justify-content: space-between; align-items: center; } /* Temperature control */ .temp-control { position: relative; } .temp-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; cursor: pointer; color: var(--color-text-muted); padding: var(--space-1); border-radius: var(--radius-md); font-size: var(--font-size-xs); font-family: var(--font-family); transition: color 0.15s; } .temp-btn:hover { color: var(--color-text); } .temp-label { font-family: var(--font-mono); font-size: var(--font-size-xs); } .temp-popover { position: absolute; bottom: 100%; left: 0; margin-bottom: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: none; align-items: center; gap: var(--space-2); white-space: nowrap; z-index: 10; } .temp-popover.open { display: flex; } .temp-popover input[type="range"] { width: 120px; accent-color: var(--color-primary); } .temp-value { font-size: var(--font-size-xs); font-family: var(--font-mono); color: var(--color-text-secondary); min-width: 24px; text-align: center; } #modelSelectSlot select { padding: var(--space-1) var(--space-2); padding-right: var(--space-5); border: none; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-family: var(--font-family); color: var(--color-text-muted); background: transparent; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%239CA3AF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; transition: color 0.15s; } #modelSelectSlot select:hover { color: var(--color-text); } .chat-send-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--color-primary); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; margin-bottom: 2px; } .chat-send-btn:disabled { opacity: 0.4; cursor: default; } .chat-send-btn:not(:disabled):hover { opacity: 0.85; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 600; font-family: var(--font-family); cursor: pointer; transition: background 0.15s, opacity 0.15s; text-decoration: none; } .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); } .btn-primary:hover { background: var(--color-primary-dark); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); } .btn-ghost:hover { background: var(--color-bg-tertiary); color: var(--color-text); } .btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); } /* Two-click inline confirmation state (shared across admin pages) */ .btn-danger.confirming { background: var(--color-error-bg); } .btn-danger.confirming:hover { background: var(--color-error); color: var(--color-text-inverse); } .btn-ghost.confirming { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-bg); } .btn-ghost.confirming:hover { background: var(--color-warning); color: var(--color-text-inverse); } .btn-outline.confirming { border-color: var(--color-error); background: var(--color-error-bg); } .btn-outline.confirming:hover { background: var(--color-error); color: var(--color-text-inverse); } .btn-icon.confirming { color: var(--color-error); background: var(--color-error-bg); font-size: var(--font-size-xs); font-weight: 600; padding: 2px var(--space-2); white-space: nowrap; } .btn-icon.confirming:hover { background: var(--color-error); color: var(--color-text-inverse); } /* ============================================================ Tasks Page ============================================================ */ .page-content { padding: var(--space-5); overflow-y: auto; flex: 1; } .page-header { margin-bottom: var(--space-5); } .page-header h2 { font-size: var(--font-size-xl); font-weight: 600; } .page-header p { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-1); } .data-table { width: 100%; border-collapse: collapse; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--font-size-sm); } .data-table thead { background: var(--color-bg-tertiary); } .data-table th { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); } .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); color: var(--color-text); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--color-bg-secondary); } /* Status badges */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; } .badge-success { background: var(--color-success-bg); color: var(--color-success); } .badge-error { background: var(--color-error-bg); color: var(--color-error); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); } .badge-info { background: var(--color-info-bg); color: var(--color-info); } /* Empty state */ .empty-state { text-align: center; padding: var(--space-8); color: var(--color-text-muted); } .empty-state p { font-size: var(--font-size-sm); margin-top: var(--space-2); } /* Truncate text */ .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; } /* Clickable row */ .data-table tbody tr.clickable { cursor: pointer; } .data-table tbody tr.clickable:hover { background: var(--color-primary-bg); } /* Task detail (expandable JSON) */ .detail-row td { padding: 0 var(--space-4) var(--space-4) !important; border-bottom: 1px solid var(--color-border) !important; } .task-detail-wrap { position: relative; width: 100%; } .task-copy-btn { position: absolute; top: 6px; right: 20px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: var(--font-size-xs); cursor: pointer; transition: all 0.15s; z-index: 1; } .task-copy-btn:hover { background: var(--color-bg); color: var(--color-text); } textarea.task-json { display: block; width: 100%; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: pre; margin: 0; max-height: 400px; overflow: auto; resize: vertical; cursor: text; box-sizing: border-box; } /* ============================================================ Responsive / Mobile (≤768px) ============================================================ */ @media (max-width: 768px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); z-index: 100; transform: translateX(-100%); transition: transform 0.25s ease; } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-overlay { display: block; } .sidebar-close-btn { display: block; } .hamburger-btn { display: block; } .chat-input-wrapper { padding: var(--space-2) var(--space-3); } .session-title { max-width: 180px; } .session-title-input { max-width: 180px; width: 180px; } .msg { max-width: 92%; } } /* ── Markdown in Chat Messages ─────────────────────────────── */ /* Override pre-wrap for markdown-rendered content — HTML structure handles spacing */ .msg-text.markdown { white-space: normal; line-height: 1.5; } .msg-text p { margin: 0 0 0.6em 0; } .msg-text p:last-child { margin-bottom: 0; } .msg-text code { background: var(--color-bg-secondary); padding: 1px 5px; border-radius: var(--radius-sm); font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 0.88em; } .msg-text pre { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); overflow-x: auto; margin: 0.5em 0; white-space: pre; } .msg-text pre code { background: none; padding: 0; border-radius: 0; font-size: 0.85em; } .msg-text blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-3); margin: 0.5em 0; color: var(--color-text-secondary); } .msg-text ul, .msg-text ol { margin: 0.5em 0; padding-left: 1.5em; } .msg-text li { margin-bottom: 0.25em; } .msg-text table { border-collapse: collapse; margin: 0.5em 0; font-size: var(--font-size-sm); } .msg-text th, .msg-text td { border: 1px solid var(--color-border); padding: var(--space-1) var(--space-2); text-align: left; } .msg-text th { background: var(--color-bg-secondary); font-weight: 600; } .msg-text a { color: var(--color-primary); text-decoration: underline; } .msg-text h1, .msg-text h2, .msg-text h3 { margin: 0.7em 0 0.25em 0; font-weight: 600; line-height: 1.3; } .msg-text h1 { font-size: 1.2em; } .msg-text h2 { font-size: 1.1em; } .msg-text h3 { font-size: 1.05em; } .msg-text hr { border: none; border-top: 1px solid var(--color-border); margin: 0.75em 0; } /* ── Task Progress Indicator ─────────────────────────────── */ .task-spinner { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; font-size: inherit; color: var(--color-text-muted); opacity: 1; } .task-spinner::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: task-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes task-spin { to { transform: rotate(360deg); } } .task-status-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border-radius: var(--radius-full); font-size: inherit; font-weight: 600; margin-left: auto; opacity: 1; } .task-status-badge.completed { background: var(--color-success-bg); color: var(--color-success); } .task-status-badge.failed { background: var(--color-error-bg); color: var(--color-error); } .task-status-badge.approval { background: #FFFBEB; color: #D97706; } .task-status-badge.suspended { background: #EFF6FF; color: #2563EB; } /* ── Quick Reply Buttons (approval gate, data collection choices) ── */ .quick-reply-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .quick-reply-bar .btn.selected { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .quick-reply-bar .btn:disabled { cursor: default; } .quick-reply-bar .btn:disabled:not(.selected) { opacity: 0.4; } /* ── Sidebar Activity Indicator (thinking dots) ──────────── */ .session-activity { display: inline-flex; gap: 2px; position: absolute; right: var(--space-3); bottom: var(--space-2); } .session-item:hover .session-activity { opacity: 0; } .session-activity span { width: 4px; height: 4px; background: var(--color-primary-light); border-radius: 50%; animation: typing 1.4s infinite; } .session-activity span:nth-child(2) { animation-delay: 0.2s; } .session-activity span:nth-child(3) { animation-delay: 0.4s; } /* ============================================================ Dismissable Alerts ============================================================ */ .alert { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--space-4); animation: alert-in 0.2s ease-out; } .alert-success { background: var(--color-success-bg); color: var(--color-success); } .alert-error { background: var(--color-error-bg); color: var(--color-error); } .alert-dismiss { background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; padding: 0 0 0 var(--space-3); font-size: 1.1rem; line-height: 1; flex-shrink: 0; transition: opacity 0.15s; } .alert-dismiss:hover { opacity: 1; } @keyframes alert-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .alert.dismissing { animation: alert-out 0.3s ease-out forwards; } @keyframes alert-out { from { opacity: 1; max-height: 60px; margin-bottom: var(--space-4); } to { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } } /* ── Rich Content ──────────────────────────────────────────────── */ .rich-content-container { margin-top: 8px; border-radius: 8px; overflow: hidden; } .rich-content-loading { padding: 12px; color: var(--text-muted); font-style: italic; } .rich-content-expired, .rich-content-empty, .rich-content-unsupported { padding: 12px; color: var(--text-muted); font-size: 0.85em; } .rich-data-scroll { max-height: 400px; overflow: auto; border: 1px solid var(--border-color); border-radius: 6px; } .rich-data-table { width: 100%; border-collapse: collapse; font-size: 0.85em; } .rich-data-table th { position: sticky; top: 0; background: var(--bg-tertiary, #f5f5f5); padding: 6px 10px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border-color); white-space: nowrap; user-select: none; cursor: pointer; } .rich-data-table th.sort-asc::after { content: ' \25B2'; font-size: 0.7em; } .rich-data-table th.sort-desc::after { content: ' \25BC'; font-size: 0.7em; } .rich-data-table td { padding: 4px 10px; border-bottom: 1px solid var(--border-color); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rich-data-table tbody tr:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); } .rich-data-info { padding: 6px 10px; font-size: 0.8em; color: var(--text-muted); text-align: right; } /* ── Rich Content: Key-Value Card ─────────────────────────────── */ .rich-kv-card { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; font-size: 0.85em; } .rich-kv-row { display: flex; padding: 6px 12px; border-bottom: 1px solid var(--border-color); } .rich-kv-row:last-child { border-bottom: none; } .rich-kv-row:nth-child(even) { background: var(--bg-hover, rgba(0,0,0,0.02)); } .rich-kv-label { flex: 0 0 140px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rich-kv-value { flex: 1; word-break: break-word; }