/* ============================================================
   Židlík – asistent kancelarskezidle.com – style.css
   Brand: #58b84d (firemní zelená) · ink #28313b · bílé pozadí — dle vizuálu kancelarskezidle.com
   Font: Source Sans 3
   ============================================================ */

:root{
    --brand: #58b84d;
    --brand-2: #6fc95f;       /* lighter – gradient top */
    --brand-deep: #43a038;    /* darker  – hover / gradient bottom */
    --brand-rgb: 88, 184, 77;

    --ink: #28313b;
    --ink-soft: #97a4b1;
    --surface: #f5f6f8;
    --card: #ffffff;
    --line: #cbd2d8;

    --radius: 22px;
    --radius-sm: 14px;
    --shadow-panel: 0 28px 80px -16px rgba(18, 18, 40, 0.34), 0 10px 30px -12px rgba(0,0,0,0.14);
    --shadow-soft: 0 2px 10px -4px rgba(18,18,40,0.14);
    --ease: cubic-bezier(.22,.9,.32,1);
}

/* ============== Base ============== */
/* Web klienta přebíjí atribut hidden (kancelarskezidle.com 16. 9. 2026: pod sponkou svítilo
   nativní „Zvolit soubory“). Skryté prvky widgetu se proto skrývají natvrdo vlastním pravidlem. */
.eniq-panel [hidden], .eniq-panel input[type="file"]{ display: none !important; }

