/* ProtectedRoute */

._loading-spinner_2n64k_3 {
   width: 24px;
   height: 24px;
   border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: _spin_2n64k_1 0.8s linear infinite;
}
/* =============================================================================
   SVG Icon Base Styles
   ============================================================================= */

._icon_tuqfy_5 {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: currentColor;
}

._dot_1u0fv_1 {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Sizes */
._sm_1u0fv_8 {
    width: 8px;
    height: 8px;
}

._md_1u0fv_13 {
    width: 10px;
    height: 10px;
}

._lg_1u0fv_18 {
    width: 14px;
    height: 14px;
}

/* Status colors */
._online_1u0fv_24 {
    background-color: #43b581;
}

._idle_1u0fv_28 {
    background-color: #faa61a;
}

._dnd_1u0fv_32 {
    background-color: #f04747;
}

._offline_1u0fv_36 {
    background-color: #747f8d;
}
._media-library_dalox_1 {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    max-height: 480px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

._media-header_dalox_14 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

._media-header_dalox_14 h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

._media-close_dalox_30 {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._media-close_dalox_30:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

._media-tabs_dalox_46 {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

._media-tab_dalox_46 {
    flex: 1;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    font-family: inherit;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._media-tab_dalox_46:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

._media-tab-active_dalox_72 {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-weight: 600;
}

._media-toolbar_dalox_78 {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
}

._media-search_dalox_85 {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--motion-fast) var(--motion-ease-standard);
}

._media-search_dalox_85:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

._media-search_dalox_85::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

._media-filter_dalox_108 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

._media-upload-btn_dalox_118 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._media-upload-btn_dalox_118:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 15%, transparent));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-1px);
}

._media-upload-form_dalox_138 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.1);
}

._media-input_dalox_147 {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--motion-fast) var(--motion-ease-standard);
}

._media-input_dalox_147:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

._media-input_dalox_147::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

._media-file-input_dalox_171 {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

._media-submit-btn_dalox_176 {
    background: var(--gradient);
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._media-submit-btn_dalox_176:hover {
    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 30%, transparent);
    transform: translateY(-1px);
}

._media-submit-btn_dalox_176:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

._media-ai-section_dalox_200 {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

._media-ai-btn_dalox_207 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 15%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
    color: var(--accent-2, #ff5bbd);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._media-ai-btn_dalox_207:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 25%, transparent));
    border-color: color-mix(in srgb, var(--accent-2) 50%, transparent);
    transform: translateY(-1px);
}

._media-ai-btn_dalox_207:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

._media-grid_dalox_233 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
    padding: 10px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 100px;
}

._media-item_dalox_243 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._media-item_dalox_243:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

._media-item_dalox_243 img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 4px;
}

._media-item-name_dalox_268 {
    font-size: 0.65rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60px;
}

._media-empty_dalox_277 {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 20px;
}
._dm-overlay_cqb0q_1 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: _motion-fade-in_cqb0q_1 var(--motion-fast) var(--motion-ease-standard);
}

._dm-panel_cqb0q_14 {
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: _motion-modal-enter_cqb0q_1 var(--motion-normal) var(--motion-ease-emphasized);
}

._dm-header_cqb0q_27 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

._dm-header_cqb0q_27 svg {
  color: var(--accent);
}

._dm-header-title_cqb0q_40 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

._dm-header-user_cqb0q_46 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

._dm-header-avatar_cqb0q_53 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

._dm-header-name_cqb0q_61 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

._dm-back-btn_cqb0q_67 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--motion-normal) var(--motion-ease-standard);
}

._dm-back-btn_cqb0q_67:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

._dm-close-btn_cqb0q_86 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--motion-normal) var(--motion-ease-standard);
  margin-left: auto;
}

._dm-close-btn_cqb0q_86:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

._dm-call-btn_cqb0q_106 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--green, #a6e3a1);
  cursor: pointer;
  transition: all var(--motion-normal) var(--motion-ease-standard);
  margin-left: auto;
}

._dm-call-btn_cqb0q_106:hover {
  background: rgba(166, 227, 161, 0.12);
  color: var(--green, #a6e3a1);
}

._dm-content_cqb0q_126 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._dm-error_cqb0q_133 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--error) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
  color: color-mix(in srgb, var(--error) 65%, transparent);
  font-size: 0.85rem;
}

._dm-error_cqb0q_133 button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  line-height: 1;
}

._dm-loading_cqb0q_154 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--muted);
}

._dm-loading-spinner_cqb0q_163 {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: _spin_cqb0q_1 0.8s linear infinite;
}

/* Conversation List */
._dm-list_cqb0q_173 {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

._dm-new-btn_cqb0q_179 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-normal) var(--motion-ease-standard);
}

._dm-new-btn_cqb0q_179:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 15%, transparent));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

._dm-empty_cqb0q_201 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}

._dm-empty_cqb0q_201 svg {
  opacity: 0.3;
  margin-bottom: 16px;
}

._dm-empty_cqb0q_201 p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

._dm-empty_cqb0q_201 span {
  font-size: 0.85rem;
  margin-top: 4px;
}

._dm-list-item_cqb0q_228 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--motion-normal) var(--motion-ease-standard);
  margin-bottom: 4px;
}

._dm-list-item_cqb0q_228:hover {
  background: rgba(255, 255, 255, 0.06);
}

._dm-list-item_cqb0q_228._unread_cqb0q_243 {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

._dm-list-avatar_cqb0q_247 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

._dm-list-avatar-wrap_cqb0q_255,
._dm-header-avatar-wrap_cqb0q_256 {
  position: relative;
  flex-shrink: 0;
}

._dm-list-status-dot_cqb0q_261 {
  position: absolute;
  bottom: 0;
  right: 0;
}

._dm-list-info_cqb0q_267 {
  flex: 1;
  min-width: 0;
}

._dm-list-header_cqb0q_272 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

._dm-list-name_cqb0q_279 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

._dm-list-item_cqb0q_228._unread_cqb0q_243 ._dm-list-name_cqb0q_279 {
  color: var(--accent);
}

._dm-list-time_cqb0q_289 {
  font-size: 0.75rem;
  color: var(--muted);
}

._dm-list-preview_cqb0q_294 {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._dm-list-badge_cqb0q_302 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #0a0e20;
  font-size: 0.75rem;
  font-weight: 600;
}

/* New DM Form */
._dm-new-form_cqb0q_317 {
  padding: 16px;
}

._dm-back-form_cqb0q_321 {
  width: auto;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}

._dm-form-group_cqb0q_329 {
  margin-bottom: 16px;
}

._dm-form-group_cqb0q_329 label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

._dm-form-group_cqb0q_329 input,
._dm-form-group_cqb0q_329 textarea {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: all var(--motion-normal) var(--motion-ease-standard);
}

._dm-form-group_cqb0q_329 input:focus,
._dm-form-group_cqb0q_329 textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: rgba(255, 255, 255, 0.08);
}

._dm-form-group_cqb0q_329 textarea {
  resize: vertical;
  min-height: 80px;
}

/* Recipient search dropdown */
._dm-recipient-field_cqb0q_367 {
  position: relative;
}

._dm-recipient-input_cqb0q_371 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 8px 6px 12px;
}

._dm-recipient-input_cqb0q_371 input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  padding: 6px 0;
}

._dm-recipient-input_cqb0q_371._selected_cqb0q_391 {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

._dm-recipient-clear_cqb0q_395 {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  line-height: 1;
}

._dm-recipient-clear_cqb0q_395:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

._dm-recipient-dropdown_cqb0q_411 {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(12, 16, 28, 0.95);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  max-height: 240px;
  overflow-y: auto;
  backdrop-filter: blur(6px);
}

._dm-recipient-option_cqb0q_426 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

._dm-recipient-option_cqb0q_426:hover,
._dm-recipient-option_cqb0q_426:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

._dm-recipient-option_cqb0q_426 img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

._dm-recipient-status_cqb0q_453 {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

._dm-recipient-status_cqb0q_453._error_cqb0q_459 {
  color: color-mix(in srgb, var(--error) 65%, transparent);
}

._dm-submit-btn_cqb0q_463 {
  width: 100%;
  padding: 12px;
  background: var(--gradient);
  border: none;
  border-radius: 10px;
  color: #0a0e20;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--motion-normal) var(--motion-ease-standard);
}

._dm-submit-btn_cqb0q_463:hover {
  opacity: 0.9;
}

._dm-submit-btn_cqb0q_463:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Messages View */
._dm-messages_cqb0q_486 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._dm-messages-list_cqb0q_493 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._dm-message_cqb0q_486 {
  display: flex;
  gap: 10px;
  max-width: 85%;
}

._dm-message_cqb0q_486._own_cqb0q_508 {
  margin-left: auto;
  flex-direction: row-reverse;
}

._dm-message-avatar_cqb0q_513 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

._dm-message-content_cqb0q_521 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._dm-message_cqb0q_486._own_cqb0q_508 ._dm-message-content_cqb0q_521 {
  align-items: flex-end;
}

._dm-message-bubble_cqb0q_531 {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  word-break: break-word;
}

._dm-message_cqb0q_486._other_cqb0q_539 ._dm-message-bubble_cqb0q_531 {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

._dm-message_cqb0q_486._own_cqb0q_508 ._dm-message-bubble_cqb0q_531 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 20%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
  border-bottom-right-radius: 4px;
}

._dm-message-time_cqb0q_553 {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0 4px;
}

/* Message Meta (time + read status) */
._dm-message-meta_cqb0q_560 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

/* Read Status Indicator */
._dm-read-status_cqb0q_568 {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
}

._dm-read-status_cqb0q_568._read_cqb0q_574 {
  color: var(--accent);
  opacity: 1;
}

._dm-read-status_cqb0q_568._sent_cqb0q_579 {
  color: var(--muted);
}

/* Input Area */
._dm-input-area_cqb0q_584 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

._dm-input-area_cqb0q_584 input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: all var(--motion-normal) var(--motion-ease-standard);
}

._dm-input-area_cqb0q_584 input:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgba(255, 255, 255, 0.08);
}

._dm-input-area_cqb0q_584 input::placeholder {
  color: var(--muted);
}

._dm-input-area_cqb0q_584 button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient);
  border: none;
  color: #0a0e20;
  cursor: pointer;
  transition: all var(--motion-normal) var(--motion-ease-standard);
}

._dm-input-area_cqb0q_584 button:hover {
  transform: scale(1.05);
}

._dm-input-area_cqb0q_584 button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Message type styles */
._dm-gif-message_cqb0q_639,
._dm-image-message_cqb0q_640 {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: contain;
  cursor: pointer;
}

._dm-file-message_cqb0q_648 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--accent);
  text-decoration: none;
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

._dm-file-message_cqb0q_648:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Edit/Delete actions */
._dm-message-actions_cqb0q_665 {
  display: none;
  gap: 2px;
  margin-left: 4px;
}

._dm-message_cqb0q_486:hover ._dm-message-actions_cqb0q_665 {
  display: inline-flex;
}

._dm-message-actions_cqb0q_665 button {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

._dm-message-actions_cqb0q_665 button:hover {
  opacity: 1;
}

._dm-edited-label_cqb0q_689 {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Inline edit form */
._dm-edit-form_cqb0q_696 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._dm-edit-form_cqb0q_696 input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--fg);
  font-size: 14px;
}

._dm-edit-form_cqb0q_696 button {
  background: none;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg);
  opacity: 0.7;
  transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

._dm-edit-form_cqb0q_696 button:hover {
  opacity: 1;
}

/* GIF picker in DMs */
._dm-gif-button_cqb0q_728 {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--muted);
  transition: all var(--motion-fast) var(--motion-ease-standard);
  flex-shrink: 0;
}

._dm-gif-button_cqb0q_728:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.35);
}

._dm-gif-picker-overlay_cqb0q_747 {
  position: absolute;
  bottom: 60px;
  left: 12px;
  right: 12px;
  z-index: 10;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  overflow: hidden;
}

._dm-emoji-picker-overlay_cqb0q_758 {
  position: absolute;
  bottom: 60px;
  left: 12px;
  right: 12px;
  z-index: 10;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  overflow: hidden;
}

