/* ================= listing chat (public/comments.js) =================
   A calm messaging surface inside the listing page: one card, hairlines, soft bubbles, the site's single green accent.
   Seller messages carry a green tint. Logical properties throughout so everything mirrors for Arabic and Persian.
   Touch: every tap target is at least 44px and actions are always visible. Mouse: actions float in on hover. */
.lc{--lc-bub:var(--pit2);--lc-bub-s:color-mix(in srgb,var(--brass) 8%,var(--pit));--lc-edge:color-mix(in srgb,var(--brass) 24%,var(--line));--lc-pad:22px;--lc-live:#2F9E62;
  gap:0;min-width:0;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 76px)}
:root[data-theme="dark"] .lc{--lc-bub:color-mix(in srgb,var(--pit3) 58%,var(--pit));--lc-bub-s:color-mix(in srgb,var(--brass) 13%,var(--pit));--lc-edge:color-mix(in srgb,var(--brass) 30%,var(--line));--lc-live:#6FD39A}
.lc [hidden]{display:none!important}
.lc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lc>*,.lc-shell>*{min-width:0}
.lc-shell{position:relative;min-width:0;border:1px solid var(--line);border-radius:22px;background:var(--pit);box-shadow:0 1px 2px rgba(20,35,26,.04),0 22px 48px -34px rgba(20,35,26,.22)}
:root[data-theme="dark"] .lc-shell{box-shadow:0 1px 2px rgba(0,0,0,.3),0 22px 48px -30px rgba(0,0,0,.6)}

/* ---------- header ---------- */
.lc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 16px;padding:22px var(--lc-pad) 4px}
.lc-title{min-width:0}
.lc-title h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;outline:none;font-size:clamp(1.6rem,3.4vw,2.1rem)}
.lc-n{display:inline-grid;place-items:center;min-width:30px;height:28px;padding:0 10px;border-radius:999px;background:var(--chalk);color:var(--asphalt);font:700 .82rem/1 var(--body);letter-spacing:0;font-variant-numeric:tabular-nums}
.lc-newn{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--live) 13%,transparent);color:var(--live);font:700 .72rem/1 var(--body);letter-spacing:.02em}
.lc-subt{display:flex;align-items:baseline;gap:9px;margin:8px 0 0;color:var(--smoke);font-size:.9rem;line-height:1.45}
.lc-live{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--lc-live);transform:translateY(-1px)}
.lc-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--lc-live);opacity:0;animation:lclive 2.6s ease-out infinite}
@keyframes lclive{0%{transform:scale(.5);opacity:.7}70%,100%{transform:scale(1.4);opacity:0}}
.lc-pop{position:relative;display:inline-flex}
.lc-sortw{flex:none;margin-top:4px}
.lc-sortbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 16px;border:1px solid var(--line);border-radius:999px;background:var(--pit);color:var(--chalk);font-weight:600;font-size:.84rem;cursor:pointer;white-space:nowrap}
.lc-sortbtn:hover,.lc-sortbtn[aria-expanded="true"]{border-color:var(--smoke)}
.lc-sortbtn svg{width:16px;height:16px;color:var(--smoke);transition:transform .15s}
.lc-sortbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lc-sortmenu{inset-inline-start:auto;inset-inline-end:0;min-width:210px}

/* filters: a segmented control that scrolls inside itself on narrow screens */
.lc-filt-w{padding:14px var(--lc-pad) 0;min-width:0}
.lc-filt-w:empty{display:none}
.lc-filters{display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:999px;background:var(--pit2);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;vertical-align:top}
.lc-filters::-webkit-scrollbar{display:none}
.lc-filters button{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--smoke);font-weight:600;font-size:.84rem;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.lc-filters button:hover{color:var(--chalk)}
.lc-filters button[aria-selected="true"]{background:var(--pit);color:var(--chalk);box-shadow:0 1px 2px rgba(20,35,26,.1),0 0 0 1px var(--line)}
:root[data-theme="dark"] .lc-filters button[aria-selected="true"]{background:var(--pit3);box-shadow:none}
.lc-fn{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--chalk) 8%,transparent);font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.lc-filters button[aria-selected="true"] .lc-fn{background:var(--brass);color:var(--on-brass)}

/* ---------- avatars: the member photo over coloured initials ---------- */
.lc-av{--fh:150;position:relative;width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;font-weight:700;font-size:.82rem;letter-spacing:.02em;
  background:hsl(var(--fh) 28% 91%);color:hsl(var(--fh) 34% 28%);box-shadow:inset 0 0 0 1px hsl(var(--fh) 20% 84%)}
:root[data-theme="dark"] .lc-av{background:hsl(var(--fh) 16% 23%);color:hsl(var(--fh) 38% 84%);box-shadow:inset 0 0 0 1px hsl(var(--fh) 12% 31%)}
.lc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lc-av.sm{width:30px;height:30px;font-size:.66rem}
.lc-av.xs{width:26px;height:26px;font-size:.6rem}
.lc-av-gone{background:var(--pit3);box-shadow:none}
.lc-av-me{background:var(--pit2);color:var(--smoke);box-shadow:inset 0 0 0 1px var(--line)}
.lc-av-me svg{width:18px;height:18px}

