:root{
--rz-accent:#8cbf3f; --rz-panel:#0d0e0f; --rz-bot:#181a1d;
--rz-user:#8cbf3f; --rz-text:#f2f3f4; --rz-line:#23262a;
--rz-muted:#8a9099; --rz-radius:14px;
--rz-bubble-size:60px; --rz-offset:24px;
--rz-input:#141618; --rz-on-accent:#16210a;
--rz-accent-soft:#1c2116; --rz-accent-line:#3a4a26;
} #rozkovPanel, #rozkovPanel *, #rozkovLauncher, #rozkovLauncher *{
box-sizing:border-box; text-transform:none; letter-spacing:normal;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-weight:400; margin:0; text-shadow:none; float:none;
min-width:0; max-width:none; text-align:left;
}
#rozkovPanel button, #rozkovLauncher{
all:unset; box-sizing:border-box; cursor:pointer; display:flex;
align-items:center; justify-content:center;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
#rozkovPanel svg, #rozkovLauncher svg{
display:block !important; width:20px; height:20px; flex:0 0 auto;
fill:none; stroke:currentColor; stroke-linecap:round;
stroke-linejoin:round; opacity:1; visibility:visible;
} #rozkovLauncher{
position:fixed; z-index:99998;
width:var(--rz-bubble-size); height:var(--rz-bubble-size);
border-radius:50%; background:var(--rz-accent); color:var(--rz-on-accent);
box-shadow:0 8px 24px rgba(0,0,0,.3);
transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
animation:rz-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
#rozkovLauncher svg{ width:26px; height:26px; }
#rozkovLauncher::after{
content:""; position:absolute; inset:0; border-radius:50%;
animation:rz-pulse 2.4s ease-out infinite; pointer-events:none;
}
#rozkovLauncher:hover{ transform:scale(1.08); }
#rozkovLauncher:active{ transform:scale(.96); }
#rozkovLauncher.rz-hidden{ opacity:0; pointer-events:none; transform:scale(.6); }
#rozkovLauncher.rz-has-avatar{ background:none; overflow:hidden; }
#rozkovLauncher.rz-has-avatar img{ width:100%; height:100%; object-fit:cover;
border-radius:50%; display:block; }
@keyframes rz-pulse{
0%{ box-shadow:0 0 0 0 rgba(140,191,63,.45); }
70%{ box-shadow:0 0 0 16px rgba(140,191,63,0); }
100%{ box-shadow:0 0 0 0 rgba(140,191,63,0); }
}
@keyframes rz-pop{ from{ transform:scale(0); } to{ transform:scale(1); } } #rozkovPanel{
position:fixed; z-index:99999;
width:min(390px, calc(100vw - 32px));
height:min(600px, calc(100vh - 140px));
background:var(--rz-panel); color:var(--rz-text);
border:1px solid var(--rz-line); border-radius:var(--rz-radius);
display:flex; flex-direction:column; overflow:hidden;
box-shadow:0 24px 70px rgba(0,0,0,.5);
font-size:14px; line-height:1.55;
transform-origin:bottom right;
animation:rz-panel-in .28s cubic-bezier(.16,1,.3,1) both;
}
#rozkovPanel[hidden]{ display:none; }
#rozkovPanel.rz-closing{ animation:rz-panel-out .2s ease-in both; }
@keyframes rz-panel-in{
from{ opacity:0; transform:translateY(16px) scale(.96); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes rz-panel-out{
from{ opacity:1; transform:translateY(0) scale(1); }
to{ opacity:0; transform:translateY(12px) scale(.97); }
} #rozkovPanel .rz-head{ padding:14px 16px; border-bottom:1px solid var(--rz-line);
display:flex; align-items:center; gap:11px; flex:0 0 auto; }
#rozkovPanel .rz-dot{ width:9px; height:9px; border-radius:50%;
background:var(--rz-accent); box-shadow:0 0 0 3px rgba(140,191,63,.2);
flex:0 0 auto; animation:rz-breathe 3s ease-in-out infinite; }
@keyframes rz-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
#rozkovPanel .rz-avatar{ width:36px; height:36px; border-radius:50%;
object-fit:cover; flex:0 0 auto; display:block; }
#rozkovPanel .rz-head-text{ flex:1; min-width:0; }
#rozkovPanel .rz-head-text b{ display:block; font-size:15px; font-weight:500;
color:var(--rz-text); }
#rozkovPanel .rz-head-text span{ display:block; color:var(--rz-muted);
font-size:12px; }
#rozkovPanel .rz-close{ color:var(--rz-muted); font-size:20px; line-height:1;
padding:6px 8px; border-radius:8px; transition:color .25s ease, background .25s ease; }
#rozkovPanel .rz-close:hover{ color:var(--rz-text); background:rgba(255,255,255,.06); } #rozkovPanel .rz-log{ flex:1; overflow-y:auto; padding:16px;
display:flex; flex-direction:column; gap:10px;
scrollbar-width:thin; scrollbar-color:var(--rz-line) transparent; }
#rozkovPanel .rz-log::-webkit-scrollbar{ width:8px; }
#rozkovPanel .rz-log::-webkit-scrollbar-thumb{ background:var(--rz-line);
border-radius:4px; }
#rozkovPanel .rz-msg{ max-width:84%; padding:10px 14px; border-radius:14px;
white-space:pre-wrap; word-wrap:break-word; font-size:14px; line-height:1.55;
animation:rz-msg-in .28s cubic-bezier(.16,1,.3,1) both; }
#rozkovPanel .rz-msg.bot{ background:var(--rz-bot); color:var(--rz-text);
align-self:flex-start; border-bottom-left-radius:4px; }
#rozkovPanel .rz-msg.user{ background:var(--rz-user); color:var(--rz-on-accent);
align-self:flex-end; border-bottom-right-radius:4px; }
#rozkovPanel .rz-msg.err{ background:#3a1e1e; color:#f0b6b6;
align-self:flex-start; font-size:13px; }
@keyframes rz-msg-in{ from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:translateY(0); } }
#rozkovPanel .rz-typing{ align-self:flex-start; display:flex; gap:4px;
padding:13px 14px; background:var(--rz-bot); border-radius:14px;
border-bottom-left-radius:4px; animation:rz-msg-in .2s ease both; }
#rozkovPanel .rz-typing i{ width:7px; height:7px; border-radius:50%;
background:var(--rz-muted); display:inline-block; font-style:normal;
animation:rz-blink 1.4s infinite both; }
#rozkovPanel .rz-typing i:nth-child(2){ animation-delay:.2s; }
#rozkovPanel .rz-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes rz-blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); }
30%{ opacity:1; transform:translateY(-3px); } }
#rozkovPanel .rz-sent{ align-self:flex-end; max-width:84%; display:flex;
flex-direction:column; align-items:flex-end; gap:6px;
animation:rz-msg-in .28s cubic-bezier(.16,1,.3,1) both; }
#rozkovPanel .rz-card{ display:flex; align-items:center; gap:9px;
padding:9px 12px; border-radius:12px; border-bottom-right-radius:4px;
background:var(--rz-accent-soft); border:1px solid var(--rz-accent-line); }
#rozkovPanel .rz-card i{ font-size:10px; font-style:normal; letter-spacing:.5px;
color:var(--rz-accent); flex:0 0 auto; }
#rozkovPanel .rz-card span{ display:flex; flex-direction:column; min-width:0; }
#rozkovPanel .rz-card b{ font-size:13px; font-weight:400; color:var(--rz-text);
max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rozkovPanel .rz-card em{ font-size:11px; font-style:normal; color:var(--rz-muted); }
#rozkovPanel .rz-sent .rz-msg.user{ max-width:100%; }
#rozkovPanel .rz-form{ border:1px solid var(--rz-line); border-radius:12px;
background:#131518; padding:12px; align-self:stretch;
animation:rz-msg-in .3s cubic-bezier(.16,1,.3,1) both; }
#rozkovPanel .rz-form-h{ font-size:10.5px; color:var(--rz-muted); margin-bottom:9px;
letter-spacing:.4px; text-transform:uppercase; }
#rozkovPanel .rz-form-lbl{ font-size:11.5px; color:var(--rz-muted); margin-bottom:6px; }
#rozkovPanel .rz-field{ margin-bottom:8px; }
#rozkovPanel .rz-field label, #rozkovPanel .rz-col label{ display:block; font-size:11px;
color:var(--rz-muted); margin-bottom:3px; }
#rozkovPanel .rz-form input, #rozkovPanel .rz-form select{ width:100%; display:block;
background:var(--rz-panel); border:1px solid var(--rz-line); border-radius:10px;
padding:9px 11px; font-size:13.5px; line-height:1.35; color:var(--rz-text);
outline:none; height:auto;
font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; } #rozkovPanel .rz-phone{ display:flex; align-items:stretch;
background:var(--rz-panel); border:1px solid var(--rz-line); border-radius:10px;
transition:border-color .2s ease, box-shadow .2s ease; }
#rozkovPanel .rz-phone:focus-within{ border-color:var(--rz-accent);
box-shadow:0 0 0 2px rgba(140,191,63,.14); }
#rozkovPanel .rz-phone.rz-bad{ border-color:#c9736f; box-shadow:none; }
#rozkovPanel .rz-phone.rz-bad .rz-dial{ border-right-color:#c9736f; }
#rozkovPanel .rz-dial{ display:flex; align-items:center; padding:0 9px 0 11px;
font-size:13.5px; color:var(--rz-muted); border-right:1px solid var(--rz-line);
flex:0 0 auto; user-select:none; }
#rozkovPanel .rz-phone input{ border:0; border-radius:0 10px 10px 0; background:transparent; }
#rozkovPanel .rz-phone input:focus{ border:0; box-shadow:none; }
#rozkovPanel .rz-form input:focus, #rozkovPanel .rz-form select:focus{
border-color:var(--rz-accent); box-shadow:0 0 0 2px rgba(140,191,63,.14); }
#rozkovPanel .rz-form input::placeholder{ color:var(--rz-muted); opacity:.7; }
#rozkovPanel .rz-types{ display:flex; gap:7px; margin-bottom:11px; }
#rozkovPanel .rz-type{ flex:1; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:5px; min-height:52px;
border:1px solid var(--rz-line); border-radius:10px;
padding:9px 4px; text-align:center; font-size:12.5px; color:var(--rz-text);
cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; }
#rozkovPanel .rz-type svg{ display:block; flex:0 0 auto; color:var(--rz-muted);
transition:color .2s ease; }
#rozkovPanel .rz-type:hover{ border-color:var(--rz-accent-line); }
#rozkovPanel .rz-type:hover svg{ color:var(--rz-text); }
#rozkovPanel .rz-type.rz-on{ border-color:var(--rz-accent);
background:var(--rz-accent-soft); color:var(--rz-accent); }
#rozkovPanel .rz-type.rz-on svg{ color:var(--rz-accent); }
#rozkovPanel .rz-row{ display:flex; gap:7px; }
#rozkovPanel .rz-col{ flex:1; }
#rozkovPanel .rz-col:first-child{ flex:1.35; }
#rozkovPanel .rz-form-btn{ width:100%; display:flex; align-items:center;
justify-content:center; margin-top:12px; min-height:42px;
background:var(--rz-accent); color:var(--rz-on-accent); border:0; border-radius:12px;
padding:10px 14px; font-size:14.5px; font-weight:600; letter-spacing:.1px;
font-family:inherit; text-align:center; cursor:pointer; height:auto;
box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 6px 16px -8px var(--rz-accent);
transition:filter .2s ease, transform .12s ease, opacity .2s ease; }
#rozkovPanel .rz-form-btn:hover{ filter:brightness(1.06); }
#rozkovPanel .rz-form-btn:active{ transform:scale(.99); }
#rozkovPanel .rz-form-btn[disabled]{ opacity:.6; cursor:default; transform:none; }
#rozkovPanel a.rz-btn-link{ text-decoration:none; }
#rozkovPanel a.rz-btn-link:hover{ color:var(--rz-on-accent); }
#rozkovPanel .rz-form-err{ font-size:12px; color:#f0b6b6; margin-top:8px; }
#rozkovPanel .rz-form-err:empty{ margin-top:0; }
#rozkovPanel .rz-form-note{ font-size:10.5px; color:var(--rz-muted); margin-top:7px;
line-height:1.45; }
#rozkovPanel .rz-form-note a{ color:var(--rz-muted); text-decoration:underline; }
#rozkovPanel .rz-form.rz-form-done{ border-color:var(--rz-accent-line);
background:var(--rz-accent-soft); }
#rozkovPanel .rz-form-ok{ font-size:13.5px; color:var(--rz-text); margin-bottom:5px; }
#rozkovPanel .rz-form-sub{ font-size:12.5px; color:var(--rz-muted); line-height:1.5; } #rozkovPanel .rz-form.rz-booked{ border-color:var(--rz-accent-line); }
#rozkovPanel .rz-booked-h{ display:flex; align-items:center; gap:7px;
font-size:14.5px; font-weight:600; color:var(--rz-text); margin-bottom:6px; }
#rozkovPanel .rz-booked-h svg{ flex:0 0 auto; color:var(--rz-accent); } #rozkovPanel .rz-quick{ display:flex; flex-direction:column;
align-items:flex-start; gap:7px; padding:0 16px 12px; flex:0 0 auto; }
#rozkovPanel .rz-quick button{ display:block; background:transparent;
color:var(--rz-text); border:1px solid var(--rz-line); border-radius:8px;
padding:8px 13px; font-size:13px; line-height:1.4; text-align:left;
transition:border-color .25s ease, background .25s ease, transform .12s ease; }
#rozkovPanel .rz-quick button:hover{ border-color:var(--rz-accent);
background:rgba(140,191,63,.09); }
#rozkovPanel .rz-quick button:active{ transform:scale(.98); }
#rozkovPanel .rz-quick:empty{ display:none; } #rozkovPanel .rz-files{ padding:0 12px 8px; display:flex; flex-wrap:wrap;
gap:6px; flex:0 0 auto; }
#rozkovPanel .rz-files:empty{ display:none; }
#rozkovPanel .rz-file{ display:flex; align-items:center; gap:7px;
background:var(--rz-bot); border:1px solid var(--rz-line);
border-radius:8px; padding:6px 8px 6px 10px;
animation:rz-msg-in .22s ease both; }
#rozkovPanel .rz-file b{ font-size:12px; font-weight:400; color:var(--rz-text);
max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rozkovPanel .rz-file i{ font-size:11px; color:var(--rz-muted); font-style:normal; }
#rozkovPanel .rz-file .rz-rm{ cursor:pointer; color:var(--rz-muted);
font-size:15px; line-height:1; padding:0 2px; }
#rozkovPanel .rz-file .rz-rm:hover{ color:var(--rz-text); }
#rozkovPanel .rz-file.rz-up{ border-color:var(--rz-accent-line);
background:var(--rz-accent-soft); }
#rozkovPanel .rz-spin{ width:12px; height:12px; border:2px solid var(--rz-accent);
border-top-color:transparent; border-radius:50%;
animation:rz-spin .8s linear infinite; flex:0 0 auto; }
@keyframes rz-spin{ to{ transform:rotate(360deg); } }
#rozkovPanel .rz-hint{ padding:0 12px; font-size:11px; line-height:1.4;
color:var(--rz-muted); flex:0 0 auto; max-height:0; opacity:0;
overflow:hidden; transition:max-height .28s ease, opacity .28s ease,
padding-bottom .28s ease; }
#rozkovPanel .rz-hint.rz-show{ max-height:40px; opacity:1; padding-bottom:8px; } #rozkovPanel .rz-foot{ padding:12px; border-top:1px solid var(--rz-line);
display:flex; gap:8px; align-items:flex-end; flex:0 0 auto; }
#rozkovPanel .rz-foot textarea{ flex:1; resize:none; background:var(--rz-input);
color:var(--rz-text); border:1px solid var(--rz-line); border-radius:10px;
padding:11px 13px; font-size:14px; line-height:20px; max-height:120px;
outline:none; height:42px; min-height:42px; overflow-y:hidden;
display:block; vertical-align:middle;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
transition:border-color .15s, box-shadow .15s; }
#rozkovPanel .rz-foot textarea::placeholder{ color:var(--rz-muted); opacity:1; }
#rozkovPanel .rz-foot textarea:focus{ border-color:var(--rz-accent);
box-shadow:0 0 0 3px rgba(140,191,63,.14); }
#rozkovPanel #rozkovSend{ background:var(--rz-accent); color:var(--rz-on-accent);
border-radius:10px; width:42px; height:42px; flex:0 0 auto;
transition:filter .25s ease, transform .12s ease, opacity .2s ease; }
#rozkovPanel #rozkovSend:hover{ filter:brightness(1.1); }
#rozkovPanel #rozkovSend:active{ transform:scale(.92); }
#rozkovPanel #rozkovSend:disabled{ opacity:.45; cursor:default; }
#rozkovPanel .rz-attach{ background:transparent; color:var(--rz-muted);
border:1px solid var(--rz-line); border-radius:10px; width:42px; height:42px;
flex:0 0 auto; display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:color .28s ease, border-color .28s ease, background .28s ease; }
#rozkovPanel .rz-attach:hover{ color:var(--rz-accent);
border-color:var(--rz-accent-line); }
#rozkovPanel .rz-attach.rz-active{ background:var(--rz-accent-soft);
border-color:var(--rz-accent-line); color:var(--rz-accent); }
#rozkovPanel .rz-consent{ padding:0 12px 10px; font-size:11px; line-height:1.45;
color:var(--rz-muted); flex:0 0 auto; }
#rozkovPanel .rz-consent a{ color:var(--rz-muted); text-decoration:underline; }
#rozkovPanel .rz-consent a:hover{ color:var(--rz-accent); }
#rozkovPanel .rz-note{ padding:0 16px 12px; font-size:11px;
color:var(--rz-muted); text-align:center; flex:0 0 auto; }
#rozkovPanel .rz-note a{ color:var(--rz-muted); text-decoration:underline; }
@media (max-width:520px){
#rozkovPanel{ width:100vw; height:100dvh; max-height:100dvh;
inset:0 !important; border-radius:0; border:0; transform-origin:center; }
}
@media (prefers-reduced-motion:reduce){
#rozkovPanel *, #rozkovLauncher, #rozkovLauncher::after{ animation-duration:.01ms !important; }
}