._dm-emoji-button_cqb0q_769 {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

._dm-emoji-button_cqb0q_769:hover {
  background: rgba(255, 255, 255, 0.08);
}

._dm-file-button_cqb0q_783 {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

._dm-file-button_cqb0q_783:hover {
  background: rgba(255, 255, 255, 0.08);
}

._dm-file-button_cqb0q_783:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Offline Queue Indicators */
._dm-queued_cqb0q_803 ._dm-message-bubble_cqb0q_531 {
  opacity: 0.6;
  border-left: 2px solid var(--warning, #f5a623);
}

._dm-queue-icon_cqb0q_808 {
  font-size: 12px;
  margin-left: 4px;
}

._dm-queue-failed_cqb0q_813 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  font-size: 12px;
}

._dm-retry-btn_cqb0q_821 {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 14px;
  cursor: pointer;
  color: var(--accent);
  opacity: 0.7;
  transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

._dm-retry-btn_cqb0q_821:hover {
  opacity: 1;
}

._dm-offline-badge_cqb0q_836 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(245, 166, 35, 0.15);
  color: var(--warning, #f5a623);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
._wrapper_yctou_1 {
    position: relative;
    display: inline-flex;
}

._trigger_yctou_6 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

._trigger_yctou_6:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
}

._dropdown_yctou_21 {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    padding: 6px;
    min-width: 180px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._option_yctou_31 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-primary, #cdd6f4);
    cursor: pointer;
    font-size: 13px;
}

._option_yctou_31:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
}

._option_yctou_31._active_yctou_49 {
    background: var(--surface-active, rgba(255, 255, 255, 0.12));
}

._customForm_yctou_53 {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border, #333);
}

._customInput_yctou_59 {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-primary, #11111b);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    color: var(--text-primary, #cdd6f4);
    font-size: 12px;
    outline: none;
}

._customInput_yctou_59::placeholder {
    color: var(--text-muted, #6c7086);
}

._customInput_yctou_59:focus {
    border-color: var(--accent, #89b4fa);
}
/* =============================================================================
   SPOTIFY PARTY - Watch-Party UI within SpotifyPanel
   ============================================================================= */

._spotify-party_1st9n_5 {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._spotify-party-header_1st9n_12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

._spotify-party-header_1st9n_12 h4 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Create / Join section */
._spotify-party-actions_1st9n_30 {
    display: flex;
    gap: 8px;
}

._spotify-party-btn_1st9n_35 {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(29, 185, 84, 0.3);
    border-radius: 8px;
    background: rgba(29, 185, 84, 0.1);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

._spotify-party-btn_1st9n_35:hover {
    background: rgba(29, 185, 84, 0.2);
    border-color: rgba(29, 185, 84, 0.5);
}

._spotify-party-btn_1st9n_35._active_1st9n_57 {
    background: rgba(29, 185, 84, 0.3);
    border-color: var(--spotify-green);
}

._spotify-party-btn-leave_1st9n_62 {
    padding: 6px 12px;
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-radius: 6px;
    background: rgba(255, 80, 80, 0.1);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._spotify-party-btn-leave_1st9n_62:hover {
    background: rgba(255, 80, 80, 0.2);
    color: #ff5050;
}

/* Join input */
._spotify-party-join_1st9n_79 {
    display: flex;
    gap: 8px;
}

._spotify-party-join_1st9n_79 input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg, rgba(255, 255, 255, 0.05));
    color: var(--text);
    font-size: 0.8rem;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

._spotify-party-join_1st9n_79 input::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

._spotify-party-join_1st9n_79 button {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--spotify-green);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast);
}

._spotify-party-join_1st9n_79 button:hover {
    background: #1ed760;
}

._spotify-party-join_1st9n_79 button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Active party state */
._spotify-party-active_1st9n_125 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._spotify-party-code_1st9n_131 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(29, 185, 84, 0.08);
    border: 1px solid rgba(29, 185, 84, 0.2);
    border-radius: 8px;
}

._spotify-party-code-label_1st9n_141 {
    font-size: 0.75rem;
    color: var(--text-muted);
}

._spotify-party-code-value_1st9n_146 {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--spotify-green);
    letter-spacing: 3px;
    cursor: pointer;
    user-select: all;
}

._spotify-party-code-value_1st9n_146:hover {
    text-decoration: underline;
}

/* Members list */
._spotify-party-members_1st9n_161 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._spotify-party-members-title_1st9n_167 {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

._spotify-party-member_1st9n_161 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text);
}

._spotify-party-member-host_1st9n_185 {
    background: rgba(29, 185, 84, 0.08);
}

._spotify-party-member-badge_1st9n_189 {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(29, 185, 84, 0.2);
    color: var(--spotify-green);
    font-weight: 600;
}

/* Premium warning for listeners */
._spotify-party-premium-warning_1st9n_199 {
    padding: 10px 12px;
    background: rgba(255, 180, 0, 0.1);
    border: 1px solid rgba(255, 180, 0, 0.2);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Error */
._spotify-party-error_1st9n_212 {
    padding: 8px 12px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #ff5050;
}

/* Divider */
._spotify-party-divider_1st9n_222 {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
/* =============================================================================
   YOUTUBE PARTY PANEL - Overlay panel for YouTube Watch-Party
   ============================================================================= */

._youtube-party-panel_119y9_5 {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    animation: _slideIn_119y9_1 0.2s ease-out;
}

@keyframes _slideIn_119y9_1 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

._panel-header_119y9_30 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

._panel-header_119y9_30 h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

._close-button_119y9_48 {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}

._close-button_119y9_48:hover {
    background: var(--bg-hover);
    color: var(--text);
}

._panel-body_119y9_62 {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
}

/* URL input */
._url-input-section_119y9_72 {
    display: flex;
    gap: 8px;
}

._url-input_119y9_72 {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text);
    font-size: 0.85rem;
}

._url-input_119y9_72:focus {
    outline: none;
    border-color: #ff0000;
}

._url-submit_119y9_92 {
    padding: 8px 14px;
    background: #ff0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

._url-submit_119y9_92:hover {
    background: #cc0000;
}

._url-submit_119y9_92:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Party controls */
._party-section_119y9_114 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._party-actions_119y9_120 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

._party-button_119y9_126 {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

._party-button_119y9_126:hover {
    background: var(--bg-hover);
}

._party-button-primary_119y9_143 {
    background: #ff0000;
    color: white;
    border-color: #ff0000;
}

._party-button-primary_119y9_143:hover {
    background: #cc0000;
}

._party-button-danger_119y9_153 {
    border-color: var(--error);
    color: var(--error);
}

._party-button-danger_119y9_153:hover {
    background: color-mix(in srgb, var(--error) 10%, transparent);
}

._party-code_119y9_162 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.8rem;
}

._party-code_119y9_162 code {
    font-weight: 700;
    color: #ff0000;
    letter-spacing: 1px;
}

._party-join-input_119y9_178 {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text);
    font-size: 0.8rem;
    width: 100px;
    text-transform: uppercase;
}

/* Members */
._members-section_119y9_190 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._members-section_119y9_190 h4 {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

._member-item_119y9_203 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text);
}

._member-badge_119y9_211 {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

._member-badge-host_119y9_218 {
    background: color-mix(in srgb, #ff0000 15%, transparent);
    color: #ff0000;
}

._member-badge-viewer_119y9_223 {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Error */
._error-message_119y9_229 {
    color: var(--error);
    font-size: 0.8rem;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--error) 10%, transparent);
    border-radius: 6px;
}

._no-voice-message_119y9_237 {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    ._youtube-party-panel_119y9_5 {
        width: 100%;
    }
}
/* =============================================================================
   YOUTUBE PLAYER - YouTube IFrame embed for Watch-Party
   ============================================================================= */

._youtube-player-wrapper_12nt3_5 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

._youtube-player-wrapper_12nt3_5 iframe {
    width: 100%;
    height: 100%;
    border: none;
}

._youtube-player-placeholder_12nt3_20 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.85rem;
}

._youtube-player-placeholder_12nt3_20 svg {
    opacity: 0.4;
}
/* =============================================================================
   MEDIA CONTROLS – Voice Sidebar media sharing section
   ============================================================================= */

._media-controls_1dljl_5 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}

._media-controls-header_1dljl_13 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

._media-controls-header_1dljl_13 h4 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

._media-controls-toggle_1dljl_30 {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}

._media-controls-toggle_1dljl_30:hover {
    background: var(--bg-hover);
    color: var(--text);
}

._media-controls-body_1dljl_44 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Media source item */
._media-source_1dljl_51 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* File select */
._file-select-label_1dljl_58 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: var(--text);
    background: var(--bg-tertiary);
    border: 1px dashed var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

._file-select-label_1dljl_58:hover {
    background: var(--bg-hover);
}

/* Share button (tab / desktop) */
._media-share-btn_1dljl_77 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: var(--text);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

._media-share-btn_1dljl_77:hover {
    background: var(--bg-hover);
}

._media-share-btn_1dljl_77:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Active media indicator */
._media-active_1dljl_101 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent);
    border-radius: 6px;
}

._media-info_1dljl_111 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text);
}

