/* ==========================================================================
   LucyChat - Chat Area, Waveform Voice Player, Lightbox Popup & Media
   ========================================================================== */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

.room-header {
  height: 60px;
  padding: 0 16px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  flex-shrink: 0;
}

.room-header-clickable {
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background-color 0.15s;
}

.room-header-clickable:hover {
  background-color: rgba(134, 150, 160, 0.12);
}

.btn-mobile-back {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}

.room-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-status-text {
  font-size: 0.78rem;
  color: var(--accent);
  font-style: italic;
}

/* Floating Search Bar */
.room-search-bar {
  position: absolute;
  top: 68px;
  right: 18px;
  z-index: 120;
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 5px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  animation: slideSearchPill 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideSearchPill {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0); }
}

.room-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-search-icon {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.room-search-input {
  width: 230px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.88rem;
  color: var(--text-main);
  padding: 4px 2px;
}

.room-search-match-count {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.room-search-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.room-search-nav-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-main);
}

.room-search-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.room-search-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.room-search-close-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--offline-red);
}

/* Such-Highlights */
mark.search-highlight {
  background-color: #fef08a !important;
  color: #1e293b !important;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
}

[data-theme="dark"] mark.search-highlight {
  background-color: #854d0e !important;
  color: #fef08a !important;
}

mark.search-highlight.active {
  background-color: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #ea580c, 0 2px 10px rgba(249, 115, 22, 0.5);
}

/* Banner */
.unknown-contact-banner,
.group-invite-banner {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 9;
  flex-shrink: 0;
}

.group-invite-banner-locked {
  background-color: var(--bg-secondary);
  color: var(--text-muted);
  padding: 12px;
  text-align: center;
  font-size: 0.88rem;
  border-top: 1px solid var(--border);
}

.contact-request-tag {
  background: rgba(234, 179, 8, 0.16);
  color: #d97706;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.70rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
}

/* Messages Container */
.messages-container {
  flex: 1;
  padding: 16px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 20 L15 14 L21 20 M15 14 L15 28 M35 15 C33 13 30 13 28 15 C26 17 26 20 28 22 L35 29 L42 22 C44 20 44 17 42 15 C40 13 37 13 35 15 Z M60 16 A6 6 0 1 0 60 28 A6 6 0 1 0 60 16 Z M85 14 L95 14 L95 24 L85 24 Z M105 18 C108 14 114 14 117 18 L111 26 Z M10 50 A5 5 0 0 1 20 50 A5 5 0 0 1 10 50 Z M40 45 L50 55 M50 45 L40 55 M75 48 C72 45 68 45 65 48 C62 51 62 55 65 58 L75 68 L85 58 C88 55 88 51 85 48 C82 45 78 45 75 48 Z M100 46 L112 46 L106 58 Z M20 80 L30 72 L30 88 Z M55 76 A7 7 0 1 0 55 90 A7 7 0 1 0 55 76 Z M80 75 L90 85 M80 85 L90 75 M105 80 L115 80 L115 90 L105 90 Z M15 105 L25 115 M25 105 L15 115 M45 102 C42 100 38 100 35 102 C32 104 32 108 35 110 L45 120 L55 110 C58 108 58 104 55 102 C52 100 48 100 45 102 Z M75 104 A6 6 0 1 0 75 116 A6 6 0 1 0 75 104 Z M100 105 L110 98 L110 112 Z' fill='%23000000' fill-opacity='0.045' fill-rule='evenodd'/%3E%3C/svg%3E");
}

