/* Match Create Post's responsive margins, text scale and 44px controls; retain the desktop export. */
.chat-interface-page [data-pencil-name="emoji icon"] { width: clamp(28px, 9vw, 38px) !important; height: clamp(28px, 9vw, 38px) !important; }
.chat-interface-page [data-pencil-name="emoji icon"] > [data-pencil-name="Ellipse 3"] { width: 75% !important; height: 75% !important; left: 12.5% !important; top: 12.5% !important; }
.chat-interface-page [data-pencil-name="emoji icon"] > :is([data-pencil-name="Ellipse 4"], [data-pencil-name="Ellipse 5"]) { width: 8.333333% !important; height: 8.333333% !important; top: 33.333333% !important; }
.chat-interface-page [data-pencil-name="emoji icon"] > [data-pencil-name="Ellipse 4"] { left: 29.166667% !important; }
.chat-interface-page [data-pencil-name="emoji icon"] > [data-pencil-name="Ellipse 5"] { left: 62.5% !important; }
.chat-interface-page [data-pencil-name="emoji icon"] > svg { width: 41.666667% !important; height: 12.5% !important; left: 29.166667% !important; top: 58.333333% !important; }
.chat-interface-page [data-pencil-name="function items beside message box"] > div > svg { scale: 1.2; transform-origin: center; }
.chat-interface-page [data-pencil-name="actual chat"] > [data-pencil-name="user ppf"] > [data-pencil-name="user ppf"] { inset: 5% !important; width: 90% !important; height: 90% !important; }
@media (max-width: 1400px) {
  body.chat-interface-page { display: block; height: 100dvh; min-height: 0; overflow: hidden; }
  .chat-interface-page .chat-interface-shell { --icon-size: clamp(22px, 6vw, 32px); --arrow-width: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px 8px; width: 100% !important; height: 100dvh !important; border-radius: 0 !important; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)); }
  .chat-interface-page .chat-interface-shell div { font-size: 18px !important; line-height: 1.45 !important; }
  .chat-interface-page :is([data-pencil-name="actual chat"], [data-pencil-name="message box header"], [data-pencil-name="message box"], [data-pencil-name="function items beside message box"]) { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; min-width: 0; }
  .chat-interface-page [data-pencil-name="message box header"] { grid-area: 1 / 1 / 2 / -1; display: grid; grid-template-columns: fit-content(calc(100% - 140px)) 44px minmax(88px, 1fr); align-items: center; gap: 4px; padding-bottom: 12px; }
  .chat-interface-page [data-pencil-name="message box header"] > svg { inset: auto 0 0 !important; width: 100% !important; }
  .chat-interface-page [data-pencil-name="profile"] { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0; justify-content: flex-start !important; }
  .chat-interface-page [data-pencil-name="profile"] > [data-pencil-name="user ppf"] { width: 44px !important; height: 44px !important; }
  .chat-interface-page [data-pencil-name="user ppf"] > [data-pencil-name="user ppf"] { inset: 0 !important; width: 100% !important; height: 100% !important; }
  .chat-interface-page [data-pencil-name="Frame 13"] { width: auto !important; min-width: 0; flex: 1 1 auto !important; }
  .chat-interface-page [data-pencil-name="Frame 13"] > div { white-space: normal; overflow-wrap: anywhere; }
  .chat-interface-page [data-pencil-name="function buttons"] { position: static !important; gap: 0 !important; justify-self: end; }
  .chat-interface-page :is(.export-243, [data-pencil-name="function buttons"] > div, [data-pencil-name="message box header"] > [data-pencil-name="Shopicons_Light_ArrowDown"]) { position: relative !important; inset: auto !important; width: 44px !important; height: 44px !important; display: grid; place-items: center; }
  .chat-interface-page .export-243 > svg { position: static !important; width: var(--icon-size) !important; height: auto !important; max-height: var(--icon-size); }
  .chat-interface-page [data-pencil-name="function buttons"] > div > [data-pencil-name="Shopicons_Light_ArrowDown"] { position: static !important; width: 44px !important; height: 44px !important; transform: none !important; }
  .chat-interface-page :is(.export-298, .export-317) { position: static; display: grid; place-items: center; width: 44px; height: 44px; }
  .chat-interface-page .export-317 { transform: rotate(90deg) scaleX(-1); }
  .chat-interface-page :is(.export-299, .export-318) { display: none; }
  .chat-interface-page :is(.export-257, .export-256, .export-255, .export-266, .export-265, .export-264) { position: static; width: var(--arrow-width); height: calc(var(--arrow-width) * 18.121 / 33.414); }
  .chat-interface-page [data-pencil-name="actual chat"] { grid-area: 2 / 1 / 3 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 12px 8px; min-height: 0; overflow: auto !important; overscroll-behavior: contain; padding-block: 4px 12px; }
  .chat-interface-page [data-pencil-name="actual chat"] > [data-pencil-name="user ppf"] { position: relative !important; inset: auto !important; grid-column: 1; width: 44px !important; height: 44px !important; align-self: center; }
  .chat-interface-page [data-pencil-name="actual chat"] > [data-pencil-name^="message"] { position: relative !important; inset: auto !important; grid-column: 1 / -1; justify-self: end; width: fit-content !important; max-width: calc(100% - 52px); min-width: 0; justify-content: flex-start !important; }
  .chat-interface-page [data-pencil-name="actual chat"] > :is([data-pencil-name="message1"], [data-pencil-name="message3"], [data-pencil-name="message4"], [data-pencil-name="message 5"], [data-pencil-name="message7"]) { grid-column: 2; justify-self: start; max-width: 80%; }
  .chat-interface-page [data-pencil-name="actual chat"] > [data-pencil-name^="message"] > div { width: auto !important; min-width: 0; flex-shrink: 1 !important; white-space: normal; overflow-wrap: anywhere; }
  .chat-interface-page [data-pencil-name="actual chat"] br { display: none; }
  .chat-interface-page [data-pencil-name="message2"] { grid-row: 3; }
  .chat-interface-page [data-pencil-name="actual chat"] > .chat-opening { grid-row: 1; }
  .chat-interface-page :is([data-pencil-name="message1"], .chat-avatar-first) { grid-row: 2; }
  .chat-interface-page [data-pencil-name="message3"] { grid-row: 4; }
  .chat-interface-page [data-pencil-name="message4"] { grid-row: 5; }
  .chat-interface-page :is([data-pencil-name="message 5"], .chat-avatar-second) { grid-row: 6; }
  .chat-interface-page [data-pencil-name="message6"] { grid-row: 7; }
  .chat-interface-page :is([data-pencil-name="message7"], .chat-avatar-third) { grid-row: 8; }
  .chat-interface-page [data-pencil-name="message8"] { grid-row: 9; }
  .chat-interface-page [data-pencil-name="message box"] { grid-area: 3 / 2; gap: 8px !important; padding: 4px 4px 4px 12px !important; }
  .chat-interface-page [data-pencil-name="Say hi!"] { flex: 1; min-width: 0; white-space: normal !important; overflow-wrap: anywhere; }
  .chat-interface-page [data-pencil-name="emoji icon"] { position: relative !important; inset: auto !important; flex-shrink: 0; }
  .chat-interface-page [data-pencil-name="function items beside message box"] { grid-area: 3 / 1; width: auto !important; gap: 4px !important; align-self: center; }
  .chat-interface-page [data-pencil-name="function items beside message box"] > .export-243 { width: 36px !important; overflow: visible; }
}
@media (max-width: 600px) {
  .chat-interface-page .chat-interface-shell { --arrow-width: 18px; }
  .chat-interface-page .chat-interface-shell div { font-size: calc(clamp(0.875rem, 4.1vw, 1.125rem) + 0.0625rem) !important; }
}
@media (min-width: 601px) and (max-width: 1400px) {
  .chat-interface-page .chat-interface-shell { padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}
@media (min-width: 1401px) {
  .chat-interface-page [data-pencil-name="function items beside message box"] > div { width: 44px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: visible; }
  .chat-interface-page [data-pencil-name="function items beside message box"] > div > svg { position: static !important; }
  .chat-interface-page [data-pencil-name="function items beside message box"] .export-327 { width: 52px; height: 52px; }
  .chat-interface-page [data-pencil-name="actual chat"] > :is([data-pencil-name="message1"], [data-pencil-name="message3"], [data-pencil-name="message4"], [data-pencil-name="message 5"], [data-pencil-name="message7"]) { max-width: calc((100% - 72px) * 0.8); }
  .chat-interface-page [data-pencil-name="message box header"] { display: grid; grid-template-columns: max-content 40px; grid-template-rows: max-content; align-items: center; gap: 4px; }
  .chat-interface-page [data-pencil-name="profile"], .chat-interface-page [data-pencil-name="message box header"] > [data-pencil-name="Shopicons_Light_ArrowDown"] { position: relative !important; inset: auto !important; }
}
.chat-interface-page [data-pencil-name="actual chat"] > :is([data-pencil-name="message2"], [data-pencil-name="message6"], [data-pencil-name="message8"]) { max-width: calc((100% - 52px) * 0.8); }