/* ---------- composer ---------- */
.lc-comp-w{padding:16px var(--lc-pad) 18px;border-bottom:1px solid var(--line)}
.lc-comp-w:empty{display:none}
.lc-comp{display:flex;gap:12px;align-items:flex-start;min-width:0}
.lc-comp-main{flex:1;min-width:0;display:grid;gap:8px;position:relative}
.lc-box{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--pit);transition:border-color .15s,box-shadow .15s;min-width:0}
.lc-box:hover{border-color:color-mix(in srgb,var(--smoke) 45%,var(--line))}
.lc-box:focus-within{border-color:var(--brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 14%,transparent)}
.lc-box.lc-drop{border-style:dashed;border-color:var(--brass);background:color-mix(in srgb,var(--brass) 5%,var(--pit))}
.lc-box textarea,.lc-edit textarea{display:block;width:100%;min-height:58px;max-height:420px;resize:none;border:0;background:transparent;padding:14px 16px 6px;line-height:1.55;outline:none;border-radius:18px;font-size:.95rem}
.lc-comp-r .lc-box textarea{min-height:46px;padding-top:12px}
.lc-box textarea::placeholder{color:var(--dim)}
.lc-bar{display:flex;align-items:center;gap:6px;padding:2px 6px 6px 4px;flex-wrap:wrap}
.lc-tools{display:inline-flex;align-items:center;gap:0}
.lc-fmtin{display:inline-flex}
.lc-fmtrow{display:flex;gap:0;padding:0 4px}
.lc-tool{position:relative;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--smoke);cursor:pointer;flex:none}
.lc-tool:hover,.lc-tool[aria-expanded="true"]{color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,transparent)}
.lc-tool:focus-within{outline:2px solid var(--brass);outline-offset:-2px}
.lc-tool svg{width:21px;height:21px}
.lc-tool input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;font-size:0}
.lc-fb,.lc-fi{font:700 1.02rem/1 Georgia,"Times New Roman",serif}
.lc-fi{font-style:italic;font-weight:600}
.lc-aa{font:700 .92rem/1 var(--body);letter-spacing:-.02em}
@media (min-width:521px){.lc-fmttog{display:none}.lc-fmtrow{display:none!important}}
@media (max-width:520px){.lc-fmtin{display:none}}
.lc-ask{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 12px;margin-inline-start:4px;border:1px solid var(--line);border-radius:999px;background:var(--pit);color:var(--smoke);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.lc-ask svg{width:17px;height:17px;flex:none}
.lc-ask i{position:relative;width:30px;height:18px;border-radius:999px;background:var(--pit3);transition:background .18s;flex:none}
.lc-ask i::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:var(--pit);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start .18s}
.lc-ask:hover{color:var(--chalk);border-color:var(--smoke)}
.lc-ask[aria-checked="true"]{color:var(--brass);border-color:var(--lc-edge);background:color-mix(in srgb,var(--brass) 7%,var(--pit))}
.lc-ask[aria-checked="true"] i{background:var(--brass)}
.lc-ask[aria-checked="true"] i::after{inset-inline-start:14px;background:var(--on-brass)}
.lc-count{font-size:.76rem;color:var(--smoke);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.lc-count:empty{display:none}
.lc-count.over{color:var(--live);font-weight:700}
.lc-bar .lc-post,.lc-bar .lc-signin,.lc-bar .lc-cancel{margin-inline-start:auto}
.lc-bar .lc-cancel+.lc-post,.lc-bar .lc-cancel+.lc-signin,.lc-bar .lc-count:not(:empty)+.lc-post,.lc-bar .lc-count:not(:empty)+.lc-signin,.lc-bar .lc-count:not(:empty)+.lc-cancel{margin-inline-start:0}
.lc-bar .btn{min-height:40px;padding-inline:16px;font-size:.86rem}
.lc-post{gap:6px}
.lc-post svg{width:16px;height:16px;margin-inline-end:-2px}
[dir="rtl"] .lc-post svg,[dir="rtl"] .lc-pill svg.flip{transform:scaleX(-1)}
.lc-post:disabled{opacity:.7;cursor:progress}
.lc-signin{position:relative}
.lc-signin.lc-nudge{animation:lcnudge .7s ease}
@keyframes lcnudge{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.lc-guest{margin:2px 4px 0;font-size:.8rem;color:var(--smoke);line-height:1.5}
.lc-guest a{color:var(--brass);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.lc-hint{margin:0 6px;font-size:.74rem;color:var(--dim)}
@media (hover:none),(max-width:600px){.lc-hint{display:none}}
.lc-hp{position:absolute!important;top:0;left:0;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.lc-err{margin:0}
.lc-qchip{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 12px;border-radius:14px;background:color-mix(in srgb,var(--brass) 7%,var(--pit2));border-inline-start:3px solid var(--brass);min-width:0}
.lc-qchip>svg{width:16px;height:16px;color:var(--brass);flex:none}
.lc-qchip .lc-quote-w{flex:1}
.lc-qchip-l{font-size:.78rem;color:var(--smoke)}
.lc-qchip-l bdi{color:var(--chalk);font-weight:700}
.lc-qchip-x{width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--smoke);display:grid;place-items:center;cursor:pointer;flex:none;position:relative}
.lc-qchip-x::before{content:"";position:absolute;inset:-4px}
.lc-qchip-x:hover{background:var(--pit3);color:var(--chalk)}
.lc-qchip-x svg{width:15px;height:15px}

/* photos waiting to be posted: drag to reorder, arrow keys too */
.lc-prev{display:flex;flex-wrap:wrap;gap:8px;padding:2px 12px 8px}
.lc-prev:empty{display:none}
.lc-pv{position:relative;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--pit3);flex:none;touch-action:none;cursor:grab;transition:transform .12s,box-shadow .12s;outline-offset:2px}
.lc-pv img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.lc-pv-n{position:absolute;bottom:5px;inset-inline-start:5px;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:rgba(10,16,13,.62);color:#fff;font:700 .66rem/1 var(--body);padding:0 5px}
.lc-pv-wait{animation:lcpulse 1.1s ease-in-out infinite;cursor:default}
.lc-pv-drag{z-index:5;box-shadow:0 14px 30px rgba(0,0,0,.28);cursor:grabbing;transition:none;opacity:.92}
.lc-pv-over{box-shadow:0 0 0 3px var(--brass)}
.lc-pv-x{position:absolute;top:4px;inset-inline-end:4px;width:28px;height:28px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(10,16,13,.7);color:#fff;cursor:pointer}
.lc-pv-x::before{content:"";position:absolute;inset:-8px}
.lc-pv-x svg{width:13px;height:13px}
.lc-pv-add{display:grid;place-content:center;justify-items:center;gap:2px;border:1.5px dashed var(--line);background:transparent;color:var(--smoke);font-size:.72rem;font-weight:600;cursor:pointer;touch-action:auto}
.lc-pv-add:hover{border-color:var(--brass);color:var(--brass)}
.lc-pv-add svg{width:20px;height:20px}
.lc-pv-add input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
@keyframes lcpulse{50%{opacity:.5}}
.lc-cardw{padding:0 12px}
.lc-cardw:empty{display:none}
.lc-cardw .lc-card{margin-bottom:8px;max-width:none}

/* emoji picker */
.lc-emoji{position:absolute;z-index:45;bottom:calc(100% + 8px);inset-inline-start:-4px;width:min(316px,calc(100vw - 40px));max-height:272px;overflow:auto;padding:10px;background:var(--pit);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 44px rgba(10,20,15,.18)}
:root[data-theme="dark"] .lc-emoji{box-shadow:0 18px 44px rgba(0,0,0,.55)}
.lc-emoji-h{display:block;margin:2px 4px 4px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.lc-emoji-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:2px;margin-bottom:6px}
.lc-emoji-g button{height:40px;border:0;border-radius:10px;background:none;font-size:1.3rem;line-height:1;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--body)}
.lc-emoji-g button:hover,.lc-emoji-g button:focus-visible{background:var(--pit2)}

/* @mention picker */
.lc-mention{position:absolute;z-index:30;inset-inline-start:0;top:calc(100% - 4px);min-width:min(300px,100%);max-width:100%;display:grid;padding:6px;background:var(--pit);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
:root[data-theme="dark"] .lc-mention,:root[data-theme="dark"] .lc-menu,:root[data-theme="dark"] .lc-rxpick{box-shadow:0 12px 32px rgba(0,0,0,.5)}
.lc-mention button{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border:0;border-radius:10px;background:none;text-align:start;cursor:pointer;min-width:0}
.lc-mention button>b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-mention button>span:not(.lc-av):not(.lc-badge){color:var(--smoke);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-mention button[aria-selected="true"],.lc-mention button:hover{background:var(--pit2)}

.lc-note{display:flex;gap:10px;align-items:center;margin:0;padding:12px 14px;border-radius:14px;background:var(--pit2);color:var(--smoke);font-size:.88rem}
.lc-note svg{width:18px;height:18px;flex:none;color:var(--brass)}

/* ---------- the conversation ---------- */
.lc-list{display:grid;min-width:0;padding:4px var(--lc-pad) 14px}
.lc-m{position:relative;display:grid;min-width:0;padding-block:16px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 96px)}
.lc-list>.lc-m+.lc-m{border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
.lc-row{position:relative;display:flex;gap:12px;align-items:flex-start;min-width:0}
.lc-main{flex:1;min-width:0;display:grid;justify-items:start;gap:6px}
.lc-main>*{max-width:100%}
.lc-meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:3px;min-width:0;line-height:1.35;padding-top:2px}
.lc-who{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.lc-name{font-weight:700;font-size:.92rem;overflow-wrap:anywhere;color:var(--chalk)}
.lc-sub{display:inline-flex;align-items:baseline;gap:6px;color:var(--smoke);font-size:.78rem;white-space:nowrap}
.lc-sub time{cursor:default}
.lc-dot{color:var(--dim)}
.lc-edited{font-style:italic}
.lc-tags{display:inline-flex;gap:6px;flex-wrap:wrap}
.lc-badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.6rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:2px 8px;border-radius:999px;line-height:1.6;white-space:nowrap}
.lc-seller{background:var(--brass);color:var(--on-brass)}
.lc-bidder{box-shadow:inset 0 0 0 1px var(--brass-deep);color:var(--brass)}
.lc-pro{font-size:.74rem;color:var(--smoke);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:18ch}
.lc-tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:var(--pit2);box-shadow:inset 0 0 0 1px var(--line);color:var(--smoke);font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.lc-tag svg{width:12px;height:12px}
.lc-tag-ok{background:color-mix(in srgb,var(--go) 11%,var(--pit));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--go) 28%,transparent);color:var(--go)}
.lc-tag-wait{background:color-mix(in srgb,var(--amber) 12%,var(--pit));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 30%,transparent);color:var(--amber)}
.lc-tag-new{background:color-mix(in srgb,var(--live) 11%,var(--pit));box-shadow:none;color:var(--live)}

/* the bubble */
.lc-bub{width:fit-content;max-width:min(100%,640px);padding:10px 15px 11px;background:var(--lc-bub);border-radius:18px;border-start-start-radius:5px;min-width:0}
.lc-by-seller>.lc-row .lc-bub{background:var(--lc-bub-s);box-shadow:inset 0 0 0 1px var(--lc-edge)}
.lc-ishid>.lc-row .lc-bub{opacity:.62;background-image:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--chalk) 3%,transparent) 10px 20px)}
.lc-text{text-align:start;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem;line-height:1.6;color:var(--chalk)}
.lc-text b{font-weight:700}
.lc-link,.lc-at{color:var(--brass);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brass) 40%,transparent);text-underline-offset:3px;overflow-wrap:anywhere}
.lc-at{text-decoration:none;font-weight:600}
.lc-link:hover,.lc-at:hover{text-decoration-color:currentColor;text-decoration:underline}
.lc-pinned{margin-block:10px 4px;padding:14px 16px 12px;border-radius:18px;background:color-mix(in srgb,var(--brass) 4%,var(--pit));box-shadow:inset 0 0 0 1px var(--lc-edge)}
.lc-list>.lc-pinned+.lc-m{border-top:0}
.lc-pinlabel{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.lc-pinlabel svg{width:14px;height:14px}
.lc-unread>.lc-row>.lc-av{box-shadow:0 0 0 2px var(--pit),0 0 0 4px color-mix(in srgb,var(--brass) 60%,transparent)}
.lc-in{animation:lcin .45s cubic-bezier(.2,.8,.2,1) both}
.lc-in>.lc-row .lc-bub,.lc-flash>.lc-row .lc-bub{animation:lcglow 2.4s ease-out}
@keyframes lcin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lcglow{0%,25%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 40%,transparent)}100%{box-shadow:0 0 0 3px transparent}}
.lc-gone{display:flex;gap:12px;align-items:center;padding-block:12px}
.lc-gone p{margin:0;font-style:italic;color:var(--smoke);font-size:.88rem}
.lc-hid{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px!important;margin-block:6px;border-radius:14px;background:var(--pit2);color:var(--smoke);font-size:.84rem}
.lc-hid p{margin:0;flex:1;min-width:180px}
.lc-hid-i svg,.lc-hidnote svg{width:17px;height:17px;flex:none}
.lc-hid-a{display:inline-flex;gap:14px}
.lc-hid-a .linkbtn,.lc-hidnote .linkbtn{min-height:32px;font-weight:600}
.lc-hidnote{display:flex;gap:8px;align-items:flex-start;margin:2px 0 0;color:var(--smoke);font-size:.8rem;line-height:1.5}
.lc-hidnote svg{margin-top:2px}

