*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Arial,sans-serif;color:#111b21;background:#d8dbd5}
body{overflow:hidden}
.hidden{display:none!important}

.auth{height:100vh;height:100dvh;display:grid;place-items:center;background:#075e54}
.auth-card{width:min(410px,92vw);background:#fff;border-radius:14px;padding:30px;box-shadow:0 15px 45px #0004}
.brand{font-size:48px;text-align:center}
.auth h1{text-align:center;margin:8px}
.auth p{text-align:center;color:#667781}
.tabs{display:flex;border-bottom:1px solid #ddd;margin:20px 0}
.tabs button{flex:1;border:0;background:transparent;padding:12px;font-weight:bold}
.tabs .active{color:#075e54;border-bottom:3px solid #25d366}
.auth input{width:100%;padding:13px;margin:7px 0;border:1px solid #d1d7db;border-radius:8px}
.auth form button{width:100%;padding:13px;border:0;border-radius:8px;background:#128c7e;color:#fff;font-weight:bold;margin-top:8px}
.authError{color:#c0392b}

.app{height:100vh;height:100dvh;display:flex;max-width:1500px;margin:auto;background:#fff}
.sidebar{width:410px;min-width:0;border-right:1px solid #ddd;display:flex;flex-direction:column;background:#fff}
.topbar,.conversation-head{height:60px;min-height:60px;background:#f0f2f5;display:flex;align-items:center;justify-content:space-between;padding:8px 15px}
.me,.contact{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:42px;height:42px;min-width:42px;border-radius:50%;display:grid;place-items:center;background:#cfd8dc;color:#fff;font-weight:bold}
.topbar button,.conversation-head button,.composer button{border:0;background:transparent;font-size:22px;cursor:pointer;border-radius:50%;width:38px;height:38px;min-width:38px}
.search{margin:9px 12px;background:#f0f2f5;border-radius:8px;height:40px;min-height:40px;display:flex;align-items:center;padding:0 12px}
.search input{border:0;outline:0;background:transparent;flex:1;margin-left:8px;min-width:0}
.chatList{overflow:auto;flex:1}
.results{background:#fff;overflow:auto;max-height:240px}
.user-result{padding:10px 14px;cursor:pointer;border-bottom:1px solid #eee}
.chat{padding:11px 14px;border-bottom:1px solid #f0f2f5;display:flex;gap:12px;cursor:pointer}
.chat:hover,.chat.selected{background:#f0f2f5}
.chatbody{flex:1;min-width:0}
.row{display:flex;justify-content:space-between;gap:8px}
.row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row small{flex-shrink:0;color:#667781}
.preview{color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;margin-top:4px}

.conversation{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:#efeae2}
.contact{overflow:hidden}
.contact>div:last-child{min-width:0}
.contact strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact small{display:block;color:#667781;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.messages{flex:1;min-height:0;overflow:auto;padding:20px 7%;background-color:#efeae2;background-image:radial-gradient(#d8d0c5 1px,transparent 1px);background-size:20px 20px}
.empty{text-align:center;color:#667781;margin-top:25vh}
.msg{max-width:70%;padding:7px 9px;margin:5px 0;clear:both;border-radius:8px;box-shadow:0 1px 1px #0002;line-height:1.35;overflow-wrap:anywhere}
.msg.in{float:left;background:#fff;border-top-left-radius:2px}
.msg.out{float:right;background:#d9fdd3;border-top-right-radius:2px}
.meta{font-size:10px;color:#667781;float:right;margin-left:10px;padding-top:5px}
.msg img{max-width:300px;border-radius:7px;display:block}
.filelink{display:block;color:#075e54;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis}
.composer{min-height:62px;padding:10px;background:#f0f2f5;display:flex;gap:6px;align-items:center}
.composer #message{flex:1;min-width:0;border:0;border-radius:9px;padding:12px;outline:0;font-size:15px}
.send{background:#25d366!important;color:#fff}
.typing{font-size:12px;color:#128c7e;margin:5px 0}
#toast{position:fixed;z-index:9999;bottom:80px;left:50%;transform:translateX(-50%);background:#323232;color:#fff;padding:10px 15px;border-radius:8px;display:none;max-width:90vw;text-align:center}

@media(max-width:800px){
  .app{width:100%;height:100vh;height:100dvh}
  .sidebar{width:100%;height:100%;border-right:0}
  .conversation{display:none;width:100%;height:100%}
  .app.chat-open .sidebar{display:none}
  .app.chat-open .conversation{display:flex}
  .messages{padding:14px 3.5%}
  .msg{max-width:88%;font-size:15px}
  .conversation-head{padding:8px 10px}
  .composer{padding:8px 6px;min-height:58px}
  .composer button{width:36px;min-width:36px}
  .composer #message{padding:11px;font-size:16px}
}

@media(max-width:420px){
  .topbar,.conversation-head{height:56px;min-height:56px}
  .avatar{width:40px;height:40px;min-width:40px}
  .search{margin:7px 9px}
  .chat{padding:10px}
  .messages{padding:10px 2.5%}
  .msg{max-width:92%}
}

/* Ajuste dos botoes do topo */
.topbar>div:last-child{display:flex;align-items:center;gap:2px}.topbar button{display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:18px}.topbar #settingsBtn{font-size:14px;width:auto;min-width:62px;border-radius:8px;padding:0 8px}@media(max-width:420px){.topbar #settingsBtn{min-width:54px;font-size:13px;padding:0 6px}.topbar button{height:36px;min-width:36px}.topbar{padding:7px 9px}}

.gear-icon{width:17px;height:17px;border:3px dotted currentColor;border-radius:50%;display:block;position:relative}.gear-icon:after{content:'';position:absolute;width:5px;height:5px;border:2px solid currentColor;border-radius:50%;left:3px;top:3px}

/* Ajuste responsivo geral para celulares */
@media(max-width:800px){html,body{width:100%;height:100%;overflow:hidden}.app{width:100%;max-width:none}.sidebar,.conversation{width:100%;min-width:0}.topbar,.conversation-head{padding-left:8px;padding-right:8px}.topbar>div:last-child{gap:0}.me{gap:7px}.me b{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search{width:calc(100% - 18px)}.messages{padding-left:8px;padding-right:8px}.msg{max-width:85%;word-break:break-word}.msg img{max-width:100%;height:auto}.composer{width:100%;gap:4px;padding:7px 5px}.composer #message{min-width:0;width:100%}.composer button{flex:0 0 38px}.conversation-head .contact{max-width:calc(100% - 48px)}.contact b,.contact small{max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:360px){.avatar{width:36px;height:36px;min-width:36px}.topbar,.conversation-head{height:52px;min-height:52px}.topbar button{width:34px;min-width:34px}.topbar #settingsBtn{min-width:34px;width:34px;padding:0}.search{height:38px;min-height:38px}.composer button{width:34px;min-width:34px}.composer #message{font-size:15px;padding:10px}.msg{max-width:90%;font-size:14px}}
.audioplayer{display:block;width:280px;max-width:100%;height:38px;margin:2px 0 4px}.msg audio{vertical-align:middle}
@media (max-width: 800px){
  *{box-sizing:border-box}
  html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
  body{font-size:16px}
  .app{width:100vw;height:100dvh;max-width:none;border-radius:0}
  .sidebar,.conversation{width:100%;height:100%;min-width:0}
  .topbar{height:58px;min-height:58px;padding:8px 10px}
  .topbar button{width:42px;height:42px;min-width:42px}
  .search{height:44px;margin:8px 10px}
  .chat{padding:12px 10px;min-height:68px}
  .avatar{width:46px;height:46px;min-width:46px}
  .conversation-head{height:58px;min-height:58px;padding:7px 8px}
  .messages{padding:12px 8px 10px}
  .msg{max-width:88%;padding:8px 10px;font-size:15px;margin:4px 0}
  .msg img{max-width:75vw}
  .composer{min-height:58px;padding:7px 6px;gap:4px}
  .composer #message{min-width:0;height:44px;font-size:16px;padding:10px 12px}
  .composer button{width:42px;height:42px;min-width:42px;font-size:20px}
  .audioplayer{width:240px;max-width:75vw}
}
@media (max-width:420px){
  .topbar{height:54px;min-height:54px;padding:6px}
  .topbar button{width:38px;height:38px;min-width:38px}
  .me b{max-width:35vw}
  .search{height:42px;margin:7px 8px}
  .chat{min-height:64px;padding:10px 8px}
  .avatar{width:42px;height:42px;min-width:42px}
  .messages{padding:10px 6px}
  .msg{max-width:91%;font-size:15px}
  .composer{min-height:56px;padding:6px 4px}
  .composer #message{height:42px}
  .composer button{width:38px;min-width:38px;height:38px}
}
@media (max-width:360px){
  .topbar{height:50px;min-height:50px}
  .search{height:38px;margin:5px 6px}
  .chat{padding:8px 6px}
  .avatar{width:38px;height:38px;min-width:38px}
  .messages{padding:8px 4px}
  .msg{max-width:94%;font-size:14px}
  .composer #message{font-size:15px}
}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none;touch-action:pan-x pan-y;position:fixed;inset:0}
body{min-height:100dvh;max-height:100dvh}
.app{width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
@media (max-width:800px){
  .app.chat-open .conversation{
    display:flex;
    flex-direction:column;
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
  }

  .conversation-head{
    flex:0 0 58px;
  }

  .messages{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .composer{
    flex:0 0 auto;
    position:relative;
    bottom:auto;
    width:100%;
    min-height:56px;
  }
}
@media (max-width:800px){
  .composer{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 6px;
    width:100%;
  }

  .composer #message{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    border-radius:22px;
    padding:10px 14px;
  }

  .composer button{
    flex:0 0 42px;
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}
@media (max-width:800px){
  .msg{
    border-radius:18px;
    padding:9px 12px;
    margin:4px 2px;
    line-height:1.4;
    word-break:break-word;
    overflow-wrap:anywhere;
  }

  .msg.out{
    border-bottom-right-radius:5px;
  }

  .msg.in{
    border-bottom-left-radius:5px;
  }

  .msg .meta{
    margin-left:7px;
    white-space:nowrap;
    font-size:11px;
  }
}
@media (max-width:800px){
  #auth{
    width:100%;
    min-height:100dvh;
    padding:20px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #auth .card,
  #auth form{
    width:100%;
    max-width:420px;
  }

  #auth input{
    width:100%;
    min-height:48px;
    font-size:16px;
    padding:12px 14px;
    box-sizing:border-box;
  }

  #auth button{
    width:100%;
    min-height:48px;
    font-size:16px;
  }
}
@media (max-width:800px){
  #auth{
    padding:24px 18px;
  }

  #auth h1{
    font-size:28px;
    line-height:1.2;
    margin-bottom:10px;
    text-align:center;
  }

  #auth p{
    font-size:15px;
    line-height:1.4;
    text-align:center;
    margin:8px 0 18px;
  }

  #auth .card{
    padding:22px 18px;
    border-radius:18px;
    box-sizing:border-box;
  }

  #auth label{
    display:block;
    font-size:14px;
    margin:12px 0 6px;
  }

  #auth input{
    border-radius:12px;
  }

  #auth button{
    border-radius:12px;
    margin-top:8px;
    font-weight:600;
  }
}
@media (max-width:800px){
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  .topbar .me{
    min-width:0;
    flex:1 1 auto;
  }

  .topbar .me b{
    font-size:16px;
  }

  .chat{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:68px;
    padding:11px 10px;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .chat .chat-info{
    min-width:0;
    flex:1 1 auto;
  }

  .chat .chat-info b,
  .chat .chat-info small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .conversation-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 9px;
  }

  .conversation-head .contact{
    min-width:0;
    flex:1 1 auto;
  }

  .conversation-head .contact b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
@media (max-width:800px){
  .app{
    width:100vw;
    height:100dvh;
    max-width:none;
    border-radius:0;
    overflow:hidden;
  }

  .sidebar,
  .conversation{
    width:100%;
    min-width:0;
    height:100dvh;
  }

  .topbar{
    height:60px;
    min-height:60px;
    padding:8px 12px;
  }

  .topbar button{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:50%;
  }

  .search{
    margin:8px 10px;
    height:44px;
    border-radius:22px;
  }

  .chat{
    min-height:72px;
    padding:12px 12px;
  }

  .conversation-head{
    height:60px;
    min-height:60px;
    padding:8px 10px;
  }

  .messages{
    padding:12px 8px;
  }

  .msg{
    max-width:88%;
    border-radius:18px;
    padding:9px 12px;
    margin:4px 2px;
  }

  .composer{
    min-height:60px;
    padding:8px 6px;
    gap:6px;
  }

  .composer #message{
    height:44px;
    border-radius:22px;
    font-size:16px;
  }

  .composer button{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
  }
}

.settings-screen{
  position:fixed;
  inset:0;
  z-index:1000;
  background:#f7f8fa;
  display:flex;
  flex-direction:column;
  overflow:auto;
}

.settings-head{
  height:60px;
  min-height:60px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.settings-head button{
  width:42px;
  height:42px;
  min-width:42px;
  border:0;
  border-radius:50%;
  background:transparent;
  font-size:25px;
  cursor:pointer;
}

.settings-head h2{
  margin:0;
  font-size:20px;
}

.settings-profile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.settings-avatar{
  width:88px;
  height:88px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:700;
  background:#ddd;
  margin-bottom:12px;
}

.settings-profile h3{
  margin:0;
  font-size:21px;
}

.settings-profile p{
  margin:5px 0 0;
  color:#777;
  font-size:14px;
}

.settings-section{
  margin:14px 10px;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.settings-section button{
  width:100%;
  min-height:68px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:#fff;
  text-align:left;
  cursor:pointer;
}

.settings-section button:last-child{
  border-bottom:0;
}

.settings-section button>span{
  width:38px;
  text-align:center;
  font-size:22px;
}

.settings-section button div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.settings-section button b{
  font-size:16px;
}

.settings-section button small{
  color:#777;
  font-size:13px;
}

@media(max-width:800px){
  .settings-screen{
    width:100vw;
    height:100dvh;
  }

  .settings-head{
    height:58px;
    min-height:58px;
    padding:7px 9px;
  }

  .settings-head button{
    width:42px;
    height:42px;
    min-width:42px;
  }

  .settings-profile{
    padding:30px 16px;
  }

  .settings-avatar{
    width:92px;
    height:92px;
  }

  .settings-section{
    margin:12px 8px;
    border-radius:16px;
  }

  .settings-section button{
    min-height:70px;
    padding:12px 14px;
  }
}