:root{
  --mm-accent:#dfff00;
  --mm-panel:#11171b;
  --mm-panel-soft:#0b1013;
  --mm-line:#29343c;
  --mm-muted:#8e9aa2;
}

.mm-chat-page{
  padding-top:30px;
  padding-bottom:36px;
}

.mm-chat-shell{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  height:calc(100vh - 150px);
  min-height:690px;
  overflow:hidden;
  border:1px solid var(--mm-line);
  border-radius:20px;
  background:#090e11;
  box-shadow:0 24px 54px rgba(0,0,0,.24);
}

.mm-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-bottom:1px solid var(--mm-line);
  background:linear-gradient(180deg,#11181c,#0e1417);
}

.mm-chat-person{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.mm-chat-back{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid #334049;
  border-radius:11px;
  background:#0b1013;
}

.mm-chat-back:hover{
  border-color:var(--mm-accent);
}

.mm-chat-back svg,
.mm-chat-context-link svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#d9e0e3;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mm-chat-avatar,
.mm-message-avatar{
  display:grid;
  place-items:center;
  border:1px solid rgba(223,255,0,.25);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%,rgba(223,255,0,.17),transparent 38%),
    #182126;
  color:var(--mm-accent);
  font-weight:900;
}

.mm-chat-avatar{
  width:48px;
  height:48px;
  flex:0 0 48px;
  font-size:18px;
}

.mm-chat-person h1{
  overflow:hidden;
  margin:2px 0 3px;
  color:#fff;
  font-size:20px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mm-chat-person small{
  display:flex;
  align-items:center;
  gap:6px;
  color:#7f8b92;
  font-size:10px;
}

.mm-chat-person small i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#80d83a;
  box-shadow:0 0 0 4px rgba(128,216,58,.08);
}

.mm-chat-header-actions{
  display:flex;
  gap:8px;
}

.mm-chat-context{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 38px;
  align-items:center;
  gap:14px;
  margin:14px 18px 0;
  padding:10px;
  border:1px solid #2c373e;
  border-radius:15px;
  background:
    radial-gradient(circle at 85% 15%,rgba(223,255,0,.055),transparent 28%),
    #0d1316;
}

.mm-chat-context-photo{
  display:block;
  width:78px;
  height:62px;
  overflow:hidden;
  border-radius:10px;
  background:#080d0f;
}

.mm-chat-context-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mm-chat-context-photo>span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  background:rgba(223,255,0,.04);
}

.mm-chat-context-photo svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:var(--mm-accent);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mm-chat-context-copy{
  min-width:0;
}

.mm-chat-context-copy h2{
  overflow:hidden;
  margin:4px 0 6px;
  font-size:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mm-chat-context-copy h2 a{
  color:#f3f6f7;
}

.mm-chat-context-copy>div{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 13px;
}

.mm-chat-context-copy strong{
  color:var(--mm-accent);
  font-size:15px;
}

.mm-chat-context-copy div span{
  color:#7f8b92;
  font-size:10px;
}

.mm-chat-context-link{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #344049;
  border-radius:11px;
  background:#0a0f12;
}

.mm-chat-thread{
  overflow-y:auto;
  padding:20px 20px 10px;
  scroll-behavior:smooth;
}

.mm-chat-safety{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:fit-content;
  max-width:620px;
  margin:0 auto 22px;
  padding:9px 12px;
  border:1px solid #29343b;
  border-radius:999px;
  background:#0d1316;
}

.mm-chat-safety span{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:7px;
  background:rgba(223,255,0,.06);
}

.mm-chat-safety svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:var(--mm-accent);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mm-chat-safety p{
  margin:0;
  color:#718087;
  font-size:9px;
}

.mm-chat-date{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
}

.mm-chat-date::before,
.mm-chat-date::after{
  content:"";
  height:1px;
  flex:1;
  background:#212b31;
}

.mm-chat-date span{
  color:#68757c;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.mm-chat-message{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin:8px 0;
}

.mm-chat-message.is-mine{
  justify-content:flex-end;
}

.mm-message-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  font-size:11px;
}

.mm-message-bubble{
  max-width:min(72%,640px);
  padding:11px 13px 7px;
  border:1px solid #303b42;
  border-radius:16px 16px 16px 5px;
  background:#141c20;
}

.is-mine .mm-message-bubble{
  border-color:rgba(223,255,0,.34);
  border-radius:16px 16px 5px 16px;
  background:
    linear-gradient(180deg,rgba(223,255,0,.11),rgba(223,255,0,.06)),
    #141a16;
}

.mm-message-bubble p{
  margin:0;
  color:#e9edef;
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.mm-message-bubble footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  margin-top:5px;
}

.mm-message-bubble time{
  color:#68757c;
  font-size:8px;
}

.mm-message-bubble footer span{
  display:grid;
  place-items:center;
}

.mm-message-bubble footer svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:#76838a;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mm-message-bubble footer span.is-read svg{
  stroke:var(--mm-accent);
}