._media-filename_1dljl_119 {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

._media-stop_1dljl_127 {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 2px;
    margin-left: auto;
    border-radius: 4px;
}

._media-stop_1dljl_127:hover {
    background: color-mix(in srgb, var(--error) 10%, transparent);
}

/* Playback controls */
._media-playback_1dljl_142 {
    display: flex;
    align-items: center;
    gap: 6px;
}

._media-play-btn_1dljl_148 {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 2px;
}

._media-time_1dljl_156 {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

._media-seek_1dljl_163 {
    flex: 1;
    height: 4px;
    accent-color: var(--accent);
}

/* Device select */
._device-select_1dljl_170 {
    padding: 4px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text);
}

/* Error */
._media-error_1dljl_180 {
    font-size: 0.75rem;
    color: var(--error);
}
/* =============================================================================
   MEDIA PARTY PANEL – Unified overlay panel for all media features
   ============================================================================= */

._overlay_sns09_5 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

._panel_sns09_15 {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 480px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

._header_sns09_28 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

._title_sns09_36 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

._closeBtn_sns09_43 {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

._closeBtn_sns09_43:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Tabs */
._tabs_sns09_58 {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 8px;
}

._tab_sns09_58 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

._tab_sns09_58:hover {
    color: var(--text);
}

._tabActive_sns09_82 {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Content area */
._content_sns09_88 {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

._notConnected_sns09_94 {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 32px 16px;
}
/* SearchModal */

._search-modal-backdrop_13rvt_3 {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: flex-start;
   justify-content: center;
   z-index: 1500;
   padding-top: 15vh;
   animation: _motion-fade-in_13rvt_1 var(--motion-fast) var(--motion-ease-standard);
}

._search-modal_13rvt_3 {
   background: var(--panel);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 16px;
   width: 100%;
   max-width: 560px;
   max-height: 70vh;
   display: flex;
   flex-direction: column;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
   animation: _motion-modal-enter_13rvt_1 var(--motion-normal) var(--motion-ease-emphasized);
   overflow: hidden;
}

._search-modal-header_13rvt_30 {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(0, 0, 0, 0.2);
}

._search-modal-icon_13rvt_39 {
   color: var(--muted);
   flex-shrink: 0;
}

._search-modal-input_13rvt_44 {
   flex: 1;
   background: none;
   border: none;
   outline: none;
   color: var(--text);
   font-size: 1rem;
}

._search-modal-input_13rvt_44::placeholder {
   color: var(--muted);
}

/* Loading spinner */
._search-spinner_13rvt_58 {
   width: 18px;
   height: 18px;
   border: 2px solid rgba(255, 255, 255, 0.1);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: _spin_13rvt_1 0.6s linear infinite;
   flex-shrink: 0;
}

@keyframes _spin_13rvt_1 {
   to {
      transform: rotate(360deg);
   }
}

._search-modal-close_13rvt_74 {
   background: none;
   border: none;
   color: var(--muted);
   cursor: pointer;
   padding: 0.4rem;
   border-radius: 6px;
   display: flex;
   align-items: center;
   transition: color var(--motion-fast), background var(--motion-fast);
}

._search-modal-close_13rvt_74:hover {
   color: var(--text);
   background: rgba(255, 255, 255, 0.08);
}

._search-modal-results_13rvt_91 {
   overflow-y: auto;
   padding: 0.25rem 0.5rem 0.5rem;
}

/* Section grouping */
._search-section_13rvt_97 {
   margin-bottom: 0.25rem;
}

._search-section_13rvt_97:last-child {
   margin-bottom: 0;
}

._search-section-header_13rvt_105 {
   font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--muted);
   padding: 0.5rem 0.75rem 0.25rem;
}

._search-result-item_13rvt_114 {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   width: 100%;
   padding: 0.5rem 0.75rem;
   background: none;
   border: none;
   border-radius: 8px;
   color: var(--text);
   cursor: pointer;
   text-align: left;
   transition: background var(--motion-fast);
}

._search-result-item_13rvt_114:hover,
._search-result-item_13rvt_114._selected_13rvt_130 {
   background: rgba(255, 255, 255, 0.08);
}

._search-result-icon_13rvt_134 {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.06);
   color: var(--accent);
   flex-shrink: 0;
   overflow: hidden;
}

/* Category-specific icon colors */
._icon-user_13rvt_148 {
   color: #60a5fa;
   background: rgba(96, 165, 250, 0.1);
   border-radius: 50%;
}

._icon-video_13rvt_154 {
   color: #f472b6;
   background: rgba(244, 114, 182, 0.1);
}

._icon-media_13rvt_159 {
   color: #a78bfa;
   background: rgba(167, 139, 250, 0.1);
}

/* Avatar image in search results */
._search-avatar_13rvt_165 {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

._search-result-content_13rvt_172 {
   flex: 1;
   min-width: 0;
}

._search-result-title_13rvt_177 {
   font-size: 0.9rem;
   font-weight: 500;
   color: var(--text);
}

._search-result-description_13rvt_183 {
   font-size: 0.8rem;
   color: var(--muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

._search-result-type_13rvt_191 {
   font-size: 0.7rem;
   color: var(--muted);
   padding: 0.15rem 0.5rem;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.06);
   flex-shrink: 0;
}

._search-no-results_13rvt_200 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   padding: 2rem 1rem;
   color: var(--muted);
   text-align: center;
}

._search-modal-help_13rvt_210 {
   padding: 1rem 1.25rem;
   color: var(--muted);
   font-size: 0.85rem;
}

._search-modal-shortcuts_13rvt_216 {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-top: 0.75rem;
   font-size: 0.8rem;
   color: var(--muted);
}

._search-modal-shortcuts_13rvt_216 kbd {
   padding: 0.15rem 0.4rem;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   font-family: inherit;
   font-size: 0.75rem;
}
._notification-center-overlay_1goka_1 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1500;
  padding-top: 15vh;
  animation: _motion-fade-in_1goka_1 var(--motion-fast) var(--motion-ease-standard);
}

._notification-center_1goka_1 {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  animation: _motion-modal-enter_1goka_1 var(--motion-normal) var(--motion-ease-emphasized);
}

._notification-center-header_1goka_27 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

._notification-center-header_1goka_27 h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

._notification-center-header_1goka_27 h3 svg {
  color: var(--accent);
}

._notification-center-close_1goka_50 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all var(--motion-normal) var(--motion-ease-standard);
}

._notification-center-close_1goka_50:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

._notification-center-actions_1goka_65 {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 0.5rem;
}

._notification-center-actions_1goka_65 button {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-normal) var(--motion-ease-standard);
}

._notification-center-actions_1goka_65 button:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 20%, transparent));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

._notification-center-list_1goka_90 {
  flex: 1;
  overflow-y: auto;
}

._notification-center-list_1goka_90::-webkit-scrollbar {
  width: 6px;
}

._notification-center-list_1goka_90::-webkit-scrollbar-track {
  background: transparent;
}

._notification-center-list_1goka_90::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

._notification-item_1goka_108 {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

._notification-item_1goka_108:hover {
  background: rgba(255, 255, 255, 0.04);
}

._notification-item_1goka_108._unread_1goka_120 {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

._notification-item_1goka_108._read_1goka_124 {
  opacity: 0.7;
}

._notification-item_1goka_108._notification-message_1goka_128 {
  border-left: 3px solid var(--accent);
}

._notification-item_1goka_108._notification-activity_1goka_132 {
  border-left: 3px solid #4f46e5;
}

._notification-item_1goka_108._notification-system_1goka_136 {
  border-left: 3px solid #f59e0b;
}

._notification-item-content_1goka_140 {
  flex: 1;
  min-width: 0;
}

._notification-item-title_1goka_145 {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text);
}

._notification-item-message_1goka_151 {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  word-break: break-word;
}

._notification-item-time_1goka_158 {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.7;
}

._notification-item-actions_1goka_164 {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

._notification-mark-read_1goka_170,
._notification-delete_1goka_171 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 6px;
  font-size: 0.85rem;
  transition: all var(--motion-normal) var(--motion-ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
}

._notification-mark-read_1goka_170:hover {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

._notification-delete_1goka_171:hover {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  color: color-mix(in srgb, var(--error) 65%, transparent);
}

._notification-center-loading_1goka_195,
._notification-center-empty_1goka_196 {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
}

._notification-center-empty_1goka_196 svg {
  opacity: 0.3;
  margin-bottom: 1rem;
}
/* =============================================================================
   AI CHAT
   ============================================================================= */

._container_1dvew_5 {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* --- Sidebar --- */

._sidebar_1dvew_13 {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

._sidebarHeader_1dvew_23 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

._newBtn_1dvew_36 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

._newBtn_1dvew_36:hover {
    background: var(--surface-hover);
    color: var(--accent);
}

._convList_1dvew_55 {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

._convEmpty_1dvew_61 {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

._convItem_1dvew_68 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}

._convItem_1dvew_68:hover {
    background: var(--surface-hover);
}

._convItemActive_1dvew_82 {
    background: rgba(124, 58, 237, 0.12);
}

._convTitle_1dvew_86 {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

._convDelete_1dvew_95 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s, background 0.1s, color 0.1s;
}

._convItem_1dvew_68:hover ._convDelete_1dvew_95 {
    opacity: 1;
}

._convDelete_1dvew_95:hover {
    background: color-mix(in srgb, var(--error) 15%, transparent);
    color: var(--error);
}

/* --- Main --- */

._main_1dvew_122 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

._sidebarToggle_1dvew_129 {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

/* --- Messages --- */

._messages_1dvew_145 {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._emptyState_1dvew_154 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    color: var(--text-muted);
    text-align: center;
}

._emptyState_1dvew_154 p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

._emptyState_1dvew_154 span {
    font-size: 12px;
}

._message_1dvew_145 {
    display: flex;
}

._messageUser_1dvew_180 {
    justify-content: flex-end;
}

._messageAssistant_1dvew_184 {
    justify-content: flex-start;
}

._messageBubble_1dvew_188 {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

._messageUser_1dvew_180 ._messageBubble_1dvew_188 {
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
}

._messageAssistant_1dvew_184 ._messageBubble_1dvew_188 {
    background: var(--surface-hover);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

/* Blinking cursor during streaming */
._cursor_1dvew_211 {
    display: inline-block;
    width: 2px;
    height: 1em;
    vertical-align: text-bottom;
    background: currentColor;
    animation: _blink_1dvew_1 0.8s step-start infinite;
}

@keyframes _blink_1dvew_1 {
    50% {
        opacity: 0;
    }
}

/* --- Input Row --- */

._inputRow_1dvew_228 {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

._searchBtn_1dvew_237 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

._searchBtn_1dvew_237:hover {
    background: var(--surface-hover);
    color: var(--text);
}

._searchBtnActive_1dvew_257 {
    background: rgba(124, 58, 237, 0.15);
    color: var(--accent);
    border-color: var(--accent);
}

._input_1dvew_228 {
    flex: 1;
    resize: none;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    min-height: 36px;
    max-height: 120px;
    overflow-y: auto;
    transition: border-color 0.15s;
}

._input_1dvew_228:focus {
    outline: none;
    border-color: var(--accent);
}

._input_1dvew_228:disabled {
    opacity: 0.6;
}

._sendBtn_1dvew_289 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: white;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

._sendBtn_1dvew_289:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

._sendBtn_1dvew_289:not(:disabled):hover {
    background: var(--accent-hover, #6d28d9);
}

/* Spinner inside send button */
._spinner_1dvew_314 {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: _spin_1dvew_314 0.6s linear infinite;
}

@keyframes _spin_1dvew_314 {
    to {
        transform: rotate(360deg);
    }
}

/* --- Responsive (narrow: hide sidebar inline, show toggle) --- */

@media (max-width: 768px) {
    ._sidebar_1dvew_13 {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        transform: translateX(-100%);
        transition: transform 0.2s;
    }

    ._sidebarOpen_1dvew_343 {
        transform: translateX(0);
    }

    ._sidebarToggle_1dvew_129 {
        display: flex;
    }

    ._messageBubble_1dvew_188 {
        max-width: 90%;
    }
}
/* =============================================================================
   AI IMAGE GENERATOR
   ============================================================================= */

._container_1drtx_5 {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
}

/* --- Form --- */

._form_1drtx_16 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._label_1drtx_22 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

._promptInput_1drtx_28 {
    width: 100%;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

._promptInput_1drtx_28:focus {
    outline: none;
    border-color: var(--accent);
}

._promptInput_1drtx_28:disabled {
    opacity: 0.6;
}

._optionsRow_1drtx_52 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

._optionGroup_1drtx_59 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._optionLabel_1drtx_65 {
    font-size: 12px;
    color: var(--text-muted);
}

._select_1drtx_70 {
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s;
}

._select_1drtx_70:focus {
    outline: none;
    border-color: var(--accent);
}

._select_1drtx_70:disabled {
    opacity: 0.6;
}

._generateBtn_1drtx_90 {
    height: 34px;
    padding: 0 20px;
    border-radius: 7px;
    border: none;
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.15s;
    white-space: nowrap;
}

._generateBtn_1drtx_90:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

._generateBtn_1drtx_90:not(:disabled):hover {
    opacity: 0.88;
}

/* --- Error --- */

._error_1drtx_118 {
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--error) 12%, transparent);
    color: var(--error);
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
}

/* --- Result --- */

._result_1drtx_129 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

._image_1drtx_136 {
    max-width: 100%;
    max-height: 480px;
    border-radius: 10px;
    border: 1px solid var(--border);
    object-fit: contain;
}

._resultActions_1drtx_144 {
    display: flex;
    gap: 8px;
}

._downloadBtn_1drtx_149 {
    padding: 7px 16px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

._downloadBtn_1drtx_149:hover {
    background: var(--surface-active, var(--surface-hover));
}

/* --- Placeholder --- */

._placeholder_1drtx_166 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* Spinner */
._spinner_1drtx_177 {
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: _spin_1drtx_177 0.6s linear infinite;
}

@keyframes _spin_1drtx_177 {
    to {
        transform: rotate(360deg);
    }
}
/* =============================================================================
   AI AUDIO GENERATOR
   ============================================================================= */

._container_sij9k_5 {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    gap: 0;
}

/* --- Section --- */

._section_sij9k_16 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 16px;
}

._sectionTitle_sij9k_23 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

._sectionDescription_sij9k_30 {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

._divider_sij9k_36 {
    height: 1px;
    background: var(--border);
    margin: 4px 0 16px;
}

/* --- Form --- */

._form_sij9k_44 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._textInput_sij9k_50 {
    width: 100%;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

._textInput_sij9k_50:focus {
    outline: none;
    border-color: var(--accent);
}

._textInput_sij9k_50:disabled {
    opacity: 0.6;
}

._optionsRow_sij9k_74 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

._optionGroup_sij9k_81 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._optionLabel_sij9k_87 {
    font-size: 12px;
    color: var(--text-muted);
}

._select_sij9k_92 {
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s;
}

._select_sij9k_92:focus {
    outline: none;
    border-color: var(--accent);
}

._select_sij9k_92:disabled {
    opacity: 0.6;
}

._actionBtn_sij9k_112 {
    height: 34px;
    padding: 0 20px;
    border-radius: 7px;
    border: none;
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.15s;
    white-space: nowrap;
}

._actionBtn_sij9k_112:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

._actionBtn_sij9k_112:not(:disabled):hover {
    opacity: 0.88;
}

/* --- Error --- */

._error_sij9k_140 {
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--error) 12%, transparent);
    color: var(--error);
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
}

/* --- Audio result --- */

._audioResult_sij9k_151 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._audioPlayer_sij9k_157 {
    width: 100%;
    border-radius: 8px;
}

._downloadBtn_sij9k_162 {
    align-self: flex-start;
    padding: 7px 16px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

._downloadBtn_sij9k_162:hover {
    background: var(--surface-active, var(--surface-hover));
}

/* --- File upload --- */

._fileLabel_sij9k_180 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    align-self: flex-start;
}

._fileLabel_sij9k_180:hover {
    border-color: var(--accent);
    background: rgba(124, 58, 237, 0.06);
}

._fileInput_sij9k_200 {
    display: none;
}

/* --- Transcript --- */

._transcript_sij9k_206 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._transcriptLabel_sij9k_212 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

._transcriptText_sij9k_220 {
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

._copyBtn_sij9k_232 {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

._copyBtn_sij9k_232:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Spinners */
._spinner_sij9k_250 {
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: _spin_sij9k_250 0.6s linear infinite;
}

._spinnerDark_sij9k_260 {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: _spin_sij9k_250 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes _spin_sij9k_250 {
    to {
        transform: rotate(360deg);
    }
}
/* =============================================================================
   AI VIDEO GENERATOR – Coming Soon
   ============================================================================= */

._container_ye4qw_5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 32px;
}

._comingSoon_ye4qw_14 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 400px;
    gap: 16px;
}

._icon_ye4qw_23 {
    font-size: 56px;
    line-height: 1;
}

._title_ye4qw_28 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

._description_ye4qw_35 {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
}

._features_ye4qw_42 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 16px;
    border-radius: 8px;
    background: var(--surface-raised, rgba(255, 255, 255, 0.04));
}

._featureItem_ye4qw_53 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

._featureBullet_ye4qw_61 {
    color: var(--accent);
    font-size: 12px;
}

._badge_ye4qw_66 {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
/* =============================================================================
   AI OVERLAY
   ============================================================================= */

._overlay_1puvn_5 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1500;
    padding-top: 8vh;
    animation: _motion-fade-in_1puvn_1 var(--motion-fast) var(--motion-ease-standard);
}

._panel_1puvn_18 {
    background: var(--panel);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    height: 80vh;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 50px rgba(124, 58, 237, 0.1);
    animation: _motion-modal-enter_1puvn_1 var(--motion-normal) var(--motion-ease-emphasized);
    overflow: hidden;
}

/* Header */
._header_1puvn_34 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

._header-title_1puvn_44 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    width: 120px;
    flex-shrink: 0;
}

._header-title_1puvn_44 svg {
    color: #7c3aed;
}

._tabs_1puvn_59 {
    display: flex;
    gap: 0.25rem;
    flex: 1;
}

._tab_1puvn_59 {
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
}

._tab_1puvn_59:hover:not(:disabled) {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

._tab-active_1puvn_82 {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.3);
}

._tab-coming-soon_1puvn_88 {
    opacity: 0.4;
    cursor: not-allowed;
    font-style: italic;
}

._close-btn_1puvn_94 {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color var(--motion-fast), background var(--motion-fast);
}

._close-btn_1puvn_94:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

/* Content area */
._content_1puvn_113 {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Responsive */
@media (max-width: 768px) {
    ._overlay_1puvn_5 {
        padding-top: 0;
    }

    ._panel_1puvn_18 {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    ._header_1puvn_34 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    ._header-title_1puvn_44 {
        width: auto;
    }

    ._tabs_1puvn_59 {
        flex-wrap: wrap;
        gap: 0.25rem;
        order: 1;
        width: 100%;
    }
}
/* AudioSourceSelect – Audio-Quellen-Dropdown */

._audioSourceSelect_1ssc0_3 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

._audioSourceLabel_1ssc0_13 {
    font-size: 0.78rem;
    color: var(--muted);
}

._audioSourceDropdown_1ssc0_18 {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color var(--motion-fast, 150ms) ease;
    appearance: auto;
}

._audioSourceDropdown_1ssc0_18:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

._audioSourceDropdown_1ssc0_18:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

._audioSourceDropdown_1ssc0_18:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._audioSourceHint_1ssc0_47 {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
}
/* =============================================================================
   STREAMING - Screen Share Control Styles
   ============================================================================= */

/* Screen Share Control Container */

._screenshareControl_380py_7 {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Screen Share Navbar Button – konsistent mit TopNav .nav-btn */

._navBtn_380py_16 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    flex-shrink: 0;
}

._navBtn_380py_16:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--text);
}

._navBtn_380py_16 svg {
    width: 20px;
    height: 20px;
}

/* Screen Share Button active state */

._navButtonActive_380py_50 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent-2) 25%, transparent));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    animation: _screensharePulse_380py_1 2s ease-in-out infinite;
}

@keyframes _screensharePulse_380py_1 {

    0%,
    100% {
        box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent);
    }

    50% {
        box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
    }
}

/* Settings Popover */

._screenshareSettingsPopover_380py_72 {
    width: 360px;
    max-width: calc(100vw - 40px);
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent);
    backdrop-filter: blur(10px);
    z-index: 1000;
    animation: _popoverSlideIn_380py_1 var(--motion-normal) var(--motion-ease-emphasized);
    overflow: hidden;
}

@keyframes _popoverSlideIn_380py_1 {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

._screenshareSettingsHeader_380py_99 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 100%);
}

._screenshareSettingsHeader_380py_99 h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

._screenshareSettingsClose_380py_119 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._screenshareSettingsClose_380py_119:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
    transform: translateY(-1px);
}

._screenshareSettingsError_380py_140 {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--error) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--error) 20%, transparent);
    color: var(--error);
    font-size: 0.85rem;
}

