@import 'user-public.css';
@import '../components/bmi.css';
@import '../components/report-dialog.css';
@import '../components/a11y-overrides.css';

.profile-message-emoji{width:28px;height:28px;object-fit:contain;vertical-align:-7px;margin:0 2px}
.profile-chat-history .message-content p:has(.profile-message-emoji:only-child) .profile-message-emoji{width:64px;height:64px;vertical-align:middle}

/* Profile quick composer: tools live inside input field */
.message-input-wrap{position:relative}
.quick-message-textarea{padding-bottom:50px!important}
.quick-message-tools-inline{position:absolute;left:12px;bottom:10px;display:flex;align-items:center;gap:4px;z-index:3}
.quick-message-tool{width:34px;height:34px;border:0;background:transparent;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#697386;cursor:pointer;padding:0}
.quick-message-tool:hover{background:var(--color-bg-page,#f6f7f9);color:var(--primary-color)}
.quick-emoji-trigger{font-size:21px}
.quick-message-emoji-popover{position:absolute;left:10px;bottom:48px;z-index:30;width:min(300px,calc(100vw - 60px));display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:8px;border:1px solid var(--color-border,#d8dee8);border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.quick-message-emoji-popover[hidden]{display:none!important}
.quick-message-emoji-popover button{border:0;background:transparent;border-radius:8px;padding:5px;font-size:21px;cursor:pointer}
.quick-message-emoji-popover button:hover{background:var(--color-bg-page,#f6f7f9)}

.profile-avatar{position:relative}
.profile-demo-badge{
  position:absolute;left:-8px;top:-7px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:20px;padding:0 6px;border-radius:6px;
  background:#6f5bd3;color:#fff;border:2px solid #fff;
  font-size:9px;font-weight:800;letter-spacing:.05em;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.14)
}

/* 2026-08-19 profile composer controls aligned like chat mockup */
.quick-message-wrap,.message-input-wrap{position:relative}
.quick-message-textarea{
  min-height:116px!important;
  padding:14px 14px 50px!important;
  border-radius:14px!important;
}
.quick-message-tools-inline{
  position:absolute!important;
  left:12px!important;
  right:auto!important;
  bottom:10px!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  z-index:3;
}
.quick-message-tool{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#667085!important;
}
.quick-message-tool:hover{background:#f5f7fa!important;color:var(--primary-color)!important}
.quick-emoji-trigger{font-size:21px!important;line-height:1!important}
.quick-message-tool i{font-size:15px!important}
.quick-message-form .btn,
#quickMessageForm .btn{
  min-height:40px;
  height:40px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* Full profile composer: controls and Send live inside textarea. */
.message-input-wrap{position:relative!important}
.quick-message-textarea{
  width:100%!important;
  min-height:118px!important;
  padding:14px 124px 50px 14px!important;
  box-sizing:border-box!important;
}
.quick-message-tools-inline{left:10px!important;bottom:8px!important}
.quick-message-send-inside{
  position:absolute!important;
  right:10px!important;
  bottom:8px!important;
  z-index:4!important;
  min-width:106px!important;
  width:auto!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 13px!important;
  border-radius:10px!important;
  font-size:14px!important;
  font-weight:500!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}
@media(max-width:640px){
  .quick-message-textarea{padding-right:108px!important}
  .quick-message-send-inside{min-width:92px!important;padding:0 10px!important}

  /* Start-conversation form has Send below textarea: do not reserve 108px. */
  .profile-start-conversation{
    padding:0!important;
    text-align:left!important;
  }
  .profile-start-conversation .message-form--compact,
  .profile-start-conversation .message-input-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .profile-start-conversation .quick-message-textarea{
    width:100%!important;
    min-height:190px!important;
    max-height:52vh!important;
    padding:14px 14px 56px!important;
    box-sizing:border-box!important;
  }
  .profile-start-conversation .quick-message-tools-inline{
    top:auto!important;
    left:auto!important;
    right:12px!important;
    bottom:10px!important;
    justify-content:flex-end!important;
  }
}

/* Profile polish: gift price, composer alignment and compact mobile metadata. */
.gift-card{
  position:relative;
}
.gift-card__price{
  position:absolute;
  top:4px;
  right:5px;
  z-index:2;
  margin:0;
  font-size:9px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
  opacity:.78;
  pointer-events:none;
}

@media (min-width: 641px){
  .message-form--compact .form-control.quick-message-textarea{
    min-height:156px;
  }
}

.quick-emoji-trigger > span{
  display:block;
  font-size:19px;
  line-height:1;
  transform:translateY(-1px);
}

@media (max-width: 640px){
  .profile-meta-line{
    align-items:flex-start!important;
    width:calc(100% + 76px + .875rem)!important;
    margin-left:calc(-76px - .875rem)!important;
  }
  .profile-meta-line .meta-row{
    width:100%;
    justify-content:flex-start!important;
  }
  .profile-meta-line .meta-item{
    width:auto!important;
    max-width:100%;
    flex:0 1 auto!important;
  }
  .profile-meta-line .meta-item span{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  .profile-sticky-actions{
    justify-content:space-around;
  }
  .profile-sticky-action{
    height:46px;
    background:transparent!important;
    color:var(--profile-text-light)!important;
  }
  .profile-sticky-action span{
    display:none!important;
  }
  .profile-sticky-action i{
    font-size:1.3rem;
  }
  .profile-sticky-action--like.is-liked,
  .profile-sticky-action--like.is-matched{
    color:var(--color-danger)!important;
  }
  .profile-sticky-action--favorite.is-favorite{
    color:var(--color-warning)!important;
  }
  .profile-sticky-action--gift{
    color:var(--color-warning-dark)!important;
  }

  .gift-modal__inner{
    height:min(78dvh, 620px);
    max-height:calc(100dvh - 28px)!important;
  }
  .gift-grid-wrap{
    flex:1 1 auto;
    min-height:0;
    height:auto;
  }
  .gift-grid{
    min-height:0;
    height:100%;
    -webkit-overflow-scrolling:touch;
  }
}


/* Profile emoji popover: keep it inside the composer without overlapping the header. */
#quickMessageForm.is-emoji-open .message-input-wrap {
    min-height: calc(190px + var(--quick-emoji-height, 180px) + 14px) !important;
}

#quickMessageForm.is-emoji-open .quick-message-textarea {
    min-height: calc(190px + var(--quick-emoji-height, 180px) + 14px) !important;
}

#quickMessageForm.is-emoji-open .quick-message-emoji-popover {
    bottom: 60px;
}

@media (max-width: 640px) {
    #quickMessageForm.is-emoji-open .message-input-wrap {
        min-height: calc(170px + var(--quick-emoji-height, 180px) + 12px) !important;
    }

    #quickMessageForm.is-emoji-open .quick-message-textarea {
        min-height: calc(170px + var(--quick-emoji-height, 180px) + 12px) !important;
    }
}


/* Emoji popover v2: keep it fully inside the profile composer. */
#quickMessageForm .quick-message-emoji-popover {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    overflow: hidden;
}

#quickMessageForm .quick-message-emoji-popover:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    gap: 8px;
    align-items: center;
}

#quickMessageForm .quick-message-emoji-popover button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    padding: 0;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

#quickMessageForm.is-emoji-open .message-input-wrap,
#quickMessageForm.is-emoji-open .quick-message-textarea {
    min-height: 390px !important;
}

