/* Support */
.support-container {
  padding: 16px;
}

/* Ticket List */
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-card);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: all var(--transition);
}

.ticket-item:hover {
  box-shadow: var(--shadow-md);
}

.ticket-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ticket-status-dot--open { background: var(--color-accent); }
.ticket-status-dot--in_progress { background: var(--color-event-ausflug); }
.ticket-status-dot--closed { background: var(--color-muted); }

.ticket-info {
  flex: 1;
  min-width: 0;
}

.ticket-subject {
  font-weight: 600;
  font-size: 0.95rem;
}

.ticket-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.ticket-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.ticket-badge--open { background: rgba(196,113,58,0.15); color: var(--color-accent); }
.ticket-badge--in_progress { background: rgba(74,123,157,0.15); color: var(--color-event-ausflug); }
.ticket-badge--closed { background: rgba(107,124,101,0.15); color: var(--color-muted); }

/* Support Chat */
.support-chat {
  padding: 12px 16px;
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: calc(100vh - var(--header-height) - var(--nav-height) - 64px);
}

.support-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius-card);
  font-size: 0.92rem;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.support-bubble--user {
  align-self: flex-end;
  background: var(--color-card);
  border-bottom-right-radius: 4px;
}

.support-bubble--admin {
  align-self: flex-start;
  background: var(--color-primary);
  color: var(--color-white);
  border-bottom-left-radius: 4px;
}

.support-bubble-meta {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-top: 4px;
}

/* Audio player in bubble */
.support-audio {
  margin-top: 6px;
}

.support-audio audio {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
}

/* Record button */
.record-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all var(--transition);
  background: var(--color-card);
  color: var(--color-text);
}

.record-btn.recording {
  background: var(--color-danger);
  color: var(--color-white);
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Status selector */
.status-selector {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}

.status-option {
  flex: 1;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
}

.status-option--open { background: rgba(196,113,58,0.1); color: var(--color-accent); }
.status-option--in_progress { background: rgba(74,123,157,0.1); color: var(--color-event-ausflug); }
.status-option--closed { background: rgba(107,124,101,0.1); color: var(--color-muted); }

.status-option.active {
  border-color: currentColor;
}