/* =============================
   File: /opt/triluma/public/de/triluma-coach-popup.css

   Version: 1.1.0
   Last Updated: 2026-04-15
============================= */

:root {
  --tc-bg: var(--tri-bg);
  --tc-surface: var(--tri-white);
  --tc-border: var(--tri-border);
  --tc-ink: var(--tri-text);
  --tc-muted: var(--tri-muted);
  --tc-accent: var(--tri-blue);
  --tc-accent-dark: var(--tri-blue-dark);

  --tc-radius: var(--tri-radius);
  --tc-shadow: 0 10px 30px rgba(0,0,0,.08);

  --tc-font: "Roboto", system-ui, -apple-system, sans-serif;
}

/* OVERLAY */
.cp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* BOX */
.cp-box {
  width: 95%;
  max-width: 720px;
  background: var(--tc-surface);
  border-radius: var(--tc-radius);
  border: 1px solid var(--tc-border);
  box-shadow: var(--tc-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--tc-font);
}

.cp-box.mobile {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* HEADER */
.cp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tc-border);
  background: var(--tri-white);
  font-size: 14px;
  color: var(--tc-ink);
}

.cp-controls {
  display: flex;
  gap: 6px;
}

/* BUTTONS */
.cp-controls button {
  border-radius: 999px;
  border: 1px solid var(--tc-border);
  background: var(--tri-white);
  color: var(--tc-ink);
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s ease;
}

.cp-controls button:hover {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tri-white);
}

/* MESSAGES AREA */
.cp-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: var(--tri-chat-bgchat);
  font-size: 15px;
  line-height: 1.6;
}

/* MESSAGE BUBBLES */
.cp-msg {
  margin-bottom: 8px;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  word-wrap: break-word;
}

.cp-msg.user {
  margin-left: auto;
  background: var(--tri-chat-bguser);
  color: var(--tri-black);
  border-bottom-right-radius: 4px;
}

.cp-msg.coach {
  margin-right: auto;
  background: var(--tri-chat-bgactor);
  border: 1px solid var(--tc-border);
  color: var(--tri-black);
  border-bottom-left-radius: 4px;
}

.cp-msg.system {
  margin: 6px auto;
  background: var(--tri-bg);
  border: 1px dashed var(--tc-border);
  color: var(--tri-black);
  font-size: 14px;
  text-align: center;
}



.cp-msg.system.cp-thinking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  max-width: 220px;
  min-height: 24px;
  background: var(--tri-chat-bgactor);
  border: 1px solid var(--tc-border);
  border-bottom-left-radius: 4px;
  opacity: .82;
  animation: cpThinkingBreath 1.8s ease-in-out infinite;
}

.cp-thinking-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.cp-thinking-dots i {
  display: inline-block;
  width: 4px;
  height: 4px;
  min-width: 4px;
  min-height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: .35;
  animation: cpThinkingDot 1.2s ease-in-out infinite;
}

.cp-thinking-dots i:nth-child(2) { animation-delay: .18s; }
.cp-thinking-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes cpThinkingBreath {
  0%,100% { opacity: .55; transform: translateY(0); }
  50% { opacity: .9; transform: translateY(-1px); }
}

@keyframes cpThinkingDot {
  0%,80%,100% { opacity: .25; transform: translateY(0); }
  40% { opacity: .9; transform: translateY(-2px); }
}

/* INPUT AREA */
.cp-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--tc-border);
  background: var(--tri-white);
}

.cp-input input {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--tc-border);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--tc-ink);
  background: var(--tri-white);
}

.cp-input button {
  border-radius: 999px;
  border: 1px solid var(--tc-border);
  background: var(--tri-white);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--tc-ink);
  transition: all .2s ease;
}

.cp-input button:hover {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tri-white);
}

/* SCROLLBAR */
.cp-messages::-webkit-scrollbar {
  width: 6px;
}

