/* PDF 27, original Figma 7:2912. The 393 x 852 device frame includes
   a 63px status area and 32px home area, leaving a 393 x 757 web viewport.
   Date: y=213-63=150, height=30. First circles: y=375-63=312.
   Map these anchors and the background to the same stable viewport height;
   cover would crop the supplied mobile artwork at other aspect ratios.
   Only the mobile message board/composer are changed here. */
@media (max-width: 700px) {
  /* List 7:2912 and detail 7:3465 share the same 44px web header. */
  .page-messages:not(.menu-open) .site-header { height: 44px; }
  .message-lines {
    bottom: auto;
    height: 100svh;
    background-size: 100% 112.549537649svh;
    background-position: center -8.322324967svh;
  }
  .messages-layout { padding-top: 19.815059445svh; }
  .message-day { padding: 44px 20px 0; }
  .message-day > time {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 53px;
    padding: 0;
    transform: none;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: rgb(0 0 0 / 66%);
  }
  .message-date-dot {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: currentColor;
    font-size: 0;
  }
  .message-day:first-child { padding-top: 0; }
  .message-day:first-child > time { margin-bottom: calc(21.400264201svh - 30px); }
  .message-circle strong { font-size: 12px; font-weight: 500; }
  .message-circle > span { font-size: 10px; font-weight: 400; }

  /* Figma 7:3008–3020: 180 x 48.193 name field, 353 x 48.193 message
     field, 3.614px gap. Input bottom is 62px above the web viewport edge. */
  .message-form { bottom: max(8.190224571svh, env(safe-area-inset-bottom)); }
  .name-field input,
  .message-field textarea { font-size: 14px; font-weight: 400; line-height: 20.412247px; }
  .name-field input::placeholder,
  .message-field textarea::placeholder { color: rgb(0 0 0 / 66%); opacity: 1; }
  .message-field > button { font-size: 12px; font-weight: 400; }
  /* Original 7:3020 outlined vector: no artificial enlargement or added stroke. */
  .message-form .form-meta {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    opacity: 0;
  }
  .message-form:focus-within .form-meta,
  .message-form .form-meta:has(#form-error:not(:empty)) { opacity: 1; }
}