.eniq-launcher, .eniq-panel, .eniq-panel * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ============== Launcher (BUTTON) ============== */
.eniq-launcher{
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: 0 10px 28px -6px rgba(var(--brand-rgb), 0.45), 0 4px 12px rgba(0,0,0,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 5px;
    cursor:pointer;
    z-index: 2147483640 !important;
    animation: float 5s ease-in-out infinite;
    pointer-events: auto !important;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* brand ring */
.eniq-launcher::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2.5px solid var(--brand);
    pointer-events:none;
}
@keyframes pulseRing{
    0%   { transform: scale(1);    opacity:.55; }
    70%  { opacity:0; }
    100% { transform: scale(1.45); opacity:0; }
}

/* ===== Launcher online dot (always visible) ===== */
.launcher-online{
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
    animation: onlinePulse 2.6s ease-out infinite;
    pointer-events: none;
    z-index: 3;
}
@keyframes onlinePulse{
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

@keyframes float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}

.eniq-launcher:hover{
    animation-play-state: paused;
    transform: scale(1.08);
    box-shadow: 0 16px 36px -8px rgba(var(--brand-rgb), 0.6);
}
.eniq-launcher:active{ transform: scale(.96); }

.eniq-launcher-avatar{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.bot-img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 50%; }
.eniq-launcher .bot-img{ object-fit: cover; }
/* Židlík z loga klienta (15. 9. 2026): kresba na bílé, celá viditelná, bez ořezu do kruhu. */
.bot-img-logo{ object-fit: contain !important; object-position: center !important; background:#fff; padding:4px; box-sizing:border-box; }

.eniq-badge{
    /* Vpravo nahoře jako původně; číslice přesně uprostřed kolečka — styl webu klienta
       (line-height, box-sizing, písmo) sem nesmí prosáknout, proto je vše nastavené natvrdo. */
    position: absolute;
    top: -5px;
    right: -5px;
    left: auto;
    transform: none;
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(150deg, #f43f5e, #dc2626);
    color: #fff;
    border: 2px solid #fff;
    font: 800 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0;
    text-align: center;
    display: none;
    /* Výška řádku = vnitřní výška (22 − 2×2 okraj): číslice sedí uprostřed i bez flexu.
       Třída „show" je záměrně pryč — web klienta ji styluje vlastním pravidlem a přebíjel display. */
    line-height: 18px;
    box-shadow: 0 2px 6px rgba(220,38,38,0.45);
    z-index: 3;
}
.eniq-badge.eniq-on{ display:block !important; animation: badgePop .4s var(--ease) both, badgeGlow 2.4s ease-in-out .45s infinite; }
@keyframes badgePop{ from{ transform: scale(0); } to{ transform: scale(1); } }
@keyframes badgeGlow{
    0%, 100% { box-shadow: 0 2px 6px rgba(220,38,38,0.45), 0 0 0 0 rgba(220,38,38,0.55); }
    50%      { box-shadow: 0 2px 6px rgba(220,38,38,0.45), 0 0 0 6px rgba(220,38,38,0); }
}

/* attention nudge when the invite appears */
.eniq-launcher.nudge{ animation: launcherNudge .7s var(--ease); }
@keyframes launcherNudge{
    0%, 100% { transform: translateY(0) scale(1); }
    30%      { transform: translateY(-7px) scale(1.06); }
    55%      { transform: translateY(0) scale(1); }
    72%      { transform: translateY(-3px) scale(1.03); }
}

/* ============== Panel ============== */
.eniq-panel{
    position: fixed;
    bottom: 104px;
    right: 24px;
    width: 384px;
    height: 72vh;
    min-height: 480px;
    max-height: 768px;
    max-width: 92vw;
    background: var(--card);
    border: 1px solid rgba(20,20,40,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: none;
    flex-direction: column;
    z-index: 2147483645 !important;
    box-shadow: var(--shadow-panel);
    transform-origin: bottom right;
    transition: width 0.4s var(--ease), height 0.4s var(--ease);
}

.eniq-panel.open{
    display:flex;
    animation: panelIn .42s var(--ease);
}

.eniq-panel.expanded{
    width: 820px !important;
    height: 82vh !important;
    max-width: 95vw;
}

@keyframes panelIn{
    from { opacity:0; transform: translateY(18px) scale(0.94); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ============== Header ============== */
.chat-header{
    position: relative;
    background: linear-gradient(150deg, #6fc95f 0%, #43a038 100%);
    color: #ffffff;
    padding: 15px 16px;
    display:flex;
    align-items:center;
    gap: 12px;
    flex-shrink: 0;
    overflow: hidden;
}
/* glossy light highlight */
.chat-header::before{
    content:"";
    position:absolute;
    top:-70%;
    right:-12%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 68%);
    pointer-events:none;
}

.chat-header-left{
    display:flex;
    align-items:center;
    gap: 12px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.chat-header-avatar{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 4px 12px rgba(0,0,0,0.18);
}
.chat-header-avatar .bot-img{ object-fit: cover; }

.chat-header-title{ font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: .1px; }

.chat-header-status{
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.status-dot{
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
    animation: dotPulse 2.2s infinite;
}
@keyframes dotPulse{
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.65); }
    70%  { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ============== Buttons in Header ============== */
.settings-btn, .close-btn{
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    transition: background 0.2s, transform 0.2s;
}
.settings-btn:hover, .close-btn:hover{ background: rgba(255,255,255,0.30); transform: translateY(-1px); }
.settings-btn:active, .close-btn:active{ transform: scale(.92); }

/* ============== Settings Menu ============== */
.settings-menu{
    position: absolute;
    top: 70px;
    right: 16px;
    width: min(296px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 18px 44px -10px rgba(18,18,40,0.25);
    z-index: 2000;
    max-height: calc(100% - 92px);
    overflow-y: auto;
}
.settings-menu.active{ display: flex; animation: panelIn .25s var(--ease); }

.settings-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 38px;          /* stejná výška řádků, i když se popisek zalomí */
    padding: 2px 6px;
    border-radius: 10px;
    transition: background-color .15s var(--ease);
}
.settings-item:hover{ background: rgba(var(--brand-rgb), 0.05); }

.settings-label{
    font-size: 13.5px;
    color: #374151;
    font-weight: 600;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;              /* popisek se smí zúžit, ovládací prvek nikdy */
}

.lang-select{
    /* Pevná šířka: bez ní je každý select jinak široký podle nejdelší položky
       a pravé okraje se v menu nezarovnají. */
    flex: 0 0 auto;
    width: 118px;
    height: 34px;
    padding: 0 32px 0 11px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 13px;
    font-family: inherit;
    background-color: #f7f8fa;
    color: #374151;
    cursor: pointer;
    outline: none;
    /* Vlastní šipka — nativní se v každém prohlížeči kreslí jinak. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.lang-select:hover{ border-color: rgba(var(--brand-rgb), 0.45); }
.lang-select:focus-visible{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18);
}

/* ============== Chat Box ============== */
.chat-box{
    flex: 1;
    padding: 20px 16px 8px;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(var(--brand-rgb),0.035), transparent 60%),
        var(--surface);
    overflow-y: auto;
    scroll-behavior: smooth;
}
.chat-box::-webkit-scrollbar{ width: 7px; }
.chat-box::-webkit-scrollbar-track{ background: transparent; }
.chat-box::-webkit-scrollbar-thumb{
    background: rgba(var(--brand-rgb), 0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.chat-box::-webkit-scrollbar-thumb:hover{ background: rgba(var(--brand-rgb), 0.42); background-clip: padding-box; }

/* ============== Messages ============== */
.message{
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start;
    animation: msgIn .34s var(--ease) both;
}
@keyframes msgIn{
    from { opacity:0; transform: translateY(10px) scale(.99); }
    to   { opacity:1; transform: none; }
}

.message.user{ flex-direction: row-reverse; }

.message-avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-top: 1px;
    border: none;
}
.message-avatar .bot-img{ object-fit: cover; }
.message.user .message-avatar { display: none !important; }

.message-content{
    max-width: 80%;
    padding: 11px 15px;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.message.bot .message-content{
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    box-shadow: var(--shadow-soft);
}
.message.bot .message-content strong{ font-weight: 700; color: #0f1115; }

.message.user .message-content{
    background: linear-gradient(150deg, var(--brand-2), var(--brand));
    color: #ffffff;
    border-radius: 18px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 16px -5px rgba(var(--brand-rgb), 0.5);
}

/* ============== Typing indicator (3 dots) ============== */
.typing-indicator{
    display: inline-flex !important;
    gap: 5px;
    align-items: center;
    padding: 15px 16px !important;
}
.typing-indicator span{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .4;
    animation: typingBounce 1.3s infinite ease-in-out;
}
.typing-indicator span:nth-child(2){ animation-delay: .16s; }
.typing-indicator span:nth-child(3){ animation-delay: .32s; }
@keyframes typingBounce{
    0%, 65%, 100% { transform: translateY(0);    opacity: .35; }
    32%           { transform: translateY(-5px); opacity: 1; }
}

/* legacy cursor (kept harmless) */
.typewriter-cursor{ border-right: 2px solid var(--brand); padding-right: 4px; animation: blinkCursor 0.6s step-end infinite alternate; }
@keyframes blinkCursor{ 50% { border-color: transparent; } }

/* ============== Quick Actions ============== */
.quick-actions-inline{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 2px 0 16px 0;
    padding-left: 40px;
}

.quick-action-btn{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(18,18,40,0.05);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
    animation: chipIn .45s var(--ease) both;
}
.quick-action-btn:nth-child(1){ animation-delay: .04s; }
.quick-action-btn:nth-child(2){ animation-delay: .10s; }
.quick-action-btn:nth-child(3){ animation-delay: .16s; }
.quick-action-btn:nth-child(4){ animation-delay: .22s; }
@keyframes chipIn{
    from { opacity:0; transform: translateY(8px); }
    to   { opacity:1; transform: none; }
}

.quick-action-btn .qa-icon{ display:inline-flex; color: var(--brand); transition: color .25s; }
.quick-action-btn .qa-icon svg{ width: 15px; height: 15px; display:block; }

.quick-action-btn:hover{
    transform: translateY(-2px);
    background: rgba(var(--brand-rgb), 0.05);
    border-color: rgba(var(--brand-rgb), 0.5);
    box-shadow: 0 9px 20px -8px rgba(var(--brand-rgb), 0.4);
}
.quick-action-btn:hover .qa-icon{ color: var(--brand-deep); }
.quick-action-btn:active{ transform: translateY(0) scale(.97); }

/* ============== Návrhy odpovědí (klikatelné čipy) ============== */
/* Řádek sedí pod poslední bublinou asistenta, proto stejné odsazení zleva
   (40 px = šířka avatara) jako rychlé volby — návrhy tak opticky patří
   k odpovědi, ne k zákazníkovi.
   flex-wrap zalamuje, min-width:0 dovolí čipu se zúžit místo přetečení
   a overflow-x je poslední pojistka pro jedno nezalomitelné dlouhé slovo. */
.suggestions-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 14px 0;
    padding-left: 40px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.suggestions-row::-webkit-scrollbar{ height: 4px; }
.suggestions-row::-webkit-scrollbar-thumb{ background: rgba(var(--brand-rgb), 0.35); border-radius: 99px; }

.suggestion-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 8px 14px;
    /* Pilulka je záměrně jiný tvar než rychlé volby (radius-sm) — zákazník
       na první pohled pozná, že tohle je nabídka „co se zeptat dál", a ne
       stálé menu widgetu. */
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    background: rgba(var(--brand-rgb), 0.08);
    color: var(--brand-deep);
    border: 1px solid rgba(var(--brand-rgb), 0.35);
    /* Dlouhý návrh se musí zalomit uvnitř čipu, ne vystrčit widget do šířky. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
    animation: chipIn .45s var(--ease) both;
}
/* Malá šipka napovídá, že klik rovnou odešle — nevkládá text do pole. */
.suggestion-chip::before{
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center / contain no-repeat;
    opacity: .6;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.suggestion-chip:hover{
    transform: translateY(-2px);
    background: rgba(var(--brand-rgb), 0.16);
    border-color: var(--brand);
    box-shadow: 0 9px 20px -8px rgba(var(--brand-rgb), 0.45);
}
.suggestion-chip:hover::before{ opacity: 1; transform: translateX(2px); }
.suggestion-chip:active{ transform: translateY(0) scale(.97); }
/* Spojení s živým člověkem. Nabízí se u každé odpovědi, takže je záměrně
   tišší než návrhy dotazů — má být po ruce, ne přetahovat pozornost. Ikona
   je sluchátko místo šipky: klik nevede na další otázku, ale na kontakt. */
.suggestion-chip-contact{
    background: transparent;
    color: var(--text-soft, #5b6b7a);
    border-color: rgba(var(--brand-rgb), 0.22);
    font-weight: 500;
}
.suggestion-chip-contact::before{
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center / contain no-repeat;
    opacity: .55;
}
.suggestion-chip-contact:hover{
    background: rgba(var(--brand-rgb), 0.10);
    border-color: rgba(var(--brand-rgb), 0.45);
    color: var(--brand-deep);
}
.suggestion-chip-contact:hover::before{ transform: none; opacity: .85; }
/* V tmavém motivu má `.eniq-panel.dark-mode .suggestion-chip` vyšší
   specificitu a kontaktní čip přebíjelo — oba pak vypadaly stejně, přestože
   jeden odesílá dotaz a druhý vypisuje telefon. Stejná váha selektoru to
   srovnává. */
.eniq-panel.dark-mode .suggestion-chip-contact{
    background: transparent;
    color: var(--text-soft, #9fb0bf);
    border-color: rgba(var(--brand-rgb), 0.30);
    font-weight: 500;
}
.eniq-panel.dark-mode .suggestion-chip-contact:hover{
    background: rgba(var(--brand-rgb), 0.14);
    border-color: rgba(var(--brand-rgb), 0.55);
    color: var(--brand-2, #6fc95f);
}
/* PŘEDÁNÍ ČLOVĚKU (server posílá `handoff`): asistent sám říká, že tohle
   z dat nepotvrdí — tlačítko je tu hlavní další krok, ne tichá možnost.
   Výraznost nese tónovaná výplň, silnější obrys a stín; text zůstává
   tmavý (bílá na firemní zelené má kontrast pod 3:1). Selektor má o třídu
   víc než tmavé pravidlo výš, aby ho web klienta ani motiv nepřebily. */
.eniq-panel .suggestion-chip.suggestion-chip-contact--primary{
    background: rgba(var(--brand-rgb), 0.18);
    color: var(--ink);
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand), 0 6px 16px -8px rgba(var(--brand-rgb), 0.55);
    font-weight: 700;
}
.eniq-panel .suggestion-chip.suggestion-chip-contact--primary::before{ opacity: .9; }
.eniq-panel .suggestion-chip.suggestion-chip-contact--primary:hover{
    background: rgba(var(--brand-rgb), 0.28);
    color: var(--ink);
    border-color: var(--brand-deep);
    box-shadow: inset 0 0 0 1px var(--brand-deep), 0 9px 20px -8px rgba(var(--brand-rgb), 0.6);
}
.eniq-panel.dark-mode .suggestion-chip.suggestion-chip-contact--primary{
    background: rgba(var(--brand-rgb), 0.28);
    color: #ffffff;
    border-color: var(--brand-2);
    box-shadow: inset 0 0 0 1px var(--brand-2);
    font-weight: 700;
}
.eniq-panel.dark-mode .suggestion-chip.suggestion-chip-contact--primary:hover{
    background: rgba(var(--brand-rgb), 0.4);
    color: #ffffff;
    border-color: var(--brand-2);
}
/* Viditelný fokus je jediné, podle čeho se dá čip ovládaný klávesnicí najít.
   Obrys je dvojitý (brand + světlý okraj), aby byl vidět i na tmavém pozadí. */
.suggestion-chip:focus-visible{
    outline: 2px solid var(--brand-deep);
    outline-offset: 2px;
    background: rgba(var(--brand-rgb), 0.18);
    border-color: var(--brand);
}

/* ============== Input Area (Footer) ============== */
.input-area{
    padding: 10px 12px 8px;
    background: var(--card);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.composer-row{
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#message-input{
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    background: #f1f2f4;
    color: var(--ink);
    outline: none;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.45;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#message-input::placeholder{ color: #9aa0ab; }
#message-input:focus{
    background: #ffffff;
    border-color: rgba(var(--brand-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.1);
}
#message-input::-webkit-scrollbar{ width: 6px; }
#message-input::-webkit-scrollbar-thumb{ background: rgba(var(--brand-rgb), 0.22); border-radius: 999px; }

.composer-actions{
    display: flex;
    align-items: center;
    gap: 4px;
}
.composer-spacer{ flex: 1; }

.send-btn{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--brand-2), var(--brand));
    color: #ffffff;
    border: none;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink: 0;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
    box-shadow: 0 6px 16px -4px rgba(var(--brand-rgb), 0.5);
}
.send-btn svg{ width: 18px; height: 18px; display: block; }
.send-btn:hover{ transform: translateY(-1px) scale(1.05); box-shadow: 0 11px 24px -6px rgba(var(--brand-rgb), 0.62); }
.send-btn:active{ transform: scale(.94); }
.send-btn:disabled{ opacity: 0.5; cursor: not-allowed; }
/* dim send button while input is empty */
.send-btn.is-empty{ opacity: .5; box-shadow: none; }

/* ============== Powered By ============== */
.powered-by{
    text-align: center;
    margin: 0 12px;
    padding: 9px 8px 11px 8px;
    font-size: 10.5px;
    color: #a6acb6;
    background: var(--card);
    letter-spacing: .2px;
    border-top: 1px solid var(--line);
}
.powered-by a{ color: #5b616e; text-decoration: none; font-weight: 800; transition: color .2s; }
.powered-by a:hover{ color: var(--brand); }
.eniq-panel.dark-mode .powered-by{ border-top-color: #2a2530; }

/* ============== Page Link Prompt ============== */
.page-link-prompt {
    /* 40px = šířka avatara (30) + mezera (10), aby karta lícovala s bublinou */
    margin: 10px auto 16px 40px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: slideUp 0.3s ease-out;
    max-width: min(80%, 420px);
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid rgba(var(--brand-rgb),0.18);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.page-link-header-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(var(--brand-rgb),0.14);
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.page-link-product-img { width: 45px; height: 45px; object-fit: cover; border-radius: 10px; border: 1px solid #f3f4f6; flex-shrink: 0; }
.page-link-product-title {
    font-size: 13px; font-weight: 700; color: #1f2937; text-align: left; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.page-link-text { font-size: 12px; font-weight: 600; color: var(--brand-deep); text-align: center; margin-bottom: 4px; }
.page-link-buttons { display: flex; gap: 8px; width: 100%; justify-content: center; }
.page-link-btn {
    padding: 9px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; border: none;
    transition: all 0.2s; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.page-link-btn-yes { background: linear-gradient(150deg, var(--brand-2), var(--brand)); color: #fff; box-shadow: 0 4px 10px -2px rgba(var(--brand-rgb), 0.4); }
.page-link-btn-yes:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(var(--brand-rgb), 0.5); }
.page-link-btn-no { background: #eef0f3; color: #5b616e; }
.page-link-btn-no:hover { background: #e2e5e9; }

/* inline spinner (used in redirect button) */
.spinner{
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin .7s linear infinite;
}

/* ============== Page Transition Overlay ============== */
.page-transition-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #ffffff; z-index: 99999999; opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease-in-out; display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.page-transition-overlay.active { opacity: 1; pointer-events: auto; }
.transition-spinner { width: 40px; height: 40px; border: 3px solid #f3f4f6; border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-out { opacity: 0; transition: opacity 0.3s ease; }

/* ============== DARK MODE ============== */
.eniq-panel.dark-mode{ background: #16131a; border-color: #2a2530; }
.eniq-panel.dark-mode .chat-header{ background: linear-gradient(150deg, #5C8A1C, #3C5C12); }
.eniq-panel.dark-mode .chat-box{
    background: radial-gradient(120% 60% at 50% 0%, rgba(var(--brand-rgb),0.10), transparent 60%), #120f16;
}
.eniq-panel.dark-mode .message.bot .message-content{ background: #221c28; border-color: #342b3c; color: #f3f4f6; }
.eniq-panel.dark-mode .message.bot .message-content strong{ color: #ffffff; }
.eniq-panel.dark-mode .message.user .message-content{ background: linear-gradient(150deg, var(--brand-2), var(--brand)); color: #fff; }
.eniq-panel.dark-mode .input-area,
.eniq-panel.dark-mode .powered-by{ background: #16131a; border-color: #2a2530; }
.eniq-panel.dark-mode #message-input{ background: #221c28; border-color: transparent; color: #fff; }
.eniq-panel.dark-mode #message-input:focus{ background: #2a2330; border-color: rgba(var(--brand-rgb),0.6); }
.eniq-panel.dark-mode .quick-action-btn{ background: #221c28; border-color: #342b3c; color: #f3f4f6; box-shadow: none; }
.eniq-panel.dark-mode .quick-action-btn:hover{ background: rgba(var(--brand-rgb),0.16); color: #fff; border-color: var(--brand); }
/* V tmavém režimu je --brand-deep proti tmavému pozadí nečitelný, proto
   světlejší odstín značky a znatelnější podklad. */
.eniq-panel.dark-mode .suggestion-chip{ background: rgba(var(--brand-rgb),0.14); color: var(--brand-2); border-color: rgba(var(--brand-rgb),0.45); box-shadow: none; }
.eniq-panel.dark-mode .suggestion-chip:hover{ background: rgba(var(--brand-rgb),0.24); color: #fff; border-color: var(--brand); }
.eniq-panel.dark-mode .suggestion-chip:focus-visible{ outline-color: var(--brand-2); background: rgba(var(--brand-rgb),0.26); color: #fff; }
.eniq-panel.dark-mode .suggestions-row::-webkit-scrollbar-thumb{ background: rgba(var(--brand-rgb), 0.5); }
.eniq-panel.dark-mode .page-link-prompt { background: #221c28; border-color: #342b3c; }
.eniq-panel.dark-mode .page-link-text { color: #f3f4f6; }
.eniq-panel.dark-mode .page-link-btn-no { background: #2a2330; color: #cbd0d8; }
.eniq-panel.dark-mode .settings-menu{ background: #16131a; border-color: #2a2530; }
.eniq-panel.dark-mode .lang-select{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.eniq-panel.dark-mode .settings-label{ color: #e5e7eb; }
.eniq-panel.dark-mode .lang-select{ background-color: #221c28; border-color: #342b3c; color: #e5e7eb; }

/* ============== Toggle Switch ============== */
.toggle-switch{ width: 44px; height: 24px; background: #d1d5db; border-radius: 99px; position: relative; cursor: pointer; transition: background 0.3s; }
.toggle-switch.active{ background: var(--brand); }
.toggle-slider{ width: 18px; height: 18px; background: #fff; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 0.3s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch.active .toggle-slider{ transform: translateX(20px); }
/* ============== Tlačítka lišty (příloha / emoji) ============== */
.composer-btn{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #8a909c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.composer-btn svg{ width: 20px; height: 20px; }
.composer-btn:hover{ background: #f1f2f4; color: var(--brand); }
.composer-btn:active{ transform: scale(.88); }
@keyframes micPulse{
    0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(var(--brand-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); }
}

/* ============== Emoji picker ============== */
.emoji-panel{
    display: none;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: var(--card);
    max-height: 168px;
    overflow-y: auto;
}
.emoji-panel.open{ display: grid; animation: slideUp .22s var(--ease); }
.emoji-panel::-webkit-scrollbar{ width: 6px; }
.emoji-panel::-webkit-scrollbar-thumb{ background: rgba(var(--brand-rgb),0.2); border-radius: 999px; }
.emoji-item{
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    padding: 6px 0;
    border-radius: 9px;
    cursor: pointer;
    transition: transform .15s var(--ease), background .15s;
}
.emoji-item:hover{ background: #f1f2f4; transform: scale(1.2); }

/* ============== Attachments preview ============== */
.attach-preview{
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px 0;
    background: var(--card);
}
.attach-preview.has-files{ display: flex; }
.attach-chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f2f4;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 6px 6px 6px 11px;
    max-width: 210px;
    animation: chipIn .3s var(--ease) both;
}
.attach-chip .file-ic{ color: var(--brand); display: inline-flex; flex-shrink: 0; }
.attach-chip .file-ic svg{ width: 15px; height: 15px; }
.attach-chip .file-meta{ display: flex; flex-direction: column; min-width: 0; }
.attach-chip .file-name{ font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.attach-chip .file-size{ font-size: 10.5px; color: var(--ink-soft); }
.attach-remove{
    border: none; background: transparent; cursor: pointer; color: var(--ink-soft);
    width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1; flex-shrink: 0; transition: .15s;
}
.attach-remove:hover{ background: #e2e5e9; color: var(--brand); }

/* file card inside a user message */
.message-content.file-card{ display: flex; align-items: center; gap: 11px; }
.file-card .file-ic{
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.file-card .file-ic svg{ width: 18px; height: 18px; }
.file-card .file-meta{ display: flex; flex-direction: column; min-width: 0; }
.file-card .file-name{ font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.file-card .file-size{ font-size: 11.5px; opacity: .85; }

/* ============== Disclaimer + GDPR consent ============== */
.chat-disclaimer{
    padding: 12px 2px 0;
    margin-top: 2px;
    border-top: 1px solid var(--line);
    text-align: left;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-soft);
}
.consent-link{
    background: none; border: none; padding: 0 0 0 4px;
    color: #7a818c; text-decoration: underline; cursor: pointer;
    font-size: 10.5px; font-weight: 700; transition: color .2s;
}
.consent-link:hover{ color: var(--brand); }
.consent-box{
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    background: #f7f8fa;
    border: 1px solid var(--line);
    border-radius: 11px;
    text-align: left;
    font-size: 11px;
    line-height: 1.55;
    color: var(--ink-soft);
}
.consent-box.open{ display: block; animation: slideUp .22s var(--ease); }

/* one-time consent banner inside chat (compact) */
.consent-banner{
    margin: 0 0 12px;
    padding: 10px 12px;
    background: rgba(var(--brand-rgb), 0.05);
    border: 1px solid rgba(var(--brand-rgb), 0.18);
    border-radius: 13px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink);
    animation: slideUp .35s var(--ease) both;
}
.consent-banner strong{ color: var(--brand-deep); }
.consent-row{ display: flex; align-items: center; gap: 10px; }
.consent-msg{ flex: 1; min-width: 0; }
.consent-banner .consent-ok{
    flex-shrink: 0;
    padding: 7px 14px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(150deg, var(--brand-2), var(--brand));
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s;
}
.consent-banner .consent-ok:hover{ transform: translateY(-1px); box-shadow: 0 7px 16px -4px rgba(var(--brand-rgb), 0.5); }

/* ============== Settings: action button + font size ============== */
.settings-action{
    width: 100%;
    margin-top: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--brand);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: .2s var(--ease);
}
.settings-action:hover{ background: rgba(var(--brand-rgb), 0.06); border-color: rgba(var(--brand-rgb), 0.4); }

.eniq-panel.fs-sm .message-content{ font-size: 13.5px; }
.eniq-panel.fs-lg .message-content{ font-size: 16.5px; }

/* ============== Animations OFF (settings toggle) ============== */
.eniq-panel.no-anim *,
.eniq-panel.no-anim *::before,
.eniq-panel.no-anim *::after{
    animation: none !important;
    transition: none !important;
}

/* ============== Dark mode – new components ============== */
.eniq-panel.dark-mode .composer-btn:hover{ background: #2a2330; color: var(--brand-2); }
.eniq-panel.dark-mode .emoji-panel,
.eniq-panel.dark-mode .attach-preview{ background: #16131a; }
.eniq-panel.dark-mode .emoji-item:hover{ background: #2a2330; }
.eniq-panel.dark-mode .attach-chip{ background: #221c28; border-color: #342b3c; }
.eniq-panel.dark-mode .attach-chip .file-name{ color: #f3f4f6; }
.eniq-panel.dark-mode .attach-remove:hover{ background: #342b3c; }
.eniq-panel.dark-mode .chat-disclaimer{ border-top-color: #342b3c; }
.eniq-panel.dark-mode .consent-box{ background: #221c28; border-color: #342b3c; }
.eniq-panel.dark-mode .consent-banner{ background: rgba(var(--brand-rgb),0.12); border-color: rgba(var(--brand-rgb),0.3); color: #f3f4f6; }
.eniq-panel.dark-mode .settings-action{ background: #221c28; border-color: #342b3c; color: var(--brand-2); }
.eniq-panel.dark-mode .settings-action:hover{ background: #2a2330; }

/* ============== Message timestamps ============== */
.bubble-col{ display: flex; flex-direction: column; max-width: 82%; align-items: flex-start; }
.message.user .bubble-col{ align-items: flex-end; }
.message .message-content{ max-width: 100%; }
.message-time{
    font-size: 10px;
    color: #a6acb6;
    margin-top: 3px;
    padding: 0 5px;
    letter-spacing: .2px;
}
.message.user .message-time{ text-align: right; }
.eniq-panel.dark-mode .message-time{ color: #7a818c; }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
.vt-turn{
    max-width: 88%;
    padding: 9px 13px;
    font-size: 13.5px;
    line-height: 1.45;
    border-radius: 14px;
    animation: msgIn .28s var(--ease) both;
    word-break: break-word;
    text-align: left;   /* override inherited center from .voice-view → bubbles read like a chat */
}
.vt-turn.vt-user{
    align-self: flex-end;
    background: linear-gradient(150deg, var(--brand-2), var(--brand));
    color: #fff;
    border-bottom-right-radius: 5px;
}
.vt-turn.vt-bot{
    align-self: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    border-bottom-left-radius: 5px;
    box-shadow: var(--shadow-soft);
}
.vt-turn.vt-live{ opacity: .6; animation: none; align-self: flex-end; }
.vt-row-bot{ align-self: flex-start; align-items: flex-start; }
.vt-row-user{ align-self: flex-end; align-items: flex-end; }
.vt-row .vt-turn{ max-width: 100%; }
.vt-time{ font-size: 10px; color: #a6acb6; padding: 0 5px; letter-spacing: .2px; }
.eniq-panel.dark-mode .vt-time{ color: #7a818c; }
.vt-link-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid rgba(var(--brand-rgb), 0.35);
    background: rgba(var(--brand-rgb), 0.06);
    color: var(--brand-deep);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    padding: 7px 12px;
    border-radius: 999px;
    transition: .15s;
}
.vt-link-chip:hover{
    background: linear-gradient(150deg, var(--brand-2), var(--brand));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(var(--brand-rgb), 0.55);
}
.vt-link-chip .vt-link-ic{ font-size: 12px; }
.eniq-panel.dark-mode .vt-link-chip{ background: rgba(var(--brand-rgb), 0.14); color: var(--brand-2); }
.eniq-panel.dark-mode .vt-turn.vt-bot{ background: #221c28; border-color: #342b3c; color: #f3f4f6; }

/* ============== Invite popup (smart invitation) ============== */
.invite-popup{
    position: fixed;
    right: 24px;
    bottom: 104px;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 20px;
    box-shadow: 0 26px 60px -16px rgba(18,18,40,0.34), 0 8px 22px -10px rgba(0,0,0,0.14);
    padding: 18px 18px 16px;
    z-index: 2147483642 !important;
    font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .26s var(--ease), transform .26s var(--ease);  /* exit: fade + slide down */
}
.invite-popup.open{
    opacity: 1;
    transform: none;
    pointer-events: auto;
    animation: invitePop .45s cubic-bezier(.34,1.56,.64,1) both;       /* lively spring entrance */
}
@keyframes invitePop{
    0%   { opacity: 0; transform: translateY(18px) scale(.92); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.012); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.invite-close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(18,18,40,0.05);
    color: #6b7280;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, transform .15s;
}
.invite-close svg{ width: 15px; height: 15px; }
.invite-close:hover{ background: rgba(18,18,40,0.1); color: var(--ink); }
.invite-close:active{ transform: scale(.9); }

.invite-head{
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    padding-right: 26px;
}
.invite-avatar{
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(18,18,40,0.06), 0 4px 10px -3px rgba(0,0,0,0.18);
    padding: 3px;
    flex-shrink: 0;
}
.invite-avatar .bot-img{ width: 100%; height: 100%; object-fit: cover; }
.invite-avatar .launcher-online{ width: 12px; height: 12px; border-width: 2px; bottom: 0; right: 0; }
.invite-name{ font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.2; }
.invite-status{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #16a34a;
    margin-top: 2px;
}
.invite-status .status-dot{ background: #22c55e; }

.invite-text{
    font-size: 14px;
    line-height: 1.55;
    color: #3b4150;
    margin-bottom: 14px;
}

.invite-cta{
    width: 100%;
    border: none;
    border-radius: 13px;
    padding: 12px 16px;
    background: linear-gradient(150deg, var(--brand-2), var(--brand));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 8px 20px -6px rgba(var(--brand-rgb), 0.55);
    transition: transform .18s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
.invite-cta svg{ width: 17px; height: 17px; }
.invite-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px -6px rgba(var(--brand-rgb), 0.65); filter: brightness(1.03); }
.invite-cta:active{ transform: scale(.98); }

/* dark mode */
.invite-popup.dark-mode,
body.eniq-dark .invite-popup{ }
.invite-dark{
    background: rgba(28,22,33,0.9);
    border-color: rgba(255,255,255,0.08);
}
.invite-dark .invite-name{ color: #f3f4f6; }
.invite-dark .invite-text{ color: #c9cdd6; }
.invite-dark .invite-close{ background: rgba(255,255,255,0.08); color: #cbd0d8; }
.invite-dark .invite-close:hover{ background: rgba(255,255,255,0.16); color: #fff; }
.invite-dark .invite-avatar{ background: #fff; }

@media (max-width: 600px){
    .invite-popup{
        right: 16px;
        left: 16px;
        bottom: 88px;
        width: auto;
        max-width: none;
    }
}

/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce){
    .eniq-launcher{ animation: none; }
    .launcher-online{ animation: none; }
    .status-dot{ animation: none; }
    .message, .quick-action-btn, .suggestion-chip, .eniq-panel.open, .invite-popup{ animation: none !important; }
    .suggestion-chip:hover{ transform: none; }
    .suggestion-chip:hover::before{ transform: none; }
    .eniq-badge.eniq-on, .eniq-launcher.nudge{ animation: none !important; }
    .invite-popup{ transition: opacity .2s ease; }
}

/* ============== Tablet (roomy floating panel) ============== */
@media (min-width: 601px) and (max-width: 900px){
    .eniq-panel{ width: 420px; height: 78vh; max-height: 820px; }
}

/* ============== Mobile — full screen ============== */
@media (max-width: 600px){
    .eniq-launcher{ width: 58px; height: 58px; bottom: 16px; right: 16px; padding: 5px; }
    .desktop-only-setting { display: none !important; }
    .eniq-panel{
        top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100vw !important; height: 100vh !important; height: 100dvh !important;
        max-height: none !important; min-height: 0 !important; max-width: none;
        border-radius: 0; border: none; z-index: 2147483647 !important;
    }
    .eniq-panel.open ~ .eniq-launcher { display: none !important; }
    .chat-header { border-radius: 0; padding: 16px; }
    .settings-menu{ max-height: calc(100% - 80px); }
    #message-input{ font-size: 16px; }   /* avoid iOS zoom on focus */
    .powered-by{ margin: 0; }
    /* Na 375px displeji je 40 px odsazení zbytečná daň — čipy by se zalomily
       po jednom na řádek. Ponechá se jen tolik, aby řádek pořád opticky
       patřil k odpovědi asistenta. */
    .suggestions-row{ padding-left: 8px; gap: 6px; }
    .suggestion-chip{ font-size: 12.5px; padding: 8px 12px; }
}


/* ── Proklikávací odkazy a zvýraznění v bublině ───────────── */
.message.bot .message-content a.msg-link{
    color: var(--brand-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    word-break: break-all;
    font-weight: 600;
    transition: color .15s var(--ease);
}
.message.bot .message-content a.msg-link:hover{
    color: var(--brand);
    background: rgba(var(--brand-rgb), .08);
    border-radius: 4px;
}
.message.bot .message-content em{ font-style: italic; color: #45505c; }
.message.bot .message-content u{
    text-decoration: none;
    background: linear-gradient(transparent 62%, rgba(var(--brand-rgb), .28) 62%);
    padding: 0 1px;
}
.message.bot .message-content .msg-stock{
    color: var(--brand-deep);
    font-weight: 700;
}
.eniq-panel.dark-mode .message.bot .message-content em{ color: #b9c2cc; }
.eniq-panel.dark-mode .message.bot .message-content a.msg-link{ color: var(--brand-2); }
.eniq-panel.dark-mode .message.bot .message-content .msg-stock{ color: var(--brand-2); }

/* v rozšířeném chatu drž kartu i bublinu na stejné levé hraně */
.eniq-panel.expanded .page-link-prompt{ margin-left: 40px; max-width: min(70%, 520px); }

/* ── Embed režim (/embed v iframe) ─────────────────────────────────
   Chat vyplní celý rám; plovoucí bublina a křížek nemají uvnitř iframe
   smysl — zavření řeší hostitelská stránka. */
.kz-embed #chatLauncher { display: none !important; }
.kz-embed #closeBtn { display: none !important; }
.kz-embed #chatPanel,
.kz-embed #chatPanel.open {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;   /* mobil na šířku (390 px): základní min-height 480 px vytlačil vstup mimo rám */
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

/* ── Živý chat: štítek „Chat" u bubliny a poznámky o předání ───────────── */
/* Klient 15. 9. 2026: z ikony nebylo poznat, že jde o chat. Židlík zůstává
   (je v logu), vedle něj stojí pilulka s nápisem; po otevření panelu zmizí. */
.eniq-launcher .launcher-chat-label{
  display:none; /* štítek „Chat“ zrušen 16. 9. 2026 na přání klienta — pozvánka po 10 s stačí */
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:#fff;color:#1a1a1a;border-radius:999px;padding:7px 14px;
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em;
  box-shadow:0 2px 12px rgba(0,0,0,.18);white-space:nowrap;pointer-events:none;
}
.eniq-launcher .launcher-chat-label::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:#fff;
}
.eniq-launcher[aria-expanded="true"] .launcher-chat-label{display:none}
@media (max-width:480px){.eniq-launcher .launcher-chat-label{font-size:13px;padding:6px 11px}}

.eniq-panel .live-note{
  align-self:center;margin:6px 12px;padding:4px 10px;border-radius:999px;
  font-size:12px;line-height:1.35;text-align:center;color:#555;background:rgba(0,0,0,.05);
}
.eniq-panel.dark .live-note,[data-theme="dark"] .eniq-panel .live-note{color:#bbb;background:rgba(255,255,255,.08)}

/* ── Hodnocení odpovědi zákazníkem (palec nahoru / dolů) ─────────────── */
.rating-row{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--text-soft, #6b7280);
}
.rating-label{ margin-right: 2px; }
.rating-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--line, #e5e7eb);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.rating-btn svg{ width: 13px; height: 13px; display: block; }
.rating-btn:hover{ border-color: rgba(var(--brand-rgb), 0.5); color: var(--brand); }
.rating-btn.on{ background: rgba(var(--brand-rgb), 0.12); border-color: var(--brand); color: var(--brand); }
.rating-row.rated .rating-btn:not(.on){ opacity: .4; }
.eniq-panel.dark-mode .rating-row{ color: var(--text-soft, #9fb0bf); }
.rating-btn.pending{ opacity: .6; cursor: progress; }
.eniq-panel.dark-mode .rating-btn:not(.on):not(:hover){ border-color: rgba(255,255,255,0.18); }