/* ============================================================
   AEXO RESPONSIVE STYLES & THEME ENHANCEMENTS
   Comprehensive responsive design for all device sizes
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES - Enhanced Theme Variables
   ============================================================ */

:root {
  /* Hover backgrounds for light theme */
  --hover-bg: rgba(0, 0, 0, 0.04);
  --active-bg: rgba(0, 0, 0, 0.08);
  --overlay-bg: rgba(0, 0, 0, 0.5);

  /* Shadows for light theme */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);

  /* Modal specific */
  --modal-bg: #ffffff;
  --modal-border: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  /* Hover backgrounds for dark theme */
  --hover-bg: rgba(255, 255, 255, 0.05);
  --active-bg: rgba(255, 255, 255, 0.1);
  --overlay-bg: rgba(0, 0, 0, 0.7);

  /* Shadows for dark theme */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* Modal specific */
  --modal-bg: var(--surface);
  --modal-border: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   CHANNEL MESSAGE ATTACHMENTS - Media Styles
   ============================================================ */

/* GIF & Image attachments */
.channel-attachment-gif img,
.channel-attachment-image img {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.channel-attachment-gif:hover img,
.channel-attachment-image:hover img {
  box-shadow: var(--shadow-lg);
}

/* Video attachments - Discord style */
.channel-attachment-video {
  position: relative;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease;
}

.channel-attachment-video:hover {
  box-shadow: var(--shadow-lg);
}

.channel-attachment-video video {
  background: #000;
}

.channel-attachment-video:hover .video-file-info {
  opacity: 1 !important;
}

/* Video controls styling */
.channel-attachment-video video::-webkit-media-controls-panel {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

/* Audio attachments */
.channel-attachment-audio {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.channel-attachment-audio:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.channel-attachment-audio audio {
  border-radius: 4px;
}

.channel-attachment-audio audio::-webkit-media-controls-panel {
  background: var(--surface);
}

/* File attachments */
.channel-attachment-file {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.channel-attachment-file:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.channel-attachment-file a:last-child:hover {
  background: var(--primary) !important;
  color: white !important;
}

/* Responsive media attachments */
@media (max-width: 768px) {

  .channel-attachment-gif,
  .channel-attachment-image {
    max-width: 100% !important;
  }

  .channel-attachment-video {
    max-width: 100% !important;
  }

  .channel-attachment-audio,
  .channel-attachment-file {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {

  .channel-attachment-gif img,
  .channel-attachment-image img {
    max-height: 200px !important;
  }

  .channel-attachment-video video {
    max-height: 250px !important;
  }
}

/* ============================================================
   OFFICE SIDEBAR - Base & Theme Styles
   ============================================================ */

#office-sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}

.office-list {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.office-home-btn {
  background: var(--primary);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.office-home-btn:hover {
  box-shadow: var(--shadow-md);
}

.office-icon-btn {
  background: var(--surface);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.office-icon-btn:hover {
  background: var(--primary);
  box-shadow: var(--shadow-md);
}

.office-icon-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.office-add-btn,
.office-discover-btn {
  transition: all 0.2s ease;
}

.office-add-btn:hover,
.office-discover-btn:hover {
  box-shadow: var(--shadow-md);
}

.office-divider {
  background: var(--border);
}

/* ============================================================
   LEFT SIDEBAR - Base & Theme Styles
   ============================================================ */

#left-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}

.office-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}

.office-header-name {
  color: var(--text);
}

.office-header-menu {
  color: var(--text-light);
}

.office-header-menu:hover {
  background: var(--hover-bg);
  color: var(--text);
}

/* Office Dropdown Menu */
.office-dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.office-dropdown-item {
  color: var(--text);
  transition: background 0.15s;
}

.office-dropdown-item:hover {
  background: var(--hover-bg);
}

.office-dropdown-item svg {
  color: var(--text-light);
}

.office-dropdown-divider {
  background: var(--border);
}

/* ============================================================
   CATEGORY STYLES - Base & Theme
   ============================================================ */

.office-category-header {
  transition: background 0.15s;
}

.office-category-header:hover {
  background: var(--hover-bg);
  border-radius: 4px;
}

.office-category-collapse-icon {
  color: var(--text-lighter);
}

.office-category-name {
  color: var(--text-lighter);
  transition: color 0.15s;
}

.office-category-header:hover .office-category-name {
  color: var(--text-light);
}

.office-category-add-btn,
.office-category-settings-btn {
  color: var(--text-lighter);
  transition: all 0.15s;
}

.office-category-add-btn:hover,
.office-category-settings-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}

/* ============================================================
   CHANNEL ITEM STYLES - Base & Theme
   ============================================================ */

.office-channel-item {
  color: var(--text-light);
  transition: all 0.15s ease;
}

.office-channel-item:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.office-channel-item.active {
  background: var(--primary);
  color: white;
}

.office-channel-icon {
  color: var(--text-lighter);
}

.office-channel-item:hover .office-channel-icon {
  color: var(--text-light);
}

.office-channel-item.active .office-channel-icon {
  color: white;
}

.office-channel-name {
  color: inherit;
}

.office-channel-lock {
  color: var(--text-lighter);
}

.office-channel-settings-btn {
  color: var(--text-lighter);
}

.office-channel-settings-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}

/* ============================================================
   MEMBER SIDEBAR - Base & Theme Styles
   ============================================================ */

.office-sidebar-content {
  background: var(--surface);
  transition: background 0.2s;
}

.office-sidebar-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.office-sidebar-header h3 {
  color: var(--text);
}

.close-sidebar-btn {
  color: var(--text-light);
  transition: all 0.2s;
}

.close-sidebar-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.office-members-list {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.member-group-header {
  color: var(--text-lighter);
}

.office-member-item {
  transition: background 0.15s;
}

.office-member-item:hover {
  background: var(--hover-bg);
}

.member-name {
  color: var(--text);
}

.member-role {
  color: var(--text-light);
}

.member-status-dot {
  border-color: var(--surface);
}

.no-members {
  color: var(--text-light);
}

/* ============================================================
   MODAL STYLES - Base & Theme
   ============================================================ */

.office-modal-overlay {
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.office-modal-content,
.office-settings-modal-content,
.channel-settings-modal-content,
.category-settings-modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
}

.office-modal-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}

.office-modal-title {
  color: var(--text);
  font-weight: 600;
}

.office-modal-close {
  color: var(--text-light);
  transition: all 0.2s;
}

.office-modal-close:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.office-modal-body {
  background: var(--modal-bg);
  color: var(--text);
}

.office-modal-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Form Elements */
.office-form-group label {
  color: var(--text);
}

.office-form-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.office-form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

.office-form-input::placeholder {
  color: var(--text-lighter);
}

textarea.office-form-input {
  background: var(--bg);
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--hover-bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--active-bg);
  border-color: var(--text-lighter);
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-danger-outline {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
}

.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Danger Zone */
.danger-zone,
.office-danger-zone {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 20px;
}

.danger-zone h3,
.office-danger-zone h3 {
  color: #ef4444;
}

/* Checkbox Styles */
.office-checkbox-label,
.checkbox-label {
  color: var(--text);
}

.office-checkbox-hint,
.checkbox-hint {
  color: var(--text-light);
}

/* ============================================================
   SETTINGS TABS
   ============================================================ */

.settings-tabs {
  background: var(--hover-bg);
  border-bottom: 1px solid var(--border);
}

.settings-tab {
  color: var(--text-light);
  background: transparent;
  transition: all 0.15s;
}

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

.settings-tab.active {
  background: var(--primary);
  color: white;
}

/* Settings Member List */
.settings-members-header {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.settings-member-item {
  background: var(--hover-bg);
  transition: background 0.15s;
}

.settings-member-item:hover {
  background: var(--active-bg);
}

.settings-member-name {
  color: var(--text);
}

.settings-member-role {
  color: var(--text-light);
}

.settings-role-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.settings-role-select:focus {
  border-color: var(--primary);
}

.settings-member-remove {
  color: var(--text-light);
}

.settings-member-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* ============================================================
   CONTEXT MENU
   ============================================================ */

.context-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.context-menu-item {
  color: var(--text);
  transition: background 0.1s;
}

.context-menu-item:hover {
  background: var(--hover-bg);
}

.context-menu-item.text-danger {
  color: #ef4444;
}

.context-menu-item.text-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.context-menu-divider {
  background: var(--border);
}

/* ============================================================
   CHANNEL CHAT HEADER
   ============================================================ */

.channel-chat-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}

.channel-header-avatar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: var(--shadow-sm);
}

.channel-header-name {
  color: var(--text);
}

.channel-hash {
  color: var(--text-lighter);
}

.channel-header-topic {
  color: var(--text-lighter);
}

.channel-action-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-light);
  transition: all 0.2s;
}

.channel-action-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
  color: var(--text);
}

/* ============================================================
   INVITE MODAL SPECIFIC
   ============================================================ */

.invite-modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  box-shadow: var(--shadow-xl);
}

.invite-link-container {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.invite-link-text {
  color: var(--text);
  background: transparent;
}

.invite-copy-btn {
  background: var(--primary);
  color: white;
}

.invite-copy-btn:hover {
  background: var(--primary-dark);
}

/* ============================================================
   USER PROFILE DROPDOWN
   ============================================================ */

.user-profile-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

.profile-dropdown-header {
  background: var(--hover-bg);
}

.profile-dropdown-name {
  color: var(--text);
}

.profile-dropdown-email {
  color: var(--text-light);
}

.profile-dropdown-divider {
  background: var(--border);
}

.dropdown-menu-item {
  color: var(--text);
}

.dropdown-menu-item:hover {
  background: var(--hover-bg);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.toast-success {
  border-left: 4px solid #22c55e;
}

.toast-error {
  border-left: 4px solid #ef4444;
}

.toast-warning {
  border-left: 4px solid #f59e0b;
}

.toast-info {
  border-left: 4px solid var(--primary);
}

/* ============================================================
   RESPONSIVE STYLES - TABLET (max-width: 1024px)
   ============================================================ */

@media (max-width: 1024px) {

  /* Main grid adjustments */
  #main-container {
    grid-template-columns: 64px 260px 1fr 0;
  }

  #main-container.no-right-sidebar {
    grid-template-columns: 64px 260px 1fr;
  }

  /* Hide right sidebar by default on tablet */
  #right-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  #right-sidebar.active {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Adjust office sidebar */
  #office-sidebar {
    padding: 8px 0;
  }

  .office-list {
    padding: 0 8px;
    gap: 6px;
  }

  .office-icon-btn,
  .office-home-btn,
  .office-add-btn,
  .office-discover-btn {
    width: 44px;
    height: 44px;
  }

  /* Left sidebar adjustments */
  .office-header {
    padding: 10px 12px;
  }

  .office-header-name {
    font-size: 14px;
  }

  /* Modal adjustments */
  .office-settings-modal-content,
  .channel-settings-modal-content,
  .category-settings-modal-content {
    width: 90vw;
    max-width: 500px;
  }
}