.mm-chat-empty{
  display:grid;
  place-items:center;
  min-height:260px;
  text-align:center;
}

.mm-chat-empty>span{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  margin-bottom:16px;
  border:1px solid rgba(223,255,0,.2);
  border-radius:20px;
  background:rgba(223,255,0,.05);
}

.mm-chat-empty svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:var(--mm-accent);
  stroke-width:1.7;
}

.mm-chat-empty strong{
  color:#fff;
  font-size:20px;
}

.mm-chat-empty p{
  max-width:390px;
  margin:7px 0 0;
  color:#78858c;
  font-size:11px;
  line-height:1.6;
}

.mm-chat-error{
  margin:0 18px 10px;
}

.mm-chat-composer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:10px;
  padding:13px 16px;
  border-top:1px solid var(--mm-line);
  background:rgba(14,20,23,.96);
  backdrop-filter:blur(12px);
}

.mm-chat-input-wrap{
  position:relative;
  min-width:0;
}

.mm-chat-input-wrap textarea{
  display:block;
  width:100%;
  min-height:48px;
  max-height:150px;
  resize:none;
  overflow-y:auto;
  padding:13px 82px 13px 14px;
  border:1px solid #344049;
  border-radius:14px;
  outline:0;
  background:#090e11;
  color:#f2f5f6;
  font:inherit;
  font-size:13px;
  line-height:1.5;
}

.mm-chat-input-wrap textarea:focus{
  border-color:var(--mm-accent);
  box-shadow:0 0 0 3px rgba(223,255,0,.075);
}

.mm-chat-input-wrap textarea::placeholder{
  color:#68757c;
}

.mm-chat-input-wrap>span{
  position:absolute;
  right:12px;
  bottom:10px;
  color:#5f6c73;
  font-size:8px;
}

.mm-chat-send{
  min-height:48px;
  gap:8px;
  justify-content:center;
}

.mm-chat-send svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:#080b0d;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
}

@media(max-width:820px){
  .mm-chat-page{
    padding-top:14px;
  }

  .mm-chat-shell{
    height:calc(100vh - 115px);
    min-height:620px;
    border-radius:16px;
  }

  .mm-chat-header-actions .ghost{
    display:none;
  }

  .mm-message-bubble{
    max-width:84%;
  }
}

@media(max-width:580px){
  .mm-chat-page{
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
  }

  .mm-chat-shell{
    height:calc(100vh - 92px);
    border-right:0;
    border-left:0;
    border-radius:0;
  }

  .mm-chat-header{
    padding:12px;
  }

  .mm-chat-avatar{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .mm-chat-person .eyebrow{
    display:none;
  }

  .mm-chat-person h1{
    font-size:17px;
  }

  .mm-chat-header-actions .button{
    padding:9px 10px;
    font-size:10px;
  }

  .mm-chat-context{
    grid-template-columns:64px minmax(0,1fr) 34px;
    margin:10px 10px 0;
  }

  .mm-chat-context-photo{
    width:64px;
    height:54px;
  }

  .mm-chat-thread{
    padding:16px 10px 8px;
  }

  .mm-chat-safety{
    align-items:flex-start;
    border-radius:12px;
  }

  .mm-chat-message{
    gap:6px;
  }

  .mm-message-avatar{
    width:26px;
    height:26px;
    flex-basis:26px;
  }

  .mm-message-bubble{
    max-width:88%;
  }

  .mm-chat-composer{
    padding:10px;
  }

  .mm-chat-send span{
    display:none;
  }

  .mm-chat-send{
    width:48px;
    padding:0;
  }
}


/* MotoMarket chat V2 — avatar, listing photo and visible composer fixes */
.mm-chat-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.mm-chat-shell{
  height:calc(100dvh - 215px);
  min-height:540px;
  max-height:780px;
  grid-template-rows:auto auto minmax(0,1fr) auto;
}

.mm-chat-thread{
  min-height:0;
  overflow-y:auto;
}

.mm-chat-composer{
  position:relative;
  z-index:20;
  flex-shrink:0;
  min-height:74px;
}

.mm-chat-context-photo img{
  display:block;
}

@media(max-width:820px){
  .mm-chat-shell{
    height:calc(100dvh - 150px);
    min-height:560px;
    max-height:none;
  }
}

@media(max-width:580px){
  .mm-chat-shell{
    height:calc(100dvh - 88px);
    min-height:520px;
  }

  .mm-chat-composer{
    position:sticky;
    bottom:0;
  }
}


/* Final composer visibility safeguard */
@media(max-height:760px) and (min-width:581px){
  .mm-chat-shell{
    height:calc(100dvh - 188px);
    min-height:500px;
  }

  .mm-chat-context{
    margin-top:8px;
    padding:8px;
  }

  .mm-chat-thread{
    padding-top:12px;
  }
}

@media(max-width:580px){
  .mm-chat-shell{
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }

  .mm-chat-composer{
    position:relative;
    bottom:auto;
  }
}