._screenshareSettingsBody_380py_148 {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

._screenshareSettingsSection_380py_155 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._screenshareSettingsLabel_380py_161 {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

._screenshareSettingsRow_380py_169 {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

._screenshareSettingsSeparator_380py_176 {
    font-size: 1.1rem;
    color: var(--muted);
    padding-bottom: 8px;
}

._screenshareSettingsField_380py_182 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 90px;
}

._fieldLabel_380py_190 {
    font-size: 0.78rem;
    color: var(--muted);
}

._screenshareSettingsSection_380py_155>select,
._screenshareSettingsSection_380py_155>input[type="number"],
._screenshareSettingsField_380py_182 input[type="number"],
._screenshareSettingsField_380py_182 select {
    width: 100%;
    min-height: 40px;
}

._screenshareSettingsSection_380py_155>select:focus,
._screenshareSettingsSection_380py_155>input[type="number"]:focus,
._screenshareSettingsField_380py_182 input[type="number"]:focus,
._screenshareSettingsField_380py_182 select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Presets Buttons */

._screensharePresets_380py_212 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

._presetButton_380py_218 {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._presetButton_380py_218:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
    transform: translateY(-1px);
}

._presetButtonActive_380py_237 {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
    color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Audio Checkbox */

._screenshareSettingsCheckbox_380py_246 {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._screenshareSettingsCheckbox_380py_246:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

._audioBitrate_380py_265 {
    margin-top: 2px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Footer with Start/Stop Button */

._screenshareSettingsFooter_380py_275 {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.12);
}

._screenshareStartBtn_380py_281,
._screenshareStopBtn_380py_282 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

._screenshareStartBtn_380py_281 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent-2) 62%, transparent));
    color: #0a0e20;
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 24%, transparent);
}

._screenshareStartBtn_380py_281:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
}

._screenshareStartBtn_380py_281:active {
    transform: translateY(0);
}

._screenshareStartBtn_380py_281:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

._screenshareStartBtn_380py_281 svg,
._screenshareStopBtn_380py_282 svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Responsive */

@media (max-width: 480px) {
    ._screenshareSettingsPopover_380py_72 {
        width: calc(100vw - 24px);
        max-height: 85vh;
        overflow-y: auto;
    }

    ._screensharePresets_380py_212 {
        grid-template-columns: repeat(2, 1fr);
    }

    ._screenshareSettingsRow_380py_169 {
        flex-wrap: wrap;
    }

    ._screenshareSettingsField_380py_182 {
        min-width: calc(50% - 6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    ._navButtonActive_380py_50 {
        animation: none;
    }

    ._screenshareSettingsPopover_380py_72 {
        animation: none;
    }

    ._presetButton_380py_218:hover,
    ._screenshareStartBtn_380py_281:hover,
    ._screenshareSettingsClose_380py_119:hover {
        transform: none;
    }
}
/* =============================================================================
   STREAMING - OBS Stream Control Overlay Styles
   Design-konsistent mit ScreenShareControl.module.css
   ============================================================================= */

/* Container */

._streamControl_y7jbx_8 {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Navbar Button – konsistent mit TopNav .nav-btn & ScreenShareControl */

._navBtn_y7jbx_17 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    flex-shrink: 0;
}

._navBtn_y7jbx_17:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--text);
}

._navBtn_y7jbx_17 svg {
    width: 20px;
    height: 20px;
}

/* Active state – Panel open */

._navBtnActive_y7jbx_52 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent-2) 25%, transparent));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
}

/* LIVE state – red pulsing */

._navBtnLive_y7jbx_61 {
    border-color: color-mix(in srgb, var(--error) 50%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--error) 20%, transparent), color-mix(in srgb, var(--error) 10%, transparent));
    animation: _navLivePulse_y7jbx_1 2s ease-in-out infinite;
}

._navBtnLive_y7jbx_61:hover {
    border-color: color-mix(in srgb, var(--error) 70%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--error) 35%, transparent), color-mix(in srgb, var(--error) 20%, transparent));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--error) 20%, transparent);
}

@keyframes _navLivePulse_y7jbx_1 {

    0%,
    100% {
        box-shadow: 0 0 12px color-mix(in srgb, var(--error) 25%, transparent);
    }

    50% {
        box-shadow: 0 0 18px color-mix(in srgb, var(--error) 45%, transparent);
    }
}

._liveDot_y7jbx_85 {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: var(--error);
    border-radius: 50%;
    border: 1.5px solid var(--bg);
    animation: _liveDotPulse_y7jbx_1 1.5s ease-in-out infinite;
}

@keyframes _liveDotPulse_y7jbx_1 {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--error) 50%, transparent);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 0%, transparent);
    }
}

/* =============================================================================
   POPOVER
   ============================================================================= */

._streamPopover_y7jbx_115 {
    width: 400px;
    max-width: calc(100vw - 40px);
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent);
    backdrop-filter: blur(10px);
    z-index: 1000;
    animation: _streamPopoverSlideIn_y7jbx_1 var(--motion-normal) var(--motion-ease-emphasized);
    overflow: hidden;
}

@keyframes _streamPopoverSlideIn_y7jbx_1 {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */

._streamHeader_y7jbx_144 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 100%);
}

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

._streamHeaderLeft_y7jbx_153 svg {
    color: var(--accent);
    width: 18px;
    height: 18px;
}

._streamHeaderLeft_y7jbx_153 h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

._streamHeaderRight_y7jbx_175 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._encoderBadge_y7jbx_181 {
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

._closeBtn_y7jbx_193 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._closeBtn_y7jbx_193:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
    transform: translateY(-1px);
}

/* Error Banner */

._streamError_y7jbx_216 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--error) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--error) 20%, transparent);
    color: var(--error);
    font-size: 0.82rem;
    line-height: 1.4;
}

._streamError_y7jbx_216 svg {
    flex-shrink: 0;
}

