/* Chat poradce — sdílený vzhled pro celostránkový režim i bublinu v rohu.
   Vzhled vychází z mandimu.cz: krémová #F5EEE7, mátová #CDE3E1, text #212326. */

:root{
  --krem:#F5EEE7; --matova:#CDE3E1; --ink:#212326; --seda:#6B6F73;
  --linka:#E4DCD3; --bila:#fff; --moje:#DCEEF0;
}

/* ── vlákno zpráv ─────────────────────────────────────────────────────── */
.vlakno{
  display:flex; flex-direction:column; gap:10px;
  padding:18px 16px; overflow-y:auto; flex:1; min-height:0;
  scroll-behavior:smooth;
}
.zprava{display:flex; max-width:100%}
.zprava.ja{justify-content:flex-end}
.bublina{
  padding:10px 14px; font-size:14.5px; line-height:1.5; max-width:84%;
  position:relative; word-wrap:break-word;
}
.ja .bublina{
  background:var(--moje); color:var(--ink);
  border-radius:16px 16px 4px 16px;
}
.bot .bublina{
  background:var(--krem); color:var(--ink);
  border-radius:16px 16px 16px 4px;
}
.cas{
  font-size:10.5px; color:var(--seda); opacity:.75;
  margin-top:4px; text-align:right;
}
.bot .cas{text-align:left}

/* ── „píše…" ──────────────────────────────────────────────────────────── */
.pise{display:flex; gap:4px; padding:4px 2px; align-items:center}
.pise i{
  width:7px; height:7px; border-radius:50%; background:var(--seda);
  display:block; opacity:.45; animation:tep 1.25s infinite;
}
.pise i:nth-child(2){animation-delay:.18s}
.pise i:nth-child(3){animation-delay:.36s}
@keyframes tep{
  0%,60%,100%{transform:translateY(0); opacity:.35}
  30%{transform:translateY(-4px); opacity:.9}
}
.premysli{
  font-size:12px; color:var(--seda); font-style:italic; margin-left:6px;
}

/* ── kompaktní produkty v bublině ─────────────────────────────────────── */
.produkty{display:flex; flex-direction:column; gap:7px; margin-top:11px}
.polozka{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  background:var(--bila); border:1px solid var(--linka); border-radius:11px;
  padding:8px 10px; color:var(--ink); transition:border-color .15s;
}
.polozka:hover{border-color:var(--ink)}
.polozka img{
  width:44px; height:44px; border-radius:8px; object-fit:cover;
  background:var(--krem); flex-shrink:0;
}
.polozka .txt{flex:1; min-width:0}
.polozka .nazev{
  font-size:13px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.polozka .proc{
  font-size:11px; color:var(--seda); line-height:1.35; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.polozka .cena{
  font-size:13.5px; font-weight:700; white-space:nowrap; align-self:center;
}
.polozka .sip{color:var(--seda); font-size:15px; flex-shrink:0}

/* ── zápatí s polem ───────────────────────────────────────────────────── */
.zadani{
  border-top:1px solid var(--linka); padding:11px 13px; background:var(--bila);
  display:flex; gap:8px; align-items:flex-end; flex-shrink:0;
}
.zadani textarea{
  flex:1; border:1.5px solid var(--linka); border-radius:20px;
  padding:10px 15px; font:inherit; font-size:14.5px; resize:none;
  max-height:104px; line-height:1.45; color:var(--ink); background:var(--bila);
  font-family:inherit;
}
.zadani textarea:focus{outline:none; border-color:var(--ink)}
.zadani button{
  width:40px; height:40px; border-radius:50%; border:none; background:#000;
  color:#fff; cursor:pointer; flex-shrink:0; font-size:16px; line-height:1;
  display:grid; place-items:center;
}
.zadani button:hover{background:#2e2e2e}
.zadani button:disabled{opacity:.35; cursor:default}

.rychle{
  display:flex; gap:6px; flex-wrap:wrap; padding:0 13px 11px;
  flex-shrink:0;
}
.rychle button{
  background:var(--krem); border:1px solid var(--linka); border-radius:16px;
  padding:6px 12px; font:inherit; font-size:12.5px; color:var(--ink);
  cursor:pointer;
}
.rychle button:hover{border-color:var(--ink)}

/* ── hlavička chatu ───────────────────────────────────────────────────── */
.chat-hlava{
  display:flex; align-items:center; gap:10px; padding:12px 15px;
  background:var(--krem); border-bottom:1px solid var(--linka); flex-shrink:0;
}
.chat-hlava .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--matova);
  display:grid; place-items:center; font-size:15px; flex-shrink:0;
}
.chat-hlava .kdo{flex:1; min-width:0}
.chat-hlava .kdo b{font-size:14.5px; display:block; line-height:1.25}
.chat-hlava button{
  background:none; border:none; color:var(--seda); font-size:19px;
  cursor:pointer; line-height:1; padding:2px 4px;
}
.chat-hlava button:hover{color:var(--ink)}

/* ── režim: bublina v rohu ────────────────────────────────────────────── */
.widget{
  position:fixed; right:22px; bottom:22px; z-index:999;
  width:390px; max-width:calc(100vw - 32px);
  height:min(620px, calc(100vh - 120px));
  background:var(--bila); border:1px solid var(--linka); border-radius:18px;
  box-shadow:0 18px 48px -12px rgba(33,35,38,.32);
  display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right;
  animation:vyjed .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes vyjed{
  from{opacity:0; transform:translateY(14px) scale(.97)}
  to{opacity:1; transform:none}
}
.widget[hidden]{display:none}
.spustec{
  position:fixed; right:22px; bottom:22px; z-index:998;
  display:flex; align-items:center; gap:10px;
  background:#000; color:#fff; border:none; border-radius:28px;
  padding:13px 20px 13px 16px; font:inherit; font-size:14.5px; font-weight:600;
  cursor:pointer; box-shadow:0 10px 28px -8px rgba(33,35,38,.45);
}
.spustec:hover{background:#2e2e2e}
.spustec .ikona{font-size:17px}
.spustec[hidden]{display:none}

/* ── režim: celá stránka ──────────────────────────────────────────────── */
.plocha{
  display:flex; flex-direction:column;
  height:calc(100vh - var(--hlava, 74px));
  max-width:760px; margin:0 auto; width:100%;
  border-left:1px solid var(--linka); border-right:1px solid var(--linka);
}
.plocha .vlakno{padding:22px 20px}
.plocha .bublina{font-size:15.5px; max-width:78%}

@media(max-width:640px){
  .widget{right:0; bottom:0; width:100vw; height:100dvh; border-radius:0}
  .plocha{border:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
}