/* ==============================================
   Kita-Echo Chat Plugin — Stylesheet v1.0.0
   Farben direkt vom Kita-Echo Logo abgeleitet
   ============================================== */

:root {
  --ke-green:         #4a8c2a;
  --ke-green-dark:    #3a6e1f;
  --ke-green-light:   #eef5e8;
  --ke-orange:        #e85d1a;
  --ke-orange-dark:   #c44d12;
  --ke-orange-light:  #fdf0e8;
  --ke-t-primary:     #1c1c1c;
  --ke-t-secondary:   #444444;
  --ke-t-muted:       #707070;
  --ke-b-soft:        #cce3b8;
  --ke-b-default:     #d4d4d4;
  --ke-s-card:        #ffffff;
  --ke-s-sidebar:     #f4f9f0;
  --ke-s-chat:        #f8fbf6;
  --ke-s-msg-me:      #2d6016;
  --ke-s-msg-other:   #eef5e8;
}

/* ── Floating Button ── */
#kec-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ke-green);
  border: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  /* Kein transition auf left/right während Drag */
  box-shadow: 0 4px 16px rgba(74, 140, 42, 0.35);
  user-select: none;
  touch-action: none;
}
#kec-float-btn:hover {
  background: var(--ke-green-dark);
}
#kec-float-btn.kec-dragging {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(74, 140, 42, 0.45);
  transform: scale(1.06);
}
/* Drag-Handle Hinweis (kleine Linie oben am Button) */
#kec-float-btn::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.45);
  border-radius: 2px;
  pointer-events: none;
}
#kec-float-btn .kec-icon {
  font-size: 26px;
  color: #fff;
  pointer-events: none;
}
#kec-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ke-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  font-family: system-ui, sans-serif;
}

/* ── Chat Popup ── */
#kec-popup {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 340px;
  max-height: 560px;
  background: var(--ke-s-card);
  border: 1.5px solid var(--ke-b-soft);
  border-radius: 18px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  z-index: 99998;
  font-family: system-ui, -apple-system, sans-serif;
  animation: kec-pop 0.18s ease-out;
}
@keyframes kec-pop {
  from { transform: scale(0.88) translateY(12px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
#kec-popup.kec-open {
  display: flex;
}

/* ── Popup Header ── */
.kec-header {
  background: var(--ke-green);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.kec-header-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.kec-header-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
}
.kec-header-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.kec-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 3px;
}
.kec-online-dot {
  width: 7px;
  height: 7px;
  background: #6ef06e;
  border-radius: 50%;
  flex-shrink: 0;
}
.kec-close-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.18);
  border: none;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  transition: background 0.12s;
}
.kec-close-btn:hover {
  background: rgba(255,255,255,0.32);
}

/* ── Tabs ── */
.kec-tabs {
  display: flex;
  border-bottom: 1px solid var(--ke-b-default);
  background: var(--ke-s-card);
  flex-shrink: 0;
}
.kec-tab {
  flex: 1;
  padding: 9px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ke-t-muted);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  font-family: inherit;
}
.kec-tab:hover:not(.kec-tab-active) {
  color: var(--ke-t-secondary);
}
.kec-tab.kec-tab-active {
  color: var(--ke-green);
  border-bottom-color: var(--ke-green);
}

/* ── Kanäle ── */
.kec-channels {
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #eeeeee;
  background: #fafafa;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.kec-channels::-webkit-scrollbar { display: none; }
.kec-ch-btn {
  padding: 4px 12px;
  border: 1.5px solid var(--ke-b-soft);
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ke-green);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
  font-family: inherit;
}
.kec-ch-btn:hover,
.kec-ch-btn.kec-ch-active {
  background: var(--ke-green);
  color: #fff;
  border-color: var(--ke-green);
}

/* ── Nachrichten ── */
.kec-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ke-s-chat);
  min-height: 180px;
  max-height: 240px;
}
.kec-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kec-msg.kec-me { align-items: flex-end; }
.kec-msg.kec-other { align-items: flex-start; }