/* quotes */
.lc-quote{display:flex;align-items:flex-start;gap:8px;max-width:min(100%,560px);padding:7px 12px 8px 10px;margin:0;border:0;border-inline-start:3px solid var(--brass);border-radius:4px 12px 12px 4px;background:color-mix(in srgb,var(--brass) 6%,var(--pit2));text-align:start;font:inherit;font-size:.84rem;color:var(--smoke);cursor:pointer;min-width:0}
[dir="rtl"] .lc-quote{border-radius:12px 4px 4px 12px}
.lc-quote:hover{background:color-mix(in srgb,var(--brass) 11%,var(--pit2))}
.lc-quote>svg{width:14px;height:14px;flex:none;color:var(--brass);margin-top:3px}
.lc-quote-w{display:grid;min-width:0;gap:1px}
.lc-quote-n{font-weight:700;color:var(--chalk);font-size:.8rem}
.lc-quote-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;overflow-wrap:anywhere}
.lc-quote-gone{cursor:default;font-style:italic}

/* photos: 1, 2, 3 and 4 layouts */
.lc-photos{display:grid;gap:3px;border-radius:16px;overflow:hidden;width:100%;max-width:440px;margin-top:2px}
.lc-photos.n1{grid-template-columns:1fr;max-width:380px}
.lc-photos.n2{grid-template-columns:1fr 1fr}
.lc-photos.n3{grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
.lc-photos.n4{grid-template-columns:1fr 1fr}
.lc-photos.n3 .lc-ph:first-child{grid-row:1/3}
.lc-ph{position:relative;display:block;padding:0;border:0;background:var(--pit3);cursor:zoom-in;aspect-ratio:1;overflow:hidden;min-height:0;min-width:0}
.lc-photos.n1 .lc-ph{aspect-ratio:4/3}
.lc-photos.n3 .lc-ph{aspect-ratio:auto}
.lc-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lc-ph:hover img{transform:scale(1.03)}
.lc-ph:focus-visible{outline-offset:-3px}

/* link previews and YouTube */
.lc-cards{display:grid;gap:8px;width:100%;max-width:520px}
.lc-card{position:relative;display:flex;align-items:stretch;width:100%;max-width:520px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--pit);transition:border-color .15s,box-shadow .15s}
.lc-card:hover{border-color:color-mix(in srgb,var(--smoke) 55%,var(--line));box-shadow:0 8px 22px -14px rgba(20,35,26,.35)}
.lc-card-img{flex:0 0 120px;background:var(--pit3);position:relative;min-height:100px}
.lc-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lc-card-b{flex:1;display:grid;align-content:center;gap:3px;padding:12px 16px;min-width:0;text-decoration:none;color:var(--chalk)}
.lc-card-b>b{font-size:.9rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-card-site{font-family:var(--mono);font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-card-d{font-size:.8rem;line-height:1.45;color:var(--smoke);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-card-h{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:.74rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-card-h svg{width:12px;height:12px;flex:none}
.lc-card-x{position:absolute;top:6px;inset-inline-end:6px;width:30px;height:30px;border-radius:50%;border:0;display:grid;place-items:center;background:color-mix(in srgb,var(--pit) 88%,transparent);color:var(--chalk);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.lc-card-x::before{content:"";position:absolute;inset:-7px}
.lc-card-x svg{width:13px;height:13px}
.lc-card-skel .lc-card-img{animation:lcpulse 1.2s ease-in-out infinite}
.lc-card-skel .lc-card-b i{display:block;height:10px;border-radius:5px;background:var(--pit3);animation:lcpulse 1.2s ease-in-out infinite}
.lc-card-skel .lc-card-b i:nth-child(1){width:30%}.lc-card-skel .lc-card-b i:nth-child(2){width:85%;height:12px}.lc-card-skel .lc-card-b i:nth-child(3){width:60%}
.lc-yt{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--pit);width:100%}
.lc-yt-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer}
.lc-yt-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .2s}
.lc-yt-play:hover img{opacity:1}
.lc-yt-play svg{position:absolute;left:50%;top:50%;width:62px;height:44px;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.lc-yt-frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.lc-yt-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 14px;text-decoration:none;color:var(--chalk);font-size:.84rem;font-weight:600}
.lc-yt-cap>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lc-yt-open{display:inline-flex;align-items:center;gap:5px;color:var(--smoke);font-weight:500;font-size:.78rem;white-space:nowrap}
.lc-yt-open svg{width:13px;height:13px}
.lc-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;justify-self:start;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--pit2);text-decoration:none;color:var(--chalk);font-size:.84rem;min-width:0}
.lc-chip:hover{border-color:var(--smoke)}
.lc-chip>svg{width:15px;height:15px;flex:none;color:var(--smoke)}
.lc-chip>svg:first-child{color:var(--brass)}
.lc-chip-h{font-weight:700;white-space:nowrap}
.lc-chip-p{color:var(--smoke);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* reactions */
.lc-rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.lc-rxp{position:relative;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:999px;background:var(--pit);color:var(--chalk);font-size:.8rem;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.lc-rxp::before{content:"";position:absolute;inset:-5px -2px}
.lc-rxp b{font-weight:700;font-variant-numeric:tabular-nums}
.lc-emo{font-size:1.02rem;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--body)}
.lc-rxp:hover:not(:disabled){border-color:var(--smoke)}
.lc-rxp:active:not(:disabled){transform:scale(.94)}
.lc-rxp.on{background:color-mix(in srgb,var(--brass) 11%,var(--pit));border-color:var(--lc-edge);color:var(--brass)}
.lc-rxp:disabled{cursor:default}
.lc-rxadd{color:var(--smoke);padding:0 10px;gap:2px}
.lc-rxadd svg{width:17px;height:17px}
.lc-rxadd span{font-weight:700;font-size:.85rem;margin-top:-1px}
.lc-rxpick{position:absolute;z-index:46;bottom:calc(100% + 6px);inset-inline-start:-6px;display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--pit);border:1px solid var(--line);box-shadow:0 12px 32px rgba(10,20,15,.16);animation:lcpop .16s ease-out}
.lc-rxpick button{width:42px;height:42px;border:0;border-radius:50%;background:none;font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .12s}
.lc-rxpick button:hover,.lc-rxpick button:focus-visible{transform:scale(1.18);background:var(--pit2)}
.lc-rxpick button[aria-checked="true"]{background:color-mix(in srgb,var(--brass) 14%,transparent)}
@keyframes lcpop{from{opacity:0;transform:translateY(4px) scale(.96)}}

