/* Friends supplies navigation, 44px avatars and the tablet header. */
.chat-page [data-pencil-name="online indicator"] { position: absolute; inset: 50% 0 auto auto; transform: translateY(-50%); width: 28px; height: 28px; }
.chat-page .chat-rows .export-325 { position: absolute; inset: 50% auto auto 0; transform: translateY(-50%); width: 50px; height: 50px; }
.chat-page [data-pencil-name="text and name"] { gap: 1px !important; }
.chat-page .chat-rows .export-325 > div { inset: 0 !important; width: 100% !important; height: 100% !important; }
.chat-page [data-pencil-name="Friends list scroll"] .export-223 { filter: none; border-radius: 50%; box-shadow: 4px 6px 7px #00000080; }
@media (max-width: 1400px) {
  .chat-page .main-shell { width: 100% !important; height: auto !important; overflow: visible !important; border-radius: 0 !important; }
  .chat-page .main-nav { order: -1; }
  .chat-page :is([data-pencil-name="Chats Header"], [data-pencil-name="Friends list scroll"], .chat-list) { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; margin-inline: 12px; }
  .chat-page [data-pencil-name="Chats Header"] { order: 1; margin-block: 16px; font-size: 24px !important; white-space: normal !important; overflow-wrap: anywhere; }
  .chat-page [data-pencil-name="Friends list scroll"] { order: 2; overflow: auto hidden !important; overscroll-behavior-inline: contain; }
  .chat-page [data-pencil-name="Friends list"] { position: relative !important; inset: auto !important; width: max-content !important; gap: 12px !important; padding: 12px 10px !important; }
  .chat-page .chat-list { order: 3; margin-top: 12px; overflow: visible !important; }
  .chat-page .chat-rows { position: relative !important; inset: auto !important; width: 100% !important; }
  .chat-page .export-225 { display: grid; grid-template-columns: 50px minmax(0, 1fr) 12px; align-items: center; gap: 8px; width: 100%; height: auto; min-height: 74px; padding: 12px; border-radius: 6px; }
  .chat-page [data-pencil-name="text and name"] { grid-column: 2; position: relative !important; inset: auto !important; margin-left: -8px; width: calc(100% + 8px) !important; height: auto !important; min-width: 0; }
  .chat-page [data-pencil-name="text and name"] > div { width: 100%; font-size: 18px; line-height: 1.45; letter-spacing: 0.02em; white-space: normal; overflow-wrap: anywhere; }
  .chat-page [data-pencil-name="online indicator"] { width: 14px; height: 14px; }
}

@media (max-width: 600px) {
  .chat-page [data-pencil-name="Chats Header"] { font-size: clamp(1.25rem, 5.64vw, 1.5rem) !important; }
  .chat-page [data-pencil-name="text and name"] > div { font-size: calc(clamp(0.875rem, 4.1vw, 1.125rem) + 0.0625rem); }
}

@media (min-width: 601px) and (max-width: 1400px) {
  .chat-page :is([data-pencil-name="Chats Header"], [data-pencil-name="Friends list scroll"], .chat-list) { margin-inline: 24px; }
  .chat-page [data-pencil-name="Friends list"] { margin-inline: auto; }
}

@media (min-width: 1401px) {
  .chat-page [data-pencil-name="text and name"] { left: 62px !important; right: 43px; width: auto !important; }
}

.chat-page [data-pencil-name="text and name"] > :last-child { font-size: 21.6px; }
@media (max-width: 1400px) {
  .chat-page [data-pencil-name="text and name"] > :last-child { font-size: 16.2px; }
}
@media (max-width: 600px) {
  .chat-page [data-pencil-name="text and name"] > :last-child { font-size: calc((clamp(0.875rem, 4.1vw, 1.125rem) + 0.0625rem) * 0.9); }
}