.kec-bubble {
  padding: 7px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 78%;
  word-break: break-word;
}
.kec-bubble-me {
  background: var(--ke-s-msg-me);
  color: #fff;
  border-radius: 14px 14px 3px 14px;
}
.kec-bubble-other {
  background: var(--ke-s-msg-other);
  color: var(--ke-t-primary);
  border: 1px solid var(--ke-b-soft);
  border-radius: 14px 14px 14px 3px;
}
.kec-bubble-bot {
  background: #f2f2f2;
  color: var(--ke-t-primary);
  border: 1px solid var(--ke-b-default);
  border-radius: 14px 14px 14px 3px;
}
.kec-msg-meta {
  font-size: 10px;
  color: var(--ke-t-muted);
  padding: 0 3px;
}
.kec-reactions {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}
.kec-rx {
  font-size: 11px;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid var(--ke-b-default);
  border-radius: 9px;
  cursor: pointer;
}
.kec-rx:hover { background: var(--ke-green-light); }

/* ── Tipp-Indikator ── */
.kec-typing {
  padding: 2px 14px 4px;
  font-size: 11px;
  color: var(--ke-t-muted);
  background: var(--ke-s-chat);
  display: none;
  flex-shrink: 0;
}

/* ── Tool-Leiste ── */
.kec-toolbar {
  display: flex;
  gap: 5px;
  padding: 7px 10px;
  border-top: 1px solid #eee;
  background: #fafafa;
  align-items: center;
  flex-shrink: 0;
}
.kec-tool-btn {
  background: var(--ke-green-light);
  border: 1px solid var(--ke-b-soft);
  border-radius: 7px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--ke-green);
  transition: all 0.12s;
}
.kec-tool-btn:hover {
  background: var(--ke-green);
  color: #fff;
  border-color: var(--ke-green);
}

/* ── Picker-Tray ── */
.kec-tray {
  display: none;
  padding: 10px 12px;
  border-top: 1px solid #eee;
  background: var(--ke-s-card);
  flex-shrink: 0;
}
.kec-tray.kec-tray-open { display: block; }
.kec-tray-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ke-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}
.kec-tray-items { display: flex; gap: 5px; flex-wrap: wrap; }
.kec-tray-item {
  font-size: 21px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.1s;
}
.kec-tray-item:hover { background: var(--ke-green-light); }

/* ── Eingabezeile ── */
.kec-input-row {
  display: flex;
  gap: 7px;
  padding: 10px;
  border-top: 1.5px solid var(--ke-b-default);
  background: var(--ke-s-card);
  flex-shrink: 0;
}
.kec-input {
  flex: 1;
  border: 1.5px solid var(--ke-b-default);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: var(--ke-t-primary);
  outline: none;
  font-family: inherit;
  transition: border-color 0.12s;
}
.kec-input:focus {
  border-color: var(--ke-green);
  outline: 2px solid rgba(74, 140, 42, 0.15);
}
.kec-send-btn {
  background: var(--ke-orange);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  transition: background 0.12s;
}
.kec-send-btn:hover { background: var(--ke-orange-dark); }

/* ── Direkt-Nachrichten Tab ── */
.kec-dm-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kec-dm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #eee;
  background: #fafafa;
  transition: background 0.12s;
}
.kec-dm-item:hover { background: var(--ke-green-light); }
.kec-dm-item.kec-online { background: var(--ke-green-light); border-color: var(--ke-b-soft); }
.kec-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.kec-avatar-online { background: var(--ke-green); color: #fff; }
.kec-avatar-offline { background: #ddd; color: #777; }

/* ── Info Tab ── */
.kec-info-panel {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kec-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #eee;
}
.kec-info-row:last-child { border-bottom: none; }
.kec-info-label { color: var(--ke-t-muted); }
.kec-info-value { color: var(--ke-t-primary); font-weight: 500; }

/* ── Eingebetteter Chat (Shortcode) ── */
.kec-embedded {
  border: 1.5px solid var(--ke-b-soft);
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  margin: 1.5em 0;
}
.kec-embedded .kec-header { border-radius: 12px 12px 0 0; }
.kec-embedded .kec-messages { max-height: none; }

/* ── Voice Recorder ── */
.kec-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kec-rec-dot {
  width: 9px;
  height: 9px;
  background: var(--ke-orange);
  border-radius: 50%;
  flex-shrink: 0;
  animation: kec-blink 1s infinite;
}
@keyframes kec-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── Responsiv: Mobile ── */
@media (max-width: 480px) {
  #kec-popup {
    width: calc(100vw - 20px);
    right: 10px;
    bottom: 84px;
    border-radius: 14px;
  }
  #kec-float-btn {
    right: 16px;
    bottom: 16px;
  }
}