.my-consultations,
#customerConsultations,
.consultation-card,
.consultation-head,
.consultation-messages{
  width:100%;
  max-width:100%;
  min-width:0;
}

#member{
  padding-top:8px;
}

.my-consultations{
  position:relative;
  overflow:visible;
  margin-top:8px;
  padding:12px;
  border:1px solid rgba(228,232,240,.9);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
}

.my-consultations .section-heading{
  margin-bottom:10px;
}

#customerConsultations{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.consultation-card{
  overflow:visible;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.consultation-card+.consultation-card{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.consultation-head{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.consultation-card-tags{
  order:-1;
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-direction:row;
  gap:8px;
}

.consultation-card .consultation-handler,
.consultation-outside-head .consultation-handler{
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
}

.consultation-card .consultation-status,
.consultation-outside-head .consultation-status{
  font-size:13px;
}

.consultation-product-summary{
  width:100%;
  max-width:100%;
  min-width:0;
  display:grid;
  align-content:start;
  align-items:start;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border:0;
  border-radius:10px;
  background:#f5f6f9;
  color:inherit;
  text-align:left;
}

.consultation-product-summary div{
  min-width:0;
}

.consultation-product-summary i,
.consultation-message-product>i{
  color:#8a92a2;
  font-size:22px;
  font-style:normal;
}

.consultation-messages{
  box-sizing:border-box;
  max-height:340px;
  max-height:min(44dvh,420px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  display:grid;
  grid-auto-flow:row;
  grid-auto-rows:max-content;
  align-content:start;
  align-items:start;
  gap:8px;
  margin-top:10px;
  padding:0 2px;
  scrollbar-gutter:auto;
  scrollbar-width:none;
}
.consultation-messages::-webkit-scrollbar{display:none}

.consultation-message{
  box-sizing:border-box;
  width:fit-content;
  max-width:min(76%,320px);
  padding:9px 12px;
  border:1px solid #dfe4ec;
  border-radius:13px 13px 13px 4px;
  background:#f1f4f8;
  box-shadow:0 2px 6px rgba(41,49,78,.06);
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:break-word;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  justify-self:end;
  align-self:start;
  border-radius:13px 13px 4px 13px;
  font-size:16px;
  line-height:1.5;
}

.consultation-message.staff{
  justify-self:start;
  border-color:#ffd2d8;
  border-radius:13px 13px 13px 4px;
  background:#fff0f2;
  color:#71313a;
}

/* Two-sided conversation identity and breathing room. */
.consultation-message-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:calc(100% - 8px);
  min-width:0;
  margin:2px 4px;
}
.consultation-message-row.customer{justify-self:end;margin-left:auto;justify-content:flex-end;flex-direction:row-reverse;align-items:center}
.consultation-message-row.staff{justify-self:start;margin-right:auto;justify-content:flex-start;flex-direction:row;align-items:center}
.consultation-message-row .consultation-message{max-width:100%;margin:0}
.consultation-sender{display:flex;flex:0 0 auto;align-items:center;gap:6px;min-height:26px;margin:0;color:#5f6c81;font-size:13px;font-weight:800;line-height:1;white-space:nowrap}
.consultation-sender{color:#68758a}

.consultation-message small{
  display:none;
  margin-top:5px;
}

.consultation-message.meta-visible small{
  display:block;
}

.consultation-message-text+.consultation-message-product{
  margin-top:7px;
}

.consultation-message-product{
  width:min(340px,calc(100vw - 28px));
  min-width:0;
  height:60px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 12px;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid #e6e9ef;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  text-align:left;
}

.consultation-message-product img,
.consultation-message-product .no-photo{
  width:48px;
  height:48px;
  border-radius:7px;
  object-fit:cover;
  background:#edf0f4;
}

.consultation-message-product span,
.consultation-message-product b,
.consultation-message-product em{
  display:block;
  min-width:0;
}
.consultation-message-product>img,.consultation-message-product>.no-photo{grid-column:1;grid-row:1/3}
.consultation-message-product>b{grid-column:2/3;grid-row:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:end;text-align:left}
.consultation-message-product-price{grid-column:2;grid-row:2;display:flex!important;align-items:baseline;gap:5px;width:100%;min-width:0;white-space:nowrap;text-align:left}
.consultation-message-product-price em{width:auto!important;margin-top:3px;flex:0 0 auto}
.consultation-message-product-spec{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#748095;font-size:12px;font-weight:400;line-height:1.15}
.consultation-message-product>i{grid-column:3;grid-row:1/3}

.consultation-message-product b{
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.consultation-message-product em{
  margin-top:3px;
  color:var(--coral);
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

#member.view.active .consultation-card form{
  position:fixed;
  z-index:9;
  left:50%;
  bottom:0;
  width:min(760px,calc(100vw - 28px));
  max-width:760px;
  min-width:0;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  margin:0;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:rgba(255,255,255,.97);
  box-shadow:0 -5px 18px rgba(31,43,72,.12);
  transform:translateX(-50%);
  backdrop-filter:blur(10px);
}

#member.view.active:has(.consultation-reply){
  --consultation-composer-height:calc(58px + env(safe-area-inset-bottom));
  height:calc(100dvh - 66px);
  max-height:calc(100dvh - 66px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:8px;
  padding-top:8px;
  padding-bottom:calc(var(--consultation-composer-height) + 8px);
  overflow:hidden;
}

body:has(#member.active .consultation-reply){
  overflow:hidden;
}

main:has(#member.active .consultation-reply){
  height:calc(100dvh - 66px);
  padding-bottom:0;
  overflow:hidden;
}

#member.view.active:has(.consultation-reply) .my-consultations{
  min-height:0;
  display:flex;
  flex-direction:column;
  margin-top:0;
}

#member.view.active:has(.consultation-reply) #customerConsultations,
#member.view.active:has(.consultation-reply) .consultation-card{
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#member.view.active:has(.consultation-reply) .consultation-outside-head{
  position:absolute;
  z-index:2;
  top:0;
  left:12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-height:18px;
  padding:0 6px;
  border:0;
  border-radius:0;
  background:#fff;
  transform:translateY(calc(-50% + 8px));
}

#member.view.active:has(.consultation-reply) .consultation-outside-head .consultation-handler{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--navy);
  line-height:18px;
  letter-spacing:.02em;
}

#member.view.active:has(.consultation-reply) .consultation-outside-head .consultation-handler::before{
  content:none;
}

#member.view.active:has(.consultation-reply) .consultation-outside-head .consultation-status{
  padding:0;
  border:0;
  background:transparent;
  font-size:12px;
  line-height:18px;
}

/* The customer sees only the conversation state; staff nicknames stay inside messages. */
#member.view.active:has(.consultation-reply) .consultation-outside-head{
  transform:translateY(calc(-50% + 10px));
}
#member.view.active:has(.consultation-reply) .consultation-outside-head .consultation-status{
  color:var(--navy);
  font-size:13px;
  font-weight:800;
}
#member.view.active:has(.consultation-welcome) .consultation-outside-head{
  position:absolute;
  z-index:2;
  top:0;
  left:12px;
  display:flex;
  align-items:center;
  min-height:18px;
  padding:0 6px;
  border:0;
  border-radius:0;
  background:#fff;
  transform:translateY(calc(-50% + 12px));
}
#member.view.active:has(.consultation-welcome) .consultation-outside-head .consultation-status{
  padding:0;
  border:0;
  background:transparent;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
  line-height:18px;
}
.consultation-welcome{display:grid;min-height:96px;align-content:start;padding:20px 0 8px}
.consultation-welcome-message{max-width:min(88%,360px);margin:0}

