/* 2026-09-28: SELL hero - message-app style chat visual (rebuilt from the Harley Higashikurume visual, G'LUX version) */
.sell-chat{position:absolute;z-index:2;right:6%;top:150px;width:min(400px,34vw);height:540px;display:flex;flex-direction:column;background:linear-gradient(180deg,#2a1a12f2 0%,#161312f5 22%,#0f0f10f7 100%);border:1px solid #ffffff14;box-shadow:0 24px 60px #000a;overflow:hidden;font-family:'Noto Sans JP',sans-serif;pointer-events:none}
.sell-chat-head{padding:14px 18px;border-bottom:1px solid #ffffff14;color:#f1ebe0;font-size:14px;font-weight:700;letter-spacing:.04em}
.sell-chat-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 16px;overflow:hidden}
.sell-chat .sc-row{display:grid;gap:6px 10px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.sell-chat .sc-row.is-in{opacity:1;transform:none}
.sell-chat .sc-me{grid-template-columns:1fr 38px;justify-items:end}
.sell-chat .sc-shop{grid-template-columns:38px 1fr;justify-items:start}
.sell-chat .sc-name{grid-column:1/-1;font-size:12px;font-weight:700;color:#bdb3a4}
.sell-chat .sc-me .sc-name{padding-right:48px}
.sell-chat .sc-shop .sc-name{padding-left:48px}
.sell-chat .sc-ava{width:38px;height:38px;border-radius:50%;align-self:end;display:grid;place-items:center;overflow:hidden}
.sell-chat .sc-me .sc-ava{grid-column:2;background:#e9e9e9}
.sell-chat .sc-me .sc-ava svg{width:30px;height:30px;margin-top:8px}
.sell-chat .sc-shop .sc-ava{grid-column:1;grid-row:2;background:#000;border:1px solid #ffffff3a}
.sell-chat .sc-shop .sc-ava img{width:30px;height:auto}
.sell-chat .sc-bubble{max-width:290px;padding:11px 15px;border-radius:14px;font-size:13px;font-weight:700;line-height:1.7;color:#f5f0e6}
.sell-chat .sc-me .sc-bubble{grid-column:1;grid-row:2;background:#1c3a24;border:1px solid #3f7a4c}
.sell-chat .sc-shop .sc-bubble{grid-column:2;grid-row:2;background:#2a2826;border:1px solid #ffffff1c}
.sell-chat .sc-photos{display:flex;gap:6px}
.sell-chat .sc-photos img{width:72px;height:54px;object-fit:cover;border-radius:6px;border:1px solid #ffffff22}
.sell-chat .sc-typing{display:inline-flex;gap:6px;align-items:center;min-height:22px}
.sell-chat .sc-typing i{width:7px;height:7px;border-radius:50%;background:#9d958a;animation:scDot 1.1s infinite ease-in-out}
.sell-chat .sc-typing i:nth-child(2){animation-delay:.18s}.sell-chat .sc-typing i:nth-child(3){animation-delay:.36s}
@keyframes scDot{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
/* 2026-09-28: phones / tablets - the chat sits right under the SELL block (normal flow) */
@media(max-width:1080px){html body .page-hero:has(.sell-chat){flex-direction:column;align-items:stretch;justify-content:flex-end}html body .page-hero .sell-chat{position:relative;z-index:1;top:auto;right:auto;bottom:auto;width:auto;height:560px;flex:none;margin:0 20px 36px}}
@media(max-width:1080px) and (min-width:701px){html body .page-hero .sell-chat{max-width:460px;margin:0 0 40px 66px}}

/* 2026-09-28: LINE-like colours (blue talk background, green / white bubbles, dark text) */
.sell-chat{background:linear-gradient(180deg,#8fa6d3 0%,#93aad6 60%,#a4b8de 100%);border:1px solid #ffffff55;box-shadow:0 24px 60px #000c}
.sell-chat-head{background:#8aa1cf;border-bottom:1px solid #00000014;color:#1d2433;font-size:15px}
.sell-chat .sc-name{color:#2c3548;font-weight:500}
.sell-chat .sc-bubble{color:#111;font-weight:500;border-radius:18px;border:0;box-shadow:0 1px 1px #0000000d}
.sell-chat .sc-me .sc-bubble{background:#8de055;border:0}
.sell-chat .sc-shop .sc-bubble{background:#fff;border:0}
.sell-chat .sc-me .sc-ava{background:#dfe5ef}
.sell-chat .sc-shop .sc-ava{background:#111;border:0}
.sell-chat .sc-typing i{background:#8a8f99}
.sell-chat .sc-photos img{border:2px solid #fff;border-radius:8px}

/* 2026-09-28: fill the hero height (no empty strip below) + LINE-like input bar */
.sell-chat{top:118px;bottom:auto;height:auto;max-height:calc(100% - 150px)}
.sell-chat-body{flex:0 1 auto}
.sell-chat-body{justify-content:flex-start}
.sell-chat-foot{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#fff;border-top:1px solid #00000010}
.sell-chat-foot svg{width:22px;height:22px;flex:none;stroke:#3c4250;fill:none;stroke-width:1.6}
.sell-chat-foot span{flex:1;height:32px;border-radius:16px;background:#f1f2f4;color:#9aa0aa;font-size:13px;line-height:32px;padding-left:14px}

/* 2026-09-28: conversation plays once, then the LINE add-friend button appears in place of the input bar */
.sell-chat-line{display:none;align-items:center;gap:12px;padding:12px 16px;background:#06C755;color:#fff;text-decoration:none;pointer-events:auto;font-weight:700;font-size:16px;letter-spacing:.04em;transition:background-color .25s}
.sell-chat-line svg{width:34px;height:34px;flex:none}
.sell-chat-line span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.sell-chat-line small{font-size:12px;font-weight:500;opacity:.92}
.sell-chat-line:hover,.sell-chat-line:focus-visible{background:#05a948;outline:none}
.sell-chat.is-done .sell-chat-foot{display:none}
.sell-chat.is-done .sell-chat-line{display:flex;animation:scLineIn .5s ease both}
@keyframes scLineIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 2026-09-28: G'LUX wordmark inside the SELL story heading */
.sell-story-heading h2 .sell-brand{display:inline-block;height:.82em;width:auto;vertical-align:-.02em;margin-right:.12em}

/* 2026-09-28: 「高価買取・下取り」 (8 chars) must stay left of the chat panel */
@media(min-width:1081px){html body.iron-page .page-hero h1 .sub{font-size:clamp(40px,calc(11.75vw - 72px),100px)}}

/* 2026-09-28: pick-up truck - show all 4 photos at once on PC (1 large + 3 stacked), slider stays on phones */
@media(min-width:701px){
html body .sell-pickup-photo .pickup-slides{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,1fr);gap:8px;overflow:hidden;scroll-snap-type:none}
html body .sell-pickup-photo .pickup-slides>img{grid-column:2;width:100%;height:100%;min-height:0;filter:saturate(.85) brightness(.95)}
html body .sell-pickup-photo .pickup-slides>img:first-child{grid-column:1;grid-row:1/4;filter:saturate(.75) brightness(.9)}
html body .sell-pickup-photo .pickup-slides>img:nth-child(3){object-position:40% 60%}
html body .sell-pickup-photo figcaption{max-width:62%}
}

/* 2026-09-28: 「高価買取・／下取り」 may only wrap after the middle dot (phones) */
html body.iron-page .page-hero h1 .sub{word-break:keep-all;overflow-wrap:normal}

/* 2026-09-28: phones - the overhead p-kt-hero crop reads badly; use the front-on row of Harleys instead */
@media(max-width:700px){html body.iron-page .page-hero>img{content:url('hr-front.webp');object-position:38% 50%;filter:brightness(.72) saturate(.95)}}

/* 2026-09-28: phones - narrower bubbles need more height; keep the newest message in view like a real chat */
@media(max-width:1080px){html body .page-hero .sell-chat{height:min(640px,calc(100svh - 190px))}}

/* 2026-09-28: the talk area scrolls (like a real chat) and follows the newest message */
html body .sell-chat .sell-chat-body{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#6f82ad transparent;pointer-events:auto}
html body .sell-chat .sell-chat-body>.sc-row:first-child{margin-top:0}
html body .sell-chat .sell-chat-body{padding-top:12px}

/* 2026-09-28: 「高価買取・下取り」 gets the same worn look as HARLEY "YOUR WAY." (hollow gold line + brown drop) */
html body.iron-page .page-hero h1 .sub{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #c4a676;font-weight:400;text-shadow:0 2px #7f6d52,0 12px 30px #0005}

/* 2026-10-02: chat panel is a fixed-size window; the conversation moves only inside it (newest at the bottom, older lines slide out at the top) */
@media(min-width:1081px){html body .page-hero .sell-chat{top:150px;height:540px;max-height:calc(100% - 190px);bottom:auto}}
html body .sell-chat-body{flex:1 1 auto;min-height:0;overflow:hidden;justify-content:flex-start}
/* 2026-10-09 写真5枚の吹き出し */
.sell-chat .sc-photos.is-5{gap:4px}.sell-chat .sc-photos.is-5 img{width:44px;height:40px}
/* 2026-10-09 PCのチャット枠を下へ長く（関谷さん指示） */
@media(min-width:1081px){html body .page-hero .sell-chat{height:690px;max-height:calc(100% - 170px)}}