._retryBtn_y7jbx_232 {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
    background: color-mix(in srgb, var(--error) 15%, transparent);
    color: var(--error);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._retryBtn_y7jbx_232:hover {
    background: color-mix(in srgb, var(--error) 25%, transparent);
    border-color: color-mix(in srgb, var(--error) 50%, transparent);
}

/* =============================================================================
   STATS BAR (when live)
   ============================================================================= */

._statsBar_y7jbx_255 {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--error) 6%, transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

._statsItem_y7jbx_265 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

._statsLive_y7jbx_275 {
    color: var(--error);
    font-weight: 700;
    letter-spacing: 0.6px;
    animation: _statsLiveBlink_y7jbx_1 2s ease-in-out infinite;
}

._statsLive_y7jbx_275 svg {
    width: 12px;
    height: 12px;
}

@keyframes _statsLiveBlink_y7jbx_1 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

._statsLabel_y7jbx_299 {
    color: var(--muted);
    font-weight: 500;
}

._statsValue_y7jbx_304 {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

._statsWarn_y7jbx_310 {
    color: var(--warning);
}

/* =============================================================================
   BODY – Settings
   ============================================================================= */

._streamBody_y7jbx_318 {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

._settingsSection_y7jbx_325 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._sectionLabel_y7jbx_331 {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

._selectField_y7jbx_339 {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23a9b8d6' d='M3 5l3 3 3-3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

._selectField_y7jbx_339:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

._selectField_y7jbx_339:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Quality Preset Grid */

._presetGrid_y7jbx_370 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

._presetBtn_y7jbx_376 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._presetBtn_y7jbx_376:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
    transform: translateY(-1px);
}

._presetBtnActive_y7jbx_397 {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
    color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

._presetLabel_y7jbx_404 {
    font-size: 0.82rem;
    font-weight: 600;
}

._presetBw_y7jbx_409 {
    font-size: 0.65rem;
    color: var(--muted);
    font-weight: 400;
}

._presetBtnActive_y7jbx_397 ._presetBw_y7jbx_409 {
    color: color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Capabilities */

._capsList_y7jbx_421 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

._capBadge_y7jbx_427 {
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

._capAvailable_y7jbx_439 {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

/* =============================================================================
   FOOTER – Go Live Button
   ============================================================================= */

._streamFooter_y7jbx_449 {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.12);
}

._goLiveBtn_y7jbx_455 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: var(--bg-secondary);
    color: var(--muted);
}

._goLiveBtn_y7jbx_455:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

._goLiveBtn_y7jbx_455 svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Ready – gradient action button */

._goLiveBtnReady_y7jbx_487 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent-2) 62%, transparent));
    color: #0a0e20;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 24%, transparent);
}

._goLiveBtnReady_y7jbx_487:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
}

._goLiveBtnReady_y7jbx_487:active {
    transform: translateY(0);
}

/* LIVE – red state */

._goLiveBtnLive_y7jbx_505 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--error) 80%, transparent), rgba(220, 38, 38, 0.7));
    color: white;
    border-color: color-mix(in srgb, var(--error) 50%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--error) 20%, transparent);
}

._goLiveBtnLive_y7jbx_505:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--error) 30%, transparent);
}

._goLiveBtnLive_y7jbx_505:active {
    transform: translateY(0);
}

/* Confirm stop – warning style */

._goLiveBtnConfirm_y7jbx_523 {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.85), color-mix(in srgb, var(--error) 75%, transparent));
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
    animation: _confirmPulse_y7jbx_1 0.6s ease-in-out;
}

@keyframes _confirmPulse_y7jbx_1 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 480px) {
    ._streamPopover_y7jbx_115 {
        width: calc(100vw - 24px);
        max-height: 85vh;
        overflow-y: auto;
    }

    ._presetGrid_y7jbx_370 {
        grid-template-columns: repeat(2, 1fr);
    }

    ._statsBar_y7jbx_255 {
        gap: 0;
    }

    ._statsItem_y7jbx_265 {
        padding: 2px 6px;
        font-size: 0.68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    ._navBtnLive_y7jbx_61 {
        animation: none;
    }

    ._streamPopover_y7jbx_115 {
        animation: none;
    }

    ._statsLive_y7jbx_275 {
        animation: none;
    }

    ._liveDot_y7jbx_85 {
        animation: none;
    }

    ._navBtn_y7jbx_17:hover,
    ._closeBtn_y7jbx_193:hover,
    ._presetBtn_y7jbx_376:hover,
    ._goLiveBtnReady_y7jbx_487:hover,
    ._goLiveBtnLive_y7jbx_505:hover {
        transform: none;
    }
}
/* =============================================================================
   NAVIGATION STYLES - Top Nav, Nav Buttons, Dropdowns
   ============================================================================= */

/* Top Navigation Bar */

._top-nav_15s2y_7 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px var(--layout-inner-inline);
    position: fixed;
    top: calc(var(--spacing) + env(safe-area-inset-top, 0px));
    /* Zwischen Sidebars zentrieren statt Viewport-Mitte */
    left: calc((var(--sidebar-left-offset, 0px) + 100% - var(--sidebar-right-offset, 0px)) / 2);
    transform: translateX(-50%);
    width: calc(100% - var(--sidebar-left-offset, 0px) - var(--sidebar-right-offset, 0px) - var(--spacing) * 2);
    max-width: var(--layout-max-width);
    height: var(--navbar-height);
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    z-index: 200;
    transition: transform var(--motion-slow) cubic-bezier(0, 0, 0.2, 1),
        width var(--motion-normal) var(--motion-ease-standard),
        left var(--motion-normal) var(--motion-ease-standard);
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Electron Desktop: Navbar unterhalb der Titlebar positionieren */

html[data-electron] ._top-nav_15s2y_7 {
    top: calc(var(--spacing) + var(--titlebar-height));
}

/* Logo */

._top-nav_15s2y_7 ._logo_15s2y_42 {
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

/* Left Navigation Group */

._nav-left_15s2y_55 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: 0;
}

/* nav-left und nav-right gleiche Breite für Zentrierung */

._nav-left_15s2y_55,
._nav-right_15s2y_67 {
    flex: 1 0 auto;
    min-width: max-content;
}

/* Right Navigation Section */

._nav-right_15s2y_67 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Actions Group - Tools & Communication */

._nav-actions_15s2y_85 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Account Group - Profile & Settings */

._nav-account-group_15s2y_95 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    width: auto;
    min-width: max-content;
}

/* Navigation Button */

._nav-btn_15s2y_108 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    flex-shrink: 0;
}

._nav-btn_15s2y_108:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--text);
}

._nav-btn_15s2y_108._active_15s2y_135 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent-2) 25%, transparent));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
}

/* Sidebar Toggle Buttons (links/rechts am Navbar-Rand) */

._nav-sidebar-toggle_15s2y_144 {
    flex-shrink: 0;
}

/* Admin Button */

._nav-btn-admin_15s2y_150 {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(155, 89, 182, 0.15));
    border-color: rgba(231, 76, 60, 0.3);
}

._nav-btn-admin_15s2y_150:hover {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.35), rgba(155, 89, 182, 0.25));
    border-color: rgba(231, 76, 60, 0.5);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.25);
    color: var(--error);
}

._nav-btn_15s2y_108 svg {
    width: 20px;
    height: 20px;
}

/* Navigation Avatar */

._nav-avatar_15s2y_169 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    overflow: hidden;
    flex-shrink: 0;
}

._nav-avatar_15s2y_169:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 15%, transparent);
}

._nav-avatar_15s2y_169 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

._nav-avatar_15s2y_169._placeholder_15s2y_200 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent);
}

/* Nav Divider */

._nav-divider_15s2y_211 {
    height: 24px;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 6px;
}

@media (max-width: 768px) {

    /* Mobile: Sidebars sind Overlays, keine Offset-Korrektur nötig */
    ._top-nav_15s2y_7 {
        left: 50%;
        width: calc(100% - var(--spacing) * 2);
        gap: 4px;
        padding: 6px 10px;
    }

    ._mobile-hidden_15s2y_228 {
        display: none !important;
    }

    ._nav-left_15s2y_55 {
        gap: 4px;
    }

    ._nav-right_15s2y_67 {
        gap: 4px;
    }

    ._nav-account-group_15s2y_95 {
        gap: 4px;
    }
}

/* =============================================================================
   Direct Call Button
   ============================================================================= */

._nav-call-btn_15s2y_249 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--motion-normal) var(--motion-ease-standard);
    flex-shrink: 0;
}

._nav-call-btn_15s2y_249:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
}

._nav-call-btn_15s2y_249._active_15s2y_135 {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}

/* =============================================================================
   DM Button
   ============================================================================= */

._nav-dm-btn_15s2y_282 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--motion-normal) var(--motion-ease-standard);
    flex-shrink: 0;
}

._nav-dm-btn_15s2y_282:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
}

._nav-dm-btn_15s2y_282._has-unread_15s2y_306 {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}

._nav-dm-badge_15s2y_311 {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--error);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   Notification Bell Button
   ============================================================================= */

._nav-notification-btn_15s2y_332 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--motion-normal) var(--motion-ease-standard);
    flex-shrink: 0;
}

._nav-notification-btn_15s2y_332:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
}

._nav-notification-btn_15s2y_332._has-unread_15s2y_306 {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}

._nav-notification-badge_15s2y_361 {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--error);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   Maintenance Banner
   ============================================================================= */

._maintenance-banner-icon_15s2y_382 {
    color: #fcd34d;
    flex-shrink: 0;
}

._maintenance-banner-text_15s2y_387 {
    font-size: 0.9rem;
    color: var(--text);
}

._maintenance-banner-text_15s2y_387 strong {
    color: #fcd34d;
}


/* TopNav – Additional Button & Banner Styles */

._maintenance-banner_15s2y_382 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--warning);
    color: #000;
    font-size: 0.85rem;
    font-weight: 500;
}

._maintenance-banner-close_15s2y_410 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

._maintenance-banner-close_15s2y_410:hover {
    opacity: 1;
}

._top-nav--auth_15s2y_430 {
    justify-content: center;
}

._nav-btn-icon_15s2y_434 {
    /* Marker class for icon-only buttons - inherits from navBtn */
}

._nav-btn-search_15s2y_438 {
    /* Marker class for search button */
}

._nav-btn-account_15s2y_442,
._login-btn_15s2y_443 {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

._nav-avatar-fallback_15s2y_449 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 50%;
}

._nav-btn-logout_15s2y_462 {
    /* Marker class for logout button */
}


/* TopNav – Unread indicator */

._has-unread_15s2y_306 {
    position: relative;
}

._has-unread_15s2y_306::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    background: var(--accent-2);
    border-radius: 50%;
    border: 1.5px solid var(--bg);
}

/* Live Streaming Indicator */

._live-indicator_15s2y_487 {
    position: relative;
    border-color: color-mix(in srgb, var(--error) 50%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--error) 20%, transparent), color-mix(in srgb, var(--error) 10%, transparent));
}

._live-indicator_15s2y_487:hover {
    border-color: color-mix(in srgb, var(--error) 70%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--error) 35%, transparent), color-mix(in srgb, var(--error) 20%, transparent));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--error) 20%, transparent);
}

._live-dot_15s2y_499 {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: var(--error);
    border-radius: 50%;
    border: 1.5px solid var(--bg);
    animation: _livePulse_15s2y_1 1.5s ease-in-out infinite;
}

@keyframes _livePulse_15s2y_1 {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--error) 50%, transparent);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 0%, transparent);
    }
}
/* ErrorBoundary */

._error-boundary_6yiy5_3 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 60vh;
   padding: var(--spacing);
   text-align: center;
}

._error-boundary-content_6yiy5_13 {
   max-width: 480px;
   padding: 32px;
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
}

._error-boundary-content_6yiy5_13 h2 {
   font-size: 1.4rem;
   color: var(--error);
   margin-bottom: 12px;
}

._error-boundary-content_6yiy5_13 p {
   color: var(--text-secondary);
   margin-bottom: 20px;
}
/* ToastContainer */

