/** * ACS Chat Room Styles * Styles for the Limited MCP ACS Chat Room interface * Extracted from limited-mcp-chat-room.html for better maintainability * Updated to use Fluent 2 Design System variables from styles.css */ /* Note: Base styles (*, body font, margin) are handled by styles.css */ /** * Full-viewport shell layout for the Teams app page only (`teamsapp.html` uses `body.teams-app-body`). * Must NOT apply to arbitrary host pages: the Chrome extension injects this file globally, and an * unscoped `body { overflow: hidden }` would lock scrolling on every site. */ body.teams-app-body { /* Layout specific to ACS Chat Room — validation #5336719 items #14, #19. * `100dvh` (with `100vh` fallback) ensures the bottom composer is never * pushed below the iOS Safari URL bar or the Teams meeting side panel * footer. */ height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; /* Prevent body scroll */ /* Reserve room for the iOS home indicator / Android nav bar so the * typing field stays tappable. */ padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; } /* ========================================================================== * GLYDE scope boundary (CSS isolation) * -------------------------------------------------------------------------- * Every rule below is wrapped in `@scope (.glyde-app, .glyde-scope, * [id^='glyde-'])` so that the generic selectors used by the chat UI * (`.message`, `.content`, `.input-area`, `.loading`, `.title-text`, etc.) only * match elements inside a GLYDE root and never leak onto, or inherit from, an * arbitrary host page (the Chrome extension injects this file globally). A GLYDE * root is any of: `.glyde-app` (owned page ), `.glyde-scope` (explicitly * tagged side-panel/popout + body-appended raw-data modal), or * `[id^='glyde-']` (injected `#glyde-chat-modal` etc.). `[class^='glyde-']` is * intentionally excluded because the launcher adds `glyde-has-links-launcher` to * the HOST . Host-body launcher offsets (`body.glyde-has-links-launcher …`) * must remain global and are therefore kept OUTSIDE this scope block. * ========================================================================== */ @scope (.glyde-app, .glyde-scope, [id^='glyde-']) { /* Message Container - Teams Channel Style */ .message { display: flex; align-items: flex-start; margin-bottom: 8px; padding: 4px 0; animation: slideIn 0.2s ease-out; } .message.no-animate { animation: none; } @keyframes slideIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Message Avatar - Teams Style with Depth */ .message-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--colorNeutralBackground2, #f3f2f1); color: var(--colorNeutralForeground1, #323130); border: 1px solid var(--colorNeutralStroke1, #dcdcdc); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; margin-right: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); transition: box-shadow 0.2s ease; } .message-avatar:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12); } .message-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .message-avatar-initials, .message-avatar-emoji { font-size: 16px; } /* Message Content Container */ .message-content-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; max-width: 70%; position: relative; } /* Ensure message container allows overflow for icons */ .message { position: relative; overflow: visible; } /* Sender Name - Teams Style */ .message .sender { font-weight: 600; font-size: 13px; color: var(--colorNeutralForeground1, #323130); margin-bottom: 2px; line-height: 1.2; } .message.bot .sender { color: var(--color-brand-primary, #6264a7); } /* Message timestamp - subtle and compact */ .message-time, .fluent-messages .message-time { font-size: 11px; color: var(--colorNeutralForeground3, #8a8886); margin-top: 2px; line-height: 1.2; } /* Message Bubble - Teams Channel Style Refined with Depth */ .message .content { background: var(--colorNeutralBackground1, white); padding: 10px 14px; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; font-size: 14px; color: var(--colorNeutralForeground1, #242424); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); position: relative; transition: box-shadow 0.2s ease; } .message .content:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); } /* Bot messages - Left aligned with depth */ .message.bot .content { background: var(--colorNeutralBackground1, white); border: 1px solid var(--colorNeutralStroke2, #e0e0e0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); } .message.bot .content:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 2px 5px rgba(0, 0, 0, 0.1); } /* LLM agent replies should render inline, without the user-style card or avatar. Keep the branded welcome message and user bubbles unchanged. */ .message.bot:not(.welcome-message) .message-avatar { display: none; } .message.bot:not(.welcome-message) .content { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .message.bot:not(.welcome-message) .content:hover { box-shadow: none !important; } /* Agent markdown (core/utils renderAgentMarkdown) — compact typography inside bot bubbles */ .message.bot .content.glyde-agent-md strong.glyde-md-heading { display: block; margin: 0.35em 0 0.2em; font-size: 1.02em; } .message.bot .content.glyde-agent-md .glyde-agent-md-block + .glyde-agent-md-block { margin-top: 0.5em; } .message.bot .content.glyde-agent-md ul { margin: 0.35em 0 0.45em 1.2em; padding: 0; list-style: disc; } .message.bot .content.glyde-agent-md li { margin: 0.15em 0; } .message.bot .content.glyde-agent-md code { font-size: 0.92em; padding: 0.08em 0.35em; border-radius: 4px; background: var(--colorNeutralBackground3, #f0f0f0); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* User messages - Right aligned with depth */ .message:not(.bot) { flex-direction: row-reverse !important; } .message:not(.bot) .message-content-wrapper { align-items: flex-end !important; } .message:not(.bot) .content { background: var(--color-brand-lighter, #f4f4fb) !important; color: var(--colorNeutralForeground1, #242424) !important; border: 1px solid var(--color-brand-light, #e7e7f4) !important; box-shadow: 0 2px 6px rgba(98, 100, 167, 0.15), 0 1px 3px rgba(98, 100, 167, 0.1) !important; } .message:not(.bot) .content:hover { box-shadow: 0 4px 10px rgba(98, 100, 167, 0.2), 0 2px 5px rgba(98, 100, 167, 0.15) !important; } .message:not(.bot) .message-avatar { margin-right: 0 !important; margin-left: 8px !important; } /* Raw Data Icons - Positioned tight to outer right of bot message bubble */ .message.bot { position: relative; } /* Raw data icons positioned relative to message-content-wrapper */ .message-content-wrapper .raw-data-icons { position: absolute; right: -32px; top: 4px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; z-index: 10; } /* Ensure fluent messages container allows overflow */ .fluent-messages .message { overflow: visible; position: relative; will-change: auto; /* No will-change — prevents layout thrashing during message updates */ } .fluent-messages .message-content-wrapper { overflow: visible; } .fluent-messages .message-content-wrapper .raw-data-icons { position: absolute; right: -32px; top: 4px; } .raw-data-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--colorNeutralBackground1, white); border: 1px solid var(--colorNeutralStroke2, #e0e0e0); border-radius: 4px; cursor: pointer; padding: 0; transition: all 0.2s ease; color: var(--colorNeutralForeground2, #605e5c); } .raw-data-icon:hover { background: var(--colorNeutralBackground2, #f3f2f1); border-color: var(--color-brand-primary, #6264a7); color: var(--color-brand-primary, #6264a7); transform: scale(1.1); } .raw-data-icon:active { transform: scale(0.95); } .raw-data-icon svg { width: 10px; height: 10px; display: block; } /* Raw Data Modal */ .raw-data-modal { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 99999 !important; pointer-events: none; align-items: center; justify-content: center; } .raw-data-modal.active { display: flex !important; pointer-events: all !important; } .raw-data-modal-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(4px); z-index: 1; } .raw-data-modal-content { position: relative !important; margin: auto !important; width: 90% !important; max-width: 800px !important; max-height: 90vh !important; background: var(--colorNeutralBackground1, white) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; z-index: 2 !important; opacity: 1 !important; visibility: visible !important; animation: modalSlideIn 0.2s ease-out; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .raw-data-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0); background: var(--colorNeutralBackground2, #f3f2f1); } .raw-data-modal-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--colorNeutralForeground1, #242424); } .raw-data-modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 4px; cursor: pointer; font-size: 24px; line-height: 1; color: var(--colorNeutralForeground2, #605e5c); transition: all 0.2s ease; padding: 0; } .raw-data-modal-close:hover { background: var(--colorNeutralBackground3, #edebe9); color: var(--colorNeutralForeground1, #242424); } .raw-data-modal-body { flex: 1; overflow: auto; padding: 20px; } .raw-data-content { margin: 0; padding: 16px; background: var(--colorNeutralBackground2, #f3f2f1); border: 1px solid var(--colorNeutralStroke2, #e0e0e0); border-radius: 8px; font-family: 'Courier New', 'Consolas', 'Monaco', monospace; font-size: 13px; line-height: 1.6; color: var(--colorNeutralForeground1, #242424); white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; } /* Markdown styling - Tighter spacing */ .message .content h1, .message .content h2, .message .content h3 { margin-top: 8px; margin-bottom: 4px; font-weight: 600; line-height: 1.2; } .message .content p { margin: 4px 0; line-height: 1.4; } .message .content ul, .message .content ol { margin: 4px 0; padding-left: 20px; } .message .content li { margin: 2px 0; } /* Input Area - Modern/Teams Style */ .input-area { /* Validation #5336719 items #14, #19 — bottom padding includes the iOS * home-indicator safe area so the input field is never hidden under * device chrome on phones / the Teams meeting side panel. */ padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--colorNeutralBackground1, white); border-top: 1px solid var(--colorNeutralStroke2, #edebe9); display: flex; gap: 10px; align-items: center; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03); flex-shrink: 0; z-index: 100; } .input-area .fluent-send-btn { background: var(--color-brand-primary, #6264a7); color: var(--color-white, white); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; padding: 0; font-size: 0; } .input-area .fluent-send-btn:hover { background: var(--color-brand-primary-hover, #4b4d8c); } .input-area .fluent-send-btn svg { width: 16px; height: 16px; fill: white; } /* Send Icon (using text fallback or svg if available) */ .input-area .fluent-send-btn::after { content: '➤'; font-size: 14px; margin-left: 2px; } .input-area .fluent-send-btn:disabled { background: var(--colorNeutralStroke1, #ccc); cursor: not-allowed; } /* Loading Spinner */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Status Messages - Teams Style */ .status-message { text-align: center; padding: 10px 16px; margin: 12px 16px; border-radius: 4px; font-size: 13px; line-height: 1.4; border: 1px solid; } .status-message.info { background: var(--color-info-light, #deecf9); color: var(--color-info, #004578); border-color: #c7e0f4; } .status-message.error { background: var(--color-danger-light, #fde7e9); color: var(--color-danger, #a80000); border-color: #f1bbbb; } .status-message.success { background: var(--color-success-light, #dff6dd); color: var(--color-success, #107c10); border-color: #92c5f7; } /* Typing Indicator - GLYDE Unwrap Animation */ .typing-indicator { padding: 12px 16px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; } /* Status text shown next to typing indicator */ .typing-indicator .status-text { color: var(--colorNeutralForeground2, #666); font-size: 0.85em; font-style: italic; animation: status-fade-in 0.3s ease-out; padding: 4px 10px; background: var(--colorNeutralBackground2, #f5f5f5); border-radius: var(--border-radius-small, 4px); border-left: 3px solid var(--colorNeutralStroke2, #e0e0e0); } @keyframes status-fade-in { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } } /* Phase-specific styling for typing indicator status */ .typing-indicator.status-phase-routing .status-text { border-left-color: var(--color-info, #0078d4); } .typing-indicator.status-phase-executing .status-text { border-left-color: var(--color-brand-primary, #6264a7); } .typing-indicator.status-phase-processing .status-text { border-left-color: var(--color-success, #107c10); } .typing-indicator.status-phase-finalizing .status-text { border-left-color: var(--color-warning, #ffb900); } .typing-indicator.status-phase-error .status-text { border-left-color: var(--color-danger, #d13438); color: var(--color-danger, #d13438); } /* GLYDE Loader - Unwrap Animation for Typing Indicator */ .typing-indicator .glyde-loader { --loader-size: 24px; --loader-stroke: 2px; --loader-color: var(--color-brand-primary, #6264a7); --trail-width: calc(var(--loader-size) * 3.14159); --animation-duration: 3.5s; position: relative; width: calc(var(--trail-width) + var(--loader-size)); height: var(--loader-size); display: flex; align-items: center; justify-content: flex-start; } .typing-indicator .glyde-loader__ring { position: absolute; left: 0; width: var(--loader-size); height: var(--loader-size); animation: glyde-ring-position var(--animation-duration) ease-in-out infinite; } .typing-indicator .glyde-loader__ring svg { width: 100%; height: 100%; animation: glyde-ring-rotate var(--animation-duration) ease-in-out infinite; } .typing-indicator .glyde-loader__ring circle { fill: none; stroke: var(--loader-color); stroke-width: var(--loader-stroke); stroke-linecap: round; stroke-dasharray: 282.74; stroke-dashoffset: 35; transform-origin: center; animation: glyde-ring-arc var(--animation-duration) ease-in-out infinite; } .typing-indicator .glyde-loader__trail { position: absolute; left: calc(var(--loader-size) / 2); top: calc(var(--loader-size) - var(--loader-stroke) / 2); height: var(--loader-stroke); background: var(--loader-color); transform-origin: left center; border-radius: calc(var(--loader-stroke) / 2); animation: glyde-trail-motion var(--animation-duration) ease-in-out infinite; } /* Ring position - moves right during unwrap, stays left during wind-up */ @keyframes glyde-ring-position { 0%, 30% { left: 0; } 55% { left: var(--trail-width); } 64.9% { left: var(--trail-width); } 65%, 93%, 100% { left: 0; } } /* Ring rotation - clockwise throughout */ @keyframes glyde-ring-rotate { 0% { transform: rotate(0deg); } 30% { transform: rotate(720deg); } 55% { transform: rotate(1080deg); } 64.9%, 65% { transform: rotate(1080deg); } 93%, 100% { transform: rotate(1440deg); } } /* Ring arc length - unwinding/winding effect */ @keyframes glyde-ring-arc { 0%, 30% { stroke-dashoffset: 35; } 55%, 65% { stroke-dashoffset: 282.74; } 93%, 100% { stroke-dashoffset: 35; } } /* Trail - extend right, retract from right */ @keyframes glyde-trail-motion { 0%, 29.9% { width: 0; transform-origin: left center; } 30% { width: 0; transform-origin: left center; } 55%, 65% { width: var(--trail-width); transform-origin: left center; } 65.1% { width: var(--trail-width); transform: scaleX(1); transform-origin: left center; } 93% { width: var(--trail-width); transform: scaleX(0); transform-origin: left center; } 93.1%, 100% { width: 0; transform: scaleX(1); transform-origin: left center; } } /* Note: .glyde-hidden is removed as it is handled by styles.css */ /* ============================================ Status Indicator - LLM Processing Progress Shows reasoning-style status messages during long-running LLM operations ============================================ */ .status-indicator { padding: 10px 16px; display: flex; align-items: center; justify-content: flex-start; animation: status-fade-in 0.3s ease-out; } @keyframes status-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .status-indicator .status-content { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--colorNeutralBackground2, #f5f5f5); border-radius: var(--border-radius-medium, 8px); border: 1px solid var(--colorNeutralStroke2, #e0e0e0); max-width: 85%; } .status-indicator .status-text { color: var(--colorNeutralForeground2, #666); font-size: 0.85em; font-style: italic; } .status-indicator .status-step { color: var(--colorNeutralForeground3, #999); font-size: 0.75em; background: var(--colorNeutralBackground3, #e8e8e8); padding: 2px 6px; border-radius: var(--border-radius-small, 4px); } /* Mini loader for status indicator - smaller version of GLYDE loader */ .status-indicator .glyde-loader--mini { --loader-size: 16px; --loader-stroke: 2px; --loader-color: var(--color-brand-primary, #6264a7); position: relative; width: var(--loader-size); height: var(--loader-size); flex-shrink: 0; } .status-indicator .glyde-loader--mini .glyde-loader__ring { position: absolute; left: 0; width: var(--loader-size); height: var(--loader-size); } .status-indicator .glyde-loader--mini .glyde-loader__ring svg { width: 100%; height: 100%; animation: status-spin 1s linear infinite; } .status-indicator .glyde-loader--mini .glyde-loader__ring circle { fill: none; stroke: var(--loader-color); stroke-width: var(--loader-stroke); stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 60; transform-origin: center; } @keyframes status-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Phase-specific styling */ .status-indicator.status-phase-routing .status-content { border-left: 3px solid var(--color-info, #0078d4); } .status-indicator.status-phase-executing .status-content { border-left: 3px solid var(--color-brand-primary, #6264a7); } .status-indicator.status-phase-processing .status-content { border-left: 3px solid var(--color-success, #107c10); } .status-indicator.status-phase-finalizing .status-content { border-left: 3px solid var(--color-warning, #ffb900); } .status-indicator.status-phase-error .status-content { border-left: 3px solid var(--color-danger, #d13438); } /* Loading State Styles - Consolidated from limited-mcp-chat-room.html */ .loading-container { font-size: 48px; margin-bottom: 20px; } .loading-large { width: 60px; height: 60px; border-width: 5px; border-color: rgba(98, 100, 167, 0.3); border-top-color: var(--color-brand-primary, #6264a7); } .loading-subtitle { color: var(--colorNeutralForeground3, #666); margin-top: 10px; } /* Collapsible citation styles for raw JSON responses */ .message .content details { margin: 12px 0; border-left: 3px solid var(--color-info, #0078d4); background: var(--colorNeutralBackground2, #f8f9fa); border-radius: 4px; overflow: hidden; } .message .content details summary { cursor: pointer; padding: 10px 14px; color: var(--color-info, #0078d4); font-size: 0.9em; font-weight: 500; user-select: none; background: var(--color-info-light, #f0f6ff); transition: background 0.2s; list-style: none; line-height: 1.5; } .message .content details summary::-webkit-details-marker { display: none; } .message .content details summary::before { content: '▶'; display: inline-block; margin-right: 6px; transition: transform 0.2s; font-size: 0.8em; } .message .content details[open] summary::before { transform: rotate(90deg); } .message .content details summary:hover { background: #e6f2ff; } .message .content details pre { background: var(--colorNeutralBackground1, #ffffff); padding: 14px; margin: 0; border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0); overflow-x: auto; font-size: 0.85em; line-height: 1.5; } .message .content details code { background: none; color: var(--colorNeutralForeground1, #333); font-family: 'Courier New', 'Consolas', monospace; } /* Mobile-specific styles */ @media (max-width: 768px) { body { height: 100dvh; /* Dynamic viewport height - accounts for keyboard */ } .input-area { position: sticky; bottom: 0; z-index: 100; background: var(--colorNeutralBackground1, white); } .message { margin-bottom: 12px; /* Slightly reduced for mobile */ } .message .content { padding: 10px 14px; /* Slightly reduced for mobile */ } /* --- Welcome message width override for mobile view --- */ /* The .welcome-message bubble must reach same width as input-area. By default, message-content-wrapper's max-width: 70%; For mobile, force .welcome-message (which contains .message-content-wrapper) and children to span most or all of the container width but with the same left/right padding as the input-area (16px) */ .welcome-message .message-content-wrapper { max-width: none !important; width: 100vw; margin-left: -16px; margin-right: -16px; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } /* If body or .messages-area uses padding, adjust -16px offset accordingly */ .welcome-message .content { border-radius: 0 !important; } /* Remove extra margin from .glyde-welcome to allow flush sides */ .welcome-message .glyde-welcome { margin-left: 0 !important; margin-right: 0 !important; } } /* Starter Prompts - MS Copilot Style */ .starter-prompts-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 40px; width: 100%; } .starter-prompts-header { text-align: center; margin-bottom: 24px; } .starter-logo { width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; } .starter-prompts-header h3 { font-size: 20px; font-weight: 600; color: var(--colorNeutralForeground1, #242424); margin: 0; } .starter-prompts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 600px; width: 100%; padding: 0 16px; } .starter-prompt-card { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; background: var(--colorNeutralBackground1, white); border: 1px solid var(--colorNeutralStroke2, #e0e0e0); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: left; height: 100%; } .starter-prompt-card:hover { background: var(--colorNeutralBackground1Hover, #f5f5f5); box-shadow: var(--shadow-2, 0 2px 8px rgba(0, 0, 0, 0.08)); border-color: var(--colorNeutralStroke1, #d1d1d1); transform: translateY(-2px); } .prompt-icon { font-size: 20px; margin-bottom: 8px; } .prompt-text { font-size: 14px; color: var(--colorNeutralForeground1, #242424); font-weight: 500; line-height: 1.4; } } /* === END GLYDE scope: host-body launcher offsets below stay global === */ @media (max-width: 720px) { body.glyde-has-links-launcher .acs-chat-full-container .input-area { padding-left: calc(16px + 72px); } body.glyde-has-links-launcher .acs-chat-full-container .voice-toggle-pill { min-width: 44px; padding: 8px 10px !important; } body.glyde-has-links-launcher .acs-chat-full-container .voice-toggle-pill .voice-pill-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* === GLYDE scope resumes === */ @scope (.glyde-app, .glyde-scope, [id^='glyde-']) { @media (max-width: 480px) { .starter-prompts-grid { grid-template-columns: 1fr; } } /* Full Mode Container (for general GLYDEBuddy chat) */ .acs-chat-full-container { position: relative; /* anchors .acs-popout-btn--floating */ display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--color-surface-primary, #f3f2f1); } .acs-chat-full-container .acs-messages-container { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; /* Override drawer animation styles - full mode should be visible and scrollable */ min-height: 0 !important; /* Critical: allows flex item to shrink and enable scrolling */ opacity: 1 !important; /* Make visible (override drawer hidden state) */ height: unset !important; /* Remove fixed height from drawer animation */ } .acs-chat-full-container .input-area { flex-shrink: 0; } /* -------------------------------------------------------------------------- */ /* Fluent 2 Modern Styling Overrides */ /* -------------------------------------------------------------------------- */ /* 1. Modern Header */ .fluent-header { background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; border-radius: 12px !important; /* Soft rectangle, not pill */ margin: 12px 16px !important; min-height: 64px !important; position: absolute !important; top: 0; left: 0; right: 0; z-index: 10; } /* Header: let title grow; right controls shrink to fit visible content */ #glyde-chat-header .header-left { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; } #glyde-chat-header .header-right { flex: 0 0 auto; display: flex; justify-content: flex-end; } .title-text { font-family: 'Segoe UI Variable Display', sans-serif; font-weight: 600; font-size: 16px; color: var(--colorNeutralForeground1); } .subtitle-text { font-size: 12px; color: var(--colorNeutralForeground3); display: block; } /* 2. Chat Bubbles (Softer & Larger Radius) */ .fluent-messages { padding-top: 100px !important; /* Clear the absolute header */ flex: 1; overflow-y: auto; } .fluent-messages .message .content { border-radius: 16px !important; padding: 12px 16px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(0, 0, 0, 0.03) !important; font-size: 14px; line-height: 1.5; transition: box-shadow 0.2s ease; } .fluent-messages .message .content:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important; } /* Bot Message - With depth */ .fluent-messages .message.bot .content { background: #ffffff !important; border: 1px solid var(--colorNeutralStroke2, #e0e0e0) !important; border-bottom-left-radius: 4px !important; /* Tail effect */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06) !important; } .fluent-messages .message.bot .content:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 2px 5px rgba(0, 0, 0, 0.1) !important; } .fluent-messages .message.bot:not(.welcome-message) .content { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .fluent-messages .message.bot:not(.welcome-message) .content:hover { box-shadow: none !important; } /* User Message - With depth (right-aligned, stable during updates) */ .fluent-messages .message:not(.bot) { flex-direction: row-reverse !important; justify-content: flex-start !important; } .fluent-messages .message:not(.bot) .message-content-wrapper { align-items: flex-end !important; text-align: right; } .fluent-messages .message:not(.bot) .content { background: var(--color-brand-lighter, #f4f4fb) !important; color: var(--colorNeutralForeground1, #242424) !important; border: 1px solid var(--color-brand-light, #e7e7f4) !important; border-bottom-right-radius: 4px !important; /* Tail effect */ box-shadow: 0 2px 6px rgba(98, 100, 167, 0.15), 0 1px 3px rgba(98, 100, 167, 0.1) !important; } .fluent-messages .message:not(.bot) .content:hover { box-shadow: 0 4px 10px rgba(98, 100, 167, 0.2), 0 2px 5px rgba(98, 100, 167, 0.15) !important; } .fluent-messages .message:not(.bot) .message-avatar { margin-right: 0 !important; margin-left: 8px !important; } /* 3. Floating Input Area */ .fluent-input-area { margin: 0 16px 16px 16px; border-radius: 24px; border: 1px solid var(--colorNeutralStroke2) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important; background: rgba(255, 255, 255, 0.95) !important; padding: 8px 12px !important; display: flex; align-items: flex-end; gap: 10px; } .fluent-input { border: none !important; background: transparent !important; padding-left: 12px !important; font-size: 14px; line-height: 1.4; min-height: 1.4em; width: 100%; outline: none; white-space: pre-wrap; word-break: break-word; overflow-x: hidden; overflow-y: hidden; box-sizing: border-box; } .fluent-input:focus { box-shadow: none !important; } .input-wrapper { position: relative; flex: 1; min-width: 0; } .fluent-input:empty::before { content: attr(data-placeholder); color: var(--colorNeutralForeground3, #707070); pointer-events: none; } .acs-composer-token { display: inline-flex; vertical-align: middle; margin: 0 2px; } .fluent-send-btn { width: 32px !important; height: 32px !important; background: var(--color-brand-primary) !important; border-radius: 50%; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .fluent-send-btn:hover:not(:disabled) { transform: scale(1.1); background: var(--color-brand-primary-hover) !important; } /* 4. Fluent Dropdown (Select) */ .fluent-select-wrapper { position: relative; display: inline-block; } .fluent-select { appearance: none; background-color: transparent; border: 1px solid transparent; border-radius: 6px; padding: 6px 28px 6px 12px; font-size: 13px; font-weight: 500; color: var(--colorNeutralForeground1); cursor: pointer; transition: all 0.2s; } .fluent-select:hover { background-color: rgba(0, 0, 0, 0.04); } .fluent-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--colorNeutralForeground3); pointer-events: none; } /* 5. Icons & Buttons */ .fluent-icon-btn { color: var(--colorNeutralForeground2) !important; border-radius: 8px !important; padding: 8px !important; transition: background 0.2s; } .fluent-icon-btn:hover { background: rgba(0, 0, 0, 0.05) !important; color: var(--color-brand-primary) !important; } /* 6. Drawer Header Status Indicator */ .drawer-controls { display: flex; align-items: center; gap: 8px; } /* Popout button — injected by ACSChatInterface once a room exists. Drawer mode: sits in .drawer-controls; full mode: floats top-right. */ .acs-popout-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--colorNeutralForeground2, #616161); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .acs-popout-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--color-brand-primary, #6264a7); } .acs-popout-btn--floating { position: absolute; top: 8px; right: 8px; z-index: 5; background: var(--colorNeutralBackground1, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .drawer-status { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; } .drawer-status.glyde-hidden { display: none; } .drawer-status .spinner { width: 14px; height: 14px; border: 2px solid rgba(98, 100, 167, 0.2); border-top-color: var(--color-brand-primary, #6264a7); border-radius: 50%; animation: drawer-spin 0.8s linear infinite; } @keyframes drawer-spin { to { transform: rotate(360deg); } } .drawer-status .status-icon { font-size: 14px; font-weight: bold; line-height: 1; } .drawer-status .status-icon.success { color: var(--color-success, #107c10); } .drawer-status .status-icon.error { color: var(--color-danger, #a80000); } .drawer-status .status-icon.glyde-hidden { display: none; } /* Note: Conflicting .glyde-right-pane, .glyde-center-pane, and .glyde-crm-details overrides have been removed */ /* -------------------------------------------------------------------------- */ /* Voice Toggle Pill Button - Metallic Shine Design */ /* -------------------------------------------------------------------------- */ .voice-toggle-pill { display: flex; align-items: center; gap: 6px; padding: 8px 16px !important; border-radius: 24px !important; border: none !important; cursor: pointer; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; position: relative; overflow: hidden; transition: all 0.3s ease; flex-shrink: 0; width: auto !important; height: auto !important; min-width: 120px; /* Default state - Dark green metallic */ background: linear-gradient(135deg, #1a3a2a 0%, #0d2818 50%, #1a3a2a 100%) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .voice-toggle-pill .mic-icon { flex-shrink: 0; transition: transform 0.2s ease; } .voice-toggle-pill .voice-pill-text { white-space: nowrap; } /* Metallic shine animation overlay */ .voice-pill-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 100% ); animation: metallic-shine 5s ease-in-out infinite; pointer-events: none; } @keyframes metallic-shine { 0% { left: -100%; } 50%, 100% { left: 100%; } } /* Hover state - Show "enable voice" with red background */ .voice-toggle-pill:hover:not(.voice-active) { background: linear-gradient(135deg, #8b2635 0%, #6b1d29 50%, #8b2635 100%) !important; box-shadow: 0 2px 12px rgba(139, 38, 53, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .voice-toggle-pill:hover:not(.voice-active) .voice-pill-text { font-size: 0; } .voice-toggle-pill:hover:not(.voice-active) .voice-pill-text::after { font-size: 12px; content: 'enable voice'; } /* Active/Listening state - Bright green */ .voice-toggle-pill.voice-active { background: linear-gradient(135deg, #28a745 0%, #1e7e34 50%, #28a745 100%) !important; box-shadow: 0 2px 12px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.15); } .voice-toggle-pill.voice-active .voice-pill-shine { animation: metallic-shine-fast 1.5s ease-in-out infinite; } @keyframes metallic-shine-fast { 0% { left: -100%; } 50%, 100% { left: 100%; } } /* Active hover - Show red "Voice Off" */ .voice-toggle-pill.voice-active:hover { background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #dc3545 100%) !important; box-shadow: 0 2px 12px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .voice-toggle-pill.voice-active:hover .voice-pill-text { font-size: 0; } .voice-toggle-pill.voice-active:hover .voice-pill-text::after { font-size: 12px; content: 'Voice Off'; } /* Listening pulse animation */ .voice-toggle-pill.voice-listening { animation: voice-pill-pulse 1.5s ease-in-out infinite; } @keyframes voice-pill-pulse { 0%, 100% { box-shadow: 0 2px 12px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.15); } 50% { box-shadow: 0 2px 20px rgba(40, 167, 69, 0.6), 0 0 30px rgba(40, 167, 69, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.15); } } /* Processing state */ .voice-toggle-pill.voice-processing { background: linear-gradient(135deg, #ffc107 0%, #e0a800 50%, #ffc107 100%) !important; color: #212529 !important; } /* Speaking state */ .voice-toggle-pill.voice-speaking { background: linear-gradient(135deg, #17a2b8 0%, #138496 50%, #17a2b8 100%) !important; } /* Error state */ .voice-toggle-pill.voice-error { background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #dc3545 100%) !important; animation: voice-pill-error-shake 0.5s ease-in-out; } @keyframes voice-pill-error-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* -------------------------------------------------------------------------- */ /* Input Wrapper with Listening Indicator */ /* -------------------------------------------------------------------------- */ .input-wrapper { flex: 1; position: relative; display: flex; align-items: center; } .voice-listening-indicator { position: absolute; left: 12px; font-size: 12px; font-weight: 500; color: #28a745; opacity: 0; transform: translateY(2px); transition: all 0.2s ease; pointer-events: none; z-index: 1; display: flex; align-items: center; gap: 6px; } .voice-listening-indicator.active { opacity: 1; transform: translateY(0); } .voice-listening-indicator.active::before { content: ''; width: 8px; height: 8px; background: #28a745; border-radius: 50%; animation: listening-dot-pulse 1s ease-in-out infinite; } @keyframes listening-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* Adjust input padding when listening indicator is active */ .input-wrapper .fluent-input { transition: padding-left 0.2s ease; } .input-wrapper:has(.voice-listening-indicator.active) .fluent-input { padding-left: 100px !important; } /* Fallback for browsers without :has() support */ .voice-listening-indicator.active + .fluent-input { padding-left: 100px !important; } /* -------------------------------------------------------------------------- */ /* Message Deduplication Fix - Prevent user messages from jumping */ /* -------------------------------------------------------------------------- */ /* Ensure optimistic messages maintain position until confirmed */ .message.optimistic { opacity: 0.85; } /* (Duplicate .fluent-messages alignment rules consolidated into the canonical message blocks above — see ".fluent-messages .message" and the "User Message" section.) */ /* -------------------------------------------------------------------------- */ /* Result Tables - LLM-generated HTML tables for structured data */ /* -------------------------------------------------------------------------- */ .result-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; background: var(--colorNeutralBackground1, #ffffff); border-radius: var(--border-radius-medium, 8px); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .result-table thead { background: var(--colorNeutralBackground3, #f5f5f5); } .result-table th { padding: 10px 12px; text-align: left; font-weight: 600; color: var(--colorNeutralForeground1, #242424); border-bottom: 2px solid var(--colorNeutralStroke1, #d1d1d1); white-space: nowrap; } .result-table td { padding: 10px 12px; border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0); color: var(--colorNeutralForeground1, #242424); vertical-align: middle; } .result-table tbody tr:last-child td { border-bottom: none; } .result-table tbody tr:hover { background: var(--colorNeutralBackground1Hover, #f0f0f0); } /* Status badges in tables */ .result-table .status-badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; text-transform: capitalize; } .result-table .status-badge.new-lead, .result-table .status-badge.new { background: var(--colorPaletteGreenBackground2, #dff6dd); color: var(--colorPaletteGreenForeground2, #0e700e); } .result-table .status-badge.placed, .result-table .status-badge.hired { background: var(--colorPaletteBlueBerryBackground2, #e0e8ff); color: var(--colorPaletteBlueBerryForeground2, #3b49df); } .result-table .status-badge.shortlisted, .result-table .status-badge.qualified { background: var(--colorPaletteYellowBackground2, #fff4ce); color: var(--colorPaletteYellowForeground2, #835c00); } /* -------------------------------------------------------------------------- */ /* Interactive Record Links - Clickable elements that prefill chat input */ /* -------------------------------------------------------------------------- */ .record-link { color: var(--color-brand-primary, #6264a7); text-decoration: none; font-weight: 500; cursor: pointer; transition: all 0.15s ease; border-bottom: 1px dotted transparent; } .record-link:hover { color: var(--color-brand-primary-hover, #4b4d8c); border-bottom-color: var(--color-brand-primary, #6264a7); text-decoration: none; } .record-link:active { transform: scale(0.98); } /* Visual feedback when link is clicked */ .record-link.clicked { background: var(--colorPaletteBlueBerryBackground2, #e0e8ff); border-radius: 3px; padding: 0 2px; } /* Tooltip hint on hover */ .record-link::after { content: ' →'; opacity: 0; transition: opacity 0.15s ease; font-size: 10px; } .record-link:hover::after { opacity: 0.6; } .acs-macro-pill { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--colorNeutralStroke2, #d0d7de); background: var(--colorPaletteBlueBackground2, #eff6ff); color: var(--colorPaletteBlueForeground2, #0f548c); font-size: 12px; font-weight: 600; line-height: 1.3; vertical-align: middle; } .acs-macro-pill--entity-record { background: var(--colorPaletteBlueBackground2, #eff6ff); color: var(--colorPaletteBlueForeground2, #0f548c); } .acs-macro-pill--page-context { background: var(--colorPaletteGreenBackground2, #f0fdf4); color: var(--colorPaletteGreenForeground2, #166534); } .acs-macro-pill-icon { flex-shrink: 0; font-size: 12px; line-height: 1; } .acs-macro-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ACS composer attach controls (file + current page) — icon only, no button chrome */ .acs-composer-attach-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; align-self: flex-end; margin-bottom: 2px; } .acs-composer-icon-btn, .input-area .acs-composer-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-width: 0; min-height: 0; padding: 4px; border: none; border-radius: 0; background: transparent !important; color: var(--colorNeutralForeground3, #707070); cursor: pointer; flex-shrink: 0; font-size: inherit; box-shadow: none; } .acs-composer-icon-btn::after, .input-area .acs-composer-icon-btn::after { content: none !important; display: none !important; } .acs-composer-icon-btn svg, .input-area .acs-composer-icon-btn svg { width: 18px; height: 18px; fill: none !important; stroke: currentColor; } .acs-composer-icon-btn:hover, .input-area .acs-composer-icon-btn:hover { background: transparent !important; color: var(--colorNeutralForeground1, #242424); } .acs-composer-icon-btn:active, .input-area .acs-composer-icon-btn:active { background: transparent !important; color: var(--colorNeutralForeground1, #242424); opacity: 0.75; } .acs-macro-pill--file-context { border-color: var(--colorPaletteBlueBorderActive, #0f6cbd); background: var(--colorPaletteBlueBackground2, #ebf3fc); } .acs-document-confirm-banner { margin: 12px 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--colorPaletteYellowBorder2, #eaa300); background: var(--colorPaletteYellowBackground1, #fff9e6); } .acs-document-confirm-text { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--colorNeutralForeground1, #242424); } .acs-document-confirm-actions { display: flex; gap: 8px; } .acs-document-confirm-yes, .acs-document-confirm-no { font-size: 13px; padding: 6px 12px; border-radius: 4px; cursor: pointer; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); } .acs-document-confirm-yes { background: var(--colorBrandBackground, #6264a7); color: #fff; border-color: transparent; } .acs-document-confirm-no { background: var(--colorNeutralBackground1, #fff); } /* Mobile-friendly tap targets */ @media (max-width: 768px) { .result-table { font-size: 12px; } .result-table th, .result-table td { padding: 8px 10px; } .record-link { padding: 4px 2px; } .acs-macro-pill { max-width: 100%; } } /* Dark mode support for tables */ @media (prefers-color-scheme: dark) { .result-table { background: var(--colorNeutralBackground1, #1f1f1f); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .result-table thead { background: var(--colorNeutralBackground3, #2d2d2d); } .result-table th { color: var(--colorNeutralForeground1, #e0e0e0); border-bottom-color: var(--colorNeutralStroke1, #404040); } .result-table td { color: var(--colorNeutralForeground1, #e0e0e0); border-bottom-color: var(--colorNeutralStroke2, #333333); } .result-table tbody tr:hover { background: var(--colorNeutralBackground1Hover, #2a2a2a); } .record-link { color: var(--color-brand-primary, #8b8dd9); } .record-link:hover { color: var(--color-brand-primary-hover, #a5a7e8); } .acs-macro-pill { border-color: var(--colorNeutralStroke1, #404040); background: var(--colorNeutralBackground3, #2d3b4f); color: var(--colorPaletteBlueForeground2, #9cc9ff); } } /* -------------------------------------------------------------------------- */ /* Welcome Message - ACS-safe styling via CSS classes */ /* ACS strips inline styles and data-* attributes, so we use classes instead */ /* -------------------------------------------------------------------------- */ /* Welcome message: override standard message bubble styling so the custom banner/capabilities/suggestions layout renders edge-to-edge within the bubble. */ .welcome-message .content { padding: 0; background: transparent; } .welcome-message .message-content-wrapper { background: transparent; border: none; box-shadow: none; padding: 0; } .glyde-welcome { margin: -4px -8px 8px -8px; } .glyde-welcome-banner { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); color: #fff; padding: 20px 18px 16px; border-radius: 12px 12px 0 0; font-size: 13px; line-height: 1.5; display: flex; align-items: center; gap: 14px; } /* Full avatar in welcome banner: max 75px height or 50px width (whichever constrains) */ /* Transparent SVG background, no border, no white halo */ .glyde-welcome-avatar { max-height: 75px; max-width: 50px; width: auto; height: auto; border-radius: 50%; flex-shrink: 0; /* Removed border and box-shadow for no circular border or halo */ border: none; box-shadow: none; object-fit: cover; background-color: transparent; /* Ensure transparent background for SVGs */ } .glyde-welcome-banner-text { flex: 1; min-width: 0; line-height: 1.35; } .glyde-welcome-banner b { font-size: 18px; font-weight: 700; display: block; margin-bottom: 2px; } .message-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .glyde-welcome-capabilities { padding: 14px 18px 10px; background: #fafafa; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; font-size: 13px; color: #374151; line-height: 1.8; } .glyde-welcome-capabilities b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; margin-bottom: 6px; font-weight: 600; } .glyde-welcome-suggestions { padding: 10px 18px 14px; background: #fff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 12px 12px; } .glyde-welcome-suggestions b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; margin-bottom: 8px; font-weight: 600; } /* Suggestion chips - clickable pill buttons that prefill the chat input */ .glyde-suggestion-chip { display: inline-block; background: #f0f2f5; color: #242424; border-radius: 16px; padding: 6px 14px; margin: 3px 4px 3px 0; font-size: 13px; text-decoration: none; border: 1px solid #e0e0e0; transition: background 0.15s, box-shadow 0.15s; cursor: pointer; } .glyde-suggestion-chip:hover { background: #e4e6ea; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); text-decoration: none; color: #242424; } .glyde-suggestion-chip:active { background: #d8dade; transform: scale(0.98); } /* Dark mode for welcome message */ @media (prefers-color-scheme: dark) { .glyde-welcome-capabilities { background: var(--colorNeutralBackground1, #1f1f1f); border-color: var(--colorNeutralStroke1, #404040); color: var(--colorNeutralForeground1, #e0e0e0); } .glyde-welcome-capabilities b, .glyde-welcome-suggestions b { color: var(--colorNeutralForeground2, #a0a0a0); } .glyde-welcome-suggestions { background: var(--colorNeutralBackground1, #1f1f1f); border-color: var(--colorNeutralStroke1, #404040); } .glyde-suggestion-chip { background: var(--colorNeutralBackground3, #2d2d2d); color: var(--colorNeutralForeground1, #e0e0e0); border-color: var(--colorNeutralStroke1, #404040); } .glyde-suggestion-chip:hover { background: var(--colorNeutralBackground1Hover, #383838); color: var(--colorNeutralForeground1, #e0e0e0); } .message.bot .content .acs-oauth-card { border-color: var(--colorNeutralStroke1, #404040); background: var(--colorNeutralBackground3, #2d2d2d); box-shadow: none; } .message.bot .content .acs-oauth-card-title { color: var(--colorNeutralForeground1, #e0e0e0); } .message.bot .content .acs-oauth-card-copy { color: var(--colorNeutralForeground2, #c8c8c8); } } /* ATS OAuth prompt from Limited MCP bot (HTML message) */ .message.bot .content .acs-oauth-card { max-width: 100%; padding: 16px 18px; margin: 4px 0 0; border-radius: 12px; border: 1px solid var(--colorNeutralStroke2, #e0e0e0); background: var(--colorNeutralBackground2, #fafafa); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .message.bot .content .acs-oauth-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .message.bot .content .acs-oauth-brand-icon { flex-shrink: 0; line-height: 0; } .message.bot .content .acs-oauth-brand-icon svg { display: block; } .message.bot .content .acs-oauth-card-titles { min-width: 0; } .message.bot .content .acs-oauth-card-title { font-size: 16px; font-weight: 700; color: var(--colorNeutralForeground1, #242424); line-height: 1.3; } .message.bot .content .acs-oauth-card-subtitle { margin-top: 2px; font-size: 12px; color: var(--colorNeutralForeground3, #707070); } .message.bot .content .acs-oauth-card-copy { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--colorNeutralForeground2, #424242); } .message.bot .content .acs-oauth-actions { margin: 0 0 8px; } .message.bot .content .acs-oauth-login-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 24px; background: var(--color-brand-primary, #6264a7); color: var(--color-white, #fff) !important; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.2; border: none; cursor: pointer; box-shadow: 0 2px 4px rgba(98, 100, 167, 0.35); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .message.bot .content .acs-oauth-login-btn:hover { background: var(--color-brand-primary-hover, #4b4d8c); color: var(--color-white, #fff) !important; box-shadow: 0 3px 8px rgba(98, 100, 167, 0.45); } .message.bot .content .acs-oauth-login-btn:active { transform: translateY(1px); } .acs-chat-signin-prompt { padding: 1.25rem 1rem; text-align: center; } .acs-chat-signin-prompt__message { margin: 0 0 1rem; line-height: 1.45; } .acs-chat-signin-prompt__button { min-width: 220px; } .message.bot .content .acs-oauth-btn-label { pointer-events: none; } .message.bot .content .acs-oauth-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--colorNeutralForeground3, #707070); } /* === END GLYDE scope === */ }