/* Conversation surfaces: the thread stays clear; secondary actions live in dialogs. */
.page-messages .messenger {
  grid-template-columns: 300px minmax(0, 1fr);
  height: clamp(460px, calc(100dvh - 210px), 780px);
}
.page-messages .conversation-list {
  padding: 8px;
}
.page-messages .conversation-list > h2 {
  padding: 10px 12px 16px;
  margin: 0;
  font-size: 15px;
}
.page-messages .conversation {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  border: 0;
  border-radius: 12px;
}
.page-messages .conversation.current {
  border: 0;
  background: #edf3ec;
}
.page-messages .conversation .avatar {
  display: inline-flex;
  width: 40px;
  height: 40px;
  font-size: 13px;
}
.page-messages .conversation strong {
  font-size: 14px;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-messages .conversation-copy > span {
  font-size: 11px;
  color: #6e7973;
}
.page-messages .conversation small {
  font-size: 12px;
  margin-top: 3px;
}
.conversation-meta {
  display: grid;
  justify-items: end;
  align-self: start;
  gap: 9px;
  padding-top: 2px;
}
.conversation-meta time {
  color: var(--muted);
  font-size: 10px;
}
.page-messages .conversation .count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin: 0;
  font-size: 10px;
  color: white;
  background: var(--green);
  border-radius: 10px;
}
.page-messages .chat-pane {
  min-height: 0;
}
.page-messages .chat-header {
  position: relative;
  padding: 14px 20px;
  gap: 12px;
}
.chat-header > .chat-menu {
  position: absolute;
  flex: none;
}
.chat-header .chat-partner-name {
  font-size: 15px;
  color: var(--ink);
}
.page-messages .chat-header a:not(.chat-partner-name):not(.chat-back) {
  font-size: 12px;
}
.page-messages .chat-header .chat-back {
  display: none;
}
.chat-header .chat-more {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.chat-more:hover,
.attach-button:hover,
.chat-back:hover {
  background: #f1f4ef;
}
.chat-agreement-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 20px;
  background: #f7f8f3;
  font-size: 12px;
  text-align: left;
}
.chat-agreement-bar > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--green);
  white-space: nowrap;
}
.chat-agreement-bar .icon {
  width: 14px;
  height: 14px;
}
.page-messages .messages-scroll {
  min-height: 0;
  padding: 18px 22px;
  gap: 10px;
  overscroll-behavior: contain;
}
.page-messages .messages-scroll::before {
  content: '';
  flex: 1 0 0;
}
.page-messages .message,
.page-messages .chat-start,
.page-messages .load-older {
  flex-shrink: 0;
}
.page-messages .message {
  max-width: 82%;
  padding: 10px 14px 7px;
  border-radius: 16px;
}
.page-messages .message.mine {
  border-bottom-right-radius: 5px;
}
.page-messages .message.theirs {
  border-bottom-left-radius: 5px;
}
.page-messages .message p {
  font-size: 14px;
  line-height: 1.5;
}
.page-messages .message time {
  font-size: 10px;
}
.page-messages .chat-start {
  margin: 0 0 8px;
}
.page-messages .chat-start > span {
  display: none;
}
.composer-area {
  position: relative;
  flex-shrink: 0;
  padding: 10px 16px 6px;
  background: #fff;
}
.page-messages .message-composer {
  margin: 0;
  padding: 5px;
  gap: 4px;
  align-items: end;
  border-radius: 18px;
  background: #fafbf8;
  border-color: #e4e8e0;
}
.page-messages .message-composer textarea {
  min-height: 42px;
  max-height: 128px;
  padding: 10px 7px;
  font-size: 14px;
  line-height: 22px;
}
.page-messages .message-composer .attach-button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  color: #718078;
}
.page-messages .message-composer .send-button {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 14px;
}
.page-messages .keyboard-hint {
  margin: 5px 12px 0;
  text-align: center;
  color: #8a938a;
}
.chat-menu {
  z-index: 5;
  width: 260px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid #e9ece6;
  background: white;
  border-radius: 16px;
  box-shadow: 0 12px 36px #233d3521;
}
.chat-menu-header {
  right: 14px;
  top: calc(100% - 7px);
}
.chat-menu-attachments {
  position: absolute;
  left: 16px;
  bottom: calc(100% - 4px);
}
.chat-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  font-size: 14px;
}
.chat-menu button:hover,
.chat-menu button:focus-visible {
  background: #f0f5ee;
}
.chat-menu .icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.chat-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  margin: auto;
  padding: 24px;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: white;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 100px #16352c33;
}
.chat-dialog::backdrop {
  background: #18312a5c;
  backdrop-filter: blur(3px);
}
.chat-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.chat-dialog-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.5px;
}
.chat-dialog-header .icon-button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f5f0;
}
.dialog-subtitle {
  font-size: 13px;
  color: #708075;
  margin: 0 0 20px;
}
.chat-dialog fieldset {
  display: grid;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.chat-dialog .contact-types {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: #f1f4ef;
}
.contact-types label {
  position: relative;
  flex: 1;
  text-align: center;
  cursor: pointer;
}
.contact-types input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.contact-types span {
  display: block;
  border-radius: 10px;
  padding: 9px 4px;
  font-size: 13px;
  color: #708075;
}
.contact-types input:checked + span {
  color: var(--green);
  background: white;
  box-shadow: 0 1px 5px #253d3514;
}
.contact-types input:focus-visible + span {
  outline: 2px solid #8cab92;
  outline-offset: 1px;
}
.contact-value-label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}
.chat-dialog .contact-value-label input {
  font-size: 17px;
  font-weight: 400;
  background: #fff;
  border-radius: 12px;
  padding: 13px 14px;
  height: 52px;
}
.contact-privacy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  color: #748177;
  margin: 0;
  line-height: 1.5;
}
.contact-privacy .icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
}
.consent-caption {
  text-align: center;
  font-size: 11px;
  color: #7c877f;
  line-height: 1.5;
  margin: -7px 0 0;
}
.chat-dialog .button {
  border-radius: 12px;
}
.dialog-error {
  padding: 10px 12px;
  background: #fff4ec;
  color: #975339;
  border-radius: 10px;
  font-size: 13px;
}
.dialog-error[hidden],
.chat-menu[hidden] {
  display: none;
}
.image-preview-stage {
  min-height: 120px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  background: #f2f4ef;
}
.image-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.image-preview-stage img[hidden] {
  display: none;
}
.image-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
}
.image-file-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7a847d;
}
.image-file-row button {
  flex-shrink: 0;
  color: var(--green);
}
.image-dialog .dialog-subtitle {
  margin-bottom: 0;
}
.chat-dialog .chat-safety,
.chat-dialog .work-trust {
  padding: 0;
  border: 0;
}
.chat-dialog .chat-safety-content,
.chat-dialog .work-trust-content {
  max-height: none;
  overflow: visible;
  padding-top: 12px;
}
.chat-dialog .work-offer h3 {
  font-size: 15px;
  margin: 12px 0 0;
}
@media (max-width: 1000px) and (min-width: 761px) {
  .page-messages .messenger {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .page-messages .messenger {
    display: block;
    height: auto;
    min-height: 340px;
  }
  .page-messages .conversation-list {
    display: block;
    max-height: none;
    overflow: visible;
    padding: 4px;
    border: 0;
  }
  .page-messages .conversation-list > h2 {
    display: none;
  }
  .page-messages .conversation {
    width: 100%;
    min-width: 0;
    max-width: none;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 16px 10px;
    border-radius: 10px;
  }
  .page-messages .conversation .avatar {
    width: 44px;
    height: 44px;
  }
  .page-messages .conversation strong {
    font-size: 15px;
  }
  .page-messages .conversation-copy > span {
    font-size: 12px;
  }
  .page-messages .conversation small {
    font-size: 13px;
  }
  .page-messages .conversation-meta time {
    font-size: 11px;
  }
  .page-messages .has-no-chat .chat-pane {
    display: none;
  }
  .page-messages.chat-open {
    overflow: hidden;
  }
  .page-messages.chat-open > .header,
  .page-messages.chat-open > .account-nav,
  .page-messages.chat-open > .footer {
    display: none;
  }
  .page-messages.chat-open .messages-section {
    position: fixed;
    inset: var(--chat-viewport-top, 0px) 0 auto;
    width: 100%;
    max-width: none;
    height: var(--chat-viewport-height, 100dvh);
    padding: 0;
    margin: 0;
    background: white;
  }
  .page-messages.chat-open .page-heading {
    display: none;
  }
  .page-messages .has-chat.messenger {
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  .page-messages .has-chat .conversation-list {
    display: none;
  }
  .page-messages .has-chat .chat-pane {
    height: 100%;
    max-height: none;
    min-height: 0;
  }
  .page-messages .chat-header {
    padding: max(10px, env(safe-area-inset-top)) 12px 10px 6px;
    gap: 9px;
  }
  .page-messages .chat-header .chat-back {
    display: inline-flex;
    flex-shrink: 0;
    width: 36px;
    height: 40px;
    color: var(--ink);
  }
  .page-messages .chat-header .avatar {
    width: 38px;
    height: 38px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .page-messages .chat-header .chat-partner-name {
    font-size: 15px;
  }
  .page-messages .chat-header a:not(.chat-partner-name):not(.chat-back) {
    font-size: 11px;
  }
  .page-messages .chat-header .chat-more {
    width: 36px;
  }
  .chat-agreement-bar {
    padding: 9px 15px;
    font-size: 12px;
  }
  .page-messages .messages-scroll {
    padding: 16px 12px;
  }
  .page-messages .message {
    max-width: 88%;
  }
  .page-messages .message p {
    font-size: 15px;
  }
  .composer-area {
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  }
  .page-messages .message-composer textarea {
    font-size: 16px;
  }
  .page-messages .keyboard-hint {
    display: none;
  }
  .chat-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    padding: 22px 20px max(24px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
  }
  .chat-dialog-header h2 {
    font-size: 21px;
  }
  .chat-dialog::backdrop {
    backdrop-filter: blur(2px);
  }
  .image-preview-stage img {
    max-height: min(360px, 42dvh);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .chat-dialog[open] {
    animation: chat-dialog-appear 140ms ease-out;
  }
  @keyframes chat-dialog-appear {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.page-messages .chat-pane > :not(.messages-scroll):not(dialog) {
  flex-shrink: 0;
}
.page-messages .icon-button:focus-visible,
.chat-dialog button:focus-visible,
.chat-menu button:focus-visible {
  outline: 2px solid #8eac97;
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .page-messages .has-no-chat.messenger {
    min-height: 0;
    border: 0;
    background: transparent;
  }
  .page-messages .has-no-chat .conversation-list {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
  }
}