#member.view.active:has(.consultation-reply) .consultation-messages{
  min-height:0;
  max-height:none;
  flex:1;
}

#member.view.active .consultation-card form input{
  width:auto;
  min-width:0;
  max-width:none;
}

#member.view.active .consultation-card form button{
  margin:0;
}

#member.view.active .consultation-card form .consultation-image-button,
#member.view.active .consultation-card form .consultation-voice-button{
  min-width:46px;
  padding:8px 9px;
  border:1px solid #dfe4ec;
  background:#f5f7fa;
  color:#536078;
}

#member.view.active .consultation-card form .consultation-voice-button.recording{
  min-width:72px;
  border-color:#ff8b95;
  background:#fff0f2;
  color:#c94756;
}

#member.view.active .consultation-card form .consultation-voice-button:disabled{
  opacity:.45;
}

#member.view.active .consultation-card form .consultation-send-button{
  min-width:58px;
  background:var(--navy);
  color:#fff;
}

.consultation-chat-image{
  display:block;
  max-width:190px;
  padding:0;
  border:0;
  border-radius:9px;
  overflow:hidden;
  background:transparent;
}

.consultation-chat-image img{
  display:block;
  width:auto;
  max-width:190px;
  max-height:220px;
  object-fit:contain;
}

.consultation-chat-audio{
  display:block;
  width:min(230px,62vw);
  height:34px;
}

.consultation-audio-duration{
  display:block;
  margin-top:3px;
  color:#7b8496;
  font-size:10px;
}

@media(max-width:420px){
  .my-consultations{
    padding:10px;
    border-radius:12px;
  }

  .consultation-card{
    padding:0;
  }

  #member.view.active:has(.consultation-reply) .consultation-outside-head{
    left:9px;
    padding:0 5px;
  }

  #member.view.active:has(.consultation-welcome) .consultation-outside-head{
    left:9px;
    padding:0 5px;
  }

  .consultation-message{
    max-width:84%;
    padding:7px 9px;
  }

  .consultation-message.staff{
    justify-self:start;
  }

  .consultation-message small{
    font-size:9px;
  }

  .consultation-message-product{
    width:min(250px,72vw);
  }

  #member.view.active .consultation-card form{
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:5px;
    width:100%;
    max-width:none;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-right:0;
    border-left:0;
    border-radius:0;
  }

  #member.view.active .consultation-card form .consultation-image-button,
  #member.view.active .consultation-card form .consultation-voice-button{
    min-width:40px;
    padding:7px 6px;
    font-size:11px;
  }

  #member.view.active .consultation-card form .consultation-send-button{
    min-width:48px;
    padding:7px 6px;
  }
}

@media(max-width:720px){
  .consultation-message-row.customer{margin-right:0}
  .consultation-message-row.staff{margin-left:0}
  #member.view.active:has(.consultation-reply){
    --consultation-composer-height:calc(55px + env(safe-area-inset-bottom));
    height:calc(100dvh - 48px);
    max-height:calc(100dvh - 48px);
  }

  main:has(#member.active .consultation-reply){
    height:calc(100dvh - 48px);
  }

  .consultation-message{
    padding:6px 9px;
    line-height:1.35;
  }

}