._toast-container_tzh0k_3 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._toast_tzh0k_3 {
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  animation: _slideUp_tzh0k_1 0.3s ease;
}

@keyframes _slideUp_tzh0k_1 {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._toast-message_tzh0k_37 {
  font-size: 0.9rem;
  color: var(--text);
}

._toast-close_tzh0k_42 {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}

._toast-close_tzh0k_42:hover {
  color: var(--text);
}
/* KeyboardShortcutsHelp */

._shortcuts-help-title_1kt37_3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._shortcuts-help-title_1kt37_3 h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

._modal-close-btn_1kt37_16 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._modal-close-btn_1kt37_16:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

._shortcuts-category_1kt37_35 {
    margin-bottom: 20px;
}

._shortcuts-category_1kt37_35:last-child {
    margin-bottom: 0;
}

._shortcuts-category-title_1kt37_43 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

._shortcuts-list_1kt37_52 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._shortcut-item_1kt37_58 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-secondary);
    gap: 16px;
}

._shortcut-description_1kt37_68 {
    font-size: 0.9rem;
    color: var(--text);
}

._shortcut-keys_1kt37_73 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--accent);
    white-space: nowrap;
}

._shortcuts-help-footer_1kt37_87 {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

._shortcuts-help-hint_1kt37_92 {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

._shortcuts-help-hint_1kt37_92 kbd {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: monospace;
    font-size: 0.75rem;
}
._wrapper_hdbwb_1 {
    position: relative;
    display: contents;
}

._loading_hdbwb_6 {
    opacity: 0.6;
    cursor: wait;
}

._iconActive_hdbwb_11 {
    animation: _pulse_hdbwb_1 1.5s ease-in-out infinite;
}

@keyframes _pulse_hdbwb_1 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

._error_hdbwb_29 {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--danger, #e53e3e);
    color: #fff;
    font-size: 0.7rem;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ==============================
   Shared Sidebar Styles
   Extracted from VoiceSidebar + ChatSidebar
   ============================== */

._sidebar_17d29_6 {
    width: var(--sidebar-width, 260px);
    min-width: var(--sidebar-width, 260px);
    max-width: var(--sidebar-width, 260px);
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--motion-normal) var(--motion-ease-standard),
        min-width var(--motion-normal) var(--motion-ease-standard),
        opacity var(--motion-fast) var(--motion-ease-standard);
    position: fixed;
    top: var(--spacing);
    bottom: var(--spacing);
    z-index: 150;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-electron] ._sidebar_17d29_6 {
    top: calc(var(--spacing) + var(--titlebar-height));
}

._sidebar_17d29_6:not(._open_17d29_32) {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    border-color: transparent;
    box-shadow: none;
}

/* Docked position modifiers */
._sidebar-left_17d29_43 {
    left: var(--spacing);
}

._sidebar-right_17d29_47 {
    right: var(--spacing);
}

/* ==============================
   Sidebar Header
   ============================== */

._sidebar-header_17d29_55 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    gap: 8px;
    flex-shrink: 0;
}

._sidebar-header-title_17d29_66 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

._sidebar-header-title_17d29_66 svg {
    color: var(--accent);
}

/* ==============================
   Sidebar Toggle Button
   ============================== */

._sidebar-toggle-btn_17d29_83 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._sidebar-toggle-btn_17d29_83:hover {
    color: var(--text);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
}

/* ==============================
   Sidebar Content Area
   ============================== */

._sidebar-content_17d29_107 {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* ==============================
   Sidebar Utility / State Styles
   ============================== */

._sidebar-loading_17d29_117 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

._sidebar-spinner_17d29_126 {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: _sidebar-spin_17d29_126 0.8s linear infinite;
}

@keyframes _sidebar-spin_17d29_126 {
    to {
        transform: rotate(360deg);
    }
}

._sidebar-error_17d29_141 {
    padding: 12px 16px;
    color: #ff6b6b;
    font-size: 0.85rem;
}

._sidebar-empty_17d29_147 {
    padding: 16px;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

/* ==============================
   Sidebar Footer
   ============================== */

._sidebar-footer_17d29_158 {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 12px;
    flex-shrink: 0;
}

/* Panel-mode modifier: hide docked sidebar when floating */
._sidebar_17d29_6._floating_17d29_165 {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    border-color: transparent;
    box-shadow: none;
}

/* ==============================
   Sidebar Backdrop (Mobile)
   ============================== */

._sidebar-backdrop_17d29_179 {
    display: none;
}

/* ==============================
   Mobile Drawer
   ============================== */

@media (max-width: 768px) {
    ._sidebar_17d29_6 {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 300;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        border-radius: 0;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    ._sidebar-left_17d29_43 {
        left: 0;
        transform: translateX(-100%);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-left: none;
    }

    ._sidebar-right_17d29_47 {
        right: 0;
        transform: translateX(100%);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-right: none;
    }

    ._sidebar-left_17d29_43._open_17d29_32,
    ._sidebar-right_17d29_47._open_17d29_32 {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    ._sidebar_17d29_6:not(._open_17d29_32) {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
    }

    ._sidebar-backdrop_17d29_179 {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 250;
    }

    ._sidebar-reopen-btn_17d29_238 {
        position: fixed;
        z-index: 100;
    }
}
/* ==============================
   Voice Sidebar – Component-Specific Styles
   Base sidebar styles: sidebar-shared.module.css (imported in TSX)
   ============================== */

/* ==============================
   Voice Channels
   ============================== */

._voice-channel-list_1205h_10 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

._voice-channel_1205h_10 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 10px;
    font-size: 0.85rem;
    width: 100%;
    text-align: left;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._voice-channel_1205h_10:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 6%, transparent));
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

._voice-channel_1205h_10._active_1205h_39 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 10%, transparent);
}

._voice-channel-info_1205h_46 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._voice-channel-icon_1205h_52 {
    font-size: 1rem;
}

._voice-channel-name_1205h_56 {
    font-weight: 500;
}

._voice-channel-status_1205h_60 {
    font-size: 0.75rem;
}

/* Active Voice Section */

._voice-active-section_1205h_66 {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
    padding-top: 8px;
}

._voice-active-header_1205h_72 {
    padding: 4px 16px 8px;
}

._voice-active-label_1205h_76 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.5px;
}

/* Participants */

._voice-participants_1205h_86 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    max-height: 200px;
    overflow-y: auto;
}

._voice-participant_1205h_86 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._voice-participant_1205h_86._speaking_1205h_106 {
    color: var(--accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
}

._voice-participant-name_1205h_112 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Voice Controls */

._voice-controls_1205h_120 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    justify-content: center;
}

._voice-control-btn_1205h_128 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._voice-control-btn_1205h_128:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
}

._voice-control-btn_1205h_128._muted_1205h_148 {
    color: #ff6b6b;
    background: color-mix(in srgb, var(--error) 15%, transparent);
    border-color: color-mix(in srgb, var(--error) 30%, transparent);
}

._voice-control-btn_1205h_128._ptt-btn_1205h_154 {
    font-size: 0.65rem;
    font-weight: 700;
    width: 32px;
    height: 32px;
}

._voice-control-btn_1205h_128._ptt-btn_1205h_154._active_1205h_39 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
}

._voice-control-btn_1205h_128._disconnect-btn_1205h_168 {
    background: color-mix(in srgb, var(--error) 15%, transparent);
    border-color: color-mix(in srgb, var(--error) 30%, transparent);
    color: #ff6b6b;
}

._voice-control-btn_1205h_128._disconnect-btn_1205h_168:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--error) 30%, transparent);
}

/* PTT Indicator */

._voice-ptt-indicator_1205h_183 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

._ptt-dot_1205h_192 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    transition: background var(--motion-fast);
}

._ptt-dot_1205h_192._active_1205h_39 {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

/* ==============================
   Mobile Voice-Specific
   ============================== */

@media (max-width: 768px) {
    ._voice-control-btn_1205h_128 {
        min-width: 44px;
        min-height: 44px;
    }
}

/* VoiceSidebar – PTT Label */

._ptt-label_1205h_218 {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    padding: 4px 8px;
}

/* Party Indicators */
._voicePartyIndicators_1205h_226 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
}

._voicePartyBadge_1205h_233 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

