*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  font-family:Arial,sans-serif;
  color:#fff;
  background:linear-gradient(180deg,#d8fbff 0%,#7fe8ff 20%,#2f6fa8 55%,#071120 100%);
}

/* ===== MAIN LAYOUT ===== */

.app{
  height:100dvh;
  display:grid;
  grid-template-columns:320px 1fr;
}

aside{
  display:flex;
  flex-direction:column;
  min-height:0;

  background:
    linear-gradient(180deg,
      rgba(190,250,255,.95) 0%,
      rgba(120,225,255,.90) 30%,
      rgba(70,180,235,.88) 70%,
      rgba(35,120,190,.92) 100%);

  border-right:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    inset 0 1px rgba(255,255,255,.85),
    0 20px 60px rgba(0,60,120,.18);
}

.top{
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.top b{
  font-size:24px;
  color:#fff;
  font-weight:900;
  text-shadow:0 2px 8px rgba(0,50,90,.35);
}

.top div{
  display:flex;
  gap:8px;
}

.top button{
  width:56px;
  height:56px;
  border:none;
  border-radius:18px;
  font-size:28px;
  color:#fff;
  cursor:pointer;

  background:linear-gradient(135deg,#8fefff,#2f6df6);

  box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    0 10px 24px rgba(0,40,100,.18);
}

#chats{
  flex:1;
  overflow:auto;
  padding:10px;
}

.chat{
  padding:16px;
  margin-bottom:10px;
  border-radius:24px;
  cursor:pointer;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.45);

  color:#fff;
  font-size:17px;
  font-weight:600;

  text-shadow:0 1px 4px rgba(0,40,80,.25);
}

.chat.active{
  background:linear-gradient(
    135deg,
    rgba(110,245,255,.55),
    rgba(60,145,255,.45)
  );
}

.profile{
  margin:12px;
  padding:14px;
  border-radius:24px;

  display:flex;
  align-items:center;
  gap:12px;

  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.45);

  color:#fff;
}

.profile img{
  width:46px;
  height:46px;
  border-radius:50%;
}

/* ===== CHAT ===== */

main{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100dvh;
}

header{
  height:64px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;

  background:rgba(8,20,35,.72);
  border-bottom:1px solid rgba(255,255,255,.18);

  backdrop-filter:blur(16px);
}

header b{
  flex:1;
  font-size:20px;
}

#msgs{
  flex:1;
  overflow:auto;
  padding:20px;
  padding-bottom:120px;
}

.msg{
  display:flex;
  margin-bottom:16px;
}

.msg.user{
  justify-content:flex-end;
}

.bubble{
  max-width:78%;
  padding:14px 16px;
  border-radius:24px;
  line-height:1.5;

  border:1px solid rgba(255,255,255,.18);
}

.user .bubble{
  background:linear-gradient(135deg,#74ddff,#3478f6);
}

.assistant .bubble{
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
}

/* ===== MESSAGE BUTTONS ===== */

.msgActions{
  display:flex !important;
  gap:8px;
  margin-top:8px;
  margin-left:8px;
  opacity:1 !important;
  visibility:visible !important;
}

.msgActions button{
  width:34px !important;
  height:30px !important;
  min-width:34px !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:10px;

  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.30) !important;

  color:#fff !important;
  font-size:14px !important;
  cursor:pointer;
}

.msgActions button.active{
  background:rgba(100,220,255,.45) !important;
}

/* ===== MOBILE ===== */

@media(max-width:800px){

  .app{
    grid-template-columns:1fr;
  }

  aside{
    position:fixed;
    inset:0 18% 0 0;
    z-index:100;
  }

  .bubble{
    max-width:92%;
  }
}

/* HARD REPAIR MENU/CLICKS */
.hidden{display:none!important}

@media(max-width:800px){
  aside{
    position:fixed!important;
    z-index:1000!important;
    inset:0 18% 0 0!important;
    transform:translateX(-110%)!important;
    transition:.25s!important;
    pointer-events:auto!important;
  }

  body.open aside{
    transform:translateX(0)!important;
  }

  body.open:after{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(0,0,0,.35)!important;
    z-index:999!important;
    pointer-events:none!important;
  }

  main, header, #msgs, #composerWrap{
    pointer-events:auto!important;
  }
}

#chats{
  display:block!important;
  flex:1!important;
  overflow:auto!important;
  min-height:0!important;
  padding:10px!important;
}

.chat{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  color:white!important;
}

.profile{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

button,.chat,.profile,.clipBtn,.sendBtn{
  pointer-events:auto!important;
}

aside{
  background:linear-gradient(180deg,rgba(110,220,255,.94),rgba(30,120,190,.96))!important;
  color:white!important;
}

.chat{
  background:rgba(255,255,255,.24)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:22px!important;
  padding:14px!important;
  margin:8px 0!important;
}

.profile{
  background:rgba(255,255,255,.26)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:24px!important;
  margin:12px!important;
  padding:14px!important;
}

#composerWrap{
  z-index:50!important;
}

body.open #composerWrap{
  display:none!important;
}