#quickMessageForm.is-emoji-open .quick-message-emoji-popover {
    top: auto !important;
    bottom: 66px !important;
}

@media (max-width: 640px) {
    #quickMessageForm .quick-message-emoji-popover {
        left: 10px !important;
        right: 10px !important;
    }

    #quickMessageForm .quick-message-emoji-popover:not([hidden]) {
        grid-template-columns: repeat(6, minmax(30px, 1fr));
        gap: 6px;
    }

    #quickMessageForm .quick-message-emoji-popover button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        max-width: 32px;
    }

    #quickMessageForm.is-emoji-open .message-input-wrap,
    #quickMessageForm.is-emoji-open .quick-message-textarea {
        min-height: 360px !important;
    }
}


/* Emoji popover v3: stable overlay, no composer resizing/jumping. */
#quickMessageForm.is-emoji-open .message-input-wrap,
#quickMessageForm.is-emoji-open .quick-message-textarea {
    min-height: 190px !important;
}

#quickMessageForm .quick-message-emoji-popover {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    bottom: 60px !important;

    width: min(320px, calc(100% - 24px)) !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    max-height: none !important;

    box-sizing: border-box;
    overflow: hidden;
    z-index: 20;
}

#quickMessageForm .quick-message-emoji-popover:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(8, 34px) !important;
    justify-content: start !important;
    align-items: center;
    gap: 8px !important;
}

#quickMessageForm .quick-message-emoji-popover button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center;
}

@media (max-width: 640px) {
    #quickMessageForm.is-emoji-open .message-input-wrap,
    #quickMessageForm.is-emoji-open .quick-message-textarea {
        min-height: 170px !important;
    }

    #quickMessageForm .quick-message-emoji-popover {
        left: 10px !important;
        bottom: 58px !important;
        width: min(250px, calc(100% - 20px)) !important;
        max-width: calc(100% - 20px) !important;
    }

    #quickMessageForm .quick-message-emoji-popover:not([hidden]) {
        grid-template-columns: repeat(6, 32px) !important;
        gap: 6px !important;
    }

    #quickMessageForm .quick-message-emoji-popover button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }
}


/* Emoji popover v4: slightly wider, otherwise unchanged. */
#quickMessageForm .quick-message-emoji-popover {
    width: min(360px, calc(100% - 24px)) !important;
}

@media (max-width: 640px) {
    #quickMessageForm .quick-message-emoji-popover {
        width: min(290px, calc(100% - 20px)) !important;
    }
}


/* Profile composer mobile: keep tools, Send and Chat in separate lanes. */
#goToChatBtn .chat-link-label--mobile{display:none}
@media (max-width:640px){
  .profile-message-section #goToChatBtn{
    width:auto!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 10px!important;
    gap:5px!important;
    font-size:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #goToChatBtn .chat-link-label--full{display:none!important}
  #goToChatBtn .chat-link-label--mobile{display:inline!important}

  .profile-message-section .form-control.quick-message-textarea{
    padding:16px 16px 66px!important;
  }
  .profile-message-section .quick-message-tools-inline{
    left:14px!important;
    right:auto!important;
    bottom:14px!important;
    gap:2px!important;
    max-width:116px!important;
  }
  .profile-message-section .quick-message-tool{
    width:32px!important;
    min-width:32px!important;
    height:36px!important;
    min-height:36px!important;
  }
  .profile-message-section .quick-message-send-inside{
    left:auto!important;
    right:14px!important;
    bottom:12px!important;
    width:auto!important;
    min-width:112px!important;
    max-width:132px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 12px!important;
    white-space:nowrap!important;
  }
}