/* Swahili Social 0.17.0 — Instagram / TikTok style comments.
 * Theme-aware: only uses the shared --sts-* variables, so dark and light work.
 * Static file, browser-cacheable. */

.stsc-section,.stsc-overlay,.stsc-asheet{
  --c-bg:var(--sts-bg,#121316);
  --c-panel:var(--sts-panel,#17181c);
  --c-soft:var(--sts-panel2,#1c1e23);
  --c-line:var(--sts-line,#282b31);
  --c-text:var(--sts-text,#f7f5f0);
  --c-muted:var(--sts-muted,#9b9fa7);
  --c-accent:var(--sts-red,#e53935);
  --c-heart:#ff3b5c;
  --c-link:var(--sts-blue,#5ee5d3);
}
html[data-sts-theme="light"] .stsc-section,
html[data-sts-theme="light"] .stsc-overlay,
html[data-sts-theme="light"] .stsc-asheet{--c-heart:#e0245e;--c-link:#1ba693}

.stsc-section *,.stsc-overlay *,.stsc-asheet *{box-sizing:border-box}
:where(.stsc-section button,.stsc-overlay button,.stsc-asheet button,.stsc-section textarea,.stsc-overlay textarea,.stsc-edit textarea){font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:where(.stsc-section button,.stsc-overlay button,.stsc-asheet button){font:inherit}

/* ---------- Comment row ---------- */
.stsc-item{
  display:grid;grid-template-columns:36px minmax(0,1fr) 40px;column-gap:12px;align-items:start;
  padding:10px 14px 6px 16px;position:relative;color:var(--c-text);
}
.stsc-item.is-nested{grid-template-columns:26px minmax(0,1fr) 40px;column-gap:10px;padding:8px 0 4px 0}
.stsc-avatar{display:block;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--c-soft);flex:none;text-decoration:none}
.is-nested>.stsc-avatar{width:26px;height:26px;margin-top:2px}
.stsc-avatar-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.stsc-main{min-width:0}
.stsc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:18px;line-height:1.2}
.stsc-name{color:var(--c-text)!important;font-weight:700;font-size:13.5px;text-decoration:none!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stsc-meta .sts-verified{width:14px;height:14px;flex-basis:14px;font-size:8px}
.stsc-meta .sts-badge-label{height:14px;font-size:8px;padding:0 4px}
.stsc-time,.stsc-edited{color:var(--c-muted);font-size:12px;font-weight:500}
.stsc-edited::before{content:"· "}
.stsc-author-pill{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:999px;background:rgba(229,57,53,.14);color:#ff6b72;font-size:10px;font-weight:800;letter-spacing:.02em}
html[data-sts-theme="light"] .stsc-author-pill{color:#c62828;background:rgba(229,57,53,.1)}
.stsc-text{margin-top:3px;font-size:15px;line-height:1.42;overflow-wrap:anywhere;word-break:break-word;color:var(--c-text)}
.stsc-text .sts-mention,.stsc-text a{color:var(--c-link)!important;font-weight:600;text-decoration:none}
.stsc-text .sts-inline-translation{margin-top:8px}
.stsc-actions{display:flex;align-items:center;gap:18px;margin-top:2px;min-height:28px}
.stsc-act,.stsc-actions .sts-translate-btn{
  appearance:none;-webkit-appearance:none;background:none!important;border:0!important;margin:0;padding:5px 0!important;cursor:pointer;
  color:var(--c-muted)!important;font-size:12.5px!important;font-weight:650!important;line-height:1;white-space:nowrap
}
.stsc-act:hover,.stsc-actions .sts-translate-btn:hover{color:var(--c-text)!important}
.stsc-dots{display:inline-flex;align-items:center;margin-left:-4px;padding:5px 6px!important}
.stsc-dots svg{width:18px;height:18px;fill:currentColor}

/* heart on the right, like Instagram */
.stsc-like{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0 0;color:var(--c-muted)!important;text-decoration:none!important;
  cursor:pointer;min-width:40px;touch-action:manipulation
}
.stsc-heart{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.stsc-like-n{font-size:11.5px;font-weight:650;line-height:1.2;min-height:14px}
.stsc-like.is-liked{color:var(--c-heart)!important}
.stsc-like.is-liked .stsc-heart{fill:currentColor;animation:stscPop .32s cubic-bezier(.2,1.6,.4,1)}
.stsc-like:active .stsc-heart{transform:scale(.86)}
@keyframes stscPop{0%{transform:scale(.6)}60%{transform:scale(1.28)}100%{transform:scale(1)}}

/* replies */
.stsc-toggle{
  grid-column:2 / -1;display:flex;align-items:center;gap:10px;margin:4px 0 2px;padding:6px 0;border:0;background:none;
  color:var(--c-muted);font-size:12.5px;font-weight:650;cursor:pointer;text-align:left
}
.stsc-toggle i{display:block;width:26px;height:1px;background:currentColor;opacity:.45}
.stsc-toggle:hover{color:var(--c-text)}
.stsc-toggle.is-loading{opacity:.6;pointer-events:none}
.stsc-branch{grid-column:2 / -1;min-width:0}
.stsc-branch[hidden]{display:none}
.stsc-children{margin-top:2px}
.stsc-item.is-nested .stsc-text{font-size:14.5px}

/* highlight (new comment, deep link) */
.stsc-item.is-new,.stsc-item:target,.stsc-item.is-target{animation:stscFlash 2.2s ease-out}
@keyframes stscFlash{0%,35%{background:rgba(94,229,211,.16)}100%{background:transparent}}

/* inline edit */
.stsc-edit{margin-top:6px}
.stsc-edit textarea{
  display:block;width:100%;min-height:64px;max-height:180px;padding:10px 12px;border:1px solid var(--c-line);border-radius:14px;
  background:var(--c-soft);color:var(--c-text);font-size:16px;line-height:1.4;resize:none;outline:0;-webkit-appearance:none;appearance:none
}
.stsc-edit textarea:focus{border-color:rgba(94,229,211,.7)}
.stsc-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.stsc-btn{appearance:none;-webkit-appearance:none;border:1px solid var(--c-line);background:transparent;color:var(--c-text);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer}
.stsc-btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:#ffffff}
.stsc-btn:disabled{opacity:.55;cursor:default}

/* ---------- Empty / loading ---------- */
.stsc-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:54px 24px;text-align:center;color:var(--c-muted)}
.stsc-empty svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;opacity:.7;margin-bottom:6px}
.stsc-empty strong{color:var(--c-text);font-size:17px}
.stsc-empty span{font-size:14px}
.stsc-error{padding:40px 24px;text-align:center;color:var(--c-muted);font-size:14px}
.stsc-error button{margin-top:12px}
.stsc-skel{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:14px 16px}
.stsc-skel i{display:block;border-radius:50%;width:36px;height:36px}
.stsc-skel b,.stsc-skel u{display:block;height:10px;border-radius:6px;margin:6px 0 0;text-decoration:none}
.stsc-skel b{width:34%}.stsc-skel u{width:82%;height:12px;margin-top:10px}
.stsc-skel i,.stsc-skel b,.stsc-skel u{background:linear-gradient(90deg,var(--c-soft) 25%,var(--c-line) 37%,var(--c-soft) 63%);background-size:300% 100%;animation:stscShimmer 1.3s ease-in-out infinite}
@keyframes stscShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.stsc-loadmore{display:block;width:100%;padding:14px;border:0;background:none;color:var(--c-muted);font-size:13.5px;font-weight:700;cursor:pointer;text-align:center}
.stsc-loadmore:hover{color:var(--c-text)}
.stsc-sentinel{height:1px}
.stsc-spin{display:block;width:22px;height:22px;margin:14px auto;border:2.5px solid var(--c-line);border-top-color:var(--c-muted);border-radius:50%;animation:stscSpin .7s linear infinite}
@keyframes stscSpin{to{transform:rotate(360deg)}}

/* ---------- Sort control ---------- */
.stsc-sort{display:inline-flex;background:var(--c-soft);border-radius:999px;padding:3px;gap:2px}
.stsc-sort button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--c-muted);padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1.2}
.stsc-sort button.is-active{background:var(--c-bg);color:var(--c-text);box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* ---------- Composer ---------- */
.stsc-form{display:block;margin:0;color:var(--c-text)}
.stsc-context{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;background:var(--c-soft);color:var(--c-muted);font-size:12.5px;font-weight:600}
.stsc-context[hidden]{display:none}
.stsc-context b{color:var(--c-text);font-weight:700}
.stsc-context-x{appearance:none;border:0;background:none;color:var(--c-muted);font-size:22px;line-height:1;padding:0 4px;cursor:pointer}
.stsc-emoji-row{display:flex;gap:2px;padding:8px 10px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stsc-emoji-row::-webkit-scrollbar{display:none}
.stsc-emoji{appearance:none;-webkit-appearance:none;flex:none;border:0;background:none;padding:4px 8px;font-size:23px;line-height:1;cursor:pointer;border-radius:10px;transition:transform .12s}
.stsc-emoji:active{transform:scale(1.25)}
.stsc-field{display:flex;align-items:flex-end;gap:10px;padding:8px 12px 12px}
.stsc-me{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;margin-bottom:3px;background:var(--c-soft)}
.stsc-input-wrap{position:relative;flex:1;min-width:0}
.stsc-input{
  display:block;width:100%;min-height:40px;max-height:124px;margin:0;padding:9px 14px;border:1px solid var(--c-line);border-radius:22px;
  background:var(--c-soft);color:var(--c-text);font-family:inherit;font-size:16px;line-height:1.35;resize:none;outline:0;overflow-y:auto;
  -webkit-appearance:none;appearance:none;box-shadow:none
}
.stsc-input::placeholder{color:var(--c-muted);opacity:1}
.stsc-input:focus{border-color:rgba(94,229,211,.65);background:var(--c-soft)}
.stsc-limit{position:absolute;right:12px;bottom:-15px;font-size:10.5px;color:var(--c-muted);font-weight:650}
.stsc-limit.is-near{color:#ffb020}.stsc-limit.is-max{color:var(--c-heart)}
.stsc-send{
  appearance:none;-webkit-appearance:none;flex:none;width:40px;height:40px;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-accent);color:#ffffff;cursor:pointer;transition:transform .12s,background .15s,opacity .15s;padding:0
}
.stsc-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.stsc-send:disabled{background:var(--c-soft);color:var(--c-muted);cursor:default;opacity:.9}
.stsc-send:not(:disabled):active{transform:scale(.92)}
.stsc-form.is-sending .stsc-send{opacity:.6;pointer-events:none}
.stsc-form-guest,.stsc-form-note{padding:14px 16px;text-align:center;color:var(--c-muted);font-size:14px}
.stsc-login{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 22px;border-radius:999px;background:var(--c-accent);color:#ffffff!important;font-weight:800;font-size:14px;text-decoration:none!important}

/* ---------- Full page section ---------- */
.stsc-section{padding:6px 0 28px;border-top:8px solid var(--c-soft);margin-top:4px}
.stsc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 8px}
.stsc-title{margin:0;font-size:17px;font-weight:800;color:var(--c-text);display:flex;align-items:baseline;gap:7px}
.stsc-total{color:var(--c-muted);font-size:14px;font-weight:650}
.stsc-form-page{border-bottom:1px solid var(--c-line);margin-bottom:4px}
.stsc-form-page .stsc-field{padding-top:6px}

/* ---------- Sheet ---------- */
html.stsc-lock,html.stsc-lock body{overflow:hidden!important}
.stsc-overlay{
  position:fixed;inset:0;z-index:2147483200;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(7,8,9,.6);opacity:0;transition:opacity .22s ease;overscroll-behavior:contain
}
.stsc-overlay[hidden]{display:none}
.stsc-overlay.is-open{opacity:1}
.stsc-panel{
  position:relative;width:100%;max-width:620px;height:min(80dvh,780px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
  background:var(--c-panel);color:var(--c-text);border-radius:22px 22px 0 0;overflow:hidden;
  transform:translate3d(0,100%,0);transition:transform .3s cubic-bezier(.2,.85,.25,1);will-change:transform;
  box-shadow:0 -12px 40px rgba(0,0,0,.35)
}
.stsc-overlay.is-open .stsc-panel{transform:translate3d(0,0,0)}
.stsc-panel.is-dragging{transition:none}
.stsc-grab{display:flex;justify-content:center;padding:9px 0 2px;cursor:grab;touch-action:none;flex:none}
.stsc-grab i{display:block;width:38px;height:4px;border-radius:4px;background:var(--c-line)}
.stsc-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 12px 10px 18px;border-bottom:1px solid var(--c-line);flex:none;touch-action:none}
.stsc-sheet-title{margin:0;font-size:16px;font-weight:800;display:flex;align-items:baseline;gap:7px}
.stsc-sheet-title span{font-size:13.5px;font-weight:650;color:var(--c-muted)}
.stsc-head-right{display:flex;align-items:center;gap:8px}
.stsc-close{appearance:none;-webkit-appearance:none;width:34px;height:34px;border:0;border-radius:50%;background:var(--c-soft);color:var(--c-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.stsc-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.stsc-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 0 10px}
.stsc-foot{flex:none;border-top:1px solid var(--c-line);background:var(--c-panel);padding-bottom:env(safe-area-inset-bottom,0px)}
.stsc-foot:empty{display:none}

@media (min-width:760px){
  .stsc-overlay{align-items:center}
  .stsc-panel{border-radius:20px;height:min(720px,86dvh);transform:translate3d(0,26px,0) scale(.98);opacity:0;transition:transform .25s cubic-bezier(.2,.85,.25,1),opacity .2s ease}
  .stsc-overlay.is-open .stsc-panel{transform:none;opacity:1}
  .stsc-grab{display:none}
  .stsc-sheet-head{padding-top:14px}
}

/* ---------- Action sheet (copy / edit / delete) ---------- */
.stsc-asheet{position:fixed;inset:0;z-index:2147483300;display:flex;align-items:flex-end;justify-content:center;background:rgba(7,8,9,.55);opacity:0;transition:opacity .18s}
.stsc-asheet[hidden]{display:none}
.stsc-asheet.is-open{opacity:1}
.stsc-asheet-card{width:100%;max-width:460px;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(24px);transition:transform .22s cubic-bezier(.2,.85,.25,1)}
.stsc-asheet.is-open .stsc-asheet-card{transform:none}
.stsc-asheet-list{background:var(--c-panel);border:1px solid var(--c-line);border-radius:16px;overflow:hidden}
.stsc-asheet button{appearance:none;-webkit-appearance:none;display:block;width:100%;padding:15px 16px;border:0;background:transparent;color:var(--c-text);font-size:16px;font-weight:600;text-align:center;cursor:pointer}
.stsc-asheet-list button+button{border-top:1px solid var(--c-line)}
.stsc-asheet button.danger{color:var(--c-heart);font-weight:750}
.stsc-asheet button:active{background:var(--c-soft)}
.stsc-asheet .stsc-asheet-cancel{margin-top:8px;background:var(--c-panel);border:1px solid var(--c-line);border-radius:16px;font-weight:750}
.stsc-asheet-title{padding:14px 16px 4px;text-align:center;color:var(--c-muted);font-size:13px}
@media (min-width:760px){.stsc-asheet{align-items:center}.stsc-asheet-card{padding-bottom:10px}}

.stsc-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2147483400;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:999px;background:#26282c;color:#ffffff;font-size:13.5px;font-weight:650;box-shadow:0 8px 28px rgba(0,0,0,.35)}

@media (prefers-reduced-motion:reduce){
  .stsc-panel,.stsc-overlay,.stsc-asheet,.stsc-asheet-card{transition:none!important}
  .stsc-skel i,.stsc-skel b,.stsc-skel u,.stsc-spin,.stsc-like.is-liked .stsc-heart,.stsc-item.is-new{animation:none!important}
}
@media (max-width:380px){
  .stsc-item{padding-left:12px;column-gap:10px}
  .stsc-emoji{padding:4px 6px;font-size:21px}
}