/* ============================================================
   RESPONSIVE STYLES - MOBILE LANDSCAPE (max-width: 900px)
   ============================================================ */

@media (max-width: 900px) {
  #main-container {
    grid-template-columns: 0 0 1fr;
  }

  /* Show mobile bottom nav */
  #mobile-bottom-nav {
    display: flex !important;
  }

  /* Add padding for bottom nav */
  #chat-content,
  #channel-chat-content {
    padding-bottom: 70px;
  }

  /* Fix: Ensure message input area is positioned above mobile bottom nav */
  .message-input-area {
    position: relative;
    z-index: 101;
  }

  /* Office sidebar as overlay */
  #office-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 60px;
    width: 72px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--bg);
    border-right: 1px solid var(--border);
  }

  #office-sidebar.active {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Left sidebar as overlay */
  #left-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 60px;
    width: 300px;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--surface);
    border-right: 1px solid var(--border);
  }

  #left-sidebar.active {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Right sidebar as full overlay */
  #right-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 60px;
    width: 100%;
    max-width: 320px;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    background: var(--surface);
  }

  #right-sidebar.active {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Chat header adjustments */
  .channel-chat-header {
    padding: 10px 12px;
  }

  .channel-header-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .channel-header-name {
    font-size: 14px;
  }

  .channel-action-btn {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================
   RESPONSIVE STYLES - MOBILE PORTRAIT (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {

  /* Modal full-screen on mobile */
  .office-modal-content,
  .office-settings-modal-content,
  .channel-settings-modal-content,
  .category-settings-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .office-modal-body {
    padding: 16px;
  }

  .office-modal-footer {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .office-modal-footer .btn {
    flex: 1;
    min-width: 120px;
  }

  /* Form adjustments */
  .office-form-input {
    padding: 14px;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  /* Settings tabs scroll horizontally */
  .settings-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Member list adjustments */
  .settings-members-list {
    max-height: none;
  }

  .settings-member-item {
    padding: 12px;
  }

  .settings-member-avatar {
    width: 36px;
    height: 36px;
  }

  /* Channel items touch-friendly */
  .office-channel-item {
    padding: 12px;
    margin: 4px 0;
  }

  .office-channel-settings-btn {
    display: flex !important;
    opacity: 1;
    width: 32px;
    height: 32px;
  }

  /* Category header touch-friendly */
  .office-category-header {
    padding: 12px;
  }

  .office-category-add-btn,
  .office-category-settings-btn {
    opacity: 1;
    width: 28px;
    height: 28px;
  }

  /* Context menu adjustments */
  .context-menu {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 80px !important;
    top: auto !important;
    width: auto !important;
    border-radius: 12px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .context-menu-item {
    padding: 14px 16px;
    font-size: 15px;
  }

  /* User dropdown full width */
  .user-profile-dropdown {
    position: fixed;
    top: auto;
    bottom: 70px;
    left: 16px;
    right: 16px;
    width: auto;
    border-radius: 12px;
  }

  /* Channel header compact */
  .channel-header-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .channel-header-name::after {
    display: none;
  }

  .channel-header-topic {
    max-width: 200px;
  }

  /* Office header adjustments */
  .office-header {
    padding: 12px;
  }

  .office-header-icon {
    width: 32px;
    height: 32px;
  }

  .office-header-name {
    font-size: 14px;
  }

  /* Member sidebar adjustments */
  .office-sidebar-header {
    padding: 14px;
  }

  .office-member-item {
    padding: 10px 14px;
  }

  .member-avatar {
    width: 36px;
    height: 36px;
  }
}

/* ============================================================
   RESPONSIVE STYLES - SMALL MOBILE (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {

  /* Further modal adjustments */
  .office-modal-header {
    padding: 16px;
  }

  .office-modal-title {
    font-size: 16px;
  }

  .office-modal-body {
    padding: 12px;
  }

  /* Settings icon smaller */
  .office-icon-preview {
    width: 64px !important;
    height: 64px !important;
    font-size: 24px !important;
  }

  /* Form groups tighter */
  .office-form-group {
    margin-bottom: 16px;
  }

  .office-form-group label {
    font-size: 12px;
  }

  /* Buttons full width */
  .office-modal-footer {
    flex-direction: column;
  }

  .office-modal-footer .btn {
    width: 100%;
  }

  .office-modal-footer .footer-left,
  .office-modal-footer .footer-right {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  /* Danger zone compact */
  .danger-zone,
  .office-danger-zone {
    padding: 14px;
  }

  .danger-zone h3,
  .office-danger-zone h3 {
    font-size: 13px;
  }

  /* Settings tabs more compact */
  .settings-tab {
    padding: 8px 12px;
    font-size: 12px;
    gap: 4px;
  }

  .settings-tab svg {
    width: 14px;
    height: 14px;
  }

  /* Member items compact */
  .settings-member-item {
    flex-wrap: wrap;
    gap: 8px;
  }

  .settings-member-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }

  /* Channel header minimal */
  .channel-chat-header {
    padding: 8px 12px;
    min-height: 48px;
  }

  .channel-header-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .channel-header-avatar svg {
    width: 16px;
    height: 16px;
  }

  .channel-header-name {
    font-size: 13px;
  }

  .channel-hash {
    font-size: 14px;
  }

  .channel-header-topic {
    display: none;
  }

  .channel-action-btn {
    width: 28px;
    height: 28px;
  }

  .channel-action-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Office sidebar minimal */
  #office-sidebar {
    width: 64px;
  }

  .office-icon-btn,
  .office-home-btn,
  .office-add-btn,
  .office-discover-btn {
    width: 40px;
    height: 40px;
  }

  /* Left sidebar full width */
  #left-sidebar.active {
    width: calc(100% - 20px);
    max-width: 320px;
  }

  /* Invite modal adjustments */
  .invite-link-container {
    flex-direction: column;
    gap: 8px;
  }

  .invite-link-text {
    width: 100%;
  }

  .invite-copy-btn {
    width: 100%;
  }
}

/* ============================================================
   RESPONSIVE STYLES - EXTRA SMALL (max-width: 375px)
   ============================================================ */

@media (max-width: 375px) {

  /* Even more compact */
  .channel-header-left {
    gap: 8px;
  }

  .channel-header-actions {
    gap: 4px;
  }

  .channel-action-btn {
    width: 26px;
    height: 26px;
  }

  .office-modal-header {
    padding: 12px;
  }

  .office-modal-title {
    font-size: 15px;
  }

  .settings-tabs {
    padding: 10px 12px;
    gap: 6px;
  }

  .settings-tab {
    padding: 6px 10px;
  }
}

/* ============================================================
   DARK THEME ENHANCEMENTS
   ============================================================ */

[data-theme="dark"] #office-sidebar {
  background: var(--bg);
  border-color: var(--border);
}

[data-theme="dark"] .office-icon-btn {
  background: var(--surface);
}

[data-theme="dark"] .office-icon-btn:hover,
[data-theme="dark"] .office-icon-btn.active {
  background: var(--primary);
}

[data-theme="dark"] #left-sidebar {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .office-header {
  background: var(--primary);
  border-color: var(--border);
}