/* reactions and actions share a line on touch screens */
.lc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;width:100%}
.lc-foot .lc-acts{margin-inline-start:auto;margin-inline-end:-8px}
.lc-foot .lc-rx:empty{display:none}
@media (max-width:699px),(hover:none){.lc-rxadd{display:none}.lc-foot .lc-rx+.lc-acts{margin-top:0}}
/* actions: always visible and compact on touch */
.lc-acts{display:flex;align-items:center;gap:0;margin-inline-start:-10px}
.lc-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--smoke);font-size:.8rem;font-weight:600;cursor:pointer}
.lc-act svg{width:18px;height:18px;flex:none}
.lc-act:hover,.lc-act[aria-expanded="true"]{color:var(--chalk);background:var(--pit2)}
.lc-dots{padding:0}
.lc-menu{position:absolute;z-index:40;top:calc(100% + 4px);inset-inline-start:0;min-width:236px;display:grid;padding:6px;background:var(--pit);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(10,20,15,.16);animation:lcpop .14s ease-out}
.lc-menu button{display:flex;align-items:center;gap:12px;text-align:start;background:none;border:0;padding:10px 12px;border-radius:10px;font-weight:600;font-size:.88rem;cursor:pointer;min-height:44px;color:var(--chalk);white-space:nowrap}
.lc-menu button svg,.lc-ic0{width:17px;height:17px;flex:none;color:var(--smoke)}
.lc-ic0{display:inline-block}
.lc-menu button:hover,.lc-menu button:focus-visible{background:var(--pit2)}
.lc-menu button.bad,.lc-menu button.bad svg{color:var(--live)}
.lc-menu button[aria-checked="true"]{color:var(--brass)}
.lc-menu button[aria-checked="true"] svg{color:var(--brass)}

