/* ========================= EXTERNAL ELEMENTS (Positioning and Theming of Shell Elements) ========================= */ /* BASE CHAT BOX STYLES (Applies to external element #chat-box) Handles full-screen mobile layout and background/font-family. Display property is controlled by JS classes. */ #chat-box { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; display: none; /* Controlled by body.chat-open */ flex-direction: column; background: #fff; /* Theming */ overflow: hidden; z-index: 9999; font-family: Arial, Helvetica, sans-serif; /* Theming */ border-radius: 0; box-shadow: none; } /* looper-chat fills the panel */ #chat-box looper-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* BUBBLE STYLES (Applies to external element #chat-bubble) */ #chat-bubble { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: var(--lc-primary-color); /* Controled from HTML */ color: var(--lc-text-color); /* Controled from HTML */ font-size: 30px; display: none; /* Controlled by body.has-mini */ align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 9999; } /* TOP CLOSE BUTTON (Applies to external element #chatClose) */ #chatClose { display: none; /* Controlled by body.chat-open */ position: absolute; top: 15px; right: 15px; background: white; /* Theming */ border: 1px solid #ddd; border-radius: 50%; width: 28px; height: 28px; font-size: 16px; color: #666; /* Theming */ align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.2s ease; z-index: 10000; } #chatClose:hover { background: #f5f5f5; /* Theming */ color: #333; /* Theming */ } /* GLOBAL VISIBILITY CLASSES (Must target ) */ body.chat-open.has-mini { overflow: hidden; } /* ## Maxi Mode Positioning & Visibility */ body.has-maxi #chat-bubble { display: none; } body.chat-open.has-maxi #chat-box.mode-maxi { display: flex; } /* Desktop Maxi dimensions (Positioning/Sizing) */ @media (min-width: 768px) { #chat-box.mode-maxi { inset: 0; margin: auto; width: min(90vw, 900px); height: 90dvh; border-radius: 12px; /* Theming */ box-shadow: none; } } /* ## Mini Mode Positioning & Visibility */ body.has-mini:not(.chat-open) #chat-bubble { display: flex; } body.chat-open.has-mini #chat-box.mode-mini { display: flex; } body.chat-open.has-mini #chatClose { display: flex; } /* Mini Pop-out (Tablet/Desktop: Positioning/Sizing) */ @media (min-width: 768px) { #chat-box.mode-mini { inset: auto; margin: 0; top: auto; bottom: 20px; right: 20px; left: auto; width: 50%; height: 95dvh; border-radius: 12px; /* Theming */ box-shadow: 0 6px 20px rgba(0,0,0,0.25); } } @media (min-width: 1024px) { #chat-box.mode-mini { width: 30%; max-width: 500px; height: 95dvh; border-radius: 10px; /* Theming */ box-shadow: -2px 0 10px rgba(0,0,0,0.2); } } /* ========================= INTERNAL PARTS (Theming and Aesthetics) ========================= */ /* USER QUERY BUBBLE */ looper-chat::part(looper-chat-response-query) { /* Color Derivation */ background-color: color-mix(in srgb, white 80%, var(--lc-primary-color)); /* Controled from HTML */ color: #333; /* Aesthetics */ padding: .6rem .9rem; margin: .5rem 0; border-radius: 10px; max-width: 80%; align-self: flex-end; } /* VIRTUAL ASSISTANT ANSWER/WELCOME BUBBLES */ looper-chat::part(looper-chat-response-answer), looper-chat::part(looper-chat-welcome) { /* Aesthetics */ background: #f1f1f1; color: #333; padding: .6rem .9rem; margin: .5rem 0; border-radius: 10px; max-width: 80%; align-self: flex-start; } /* FORM SUBMIT BUTTON */ looper-chat::part(looper-chat-form-submit) { background: var(--lc-primary-color); /* Controled from HTML */ color: var(--lc-text-color, white); /* Controled from HTML */ cursor: pointer; } looper-chat::part(looper-chat-form-submit):hover { background: var(--lc-primary-color-hover); /* Controled from HTML */ } /* REFERENCE BUTTON */ looper-chat::part(looper-chat-btn-ref) { background-color: var(--lc-primary-color); /* Controled from HTML */ color: var(--lc-text-color); /* Controled from HTML */ border: none; border-radius: 15px; padding: .2rem .8rem; margin-left: .3rem; cursor: pointer; font-size: .8rem; } looper-chat::part(looper-chat-btn-ref):hover { background-color: var(--lc-primary-color-hover); /* Controled from HTML */ } /* REFERENCE CONTAINER AND PANEL */ looper-chat::part(looper-reference) { position: relative; padding: 0.5rem; margin-left: 0.8rem; margin-right: 0.8rem; flex: 0 0 auto; max-height: 150px; overflow-y: auto; font-size: 0.8rem; } looper-chat::part(looper-chat-reference-panel) { position: relative; background: #f9f9f9; border-radius: 8px; padding: 0.5rem; } looper-chat::part(looper-chat-reference-close) { position: absolute; right: 15px; background: white; border: 1px solid #ddd; border-radius: 50%; width: 28px; height: 28px; font-size: 16px; color: #666; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.2s ease; z-index: 10000; } looper-chat::part(looper-chat-reference-close):hover { background: #f5f5f5; color: #333; }