/* ============================================================================
 * assets/assist.css
 *
 * Zweck: Globales Styling für das Assist-UI (Hilfe, Notizen, KI-Chat).
 *
 * Architektur & Verhalten:
 * - Responsive Layout-Modi:
 * 1. Desktop/Tablet: Dockt rechts an, wenn `body.wh-has-assist` gesetzt ist 
 * (Hauptcontent macht Platz).
 * 2. Mobile (<900px): Verhält sich als Off-Canvas-Overlay, getriggert über 
 * `body.wh-assist-mobile-open`.
 * 3. Standalone: Spezieller Modus (`body.wh-assist-standalone`) für das 
 * separate Browser-Popup (nimmt 100% Viewport ein, ohne Splitter).
 * - Styling-Regeln: Striktes Verbot von Inline-Styles in PHP/HTML.
 * - Theme-Kompatibilität: Verwendet ausschließlich `--wh-*` CSS-Variablen.
 * ============================================================================ */

:root {
  /* Panel-Breite (wird per JS gesetzt), Default-Fallback */
  --wh-assist-w: 400px;
}

/* Body-Flag (wird in ui/ribbon2.php gesetzt) */
.wh-has-assist {
  /* Hook */
}

/* Assist Container */
.wh-assist {
  width: var(--wh-assist-w);
  max-width: 700px;
  min-width: 280px;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  overflow: hidden;
}

/* Tabbar */
.wh-assist-tabbar {
  display: flex;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
}