/* mouse: the actions float in at the top corner of the message */
@media (hover:hover) and (pointer:fine) and (min-width:700px){
  .lc-acts{position:absolute;z-index:6;top:-6px;inset-inline-end:0;margin:0;padding:3px;gap:1px;background:var(--pit);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px -8px rgba(10,20,15,.28);opacity:0;transform:translateY(3px);pointer-events:none;transition:opacity .14s,transform .14s}
  .lc-row:hover .lc-acts,.lc-acts:focus-within,.lc-hot>.lc-row .lc-acts{opacity:1;transform:none;pointer-events:auto}
  .lc-act{min-height:34px;min-width:34px;border-radius:9px;padding:0 8px}
  .lc-act-reply span{font-size:.78rem}
  .lc-acts .lc-menu{inset-inline-start:auto;inset-inline-end:-4px}
  .lc-acts .lc-rxpick{inset-inline-start:auto;inset-inline-end:-6px}
  :root[data-theme="dark"] .lc-acts{box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
}

/* replies: one level, on a thread line */
.lc-replies{display:grid;margin-inline-start:19px;padding-inline-start:21px;border-inline-start:2px solid color-mix(in srgb,var(--line) 85%,transparent);margin-top:8px}
.lc-r{padding-block:10px}
.lc-r .lc-text{font-size:.93rem}
.lc-r .lc-row{gap:10px}
.lc-morereplies{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 6px;margin-inline-start:-6px;border:0;border-radius:999px;background:none;color:var(--brass);font-weight:700;font-size:.84rem;cursor:pointer}
.lc-morereplies:hover{background:color-mix(in srgb,var(--brass) 8%,transparent)}
.lc-morereplies svg{width:15px;height:15px}
.lc-fewer{color:var(--smoke);font-weight:600}
.lc-faces{display:inline-flex}
.lc-faces .lc-av{width:24px;height:24px;font-size:.56rem;box-shadow:0 0 0 2px var(--pit)}
.lc-faces .lc-av+.lc-av{margin-inline-start:-8px}
.lc-faces:empty{display:none}
.lc-comp-r{padding-block:10px 4px}

.lc-edit{display:grid;gap:8px;width:100%}
.lc-edit textarea{border:1px solid var(--brass);background:var(--pit);box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 14%,transparent);border-radius:14px;min-height:84px}
.lc-edit-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.lc-edit-bar .lc-count{margin-inline-end:auto;margin-inline-start:0}