._voicePartyInfo_1205h_244 {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

._voicePartyLabel_1205h_252 {
    font-size: 0.75rem;
    font-weight: 600;
}

._voicePartyTrack_1205h_257 {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._voicePartyJoin_1205h_266 {
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.15s;
}

._voicePartyJoin_1205h_266:hover {
    opacity: 1;
}
._contextMenu_wmddo_1 {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    animation: _fadeIn_wmddo_1 0.1s ease-out;
}

@keyframes _fadeIn_wmddo_1 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

._header_wmddo_25 {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-primary);
}

._menuItem_wmddo_35 {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

._menuItem_wmddo_35:hover {
    background: var(--bg-hover);
}

._danger_wmddo_52 {
    color: var(--color-error, #f44);
}

._danger_wmddo_52:hover {
    background: rgba(255, 68, 68, 0.1);
}
/* ==============================
   FloatingPanel – Universal Wrapper
   ============================== */

._floating-panel_1e878_5 {
    position: fixed;
    background: var(--panel);
    border: 1px solid var(--border, #404050);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: _floatingPanelSlideIn_1e878_1 0.25s var(--motion-ease-emphasized);
    transition: box-shadow var(--motion-normal) var(--motion-ease-standard);
}

._floating-panel_1e878_5:hover {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* States */
._dragging_1e878_23 {
    cursor: grabbing !important;
    user-select: none;
    opacity: 0.92;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: none;
}

._resizing_1e878_31 {
    user-select: none;
    transition: none;
}

/* Snap indicator */
._snapped_1e878_37 {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ==============================
   Drag Handle
   ============================== */

._drag-handle_1e878_45 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 8px 0 12px;
    cursor: grab;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background var(--motion-fast) var(--motion-ease-standard);
    flex-shrink: 0;
    gap: 8px;
}

._drag-handle_1e878_45:hover {
    background: rgba(255, 255, 255, 0.06);
}

._drag-handle_1e878_45:active {
    cursor: grabbing;
}

._drag-handle-left_1e878_67 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

._drag-dots_1e878_75 {
    color: var(--muted, #a9b8d6);
    font-size: 0.65rem;
    opacity: 0.5;
    letter-spacing: 2px;
    line-height: 1;
    flex-shrink: 0;
}

._drag-title_1e878_84 {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

._drag-handle-actions_1e878_94 {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ==============================
   Resize Zones
   ============================== */

._resize-edge_1e878_105 {
    position: absolute;
    z-index: 2;
    background: transparent;
}

._resize-edge-n_1e878_111 {
    top: -3px;
    left: 12px;
    right: 12px;
    height: 6px;
    cursor: ns-resize;
}

._resize-edge-s_1e878_119 {
    bottom: -3px;
    left: 12px;
    right: 12px;
    height: 6px;
    cursor: ns-resize;
}

._resize-edge-e_1e878_127 {
    right: -3px;
    top: 12px;
    bottom: 12px;
    width: 6px;
    cursor: ew-resize;
}

._resize-edge-w_1e878_135 {
    left: -3px;
    top: 12px;
    bottom: 12px;
    width: 6px;
    cursor: ew-resize;
}

._resize-corner_1e878_143 {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 3;
    background: transparent;
}

._resize-corner-ne_1e878_151 {
    top: -4px;
    right: -4px;
    cursor: nesw-resize;
}

._resize-corner-nw_1e878_157 {
    top: -4px;
    left: -4px;
    cursor: nwse-resize;
}

._resize-corner-se_1e878_163 {
    bottom: -4px;
    right: -4px;
    cursor: nwse-resize;
}

._resize-corner-sw_1e878_169 {
    bottom: -4px;
    left: -4px;
    cursor: nesw-resize;
}

._resize-corner-se_1e878_163::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    transition: border-color var(--motion-fast) var(--motion-ease-standard);
}

._resize-corner-se_1e878_163:hover::after {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ==============================
   Panel Body
   ============================== */

._panel-body_1e878_195 {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* ==============================
   Animation
   ============================== */

@keyframes _floatingPanelSlideIn_1e878_1 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* ==============================
   Panel Mode Toggle Buttons
   ============================== */

._panelModeGroup_lraie_5 {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 2px;
    flex-shrink: 0;
}

._panelModeBtn_lraie_15 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    padding: 0;
}

._panelModeBtn_lraie_15:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

._panelModeBtn_lraie_15._active_lraie_35 {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}
/* ==============================
   Matrix Channel Chat Panel
   ============================== */

._channel-chat-panel_pvrxh_5 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

._channel-chat-header_pvrxh_12 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

._channel-chat-hash_pvrxh_23 {
    color: var(--muted);
    font-size: 1rem;
}

._channel-chat-name_pvrxh_28 {
    color: var(--text);
}

._channel-chat-messages_pvrxh_32 {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Loading / Empty */

._sidebar-loading_pvrxh_43 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

._sidebar-spinner_pvrxh_52 {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: _spin_pvrxh_1 0.8s linear infinite;
}

@keyframes _spin_pvrxh_1 {
    to {
        transform: rotate(360deg);
    }
}

._channel-chat-empty_pvrxh_67 {
    padding: 24px 12px;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

/* Messages */

._channel-chat-message_pvrxh_32 {
    padding: 4px 0;
    position: relative;
}

._channel-chat-message_pvrxh_32:hover ._message-actions_pvrxh_81 {
    opacity: 1;
    pointer-events: auto;
}

._message-header_pvrxh_86 {
    display: flex;
    align-items: center;
    gap: 0;
}

._message-actions_pvrxh_81 {
    display: flex;
    gap: 1px;
    margin-left: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

._action-btn_pvrxh_101 {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.72rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._action-btn_pvrxh_101:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

/* Reaction Picker Popover */

._reaction-picker-popover_pvrxh_119 {
    position: absolute;
    right: 0;
    z-index: 100;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

._channel-chat-author_pvrxh_128 {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--accent);
    margin-right: 6px;
}

._channel-chat-time_pvrxh_135 {
    font-size: 0.7rem;
    color: var(--muted);
}

._channel-chat-text_pvrxh_140 {
    font-size: 0.85rem;
    color: var(--text);
    word-break: break-word;
    line-height: 1.4;
}

/* Rich media */

._channel-chat-gif_pvrxh_149,
._channel-chat-image_pvrxh_150 {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    margin-top: 4px;
    object-fit: contain;
}

._channel-chat-file_pvrxh_158 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.82rem;
    transition: background 0.15s;
}

._channel-chat-file_pvrxh_158:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Chat Input */

._channel-chat-input_pvrxh_179 {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

._channel-chat-input_pvrxh_179 input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--motion-fast) var(--motion-ease-standard);
}

._channel-chat-input_pvrxh_179 input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

._channel-chat-input_pvrxh_179 input::placeholder {
    color: var(--muted);
}

._channel-chat-input_pvrxh_179 button[type="submit"] {
    background: var(--gradient);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 1rem;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._channel-chat-input_pvrxh_179 button[type="submit"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

._channel-chat-input_pvrxh_179 button[type="submit"]:hover:not(:disabled) {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
    transform: translateY(-1px);
}

/* Input action buttons */

._channel-input-actions_pvrxh_232 {
    display: flex;
    gap: 2px;
    align-items: center;
}

._channel-emoji-btn_pvrxh_238,
._channel-gif-btn_pvrxh_239,
._channel-file-btn_pvrxh_240 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._channel-emoji-btn_pvrxh_238:hover,
._channel-gif-btn_pvrxh_239:hover,
._channel-file-btn_pvrxh_240:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

._channel-file-btn_pvrxh_240:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Picker overlay */

._channel-picker-overlay_pvrxh_265 {
    position: relative;
    margin: 0 8px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

/* Load More */

._load-more-btn_pvrxh_276 {
    background: none;
    border: 1px solid var(--border);
    color: var(--accent);
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin: 4px auto;
    display: block;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._load-more-btn_pvrxh_276:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent);
}

/* Typing Indicator */

._typing-indicator_pvrxh_296 {
    font-size: 0.75rem;
    color: var(--muted);
    padding: 2px 0;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 4px;
}

._typing-dots_pvrxh_306 {
    display: inline-flex;
    gap: 2px;
}

._typing-dots_pvrxh_306::before,
._typing-dots_pvrxh_306::after {
    content: '·';
    animation: _typing-bounce_pvrxh_1 1.2s infinite;
    font-size: 1.2em;
}

._typing-dots_pvrxh_306::after {
    animation-delay: 0.3s;
}

@keyframes _typing-bounce_pvrxh_1 {

    0%,
    80% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }
}

/* Reactions */

._message-reactions_pvrxh_336 {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 2px;
}

._reaction-badge_pvrxh_343 {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--text);
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._reaction-badge_pvrxh_343:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
}

._reaction-badge-active_pvrxh_359 {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: var(--accent);
}

/* Context Menu */

._context-menu_pvrxh_366 {
    position: fixed;
    z-index: 1000;
    min-width: 140px;
    background: rgba(12, 16, 28, 0.95);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    backdrop-filter: blur(8px);
}

._context-menu-item_pvrxh_378 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--motion-fast) var(--motion-ease-standard);
}

._context-menu-item_pvrxh_378:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Inline Edit Form */

._edit-form_pvrxh_399 {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}

._edit-input_pvrxh_406 {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--text);
    font-size: 0.82rem;
    outline: none;
}

._edit-input_pvrxh_406:focus {
    border-color: var(--accent);
}

._edit-actions_pvrxh_421 {
    display: flex;
    gap: 2px;
}

._edit-btn_pvrxh_426 {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: none;
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background var(--motion-fast) var(--motion-ease-standard);
}

._edit-btn_pvrxh_426:hover {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
}

._cancel-btn_pvrxh_441 {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--muted);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background var(--motion-fast) var(--motion-ease-standard);
}

._cancel-btn_pvrxh_441:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}
/* ==============================
   Chat Sidebar – Component-Specific Styles
   Base sidebar styles: sidebar-shared.module.css (imported in TSX)
   ============================== */

/* ==============================
   Chat Channels
   ============================== */

._chat-channel-list_7hhcj_10 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

._chat-channel_7hhcj_10 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 10px;
    font-size: 0.85rem;
    width: 100%;
    text-align: left;
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._chat-channel_7hhcj_10:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 6%, transparent));
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

._chat-channel-name_7hhcj_39 {
    font-weight: 500;
}

._chat-back-btn_7hhcj_43 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent-2) 4%, transparent));
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 12px;
    font-size: 0.82rem;
    width: 100%;
    text-align: left;
    border-radius: 8px;
    margin: 4px 8px;
    width: calc(100% - 16px);
    transition: all var(--motion-fast) var(--motion-ease-standard);
}

._chat-back-btn_7hhcj_43:hover {
    color: var(--text);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent));
    border-color: rgba(255, 255, 255, 0.12);
}

._chat-panel-wrapper_7hhcj_64 {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* ==============================
   AppShell – 3-Spalten Layout
   ============================== */

._app-shell_uh3m5_5 {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
    transition: margin-left var(--motion-normal) var(--motion-ease-standard), margin-right var(--motion-normal) var(--motion-ease-standard);
}

@media (min-width: 769px) {

    ._app-shell_uh3m5_5.left-open {
        margin-left: calc(var(--sidebar-width, 260px) + var(--spacing));
    }

    ._app-shell_uh3m5_5.right-open {
        margin-right: calc(var(--sidebar-width, 260px) + var(--spacing));
    }

}

/* Main Content */

._app-shell-main_uh3m5_27 {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: var(--spacing);
    /* Scrollbar unsichtbar – scrollt ohne Platz zu verbrauchen */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge Legacy */
}

._app-shell-main_uh3m5_27::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

/* ==============================
   Sidebar Shared Styles
   ============================== */

/* Header */

/* Content */

@keyframes _spin_uh3m5_1 {

    to {
        transform: rotate(360deg);
    }

}

/* ==============================
   Voice Sidebar
   ============================== */

/* Active Voice Section */

/* Participants */

/* Voice Controls */

/* PTT Indicator */

/* ==============================
   Chat Sidebar
   ============================== */

/* ==============================
   Channel Chat Panel
   ============================== */

/* Chat Input */

/* ==============================
   Mobile Drawer
   ============================== */

._sidebar-backdrop_uh3m5_89 {
    display: none;
}

@media (max-width: 768px) {

    ._voice-sidebar_uh3m5_95,
    ._chat-sidebar_uh3m5_96 {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 300;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        border-radius: 0;
    }

    ._voice-sidebar_uh3m5_95 {
        left: 0;
        transform: translateX(-100%);
    }

    ._voice-sidebar_uh3m5_95._open_uh3m5_112 {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    ._chat-sidebar_uh3m5_96 {
        right: 0;
        transform: translateX(100%);
    }

    ._chat-sidebar_uh3m5_96._open_uh3m5_112 {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    ._voice-sidebar_uh3m5_95:not(._open_uh3m5_112),
    ._chat-sidebar_uh3m5_96:not(._open_uh3m5_112) {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
    }

    ._sidebar-backdrop_uh3m5_89 {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 250;
    }

    ._sidebar-reopen-btn_uh3m5_144 {
        position: fixed;
        z-index: 100;
    }
}
/* From components.css */
._page-loader_1ds10_2 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

._page-loader-spinner_1ds10_10 {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: _spin_1ds10_1 1s linear infinite;
}
/* =============================================================================
   BASE STYLES - CSS Variables, Reset & App Layout
   ============================================================================= */

/* Root Variables - Dark Mode (Default) */
:root {
    /* Core Colors */
    --bg: rgba(10, 14, 32, 0.8);
    --bg-secondary: rgba(17, 24, 39, 0.55);
    --panel: rgba(17, 24, 39, 0.55);
    --panel-strong: rgba(29, 38, 62, 0.7);
    --accent: #6be0ff;
    --accent-2: #ff5bbd;
    --text: #e8f2ff;
    --text-secondary: #c0d0e8;
    --muted: #a9b8d6;
    --border: #404050;
    --gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
    --error: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;

    /* Semantic Aliases (for components using alternate naming) */
    --bg-primary: var(--bg);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-tertiary: var(--panel-strong);
    --text-primary: var(--text);
    --text-muted: var(--muted);
    --text-tertiary: var(--muted);
    --border-primary: var(--border);
    --border-color: var(--border);
    --surface-color: var(--panel);
    --surface-secondary: var(--panel-strong);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --surface-active: rgba(255, 255, 255, 0.12);
    --accent-primary: var(--accent);
    --accent-secondary: var(--accent-2);
    --accent-hover: color-mix(in srgb, var(--accent), white 15%);
    --accent-color: var(--accent);
    --danger: var(--error);
    --color-error: var(--error);
    --green: var(--success);
    --red: var(--error);
    --spotify-green: #1DB954;

    /* Radius Tokens */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-full: 999px;

    /* Layout */
    --sidebar-width: 320px;
    --spacing: 16px;
    --layout-max-width: none;
    --layout-inner-inline: 20px;
    --layout-inner-inline-mobile: 10px;
    --navbar-height: 64px;
    --titlebar-height: 32px;
    --spotify-player-height: 420px;
    --mini-player-height: 240px;

    /* Motion Tokens */
    --motion-fast: 140ms;
    --motion-normal: 220ms;
    --motion-slow: 320ms;
    --motion-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-distance-xs: 4px;
    --motion-distance-sm: 8px;
    --motion-distance-md: 14px;
}

/* Global Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow: hidden;
}

/* Global form-element default dark-mode styling.
   Individual CSS modules override as needed. */
input,
textarea,
select {
    background: var(--bg-secondary, rgba(17, 24, 39, 0.55));
    color: var(--text, #e8f2ff);
    border: 1px solid var(--border, #404050);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: none;
    transition: border-color var(--motion-fast) var(--motion-ease-standard);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent, #6be0ff);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted, #a9b8d6);
    opacity: 0.7;
}

/* Autofill-Styling (Webkit): verhindert weiße Hintergründe */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text, #e8f2ff);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary, rgba(17, 24, 39, 0.55)) inset;
    transition: background-color 5000s ease-in-out 0s;
}

body {
    height: 100%;
    background:
        linear-gradient(180deg, rgba(8, 12, 26, 0.75) 0%, rgba(6, 10, 22, 0.9) 100%),
        radial-gradient(120% 120% at 15% 20%, rgba(107, 224, 255, 0.24), transparent 45%),
        radial-gradient(120% 120% at 80% 0%, rgba(255, 91, 189, 0.22), transparent 40%),
        url('../assets/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

#root {
    height: 100%;
    overflow: hidden;
}

/* Main App Layout – auf Viewport-Höhe constrained, kein Body-Scroll */
.app-layout {
    height: 100vh;
    height: 100dvh;
    display: flex;
    overflow: hidden;
}

.app-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* Reserve space for the fixed navbar; add small extra offset to avoid overlap */
    padding-top: calc(var(--navbar-height) + var(--spacing) * 2 + 8px + env(safe-area-inset-top, 0px));
    padding-bottom: var(--spacing);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Lightweight app loading state (used by ProtectedRoute) */
.app-loading {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
}

.app-loading .loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(107, 224, 255, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =============================================================================
   COMMON UTILITIES
   ============================================================================= */

/* Selection */
::selection {
    background: rgba(107, 224, 255, 0.3);
}

/* Scrollbar Styling – für innere Scroll-Container (Chat, Sidebars etc.) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Spin Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide In Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Unified Motion Keyframes */
@keyframes motion-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes motion-page-enter {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance-sm));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-modal-enter {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance-md)) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes motion-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes motion-sheet-up {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Route transition hook (konfliktarm, nur Wrapper in App.tsx) */
.route-motion-container {
    min-width: 0;
}

.motion-page-enter {
    animation: motion-page-enter var(--motion-normal) var(--motion-ease-emphasized);
    will-change: opacity, transform;
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* =============================================================================
   ELECTRON DESKTOP – Viewport-Containment
   Stellt sicher, dass Inhalt sich an die Fenstergröße anpasst.
   ============================================================================= */
html[data-electron] {
    overflow: hidden;
}

html[data-electron] body {
    height: 100vh;
    overflow: hidden;
}

html[data-electron] .app-layout {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}

html[data-electron] .app-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: calc(var(--navbar-height) + var(--titlebar-height) + var(--spacing) * 2 + 8px);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0ms !important;
        scroll-behavior: auto !important;
    }

    .motion-page-enter {
        animation: none !important;
    }
}

/* Lazy Image Loading */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--motion-slow) var(--motion-ease-standard);
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* =============================================================================
   GLOBAL SELECT / DROPDOWN STYLES
   Unified styling for all select elements across the webapp
   ============================================================================= */

/* Base select element styling */
select {
    padding: 10px 40px 10px 14px;
    background: rgba(15, 20, 35, 0.95);
    border: 1px solid rgba(107, 224, 255, 0.25);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236be0ff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

select:hover {
    background-color: rgba(20, 28, 50, 0.95);
    border-color: rgba(107, 224, 255, 0.45);
}

select:focus {
    border-color: rgba(107, 224, 255, 0.7);
    background-color: rgba(20, 28, 50, 0.98);
    box-shadow: 0 0 0 3px rgba(107, 224, 255, 0.15);
}

/* Style for select options - consistent dark theme */
select option {
    background-color: #0d1220;
    color: var(--text);
    padding: 12px 14px;
    font-size: 0.9rem;
    border: none;
}

select option:hover,
select option:focus {
    background: linear-gradient(135deg, rgba(107, 224, 255, 0.3), rgba(255, 91, 189, 0.2)) !important;
    color: white !important;
}

select option:checked {
    background: linear-gradient(135deg, rgba(107, 224, 255, 0.4), rgba(255, 91, 189, 0.25)) !important;
    color: white !important;
}

/* Disabled select state */
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

select option:disabled {
    color: var(--muted);
    font-style: italic;
}

/* =============================================================================
   UNIFIED BUTTON STYLES
   Shared button classes for consistent appearance across all pages.
   Usage: className="btn btn-primary" or composes: btn btn-primary from '../../styles/base.css'
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.4;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--gradient);
    color: #0a0e20;
    font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(107, 224, 255, 0.25);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
    border-color: var(--error);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
}

/* =============================================================================
   UNIFIED CHECKBOX / TOGGLE STYLES
   Usage: <input type="checkbox" class="checkbox-unified" />
   ============================================================================= */

.checkbox-unified {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-standard);
    position: relative;
    flex-shrink: 0;
}

.checkbox-unified:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-unified:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid #0a0e20;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-unified:hover:not(:checked):not(:disabled) {
    border-color: var(--accent);
}

.checkbox-unified:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toggle Switch */
.toggle-unified {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background var(--motion-fast) var(--motion-ease-standard);
    position: relative;
    flex-shrink: 0;
}

.toggle-unified::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text);
    transition: transform var(--motion-fast) var(--motion-ease-standard);
}