.cp-messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 3px;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .cp-box {
    height: 100%;
    border-radius: 0;
  }

  .cp-messages {
    padding: 10px;
  }

  .cp-input {
    padding: 10px;
  }
}
/* === TRILUMA_THEME_RESTART30_V4_COACH_POPUP_START === */
html[data-theme="dark"] .cp-overlay{ background:rgba(0,0,0,.66) !important; }
html[data-theme="dark"] .cp-box{
  --tc-surface:var(--tri-dark-surface, #201f1d);
  --tc-ink:var(--tri-dark-text, #f3f1ed);
  --tc-muted:var(--tri-dark-muted, #cbc4bb);
  --tc-border:var(--tri-border);
  background:var(--tri-dark-surface, #201f1d) !important;
  color:var(--tri-dark-text, #f3f1ed) !important;
  border:1px solid var(--tri-border) !important;
  box-shadow:var(--tri-dark-shadow, 0 20px 54px rgba(0,0,0,.44)) !important;
}
html[data-theme="dark"] .cp-header,
html[data-theme="dark"] .cp-input{
  background:var(--tri-dark-surface-2, #2a2825) !important;
  color:var(--tri-dark-text, #f3f1ed) !important;
  border-color:var(--tri-border) !important;
}
html[data-theme="dark"] .cp-messages{ background:var(--tri-chat-bgchat, #1b1b1a) !important; }
html[data-theme="dark"] .cp-msg.user{ background:var(--tri-chat-bguser, #283b31) !important; color:var(--tri-dark-text, #f3f1ed) !important; }
html[data-theme="dark"] .cp-msg.coach,
html[data-theme="dark"] .cp-msg.system.cp-thinking{ background:var(--tri-chat-bgactor, #213d46) !important; color:var(--tri-dark-text, #f3f1ed) !important; border-color:var(--tri-border) !important; }
html[data-theme="dark"] .cp-msg.system{ background:transparent !important; color:var(--tri-dark-muted, #cbc4bb) !important; border-color:var(--tri-border) !important; }
html[data-theme="dark"] .cp-input input{
  background:var(--tri-dark-surface, #201f1d) !important;
  color:var(--tri-dark-text, #f3f1ed) !important;
  border-color:var(--tri-border) !important;
}
html[data-theme="dark"] .cp-controls button,
html[data-theme="dark"] .cp-input button{
  background:transparent !important;
  color:var(--tri-dark-text, #f3f1ed) !important;
  border:1px solid var(--tri-blue) !important;
}
html[data-theme="dark"] .cp-controls button:hover,
html[data-theme="dark"] .cp-input button:hover{
  background:var(--tri-blue) !important;
  color:var(--tri-white) !important;
  border-color:var(--tri-blue) !important;
}
/* === TRILUMA_THEME_RESTART30_V4_COACH_POPUP_END === */


/* === TRILUMA_THEME_RESTART30_V5_COACH_POPUP_START === */
html[data-theme="dark"] .cp-overlay{ background:rgba(0,0,0,.42) !important; }
html[data-theme="dark"] .cp-box{ background:var(--tri-dark-surface,#1d1c1a) !important; border-color:var(--tri-dark-border-strong,rgba(255,255,255,.16)) !important; }
html[data-theme="dark"] .cp-header,
html[data-theme="dark"] .cp-input{ background:var(--tri-dark-surface-2,#292623) !important; border-color:var(--tri-dark-border,rgba(255,255,255,.095)) !important; }
/* === TRILUMA_THEME_RESTART30_V5_COACH_POPUP_END === */

/* === RESTART_30 DARK OVERLAY HOTFIX v13 START === */
html[data-theme="dark"] .tri-overlay,
html[data-theme="dark"] .tri-session-choice-overlay,
html[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay,
html[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay.tri-popup-fade,
html[data-theme="dark"] .tri-contact-overlay,
html[data-theme="dark"] .triluma-contact-overlay,
html[data-theme="dark"] .tri-contact-popup-overlay,
html[data-theme="dark"] .tri-auth-overlay,
html[data-theme="dark"] .tri-login-overlay,
html[data-theme="dark"] .tri-code-overlay,
html[data-theme="dark"] .tri-vcoach-popup-overlay,
html[data-theme="dark"] .tri-companion-info-overlay,
html[data-theme="dark"] .tri-trainer-info-overlay,
html[data-theme="dark"] .tri-talkway-info-overlay,
html[data-theme="dark"] .tri-chat-popup-overlay,
html[data-theme="dark"] .tri-chat-overlay,
html[data-theme="dark"] .tri-companion-chat-overlay,
html[data-theme="dark"] .tri-trainer-chat-overlay,
html[data-theme="dark"] .tri-popup-overlay,
html[data-theme="dark"] .tri-modal-overlay,
html[data-theme="dark"] .cp-overlay,
html[data-theme="dark"] .triluma-roi-overlay,
:root[data-theme="dark"] .tri-overlay,
:root[data-theme="dark"] .tri-session-choice-overlay,
:root[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay,
:root[data-theme="dark"] .triluma-roi-overlay,
#tri-session-choice-overlay.tri-session-choice-overlay-dark-soft {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:host([data-theme="dark"]) .tri-overlay,
:host-context(html[data-theme="dark"]) .tri-overlay {
  background: rgba(0, 0, 0, 0.78) !important;
}
/* === RESTART_30 DARK OVERLAY HOTFIX v13 END === */

/* === RESTART_30 DARK VCOACH POPUP FRAMES v15 START === */
/*
  Sofort-Beratung: Coach-/Guide-Info-Popups im Dark Mode.
  Entfernt nur die störenden Innenrahmen/Aufhellungen der Textbereiche.
  Companion- und Trainer-Popups bleiben unberührt.
*/
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-top,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-main,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-section,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-short,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-top {
  padding: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-section {
  padding: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns {
  border: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns > div:first-child {
  border-right: 1px dotted rgba(255,255,255,.10) !important;
}

/* Nur Avatar-Rahmen/Overlay behalten; keine großen Rahmen um Bild+Text. */
html[data-theme="dark"] #tri-vcoach-popup-content .tri-avatar-wrap,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-avatar {
  box-shadow: none !important;
}
/* === RESTART_30 DARK VCOACH POPUP FRAMES v15 END === */


/* v4: Sprachflaggen in Chat-Kopfzeilen */
.tri-vcoach-lang,
.tri-companion-chat-langs,
.tri-trainer-chat-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tri-vcoach-lang .tri-chat-language-flag,
.tri-companion-chat-langs .tri-chat-language-flag,
.tri-trainer-chat-langs .tri-chat-language-flag {
  display: block;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px;
  max-width: 19px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  object-fit: cover;
  flex: 0 0 19px;
}
.tri-vcoach-lang .tri-chat-language-fallback,
.tri-companion-chat-langs .tri-chat-language-fallback,
.tri-trainer-chat-langs .tri-chat-language-fallback {
  display: inline-flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  font-size: 8px;
  line-height: 1;
}

/* === RESTART_33 INFO POPUP CSS FINAL v146 START === */
/*
  Nur CSS, keine JS-Styles.
  Finaler Popup-Optik-Fix:
  - Companion/Trainer Aktionsleiste ohne Hintergrundstreifen
  - Favoriten-Link ohne sichtbaren Button-Rahmen
  - Companion/Trainer Miniheadlines in tri-blue
  - Coach-Popup-Headlines bleiben tri-blue
*/

/* Aktionszeilen: kein Hintergrundbalken, kein Rahmen, keine Schatten */
#tri-companion-info-content .tri-companion-info-actions,
#tri-trainer-info-content .tri-trainer-info-actions,
.tri-companion-info-actions,
.tri-trainer-info-actions,
#tri-companion-info-content div:has(> button[data-info-action="start"]),
#tri-trainer-info-content div:has(> button[data-info-action="start"]) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
}

/* Buttons bleiben Buttons, aber ohne Leistenhintergrund der Zeile */
#tri-companion-info-content .tri-companion-info-actions .tri-header-btn,
#tri-trainer-info-content .tri-trainer-info-actions .tri-header-btn,
.tri-companion-info-actions .tri-header-btn,
.tri-trainer-info-actions .tri-header-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Favoriten-Link radikal als Link, nicht als Button/Pill */
#tri-companion-info-content a.tri-fav-link,
#tri-trainer-info-content a.tri-fav-link,
.tri-companion-info-actions a.tri-fav-link,
.tri-trainer-info-actions a.tri-fav-link,
.tri-vcoach-buttons a.tri-fav-link,
a.tri-fav-link {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  color: var(--tri-blue, #3aa7c8) !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

#tri-companion-info-content a.tri-fav-link:hover,
#tri-companion-info-content a.tri-fav-link:focus,
#tri-trainer-info-content a.tri-fav-link:hover,
#tri-trainer-info-content a.tri-fav-link:focus,
.tri-companion-info-actions a.tri-fav-link:hover,
.tri-companion-info-actions a.tri-fav-link:focus,
.tri-trainer-info-actions a.tri-fav-link:hover,
.tri-trainer-info-actions a.tri-fav-link:focus,
.tri-vcoach-buttons a.tri-fav-link:hover,
.tri-vcoach-buttons a.tri-fav-link:focus,
a.tri-fav-link:hover,
a.tri-fav-link:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--tri-blue, #3aa7c8) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

#tri-companion-info-content a.tri-fav-link img,
#tri-trainer-info-content a.tri-fav-link img,
.tri-companion-info-actions a.tri-fav-link img,
.tri-trainer-info-actions a.tri-fav-link img,
.tri-vcoach-buttons a.tri-fav-link img,
a.tri-fav-link img {
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  flex: 0 0 18px !important;
}

/* Miniheadlines Companion/Trainer + Coach-Info-Popup */
#tri-companion-info-content .tri-companion-info-label,
#tri-companion-info-content .tri-companion-info-section > p:first-child,
#tri-trainer-info-content .tri-trainer-info-label,
#tri-trainer-info-content .tri-trainer-info-section > p:first-child,
#tri-trainer-info-content .tri-split h3,
#tri-trainer-info-content h3,
#tri-vcoach-popup-content .tri-vcoach-popup-section h3,
#tri-vcoach-popup-content .tri-popup-columns h3 {
  color: var(--tri-blue, #3aa7c8) !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] #tri-companion-info-content .tri-companion-info-label,
html[data-theme="dark"] #tri-companion-info-content .tri-companion-info-section > p:first-child,
html[data-theme="dark"] #tri-trainer-info-content .tri-trainer-info-label,
html[data-theme="dark"] #tri-trainer-info-content .tri-trainer-info-section > p:first-child,
html[data-theme="dark"] #tri-trainer-info-content .tri-split h3,
html[data-theme="dark"] #tri-trainer-info-content h3,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-section h3,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns h3 {
  color: var(--tri-blue, #3aa7c8) !important;
}
/* === RESTART_33 INFO POPUP CSS FINAL v146 END === */