/* Wrapper = responsivní, ale drží se ve viewportu */
.tc-wrap{
  width:100%;
  max-width:100%;
  margin:0;
  border:1px solid #e6e6e6;
  border-radius:8px;
  background:#fff;

  display:flex;
  flex-direction:column;

  /* pevný “rám” v rámci stránky -> zprávy se scrollují uvnitř */
  height: calc(100vh - 10px);
  min-height: 620px; /* aby to nebylo moc nízké na desktopu */
}

/* Header: title uprostřed */
.tc-header{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px;
  border-bottom:1px solid #eee;
}

.tc-title{
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:700;
  letter-spacing:.6px;
  color:#9aa3ad;
  text-align:center;
}

/* Messages: tady je hlavní scroller */
.tc-messages{
  flex:1 1 auto;
  overflow:auto;
  padding:12px;
  min-height: 180px;
}

.tc-row{display:flex;gap:12px;padding:12px 6px}
.tc-avatar{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.tc-body{flex:1}
.tc-meta{color:#b3bcc6;font-size:14px;margin-bottom:4px}
.tc-textmsg{font-size:20px;line-height:1.25;white-space:pre-wrap;word-break:break-word}

/* Pager */
.tc-pager{
  flex:0 0 auto;
  padding:8px 16px;
  color:#aab3bd;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  border-top:1px solid #f2f2f2;
}

.tc-pagebtn{
  width:22px;
  height:22px;
  border-radius:4px;
  border:1px solid #e5e5e5;
  background:#ffffff !important;
  cursor:pointer;
  color:#e5e5e5;
  font-weight:700;
  font-size:12px;
  line-height:20px;
  padding:0;
}

.tc-pagebtn.is-active{
  background:#ffffff;
  border-color:#004487 !important;
  color:#004487 !important;
}

/* Form */
.tc-form{
  flex:0 0 auto;
  border-top:1px solid #eee;
  padding:14px 16px 18px;
}

.tc-rowinputs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

/* Nick + pass stejně jako textarea */
.tc-nick,
.tc-pass{
  width:170px;
  padding:12px;
  border:1px solid #e5e5e5 !important;
  border-radius:4px  !important;
  background:#ffffff !important;
  font-size:16px;
  font-family: inherit;
  box-sizing:border-box;
}

.tc-text{
  width:100%;
  min-height:120px;
  resize:vertical;
  padding:12px;
  border:1px solid #e5e5e5;
  border-radius:4px;
  background:#fff;
  font-size:16px;
  font-family: inherit;
  box-sizing:border-box;
}

/* Barvy */
.tc-colors{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:12px 0 8px;
}
.tc-color{
  width:20px !important;
  height:20px !important;
  border-radius:3px !important;
  border:1px solid #ddd !important;
  cursor:pointer;
  padding:0 !important;
}
.tc-color.is-active{outline:2px solid #333}

/* ODESLAT */
.tc-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

.tc-send{
  padding:10px 16px;
  border:1px solid #bfc7cf;
  border-radius:4px;
  background:#ffffff !important;
  cursor:pointer;
  font-weight:700;
  color:#bfc7cf !important;
}

.tc-send:hover{
  background:#bfc7cf !important;
  border-color:#ffffff;
  color:#ffffff !important;
}

/* Mobil: ať to sedí na výšku */
@media (max-width: 520px){

  .tc-wrap{
    height: auto !important;   /* zruší pevnou výšku */
    min-height: 420px;         /* rozumná mobilní výška */
    border-radius:0;
  }

  .tc-messages{
    max-height: 300px;         /* kolik prostoru mají zprávy */
  }

  .tc-textmsg{
    font-size:12px;            /* menší text zpráv */
  }

  .tc-avatar{
    width:40px;
    height:40px;
    font-size:14px;
  }

  /* Nick + heslo vedle sebe */
  .tc-rowinputs{
    flex-wrap: nowrap !important;
    gap:4px !important;
  }

  /* Přezdívka (max 3 znaky) – úzká */
  .tc-nick{
    width:80px !important;
    padding:10px !important;
  }

  /* Heslo – zabere zbytek řádku */
  .tc-pass{
    flex:1 1 auto !important;
    width:80px !important;
    padding:10px !important;
  }

  .tc-nick::placeholder{
    font-size:12px;
  }

  .tc-pass::placeholder{
    font-size:12px;
  }

  .tc-text::placeholder{
    font-size:12px;
  }

  .tc-textmsg{
    font-size:12px;
  }


}