[data-theme="dark"] .messages-container {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 20 L15 14 L21 20 M15 14 L15 28 M35 15 C33 13 30 13 28 15 C26 17 26 20 28 22 L35 29 L42 22 C44 20 44 17 42 15 C40 13 37 13 35 15 Z M60 16 A6 6 0 1 0 60 28 A6 6 0 1 0 60 16 Z M85 14 L95 14 L95 24 L85 24 Z M105 18 C108 14 114 14 117 18 L111 26 Z M10 50 A5 5 0 0 1 20 50 A5 5 0 0 1 10 50 Z M40 45 L50 55 M50 45 L40 55 M75 48 C72 45 68 45 65 48 C62 51 62 55 65 58 L75 68 L85 58 C88 55 88 51 85 48 C82 45 78 45 75 48 Z M100 46 L112 46 L106 58 Z M20 80 L30 72 L30 88 Z M55 76 A7 7 0 1 0 55 90 A7 7 0 1 0 55 76 Z M80 75 L90 85 M80 85 L90 75 M105 80 L115 80 L115 90 L105 90 Z M15 105 L25 115 M25 105 L15 115 M45 102 C42 100 38 100 35 102 C32 104 32 108 35 110 L45 120 L55 110 C58 108 58 104 55 102 C52 100 48 100 45 102 Z M75 104 A6 6 0 1 0 75 116 A6 6 0 1 0 75 104 Z M100 105 L110 98 L110 112 Z' fill='%23ffffff' fill-opacity='0.035' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.date-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
  width: 100%;
}

.date-divider span {
  background-color: #ffffff;
  color: #54656f;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.15);
}

[data-theme="dark"] .date-divider span {
  background-color: #182229;
  color: #8696a0;
}

/* Message Rows mit Miniatur-Avataren */
.message-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin-bottom: 4px;
}

.message-row.outgoing {
  justify-content: flex-end;
}

.message-row.incoming {
  justify-content: flex-start;
}

.msg-avatar-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  user-select: none;
}

.msg-avatar-thumb.incoming {
  margin-right: 0;
}

.msg-avatar-thumb.outgoing {
  margin-left: 0;
}

.message-bubble {
  max-width: 65%;
  min-width: 85px;
  padding: 6px 9px 6px 11px;
  line-height: 1.42;
  font-size: 14.2px;
  position: relative;
  word-break: break-word;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.message-bubble.incoming {
  background-color: var(--bubble-in-bg);
  color: var(--bubble-in-text);
  border-radius: 0px 8px 8px 8px;
  margin-right: auto;
  margin-left: 2px;
}

.message-bubble.incoming::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 8px solid var(--bubble-in-bg);
  border-left: 6px solid transparent;
}

.message-bubble.outgoing {
  background-color: var(--bubble-out-bg);
  color: var(--bubble-out-text);
  border-radius: 8px 0px 8px 8px;
  margin-left: auto;
  margin-right: 2px;
}

.message-bubble.outgoing::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 0;
  height: 0;
  border-top: 8px solid var(--bubble-out-bg);
  border-right: 6px solid transparent;
}

.message-author {
  font-size: 12.8px;
  font-weight: 600;
  color: #1f9c87;
  margin-bottom: 2px;
}

[data-theme="dark"] .message-author {
  color: #53bdeb;
}

.msg-body {
  display: block;
}

.message-meta {
  font-size: 11px;
  color: #667781;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  float: right;
  margin-left: 8px;
  margin-top: 4px;
  user-select: none;
  white-space: nowrap;
}

[data-theme="dark"] .message-meta {
  color: #8696a0;
}

.msg-time {
  font-size: 11px;
}

.receipt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 11px;
}

.receipt-icon.sent svg path,
.receipt-icon.delivered svg path { stroke: #8696a0; }
.receipt-icon.read svg path { stroke: #53bdeb !important; }

.msg-actions {
  display: none;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}

.message-bubble:hover .msg-actions {
  display: inline-flex;
}

.msg-btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0 1px;
  opacity: 0.7;
}

.msg-btn-icon:hover {
  opacity: 1;
}

/* ==========================================================================
   WhatsApp-Style Waveform Voice Message Player
   ========================================================================== */
.voice-msg-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
  min-width: 240px;
  max-width: 310px;
  user-select: none;
}

