:root { --muted: #6b7280; --radius-tiny: .25rem; --radius-small: .5rem; --radius-medium: .75rem; --radius-large: 1rem; --radius-xlarge: 2rem; --radius-xxlarge: 3rem; --usermsg-bg: rgba(71, 144, 255, .2); --color--orange: #fa8b00; --color--red: #ff4900; --neutral--black-200: #d1d8dc; --neutral--white: #ffffff; } .sidebar { margin: 1rem; border-radius: var(--radius-large); border: 1px solid var(--color--neutral-200); } .sidebar header { border: none; } .sidebar header .brand a { height: 44px; } .sidebar a.new-chat { display: none; } .sidebar button.new-chat { border-radius: var(--radius-small); background-color: #0000; background-image: linear-gradient(135deg, var(--color--orange), var(--color--red)); color: var(--neutral--white); white-space: nowrap; max-height: 44px; padding: .75rem 1rem; font-size: 1rem; font-weight: 600; line-height: 1; border: none; } .composer .chat_send { height: 44px; width: 44px; border: none; background-image: linear-gradient(135deg, var(--color--orange), var(--color--red)); color: white; border-radius: var(--radius-small); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* //////////*/ .aeo-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; } .aeo-chat * { box-sizing: border-box; } /* Messages area */ .aeo-chat .messages { display: flex; flex-direction: column; gap: 1rem; flex: 1; overflow-y: auto; min-height: 0; padding: 0; padding-bottom: 3.75rem; -webkit-overflow-scrolling: touch; } .aeo-chat .msg.ai { background-color: transparent; padding: 0; } .aeo-chat .msg.user { margin-left: auto; background: var(--usermsg-bg); border: none; padding: .5rem .75rem; } /* Message bubbles */ .aeo-chat .msg.ai, .aeo-chat .msg.user { display: block; animation: fadeInMsg 0.3s ease; border-radius: var(--radius-small); max-width: 460px; } .aeo-chat .msg .md p { margin: 0; } .aeo-chat .msg.system { background: #eef2ff; border: 1px dashed #c7d2fe; border-radius: 8px; padding: 8px 10px; margin: 12px auto; text-align: center; } /* Markdown content inside messages */ .aeo-chat .md p, .aeo-chat .md ul, .aeo-chat .md ol, .aeo-chat .md li { font-size: 1rem !important; margin-bottom: 1rem !important; } .aeo-chat .md h1, .aeo-chat .md h2, .aeo-chat .md h3, .aeo-chat .md h4, .aeo-chat .md h5 { font-size: 1.15rem; margin: 0.75em 0 0.5em; font-weight: 600; } .aeo-chat .md ul, .aeo-chat .md ol { margin: 0.5em 0 0.5em 1.25em; } .aeo-chat .md code { font-family: var(--font-mono); background: #f6f6f6; padding: 2px 6px; border-radius: 4px; } .aeo-chat .md pre { background: #f6f6f6; padding: 0.75rem; border-radius: 6px; overflow-x: auto; font-family: var(--font-mono); } /* Reference links */ .aeo-chat .msg.ai .refs { position: relative; display: flex; flex-flow: row wrap; font-size: .75rem; gap: .675rem; margin-top: 48px; list-style: none; padding: 0; } .aeo-chat .msg.ai .refs:before { position: absolute; top: -32px; content: "References:"; } .aeo-chat .msg.ai .refs a { display: block; font-size: .75rem; line-height: 1.2; text-decoration: none; word-break: break-word; border-radius: var(--radius-xxlarge); background-color: var(--neutral--gray-50); padding: .375rem .875rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease; max-width: 300px; } .aeo-chat .msg.ai .refs a:is(:hover, :active, :focus) { background-color: var(--neutral--gray-100); color: black; } /* Chat Text */ .aeo-chat .md ul, .aeo-chat .md ol { margin: 0.5rem 0rem; padding-left: 1.5rem; } /* Table Text */ .aeo-chat table { font-size: .875rem !important; text-align: left; line-height: 1.2; margin: 1rem 0; border-radius: .5rem; overflow: clip; border-collapse: initial; border: 1px solid var(--neutral--gray-200); width: 100%; table-layout: fixed; } .aeo-chat table thead, .aeo-chat table tr td:has(strong) { background-color: var(--neutral--gray-50); } .aeo-chat table th, .aeo-chat table tr td { min-height: 40px; padding: .5rem; } .aeo-chat table th, .aeo-chat table tr td strong { font-weight: 500; } .aeo-chat table td, .aeo-chat table th { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; overflow-wrap: break-word; } /* Composer (input + send) */ .aeo-chat .composerWrap { position: relative; width: 100%; padding: 0; flex-shrink: 0; } .aeo-chat .composer { display: flex; align-items: center; justify-content: center; border: 1px solid #D1D8DC; border-radius: var(--radius-medium); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); margin: 0; padding: .5rem; padding-left: 1rem; position: relative; } .aeo-chat .input { flex: 1; border: none; outline: none; padding: 0; min-height: 24px; max-height: 240px; overflow-y: auto; } .aeo-chat .input:empty:before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; } .aeo-chat .send[disabled] { opacity: 0.7; cursor: not-allowed; } /* Hide Clear chat button */ .aeo-chat .toolbar { display: none; } /* Toolbar (Clear chat) .aeo-chat .toolbar { display: flex; gap: .5rem; justify-content: flex-start; margin: 0; padding: 0; flex-shrink: 0; } .aeo-chat .toolbar button { border: none; background: #f3f4f6; color: #555; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: .9rem; } */ /* Loader shimmer */ .aeo-chat .loader { margin: 8px 0; padding-bottom: 100px; } .aeo-chat .loader .bar { height: 8px; margin-top: 6px; background: linear-gradient(90deg, #eee, #fff, #eee); background-size: 200%; border-radius: 4px; animation: shimmer 1.5s linear infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes fadeInMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 479px) { .aeo-chat .messages { gap: 1rem; overflow-y: auto; height: 380px; min-height: auto; padding: 0; padding-top: 1rem; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; } } .aeo-chat .quickPrompts { display: flex; gap: .5em; margin: .75rem 0; overflow-x: auto; flex-wrap: nowrap; } .aeo-chat .quickPrompt { border: 1px solid rgba(0, 0, 0, .12); background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease; max-width: 300px; } .aeo-chat .quickPrompt:hover { filter: brightness(.98); }