.toggle-unified:checked {
    background: var(--accent);
}

.toggle-unified:checked::after {
    transform: translateX(18px);
    background: #0a0e20;
}

.toggle-unified:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
}

.toggle-unified:checked:hover:not(:disabled) {
    filter: brightness(1.1);
}

.toggle-unified:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* =============================================================================
   RESPONSIVE DESIGN - All Media Queries
   Mobile First Approach
   ============================================================================= */

/* =============================================================================
   SMALL MOBILE BREAKPOINT (max-width: 640px)
   ============================================================================= */
@media (max-width: 640px) {

    /* Modals as bottom sheets */
    .dm-overlay,
    .notification-center-overlay {
        align-items: flex-end;
        padding-top: 0;
    }

    .dm-container,
    .notification-center {
        max-width: 100%;
        max-height: 80vh;
        border-radius: 12px 12px 0 0;
        animation: motion-sheet-up var(--motion-normal) var(--motion-ease-emphasized);
    }

    /* Input fields larger for touch - prevent iOS zoom */
    input,
    textarea,
    select,
    button {
        min-height: 44px;
        font-size: 16px;
    }

    /* Navigation compact */
    .top-nav {
        padding: 0.75rem var(--layout-inner-inline-mobile);
    }

    .top-nav-items,
    .nav-links {
        gap: 0.5rem;
    }
}

/* =============================================================================
   TABLET BREAKPOINT (641px - 1024px)
   ============================================================================= */
@media (min-width: 641px) and (max-width: 1024px) {

    .dm-container,
    .notification-center {
        max-width: 350px;
    }
}

/* =============================================================================
   TABLET STYLES OVERRIDE (max-width: 1024px)
   ============================================================================= */
@media (max-width: 1024px) {
    /* Reserved for tablet-specific overrides */
}

/* =============================================================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================================================= */
@media (max-width: 768px) {
    :root {
        --spacing: 12px;
        --navbar-height: 50px;
    }

    /* Navbar mobile adjustments */
    .top-nav {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - var(--spacing) * 2);
        padding: 6px var(--layout-inner-inline-mobile);
        gap: 8px;
    }

    /* Hide nav links text on mobile */
    .nav-links {
        gap: 4px;
    }

    .nav-btn {
        width: 36px;
        height: 36px;
        padding: 6px;
    }

    .nav-avatar {
        width: 36px;
        height: 36px;
    }

    /* MiniPlayer hide on mobile */
    .mini-player {
        display: none;
    }

    /* Main content padding */
    .app-main {
        padding: var(--spacing);
        padding-top: calc(var(--navbar-height) + var(--spacing) + 8px + env(safe-area-inset-top, 0px));
    }

    /* Page header adjustments */
    header {
        padding: 16px var(--layout-inner-inline-mobile);
        grid-template-columns: 1fr;
        gap: 12px;
    }

    h1 {
        font-size: 1.8rem;
    }

    .lead {
        font-size: 0.95rem;
    }

    .actions {
        justify-content: flex-start;
    }

    /* Stream cards mobile layout */
    .stream-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stream-card {
        border-radius: 14px;
    }

    /* Footer adjustments */
    .app-footer {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        text-align: center;
    }

    /* Settings grid mobile */
    .settings-grid {
        grid-template-columns: 1fr;
    }

    /* User grid mobile */
    .user-grid,
    .user-grid-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Card grid mobile */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Apps Page tighter columns on tablet */
    .apps-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Auth section mobile */
    .auth-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .auth-header h2 {
        font-size: 1.5rem;
    }
}

/* =============================================================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ============================================================================= */
@media (max-width: 480px) {
    :root {
        --spacing: 10px;
    }

    .top-nav {
        border-radius: 10px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .nav-btn {
        width: 34px;
        height: 34px;
    }

    .nav-avatar {
        width: 34px;
        height: 34px;
    }

    /* User grid single column on very small screens */
    .user-grid,
    .user-grid-tiles {
        grid-template-columns: 1fr;
    }

    /* Stream meta stacked on small screens */
    .stream-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Smaller cards */
    .card {
        padding: 16px;
        border-radius: 14px;
    }

    /* Apps Page tighter icon size on small screens */
    .apps-grid .icon-tile img {
        max-width: 82px;
        max-height: 82px;
    }

    /* Patchnote cards */
    .patchnote-card {
        padding: 16px;
    }

    .patchnote-version {
        font-size: 1.1rem;
    }

    /* Settings cards */
    .settings-card {
        padding: 16px;
    }
}

/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================= */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .nav-btn {
        min-height: 44px;
    }

    /* Remove hover effects for touch */
    .nav-btn:hover,
    .pill:hover {
        transform: none;
    }

    /* Active states instead of hover */
    .nav-btn:active {
        transform: scale(0.95);
    }

    .voice-channel:active {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Scrolling improvements */
    .chat-messages,
    .voice-channel-list {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Larger button touch targets */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Form inputs larger for touch */
    .form-input,
    .form-textarea,
    .form-select {
        min-height: 48px;
        font-size: 16px;
        /* Prevents iOS zoom */
    }
}

/* =============================================================================
   LANDSCAPE MOBILE
   ============================================================================= */
@media (max-height: 500px) and (orientation: landscape) {

    /* Reduce header size in landscape */
    header {
        padding: 12px var(--layout-inner-inline-mobile);
    }

    h1 {
        font-size: 1.4rem;
    }

    .lead {
        font-size: 0.85rem;
    }
}

/* =============================================================================
   SAFE AREA INSETS (Notched Devices)
   ============================================================================= */
@supports (padding: env(safe-area-inset-bottom)) {
    .top-nav {
        top: calc(var(--spacing) + env(safe-area-inset-top, 0px));
        padding-left: max(var(--layout-inner-inline), env(safe-area-inset-left));
        padding-right: max(var(--layout-inner-inline), env(safe-area-inset-right));
    }

    @media (max-width: 768px) {
        .top-nav {
            padding-left: max(var(--layout-inner-inline-mobile), env(safe-area-inset-left));
            padding-right: max(var(--layout-inner-inline-mobile), env(safe-area-inset-right));
        }
    }

    .app-main {
        padding-left: max(var(--spacing), env(safe-area-inset-left));
        padding-right: max(var(--spacing), env(safe-area-inset-right));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .app-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Fixed bottom elements */
    .mini-player.expanded {
        bottom: max(var(--spacing), env(safe-area-inset-bottom));
    }

    .toast {
        bottom: max(24px, env(safe-area-inset-bottom));
    }
}

/* =============================================================================
   HIGH CONTRAST / REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

@media (prefers-contrast: high) {
    :root {
        --panel: #0f1424;
    }

    .card,
    .top-nav {
        border-width: 2px;
    }

    .btn-primary {
        border: 2px solid var(--accent);
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */
@media print {

    .top-nav,
    .mini-player {
        display: none !important;
    }

    .app-layout {
        padding: 0 !important;
    }

    body {
        background: white;
        color: black;
    }

    .card,
    header {
        border: 1px solid #ccc;
        background: white;
    }

    h1 {
        background: none;
        -webkit-text-fill-color: black;
        color: black;
    }
}