.lc-newbar{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;margin:10px 0 6px;border:0;border-radius:999px;background:var(--chalk);color:var(--asphalt);font-weight:700;font-size:.84rem;cursor:pointer;position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.lc-newbar svg{width:15px;height:15px;transform:rotate(180deg)}
.lc-showmore{justify-self:stretch;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:6px;border:1px solid var(--line);border-radius:14px;background:var(--pit2);color:var(--chalk);font-weight:700;font-size:.88rem;cursor:pointer}
.lc-showmore:hover{border-color:var(--smoke)}
.lc-showmore-n{min-width:24px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:var(--pit);box-shadow:inset 0 0 0 1px var(--line);font-size:.72rem;color:var(--smoke)}

/* empty state */
.lc-empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:30px 8px 22px}
.lc-empty h3{font-size:1.5rem;margin-top:4px}
.lc-empty p{margin:0;max-width:46ch;color:var(--smoke);font-size:.92rem}
.lc-empty.sm{padding:26px 8px}
.lc-empty-art{position:relative;width:96px;height:72px;margin-bottom:2px}
.lc-empty-art span{position:absolute;display:grid;place-items:center}
.lc-empty-art .b1{inset-inline-start:0;top:6px;width:62px;height:44px;border-radius:16px;border-end-start-radius:5px;background:var(--pit2);box-shadow:inset 0 0 0 1px var(--line)}
.lc-empty-art .b2{inset-inline-end:0;top:24px;width:58px;height:42px;border-radius:16px;border-end-end-radius:5px;background:var(--lc-bub-s);box-shadow:inset 0 0 0 1px var(--lc-edge)}
.lc-empty-art .b1::before,.lc-empty-art .b1::after{content:"";position:absolute;inset-inline-start:12px;height:5px;border-radius:3px;background:var(--line)}
.lc-empty-art .b1::before{top:13px;width:34px}.lc-empty-art .b1::after{top:24px;width:22px}
.lc-empty-art .b3{inset-inline-end:16px;top:33px;width:24px;height:24px;border-radius:50%;background:var(--brass);color:var(--on-brass);font:800 .9rem/1 var(--body)}
.lc-starters{display:grid;gap:8px;width:100%;max-width:520px;margin-top:10px;justify-items:stretch}
.lc-starters-h{font-family:var(--mono);font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-bottom:2px}
.lc-starters button{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border:1px solid var(--line);border-radius:16px;background:var(--pit);color:var(--chalk);font-weight:600;font-size:.9rem;line-height:1.4;text-align:start;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.lc-starters button svg{width:18px;height:18px;flex:none;color:var(--brass)}
.lc-starters button:hover{border-color:var(--lc-edge);background:color-mix(in srgb,var(--brass) 5%,var(--pit));transform:translateY(-1px)}

/* loading */
.lc-skel{display:grid;gap:22px;padding:18px 0 8px}
.lc-skr{display:flex;gap:12px}
.lc-skr.r{margin-inline-start:40px}
.lc-skr .lc-av{background:var(--pit3);box-shadow:none}
.lc-skr div{flex:1;display:grid;gap:9px;padding-top:4px}
.lc-skr i{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--pit3) 0,var(--pit2) 50%,var(--pit3) 100%);background-size:200% 100%;animation:lcshim 1.4s linear infinite}
.lc-skr i.b{height:42px;border-radius:16px;border-start-start-radius:5px}
@keyframes lcshim{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- entry points ---------- */
.lc-stat{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px 0 11px;border:1px solid var(--line);border-radius:999px;background:var(--pit);color:var(--smoke);font-size:.86rem;cursor:pointer;transition:border-color .15s,color .15s}
.lc-stat::before{content:"";position:absolute;inset:-4px 0}
.lc-stat:hover{border-color:var(--brass);color:var(--chalk)}
.lc-stat svg{width:16px;height:16px;flex:none;color:var(--brass)}
.lc-stat b{color:var(--chalk)}
.lc-dotnew{width:7px;height:7px;border-radius:50%;background:var(--live)}
.mbar>.mbar-chat{position:relative;flex:none;width:46px;height:46px;margin-inline-start:auto;border-radius:50%;border:1px solid var(--line);background:var(--pit);color:var(--chalk);display:grid;place-items:center;cursor:pointer}
.mbar-chat svg{width:22px;height:22px}
.mbar-chat-n{position:absolute;top:-3px;inset-inline-end:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--brass);color:var(--on-brass);font:800 .64rem/1 var(--body);box-shadow:0 0 0 2px var(--tab)}
.mbar>.mbar-chat+*{margin-inline-start:0}
/* narrow phones with two buttons in the bar: the chat button shrinks and long labels wrap, so nothing runs off the screen */
@media (max-width:400px){.mbar:has(.mbar-chat):has(.mbar-acts){gap:6px!important;padding-inline:12px!important}.mbar:has(.mbar-acts)>.mbar-chat{width:42px;height:42px}
  .mbar:has(.mbar-chat) .mbar-acts .btn{padding-inline:11px;font-size:.82rem;white-space:normal;line-height:1.15;min-height:44px;text-align:center;max-width:104px}
  .mbar:has(.mbar-chat) .mbar-acts .btn-brass{white-space:nowrap}
  .mbar:has(.mbar-chat):has(.mbar-acts) b{font-size:1rem}}
