:root {
--tl-ai-red: #ef1117;
--tl-ai-red-dark: #cf0007;
--tl-ai-navy: #0b2b55;
--tl-ai-ink: #14233b;
--tl-ai-muted: #6d7b8d;
--tl-ai-line: #dfe6ee;
--tl-ai-soft: #f7f9fc;
--tl-ai-bg: #ffffff;
--tl-ai-shadow: 0 18px 46px rgba(10, 38, 72, .20), 0 5px 16px rgba(10, 38, 72, .08);
}
.tl-ai-assistant,
.tl-ai-assistant * { box-sizing: border-box; }
.tl-ai-assistant .screen-reader-text {
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
} .tl-ai-launcher {
position: fixed;
right: max(20px, env(safe-area-inset-right));
bottom: max(20px, env(safe-area-inset-bottom));
z-index: 99990;
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 52px;
padding: 5px 15px 5px 5px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #f31920 0%, #d90008 100%);
box-shadow: 0 11px 28px rgba(204, 0, 8, .27), 0 4px 12px rgba(10, 38, 72, .10);
cursor: pointer;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
text-align: left;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.tl-ai-launcher:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(204,0,8,.31), 0 5px 14px rgba(10,38,72,.12); }
.tl-ai-launcher-icon { display:grid; width:42px; height:42px; place-items:center; flex:0 0 auto; overflow:hidden; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.10); }
.tl-ai-launcher-icon img { display:block; width:37px; height:auto; }
.tl-ai-launcher-copy { display:grid; gap:1px; line-height:1.08; }
.tl-ai-launcher-copy strong { font-size:13px; font-weight:850; }
.tl-ai-launcher-copy span { font-size:9.5px; font-weight:650; opacity:.9; }
.tl-ai-launcher:focus-visible,
.tl-ai-close:focus-visible,
.tl-ai-send:focus-visible,
.tl-ai-quick-actions button:focus-visible,
.tl-ai-form textarea:focus-visible {
outline: 3px solid rgba(239,17,23,.20);
outline-offset: 3px;
} .tl-ai-panel {
position: fixed;
right: max(20px, env(safe-area-inset-right));
bottom: max(20px, env(safe-area-inset-bottom));
z-index: 99991;
display: flex;
flex-direction: column;
width: min(420px, calc(100vw - 32px));
max-height: min(660px, calc(100dvh - 40px));
overflow: hidden;
border: 1px solid rgba(255,255,255,.94);
border-radius: 22px;
background: var(--tl-ai-bg);
box-shadow: var(--tl-ai-shadow);
color: var(--tl-ai-ink);
font: 400 14px/1.42 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
animation: tl-ai-panel-in 190ms cubic-bezier(.2,.75,.25,1);
}
.tl-ai-panel[hidden] { display:none; }
@keyframes tl-ai-panel-in { from {opacity:0; transform:translateY(9px) scale(.992)} to {opacity:1; transform:none} } .tl-ai-hero {
position: relative;
flex: 0 0 auto;
min-height: 126px;
overflow: hidden;
padding: 16px 18px 17px;
isolation: isolate;
background: #fff;
border-bottom: 1px solid rgba(223,230,238,.88);
}
.tl-ai-hero-photo {
position:absolute;
inset:0;
z-index:-4;
background-image:url(//www.topavellux.sk/wp-content/plugins/topavellux-ai-assistant/assets/roof-hero-k37.webp);
background-size:cover;
background-repeat:no-repeat;
background-position: 69% 47%;
transform:scale(1.015);
filter:saturate(.96) contrast(1.02) brightness(1.03);
}
.tl-ai-hero-fade {
position:absolute;
inset:0;
z-index:-3;
pointer-events:none;
background:
linear-gradient(90deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,.995) 35%,
rgba(255,255,255,.92) 49%,
rgba(255,255,255,.62) 65%,
rgba(255,255,255,.16) 83%,
rgba(255,255,255,.04) 100%),
linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.10) 34%, rgba(255,255,255,0) 58%);
}
.tl-ai-hero-wave {
position:absolute;
left:-5%; right:-4%; bottom:-23px;
z-index:-2;
height:42px;
border-radius:52% 48% 0 0 / 78% 58% 0 0;
background:linear-gradient(90deg,rgba(239,17,23,.05),rgba(239,17,23,.14) 58%,rgba(239,17,23,.90) 100%);
transform:rotate(-.55deg);
}
.tl-ai-hero-wave::after {
content:"";
position:absolute;
inset:10px -2% -18px 7%;
border-radius:56% 44% 0 0 / 80% 48% 0 0;
background:rgba(255,255,255,.97);
}
.tl-ai-hero-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tl-ai-brand-logo { display:block; width:154px; max-width:52%; height:auto; filter:drop-shadow(0 1px 4px rgba(0,0,0,.04)); }
.tl-ai-close {
display:grid; place-items:center; flex:0 0 auto;
width:36px; height:36px; padding:0 0 2px;
border:1px solid rgba(10,38,72,.08); border-radius:50%;
background:rgba(255,255,255,.95); color:var(--tl-ai-navy);
box-shadow:0 4px 12px rgba(10,38,72,.10);
cursor:pointer; font:300 25px/1 system-ui,sans-serif;
}
.tl-ai-hero-copy { width:68%; margin-top:10px; }
.tl-ai-eyebrow { display:none; }
.tl-ai-hero h2 { margin:0; color:var(--tl-ai-navy); font-size:21px; line-height:1.06; letter-spacing:-.025em; font-weight:840; }
.tl-ai-hero h2 span { color:var(--tl-ai-red); }
.tl-ai-title-accent { display:block; width:48px; height:3px; margin-top:8px; border-radius:999px; background:var(--tl-ai-red); }
.tl-ai-subtitle { margin:8px 0 0; max-width:246px; color:#46566b; font-size:11.5px; line-height:1.35; font-weight:560; } .tl-ai-messages {
flex: 1 1 auto;
min-height: 126px;
max-height: 280px;
padding: 14px 16px 8px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #c7d0dc transparent;
background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}
.tl-ai-messages::-webkit-scrollbar { width:5px; }
.tl-ai-messages::-webkit-scrollbar-thumb { border-radius:999px; background:#c7d0dc; }
.tl-ai-messages::-webkit-scrollbar-track { background:transparent; }
.tl-ai-message { width:fit-content; max-width:94%; margin-bottom:8px; padding:12px 14px; border-radius:16px; overflow-wrap:anywhere; white-space:pre-line; }
.tl-ai-message strong { font-weight:800; }
.tl-ai-message strong + strong { margin-top:7px; }
.tl-ai-message-assistant { border:1px solid #e0e6ed; border-left:4px solid var(--tl-ai-red); border-bottom-left-radius:8px; background:#fff; color:#172a47; box-shadow:0 5px 14px rgba(10,38,72,.045); font-size:13.5px; line-height:1.38; }
.tl-ai-message-customer { margin-left:auto; border-bottom-right-radius:8px; background:#102f55; color:#fff; box-shadow:0 5px 14px rgba(10,38,72,.09); }
.tl-ai-message-system { max-width:100%; margin:0 auto 6px; padding:2px 5px; color:var(--tl-ai-muted); background:transparent; box-shadow:none; font-size:10.5px; text-align:center; } .tl-ai-quick-actions {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
flex:0 0 auto;
padding:7px 16px 12px;
background:#fbfcfe;
transition:max-height 170ms ease, opacity 150ms ease, padding 170ms ease;
}
.tl-ai-quick-actions button {
display:flex;
align-items:center;
gap:9px;
min-height:50px;
padding:8px 10px;
border:1px solid #dce4ed;
border-radius:14px;
background:#fff;
color:#112c50;
box-shadow:0 4px 12px rgba(10,38,72,.055);
cursor:pointer;
font:800 12px/1.15 system-ui,sans-serif;
text-align:left;
transition:transform 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
}
.tl-ai-quick-actions button:hover { transform:translateY(-1px); border-color:rgba(239,17,23,.30); box-shadow:0 6px 15px rgba(10,38,72,.08); }
.tl-ai-quick-icon { display:grid; width:31px; height:31px; place-items:center; flex:0 0 auto; border-radius:10px; background:#fff2f2; color:var(--tl-ai-red); }
.tl-ai-quick-icon svg,
.tl-ai-input-icon svg,
.tl-ai-send-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .tl-ai-assistant.has-conversation .tl-ai-quick-actions { display:none; }
.tl-ai-assistant.has-conversation .tl-ai-messages { min-height:210px; max-height:360px; }
.tl-ai-error,
.tl-ai-status { padding:0 16px; margin:0; background:#fff; font-size:10.5px; }
.tl-ai-error { padding-top:5px; color:#9b0000; font-weight:700; }
.tl-ai-status:not(:empty) { padding-top:4px; color:var(--tl-ai-muted); } .tl-ai-form {
display:grid;
grid-template-columns:minmax(0,1fr) 94px;
gap:8px;
flex:0 0 auto;
padding:10px 16px 7px;
border-top:1px solid #e5eaf0;
background:#fff;
}
.tl-ai-input-shell { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; min-width:0; border:1.25px solid #cbd5df; border-radius:15px; background:#fff; transition:border-color 140ms ease,box-shadow 140ms ease; }
.tl-ai-input-shell:focus-within { border-color:rgba(239,17,23,.45); box-shadow:0 0 0 3px rgba(239,17,23,.055); }
.tl-ai-input-icon { display:grid; place-items:center; padding-left:12px; color:#8797aa; }
.tl-ai-form textarea { width:100%; min-height:50px; max-height:96px; resize:none; padding:14px 9px 10px 8px; border:0; outline:0; color:#172e51; background:transparent; font:inherit; font-size:13px; line-height:1.35; }
.tl-ai-form textarea::placeholder { color:#8a98aa; opacity:1; }
.tl-ai-send { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border:0; border-radius:15px; background:linear-gradient(135deg,#f31920 0%,#dc0008 100%); color:#fff; box-shadow:0 6px 16px rgba(196,0,7,.18); cursor:pointer; font:820 12.5px/1.15 system-ui,sans-serif; }
.tl-ai-send:hover { background:linear-gradient(135deg,#e30d14,#c90007); }
.tl-ai-send-icon { display:grid; place-items:center; transform:rotate(-7deg); }
.tl-ai-send-icon svg { width:18px; height:18px; }
.tl-ai-send:disabled,
.tl-ai-form textarea:disabled,
.tl-ai-quick-actions button:disabled { cursor:wait; opacity:.64; }
.tl-ai-footnote { flex:0 0 auto; margin:0; padding:3px 16px 10px; color:#718094; background:#fff; font-size:9.5px; text-align:center; }
.tl-ai-footnote span { margin-right:4px; color:var(--tl-ai-navy); }
.tl-ai-fallback { padding:11px 13px; border-left:3px solid var(--tl-ai-red); background:#fff2f2; color:#111827; } @media (max-width: 1366px), (max-height: 760px) {
.tl-ai-panel { width:min(400px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); right:max(14px,env(safe-area-inset-right)); bottom:max(14px,env(safe-area-inset-bottom)); }
.tl-ai-hero { min-height:116px; padding:14px 16px 15px; }
.tl-ai-brand-logo { width:144px; }
.tl-ai-hero h2 { font-size:20px; }
.tl-ai-subtitle { font-size:11px; }
.tl-ai-messages { min-height:116px; max-height:240px; padding:12px 14px 7px; }
.tl-ai-quick-actions { padding:6px 14px 10px; }
.tl-ai-form { padding:9px 14px 6px; }
.tl-ai-footnote { padding:3px 14px 9px; }
} @media (max-width: 520px) {
.tl-ai-launcher { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); }
.tl-ai-panel {
right:max(8px,env(safe-area-inset-right));
bottom:max(8px,env(safe-area-inset-bottom));
width:calc(100vw - 16px);
max-height:calc(100dvh - 16px - env(safe-area-inset-top));
border-radius:20px;
}
.tl-ai-hero { min-height:112px; padding:13px 14px 14px; }
.tl-ai-hero-photo { background-position:72% 48%; }
.tl-ai-brand-logo { width:136px; max-width:56%; }
.tl-ai-close { width:34px; height:34px; font-size:23px; }
.tl-ai-hero-copy { width:72%; margin-top:9px; }
.tl-ai-hero h2 { font-size:19px; }
.tl-ai-subtitle { max-width:220px; margin-top:7px; font-size:10.5px; }
.tl-ai-messages { min-height:116px; max-height:250px; padding:11px 12px 6px; }
.tl-ai-message { max-width:97%; }
.tl-ai-message-assistant { font-size:13px; }
.tl-ai-quick-actions { gap:7px; padding:6px 12px 9px; }
.tl-ai-quick-actions button { min-height:48px; padding:7px 8px; font-size:11px; }
.tl-ai-quick-icon { width:29px; height:29px; }
.tl-ai-form { grid-template-columns:minmax(0,1fr) 88px; gap:7px; padding:8px 12px 5px; }
.tl-ai-form textarea { min-height:48px; font-size:12.5px; }
.tl-ai-send { border-radius:14px; font-size:12px; }
.tl-ai-footnote { padding:3px 12px calc(8px + env(safe-area-inset-bottom)); font-size:9px; }
}
@media (max-width: 370px) {
.tl-ai-launcher { width:52px; padding:5px; }
.tl-ai-launcher-copy { display:none; }
.tl-ai-hero-copy { width:77%; }
.tl-ai-quick-actions button { font-size:10.5px; }
.tl-ai-form { grid-template-columns:minmax(0,1fr) 78px; }
.tl-ai-send-icon { display:none; }
}
@media (prefers-reduced-motion: reduce) {
.tl-ai-panel,
.tl-ai-launcher,
.tl-ai-quick-actions button { animation:none !important; transition:none !important; }
}