.messaging-shell { max-width: 680px; background: #fcfbfd; }
.messaging-header { padding: 13px 15px 15px; background: linear-gradient(110deg, #69008d, #300b82); }
.messaging-header .logo strong { color: #fff; }
.messaging-back svg { transform: rotate(180deg); }
.messaging-main { padding: 18px 14px 35px; }
.messaging-main h1 { margin: 0; color: #350050; font-size: clamp(24px, 6vw, 29px); line-height: 1.15; overflow-wrap: anywhere; }
.messaging-intro { margin: 5px 0 12px; color: #5f5464; font-size: 13px; line-height: 1.4; }
.messaging-disclaimer { margin: 10px 0 15px; padding: 10px 12px; border-radius: 10px; color: #5b4565; background: #f3eaf8; font-size: 12px; line-height: 1.4; }
.messaging-search { display: flex; align-items: center; gap: 9px; margin: 14px 0; padding: 0 12px; border: 1px solid #e8dfeb; border-radius: 25px; background: white; box-shadow: 0 2px 6px #26002c10; }
.messaging-search svg { flex: none; width: 20px; color: #450078; }
.messaging-search input { width: 100%; min-width: 0; min-height: 46px; border: 0; outline: 0; background: transparent; color: #25102b; font-size: 16px; }
.messaging-search:focus-within { outline: 3px solid #ffc756; }
.messaging-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 15px; }
.messaging-filters button { min-width: 0; min-height: 39px; padding: 5px; border: 1px solid #e8e1eb; border-radius: 20px; color: #392044; background: #fff; font-size: 12px; font-weight: 700; }
.messaging-filters button[aria-pressed="true"] { border-color: #7300a4; color: #fff; background: #7300a4; }
.conversation-list { display: grid; gap: 8px; }
.conversation-card, .seller-row, .product-context { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid #ece5ef; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px #26002c0c; }
.seller-avatar { display: grid; place-items: center; flex: none; width: 49px; height: 49px; border-radius: 50%; background: linear-gradient(140deg, #aa00b9, #530075); color: #fff; }
.seller-avatar svg { width: 27px; height: 27px; }
.conversation-text, .seller-row-text { display: grid; flex: 1; min-width: 0; gap: 4px; }
.conversation-text strong, .seller-row strong { color: #2e1239; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.conversation-text small, .seller-row small { color: #665c6c; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.conversation-meta { display: grid; justify-items: end; flex: none; gap: 6px; color: #76677c; font-size: 11px; }
.sample-unread { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 50%; color: #fff; background: #f67900; font-weight: 700; }
.messaging-empty { padding: 16px; border-radius: 12px; background: #f4edf8; color: #614d6b; font-size: 13px; }
.messaging-help, .seller-return { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; margin-top: 20px; padding: 10px; border-radius: 11px; background: #710093; color: #fff; font-weight: 700; text-align: center; }
.messaging-help svg, .seller-return svg { width: 23px; height: 23px; }
.seller-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.seller-heading > div { flex: 1; min-width: 0; }
.seller-heading h1 { font-size: clamp(18px, 5vw, 23px); }
.seller-heading p { margin: 4px 0 0; color: #765280; font-size: 12px; }
.seller-heading > a { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: #70008d; }
.product-context { margin: 12px 0 16px; }
.product-context img { flex: none; width: 55px; height: 62px; border-radius: 8px; object-fit: contain; background: #f8f6f9; }
.product-context > div { display: grid; flex: 1; min-width: 0; gap: 5px; }
.product-context strong { color: #2d103a; font-size: 13px; overflow-wrap: anywhere; }
.product-context small { color: #e85f00; font-weight: 700; }
.product-context a { padding: 8px; border: 1px solid #a000bd; border-radius: 18px; color: #710093; font-size: 11px; font-weight: 700; text-align: center; }
.seller-conversation { --chat-nav: env(safe-area-inset-bottom); }
.seller-conversation .messaging-main { padding-bottom: 125px; }
.seller-conversation .chat-messages { margin: 16px 0; }
.seller-conversation .chat-compose-wrap { bottom: calc(var(--chat-nav) + var(--chat-keyboard)); }
.seller-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.seller-shortcuts a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; min-width: 80px; min-height: 38px; padding: 7px; border: 1px solid #e7dfea; border-radius: 22px; background: #fff; color: #4a075d; font-size: 12px; font-weight: 700; }
.seller-shortcuts a:first-child { border-color: #ff7900; background: #ff7900; color: #fff; }
.seller-shortcuts svg { width: 19px; height: 19px; }
.seller-profile { display: flex; gap: 12px; align-items: center; margin: 14px 0; padding: 15px; border-radius: 14px; background: #f0e5f8; }
.seller-profile > div { min-width: 0; }
.seller-profile strong { color: #310643; overflow-wrap: anywhere; }
.seller-profile p { margin: 5px 0 0; color: #5e5165; font-size: 12px; line-height: 1.4; }
.seller-links { display: grid; gap: 8px; }
.seller-row { width: 100%; min-height: 58px; color: #30103e; font: inherit; text-align: left; }
.seller-row > svg:first-child { flex: none; width: 26px; height: 26px; color: #9000ac; }
.seller-row > svg:last-child { flex: none; width: 18px; height: 18px; }
.seller-notice { margin: 12px 0; padding: 10px; border-radius: 10px; color: #5c4267; background: #f3eaf8; font-size: 12px; line-height: 1.4; }
.seller-products, .seller-orders { display: grid; gap: 7px; margin: 8px 0 12px; }
.seller-products a, .seller-orders a { padding: 11px; border-radius: 9px; background: #f7f1fa; color: #69008a; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.seller-return { border: 1px solid #f77800; background: white; color: #eb6900; }
.messaging-main :is(a, button, input) { scroll-margin-bottom: 135px; }
.messaging-main :is(a, button):focus-visible { outline: 3px solid #ffb539; outline-offset: 2px; }
@media (max-width: 340px) { .messaging-header { padding-inline: 9px; } .messaging-main { padding-inline: 10px; } .product-context { gap: 7px; } .product-context a { padding-inline: 5px; } }