.lc-peek{display:grid;gap:12px}
@media (max-width:960px){.lc-peek{display:none}}
.lc-peek-h{display:flex;align-items:center;gap:8px}
.lc-peek-h .lc-live{transform:none}
.lc-peek-n{margin-inline-start:auto;font-size:.78rem;color:var(--smoke)}
.lc-peek-l{display:grid;gap:4px}
.lc-peek-i{display:flex;gap:10px;align-items:flex-start;padding:8px;margin-inline:-8px;border:0;border-radius:12px;background:none;text-align:start;cursor:pointer;color:var(--chalk);min-width:0}
.lc-peek-i:hover{background:var(--pit2)}
.lc-peek-t{display:grid;gap:2px;min-width:0;flex:1}
.lc-peek-m{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;min-width:0}
.lc-peek-m bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-peek-w{margin-inline-start:auto;font-weight:500;font-size:.74rem;color:var(--smoke);white-space:nowrap}
.lc-peek-x{font-size:.84rem;line-height:1.45;color:var(--smoke);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lc-peek-e{margin:0;font-size:.86rem;color:var(--smoke)}
.lc-peek-b svg{width:17px;height:17px}
.lc-peek-sk .lc-av{background:var(--pit3);box-shadow:none}
.lc-peek-sk>span:last-child{flex:1;display:grid;gap:6px;padding-top:3px}
.lc-peek-sk i{display:block;height:9px;border-radius:5px;background:var(--pit3);animation:lcpulse 1.2s ease-in-out infinite}
.lc-peek-sk i+i{width:70%}
.lc-pill{position:fixed;left:50%;z-index:58;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--chalk);color:var(--asphalt);font:700 .86rem/1 var(--body);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.28);transform:translateX(-50%);animation:lcpillin .3s cubic-bezier(.2,.8,.2,1)}
.lc-pill svg{width:16px;height:16px}
@keyframes lcpillin{from{opacity:0;transform:translate(-50%,10px)}}
@media (max-width:600px){.lc-pill{left:16px;transform:none;animation-name:lcpillin2}[dir="rtl"] .lc-pill{left:auto;right:16px}}
@keyframes lcpillin2{from{opacity:0;transform:translateY(10px)}}