/* Tabs */
.wh-assist-tab {
  appearance: none;
  border: 1px solid var(--wh-line, currentColor);
  background: transparent;
  color: inherit;

  padding: 6px 10px;
  border-radius: 8px;

  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.wh-assist-tab.is-active {
  font-weight: 700;
}

.wh-assist-tab:disabled,
.wh-assist-tab[disabled] {
  opacity: .5;
  cursor: default;
}

/* Body */
.wh-assist-body {
  flex: 1 1 auto;
  overflow: hidden;
}

/* Panes */
.wh-assist-pane {
  display: none;
  height: 100%;
  box-sizing: border-box;
}

.wh-assist-pane.is-active {
  display: block;
}

/* Help pane */
.wh-assist-helpbar {
  display: flex;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
}

.wh-assist-input {
  flex: 1 1 auto;
  min-width: 0;

  border: 1px solid var(--wh-line, currentColor);
  background: transparent;
  color: inherit;

  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
}

.wh-assist-btn {
  appearance: none;
  border: 1px solid var(--wh-line, currentColor);
  background: transparent;
  color: inherit;

  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.wh-assist-iframe {
  width: 100%;
  height: calc(100% - 52px); /* grob: helpbar + padding */
  border: 0;
  display: block;
}

/* Notes pane */
.wh-assist-textarea {
  width: 100%;
  height: calc(100% - 28px); /* hint-space */
  resize: none;

  border: 0;
  outline: none;

  padding: 10px;
  box-sizing: border-box;

  background: transparent;
  color: inherit;

  font-size: 13px;
  line-height: 1.35;
}

.wh-assist-hint {
  padding: 6px 10px 10px 10px;
  font-size: 12px;
  opacity: .75;
  box-sizing: border-box;
}

/* Chat pane */
.wh-assist-chat {
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}

/* Inline-Style-Ersatz (vorher in ui/ribbon2.php) */
.wh-assist-chat-title {
  font-weight: 800;
  margin-bottom: 8px;
}

.wh-assist-chat-desc {
  font-size: 13px;
  opacity: .85;
  line-height: 1.35;
}

.wh-assist-chat-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Links/Buttons im Chat */
.wh-assist-link {
  display: inline-block;

  border: 1px solid var(--wh-line, currentColor);
  color: inherit;
  text-decoration: none;

  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  user-select: none;
}

.wh-assist-link:hover {
  text-decoration: underline;
}

.wh-assist-pre {
  margin-top: 10px;
  padding: 10px;

  border: 1px solid var(--wh-line, currentColor);
  border-radius: 10px;

  white-space: pre-wrap;
  word-break: break-word;

  font-size: 12px;
  line-height: 1.35;

  box-sizing: border-box;
}

/* Splitter + Mobile-Open Button (falls vorhanden) */
.wh-assist-splitter {
  width: 6px;
  cursor: ew-resize;
  user-select: none;
}

.wh-assist-open {
  appearance: none;
  border: 1px solid var(--wh-line, currentColor);
  background: transparent;
  color: inherit;

  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
display:  none!important;
}

/* Drag-Status */
.wh-assist-drag {
  cursor: ew-resize !important;
}

/* ============================================================================
   Assist Panel – Layout (entkoppelt von Ribbon2)
   - Dock rechts (Desktop/Tablet): Seite macht Platz, Assist ist fixed.
   - Mobile: Assist als Overlay (kein Platz rechts), wird per Body-Klasse geöffnet.
   - Ribbon2 darf KEIN Layout für Assist enthalten.
   ============================================================================ */

/* Topbar-Höhe (falls vorhanden). Default 0 (Classic/ohne Topbar) */
:root{
  --wh-topbar-h: 0px;
}

/* Desktop/Tablet: Assist rechts, Content macht Platz */
body.wh-has-assist{
  padding-right: var(--wh-assist-w);
}

body.wh-has-assist .wh-assist{
  position: fixed;
  top: var(--wh-topbar-h);
  right: 0;
  height: calc(100vh - var(--wh-topbar-h));
  width: var(--wh-assist-w);
  z-index: 950;

  background: var(--wh-panel, #ffffff);
  border-left: 1px solid var(--wh-border, rgba(0,0,0,.12));
  box-shadow: 0 10px 30px var(--wh-shadow-12, rgba(0,0,0,.12));

  overflow: hidden;
}

/* Splitter direkt links neben dem Assist */
body.wh-has-assist .wh-assist-splitter{
  position: fixed;
  top: var(--wh-topbar-h);
  right: var(--wh-assist-w);
  height: calc(100vh - var(--wh-topbar-h));
  width: 6px;
  z-index: 951;

  cursor: ew-resize;
  user-select: none;

  background: rgba(0,0,0,.03);
  border-left: 1px solid rgba(0,0,0,.06);
  border-right: 1px solid rgba(0,0,0,.06);
}

/* Assist-Open Button: Desktop ausblenden (nur Mobile sinnvoll) */
body.wh-has-assist .wh-assist-open{
  display: none;
}

/* Mobile: Assist als Overlay (kein Platz rechts) */
@media (max-width: 900px){
  body.wh-has-assist{
    padding-right: 0;
  }

  body.wh-has-assist .wh-assist{
    top: 0;
    height: 100vh;

    width: min(92vw, 520px);
    max-width: 92vw;

    transform: translateX(105%);
    transition: transform .18s ease;
  }

  body.wh-has-assist.wh-assist-mobile-open .wh-assist{
    transform: translateX(0);
  }

  body.wh-has-assist .wh-assist-splitter{
    display: none;
  }

  body.wh-has-assist .wh-assist-open{
    display: inline-flex;
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 1200;
  }
}

.wh-assist-helpdebug{
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.25;
  opacity: .85;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.wh-assist-chat-msg {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 85%;
  font-size: 13px;
  line-height: 1.4;
}

.wh-assist-chat-msg.is-user {
  align-self: flex-end;
  background: var(--wh-primary, #0b5bd3);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.wh-assist-chat-msg.is-ai {
  align-self: flex-start;
  background: var(--wh-panel2, #f3f3f3);
  color: #333;
  border-bottom-left-radius: 2px;
  border: 1px solid var(--wh-border);
}

.wh-assist-chat-input-wrap {
  padding: 8px;
  border-top: 1px solid var(--wh-border);
  display: flex;
  gap: 8px;
}

.wh-assist-chat-input {
  flex: 1;
  border: 1px solid var(--wh-border);
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 13px;
  outline: none;
}

.wh-assist-chat-send {
  background: var(--wh-primary, #0b5bd3);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Utility / Scrollbar Styles */
.wh-assist-chat::-webkit-scrollbar {
  width: 6px;
}

.wh-assist-chat::-webkit-scrollbar-track {
  background: transparent;
}

.wh-assist-chat::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}

/* Animations */
@keyframes wh-assist-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.wh-assist-pane.is-active {
  animation: wh-assist-fadein 0.2s ease-out;
}

/* Zusätzliche Klassen für spezifische Pane-Inhalte */
.wh-assist-notes-hint {
  font-style: italic;
  color: var(--wh-muted, #666);
  font-size: 11px;
  padding: 5px 10px;
}

/* Mobile Overrides für Chat-Ansicht */
@media (max-width: 600px) {
  .wh-assist-chat-msg {
    max-width: 95%;
  }
}

/* ============================================================================
   NEU: STANDALONE / POPUP MODE FIX
   Erzwingt volle Breite und Höhe im eigenen Fenster, ohne das Layout
   der Seitenleiste im Hauptprogramm zu zerstören.
   ============================================================================ */

body.wh-assist-standalone {
  padding-right: 0 !important;
  display: flex !important;
}

body.wh-assist-standalone .wh-assist {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  min-width: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  flex: 1 !important;
}

body.wh-assist-standalone .wh-assist-iframe {
  height: 100% !important;
}

body.wh-assist-standalone .wh-assist-splitter,
body.wh-assist-standalone .wh-assist-open {
  display: none !important;
}