/* Кабинет: тёмная тема, первым делом телефон. Владелец заходит
   в основном с телефона, поэтому всё считается от узкого экрана. */
:root{
  --fon:#14181f; --karta:#1c222c; --ramka:#2a3341;
  --tekst:#e8ecf2; --tiho:#8b96a6; --zelenyy:#3fb268; --krasnyy:#d1584d;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--fon); color:var(--tekst);
  font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--zelenyy); text-decoration:none}

/* верхние вкладки, на телефоне прокручиваются вбок */
.vkladki{
  display:flex; gap:4px; padding:8px 10px; overflow-x:auto;
  background:var(--karta); border-bottom:1px solid var(--ramka);
  position:sticky; top:0; z-index:5; scrollbar-width:none;
}
.vkladki::-webkit-scrollbar{display:none}
.vkladki a{
  padding:9px 14px; border-radius:11px; white-space:nowrap;
  color:var(--tiho); font-size:16px;
}
.vkladki a.est{background:var(--zelenyy); color:#0d1116; font-weight:600}
.vkladki .vyhod{margin-left:auto; color:var(--tiho)}

main{flex:1; display:flex; flex-direction:column; min-height:0}

/* вход */
.vhod,.skoro{max-width:420px; margin:0 auto; padding:40px 20px; width:100%}
.vhod h1,.skoro h1{font-size:27px; margin:0 0 6px}
.tiho{color:var(--tiho); font-size:15px}
.oshibka{color:var(--krasnyy); font-size:15px; margin:10px 0}
.vhod form{display:flex; flex-direction:column; gap:12px; margin-top:18px}
input,textarea,button{font:inherit}
input{
  padding:14px 16px; border-radius:13px; border:1px solid var(--ramka);
  background:var(--karta); color:var(--tekst); width:100%;
}
input:focus,textarea:focus{outline:none; border-color:var(--zelenyy)}
button{
  padding:14px 16px; border-radius:13px; border:0; cursor:pointer;
  background:var(--zelenyy); color:#0d1116; font-weight:600;
}
button:disabled{opacity:.5; cursor:default}

/* лента разговора */
.chat{
  flex:1; overflow-y:auto; padding:16px 14px 8px;
  display:flex; flex-direction:column; gap:10px;
}
.pusto{color:var(--tiho); text-align:center; margin:auto; max-width:320px}
.pusto h1{color:var(--tekst); font-size:25px; margin:0 0 8px}
.rech{
  max-width:86%; padding:11px 15px; border-radius:17px;
  white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere;
}
.rech.moya{align-self:flex-end; background:var(--zelenyy); color:#0d1116;
  border-bottom-right-radius:5px}
.rech.ee{align-self:flex-start; background:var(--karta); border:1px solid var(--ramka);
  border-bottom-left-radius:5px}

/* строка ввода */
.polosa{
  display:flex; gap:9px; padding:10px 12px;
  border-top:1px solid var(--ramka); background:var(--karta);
}
.polosa textarea{
  flex:1; resize:none; padding:12px 15px; border-radius:15px;
  border:1px solid var(--ramka); background:var(--fon); color:var(--tekst);
  max-height:160px; overflow-y:auto;
}
.polosa button{flex:0 0 52px; border-radius:15px; font-size:19px; padding:0}
.schet{
  margin:0; padding:5px 14px 9px; color:var(--tiho); font-size:13px;
  background:var(--karta); text-align:right;
}

@media(min-width:760px){
  .chat{padding:22px 24px 10px}
  .rech{max-width:640px}
  .polosa{padding:12px 24px}
  .schet{padding:5px 24px 10px}
}