/* =====================================================================
   Franklin Core — seitenübergreifendes Chat-Widget (Slack-artige Optik)
   Wird auf jeder Seite via chat-widget.js eingebunden. Eigenständiger
   Namensraum (Präfix "cw-"), um Kollisionen mit shared.css zu vermeiden.
   ===================================================================== */

:root{
  --cw-purple-900:#390d3c;
  --cw-purple-800:#421247;
  --cw-purple-700:#5b2c5f;
  --cw-purple-600:#6c3a70;
  --cw-accent:#1264a3;
  --cw-text-onpurple:#d1c2d3;
}

#cw-launcher{
  position:fixed; right:26px; bottom:26px; z-index:900;
  width:60px; height:60px; border-radius:50% 50% 6px 50%;
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  box-shadow:0 14px 34px -8px rgba(59,130,246,.65), 0 4px 10px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:none; color:#fff; transition:transform .18s cubic-bezier(.2,.9,.25,1.3), box-shadow .18s ease;
}
#cw-launcher:hover{ transform:scale(1.06) translateY(-2px); box-shadow:0 18px 40px -6px rgba(59,130,246,.75); }
#cw-launcher svg{ width:26px; height:26px; }
#cw-launcher .cw-badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:#ef4444; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:2px solid #05070f; box-shadow:0 2px 6px rgba(0,0,0,.4);
}
#cw-launcher.cw-open .cw-icon-open{ display:none; }
#cw-launcher:not(.cw-open) .cw-icon-close{ display:none; }

#cw-panel{
  position:fixed; right:26px; bottom:100px; z-index:899;
  width:920px; max-width:calc(100vw - 40px); height:640px; max-height:calc(100vh - 140px);
  border-radius:16px; overflow:hidden; display:none;
  background:#fff; box-shadow:0 30px 80px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  font-family:'Poppins','Segoe UI',Roboto,Arial,sans-serif;
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.25,1.05);
}
#cw-panel.cw-visible{ display:flex; }
#cw-panel.cw-anim-in{ opacity:1; transform:translateY(0) scale(1); }

