:root {
    --lm-ink: #16233d;
    --lm-blue: #087ea4;
    --lm-mist: #e9f4f4;
    --lm-sand: #e5dcc9;
    --lm-paper: #fbfaf6;
}

.lm-conversation-shell {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
    color: var(--lm-ink);
}

.lm-conversation-shell--start { padding: clamp(48px, 6vw, 84px) 0 96px; }
/* The thread is an application view, not an article: tight padding so the conversation itself
   starts near the top of the viewport instead of a screenful down. */
.lm-conversation-shell--thread { padding: clamp(16px, 2vw, 26px) 0 clamp(20px, 2.4vw, 32px); }
.lm-conversation-shell--access { display: grid; min-height: 66vh; place-items: center; padding: clamp(54px, 8vw, 110px) 0; }
.lm-access-card { width: min(100%, 620px); box-sizing: border-box; padding: clamp(32px, 6vw, 58px); }
.lm-access-card h1 { margin: 12px 0 18px; font-size: clamp(36px, 6vw, 58px); line-height: 1.02; }
.lm-access-card > p:not(.lm-conversation-eyebrow) { color: #656970; font-size: 16px; line-height: 1.65; }
.lm-access-card form { margin: 28px 0 20px; }

.lm-conversation-intro { max-width: 1040px; margin: 0 0 34px; }
.lm-conversation-intro h1, .lm-thread-head h1 { margin: 8px 0 16px; font-size: clamp(42px, 5.4vw, 70px); line-height: .98; }
.lm-conversation-intro > p:last-child, .lm-thread-head > div > p:last-child { max-width: 700px; color: #5f6269; font-size: clamp(17px, 2vw, 21px); line-height: 1.62; }
.lm-conversation-eyebrow, .lm-conversation-label { margin: 0; color: #92836b; font: 500 11px/1.4 'Courier New', monospace; letter-spacing: .18em; text-transform: uppercase; }
.lm-conversation-label--spaced { margin-top: 32px; padding-top: 26px; border-top: 1px solid #d8cfbf; }

.lm-conversation-purpose {
    display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 28px; align-items: center;
    margin: 0 0 34px; border: 1px solid #ddd4c5; border-radius: 21px; padding: clamp(24px, 3vw, 34px);
    background: linear-gradient(125deg, rgba(240, 233, 219, .72), rgba(255, 255, 255, .78));
}
.lm-conversation-purpose__head h2 { margin: 8px 0 7px; color: var(--lm-ink); font-size: clamp(23px, 2.5vw, 31px); line-height: 1.12; }
.lm-conversation-purpose__head > p:last-child { margin: 0; color: #656970; font-size: 13px; line-height: 1.58; }
.lm-conversation-purpose__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm-conversation-purpose__choice {
    display: grid; gap: 7px; min-width: 0; border: 1px solid #d8d1c4; border-radius: 14px; padding: 17px 18px;
    background: rgba(255, 255, 255, .82); color: var(--lm-ink); text-decoration: none;
}
.lm-conversation-purpose__choice:hover { border-color: #8eb6bc; background: #f5fbfa; }
.lm-conversation-purpose__choice:focus-visible { outline: 3px solid var(--lm-blue); outline-offset: 3px; }
.lm-conversation-purpose__choice strong { font-size: 16px; line-height: 1.28; }
.lm-conversation-purpose__choice > span { color: #666b72; font-size: 12px; line-height: 1.5; }
.lm-conversation-purpose__choice em { margin-top: 3px; color: #17657a; font-size: 11px; font-style: normal; font-weight: 600; }
.lm-conversation-purpose__choice--trade { border-color: #9dbec1; background: linear-gradient(135deg, #edf7f6, #e2f0f0); }
.lm-conversation-purpose__other { grid-column: 2; margin: -12px 2px 0; color: #777a7f; font-size: 11px; }
.lm-conversation-purpose__other a { color: var(--lm-ink); font-weight: 600; text-underline-offset: 2px; }

.lm-conversation-start-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 28px; align-items: start; }
.lm-conversation-card { border: 1px solid #e1dbce; border-radius: 24px; background: rgba(255, 255, 255, .72); box-shadow: 0 20px 60px rgba(22, 35, 61, .06); }
.lm-conversation-card--context {
    position: sticky; top: 24px; grid-column: 1; grid-row: 1; padding: clamp(28px, 4vw, 48px);
    border-color: #ded3c0; background: rgba(241, 234, 220, .58); box-shadow: none;
}
.lm-conversation-card--context h2 { margin: 14px 0; font-size: clamp(24px, 2.4vw, 29px); line-height: 1.15; }
.lm-conversation-card--context > p:not(.lm-conversation-label) { color: #666970; line-height: 1.7; }
.lm-conversation-form {
    position: relative; overflow: hidden; grid-column: 2; grid-row: 1; display: grid; gap: 22px; scroll-margin-top: 24px; padding: clamp(28px, 4vw, 48px);
    border-color: #a9c8c8;
    background: radial-gradient(circle at 100% 0%, rgba(126, 177, 182, .24), transparent 34%), linear-gradient(145deg, #f8fbfa 0%, #edf6f5 55%, #e5f1f1 100%);
    box-shadow: 0 26px 70px rgba(22, 35, 61, .13);
}
.lm-conversation-form--trade { gap: 26px; }
.lm-conversation-form::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 5px;
    background: linear-gradient(90deg, var(--lm-ink) 0%, var(--lm-blue) 58%, #7eb1b6 100%);
}
.lm-conversation-form__head { padding: 2px 0 22px; border-bottom: 1px solid rgba(8, 126, 164, .2); }
.lm-conversation-form__head .lm-conversation-label { color: #17657a; }
.lm-conversation-form__head h2 { margin: 9px 0 6px; color: var(--lm-ink); font-size: clamp(25px, 2.4vw, 32px); line-height: 1.12; }
.lm-conversation-form__head > p:last-child { margin: 0; color: #56646a; font-size: 14px; line-height: 1.6; }

.lm-conversation-product { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; margin: 20px 0 30px; }
.lm-conversation-product img { width: 112px; height: 112px; border-radius: 13px; object-fit: cover; background: var(--lm-mist); }
.lm-conversation-product div { display: grid; gap: 6px; }
.lm-conversation-product strong { font-size: 20px; line-height: 1.25; }
.lm-conversation-product span, .lm-conversation-order-context span { color: #72757a; font-size: 14px; }
.lm-conversation-order-context { display: grid; gap: 7px; margin: 22px 0 32px; }
.lm-conversation-order-context strong { font-size: 30px; }

.lm-conversation-promise { display: grid; grid-template-columns: 28px 1fr; gap: 12px; margin-top: 36px; padding-top: 26px; border-top: 1px solid #e5dfd3; }
.lm-conversation-promise > span { color: var(--lm-blue); font-size: 18px; }
.lm-conversation-promise p { margin: 0; color: #696c72; font-size: 14px; line-height: 1.6; }
.lm-conversation-promise strong { color: var(--lm-ink); }
.lm-conversation-context-switch { display: grid; gap: 7px; margin: 30px 0 0; border-radius: 12px; padding: 16px 17px; background: rgba(255, 255, 255, .7); }
.lm-conversation-card--context > .lm-conversation-context-switch span { color: #666970; font-size: 12px; line-height: 1.45; }
.lm-conversation-context-switch a { color: var(--lm-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.lm-conversation-context-switch a:hover { color: var(--lm-blue); }
.lm-conversation-context-switch a:focus-visible { outline: 2px solid var(--lm-blue); outline-offset: 3px; }

.lm-conversation-field { display: grid; gap: 8px; align-content: start; color: var(--lm-ink); font-size: 14px; font-weight: 600; }
.lm-conversation-field span em { color: #888b8f; font-size: 12px; font-style: normal; font-weight: 400; }
.lm-conversation-field input, .lm-conversation-field textarea, .lm-conversation-field select {
    width: 100%; box-sizing: border-box; border: 1px solid #d9d3c7; border-radius: 12px; background: #fff; color: var(--lm-ink);
    padding: 15px 16px; font: 400 16px/1.55 Jost, Arial, sans-serif; transition: border-color .15s, box-shadow .15s;
}
.lm-conversation-field textarea { min-height: 190px; resize: vertical; }
.lm-conversation-field--presence textarea { min-height: 116px; }
.lm-conversation-field select { appearance: auto; min-height: 56px; }
.lm-conversation-field input:focus, .lm-conversation-field textarea:focus, .lm-conversation-field select:focus { border-color: var(--lm-blue); box-shadow: 0 0 0 3px rgba(8,126,164,.11); outline: none; }
.lm-conversation-field small { color: #7d7f83; font-size: 12px; font-weight: 400; }
.lm-conversation-field small.is-error, .is-error { color: #a43c35; }
.lm-conversation-form .lm-conversation-field { color: #152640; }
.lm-conversation-form .lm-conversation-field input, .lm-conversation-form .lm-conversation-field textarea, .lm-conversation-form .lm-conversation-field select {
    border-color: #abc3c4; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 rgba(22, 35, 61, .03);
}
.lm-conversation-form .lm-conversation-field--message textarea { border-color: #82afb5; background: #fff; }
.lm-conversation-form .lm-conversation-field input:focus, .lm-conversation-form .lm-conversation-field textarea:focus, .lm-conversation-form .lm-conversation-field select:focus {
    border-color: var(--lm-blue); outline: 2px solid var(--lm-blue); outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(8, 126, 164, .11), 0 10px 24px rgba(22, 35, 61, .08);
}
.lm-conversation-form .lm-conversation-field [aria-invalid="true"] { border-color: #b4554e; }

.lm-trade-section { min-width: 0; display: grid; gap: 20px; margin: 0; border: 0; padding: 0; }
.lm-trade-section + .lm-trade-section { border-top: 1px solid rgba(8, 126, 164, .2); padding-top: 28px; }
.lm-trade-section__head { display: grid; grid-template-columns: 33px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--lm-ink); }
.lm-trade-section__head > span {
    display: inline-grid; width: 33px; height: 33px; place-items: center; border: 1px solid #96b9bc; border-radius: 50%;
    background: rgba(255, 255, 255, .72); color: #17657a; font: 600 10px/1 'Courier New', monospace; letter-spacing: .06em;
}
.lm-trade-section__head h3 { margin: 1px 0 0; font-size: 21px; line-height: 1.2; }
.lm-trade-section__head p { margin: 5px 0 0; color: #687177; font-size: 12px; line-height: 1.5; }
.lm-trade-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.lm-trade-email-support { display: grid; gap: 11px; border: 1px solid rgba(126, 177, 182, .48); border-radius: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .52); }
.lm-trade-email-support > p { margin: 0; color: #697278; font-size: 12px; line-height: 1.5; }
.lm-conversation-check--trade-alert { margin: 0; }
.lm-trade-choice-group { min-width: 0; display: grid; gap: 9px; margin: 0; border: 0; padding: 0; }
.lm-trade-choice-group > legend { padding: 0; color: #152640; font-size: 14px; font-weight: 600; }
.lm-trade-choice-group > p { margin: -5px 0 2px; color: #7d7f83; font-size: 12px; line-height: 1.45; }
.lm-trade-choice-group[aria-invalid="true"] { border-left: 3px solid #b4554e; padding-left: 12px; }
.lm-trade-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-trade-choice { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
.lm-trade-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.lm-trade-choice span {
    display: inline-flex; min-height: 40px; box-sizing: border-box; align-items: center; border: 1px solid #9fbfc1; border-radius: 999px; padding: 9px 14px;
    background: rgba(255, 255, 255, .78); color: #344652; font-size: 12px; font-weight: 500; line-height: 1.3;
}
.lm-trade-choice:hover span { border-color: var(--lm-blue); background: #fff; }
.lm-trade-choice input:focus-visible + span { outline: 3px solid var(--lm-blue); outline-offset: 2px; }
.lm-trade-choice input:checked + span { border-color: var(--lm-ink); background: var(--lm-ink); color: #fff; box-shadow: 0 5px 14px rgba(22, 35, 61, .16); }
.lm-trade-choice--radio { flex: 1 1 calc(50% - 8px); }
.lm-trade-choice--radio span { width: 100%; border-radius: 12px; }
.lm-trade-choices--compact .lm-trade-choice span { min-height: 37px; padding: 8px 12px; font-size: 11px; }
.lm-conversation-photo-field { display: grid; gap: 8px; color: var(--lm-ink); font-size: 14px; font-weight: 600; }
.lm-conversation-photo-field > span em { color: #888b8f; font-size: 12px; font-style: normal; font-weight: 400; }
.lm-conversation-photo-field input { box-sizing: border-box; width: 100%; border: 1px dashed #c8c0b1; border-radius: 12px; padding: 14px; background: #fbfaf6; color: var(--lm-ink); font: 400 13px Jost,Arial,sans-serif; }
.lm-conversation-photo-field small { color: #7d7f83; font-size: 12px; font-weight: 400; line-height: 1.5; }
.lm-conversation-form .lm-conversation-photo-field input { border-color: #9ebfc1; background: rgba(255, 255, 255, .76); }
.lm-conversation-form .lm-conversation-photo-field input::file-selector-button {
    margin-right: 12px; border: 0; border-radius: 8px; padding: 9px 12px; background: #dfeeee; color: var(--lm-ink); cursor: pointer; font: 600 12px Jost, Arial, sans-serif;
}
.lm-conversation-form .lm-conversation-photo-field input:focus-visible { outline: 2px solid var(--lm-blue); outline-offset: 2px; }
.lm-conversation-check { display: flex; gap: 11px; align-items: flex-start; color: #50545b; font-size: 13px; line-height: 1.5; }
.lm-conversation-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--lm-ink); }
.lm-conversation-form .lm-conversation-check input { accent-color: var(--lm-blue); }
.lm-conversation-form .lm-conversation-check input:focus-visible { outline: 2px solid var(--lm-blue); outline-offset: 2px; }
.lm-conversation-submit { display: flex; justify-content: space-between; align-items: center; min-height: 58px; border: 0; border-radius: 12px; padding: 0 22px; background: var(--lm-ink); color: #fff; cursor: pointer; font: 600 14px/1 Jost, Arial, sans-serif; letter-spacing: .03em; }
.lm-conversation-submit:hover { background: var(--lm-blue); }
.lm-conversation-form .lm-conversation-submit {
    min-height: 62px; background: linear-gradient(120deg, var(--lm-ink) 0%, #234b70 62%, #176e8c 100%);
    box-shadow: 0 12px 28px rgba(20, 33, 52, .18); transition: transform .18s ease, box-shadow .18s ease;
}
.lm-conversation-form .lm-conversation-submit:hover { background: linear-gradient(120deg, #203552 0%, #285b7f 62%, #17809c 100%); box-shadow: 0 16px 34px rgba(20, 33, 52, .24); transform: translateY(-1px); }
.lm-conversation-form .lm-conversation-submit:focus-visible { outline: 3px solid var(--lm-blue); outline-offset: 3px; }
.lm-conversation-privacy { margin: -5px 0 0; color: #7a7c80; font-size: 11px; line-height: 1.6; }
.lm-conversation-privacy a { color: inherit; text-decoration: underline; }
.lm-conversation-privacy--jit { margin: 0; padding: 13px 15px; border-left: 3px solid #98cbd3; border-radius: 0 8px 8px 0; background: #f2f8f8; color: #555e63; font-size: 12px; }
.lm-conversation-privacy--jit strong { color: var(--lm-ink); }
.lm-conversation-error { border-left: 3px solid #a43c35; padding: 12px 15px; background: #fff4f0; color: #7d2924; font-size: 13px; }
.lm-conversation-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.lm-thread-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; align-items: center; margin-bottom: 14px; }
.lm-thread-head__title { min-width: 0; flex: 1 1 300px; }
/* Overrides the shared .lm-conversation-intro h1 sizing/margins: a 64px display title belongs
   on the entry page, not above a live chat. */
.lm-thread-head h1 { max-width: 760px; margin: 3px 0 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; }
.lm-thread-head__status { flex: 0 1 auto; max-width: 340px; margin: 0; color: #5f6269; font-size: 13px; line-height: 1.5; text-align: right; }
.lm-thread-context { display: grid; grid-template-columns: 78px minmax(0, 220px); gap: 15px; align-items: center; flex: 0 0 auto; padding: 10px; border: 1px solid #e1dbce; border-radius: 15px; background: #fff; color: var(--lm-ink); text-decoration: none; }
.lm-thread-context img { width: 78px; height: 78px; border-radius: 10px; object-fit: cover; }
.lm-thread-context span { display: grid; gap: 4px; }
.lm-thread-context small, .lm-thread-context em { color: #81838a; font: 400 10px/1.35 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.lm-thread-context strong { font-size: 14px; line-height: 1.3; }
.lm-thread-context em { font-style: normal; }
.lm-thread-context--order { grid-template-columns: minmax(0, 180px); padding: 20px; }

/* One scroll area, not two. The thread claims the viewport left below the site chrome and the
   compact header, so the messages scroll inside their own panel and the PAGE does not scroll —
   a buyer never has to scroll down to reach the conversation or the composer.
   --lm-thread-chrome is everything above and below the panel: announcement bar + nav (~147px),
   this shell's padding, the header row, and the footnote. The max() floor keeps the panel
   usable on short viewports, where the page is allowed to scroll again. */
.lm-thread {
    /* Measured: nav+announcement ~147, shell padding 26+32, header row ~66, footnote ~31 = ~302.
       Rounded up so a few pixels of font-metric variance cannot produce a page scrollbar on top
       of the panel's own — the whole point is that only the messages scroll. */
    --lm-thread-chrome: 316px;
    display: flex;
    flex-direction: column;
    /* vh first, svh second: a browser without svh keeps a sized panel instead of dropping the
       declaration and collapsing the flex children. */
    height: max(430px, calc(100vh - var(--lm-thread-chrome)));
    height: max(430px, calc(100svh - var(--lm-thread-chrome)));
    overflow: hidden;
    border: 1px solid #ded8cc;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(22,35,61,.08);
}
.lm-thread__messages { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; padding: clamp(20px, 3vw, 38px); background: linear-gradient(180deg, #fbfaf6 0%, #f7f6f1 100%); scroll-behavior: smooth; }
.lm-thread__history { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 34px; color: #767a81; font-size: 12px; }
.lm-thread__history a { border: 1px solid #d9d3c7; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.82); color: var(--lm-ink); font-weight: 600; text-decoration: none; }
.lm-thread__history a:hover { border-color: var(--lm-blue); color: var(--lm-blue); }
.lm-thread__history a[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.lm-thread__history [role="status"]:empty { display: none; }
.lm-thread__history [role="status"].is-error { color: #a43c35; }
.lm-message { width: min(76%, 720px); }
.lm-message__meta { display: flex; gap: 12px; align-items: baseline; margin: 0 6px 7px; color: #85878b; font-size: 11px; }
.lm-message__meta strong { color: var(--lm-ink); font-size: 12px; }
.lm-message p { margin: 0; border: 1px solid #ddd8cd; border-radius: 17px 17px 17px 4px; padding: 14px 17px; background: #fff; color: #2c3444; font-size: 15px; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.lm-message--mine { align-self: flex-end; }
.lm-message--mine .lm-message__meta { justify-content: flex-end; }
.lm-message--mine p { border-color: var(--lm-ink); border-radius: 17px 17px 4px 17px; background: var(--lm-ink); color: #fff; }
.lm-message p a { color: #1f6b8c; text-decoration: underline; text-underline-offset: 2px; }
.lm-message--mine p a { color: #a9dced; }

/* A specimen link the owner sent, unfurled into a tappable card under the bubble. */
.lm-message__product { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 13px; margin-top: 7px; padding: 10px; border: 1px solid #ddd8cd; border-radius: 15px; background: #fff; text-decoration: none; }
.lm-message__product:hover { border-color: var(--lm-ink); }
.lm-message__product-media { width: 76px; height: 76px; display: block; overflow: hidden; border-radius: 11px; background: var(--lm-mist); }
.lm-message__product-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lm-message__product-body { min-width: 0; display: grid; gap: 5px; }
.lm-message__product-body strong { overflow: hidden; color: var(--lm-ink); font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lm-message__product-body code { justify-self: start; max-width: 100%; padding: 3px 7px; overflow: hidden; border-radius: 5px; background: var(--lm-mist); color: #4a5262; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lm-message__product-meta { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.lm-message__product-price { color: var(--lm-ink); font-weight: 700; }
.lm-message__product-sold { color: #a43c35; }
.lm-message__product-cta { color: #1f6b8c; font-size: 12px; font-weight: 600; }
.lm-message--mine .lm-message__product { border-color: #758096; }

.lm-message__attachments { display: grid; gap: 8px; margin-top: 7px; }
.lm-message__attachments a { display: block; overflow: hidden; border: 1px solid #d8d2c7; border-radius: 15px; background: #eef5f5; }
.lm-message__attachments img { display: block; width: 100%; max-height: min(480px,58vh); object-fit: contain; background: #eef5f5; }
.lm-message--mine .lm-message__attachments a { border-color: #758096; }

.lm-thread__composer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 18px; border-top: 1px solid #e1dbce; background: #fff; }
.lm-thread__composer textarea { min-height: 54px; max-height: 180px; resize: vertical; box-sizing: border-box; border: 1px solid #d9d3c7; border-radius: 14px; padding: 14px 16px; color: var(--lm-ink); font: 400 15px/1.5 Jost, Arial, sans-serif; }
.lm-thread__composer textarea:focus { border-color: var(--lm-blue); outline: 0; box-shadow: 0 0 0 3px rgba(8,126,164,.1); }
.lm-thread__composer button { display: flex; gap: 20px; align-items: center; min-height: 54px; border: 0; border-radius: 13px; padding: 0 22px; background: var(--lm-ink); color: #fff; cursor: pointer; font: 600 14px/1 Jost, sans-serif; }
.lm-thread__composer button:hover { background: var(--lm-blue); }
.lm-thread__composer button:disabled { opacity: .55; cursor: wait; }
.lm-thread__photo-control { grid-column: 1 / -1; width: fit-content; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #d9d3c7; border-radius: 999px; padding: 8px 13px; color: var(--lm-ink); background: #fbfaf6; cursor: pointer; font-size: 12px; font-weight: 600; }
.lm-thread__photo-control:hover { border-color: var(--lm-blue); color: var(--lm-blue); }
.lm-thread__photo-control input { max-width: 220px; color: #6f7278; font-size: 11px; }
.lm-thread__attachment-preview { grid-column: 1 / -1; display: none; gap: 8px; color: #656970; font-size: 11px; }
.lm-thread__attachment-preview.has-photo { display: grid; }
.lm-thread__attachment-item { display: flex; align-items: center; gap: 10px; }
.lm-thread__attachment-item img { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; background: var(--lm-mist); }
.lm-thread__attachment-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-thread__attachment-item button { min-height: 0; margin-left: auto; border: 1px solid #d9d3c7; border-radius: 999px; padding: 8px 12px; color: #7a3934; background: #fff; font-size: 11px; }
.lm-thread__attachment-item button:hover { border-color: #a43c35; color: #fff; background: #a43c35; }
.lm-thread__photo-help { grid-column: 1 / -1; margin-top: -5px; color: #7d7f83; font-size: 11px; line-height: 1.45; }
.lm-thread__composer.is-disabled { opacity: .72; }
.lm-thread__composer.is-disabled button:disabled { cursor: not-allowed; }
.lm-thread__composer [data-message-status] { grid-column: 1 / -1; min-height: 16px; margin: -4px 4px 0; color: #777b82; font-size: 11px; }
.lm-thread__closed { padding: 28px; text-align: center; }
.lm-thread__closed p { color: #70737a; }
.lm-thread__closed a { color: var(--lm-ink); font-weight: 600; }
.lm-thread-footnote { margin: 16px 3px 0; color: #888b90; font-size: 11px; text-align: center; }
.lm-thread-footnote a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 840px) {
    .lm-conversation-shell { width: min(100% - 28px, 720px); }
    .lm-conversation-purpose { grid-template-columns: 1fr; }
    .lm-conversation-purpose__other { grid-column: 1; margin-top: -2px; }
    .lm-conversation-start-grid { grid-template-columns: 1fr; }
    .lm-conversation-card--context, .lm-conversation-form { grid-column: 1; grid-row: auto; }
    .lm-conversation-card--context { position: static; }
    /* Stays flex (wrapping), so the status simply drops below the title and reads left-aligned. */
    .lm-thread-head { align-items: flex-start; }
    .lm-thread-head__status { max-width: none; text-align: left; }
    .lm-thread { --lm-thread-chrome: 330px; }
    .lm-thread-context { width: min(100%, 360px); box-sizing: border-box; }
}

@media (max-width: 680px) {
    .lm-trade-fields { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .lm-conversation-shell { width: 100%; }
    .lm-conversation-shell--start, .lm-conversation-shell--thread { padding: 38px 14px 70px; box-sizing: border-box; }
    .lm-conversation-intro { margin-bottom: 26px; }
    .lm-conversation-purpose { margin-bottom: 24px; border-radius: 18px; padding: 22px 18px; }
    .lm-conversation-purpose__choices { grid-template-columns: 1fr; }
    .lm-conversation-card { border-radius: 18px; }
    .lm-conversation-form { padding: 26px 22px; }
    .lm-trade-email-support { padding: 13px 14px; }
    .lm-trade-choice--radio { flex-basis: 100%; }
    .lm-trade-choice--radio span { width: 100%; }
    .lm-conversation-product { grid-template-columns: 84px 1fr; }
    .lm-conversation-product img { width: 84px; height: 84px; }
    .lm-thread { border-radius: 17px; --lm-thread-chrome: 300px; }
    /* No min/max height here — the panel's own height governs and the messages flex into it. */
    .lm-thread__messages { padding: 20px 14px; }
    .lm-thread__history { flex-wrap: wrap; gap: 8px; }
    .lm-thread__history [role="status"] { width: 100%; text-align: center; }
    .lm-message { width: 88%; }
    .lm-thread__composer { grid-template-columns: 1fr auto; padding: 12px; }
    .lm-thread__composer button { width: 54px; justify-content: center; padding: 0; }
    .lm-thread__composer button span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
    .lm-conversation-form .lm-conversation-submit:hover { transform: none; }
    .lm-thread__messages { scroll-behavior: auto; }
}
