/* ==========================================================================
   article_quick_drawer.css — CD-A3b-Pilot (18.09.2026)
   Ersetzt die 13 statischen style="-Attribute des Quick-Drawer-Partials durch
   Klassen (Voraussetzung fuer CSP style-src-attr 'none', CD-A3b). Bewusst
   UNLAYERED wie das Partial-Asset-Muster (CD-A3c): die Offcanvas-/Modal-
   Regeln muessen gegen Bootstrap-Basis gewinnen — unlayered > Layer normal.
   Das !important in .aqd-drawer bleibt bewusst erhalten (identisches
   Verhalten zum frueheren Inline-!important gegen Offcanvas-Defaults).
   ========================================================================== */

/* Drawer-Shell (offcanvas-end) */
.aqd-drawer {
  width: 100%;
  max-width: 580px;
  background: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Titel/Meta */
.aqd-title { line-height: 1.4; }
.aqd-text { line-height: 1.7; word-break: break-word; }

/* Community-Vote-Buttons */
.aqd-vote-btn { font-size: 0.9rem; line-height: 1; }

/* Modals: Amber (PoC) und Cyan (Share/Weekly/Source) */
.aqd-modal-amber {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.4);
  backdrop-filter: blur(20px);
}
.aqd-modal-cyan {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(6, 182, 212, 0.4);
  backdrop-filter: blur(20px);
}

/* Social-Card-Canvas */
.aqd-canvas-wrap { max-height: 400px; background: #090d16; }
.aqd-canvas { object-fit: contain; max-height: 400px; }

/* Weekly-Digest-Textarea */
.aqd-textarea { line-height: 1.6; resize: vertical; }

/* Quell-Badge (Schild-Icon-Kreis) */
.aqd-shield-badge { width: 54px; height: 54px; line-height: 1; }

/* ==========================================================================
   Mobile Swipebar, Gestures & Tactile Pull Handles
   ========================================================================== */

.aqd-swipebar-zone {
  cursor: pointer;
  touch-action: none;
  user-select: none;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
}
.aqd-swipebar-zone:hover,
.aqd-swipebar-zone:active {
  background: rgba(0, 240, 255, 0.06);
}

.aqd-swipebar-handle {
  width: 48px;
  height: 5px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.aqd-swipebar-zone:hover .aqd-swipebar-handle,
.aqd-swipebar-zone:active .aqd-swipebar-handle {
  background: #00f0ff;
  transform: scaleX(1.15);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.aqd-swipebar-hint {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* Close-Buttons (Touch-Target >= 44x44px, WCAG 2.5.5) */
.aqd-close-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}
.aqd-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: rotate(90deg);
}

.aqd-header-close-pill {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease;
}
.aqd-header-close-pill:hover,
.aqd-header-close-pill:active {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fff !important;
}

.aqd-footer-close-btn {
  transition: all 0.2s ease;
}
.aqd-footer-close-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Gesten-Feedback (Floating Swipe Cues) */
.aqd-swipe-cue {
  position: absolute;
  z-index: 1060;
  pointer-events: none;
  animation: aqd-fade-in 0.15s ease-out forwards;
}

.aqd-swipe-cue__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 1rem;
  color: #fff;
  font-family: var(--bs-font-sans-serif, system-ui);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

.aqd-swipe-cue--right {
  top: 45%;
  left: 16px;
  transform: translateY(-50%);
}
.aqd-swipe-cue--right .aqd-swipe-cue__inner {
  background: rgba(11, 20, 38, 0.96);
  border: 1.5px solid #00f0ff;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.35);
}

.aqd-swipe-cue--left {
  top: 45%;
  right: 16px;
  transform: translateY(-50%);
}
.aqd-swipe-cue--left .aqd-swipe-cue__inner {
  background: rgba(11, 20, 38, 0.96);
  border: 1.5px solid #3b82f6;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.35);
}

.aqd-swipe-cue--down {
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
}
.aqd-swipe-cue--down .aqd-swipe-cue__inner {
  background: rgba(11, 20, 38, 0.96);
  border: 1.5px solid #f59e0b;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.35);
}

@keyframes aqd-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Social Network Reaktionen, Pulse & Share
   ========================================================================== */

.aqd-social-block {
  transition: border-color 0.2s ease, background 0.2s ease;
}
.aqd-social-block:hover {
  border-color: rgba(0, 240, 255, 0.35) !important;
}

.aqd-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.15s ease;
  font-size: 0.82rem;
  user-select: none;
}
.aqd-reaction-pill:hover {
  transform: translateY(-2px);
  border-color: #00f0ff !important;
  background: rgba(0, 240, 255, 0.12) !important;
  box-shadow: 0 3px 10px rgba(0, 240, 255, 0.25);
}
.aqd-reaction-pill.active {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: #00f0ff !important;
  color: #00f0ff !important;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.aqd-pulse-btn {
  transition: all 0.15s ease;
  background: rgba(15, 23, 42, 0.7);
  border-width: 1px;
}
.aqd-pulse-btn:hover {
  transform: translateY(-1px);
}
.aqd-pulse-btn.active {
  border-width: 2px !important;
  font-weight: bold !important;
  box-shadow: 0 0 12px currentColor;
}

.aqd-pulse-bar {
  background: rgba(15, 23, 42, 0.9) !important;
}

.aqd-share-net {
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.aqd-share-net:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Mobile-First Anpassungen */
@media (max-width: 576px) {
  .aqd-drawer {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    touch-action: pan-y;
  }
}