/* ---------- schmale Icon-Leiste ---------- */
.cw-rail{ width:64px; flex-shrink:0; background:var(--cw-purple-900); display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:6px; }
.cw-rail-item{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--cw-text-onpurple); cursor:pointer; position:relative; }
.cw-rail-item svg{ width:20px; height:20px; }
.cw-rail-item span.cw-rail-label{ position:absolute; bottom:-13px; font-size:9px; font-weight:600; white-space:nowrap; color:var(--cw-text-onpurple); left:50%; transform:translateX(-50%); }
.cw-rail-item:hover{ background:rgba(255,255,255,.08); }
.cw-rail-item.cw-active{ background:rgba(255,255,255,.14); color:#fff; }
.cw-rail-item.cw-active span.cw-rail-label{ color:#fff; }
.cw-rail-spacer{ flex:1; }
.cw-rail-avatar{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#3b82f6,#10b981); display:flex; align-items:center; justify-content:center; color:#04241a; font-weight:800; font-size:11px; margin-top:6px; }
.cw-rail-plus{ width:30px; height:30px; border-radius:50%; border:1px dashed rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; color:var(--cw-text-onpurple); cursor:pointer; }

/* ---------- Sidebar ---------- */
.cw-sidebar{ width:246px; flex-shrink:0; background:var(--cw-purple-800); display:flex; flex-direction:column; color:#f3e9f4; }
.cw-sidebar-head{ padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); }
.cw-sidebar-head h4{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:5px; }
.cw-sidebar-head svg{ width:14px; height:14px; opacity:.8; }
.cw-sidebar-search{ margin:10px 14px; background:var(--cw-purple-700); border-radius:8px; padding:7px 10px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--cw-text-onpurple); }
.cw-sidebar-search svg{ width:13px; height:13px; flex-shrink:0; }
.cw-sidebar-scroll{ flex:1; overflow-y:auto; padding-bottom:12px; }
.cw-sidebar-scroll::-webkit-scrollbar{ width:6px; }
.cw-sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }

.cw-nav-row{ display:flex; align-items:center; gap:10px; padding:6px 16px; font-size:13px; font-weight:500; color:var(--cw-text-onpurple); cursor:pointer; border-radius:6px; margin:0 6px; }
.cw-nav-row svg{ width:15px; height:15px; flex-shrink:0; }
.cw-nav-row:hover{ background:rgba(255,255,255,.06); color:#fff; }

.cw-section{ margin-top:14px; }
.cw-section-head{ display:flex; align-items:center; gap:6px; padding:2px 16px 4px; font-size:12.5px; font-weight:700; color:var(--cw-text-onpurple); cursor:default; }
.cw-section-head svg{ width:11px; height:11px; }
.cw-fav-hint{ font-size:11px; color:rgba(209,194,211,.55); padding:2px 16px 6px; line-height:1.4; }

.cw-item{ display:flex; align-items:center; gap:9px; padding:5px 16px; margin:0 6px; border-radius:6px; font-size:13.5px; color:var(--cw-text-onpurple); cursor:pointer; position:relative; }
.cw-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.cw-item.cw-active{ background:#f6eef8; color:#3c0d3e; font-weight:700; }
.cw-item.cw-active svg{ color:#3c0d3e; }
.cw-item svg.cw-item-ico{ width:14px; height:14px; flex-shrink:0; opacity:.85; }
.cw-item .cw-guest-tag{ margin-left:auto; font-size:10px; color:rgba(209,194,211,.6); font-weight:600; }
.cw-item.cw-active .cw-guest-tag{ color:#8a6d8c; }
.cw-item .cw-dm-avatar{ width:20px; height:20px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:800; }
.cw-item .cw-dm-avatar.cw-teacher{ border-radius:50%; box-shadow:0 0 0 2px #fbbf24; }
.cw-item .cw-unread{ margin-left:auto; background:#fff; color:#3c0d3e; font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ---------- Hauptbereich ---------- */
.cw-main{ flex:1; display:flex; flex-direction:column; min-width:0; background:#fff; }
.cw-main-head{ padding:12px 20px; border-bottom:1px solid #e3e3e3; display:flex; align-items:center; gap:10px; }
.cw-main-head .cw-head-ico{ width:16px; height:16px; color:#3c0d3e; }
.cw-main-head h3{ font-size:15px; font-weight:800; color:#1d1c1d; }
.cw-main-head .cw-head-avatar{ width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:10px; }
.cw-main-head .cw-head-meta{ margin-left:auto; display:flex; align-items:center; gap:14px; font-size:12px; color:#616061; }
.cw-main-head .cw-head-meta svg{ width:14px; height:14px; }
.cw-main-head button.cw-close{ width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#616061; cursor:pointer; }
.cw-main-head button.cw-close:hover{ background:#f4f4f4; }

.cw-tabs{ display:flex; align-items:center; gap:22px; padding:0 20px; border-bottom:1px solid #e3e3e3; }
.cw-tab{ padding:9px 2px; font-size:12.5px; font-weight:700; color:#616061; border-bottom:2px solid transparent; cursor:default; display:flex; align-items:center; gap:5px; }
.cw-tab svg{ width:13px; height:13px; }
.cw-tab.cw-active{ color:#1d1c1d; border-bottom-color:#1d1c1d; }

.cw-messages{ flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:16px; }
.cw-messages::-webkit-scrollbar{ width:7px; }
.cw-messages::-webkit-scrollbar-thumb{ background:#dcdcdc; border-radius:4px; }
.cw-msg{ display:flex; gap:10px; }
.cw-msg .cw-msg-avatar{ width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:12px; }
.cw-msg .cw-msg-body{ min-width:0; }
.cw-msg .cw-msg-headline{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.cw-msg .cw-msg-name{ font-size:13.5px; font-weight:800; color:#1d1c1d; }
.cw-msg .cw-msg-time{ font-size:11px; color:#8a8a8a; }
.cw-msg .cw-msg-text{ font-size:13.5px; color:#1d1c1d; line-height:1.55; white-space:pre-wrap; }
.cw-msg .cw-msg-text a{ color:#1264a3; text-decoration:none; }
.cw-msg .cw-msg-text a:hover{ text-decoration:underline; }
.cw-empty-state{ margin:auto; text-align:center; color:#616061; max-width:320px; }
.cw-empty-state .cw-empty-avatar{ width:56px; height:56px; border-radius:14px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:20px; }
.cw-empty-state p{ font-size:13px; line-height:1.5; }

.cw-yt-card{ margin-top:8px; width:340px; max-width:100%; border-radius:8px; overflow:hidden; border:1px solid #e3e3e3; }
.cw-yt-thumb{ position:relative; height:170px; display:flex; align-items:center; justify-content:center; }
.cw-yt-thumb .cw-yt-play{ width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; }
.cw-yt-thumb .cw-yt-play svg{ width:22px; height:22px; color:#fff; margin-left:3px; }
.cw-yt-title{ padding:8px 12px; font-size:12.5px; font-weight:700; color:#1d1c1d; background:#fff; display:flex; align-items:center; gap:6px; }
.cw-yt-title svg{ width:14px; height:14px; color:#ff0000; flex-shrink:0; }

.cw-composer{ margin:0 16px 16px; border:1px solid #d1d1d1; border-radius:10px; overflow:hidden; }
.cw-composer-toolbar{ display:flex; align-items:center; gap:2px; padding:6px 8px; border-bottom:1px solid #eee; }
.cw-composer-toolbar button{ width:26px; height:26px; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#616061; cursor:default; }
.cw-composer-toolbar button svg{ width:14px; height:14px; }
.cw-composer-toolbar .cw-tb-sep{ width:1px; height:18px; background:#e3e3e3; margin:0 4px; }
.cw-composer textarea{ width:100%; border:none; outline:none; resize:none; padding:10px 12px; font-size:13.5px; font-family:inherit; min-height:44px; max-height:120px; }
.cw-composer-bottom{ display:flex; align-items:center; padding:4px 8px 8px; gap:2px; }
.cw-composer-bottom button.cw-icon-btn{ width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#616061; cursor:pointer; }
.cw-composer-bottom button.cw-icon-btn:hover{ background:#f4f4f4; }
.cw-composer-bottom button.cw-icon-btn svg{ width:15px; height:15px; }
.cw-composer-bottom .cw-send{ margin-left:auto; width:30px; height:30px; border-radius:7px; background:#dddddd; color:#a2a2a2; display:flex; align-items:center; justify-content:center; cursor:not-allowed; }
.cw-composer-bottom .cw-send.cw-ready{ background:#007a5a; color:#fff; cursor:pointer; }
.cw-composer-bottom .cw-send svg{ width:14px; height:14px; }

.cw-locked{ margin:auto; text-align:center; padding:30px; }
.cw-locked svg{ width:38px; height:38px; color:#c9a24b; margin:0 auto 12px; }
.cw-locked p{ font-size:13px; color:#616061; margin-bottom:14px; max-width:260px; }
.cw-locked a{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:10px; background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; }

@media (max-width: 760px){
  #cw-panel{ width:calc(100vw - 24px); right:12px; bottom:88px; height:calc(100vh - 120px); }
  .cw-rail{ display:none; }
  .cw-sidebar{ width:190px; }
}