.voice-play-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 168, 132, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.voice-play-btn:hover {
  transform: scale(1.06);
  background: var(--accent-hover);
}

.voice-waveform-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.voice-waveform-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 26px;
  cursor: pointer;
  padding: 2px 0;
}

.voice-bar {
  flex: 1;
  border-radius: 2px;
  background: rgba(100, 116, 139, 0.35);
  transition: background-color 0.12s ease, transform 0.1s ease;
  min-height: 4px;
}

.message-bubble.outgoing .voice-bar {
  background: rgba(15, 23, 42, 0.28);
}

[data-theme="dark"] .message-bubble.outgoing .voice-bar {
  background: rgba(255, 255, 255, 0.35);
}

.voice-bar.active {
  background: var(--accent) !important;
}

.voice-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: system-ui, -apple-system, monospace;
  font-weight: 600;
  line-height: 1;
}

.voice-speed-pill {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  cursor: pointer;
  font-weight: 700;
  transition: background-color 0.12s ease;
}

[data-theme="dark"] .voice-speed-pill {
  background: rgba(255, 255, 255, 0.12);
}

.voice-speed-pill:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ==========================================================================
   Dateianhänge & Bild-Vorschau
   ========================================================================== */
.attachment-preview-box {
  margin-top: 4px;
  max-width: 290px;
  max-height: 240px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  position: relative;
}

.attachment-img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.attachment-img.clickable-preview {
  cursor: zoom-in;
  transition: transform 0.18s ease;
}

.attachment-img.clickable-preview:hover {
  transform: scale(1.02);
}

.attachment-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attachment-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.attachment-details {
  min-width: 0;
}

.attachment-filename {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-size {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.btn-download-att {
  background: var(--accent);
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
}

/* ==========================================================================
   Bild Lightbox Modal (PopUp)
   ========================================================================== */
.image-lightbox-overlay {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  z-index: 10000;
  padding: 16px;
}

.image-lightbox-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--bg-secondary);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: fadeInModal 0.18s ease-out;
}

.image-lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.lightbox-filename {
  font-weight: 600;
  font-size: 0.90rem;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lightbox-btn-action {
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease;
}

.lightbox-btn-action:hover {
  background: var(--accent-hover);
}

.lightbox-btn-close {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

[data-theme="dark"] .lightbox-btn-close {
  background: rgba(255, 255, 255, 0.08);
}

.lightbox-btn-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--offline-red);
}

.image-lightbox-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #0b141a;
  overflow: hidden;
}

.lightbox-img {
  max-width: 85vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   WhatsApp Input Area
   ========================================================================== */
.input-area {
  padding: 12px 20px;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.whatsapp-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.whatsapp-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  flex-shrink: 0;
}

.whatsapp-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.whatsapp-input-pill {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 9px 14px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  min-height: 42px;
}

[data-theme="dark"] .whatsapp-input-pill {
  background-color: #2a3942;
}

.whatsapp-input-pill textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  resize: none;
  font-size: 15px;
  line-height: 20px;
  font-family: inherit;
  min-height: 20px;
  max-height: 120px;
}

/* Voice Recording Bar */
.recording-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.recording-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--offline-red);
  animation: recPulse 1s infinite alternate ease-in-out;
}

@keyframes recPulse {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.3; transform: scale(0.85); }
}

.recording-timer {
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
}

.btn-cancel-rec {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  margin-left: auto;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.btn-cancel-rec:hover {
  opacity: 1;
}

.btn-send-whatsapp {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #00a884;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-send-whatsapp.is-mic {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  font-size: 1.35rem;
}

.btn-send-whatsapp.is-recording-send {
  background-color: var(--offline-red) !important;
  color: #ffffff !important;
  animation: recPulse 1s infinite alternate ease-in-out;
}

.btn-scroll-bottom {
  position: absolute;
  bottom: 75px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}