.ai-chat-panel { position: fixed; z-index: 1002; display: flex; flex-direction: column; inline-size: min(var(--assistant-panel-inline), calc(100% - var(--assistant-panel-inline-clearance)));  block-size: min(var(--assistant-panel-block), calc(100dvh - var(--assistant-panel-block-clearance))); border-radius: var(--r); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-floating); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(var(--assistant-panel-enter-distance)); transition: block-size var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); will-change: opacity, transform; } .ai-chat-panel { inset-block-end: var(--assistant-panel-offset-block); inset-inline-start: var(--assistant-panel-offset-inline); } .ai-chat-panel[hidden] { display: none; } .ai-chat-panel.is-open { opacity: 1; pointer-events: auto; transform: none; }  .ai-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; padding-inline: 18px 10px; background: var(--surface-inverse); }  .ai-chat-logo { display: block; block-size: var(--assistant-logo-block); inline-size: auto; } .ai-chat-messages { display: grid; flex: 1 1 auto; align-content: start; gap: 14px; padding: 18px 16px;  background: var(--surface-base);   --ai-composer-rest: calc(3rem * var(--leading-body) + 44px + 8px + var(--assistant-icon-target)); padding-block-end: calc(var(--ai-composer-rest) + 18px); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable;  scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .ai-chat-messages::-webkit-scrollbar { width: 4px; } .ai-chat-messages::-webkit-scrollbar-track { background: transparent; } .ai-chat-messages::-webkit-scrollbar-thumb { border-radius: var(--r); background: var(--line); } .ai-chat-log { display: grid; gap: 14px; } .ai-message { display: flex; align-items: flex-start; gap: 10px; inline-size: 100%; max-inline-size: 100%; } .ai-message--new { animation: ai-message-enter var(--dur-base) var(--ease-out) both; }  .ai-message-avatar { position: relative; display: block; }  .ai-message-avatar::before { content: ""; position: absolute; inset: 0; background: url("../images/brand/sdeira-emblem-fullcolour.svg?v=9d60ed9cb777d961") center / contain no-repeat; } .ai-message-avatar { flex: 0 0 var(--assistant-avatar-target); inline-size: var(--assistant-avatar-target);  block-size: calc(1rem * var(--leading-body)); margin-block-start: 14px; }  .ai-star-field { position: relative; z-index: 1; display: block; inline-size: var(--assistant-launcher-field); block-size: var(--assistant-launcher-field); } .ai-star-field::before { content: ""; position: absolute; z-index: 1; inset: 50% auto auto 50%; inline-size: 100%; block-size: 100%; background: url("../images/brand/sdeira-emblem-fullcolour.svg?v=9d60ed9cb777d961") center / contain no-repeat; transform: translate(-50%, -50%); } .ai-message-content { display: grid; flex: 1 1 auto; gap: 6px; min-inline-size: 0; padding: 14px 16px; border: 0; border-radius: var(--r);  background: var(--surface-sunken); } .ai-message-content p { margin: 0; color: var(--ink); font-size: var(--type-body); line-height: var(--leading-body); } .ai-message-content p[hidden] { display: none; }  .ai-message-image { display: block; inline-size: 100%; max-block-size: 220px; border-radius: calc(var(--r) - 4px); object-fit: cover; }  .ai-message--user { justify-content: flex-end; } .ai-message--user .ai-message-content { flex: 0 1 auto; max-inline-size: 86%;  padding-inline: 0; background: transparent; } .ai-chat-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-block-start: 2px; } .ai-chat-suggestions[hidden] { display: none; } .ai-chat-suggestions button { display: inline-flex; align-items: center; gap: 10px; inline-size: fit-content; max-inline-size: 100%; min-block-size: var(--assistant-choice-target); padding-inline: 14px; border-radius: var(--r);  border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: var(--type-control); text-align: start; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }  .ai-chat-suggestions button:is(:hover, :focus-visible) { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--brand-white); } .ai-chat-suggestions button:focus-visible { outline: var(--assistant-focus-outline) solid var(--accent); outline-offset: var(--assistant-focus-offset); } .ai-typing-indicator { display: inline-flex; gap: 4px; min-block-size: 14px; align-items: center; } .ai-intro-copy:not(:empty) + .ai-typing-indicator { display: none; } .ai-typing-indicator i { inline-size: var(--assistant-typing-dot); block-size: var(--assistant-typing-dot); border-radius: 50%; background: var(--surface-brand); animation: ai-typing-dot var(--dur-base) var(--ease-out) infinite alternate; } .ai-typing-indicator i:nth-child(2) { animation-delay: calc(var(--dur-fast) / 2); } .ai-typing-indicator i:nth-child(3) { animation-delay: var(--dur-fast); } .ai-chat-suggestions button { opacity: 0; transform: translateY(8px); } .ai-chat-panel.is-ready .ai-chat-suggestions button { animation: ai-suggestion-enter var(--dur-base) var(--ease-out) forwards; } .ai-chat-panel.is-ready .ai-chat-suggestions button:nth-child(2) { animation-delay: var(--dur-fast); } .ai-chat-panel.is-ready .ai-chat-suggestions button:nth-child(3) { animation-delay: calc(var(--dur-fast) * 2); } @keyframes ai-typing-dot { to { transform: translateY(calc(-1 * var(--assistant-typing-lift))); } } @keyframes ai-suggestion-enter { to { opacity: 1; transform: none; } } @keyframes ai-message-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }  .ai-chat-composer { display: grid; position: absolute; inset-inline: 0; inset-block-end: 0; padding: 12px 16px 16px; background: var(--surface-base); }  .ai-chat-composer::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: var(--assistant-composer-fade); background: linear-gradient(to bottom, transparent, var(--surface-base)); pointer-events: none; }  .ai-chat-field { display: grid; gap: 8px; padding: 8px; padding-inline-start: 14px; border-radius: var(--r);  background: var(--assistant-field-surface); } .ai-chat-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }  .ai-chat-composer textarea { display: block; inline-size: 100%; min-inline-size: 0; min-block-size: calc(3 * 1rem * var(--leading-body)); max-block-size: calc(3 * 1rem * var(--leading-body)); padding: 7px 0; border: 0; outline: none; background: transparent; color: var(--ink); caret-color: var(--accent); font: inherit; font-size: var(--type-action); line-height: var(--leading-body); resize: none; overflow-y: auto;  scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .ai-chat-composer textarea::-webkit-scrollbar { width: 4px; } .ai-chat-composer textarea::-webkit-scrollbar-track { background: transparent; } .ai-chat-composer textarea::-webkit-scrollbar-thumb { border-radius: var(--r); background: var(--line); } .ai-chat-composer textarea::-webkit-scrollbar-button { display: none; inline-size: 0; block-size: 0; } .ai-chat-actions { display: flex; align-items: center; justify-content: space-between; } .ai-chat-composer textarea::placeholder { color: var(--muted); opacity: 1; }  .ai-chat-send { display: grid; flex: 0 0 var(--assistant-icon-target); place-items: center; inline-size: var(--assistant-icon-target); block-size: var(--assistant-icon-target); border: 0; border-radius: var(--r); background: transparent; color: var(--accent); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ai-chat-send:is(:hover, :focus-visible) { background: var(--accent-hover); color: var(--on-action); }  .ai-chat-attach { display: grid; flex: 0 0 var(--assistant-icon-target); place-items: center; inline-size: var(--assistant-icon-target); block-size: var(--assistant-icon-target); border: 0; border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ai-chat-attach:is(:hover, :focus-visible) { background: var(--accent-hover); color: var(--on-action); }  .ai-chat-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding-inline: 16px; padding-block-end: 8px; } .ai-chat-attachments[hidden] { display: none; } .ai-chat-attachment { display: inline-flex; align-items: center; gap: 8px; max-inline-size: 100%; padding-inline: 10px; padding-block: 6px; border-radius: var(--r); background: var(--surface-raised); color: var(--ink); font-size: var(--type-control); } .ai-chat-attachment-thumb { flex: 0 0 auto; inline-size: 28px; block-size: 28px; border-radius: calc(var(--r) - 4px); object-fit: cover; } .ai-chat-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  .ai-chat-attachment-remove { display: grid; flex: 0 0 auto; place-items: center; inline-size: 22px; block-size: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ai-chat-attachment-remove:is(:hover, :focus-visible) { background: var(--accent-hover); color: var(--on-action); } .ai-welcome-nudge { position: fixed; z-index: 1001; inset-block-end: calc(var(--assistant-panel-offset-inline) + var(--assistant-launcher-target) + var(--assistant-nudge-gap)); inset-inline-start: var(--assistant-panel-offset-inline); display: none; align-items: center; gap: var(--assistant-nudge-gap); max-inline-size: min(var(--assistant-nudge-inline), calc(100% - var(--assistant-panel-inline-clearance))); min-block-size: var(--assistant-choice-target); padding: var(--assistant-nudge-padding-block) var(--assistant-nudge-padding-inline); border: 0; border-radius: var(--r); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-floating); font: inherit; font-size: var(--type-control); line-height: var(--leading-body); text-align: start; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(var(--assistant-panel-enter-distance)); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ai-welcome-nudge:is(:hover, :focus-visible) { background: var(--surface-brand-deep); color: var(--brand-white); } .ai-welcome-nudge:focus-visible { outline: var(--assistant-focus-outline) solid var(--accent); outline-offset: var(--assistant-focus-offset); } .ai-welcome-nudge.is-visible:not([hidden]) { display: flex; opacity: 1; pointer-events: auto; transform: none; } .ai-chat-toggle { position: fixed; z-index: 1001; inset-block-end: var(--assistant-panel-offset-inline); inset-inline-start: var(--assistant-panel-offset-inline); display: grid; place-items: center; inline-size: var(--assistant-launcher-target); block-size: var(--assistant-launcher-target); padding: 0; border: 0; border-radius: var(--r); background: var(--brand-white); color: var(--brand-sweihan); cursor: pointer; overflow: visible; transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ai-chat-toggle:is(:hover, :focus-visible) { color: var(--brand-sweihan); transform: scale(var(--assistant-launcher-hover-scale)); } .ai-chat-toggle .ai-chat-toggle-icon--close { position: relative; z-index: 1; }  .ai-chat-toggle:is(:hover, :focus-visible) .ai-star-field::before { transform: translate(-50%, -50%); }  .ai-chat-toggle .ai-chat-toggle-icon--close { display: none; } .ai-chat-toggle[aria-expanded="true"] .ai-chat-toggle-icon--open { display: none; } .ai-chat-toggle[aria-expanded="true"] .ai-chat-toggle-icon--close { display: block; }  .scroll-top { left: auto; inset-inline-end: var(--assistant-panel-offset-inline); inset-block-end: var(--assistant-panel-offset-inline); inline-size: var(--assistant-launcher-target); block-size: var(--assistant-launcher-target); } .scroll-top i.ph { font-size: var(--icon-control); } .ai-chat-toggle .ai-chat-toggle-icon--close { font-size: var(--icon-default); }   .utility-panel-close { display: grid; flex: 0 0 auto; place-items: center; inline-size: var(--assistant-icon-target); block-size: var(--assistant-icon-target); border: 0; border-radius: var(--r); background: transparent; color: var(--brand-white); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .utility-panel-close:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--brand-white) 14%, transparent); color: var(--brand-white); } .utility-panel-close:focus-visible, .ai-chat-send:focus-visible, .ai-chat-attach:focus-visible, .ai-chat-attachment-remove:focus-visible, .ai-chat-toggle:focus-visible { outline: var(--assistant-focus-outline) solid var(--accent); outline-offset: var(--assistant-focus-offset); } @media (max-width: 560px) { .scroll-top { left: auto; inset-inline-end: var(--assistant-panel-offset-inline-mobile); inset-block-end: var(--assistant-panel-offset-inline-mobile); inline-size: var(--assistant-launcher-target-mobile); block-size: var(--assistant-launcher-target-mobile); } .ai-chat-panel { inline-size: calc(100% - var(--assistant-panel-inline-clearance-mobile)); block-size: min(var(--assistant-panel-block-mobile), calc(100dvh - var(--assistant-panel-block-clearance-mobile))); inset-block-end: var(--assistant-panel-offset-block-mobile); inset-inline-start: var(--assistant-panel-offset-inline-mobile); } .ai-welcome-nudge { inset-block-end: calc(var(--assistant-panel-offset-inline-mobile) + var(--assistant-launcher-target-mobile) + var(--assistant-nudge-gap)); inset-inline-start: var(--assistant-panel-offset-inline-mobile); max-inline-size: min(var(--assistant-nudge-inline), calc(100% - var(--assistant-panel-inline-clearance-mobile))); } .ai-chat-toggle { inset-block-end: var(--assistant-panel-offset-inline-mobile); inset-inline-start: var(--assistant-panel-offset-inline-mobile); inline-size: var(--assistant-launcher-target-mobile); block-size: var(--assistant-launcher-target-mobile); } .ai-star-field { inline-size: var(--assistant-launcher-field-mobile); block-size: var(--assistant-launcher-field-mobile); } } @media (prefers-reduced-motion: reduce) { .ai-chat-panel, .ai-welcome-nudge, .ai-chat-toggle { transition: none; } .ai-chat-panel { transform: none; } .ai-chat-toggle:is(:hover, :focus-visible) { transform: none; } .ai-message--new { animation: none; } }  .ai-chat-toggle { transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }  .ai-chat-toggle { opacity: 1; pointer-events: auto; visibility: visible; transform: none; } .ai-chat-toggle.is-under-hero { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(var(--assistant-launcher-enter-distance)); }  .ai-chat-toggle[aria-expanded="true"] { opacity: 1; pointer-events: auto; visibility: visible; transform: none; }