[data-theme="dark"] .office-dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .office-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .office-category-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .office-channel-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .office-modal-content,
[data-theme="dark"] .office-settings-modal-content,
[data-theme="dark"] .channel-settings-modal-content,
[data-theme="dark"] .category-settings-modal-content {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .office-modal-body {
  background: var(--surface);
}

[data-theme="dark"] .office-modal-footer {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .office-form-input {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .office-form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.25);
}

[data-theme="dark"] .settings-tabs {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .settings-tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .settings-member-item {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .settings-member-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .context-menu {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .context-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .channel-chat-header {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .channel-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

[data-theme="dark"] .channel-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
}

[data-theme="dark"] .user-profile-dropdown {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .profile-dropdown-header {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .dropdown-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .danger-zone,
[data-theme="dark"] .office-danger-zone {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .invite-link-container {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border);
}

[data-theme="dark"] .toast {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* ============================================================
   ACCESSIBILITY & INTERACTION ENHANCEMENTS
   ============================================================ */

/* Focus states */
.office-icon-btn:focus-visible,
.office-channel-item:focus-visible,
.office-member-item:focus-visible,
.btn:focus-visible,
.settings-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast adjustments */
@media (prefers-contrast: high) {

  .office-icon-btn,
  .office-channel-item,
  .btn,
  .office-form-input {
    border-width: 2px;
  }

  .office-icon-btn.active,
  .office-channel-item.active,
  .btn-primary {
    outline: 2px solid white;
    outline-offset: -4px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

  /* Make touch targets larger */
  .office-icon-btn,
  .office-home-btn,
  .office-add-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .office-channel-item,
  .office-member-item {
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Show action buttons always on touch */
  .office-channel-settings-btn,
  .office-category-add-btn,
  .office-category-settings-btn {
    opacity: 1;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {

  #office-sidebar,
  #left-sidebar,
  #right-sidebar,
  #mobile-bottom-nav,
  .channel-header-actions,
  .office-modal-overlay {
    display: none !important;
  }

  #main-container {
    display: block !important;
  }

  .channel-chat-header {
    border-bottom: 1px solid #000;
  }
}