:root{
  --c-brand:#2b0d90;
  --c-brandh:red;
  --c-gray:#999;
  --c-mgray:#ccc;
  --c-lgray:#eee;
  --c-green:#00bd00;
  --c-white:#fff;
  --br:9px;
}
.clear{clear:both}
body {
  background:var(--c-white);
  color: var(--c-gray);
  padding:1vh;
  text-align: center;
  width: 50%;
  margin: 0 auto;
  font-family: "Lexend", monospace;
  font-optical-sizing: auto;
  font-style: normal;
}

p{padding:0;margin:0}

input,
button {
  font-size: 1rem;
  padding: 10px 15px;
  border: 0px solid #000;
  border-radius:var(--br);
  font-family: "Lexend", monospace;
  box-sizing:border-box;
}

h1{
  font-size:3em;
  color:var(--c-brand);
}

.rv-chat-header {
  margin: 0 0 40px 0;
}

button {
  background: var(--c-brand);
  color:var(--c-white);
  cursor: pointer;
}
button:hover {
  background: var(--c-brandh);
}

#rv-send {
  border: none;
}

#rv-input {
  border: 1px solid var(--c-gray);
  width:100%;
}

.rv-input-row {
  width: 100%;
  /* display: flex; */
  text-align: center;
  margin: 40px 0 0 0;
}

.rv-input-row-inputs {
  width: 100%;
  margin: 0 auto;
  display:block;
}

.rv-msg {
  clear: both;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius:var(--br);
  line-height: 1.68;
  word-wrap: break-word;
  font-size: 1rem;
  text-align: justify;
  width:auto;
  max-width:61.8%;
}

.rv-user {
  background: #ffd59a;
  color: #111;
  float: right;
  text-align: right;
  /* border-bottom-right-radius: 0px; */
}

.rv-assistant {
  background:var(--c-lgray);
  color: #000;
  float: left;
  text-align: left;
  /* border-bottom-left-radius: 0px; */
}

/* odstavce v rámci jedné bubliny */
.rv-msg p+p {
  margin-top: 10px;
}

.rv-loading {
  opacity: 0.6;
  font-style: italic;
}

#rv-sound-toggle.rv-sound-on {
  background:var(--c-green);
}

#rv-sound-toggle.rv-sound-off {
  background: var(--c-mgray);
}

/* Status bar dole */
#status{width:100%;}

#rv-status-bar {
  margin-top: 20px;
  height: 30px;
  line-height: 16px;
  font-size: 13px;
  color: var(--c-gray);
  text-align: left;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
  width:100%;
  float:left;
  clear:both;
  margin-left: auto;
  margin-right: auto;
}

/* Per-bublina debug (v místě původního reproduktoru) */
.rv-tts-debug {
  font-size: 11px;
  color: var(--c-gray);
  margin-top: 4px;
  font-style: italic;
}

#info {
  font-size: 10px;
  color: var(--c-gray);
  line-height: 12px;
  margin: 20px 0;
}

#info p{margin:10px 0}

#info a{color: var(--c-gray);}
#info a:hover{color: var(--c-brand);}

.half {
  width: 50%;
  padding: 0;
  margin: 0;
  height: 50px
}

.box {
  box-sizing: border-box
}

.tleft {
  text-align: left
}

.tright {
  text-align: right
}

.fleft {
  float: left
}

.ovladace {
  width: 100%;
  margin: 20px 0 0 0;
}

/* ------------------- MOBILNÍ VERZE ------------------- */
@media (max-width: 768px) {
  body {
   width: 100%;
   padding: 2vh 10vw;
   margin: 0;
   text-align: left;
   box-sizing: border-box;
   overflow: auto; /* nebo overflow-y:auto; */
  }

  .rv-chat-header {
    margin-bottom: 24px;
    text-align: center;
  }

  .rv-messages {
    padding: 0 4px;
  }

#rv-chat {
    padding-bottom: calc(var(--rv-input-height, 120px) + 40px);
    box-sizing: border-box;
  }

  .rv-msg {
    font-size: 1rem;
    margin-bottom: 0.9rem;
    max-width: 100%;
  }

  .rv-user {
    margin-left: 15%;
  }

  .rv-assistant {
    margin-right: 15%;
  }

  /* .rv-input-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2vh 10vw;
    background: #fff;
    border-top: 1px solid var(--c-lgray);
    z-index: 1000;
    box-sizing: border-box;
  } */

  .rv-input-row-inputs {
    width: 100%;
    margin: 0;
    /* display: flex;
    gap: 8px; */
  }

  #rv-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    font-size: 16px;
  }

  #rv-send {
    font-size: 16px;
  }

  #rv-sound-toggle {}

  input,
  button {
    border-radius:var(--br);
    font-size: 16px; /* zabrání zoomu na iOS */
  }

  .rv-tts {
    font-size: 0.85rem;
  }
  #rv-status-bar{text-align: center}
  
 
  
  #rv-input {
    font-size: 16px; /* iOS zoom fix */
  }
}