/* WOTTT CRM 04.55.2 r12 — Elegant Social Workspace
 * Presentation-only. No changes to Social view templates, action handlers, permission
 * gates, provider moderation/reply contracts, CRM linking or source attribution.
 * Color language matches the accepted Leads / Dashboard / Opportunities rollout.
 */
.social-shell{
  --soc-line:color-mix(in srgb,var(--ui-line,#dae3ed) 80%,#bdcce0);
  --soc-soft:color-mix(in srgb,var(--ui-surface,#fff) 80%,#edf3ff);
  --soc-shadow:0 8px 26px rgba(28,53,99,.055);
  --soc-ink:var(--ui-ink,#26364a);
  --soc-muted:var(--ui-muted,#65768d);
}
/* Shared chrome: retain the actual navigation and action wiring. */
.social-shell>.social-nav{width:204px;min-width:204px;border-right:1px solid var(--soc-line);background:var(--ui-surface)}
.social-shell .social-nav .inbox-nav-head{padding:0 17px;border-bottom-color:var(--soc-line)}
.social-shell .social-nav .inbox-nav-head h1{font-size:16px;letter-spacing:-.35px}
.social-shell .social-nav .foundation-badge{border-radius:8px;background:color-mix(in srgb,var(--ui-accent-soft,#eef4ff) 82%,transparent);font-size:9px;font-weight:700;padding:4px 6px}
.social-shell .social-nav .inbox-nav-section{margin:0 13px;padding:14px 0 10px;border-color:var(--soc-line)}
.social-shell .social-nav .section-label{font-size:10px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--soc-muted);padding:0 10px 7px}
.social-shell .social-nav-item{min-height:35px;border-radius:9px;margin:2px 0;font-size:12px;padding:8px 11px;transition:background .12s ease,color .12s ease}
.social-shell .social-nav-item:hover:not(:disabled):not(.unavailable){background:var(--soc-soft)}
.social-shell .social-nav-item.active{background:var(--ui-accent-soft);color:var(--ui-accent);font-weight:700;box-shadow:inset 3px 0 0 var(--ui-accent)}
.social-shell .social-nav-item .nav-count{margin-left:auto}
.social-shell .social-nav-item.unavailable{font-size:11px;opacity:.65}
.social-shell .social-main{background:var(--ui-bg,#f7f9fe);min-width:0}
.social-shell .social-main .professional-topbar{border-bottom:1px solid var(--soc-line);padding:10px 22px;background:var(--ui-surface);min-height:59px;height:59px}
.social-shell .social-main .topbar-title h2{font-size:19px;font-weight:750;letter-spacing:-.55px;color:var(--soc-ink)}
.social-shell .social-main .topbar-title h2:before{content:"";display:inline-block;width:7px;height:21px;border-radius:5px;background:linear-gradient(180deg,#6e8ff0,#b371d9);margin-right:10px;vertical-align:-5px}
.social-shell .social-main .topbar-actions{align-items:center;gap:8px}
.social-shell .social-main .topbar-actions :is(select,button){min-height:35px;border-radius:9px;border:1px solid var(--soc-line);background:var(--ui-surface);color:var(--soc-ink);font-size:11px;padding:7px 10px}
.social-shell .social-main .topbar-actions :is(select,button):hover:not(:disabled){border-color:var(--ui-accent)}
/* Scroll region and digest cards — metrics come exclusively from loaded authorized rows. */
.social-shell .social-dashboard{padding:20px 22px 8px;gap:0;background:
  radial-gradient(ellipse 75% 34% at 4% 0%,rgba(80,131,241,.078),transparent 80%),
  radial-gradient(ellipse 55% 40% at 100% 18%,rgba(152,109,208,.055),transparent 80%),
  var(--ui-bg,#f8faff)}
.social-shell .social-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:0 0 12px}
.social-shell .social-kpis>div{position:relative;overflow:hidden;min-width:0;border:1px solid var(--soc-line);border-radius:14px;box-shadow:var(--soc-shadow);padding:16px 17px 15px;background:var(--ui-surface);isolation:isolate}
.social-shell .social-kpis>div:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--soc-tint,#6a91e6);border-radius:0 4px 4px 0}
.social-shell .social-kpis>div:after{content:"";position:absolute;right:-20px;top:-33px;width:100px;height:100px;border-radius:50%;background:var(--soc-halo,#e9f1ff);z-index:-1;opacity:.72}
.social-shell .social-kpis>div:nth-child(1){--soc-tint:#5b86e5;--soc-halo:#e2ecff}
.social-shell .social-kpis>div:nth-child(2){--soc-tint:#e17e68;--soc-halo:#ffeae2}
.social-shell .social-kpis>div:nth-child(3){--soc-tint:#4db08c;--soc-halo:#dff8ed}
.social-shell .social-kpis>div:nth-child(4){--soc-tint:#9673dc;--soc-halo:#eee7ff}
.social-shell .social-kpis span{font-size:10px;font-weight:750;letter-spacing:.07em;color:var(--soc-muted)}
.social-shell .social-kpis strong{font-size:29px;line-height:1.1;font-weight:780;letter-spacing:-1.1px;margin-top:10px;color:var(--soc-ink);font-variant-numeric:tabular-nums}
/* Provider badges are existing configuration labels, not new runtime health metrics. */
.social-shell .social-connection-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:14px}
.social-shell .social-provider{border:1px solid var(--soc-line);border-radius:12px;padding:11px 13px;box-shadow:0 3px 12px rgba(28,53,99,.025);background:var(--ui-surface);gap:10px;min-width:0}
.social-shell .social-provider .platform-icon{width:29px;height:29px;min-width:29px;border-radius:9px;display:grid;place-items:center;background:var(--soc-soft)}
.social-shell .social-provider strong{font-size:12px;font-weight:750;color:var(--soc-ink)}
.social-shell .social-provider small{font-size:10px;line-height:1.4;color:var(--soc-muted)}
.social-shell .social-provider.connected:first-child{border-color:color-mix(in srgb,#5b80dc 34%,var(--soc-line))}
.social-shell .social-provider.connected:nth-child(2){border-color:color-mix(in srgb,#bd75ba 36%,var(--soc-line))}
.social-shell .social-provider.disabled{opacity:.73;border-style:dashed}
/* Queue header and filters. */
.social-shell .social-list-head{align-items:center;padding:15px 17px 13px;border:1px solid var(--soc-line);border-radius:14px 14px 0 0;box-shadow:var(--soc-shadow);background:var(--ui-surface);gap:14px}
.social-shell .social-list-head h3{font-size:16px;font-weight:760;letter-spacing:-.3px;color:var(--soc-ink);margin:0 0 4px}
.social-shell .social-list-head p{font-size:10px;color:var(--soc-muted)}
.social-shell .social-head-filters{align-items:end;gap:9px}
.social-shell .social-head-filters label{font-size:10px;font-weight:700;color:var(--soc-muted);gap:5px}
.social-shell .social-head-filters select{min-height:36px;min-width:124px;border:1px solid var(--soc-line);border-radius:9px;background:var(--ui-surface);color:var(--soc-ink);font-size:11px;font-weight:600;padding:7px 23px 7px 9px}
.social-shell .social-head-filters select:hover{border-color:var(--ui-accent)}
.social-shell .social-leads-list{margin-bottom:12px;padding:10px;display:block;border:1px solid var(--soc-line);border-top:0;border-radius:0 0 14px 14px;background:var(--ui-surface);scrollbar-gutter:stable}
/* Candidate cards. Intents use existing server classification only. */
.social-shell .social-lead-card{position:relative;grid-template-columns:35px minmax(0,1fr) 58px;gap:12px;margin:0 0 10px;padding:15px 16px;border:1px solid var(--soc-line);border-radius:12px;background:var(--ui-surface);box-shadow:0 3px 13px rgba(34,55,96,.025);transition:border-color .14s ease,box-shadow .14s ease}
.social-shell .social-lead-card:last-child{margin-bottom:0;border:1px solid var(--soc-line)}
.social-shell .social-lead-card:hover{border-color:color-mix(in srgb,var(--ui-accent) 30%,var(--soc-line));background:var(--ui-surface);box-shadow:0 7px 22px rgba(36,65,110,.075)}
.social-shell .social-lead-card.selected-detail{border-color:var(--ui-accent);box-shadow:inset 4px 0 0 var(--ui-accent),0 7px 19px rgba(37,94,167,.07)}
.social-shell .social-lead-card.expanded{background:var(--ui-surface);border-color:color-mix(in srgb,var(--ui-accent) 40%,var(--soc-line))}
.social-shell .social-lead-platform{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;border:1px solid var(--soc-line);background:var(--soc-soft);padding:4px}
.social-shell .social-lead-platform .platform-icon{margin:0}
.social-shell .social-lead-title{align-items:center;gap:8px;flex-wrap:wrap}
.social-shell .social-lead-title>strong{font-size:13px;font-weight:760;color:var(--soc-ink);line-height:1.5;min-width:0}
.social-shell .social-lead-title>span{gap:6px;flex-wrap:wrap;justify-content:flex-start}
.social-shell .social-lead-main>p{margin:9px 0;font-size:12px;line-height:1.65;color:var(--soc-ink)}
.social-shell .social-intent,.social-shell .social-status{font-size:10px;padding:4px 8px;line-height:1.3;font-weight:650}
.social-shell .social-intent strong{font-size:10px}
.social-shell .social-intent small{font-size:9px}
.social-shell .social-intent-hot{background:#fff0e8;color:#a34933;border-color:#f7d8c9}
.social-shell .social-intent-interested{background:#eaf8ef;color:#206e49;border-color:#d6eedd}
.social-shell .social-intent-potential{background:#fff5da;color:#835d10;border-color:#efdfaa}
.social-shell .social-intent-unclassified{background:#ecf1fa;color:#4d6291;border-color:#d8e1f2}
.social-shell .social-status-new{background:#edf3ff;color:#305da8}
.social-shell .social-status-assigned{background:#ece8ff;color:#6552ae}
.social-shell .social-status-promoted{background:#e5f6ed;color:#22744d}
.social-shell .social-lead-meta{gap:6px;color:var(--soc-muted);font-size:10px;line-height:1.5}
.social-shell .social-lead-meta>*{border-right:0;padding:3px 7px;border-radius:7px;background:var(--soc-soft);max-width:100%;overflow-wrap:anywhere}
.social-shell .social-lead-meta>*:first-child{color:var(--ui-accent);background:var(--ui-accent-soft);font-weight:650}
.social-shell .social-lead-side{align-self:start;text-align:center}
.social-shell .social-score{width:43px;height:43px;margin:0 auto 6px;border-radius:13px;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:15px;font-variant-numeric:tabular-nums}
.social-shell .social-lead-side small{font-size:9px;color:var(--soc-muted)}
.social-shell .social-origin{font-size:11px}
.social-shell .social-origin summary{font-size:11px;font-weight:650}
.social-shell .social-origin p{font-size:11px;line-height:1.55;background:var(--soc-soft);color:var(--soc-ink);padding:9px 11px}
/* Distinguish read-only detail from intentional actions. */
.social-shell .social-card-actions{margin-top:12px;gap:7px}
.social-shell .social-card-actions button,.social-shell .social-crm-actions button,.social-shell .social-moderation-actions button{min-height:31px;border-radius:9px;font-size:11px;font-weight:650;padding:7px 11px;white-space:normal;text-align:center}
.social-shell .social-card-actions .social-action-button{border:1px solid var(--soc-line);color:var(--ui-accent);background:var(--ui-surface)}
.social-shell .social-card-actions .social-action-button:hover:not(:disabled){background:var(--ui-accent-soft);border-color:var(--ui-accent)}
.social-shell .social-card-actions [data-action="social-start-ignore"]{color:var(--soc-muted)}
.social-shell .social-card-actions [data-action="social-start-ignore"]:hover:not(:disabled){background:var(--ui-danger-bg);color:var(--ui-danger);border-color:var(--ui-danger)}
.social-shell .social-card-actions .social-create-lead{background:var(--ui-accent);border:1px solid var(--ui-accent);color:var(--ui-on-accent);box-shadow:none}
.social-shell .social-card-actions .social-create-lead:hover:not(:disabled){filter:brightness(.94);background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent)}
.social-shell .social-card-result{gap:7px;flex-wrap:wrap;border-top-color:var(--soc-line);margin-top:12px;padding-top:9px}
.social-shell .social-card-result strong{font-size:11px;color:var(--ui-success)}
.social-shell .social-card-result span{font-size:10px;color:var(--soc-muted)}
.social-shell .social-card-result.muted strong{color:var(--soc-muted)}
.social-shell .social-action-panel{border:1px solid var(--soc-line);border-radius:12px;background:var(--soc-soft);padding:13px;gap:11px}
.social-shell .social-action-panel.warning{border-color:color-mix(in srgb,var(--ui-warning,#b17e37) 35%,var(--soc-line));background:var(--ui-note)}
.social-shell .social-action-panel.promote{border-color:color-mix(in srgb,var(--ui-accent) 32%,var(--soc-line));background:var(--ui-accent-soft)}
.social-shell .social-action-panel>div:first-child strong{font-size:12px;color:var(--soc-ink)}
.social-shell .social-action-panel>div:first-child span{font-size:10px;line-height:1.6;color:var(--soc-muted)}
.social-shell .social-action-panel label{font-size:11px;color:var(--soc-ink)}
.social-shell .social-action-panel :is(input,select){min-height:35px;font-size:12px;color:var(--soc-ink);background:var(--ui-surface);border-color:var(--soc-line)}
.social-shell .social-assignee-grid button{min-height:38px;font-size:11px;background:var(--ui-surface);border:1px solid var(--soc-line);border-radius:9px}
.social-shell .social-assignee-grid em{font-size:10px}
.social-shell .social-panel-buttons button{min-height:33px;padding:8px 12px;border-radius:9px;font-size:11px}
/* The existing drawer remains the authoritative source/CRM/thread/audit surface. */
.social-shell .social-detail-backdrop{background:rgba(17,30,48,.32);backdrop-filter:blur(2px)}
.social-shell .social-detail-drawer{width:min(720px,68vw);background:var(--ui-bg);box-shadow:-18px 0 48px rgba(10,28,52,.2);border-left:1px solid var(--soc-line)}
.social-shell .social-detail-drawer>header{padding:18px 21px;border-bottom:1px solid var(--soc-line);background:var(--ui-surface)}
.social-shell .social-detail-title{gap:13px}
.social-shell .social-detail-title h2{font-size:21px;letter-spacing:-.4px;font-weight:770;color:var(--soc-ink)}
.social-shell .social-detail-body{padding:17px 19px 25px;gap:15px;scrollbar-gutter:stable;background:var(--ui-bg)}
.social-shell .social-detail-section{border-radius:13px;border:1px solid var(--soc-line);padding:16px;box-shadow:0 3px 15px rgba(29,52,82,.035);background:var(--ui-surface)}
.social-shell .social-detail-section h3{font-size:14px;color:var(--soc-ink);letter-spacing:-.2px}
.social-shell .social-detail-section .section-label{font-size:9px;font-weight:720;letter-spacing:.06em}
.social-shell .social-detail-datum,.social-shell .social-source-post,.social-shell .social-source-comment,.social-shell .social-thread-entry,.social-shell .social-crm-card,.social-shell .social-detail-block{border-color:var(--soc-line);background:var(--ui-surface);border-radius:10px}
.social-shell .social-detail-datum span{font-size:10px;color:var(--soc-muted)}
.social-shell .social-detail-datum strong{font-size:11px;color:var(--soc-ink);overflow-wrap:anywhere}
.social-shell .social-source-post p,.social-shell .social-source-comment blockquote,.social-shell .social-thread-entry p{font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.social-shell .social-public-reply,.social-shell .social-moderation{border:1px solid var(--soc-line);border-radius:12px;background:var(--soc-soft);padding:13px;gap:10px}
.social-shell .social-public-reply.unavailable{background:var(--ui-soft)}
.social-shell .social-public-reply strong,.social-shell .social-moderation-head strong{font-size:12px;color:var(--soc-ink)}
.social-shell .social-public-reply span,.social-shell .social-moderation-head span,.social-shell .social-moderation-note{font-size:10px;line-height:1.65;color:var(--soc-muted)}
.social-shell .social-public-reply textarea{min-height:90px;font-size:12px;line-height:1.6;background:var(--ui-surface);color:var(--soc-ink);border:1px solid var(--soc-line)}
.social-shell .social-public-reply .primary-button{min-height:34px;font-size:11px;padding:8px 12px;border-radius:9px}
.social-shell .social-moderation-state{font-size:10px!important;padding:6px 10px}
.social-shell .social-moderation-note{color:var(--soc-muted)}
.social-shell .social-moderation-confirm{border-radius:11px;padding:12px;background:var(--ui-note)}
.social-shell .social-moderation-confirm strong{font-size:12px}
.social-shell .social-moderation-confirm p{font-size:11px;line-height:1.6}
.social-shell .social-no-inbox{font-size:10px;background:var(--ui-soft);color:var(--soc-muted)}
.social-shell .social-empty{padding:58px 24px}
.social-shell .social-empty .empty-icon{display:block;margin-bottom:12px}
.social-shell .social-empty h3{font-size:17px;color:var(--soc-ink)}
.social-shell .social-empty p{font-size:12px;color:var(--soc-muted)}
.social-shell :is(button,select,input,textarea,summary):focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
/* Dark mode: match shared theme variables while retaining understandable colored cues. */
html[data-theme="dark"] .social-shell{--soc-line:color-mix(in srgb,var(--ui-line) 80%,#52647b);--soc-soft:var(--ui-soft);--soc-shadow:0 8px 24px rgba(0,0,0,.17)}
html[data-theme="dark"] .social-shell .social-dashboard{background:var(--ui-bg)}
html[data-theme="dark"] .social-shell .social-kpis>div:after{opacity:.09}
html[data-theme="dark"] .social-shell .social-intent-hot{background:#472d28;color:#ffd1ba;border-color:#654039}
html[data-theme="dark"] .social-shell .social-intent-interested{background:#203e31;color:#b2e6c6;border-color:#30553f}
html[data-theme="dark"] .social-shell .social-intent-potential{background:#463b22;color:#f5dc9d;border-color:#67532b}
html[data-theme="dark"] .social-shell .social-intent-unclassified{background:#29384b;color:#c0d1f0;border-color:#3b4f68}
html[data-theme="dark"] .social-shell .social-status-new{background:#283c54;color:#bcd2f3}
html[data-theme="dark"] .social-shell .social-status-assigned{background:#35304d;color:#ddd0ff}
html[data-theme="dark"] .social-shell .social-status-promoted{background:#254334;color:#b6e8c8}
html[data-theme="dark"] .social-shell .social-provider.connected{background:var(--ui-surface)}
html[data-theme="dark"] .social-shell .social-public-reply,
html[data-theme="dark"] .social-shell .social-moderation{background:var(--ui-soft)}
/* Adaptive density avoids clipping source details, action confirmations or buttons. */
@media(max-width:1180px){
  .social-shell>.social-nav{width:180px;min-width:180px}
  .social-shell .social-dashboard{padding:15px 15px 6px}
  .social-shell .social-head-filters{gap:6px}
  .social-shell .social-head-filters select{min-width:100px}
  .social-shell .social-lead-title>span{justify-content:flex-start}
}
@media(max-width:970px){
  .social-shell .social-list-head{flex-direction:column;align-items:stretch}
  .social-shell .social-head-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .social-shell .social-head-filters select{width:100%;min-width:0}
  .social-shell .social-connection-strip{gap:7px}
  .social-shell .social-provider{padding:9px}
  .social-shell .social-detail-drawer{width:min(720px,83vw)}
}
@media(max-width:720px){
  .social-shell>.social-nav{display:none}
  .social-shell .social-main .professional-topbar{height:54px;min-height:54px;padding:7px 11px}
  .social-shell .social-main .topbar-title h2{font-size:14px;letter-spacing:-.2px}
  .social-shell .social-main .topbar-title h2:before{height:15px;width:5px;margin-right:6px;vertical-align:-2px}
  .social-shell .social-main .topbar-actions :is(select,button){min-height:31px;font-size:10px;padding:5px}
  .social-shell .social-dashboard{padding:10px 9px 3px}
  .social-shell .social-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px}
  .social-shell .social-kpis>div{padding:11px 12px 10px;border-radius:11px}
  .social-shell .social-kpis strong{font-size:23px;margin-top:6px}
  .social-shell .social-kpis span{font-size:9px}
  .social-shell .social-connection-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
  .social-shell .social-provider{border-radius:10px;padding:8px 6px;gap:5px;flex-direction:column;align-items:flex-start}
  .social-shell .social-provider .platform-icon{width:21px;height:21px;min-width:21px}
  .social-shell .social-provider strong{font-size:10px}
  .social-shell .social-provider small{font-size:9px;line-height:1.2}
  .social-shell .social-list-head{padding:11px}
  .social-shell .social-list-head h3{font-size:14px}
  .social-shell .social-head-filters label{font-size:9px}
  .social-shell .social-head-filters select{font-size:10px;padding:5px 16px 5px 5px;min-height:32px}
  .social-shell .social-leads-list{padding:7px;margin-bottom:6px}
  .social-shell .social-lead-card{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:11px;border-radius:11px}
  .social-shell .social-lead-platform{width:28px;height:28px;border-radius:9px}
  .social-shell .social-lead-side{display:none}
  .social-shell .social-lead-title{display:flex}
  .social-shell .social-lead-title>strong{font-size:12px}
  .social-shell .social-lead-title>span{width:100%;margin:3px 0 0}
  .social-shell .social-lead-main>p{font-size:11px}
  .social-shell .social-lead-meta{font-size:9px}
  .social-shell .social-card-actions button{font-size:10px;flex:1 1 auto;min-height:31px;padding:6px 8px}
  .social-shell .social-detail-drawer{width:100vw;max-width:100vw;min-width:0;border-left:0}
  .social-shell .social-detail-body{padding:10px 10px 24px}
  .social-shell .social-detail-section{padding:12px}
  .social-shell .social-detail-title h2{font-size:17px}
}
@media(max-width:390px){
  .social-shell .social-provider small{display:none}
  .social-shell .social-head-filters{gap:4px}
  .social-shell .social-main .topbar-actions select{max-width:125px}
}
@media(prefers-reduced-motion:reduce){.social-shell .social-lead-card,.social-shell .social-nav-item{transition:none}}