/* =========================================================================
   Konsultant - czat premium
   Uklad: naglowek z wizytowka -> watek -> kompozytor z zaufaniem
   ========================================================================= */

:root{
  --kk-bg:#e8ecf1;
  --kk-panel:#ffffff;
  --kk-ink:#0f172a;
  --kk-ink-soft:#64748b;
  --kk-ink-faint:#94a3b8;
  --kk-line:#e6ebf1;
  --kk-agent:#f1f5f9;
  --kk-user:#1d4ed8;
  --kk-user-ink:#ffffff;
  --kk-accent:#1d4ed8;
  --kk-accent-soft:#eff4ff;
  --kk-online:#16a34a;
  --kk-away:#f59e0b;
  --kk-offline:#94a3b8;
  --kk-radius:16px;
  --kk-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --kk-shadow-app:0 24px 70px rgba(15,23,42,.14);
  --kk-shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --kk-shadow-md:0 4px 14px rgba(15,23,42,.07);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--kk-font);
  background:
    radial-gradient(1100px 520px at 12% -8%, #f2f6fc 0%, transparent 62%),
    radial-gradient(900px 480px at 92% 108%, #eaf0f8 0%, transparent 60%),
    var(--kk-bg);
  color:var(--kk-ink);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ------------------------------------------------------------------ rama */
.kk-app{
  display:flex;
  flex-direction:column;
  height:100dvh;
  max-width:820px;
  margin:0 auto;
  background:var(--kk-panel);
  box-shadow:var(--kk-shadow-app);
}

/* --------------------------------------------------------------- naglowek */
.kk-header{
  flex:0 0 auto;
  background:linear-gradient(168deg,#ffffff 0%,#fbfcfe 100%);
  border-bottom:1px solid var(--kk-line);
}

.kk-header-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 20px 12px;
}

/* --- awatar z pierscieniem --- */
.kk-avatar{
  position:relative;
  flex:0 0 auto;
  width:52px;
  height:52px;
}
.kk-avatar-ring{
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(145deg,#334155,#0f172a);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  letter-spacing:.5px;
  box-shadow:
    0 0 0 2px var(--kk-panel),
    0 0 0 3.5px #e2e8f0,
    var(--kk-shadow-sm);
}
.kk-avatar-ring img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.kk-presence{
  position:absolute;
  right:0;
  bottom:1px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--kk-online);
  box-shadow:0 0 0 2.5px var(--kk-panel);
  animation:kk-pulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
.kk-avatar-away .kk-presence{background:var(--kk-away);animation:none}
.kk-avatar-offline .kk-presence{background:var(--kk-offline);animation:none}

@keyframes kk-pulse{
  0%{box-shadow:0 0 0 2.5px var(--kk-panel),0 0 0 0 rgba(22,163,74,.5)}
  70%{box-shadow:0 0 0 2.5px var(--kk-panel),0 0 0 8px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 2.5px var(--kk-panel),0 0 0 0 rgba(22,163,74,0)}
}

/* --- nazwa, rola, status --- */
.kk-header-text{flex:1 1 auto;min-width:0;overflow:hidden}

.kk-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.kk-name{
  font-size:16px;
  font-weight:650;
  letter-spacing:-.012em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kk-role-chip{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.035em;
  text-transform:uppercase;
  color:#3b5bdb;
  background:var(--kk-accent-soft);
  border:1px solid #dbe6ff;
  padding:2.5px 8px;
  border-radius:999px;
  white-space:nowrap;
}

.kk-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--kk-ink-soft);
  margin-top:3px;
}
.kk-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--kk-online);
  flex:0 0 7px;
  box-shadow:0 0 0 3px rgba(22,163,74,.14);
}
.kk-status-away .kk-dot{background:var(--kk-away);box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.kk-status-offline .kk-dot{background:var(--kk-offline);box-shadow:0 0 0 3px rgba(148,163,184,.14)}

.kk-close{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--kk-ink-faint);
  cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.kk-close:hover{background:#f1f5f9;color:var(--kk-ink)}
.kk-close:focus-visible{outline:2px solid var(--kk-accent);outline-offset:2px}

/* --- pasek z opisem konsultanta --- */
.kk-bio-bar{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:0 20px 13px;
}
.kk-bio{
  flex:1 1 auto;
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--kk-ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.kk-bio-bar.kk-bio-open .kk-bio{
  -webkit-line-clamp:unset;
  display:block;
}
.kk-bio-toggle{
  flex:0 0 auto;
  border:0;
  background:transparent;
  padding:0;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  color:var(--kk-accent);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:#c7d7fe;
  text-underline-offset:2px;
}
.kk-bio-toggle:hover{text-decoration-color:var(--kk-accent)}
.kk-bio-toggle-less{display:none}
.kk-bio-bar.kk-bio-open .kk-bio-toggle-more{display:none}
.kk-bio-bar.kk-bio-open .kk-bio-toggle-less{display:inline}

/* ---------------------------------------------------------------- watek */
.kk-thread{
  flex:1 1 auto;
  overflow-y:auto;
  padding:22px 20px 8px;
  display:flex;
  flex-direction:column;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
.kk-thread::-webkit-scrollbar{width:10px}
.kk-thread::-webkit-scrollbar-track{background:transparent}
.kk-thread::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:10px;
  border:3px solid var(--kk-panel);
}
.kk-thread::-webkit-scrollbar-thumb:hover{background:#b4c0d0}

.kk-day{
  align-self:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--kk-ink-faint);
  background:#f1f5f9;
  padding:5px 14px;
  border-radius:999px;
  margin-bottom:14px;
}

/* --- wiersz wiadomosci --- */
.kk-row{
  display:flex;
  gap:10px;
  max-width:78%;
  margin-top:14px;
  animation:kk-in .26s cubic-bezier(.22,.61,.36,1);
}
.kk-row:first-child{margin-top:0}
.kk-row-agent{align-self:flex-start}
.kk-row-user{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.kk-msg-avatar{
  flex:0 0 30px;
  width:30px;
  height:30px;
  margin-top:20px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(145deg,#334155,#0f172a);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  box-shadow:var(--kk-shadow-sm);
}
.kk-msg-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.kk-msg-body{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}
.kk-row-user .kk-msg-body{align-items:flex-end}

.kk-bubble{
  padding:11px 15px;
  border-radius:var(--kk-radius);
  font-size:15px;
  line-height:1.55;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.kk-row-agent .kk-bubble{
  background:var(--kk-agent);
  color:var(--kk-ink);
  border-bottom-left-radius:5px;
}
.kk-row-user .kk-bubble{
  background:linear-gradient(160deg,#2563eb,#1d4ed8);
  color:var(--kk-user-ink);
  border-bottom-right-radius:5px;
  box-shadow:0 2px 10px rgba(29,78,216,.24);
}

.kk-time{
  font-size:11px;
  color:var(--kk-ink-faint);
  margin:5px 6px 0;
}

@keyframes kk-in{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

/* --- wskaznik pisania --- */
.kk-typing{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:2px 20px 12px;
  max-width:78%;
}
.kk-typing[hidden]{display:none}
.kk-typing-avatar{
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(145deg,#334155,#0f172a);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
}
.kk-typing-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.kk-typing-bubble{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--kk-agent);
  padding:13px 16px;
  border-radius:var(--kk-radius);
  border-bottom-left-radius:5px;
}
.kk-typing-bubble span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#94a3b8;
  animation:kk-typing-bounce 1.3s infinite ease-in-out;
}
.kk-typing-bubble span:nth-child(2){animation-delay:.17s}
.kk-typing-bubble span:nth-child(3){animation-delay:.34s}
@keyframes kk-typing-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-4px);opacity:1}
}

/* ------------------------------------------------------------ kompozytor */
.kk-composer{
  flex:0 0 auto;
  padding:12px 20px 16px;
  border-top:1px solid var(--kk-line);
  background:linear-gradient(180deg,#fbfcfe,#ffffff);
}

.kk-composer-box{
  display:flex;
  align-items:flex-end;
  gap:10px;
  background:#f8fafc;
  border:1.5px solid #e2e8f0;
  border-radius:22px;
  padding:5px 5px 5px 8px;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.kk-composer-box:focus-within{
  background:#fff;
  border-color:#bfd2fb;
  box-shadow:0 0 0 4px rgba(29,78,216,.09);
}

.kk-composer textarea{
  flex:1 1 auto;
  /* textarea ma domyslne min-width z atrybutu cols - bez tego wypycha
     przycisk wysylania poza ekran na waskich wyswietlaczach */
  min-width:0;
  width:100%;
  resize:none;
  border:0;
  background:transparent;
  padding:10px 8px;
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
  min-height:42px;
  max-height:140px;
  color:var(--kk-ink);
  outline:none;
}
.kk-composer textarea::placeholder{color:var(--kk-ink-faint)}

.kk-composer button{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:linear-gradient(160deg,#2563eb,#1d4ed8);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(29,78,216,.28);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}
.kk-composer button:hover{box-shadow:0 4px 14px rgba(29,78,216,.34)}
.kk-composer button:active{transform:scale(.93)}
.kk-composer button:disabled{
  opacity:.4;
  cursor:default;
  transform:none;
  box-shadow:none;
}
.kk-composer button:focus-visible{outline:2px solid var(--kk-accent);outline-offset:2px}

.kk-footnote{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:11px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--kk-ink-faint);
  text-align:center;
}
.kk-footnote svg{flex:0 0 auto;opacity:.75}

/* ==================================================================
   Zdjecia przesylane przez klienta
   ================================================================== */

/* Miniatury czekajace na wyslanie */
.kk-attach-tray{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding:0 20px 11px;
}
.kk-attach-tray[hidden]{display:none}

.kk-attach-item{
  position:relative;
  width:66px;
  height:66px;
  border-radius:12px;
  overflow:hidden;
  border:1.5px solid #dbe3ee;
  background:#f8fafc;
  box-shadow:var(--kk-shadow-sm);
  animation:kk-in .2s ease;
}
.kk-attach-item img{width:100%;height:100%;object-fit:cover;display:block}

.kk-attach-remove{
  position:absolute;
  top:3px;
  right:3px;
  width:19px;
  height:19px;
  border:0;
  border-radius:50%;
  background:rgba(15,23,42,.78);
  color:#fff;
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.kk-attach-remove:hover{background:#b91c1c}

.kk-attach-progress{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
}

/* Zdjecie w bance wiadomosci */
.kk-bubble-file{
  margin:-4px -8px -2px;
  border-radius:14px;
  overflow:hidden;
  background:#0f172a;
  line-height:0;
}
.kk-bubble-file img{
  display:block;
  width:100%;
  max-width:290px;
  height:auto;
  cursor:zoom-in;
  transition:transform .2s ease;
}
.kk-bubble-file img:hover{transform:scale(1.015)}

.kk-msg-file-caption{
  font-size:12px;
  opacity:.85;
  margin-top:6px;
}

/* Podglad na pelnym ekranie */
.kk-lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(8,12,22,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  cursor:zoom-out;
  animation:kk-fade .18s ease;
}
.kk-lightbox img{
  max-width:100%;
  max-height:100%;
  border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.kk-lightbox-close{
  position:absolute;
  top:18px;
  right:20px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.kk-lightbox-close:hover{background:rgba(255,255,255,.26)}

@keyframes kk-fade{from{opacity:0}to{opacity:1}}

/* Przycisk spinacza */
.kk-composer button.kk-composer-attach{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#64748b;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.kk-composer button.kk-composer-attach:hover{
  background:#eef2f9;
  color:#1d4ed8;
  box-shadow:none;
}
.kk-composer button.kk-composer-attach:active{transform:none}
.kk-composer button.kk-composer-attach:focus-visible{outline:2px solid var(--kk-accent);outline-offset:2px}
.kk-composer button.kk-composer-attach[hidden]{display:none}

/* Podswietlenie kompozytora przy przeciaganiu pliku */
.kk-app.kk-dragging .kk-composer-box{
  border-color:var(--kk-accent);
  background:#eff5ff;
  box-shadow:0 0 0 4px rgba(29,78,216,.12);
}

@media (max-width:560px){
  .kk-bubble-file img{max-width:210px}
  .kk-attach-tray{padding:0 15px 10px}
}

/* --------------------------------------------------------------- ekrany */
@media (max-width:640px){
  .kk-app{max-width:none;box-shadow:none}
  .kk-header-inner{padding:12px 15px 10px;gap:12px}
  .kk-avatar{width:46px;height:46px}
  .kk-name{font-size:15.5px}
  .kk-role-chip{display:none}
  .kk-bio-bar{padding:0 15px 12px}
  .kk-thread{padding:18px 15px 6px}
  .kk-row{max-width:86%}
  .kk-msg-avatar{display:none}
  .kk-typing{padding-left:15px}
  .kk-composer{padding:10px 15px 14px}
}

@media (prefers-reduced-motion:reduce){
  .kk-row,.kk-presence,.kk-typing-bubble span{animation:none}
}