/* Social by SaryOS — docks inside the Portal frame (portal.js TOOL_ROOTS). */
#ind-tool-social-overlay { position:fixed; inset:0; z-index:10080; display:none; color:var(--lg-text,#e9edf7); font:13px/1.45 Inter,ui-sans-serif,system-ui,sans-serif; background:#0b1019; }
#ind-tool-social-overlay.active { display:block; }
#ind-tool-social-overlay *, #ind-tool-social-overlay *::before, #ind-tool-social-overlay *::after { box-sizing:border-box; }
#ind-tool-social-overlay .ss-shell { height:100%; display:flex; flex-direction:column; background:var(--lg-panel,linear-gradient(135deg,#101827,#0a0f18 60%,#10131d)); --ss:var(--lg-accent,#0ea5e9); }
#ind-tool-social-overlay .ss-head { min-height:58px; display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(10,15,25,.94); }
#ind-tool-social-overlay .ss-brand { display:flex; flex-direction:column; line-height:1.08; }
#ind-tool-social-overlay .ss-brand-name { color:#fff; font-size:16px; font-weight:750; }
#ind-tool-social-overlay .ss-brand-name i { color:var(--ss); }
#ind-tool-social-overlay .ss-brand-by { color:#8ba0bd; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
#ind-tool-social-overlay .ss-plan { color:#cbd5e1; font-size:12px; }
#ind-tool-social-overlay .ss-badge { padding:3px 9px; border-radius:999px; color:#062033; background:var(--ss); font-size:11px; font-weight:700; }
#ind-tool-social-overlay .ss-close { margin-left:auto; width:31px; height:31px; border:0; border-radius:7px; color:#b7c5d8; background:transparent; cursor:pointer; }
#ind-tool-social-overlay .ss-close:hover { color:#fff; background:#7f1d1d; }
#ind-tool-social-overlay .ss-notice { padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.08); background:#122033; color:#cfe3f7; }
#ind-tool-social-overlay .ss-notice.is-error { background:#3a1418; color:#fecaca; }
#ind-tool-social-overlay .ss-notice.is-success { background:#0f2d22; color:#bbf7d0; }
#ind-tool-social-overlay .ss-body { flex:1; min-height:0; overflow:auto; padding:16px; }
#ind-tool-social-overlay .ss-grid { display:grid; grid-template-columns:minmax(220px,280px) minmax(300px,1fr) minmax(260px,360px); gap:14px; align-items:start; }
#ind-tool-social-overlay .ss-card { padding:14px; border:1px solid var(--lg-line,rgba(148,163,184,.2)); border-radius:12px; background:var(--lg-card,#111a28); }
#ind-tool-social-overlay .ss-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
#ind-tool-social-overlay .ss-card-head.ss-sub { margin:14px 0 8px; }
#ind-tool-social-overlay h3, #ind-tool-social-overlay h4 { margin:0; color:#fff; font-size:14px; }
#ind-tool-social-overlay h4 { font-size:12px; color:#a9b8ca; text-transform:uppercase; letter-spacing:.06em; }
#ind-tool-social-overlay .ss-count { color:#8ba0bd; font-size:12px; }
#ind-tool-social-overlay .ss-muted { color:var(--lg-muted,#8496ac); margin:6px 0; }
#ind-tool-social-overlay .ss-account { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid rgba(148,163,184,.12); }
#ind-tool-social-overlay .ss-account.is-over { opacity:.55; }
#ind-tool-social-overlay .ss-account img, #ind-tool-social-overlay .ss-avatar { width:32px; height:32px; flex:none; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#1c2a40; }
#ind-tool-social-overlay .ss-account-text { min-width:0; flex:1; display:flex; flex-direction:column; }
#ind-tool-social-overlay .ss-account-text strong { color:#f1f5f9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ind-tool-social-overlay .ss-account-text small { color:#8ba0bd; }
#ind-tool-social-overlay .ss-icon, #ind-tool-social-overlay .ss-link { border:0; background:transparent; color:#9fb2c8; cursor:pointer; font:inherit; padding:4px 6px; border-radius:6px; }
#ind-tool-social-overlay .ss-icon:hover, #ind-tool-social-overlay .ss-link:hover { color:#fff; background:rgba(148,163,184,.14); }
#ind-tool-social-overlay .ss-connect-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
#ind-tool-social-overlay .ss-connect { display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px; border:1px solid rgba(148,163,184,.2); border-radius:9px; background:#152033; color:#dbe7f5; cursor:pointer; font:inherit; font-size:11px; }
#ind-tool-social-overlay .ss-connect i { font-size:17px; }
#ind-tool-social-overlay .ss-connect:hover:not(:disabled) { border-color:var(--ss); color:#fff; }
#ind-tool-social-overlay .ss-connect:disabled { opacity:.4; cursor:default; }
#ind-tool-social-overlay .ss-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
#ind-tool-social-overlay .ss-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid rgba(148,163,184,.25); border-radius:999px; background:#152033; color:#b8c7d9; cursor:pointer; font:inherit; }
#ind-tool-social-overlay .ss-chip.is-on { border-color:var(--ss); color:#fff; background:color-mix(in srgb,var(--ss) 22%,#152033); }
#ind-tool-social-overlay textarea { width:100%; min-height:150px; resize:vertical; padding:10px; border:1px solid rgba(148,163,184,.3); border-radius:9px; background:#0d1521; color:#edf4ff; font:14px/1.5 inherit; outline:none; }
#ind-tool-social-overlay textarea:focus, #ind-tool-social-overlay input[type="datetime-local"]:focus { border-color:var(--ss); }
#ind-tool-social-overlay .ss-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:10px; }
#ind-tool-social-overlay .ss-meta { justify-content:flex-end; margin-top:4px; color:#8496ac; font-size:11px; }
#ind-tool-social-overlay .ss-over { color:#fca5a5; font-weight:700; }
#ind-tool-social-overlay .ss-media { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#ind-tool-social-overlay .ss-thumb { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; background:#1c2a40; }
#ind-tool-social-overlay .ss-thumb img, #ind-tool-social-overlay .ss-thumb video { width:100%; height:100%; object-fit:cover; }
#ind-tool-social-overlay .ss-thumb button { position:absolute; top:3px; right:3px; width:20px; height:20px; border:0; border-radius:50%; background:#000a; color:#fff; cursor:pointer; font-size:11px; }
#ind-tool-social-overlay .ss-drive { margin-top:10px; padding:10px; border:1px solid rgba(148,163,184,.2); border-radius:9px; background:#0d1521; }
#ind-tool-social-overlay .ss-drive-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:6px; max-height:260px; overflow:auto; }
#ind-tool-social-overlay .ss-drive-item { position:relative; aspect-ratio:1; padding:0; border:2px solid transparent; border-radius:7px; overflow:hidden; background:#1c2a40; cursor:pointer; }
#ind-tool-social-overlay .ss-drive-item.is-on { border-color:var(--ss); }
#ind-tool-social-overlay .ss-drive-item img, #ind-tool-social-overlay .ss-drive-item video { width:100%; height:100%; object-fit:cover; }
#ind-tool-social-overlay .ss-drive-item i { position:absolute; left:6px; bottom:6px; color:#fff; text-shadow:0 1px 3px #000; }
#ind-tool-social-overlay .ss-when label { display:inline-flex; align-items:center; gap:5px; color:#cbd5e1; cursor:pointer; }
#ind-tool-social-overlay input[type="datetime-local"] { padding:5px 8px; border:1px solid rgba(148,163,184,.3); border-radius:7px; background:#0d1521; color:#edf4ff; font:inherit; color-scheme:dark; outline:none; }
#ind-tool-social-overlay .ss-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 12px; border:1px solid rgba(148,163,184,.25); border-radius:8px; background:#152033; color:#dbe7f5; cursor:pointer; font:inherit; }
#ind-tool-social-overlay .ss-btn:hover:not(:disabled) { color:#fff; border-color:var(--ss); }
#ind-tool-social-overlay .ss-btn.is-primary { border-color:transparent; background:var(--ss); color:#062033; font-weight:700; }
#ind-tool-social-overlay .ss-btn:disabled { opacity:.5; cursor:default; }
#ind-tool-social-overlay .ss-send { width:100%; margin-top:14px; padding:10px; }
#ind-tool-social-overlay .ss-post { padding:10px 0; border-bottom:1px solid rgba(148,163,184,.12); }
#ind-tool-social-overlay .ss-post:last-child { border-bottom:0; }
#ind-tool-social-overlay .ss-post-top { display:flex; align-items:center; gap:8px; }
#ind-tool-social-overlay .ss-post-top small { color:#8ba0bd; flex:1; }
#ind-tool-social-overlay .ss-post p { margin:6px 0; color:#dbe7f5; white-space:pre-wrap; word-break:break-word; }
#ind-tool-social-overlay .ss-post-media { width:100%; max-height:160px; object-fit:cover; border-radius:8px; margin-top:6px; }
#ind-tool-social-overlay .ss-status { padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; background:#1c2a40; color:#cbd5e1; }
#ind-tool-social-overlay .ss-status.is-scheduled { background:#0c3550; color:#bae6fd; }
#ind-tool-social-overlay .ss-status.is-published { background:#0f3a28; color:#bbf7d0; }
#ind-tool-social-overlay .ss-status.is-failed, #ind-tool-social-overlay .ss-status.is-partial { background:#4a1a1f; color:#fecaca; }
#ind-tool-social-overlay .ss-post-targets { display:flex; flex-wrap:wrap; gap:8px; color:#9fb2c8; font-size:12px; }
#ind-tool-social-overlay .ss-post-targets span { display:inline-flex; align-items:center; gap:5px; }
#ind-tool-social-overlay .ss-post-targets .is-failed { color:#fca5a5; }
#ind-tool-social-overlay .ss-post-targets a { color:#7dd3fc; }
#ind-tool-social-overlay .ss-empty { max-width:480px; margin:60px auto; text-align:center; color:#cbd5e1; }
#ind-tool-social-overlay .ss-empty h3 { font-size:20px; margin-bottom:8px; }
@media (max-width:1100px) { #ind-tool-social-overlay .ss-grid { grid-template-columns:1fr 1fr; } #ind-tool-social-overlay .ss-compose { grid-column:1 / -1; grid-row:1; } }
@media (max-width:700px) { #ind-tool-social-overlay .ss-grid { grid-template-columns:1fr; } #ind-tool-social-overlay .ss-body { padding:10px; } }
#ind-tool-social-overlay .ss-extras strong { min-width:22px; text-align:center; color:#fff; font-size:15px; }

/* A picture the browser cannot draw (an iPhone HEIC, a TIFF) shows its name;
   it is still posted, as a JPG. */
.ss-thumb-name { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; box-sizing: border-box; font-size: 10.5px; line-height: 1.2; text-align: center; word-break: break-all; color: var(--lg-muted, #93a3bd); background: var(--lg-card, rgba(255, 255, 255, .05)); }

/* The Drive inside Social fills the panel (owner, 2026-09-29: "make the
   gallery window bigger … the gallery in schedule, not actual Drive"). It was
   a strip of 78px squares, 260px high, inside the post card. */
#ind-tool-social-overlay .ss-drive {
  position: absolute; inset: 64px 12px 12px; z-index: 6; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0;
  border-radius: 16px; border: 1px solid var(--lg-ctl-line, rgba(148, 163, 184, .3)); background: var(--lg-modal, #0d1521);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); backdrop-filter: var(--lg-blur, none); -webkit-backdrop-filter: var(--lg-blur, none);
}
#ind-tool-social-overlay .ss-drive .ss-card-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin: 0; }
#ind-tool-social-overlay .ss-drive .ss-card-head h4 { margin: 0; font-size: 18px; }
#ind-tool-social-overlay .ss-drive-count { margin-right: auto; font-size: 12px; opacity: .7; }
#ind-tool-social-overlay .ss-drive-grid { flex: 1 1 auto; min-height: 0; max-height: none; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); grid-auto-rows: 150px; gap: 12px; align-content: start; padding: 2px; overflow-y: auto; }
#ind-tool-social-overlay .ss-drive-item { border-radius: 12px; border-width: 3px; aspect-ratio: auto; width: 100%; height: 100%; box-sizing: border-box; }
#ind-tool-social-overlay .ss-drive-item.is-on { box-shadow: 0 0 0 1px var(--ss), 0 0 24px color-mix(in srgb, var(--ss) 45%, transparent); }
#ind-tool-social-overlay .ss-drive-item i { font-size: 20px; left: 50%; bottom: 50%; transform: translate(-50%, 50%); }
#ind-tool-social-overlay .ss-drive-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 11px; color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
html.light-mode #ind-tool-social-overlay .ss-drive { background: #fff; }
@media (max-width: 700px) { #ind-tool-social-overlay .ss-drive { inset: 56px 6px 6px; } #ind-tool-social-overlay .ss-drive-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: 110px; } }