/* public/css/ai-agent-shared.css Styling for the shared "Matt's AI" helpers (see public/js/ai-agent-shared.js) — the NN/g AI-chatbot guideline pieces used by BOTH front ends: suggestion chips, inline work-image thumbnails, the pop-up image viewer, the "Show more" clamp, and the panel resize grip. All classes are namespaced `mai-` so they never collide with the corner widget's `ai-agent-*` or the standalone's `ma-*` rules. Colors are self-contained (the shared brand palette, same in both themes) so these work inside either panel AND in the lightbox, which is appended to outside both component scopes. */ /* ---- suggestion chips (#3, #4) ---- */ .mai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; } .mai-suggestions[hidden] { display: none; } .ai-agent-bubble + .mai-suggestions, .ma-bubble + .mai-suggestions { align-self: flex-start; max-width: 92%; } .mai-suggestion { font: inherit; font-size: 12px; line-height: 1.3; color: #f5f0e6; background: rgba(250, 85, 122, 0.08); border: 1px solid rgba(250, 85, 122, 0.55); border-radius: 999px; padding: 6px 12px; cursor: pointer; text-align: left; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .mai-suggestion:hover { background: rgba(250, 85, 122, 0.9); border-color: rgba(250, 85, 122, 0.9); color: #1a0a0e; } .mai-suggestion:focus-visible { outline: 2px solid #fa557a; outline-offset: 2px; } /* ---- inline work-image thumbnails (#5) ---- */ .mai-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .mai-thumb { margin: 0; } .mai-thumb-btn { display: block; padding: 0; border: 1px solid rgba(245, 240, 230, 0.16); border-radius: 10px; overflow: hidden; cursor: zoom-in; background: rgba(0, 0, 0, 0.2); line-height: 0; transition: border-color 0.18s ease, transform 0.18s ease; } .mai-thumb-btn:hover { border-color: #fa557a; transform: translateY(-1px); } .mai-thumb-btn:focus-visible { outline: 2px solid #fa557a; outline-offset: 2px; } .mai-thumb-btn img { width: 132px; height: 92px; object-fit: cover; display: block; } /* ---- pop-up image viewer (#5) ---- */ html.mai-lightbox-open { overflow: hidden; } .mai-lightbox { position: fixed; inset: 0; z-index: 2147483600; /* above both the widget root and the standalone scene */ display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; } .mai-lightbox[hidden] { display: none; } .mai-lightbox-scrim { position: absolute; inset: 0; background: rgba(6, 5, 4, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .mai-lightbox-inner { position: relative; max-width: 1100px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 14px; } .mai-lightbox-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); } .mai-lightbox-caption { color: #d8cfc2; font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.5; text-align: center; max-width: 640px; margin: 0; } .mai-lightbox-caption[hidden] { display: none; } .mai-lightbox-close { position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245, 240, 230, 0.3); background: rgba(10, 9, 8, 0.92); color: #f5f0e6; font-size: 22px; line-height: 1; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .mai-lightbox-close:hover { border-color: #fa557a; color: #fa557a; } /* ---- "Show more" clamp (#6) ---- */ .mai-clamped { max-height: var(--mai-clamp, 240px); overflow: hidden; /* critical: the message list is a flex column, and a flex item with overflow:hidden is allowed to shrink well below its max-height when siblings need room — which collapsed clamped bubbles to a sliver. Pin the size so the clamp height is exactly what's shown. */ flex: 0 0 auto; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); } .mai-clamped.mai-expanded { max-height: none; -webkit-mask-image: none; mask-image: none; } .mai-more { align-self: flex-start; font: inherit; font-size: 12px; font-weight: 600; color: #fa557a; background: none; border: none; padding: 2px 0 4px; cursor: pointer; } .mai-more:hover { color: #f5f0e6; } /* ---- resize grip (#8) ---- */ .mai-grip { position: absolute; z-index: 5; width: 18px; height: 18px; touch-action: none; color: rgba(245, 240, 230, 0.4); } .mai-grip:hover { color: #fa557a; } .mai-grip svg { width: 100%; height: 100%; display: block; } /* corner grip for the right-anchored widget panel (bottom-left corner) */ .mai-grip-corner { left: 4px; bottom: 4px; cursor: nesw-resize; } /* edge grip for the centered standalone panel (bottom edge, height only) */ .mai-grip-edge { left: 50%; bottom: 2px; transform: translateX(-50%); width: 46px; height: 14px; cursor: ns-resize; } /* ---- save / keep-conversation menu (#9) ---- */ .mai-save-wrap { position: relative; } .mai-save-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: #f5f0e6; background: rgba(250, 85, 122, 0.14); border: 1px solid rgba(250, 85, 122, 0.55); cursor: pointer; padding: 5px 11px; border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .mai-save-btn::before { content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12a1 1 0 0 1 1 1v19l-7-4-7 4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12a1 1 0 0 1 1 1v19l-7-4-7 4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat; } .mai-save-btn:hover, .mai-save-btn[aria-expanded="true"] { background: rgba(250, 85, 122, 0.92); border-color: rgba(250, 85, 122, 0.92); color: #1a0a0e; } .mai-save-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; background: #141210; border: 1px solid #2a241f; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7); } .mai-save-menu[hidden] { display: none; } .mai-save-menu button { font: inherit; font-size: 12.5px; text-align: left; color: #f5f0e6; background: none; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; } .mai-save-menu button:hover { background: rgba(250, 85, 122, 0.16); } .mai-save-row { display: flex; gap: 6px; padding: 6px; } .mai-save-row[hidden] { display: none; } .mai-save-row input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: #f5f0e6; background: rgba(245, 240, 230, 0.06); border: 1px solid #2a241f; border-radius: 8px; padding: 7px 9px; } .mai-save-row button { flex: 0 0 auto; padding: 7px 12px; background: rgba(250, 85, 122, 0.9); color: #1a0a0e; font-weight: 600; } @media (max-width: 480px) { .mai-grip { display: none; } }