/* line 1, app/assets/stylesheets/base/_variables.scss */ :root { /* Brand */ --primary-color: #007bff; --primary-dark: #0056b3; --secondary-color: #6c757d; --secondary-dark: #545b62; --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --background-primary: #ffffff; --background-secondary: #f8f9fa; --app-background: #ffffff; --border-color: #e1e5e9; --font-family: font-family: "Nunito Sans", Sans-serif; } /* Dark theme overrides. Toggle with */ /* line 25, app/assets/stylesheets/base/_variables.scss */ [data-theme='dark'] { --text-primary: #e5e7eb; /* gray-200 */ --text-secondary: #cbd5e1; /* slate-300 */ --text-muted: #94a3b8; /* slate-400 */ --background-primary: #17161a; /* panel backgrounds */ --background-secondary: #121113; --app-background: #1a191c; /* page background */ --border-color: rgba(255,255,255,0.12); } /* Sass variables reference CSS variables so components can theme at runtime */ /* legacy fallback */ /* modal.scss depends on variables; no direct @use to keep single-entry import model */ /* line 4, app/assets/stylesheets/base/_modals.scss */ .modal-open__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1000; } /* line 13, app/assets/stylesheets/base/_modals.scss */ .modal-open__overlay.show { opacity: 1; pointer-events: auto; } /* line 19, app/assets/stylesheets/base/_modals.scss */ .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1001; padding: 1.5rem; } /* line 28, app/assets/stylesheets/base/_modals.scss */ .modal .modal__content { background: var(--background-primary); color: var(--text-primary); border-radius: 0.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); border: 1px solid var(--border-color); width: 100%; max-width: 560px; overflow: hidden; display: flex; flex-direction: column; gap: 0; animation: modalIn .18s ease-out; } /* line 43, app/assets/stylesheets/base/_modals.scss */ .modal.modal--sm .modal__content { max-width: 420px; } /* line 44, app/assets/stylesheets/base/_modals.scss */ .modal.modal--md .modal__content { max-width: 560px; } /* line 45, app/assets/stylesheets/base/_modals.scss */ .modal.modal--lg .modal__content { max-width: 800px; } /* line 47, app/assets/stylesheets/base/_modals.scss */ .modal .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; background: color-mix(in srgb, var(--background-primary), #000 2%); border-bottom: 1px solid var(--border-color); } /* line 57, app/assets/stylesheets/base/_modals.scss */ .modal .modal__footer { border-top: 1px solid var(--border-color); border-bottom: 0; display: flex; gap: 0.5rem; justify-content: flex-end; padding: 1rem 1.5rem; background: color-mix(in srgb, var(--background-primary), #000 2%); } /* line 67, app/assets/stylesheets/base/_modals.scss */ .modal .modal__title { font-size: 1.25rem; } /* line 71, app/assets/stylesheets/base/_modals.scss */ .modal .modal__close { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; width: 32px; height: 32px; line-height: 1; font-size: 1.25rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; } /* line 86, app/assets/stylesheets/base/_modals.scss */ .modal .modal__close:hover { background: color-mix(in srgb, var(--background-primary), #000 6%); } /* line 89, app/assets/stylesheets/base/_modals.scss */ .modal .modal__body { padding: 1.5rem; background: var(--background-primary); } /* line 95, app/assets/stylesheets/base/_modals.scss */ .modal.modal--sm .modal__content { max-width: 420px; } /* line 96, app/assets/stylesheets/base/_modals.scss */ .modal.modal--md .modal__content { max-width: 560px; } /* line 97, app/assets/stylesheets/base/_modals.scss */ .modal.modal--lg .modal__content { max-width: 800px; } /* line 100, app/assets/stylesheets/base/_modals.scss */ body.modal-open { overflow: hidden; } @keyframes modalIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* line 1, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget { --bg: linear-gradient(145deg, #0a0e1a 0%, #1a1f35 50%, #0f1419 100%); --header-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%); --text: #f3f4f6; --surface: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.1); --separator: rgba(255, 255, 255, 0.1); --accent: #3b82f6; --accent-weak: rgba(59, 130, 246, 0.15); --accent-strong: rgba(59, 130, 246, 0.35); /* Bubbles */ --user-bubble-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%); --user-text: #e5e7eb; --bot-bubble-bg: rgba(255, 255, 255, 0.06); --bot-text: #f3f4f6; /* Inputs & Buttons */ --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.12); --input-text: #ffffff; --placeholder: rgba(255, 255, 255, 0.55); --button-bg: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); /* Scrollbar */ --scrollbar-track: rgba(255, 255, 255, 0.06); --scrollbar-thumb: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.5)); --radius: 12px; --radius-inner: 8px; --header-padding: 12px 16px; --tail-size: 6px; position: fixed; width: 100%; height: 100%; background: var(--bg); border-radius: var(--radius); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); display: none; flex-direction: column; z-index: 999999; font-family: "Nunito Sans", Sans-serif; font-size: 13px; overflow: hidden; } /* line 50, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget::before { content: none; } /* line 53, app/assets/stylesheets/base/_chat.scss */ .simple-chat-header { background: var(--header-bg); color: white; padding: var(--header-padding); border-radius: var(--radius) var(--radius) 0 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; border-bottom: none; position: relative; } /* line 65, app/assets/stylesheets/base/_chat.scss */ .simple-chat-header span { font-size: 16px; letter-spacing: 0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } /* line 72, app/assets/stylesheets/base/_chat.scss */ .simple-chat-close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; font-size: 18px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* line 86, app/assets/stylesheets/base/_chat.scss */ .simple-chat-close:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); transform: scale(1.1); box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); } /* line 94, app/assets/stylesheets/base/_chat.scss */ .simple-chat-messages { flex: 1; padding: 20px; overflow-y: auto; background: transparent; position: relative; } /* line 101, app/assets/stylesheets/base/_chat.scss */ .simple-chat-messages::-webkit-scrollbar { width: 6px; } /* line 105, app/assets/stylesheets/base/_chat.scss */ .simple-chat-messages::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px; } /* line 110, app/assets/stylesheets/base/_chat.scss */ .simple-chat-messages::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } /* line 114, app/assets/stylesheets/base/_chat.scss */ .simple-chat-messages::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, rgba(59, 130, 246, 0.7), rgba(139, 92, 246, 0.7)); } /* line 121, app/assets/stylesheets/base/_chat.scss */ .simple-message.bot img, .simple-message.bot .chat-image { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; object-fit: contain; border-radius: 6px; margin: 6px 0; border: 1px solid var(--border-color); background: var(--background-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* line 136, app/assets/stylesheets/base/_chat.scss */ .simple-message.bot a, .simple-message.bot .chat-link { color: var(--primary-color); text-decoration: underline; word-break: break-word; transition: color .15s ease; } /* line 144, app/assets/stylesheets/base/_chat.scss */ .simple-message.bot a:hover, .simple-message.bot .chat-link:hover { color: color-mix(in srgb, var(--primary-color), #ffffff 10%); } /* line 150, app/assets/stylesheets/base/_chat.scss */ .simple-chat-input { padding: 12px; height: 66px; border-top: none; display: flex; gap: 12px; background: transparent; } /* line 158, app/assets/stylesheets/base/_chat.scss */ .simple-chat-input input { flex: 1; padding: 12px 16px; border: 1px solid var(--input-border); border-radius: var(--radius-inner); background: var(--input-bg); color: var(--input-text); font-size: 13px; font-family: var(--font-family); outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* line 170, app/assets/stylesheets/base/_chat.scss */ .simple-chat-input input::placeholder { color: var(--placeholder); font-family: var(--font-family); } /* line 175, app/assets/stylesheets/base/_chat.scss */ .simple-chat-input input:focus { border-color: var(--accent); background: color-mix(in srgb, var(--input-bg), #ffffff 8%); box-shadow: 0 0 0 3px var(--accent-weak); transform: translateY(-1px); } /* line 183, app/assets/stylesheets/base/_chat.scss */ .simple-chat-input button { background: var(--button-bg); color: white; border: none; padding: 12px 12px; border-radius: var(--radius-inner); cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px var(--accent-strong); position: relative; overflow: hidden; } /* line 197, app/assets/stylesheets/base/_chat.scss */ .simple-chat-input button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--accent-strong); } /* line 198, app/assets/stylesheets/base/_chat.scss */ .simple-chat-input button:active { transform: translateY(0); } /* line 202, app/assets/stylesheets/base/_chat.scss */ .simple-chat-footer { padding: 6px 12px 10px 12px; border-top: none; background: transparent; border-radius: 0 0 var(--radius) var(--radius); font-size: 11px; color: var(--placeholder); text-align: right; } /* line 211, app/assets/stylesheets/base/_chat.scss */ .simple-chat-footer a { color: var(--placeholder); text-decoration: none; } /* line 216, app/assets/stylesheets/base/_chat.scss */ .simple-chat-footer a:hover { text-decoration: underline; } /* line 221, app/assets/stylesheets/base/_chat.scss */ .simple-message { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius-inner); display: block; width: fit-content; max-width: 85%; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; position: relative; animation: messageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* line 235, app/assets/stylesheets/base/_chat.scss */ .simple-message.user { background: var(--user-bubble-bg); color: var(--user-text); margin-left: auto; text-align: left; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1); } /* line 242, app/assets/stylesheets/base/_chat.scss */ .simple-message.user::before { content: ''; position: absolute; top: 50%; right: calc(var(--tail-size) * -1); transform: translateY(-50%); width: 0; height: 0; border-top: var(--tail-size) solid transparent; border-bottom: var(--tail-size) solid transparent; } /* line 255, app/assets/stylesheets/base/_chat.scss */ .simple-message.bot { background: var(--input-bg); color: var(--bot-text); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* line 260, app/assets/stylesheets/base/_chat.scss */ .simple-message.bot::before { content: ''; position: absolute; top: 50%; left: calc(var(--tail-size) * -1); transform: translateY(-50%); width: 0; height: 0; border-top: var(--tail-size) solid transparent; border-bottom: var(--tail-size) solid transparent; } /* line 274, app/assets/stylesheets/base/_chat.scss */ .simple-message.bot.typing, .simple-message.bot.streaming { font-family: var(--font-family); } /* line 279, app/assets/stylesheets/base/_chat.scss */ .loader { width: 18px; aspect-ratio: 2; --_g: no-repeat radial-gradient(circle closest-side, currentColor 90%, #0000); background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%; background-size: calc(100%/3) 50%; animation: l3 1s infinite linear; opacity: .85; } @keyframes l3 { 20% { background-position: 0% 0%, 50% 50%,100% 50%; } 40% { background-position: 0% 100%, 50% 0%,100% 50%; } 60% { background-position: 0% 50%, 50% 100%,100% 0%; } 80% { background-position: 0% 50%, 50% 50%,100% 100%; } } /* line 300, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget.theme-light { --bg: #f9f9f9; --header-bg: linear-gradient(135deg, #4f8ff8 0%, #996af8 100%); --text: #111827; --surface: #f3f4f6; --border: #e5e7eb; --separator: #e5e7eb; --accent: #3b82f6; --accent-weak: rgba(59, 130, 246, 0.18); --accent-strong: rgba(59, 130, 246, 0.28); /* Bubbles */ --user-bubble-bg: #eaf2ff; --user-text: #0f172a; --bot-bubble-bg: #f9f9f9; --bot-text: #111827; /* Inputs & Buttons */ --input-bg: #f3f4f6; --input-border: #e5e7eb; --input-text: #111827; --placeholder: #9ca3af; --button-bg: linear-gradient(135deg, #4f8ff8 0%, #996af8 100%); /* Scrollbar */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; } /* line 329, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget.theme-fani { --bg: #ffffff; --header-bg: linear-gradient(135deg, #CC040C 0%, #a6030a 100%); --text: #111827; --surface: #f9fafb; --border: #e5e7eb; --separator: #e5e7eb; --accent: #CC040C; --accent-weak: rgba(204, 4, 12, 0.16); --accent-strong: rgba(204, 4, 12, 0.32); /* Bubbles */ --user-bubble-bg: rgba(204, 4, 12, 0.10); --user-text: #111827; --bot-bubble-bg: #ffffff; --bot-text: #111827; /* Inputs & Buttons */ --input-bg: #f8fafc; --input-border: #e5e7eb; --input-text: #111827; --placeholder: #9ca3af; --button-bg: linear-gradient(135deg, #CC040C 0%, #990309 100%); /* Scrollbar */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: rgba(204, 4, 12, 0.45); } /* line 358, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget.theme-dark { --bg: linear-gradient(145deg, #0a0e1a 0%, #1a1f35 50%, #0f1419 100%); --header-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%); --text: #f3f4f6; --surface: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.12); --separator: rgba(255, 255, 255, 0.1); --accent: #3b82f6; --accent-weak: rgba(59, 130, 246, 0.15); --accent-strong: rgba(59, 130, 246, 0.35); --user-bubble-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%); --user-text: #e5e7eb; --bot-bubble-bg: rgba(255, 255, 255, 0.06); --bot-text: #f3f4f6; --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.12); --input-text: #ffffff; --placeholder: rgba(255, 255, 255, 0.55); --button-bg: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); --scrollbar-track: rgba(255, 255, 255, 0.06); --scrollbar-thumb: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.5)); } /* Dimmed dark */ /* line 385, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget.theme-dim { --bg: linear-gradient(160deg, #0c111b 0%, #141a28 100%); --header-bg: linear-gradient(135deg, #334155 0%, #475569 100%); --text: #e5e7eb; --surface: #111827; --border: #1f2937; --separator: #1f2937; --accent: #60a5fa; --accent-weak: rgba(96, 165, 250, 0.2); --accent-strong: rgba(96, 165, 250, 0.35); --user-bubble-bg: rgba(96, 165, 250, 0.15); --user-text: #e5e7eb; --bot-bubble-bg: #0f172a; --bot-text: #e5e7eb; --input-bg: #0f172a; --input-border: #1f2937; --input-text: #e5e7eb; --placeholder: #9ca3af; --button-bg: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%); --scrollbar-track: #101623; --scrollbar-thumb: #334155; } /* Ocean */ /* line 412, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget.theme-ocean { --bg: linear-gradient(145deg, #031a1f 0%, #072c34 50%, #0a3d46 100%); --header-bg: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); --text: #e6fffb; --surface: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.12); --separator: rgba(255, 255, 255, 0.1); --accent: #0ea5e9; --accent-weak: rgba(14, 165, 233, 0.2); --accent-strong: rgba(14, 165, 233, 0.35); --user-bubble-bg: rgba(14, 165, 233, 0.18); --user-text: #ecfeff; --bot-bubble-bg: rgba(255, 255, 255, 0.06); --bot-text: #e6fffb; --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.12); --input-text: #e6fffb; --placeholder: rgba(230, 255, 251, 0.55); --button-bg: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); --scrollbar-track: rgba(255, 255, 255, 0.06); --scrollbar-thumb: rgba(14, 165, 233, 0.4); } /* Fani (light) */ /* line 439, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget.theme-workflowai { --bg: #ffffff; --header-bg: linear-gradient(135deg,#90d0d6 0%, #90d0d6 100%); --text: #111827; --surface: #f9fafb; --border: #e5e7eb; --separator: #e5e7eb; --accent:#90d0d6; --accent-weak: rgba(4, 131, 204, 0.16); --accent-strong: rgba(4, 114, 204, 0.32); /* Bubbles */ --user-bubble-bg: rgba(204, 4, 12, 0.10); --user-text: #111827; --bot-bubble-bg: #ffffff; --bot-text: #111827; /* Inputs & Buttons */ --input-bg: #f8fafc; --input-border: #e5e7eb; --input-text: #111827; --placeholder: #9ca3af; --button-bg: linear-gradient(135deg,#90d0d6 0%, #90d0d6 100%); /* Scrollbar */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: rgba(32, 150, 171, 0.45); } /* Ocean (transparent background for overlay/hero use) */ /* line 470, app/assets/stylesheets/base/_chat.scss */ .simple-chat-widget.theme-ocean-transparent { /* inherit ocean palette */ --bg: transparent; --header-bg: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); --text: #e6fffb; --surface: transparent; --border: rgba(255, 255, 255, 0.12); --separator: rgba(255, 255, 255, 0.1); --accent: #0ea5e9; --accent-weak: rgba(14, 165, 233, 0.2); --accent-strong: rgba(14, 165, 233, 0.35); /* Bubbles */ --user-bubble-bg: rgba(14, 165, 233, 0.18); --user-text: #ecfeff; --bot-bubble-bg: rgba(255, 255, 255, 0.06); --bot-text: #e6fffb; /* Inputs & Buttons */ --input-bg: rgba(35, 75, 74, 0.9); --input-border: rgba(255, 255, 255, 0.12); --input-text: #e6fffb; --placeholder: rgba(230, 255, 251, 0.55); --button-bg: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); /* Scrollbar */ --scrollbar-track: rgba(255, 255, 255, 0.06); --scrollbar-thumb: rgba(14, 165, 233, 0.4); box-shadow: unset; font-family: "Nunito Sans", Sans-serif; } /* line 503, app/assets/stylesheets/base/_chat.scss */ .web-bot-hero { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; } /* line 509, app/assets/stylesheets/base/_chat.scss */ .web-bot-hero .simple-message, .web-bot-hero .simple-chat-input input, .web-bot-hero .simple-chat-input button { border: 1px solid white; } /* line 514, app/assets/stylesheets/base/_chat.scss */ .hero-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 20px 0 28vh 0; } /* line 523, app/assets/stylesheets/base/_chat.scss */ .hero-brand .simple-chat-logo { display: block; width: 220px; max-width: 60%; height: auto; object-fit: contain; background: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)); } /* line 541, app/assets/stylesheets/base/_chat.scss */ .hero-brand .hero-message { font-family: "Nunito Sans", Sans-serif; margin-top: 20px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 200; letter-spacing: 0.4px; } /* line 552, app/assets/stylesheets/base/_chat.scss */ .web-bot-hero .simple-chat-input { transform: translateY(-35vh); transition: transform 0.3s ease; } /* line 557, app/assets/stylesheets/base/_chat.scss */ .web-bot-hero.hero-align-start { justify-content: flex-start; } /* line 561, app/assets/stylesheets/base/_chat.scss */ .web-bot-hero.hero-align-start .simple-chat-input { transform: translateY(0); } /* line 1, app/assets/stylesheets/base/_first_styles.scss */ * { margin: 0; padding: 0; box-sizing: border-box; } /* line 7, app/assets/stylesheets/base/_first_styles.scss */ body { font-family: var(--font-family); line-height: 1.6; color: var(--text-primary); background: var(--app-background); } /* line 14, app/assets/stylesheets/base/_first_styles.scss */ .app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } /* line 20, app/assets/stylesheets/base/_first_styles.scss */ .sidebar { background: #121113; border-right: 1px solid rgba(255, 255, 255, 0.08); padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; } /* line 29, app/assets/stylesheets/base/_first_styles.scss */ .brand { font-weight: 700; color: #fff; margin-bottom: 10px; cursor: pointer; } /* line 36, app/assets/stylesheets/base/_first_styles.scss */ .menu { display: flex; flex-direction: column; gap: 4px; } /* line 42, app/assets/stylesheets/base/_first_styles.scss */ .menu-item { color: #d1d5db; text-decoration: none; padding: 8px 10px; border-radius: 6px; transition: background .15s ease, color .15s ease; } /* line 49, app/assets/stylesheets/base/_first_styles.scss */ .menu-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } /* line 55, app/assets/stylesheets/base/_first_styles.scss */ .sidebar-footer { margin-top: auto; } /* line 59, app/assets/stylesheets/base/_first_styles.scss */ .content { padding: 24px; } /* line 63, app/assets/stylesheets/base/_first_styles.scss */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* line 69, app/assets/stylesheets/base/_first_styles.scss */ .main-content { min-height: calc(100vh - 120px); padding: 2rem 0; } /* line 74, app/assets/stylesheets/base/_first_styles.scss */ .footer { background: var(--background-primary); border-top: 1px solid var(--border-color); padding: 1rem 0; text-align: center; color: var(--text-secondary); margin-top: auto; } /* line 84, app/assets/stylesheets/base/_first_styles.scss */ .btn { display: inline-block; padding: 0.75rem 1.5rem; background: var(--primary-color); color: white; text-decoration: none; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; } /* line 14, app/assets/stylesheets/base/_mixins.scss */ .btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* line 86, app/assets/stylesheets/base/_first_styles.scss */ .btn-secondary { display: inline-block; padding: 0.75rem 1.5rem; background: var(--secondary-color); color: white; text-decoration: none; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; } /* line 14, app/assets/stylesheets/base/_mixins.scss */ .btn-secondary:hover { background: var(--secondary-dark); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* line 88, app/assets/stylesheets/base/_first_styles.scss */ .btn-success { display: inline-block; padding: 0.75rem 1.5rem; background: var(--success-color); color: white; text-decoration: none; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; } /* line 14, app/assets/stylesheets/base/_mixins.scss */ .btn-success:hover { background: color-mix(in srgb, var(--success-color), #000 10%); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* line 90, app/assets/stylesheets/base/_first_styles.scss */ .btn-danger { display: inline-block; padding: 0.75rem 1.5rem; background: var(--danger-color); color: white; text-decoration: none; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; } /* line 14, app/assets/stylesheets/base/_mixins.scss */ .btn-danger:hover { background: color-mix(in srgb, var(--danger-color), #000 10%); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* line 92, app/assets/stylesheets/base/_first_styles.scss */ .btn-outline { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } /* line 97, app/assets/stylesheets/base/_first_styles.scss */ .btn-outline:hover { background: var(--primary-color); color: white; transform: translateY(-1px); } /* line 105, app/assets/stylesheets/base/_first_styles.scss */ .card { background: var(--background-primary); border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 2rem; border: 1px solid var(--border-color); margin-bottom: 2rem; } /* line 110, app/assets/stylesheets/base/_first_styles.scss */ .card-header { border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1rem; } /* line 115, app/assets/stylesheets/base/_first_styles.scss */ .card-header h3 { color: var(--text-primary); font-size: 1.25rem; } /* line 122, app/assets/stylesheets/base/_first_styles.scss */ .grid { display: grid; gap: 2rem; } /* line 127, app/assets/stylesheets/base/_first_styles.scss */ .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* line 131, app/assets/stylesheets/base/_first_styles.scss */ .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* line 135, app/assets/stylesheets/base/_first_styles.scss */ .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* line 140, app/assets/stylesheets/base/_first_styles.scss */ .hero { text-align: center; padding: 4rem 0; background: linear-gradient(135deg, rgba(var(--primary-color), 0.1) 0%, rgba(var(--primary-color), 0.05) 100%); border-radius: 0.5rem; margin-bottom: 2rem; } /* line 147, app/assets/stylesheets/base/_first_styles.scss */ .hero h1 { font-size: 3rem; margin-bottom: 1rem; color: var(--primary-color); font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* line 155, app/assets/stylesheets/base/_first_styles.scss */ .hero p { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } /* line 164, app/assets/stylesheets/base/_first_styles.scss */ .hero .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* line 173, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget { position: fixed; bottom: 20px; right: 20px; width: 350px; height: 500px; background: var(--background-primary); border-radius: 0.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; z-index: 1000; overflow: hidden; border: 1px solid var(--border-color); } /* line 188, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget.hidden { display: none; } /* line 192, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-header { background: var(--primary-color); color: white; padding: 1rem; display: flex; align-items: center; justify-content: space-between; } /* line 198, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-header h4 { font-size: 1rem; font-weight: 600; } /* line 203, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-header .close-btn { background: none; border: none; color: white; font-size: 1.25rem; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } /* line 215, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-header .close-btn:hover { background: rgba(255, 255, 255, 0.2); } /* line 221, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages { flex: 1; padding: 1rem; overflow-y: auto; background: #fafafa; } /* line 227, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message { margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 0.5rem; } /* line 233, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message.user { flex-direction: row-reverse; } /* line 236, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message.user .message-bubble { background: var(--primary-color); color: white; margin-left: 1.5rem; margin-right: 0; } /* line 245, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message.bot .message-bubble { background: white; border: 1px solid var(--border-color); margin-right: 1.5rem; } /* line 252, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message .message-bubble { padding: 0.5rem 1rem; border-radius: 0.375rem; max-width: 70%; word-wrap: break-word; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* line 260, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message .avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } /* line 268, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message .avatar.user-avatar { background: var(--primary-color); color: white; } /* line 273, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-messages .message .avatar.bot-avatar { background: var(--secondary-color); color: white; } /* line 281, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-input { padding: 1rem; border-top: 1px solid var(--border-color); background: white; } /* line 286, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-input .input-group { display: flex; gap: 0.5rem; } /* line 290, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-input .input-group input { flex: 1; padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: 0.375rem; font-size: 1rem; outline: none; transition: border-color 0.2s ease; } /* line 299, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-input .input-group input:focus { border-color: var(--primary-color); } /* line 304, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-input .input-group button { padding: 0.5rem 1rem; background: var(--primary-color); color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-size: 1rem; transition: background 0.2s ease; } /* line 314, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-input .input-group button:hover { background: var(--primary-dark); } /* line 318, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget .chat-input .input-group button:disabled { background: var(--text-muted); cursor: not-allowed; } /* line 327, app/assets/stylesheets/base/_first_styles.scss */ .chat-trigger { position: fixed; bottom: 20px; right: 20px; width: 80px; height: 80px; background: var(--primary-color); color: white; border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 999; } /* line 344, app/assets/stylesheets/base/_first_styles.scss */ .chat-trigger:hover { background: var(--primary-dark); transform: scale(1.1); } /* line 349, app/assets/stylesheets/base/_first_styles.scss */ .chat-trigger.hidden { display: none; } /* line 356, app/assets/stylesheets/base/_first_styles.scss */ .features .grid { margin-top: 2rem; } /* line 360, app/assets/stylesheets/base/_first_styles.scss */ .features .feature-card { background: var(--background-primary); border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 2rem; border: 1px solid var(--border-color); text-align: center; transition: transform 0.2s ease; } /* line 365, app/assets/stylesheets/base/_first_styles.scss */ .features .feature-card:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* line 370, app/assets/stylesheets/base/_first_styles.scss */ .features .feature-card .feature-icon { font-size: 4rem; margin-bottom: 1rem; color: var(--primary-color); } /* line 376, app/assets/stylesheets/base/_first_styles.scss */ .features .feature-card h3 { margin-bottom: 0.5rem; color: var(--text-primary); } /* line 381, app/assets/stylesheets/base/_first_styles.scss */ .features .feature-card p { color: var(--text-secondary); line-height: 1.6; } /* line 388, app/assets/stylesheets/base/_first_styles.scss */ .demo-section { background: white; border-radius: 0.5rem; padding: 2rem; margin: 2rem 0; border: 1px solid var(--border-color); } /* line 395, app/assets/stylesheets/base/_first_styles.scss */ .demo-section h2 { text-align: center; margin-bottom: 2rem; color: var(--primary-color); } /* line 401, app/assets/stylesheets/base/_first_styles.scss */ .demo-section .demo-controls { text-align: center; margin-bottom: 2rem; } /* line 405, app/assets/stylesheets/base/_first_styles.scss */ .demo-section .demo-controls .btn { margin: 0 0.5rem; } @media (max-width: 768px) { /* line 413, app/assets/stylesheets/base/_first_styles.scss */ .container { padding: 0 0.5rem; } /* line 418, app/assets/stylesheets/base/_first_styles.scss */ .navbar .container { flex-direction: column; gap: 1rem; } /* line 423, app/assets/stylesheets/base/_first_styles.scss */ .navbar .nav-links { gap: 1rem; } /* line 428, app/assets/stylesheets/base/_first_styles.scss */ .hero { padding: 2rem 0; } /* line 431, app/assets/stylesheets/base/_first_styles.scss */ .hero h1 { font-size: 2rem; } /* line 435, app/assets/stylesheets/base/_first_styles.scss */ .hero p { font-size: 1rem; } /* line 439, app/assets/stylesheets/base/_first_styles.scss */ .hero .hero-actions { flex-direction: column; align-items: center; } /* line 445, app/assets/stylesheets/base/_first_styles.scss */ .chatbot-widget { width: calc(100vw - 20px); height: calc(100vh - 40px); bottom: 10px; right: 10px; left: 10px; } /* line 453, app/assets/stylesheets/base/_first_styles.scss */ .chat-trigger { bottom: 15px; right: 15px; } /* line 458, app/assets/stylesheets/base/_first_styles.scss */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (max-width: 576px) { /* line 467, app/assets/stylesheets/base/_first_styles.scss */ .hero h1 { font-size: 1.5rem; } /* line 472, app/assets/stylesheets/base/_first_styles.scss */ .btn { padding: 0.5rem 1rem; font-size: 0.9rem; } } /* line 479, app/assets/stylesheets/base/_first_styles.scss */ .loading { display: flex; align-items: center; justify-content: center; padding: 2rem; } /* line 483, app/assets/stylesheets/base/_first_styles.scss */ .loading::after { content: ''; width: 20px; height: 20px; border: 2px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* line 500, app/assets/stylesheets/base/_first_styles.scss */ .fade-in { animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* line 516, app/assets/stylesheets/base/_first_styles.scss */ .text-center { text-align: center; } /* line 517, app/assets/stylesheets/base/_first_styles.scss */ .text-left { text-align: left; } /* line 518, app/assets/stylesheets/base/_first_styles.scss */ .text-right { text-align: right; } /* line 520, app/assets/stylesheets/base/_first_styles.scss */ .mt-sm { margin-top: 0.5rem; } /* line 521, app/assets/stylesheets/base/_first_styles.scss */ .mt-md { margin-top: 1rem; } /* line 522, app/assets/stylesheets/base/_first_styles.scss */ .mt-lg { margin-top: 1.5rem; } /* line 523, app/assets/stylesheets/base/_first_styles.scss */ .mt-xl { margin-top: 2rem; } /* line 525, app/assets/stylesheets/base/_first_styles.scss */ .mb-sm { margin-bottom: 0.5rem; } /* line 526, app/assets/stylesheets/base/_first_styles.scss */ .mb-md { margin-bottom: 1rem; } /* line 527, app/assets/stylesheets/base/_first_styles.scss */ .mb-lg { margin-bottom: 1.5rem; } /* line 528, app/assets/stylesheets/base/_first_styles.scss */ .mb-xl { margin-bottom: 2rem; } /* line 530, app/assets/stylesheets/base/_first_styles.scss */ .p-sm { padding: 0.5rem; } /* line 531, app/assets/stylesheets/base/_first_styles.scss */ .p-md { padding: 1rem; } /* line 532, app/assets/stylesheets/base/_first_styles.scss */ .p-lg { padding: 1.5rem; } /* line 533, app/assets/stylesheets/base/_first_styles.scss */ .p-xl { padding: 2rem; } /* line 535, app/assets/stylesheets/base/_first_styles.scss */ .hidden { display: none !important; } /* line 536, app/assets/stylesheets/base/_first_styles.scss */ .visible { display: block !important; } /* line 1, app/assets/stylesheets/base/_utilities.scss */ .hide { display: none !important; }