/* === ELEKTROSOS ORIGINAL UI === */

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  background:#000;
  color:#eee;
  min-height:100vh;
  line-height:1.6;
}

header{text-align:center;padding:40px 16px;max-width:960px;margin:auto;}
h1{font-size:34px;margin:0;color:#ff3333;text-shadow:0 0 12px #ff0000;}
p{max-width:700px;margin:16px auto;font-size:18px;color:#ff6666;}

.btn{
  display:inline-block;
  padding:14px 22px;
  margin:8px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  background:#ff3333;
  color:#fff;
  transition:0.3s;
}
.btn:hover{background:#cc0000;}

.chatbox{
  max-width:700px;
  margin:30px auto;
  padding:22px;
  background:#111;
  border-radius:14px;
}

#messages{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:10px;
}

.msg-user{
  align-self:flex-end;
  background:#ff3333;
  padding:12px 16px;
  border-radius:14px;
  max-width:80%;
  color:#fff;
  font-weight:600;
}
.msg-ai{
  align-self:flex-start;
  background:#222;
  padding:12px 16px;
  border-radius:14px;
  max-width:85%;
  color:#ffb3b3;
  white-space:pre-wrap;
}

.chatinput{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.chatinput input{
  flex:1;
  padding:14px;
  border-radius:10px;
  background:#222;
  color:#fff;
  font-size:16px;
  border:1px solid #333;
}
.chatinput button{
  padding:14px 18px;
  border-radius:10px;
  background:#ff3333;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:0.3s;
}
.chatinput button:hover{background:#cc0000;}

footer{
  text-align:center;
  margin-top:40px;
  padding:20px 0;
  font-size:14px;
  color:#777;
}

.quickbtn{
  padding:10px 14px;
  background:#222;
  color:#ff6666;
  border:1px solid #333;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
  transition:0.2s;
}
.quickbtn:hover{background:#333;color:#fff;}

.mini-call{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border-radius:6px;
  background:#33cc33;
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}
.mini-call:hover{background:#2ca32c;}

.technician-card{
  display:flex;align-items:center;margin:10px 0;padding:12px;background:#111;border:1px solid #333;border-radius:10px;color:#fff;font-size:15px;box-shadow:0 0 12px rgba(255,255,255,0.15);
}
.card-tech{display:flex;align-items:center;gap:10px;}
.tech-photo{width:55px;height:55px;border-radius:50%;object-fit:cover;border:2px solid #ff3333;}

/* === FIX CHAT STREAM SCROLL === */
#messages {
  padding-bottom: 80px !important;
  max-height: 72vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

/* === VISIBILITY FIX FOR TECHNICIAN BUTTON === */
.tech-btn {
  background:#222 !important;
  color:#ffcc66 !important;
  border:1px solid #444 !important;
}
.tech-btn:hover {
  background:#333 !important;
  color:#fff !important;
}


/* === GLOBAL FIX FOR SAMSUNG STREAM SCROLL === */
.chatbox {
  display: flex;
  flex-direction: column;
  max-height: 80vh;      /* výška okna */
  overflow-y: auto;
}

/* #messages musí růst uvnitř */
#messages {
  padding-bottom: 80px !important;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}


/* === HARD FIX FOR SAMSUNG CHAT STREAM === */
.chatbox {
  display:flex !important;
  flex-direction:column !important;
  max-height:80vh !important;
  overflow-y:auto !important;
}

#messages {
  padding-bottom: 80px !important;
  flex:1 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scroll-behavior:smooth !important;
}


/* === FINAL CHAT FIX (Samsung + Android + iPhone) === */
#messages {
  padding-bottom: 80px !important;
  max-height: 65vh !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.chatbox {
  display:flex;
  flex-direction:column;
  max-height: 75vh;
}
.msg-ai img{pointer-events:none;}
.msg-ai img { margin-right: 6px; }

/* === FULL MOBILE CHAT HEIGHT FIX === */
.chatbox {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#messages {
  padding-bottom: 80px !important;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 15px;
  scroll-behavior: smooth;
}