/* ---------- small screens ---------- */
@media (max-width:600px){
  .lc{--lc-pad:14px}
  .lc-shell{border-radius:18px}
  .lc-head{padding-top:18px}
  .lc-title h2{font-size:1.6rem}
  .lc-subt{font-size:.85rem}
  .lc-av{width:34px;height:34px;font-size:.74rem}
  .lc-av.sm{width:28px;height:28px;font-size:.62rem}
  .lc-comp-av{display:none}
  /* the message runs the full width under the name, so narrow phones keep a comfortable line length */
  .lc-row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:7px;align-items:center}
  .lc-main{display:contents}
  .lc-main>*{grid-column:1/-1;justify-self:start}
  .lc-main>.lc-meta{grid-column:2;padding-top:0}
  .lc-main>.lc-foot{justify-self:stretch}
  .lc-replies{margin-inline-start:16px;padding-inline-start:12px}
  .lc-bub{padding:9px 13px 10px}
  .lc-photos{max-width:none}
  .lc-card-img{flex-basis:96px}
  .lc-card-b{padding:10px 12px}
  .lc-ask{flex-basis:100%;order:-1;justify-content:flex-start;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0 4px 2px 6px;padding-inline:4px;background:none!important}
  .lc-ask i{margin-inline-start:auto}
  .lc-sortbtn{padding:0 10px 0 12px}
  .lc-sortbtn>span:not(.lc-sr){max-width:9ch;overflow:hidden;text-overflow:ellipsis}
  .lc-empty h3{font-size:1.3rem}
}
@media (max-width:360px){
  .lc-head{flex-wrap:wrap}
  .lc-sortw{margin-top:0}
  .lc-replies{margin-inline-start:6px;padding-inline-start:10px}
  .lc-act{padding:0 8px}
  .lc-card-img{flex-basis:76px}
  .lc-filters button{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){.lc-in,.lc-in>.lc-row .lc-bub,.lc-flash>.lc-row .lc-bub,.lc-pv-wait,.lc-skr i,.lc-live::after,.lc-pill,.lc-rxpick,.lc-menu,.lc-signin.lc-nudge{animation:none}.lc-ph img,.lc-acts{transition:none}}