\
/* VoteMyLove – Messages (Neon Final) */
/* Scoped Styles: only affect .vml-messages */

.vml-messages{
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

.vml-messages__header h1{
  margin: 0 0 6px;
  font-size: 56px;
  letter-spacing: .5px;
}

.vml-messages__sub{
  opacity: .85;
  font-size: 18px;
}

.vml-messages__alert{
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,10,30,.35);
}

.vml-messages__alert--ok{
  box-shadow: 0 0 0 1px rgba(180,120,255,.18), 0 0 30px rgba(200,120,255,.15);
}

.vml-messages__alert--error{
  box-shadow: 0 0 0 1px rgba(255,120,200,.18), 0 0 30px rgba(255,120,200,.12);
}

.vml-messages__grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
}

@media (max-width: 980px){
  .vml-messages__grid{ grid-template-columns: 1fr; }
  .vml-messages__header h1{ font-size: 42px; }
}

/* Cards */
.vml-card{
  position: relative;
  border-radius: 26px;
  padding: 22px;
  background: rgba(20, 10, 35, .45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(170, 90, 255, .18) inset,
    0 0 28px rgba(180, 90, 255, .18);
}

.vml-card:before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 28px;
  background: linear-gradient(90deg, rgba(255,80,220,.55), rgba(130,120,255,.55));
  filter: blur(14px);
  opacity: .35;
  z-index: -1;
}

.vml-card__title{
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0 18px;
}

/* Form */
.vml-form{ display:block; }

.vml-label{
  display:block;
  margin: 14px 0 8px;
  opacity: .9;
  font-size: 16px;
}

.vml-input, .vml-textarea{
  width: 100%;
  color: rgba(255,255,255,.92);
  background: rgba(30, 15, 55, .55);
  border: 1px solid rgba(255,255,255,.12);
  outline: none;
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

.vml-textarea{
  border-radius: 18px;
  resize: vertical;
  min-height: 150px;
}

.vml-input:focus, .vml-textarea:focus{
  border-color: rgba(255,120,220,.45);
  box-shadow:
    0 0 0 2px rgba(255,120,220,.18),
    0 0 40px rgba(255,80,220,.14);
}

.vml-btn{
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  background: rgba(140, 70, 255, .25);
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 0 50px rgba(255,80,220,.12);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}

.vml-btn:hover{
  background: rgba(160, 80, 255, .32);
  box-shadow: 0 0 60px rgba(255,80,220,.18);
}

.vml-btn:active{ transform: scale(.99); }
.vml-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* User search row */
.vml-usersearch{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(30, 15, 55, .55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

.vml-usersearch:focus-within{
  border-color: rgba(255,120,220,.45);
  box-shadow: 0 0 0 2px rgba(255,120,220,.16), 0 0 45px rgba(255,80,220,.14);
}

.vml-usersearch__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255, 80, 220, .12);
  border: 1px solid rgba(255,255,255,.10);
  opacity: .9;
}

.vml-usersearch .vml-input{
  border: none;
  background: transparent;
  padding: 10px 6px;
  box-shadow: none;
}

.vml-usersearch .vml-input:focus{
  box-shadow:none;
}

.vml-usersearch__meta{
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
  opacity: .9;
}

.vml-dot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(120, 255, 170, .95);
  box-shadow: 0 0 18px rgba(120,255,170,.45);
}

.vml-usersearch__status{
  font-size: 14px;
  opacity: .95;
}

.vml-usersearch__avatar{
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 60% 70%, rgba(255,80,220,.55), rgba(120,120,255,.35));
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 0 25px rgba(255,80,220,.18);
}

/* Inbox */
.vml-chat{
  position: relative;
  min-height: 420px;
  border-radius: 22px;
  background: rgba(20, 10, 35, .22);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px;
  overflow: hidden;
}

.vml-bubble{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.vml-bubble__avatar{
  width: 44px;
  height: 44px;
  border-radius: 99px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 60% 70%, rgba(255,80,220,.55), rgba(120,120,255,.35));
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 0 25px rgba(255,80,220,.18);
  flex: 0 0 auto;
}

.vml-bubble__body{ max-width: 72%; }

.vml-bubble__text{
  display:inline-block;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(160, 80, 255, .22);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 55px rgba(255,80,220,.14);
  font-size: 18px;
}

.vml-bubble__time{
  margin-top: 8px;
  font-size: 14px;
  opacity: .75;
  padding-left: 4px;
}

.vml-empty{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:flex-start;
  opacity: .95;
}

.vml-empty__icon{
  font-size: 22px;
  filter: drop-shadow(0 0 12px rgba(255,80,220,.35));
}

.vml-empty__text{
  font-size: 20px;
  opacity: .9;
  text-shadow: 0 0 22px rgba(255,80,220,.12);
}