// Enterprise Chat Component Styles

// Color Variables
$primary-color: #2563eb;
$primary-hover: #1d4ed8;
$primary-light: #3b82f6;
$secondary-color: #64748b;
$success-color: #10b981;
$danger-color: #ef4444;
$warning-color: #f59e0b;
$background-primary: #ffffff;
$background-secondary: #f8fafc;
$background-tertiary: #f1f5f9;
$border-color: #e2e8f0;
$text-primary: #1e293b;
$text-secondary: #64748b;
$text-tertiary: #94a3b8;
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

// Typography
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-size-xs: 0.75rem;
$font-size-sm: 0.875rem;
$font-size-base: 1rem;
$font-size-lg: 1.125rem;
$font-size-xl: 1.25rem;
$font-size-2xl: 1.5rem;

// Spacing
$spacing-xs: 0.25rem;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 2rem;
$spacing-2xl: 3rem;

// Border Radius
$radius-sm: 0.375rem;
$radius-md: 0.5rem;
$radius-lg: 0.75rem;
$radius-xl: 1rem;
$radius-full: 9999px;

// Transitions
$transition-fast: 150ms ease-in-out;
$transition-base: 200ms ease-in-out;
$transition-slow: 300ms ease-in-out;

// Main Container
.chat-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: $background-secondary;
  font-family: $font-family;
  overflow: hidden;
}

.chat-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

// ============================================
// Sidebar Styles - REMOVED
// ============================================

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: $text-secondary;
  border-radius: $radius-md;
  cursor: pointer;
  transition: all $transition-fast;

  &:hover {
    background: $background-tertiary;
    color: $text-primary;
  }

  &:active {
    transform: scale(0.95);
  }

  &.active {
    background: $primary-color;
    color: white;

    &:hover {
      background: $primary-hover;
    }
  }

  svg {
    flex-shrink: 0;
  }
}

// Sidebar-specific styles removed

.online-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: $success-color;
  border: 2px solid white;
  border-radius: $radius-full;
  z-index: 1;
}

.status-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: $warning-color;
  border: 2px solid white;
  border-radius: $radius-full;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  &.offline-badge {
    background: $text-tertiary;
  }

  svg {
    width: 6px;
    height: 6px;
    fill: white;
  }
}

.conversation-content {
  flex: 1;
  min-width: 0;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-xs;
}

.conversation-name {
  font-size: $font-size-base;
  font-weight: 500;
  color: $text-primary;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-meta {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  flex-shrink: 0;
}

.conversation-time {
  font-size: $font-size-xs;
  color: $text-tertiary;
}

.conversation-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $spacing-sm;
}

.preview-text {
  font-size: $font-size-sm;
  color: $text-secondary;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.unread-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 $spacing-xs;
  background: $primary-color;
  color: white;
  border-radius: $radius-full;
  font-size: $font-size-xs;
  font-weight: 600;
  flex-shrink: 0;
}

// Search Results & Blocked Users
.search-results-list,
.blocked-users-list {
  padding: $spacing-xs 0;
}

.search-result-item,
.blocked-user-item {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  padding: $spacing-md $spacing-lg;
  cursor: pointer;
  transition: all $transition-fast;

  &:hover {
    background: $background-tertiary;
  }
}

.user-avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;

  img {
    width: 100%;
    height: 100%;
    border-radius: $radius-full;
    object-fit: cover;
  }

  .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: $radius-full;
    background: linear-gradient(135deg, $primary-color, $primary-light);
    color: white;
    font-weight: 600;
    font-size: $font-size-sm;
  }
}

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

.user-name {
  font-size: $font-size-base;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: $spacing-xs;
}

.user-role {
  font-size: $font-size-xs;
  color: $text-tertiary;
  text-transform: capitalize;
}

.chevron-icon {
  flex-shrink: 0;
  color: $text-tertiary;
}

.unblock-button {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  padding: $spacing-xs $spacing-md;
  border: 1px solid $primary-color;
  background: transparent;
  color: $primary-color;
  border-radius: $radius-md;
  cursor: pointer;
  font-size: $font-size-sm;
  font-weight: 500;
  transition: all $transition-fast;

  &:hover {
    background: $primary-color;
    color: white;
  }
}

// ============================================
// Main Chat Area
// ============================================

.chat-main {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: $background-secondary;
  overflow: hidden;
}

.chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $background-secondary;

  .empty-content {
    text-align: center;
    color: $text-tertiary;

    svg {
      margin-bottom: $spacing-lg;
      opacity: 0.5;
    }

    h2 {
      font-size: $font-size-xl;
      font-weight: 600;
      color: $text-primary;
      margin: $spacing-md 0;
    }

    p {
      font-size: $font-size-sm;
      color: $text-secondary;
    }
  }
}

// Chat Header
.chat-header {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  padding: $spacing-md $spacing-lg;
  background: $background-primary;
  border-bottom: 1px solid $border-color;
  box-shadow: $shadow-sm;
  position: sticky;
  top: 0;
  z-index: 5;
}


.chat-header-info {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  flex: 1;
  min-width: 0;
}

.chat-user-avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;

  img {
    width: 100%;
    height: 100%;
    border-radius: $radius-full;
    object-fit: cover;
  }

  .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: $radius-full;
    background: linear-gradient(135deg, $primary-color, $primary-light);
    color: white;
    font-weight: 600;
    font-size: $font-size-base;
  }
}

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

.chat-user-name {
  font-size: $font-size-base;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: $spacing-xs;
}

.chat-user-status {
  font-size: $font-size-xs;
  color: $text-tertiary;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
}

// Status Selector
.status-selector {
  position: relative;
}

.status-badge-button {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  padding: $spacing-xs $spacing-sm;
  border: 1px solid $border-color;
  background: $background-primary;
  border-radius: $radius-md;
  cursor: pointer;
  transition: all $transition-fast;
  font-size: $font-size-sm;
  color: $text-secondary;
  
  &:hover {
    background: $background-tertiary;
    border-color: $primary-light;
    color: $text-primary;
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.status-badge-indicator {
  width: 12px;
  height: 12px;
  border-radius: $radius-full;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.status-online {
    background: $success-color;
  }
  
  &.status-busy {
    background: $warning-color;
  }
  
  &.status-offline {
    background: $text-tertiary;
  }
  
  svg {
    width: 8px;
    height: 8px;
    fill: white;
  }
}

.status-label {
  font-weight: 500;
  font-size: $font-size-sm;
}

.status-menu-dropdown {
  position: absolute;
  top: calc(100% + $spacing-xs);
  right: 0;
  background: $background-primary;
  border: 1px solid $border-color;
  border-radius: $radius-md;
  box-shadow: $shadow-lg;
  min-width: 160px;
  z-index: 100;
  overflow: hidden;
  margin-top: $spacing-xs;
}

.status-menu-item {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  width: 100%;
  padding: $spacing-sm $spacing-md;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all $transition-fast;
  color: $text-primary;
  font-size: $font-size-sm;
  
  &:hover {
    background: $background-tertiary;
  }
  
  &.active {
    background: rgba(37, 99, 235, 0.05);
    color: $primary-color;
    font-weight: 500;
  }
  
  &:first-child {
    border-top-left-radius: $radius-md;
    border-top-right-radius: $radius-md;
  }
  
  &:last-child {
    border-bottom-left-radius: $radius-md;
    border-bottom-right-radius: $radius-md;
  }
}

.status-menu-indicator {
  width: 12px;
  height: 12px;
  border-radius: $radius-full;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.status-online {
    background: $success-color;
  }
  
  &.status-busy {
    background: $warning-color;
  }
  
  &.status-offline {
    background: $text-tertiary;
  }
  
  svg {
    width: 8px;
    height: 8px;
    fill: white;
  }
}

.status-menu-item svg:last-child {
  margin-left: auto;
  color: $primary-color;
  flex-shrink: 0;
}

.call-button {
  color: $primary-color;

  &:hover {
    background: rgba(37, 99, 235, 0.1);
    color: $primary-hover;
  }
}

.more-menu {
  position: relative;
}

.more-menu-dropdown {
  position: absolute;
  top: calc(100% + $spacing-xs);
  right: 0;
  background: $background-primary;
  border: 1px solid $border-color;
  border-radius: $radius-md;
  box-shadow: $shadow-lg;
  min-width: 200px;
  z-index: 100;
  overflow: hidden;
}

.more-menu-item {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  width: 100%;
  padding: $spacing-sm $spacing-md;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background $transition-fast;
  font-size: $font-size-sm;
  color: $text-primary;

  &:hover {
    background: $background-tertiary;
  }

  &.danger {
    color: $danger-color;

    &:hover {
      background: rgba(239, 68, 68, 0.1);
    }
  }
}

// Messages Container
.messages-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: $spacing-lg;
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: $border-color;
    border-radius: $radius-full;

    &:hover {
      background: $text-tertiary;
    }
  }
}

.messages-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: $text-tertiary;

  svg {
    margin-bottom: $spacing-md;
    opacity: 0.5;
  }

  p {
    font-size: $font-size-base;
    margin: $spacing-xs 0;
  }

  .empty-subtitle {
    font-size: $font-size-sm;
    color: $text-tertiary;
  }
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
}

.message-wrapper {
  display: flex;
  width: 100%;

  &.message-sent {
    justify-content: flex-end;

    .message-bubble {
      background: $primary-color;
      color: white;
      border-bottom-right-radius: $radius-sm;

      .message-time {
        color: rgba(255, 255, 255, 0.8);
      }

      .read-indicator {
        color: rgba(255, 255, 255, 0.8);

        &.read {
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  &.message-received {
    justify-content: flex-start;

    .message-bubble {
      background: $background-primary;
      color: $text-primary;
      border-bottom-left-radius: $radius-sm;
      box-shadow: $shadow-sm;
    }
  }
}

.message-bubble {
  max-width: 70%;
  min-width: 120px;
  padding: $spacing-sm $spacing-md;
  border-radius: $radius-lg;
  position: relative;
  word-wrap: break-word;
  transition: all $transition-fast;

  @media (max-width: 768px) {
    max-width: 85%;
  }
}

.message-content {
  font-size: $font-size-base;
  line-height: 1.5;
  margin-bottom: $spacing-xs;
}

.message-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: $spacing-xs;
  margin-top: $spacing-xs;
}

.message-time {
  font-size: $font-size-xs;
  color: $text-tertiary;
}

.read-indicator {
  flex-shrink: 0;
  color: $text-tertiary;
  transition: color $transition-fast;

  &.read {
    color: $primary-color;
  }
}

.message-actions-button {
  position: absolute;
  top: $spacing-xs;
  right: $spacing-xs;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  color: currentColor;
  border-radius: $radius-sm;
  cursor: pointer;
  transition: all $transition-fast;
  opacity: 0.7;

  .message-bubble:hover & {
    display: flex;
  }

  &:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
  }
}

.message-actions-menu {
  position: absolute;
  top: calc(100% + $spacing-xs);
  right: 0;
  background: $background-primary;
  border: 1px solid $border-color;
  border-radius: $radius-md;
  box-shadow: $shadow-lg;
  min-width: 140px;
  z-index: 10;
  overflow: hidden;
}

.message-action-item {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  width: 100%;
  padding: $spacing-sm $spacing-md;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background $transition-fast;
  font-size: $font-size-sm;
  color: $text-primary;

  &:hover {
    background: $background-tertiary;
  }

  &.danger {
    color: $danger-color;

    &:hover {
      background: rgba(239, 68, 68, 0.1);
    }
  }
}

// Typing Indicator
.typing-indicator {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  padding: $spacing-sm $spacing-md;
  color: $text-tertiary;
  font-size: $font-size-sm;
}

.typing-dots {
  display: flex;
  gap: 4px;

  span {
    width: 6px;
    height: 6px;
    background: $text-tertiary;
    border-radius: $radius-full;
    animation: typing 1.4s infinite;

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

.typing-text {
  font-style: italic;
}

// Message Input Area
.message-input-area {
  padding: $spacing-md $spacing-lg;
  background: $background-primary;
  border-top: 1px solid $border-color;
}

.message-form {
  width: 100%;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: $spacing-sm;
  padding: $spacing-sm;
  background: $background-secondary;
  border: 1px solid $border-color;
  border-radius: $radius-lg;
  transition: all $transition-fast;

  &:focus-within {
    border-color: $primary-color;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background: $background-primary;
  }
}

.message-input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: $spacing-sm $spacing-md;
  border: none;
  background: transparent;
  color: $text-primary;
  font-size: $font-size-base;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.5;

  &::placeholder {
    color: $text-tertiary;
  }
}

.send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: $primary-color;
  color: white;
  border-radius: $radius-md;
  cursor: pointer;
  transition: all $transition-fast;
  flex-shrink: 0;

  &:hover:not(:disabled) {
    background: $primary-hover;
    transform: scale(1.05);
  }

  &:active:not(:disabled) {
    transform: scale(0.95);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.blocked-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $spacing-md;
  padding: $spacing-xl;
  background: $background-primary;
  border-top: 1px solid $border-color;
  text-align: center;
  color: $text-secondary;

  svg {
    color: $danger-color;
    opacity: 0.7;
  }

  p {
    font-size: $font-size-sm;
    margin: 0;
  }
}

.unblock-action-button {
  padding: $spacing-sm $spacing-lg;
  border: 1px solid $primary-color;
  background: $primary-color;
  color: white;
  border-radius: $radius-md;
  cursor: pointer;
  font-size: $font-size-sm;
  font-weight: 500;
  transition: all $transition-fast;

  &:hover {
    background: $primary-hover;
    border-color: $primary-hover;
  }
}

// ============================================
// Modal Styles
// ============================================

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: $spacing-lg;
  animation: fadeIn $transition-base;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: $background-primary;
  border-radius: $radius-lg;
  box-shadow: $shadow-xl;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  animation: slideUp $transition-base;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-lg;
  border-bottom: 1px solid $border-color;
}

.modal-title {
  font-size: $font-size-xl;
  font-weight: 600;
  color: $text-primary;
  margin: 0;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: $text-secondary;
  border-radius: $radius-md;
  cursor: pointer;
  transition: all $transition-fast;

  &:hover {
    background: $background-tertiary;
    color: $text-primary;
  }
}

.modal-body {
  padding: $spacing-lg;
  color: $text-secondary;
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: $spacing-sm;
  padding: $spacing-lg;
  border-top: 1px solid $border-color;
}

.modal-button {
  padding: $spacing-sm $spacing-lg;
  border: 1px solid $border-color;
  background: $background-primary;
  color: $text-primary;
  border-radius: $radius-md;
  cursor: pointer;
  font-size: $font-size-sm;
  font-weight: 500;
  transition: all $transition-fast;

  &.secondary {
    &:hover {
      background: $background-tertiary;
    }
  }

  &.primary {
    background: $primary-color;
    color: white;
    border-color: $primary-color;

    &:hover {
      background: $primary-hover;
      border-color: $primary-hover;
    }

    &.danger {
      background: $danger-color;
      border-color: $danger-color;

      &:hover {
        background: #dc2626;
        border-color: #dc2626;
      }
    }
  }
}

// ============================================
// Responsive Adjustments
// ============================================

@media (max-width: 768px) {
  .chat-container {
    height: 100vh;
    height: 100dvh; // Dynamic viewport height for mobile
  }

  .chat-header {
    padding: $spacing-sm $spacing-md;
  }

  .messages-container {
    padding: $spacing-md;
  }

  .message-input-area {
    padding: $spacing-sm $spacing-md;
  }

  .modal-content {
    margin: $spacing-md;
    max-width: calc(100% - 2rem);
  }
}

@media (max-width: 480px) {
  .chat-user-avatar {
    width: 40px;
    height: 40px;
  }

  .message-bubble {
    max-width: 90%;
    padding: $spacing-xs $spacing-sm;
  }

  .modal-content {
    margin: $spacing-sm;
    max-width: calc(100% - 1rem);
  }
}

// Accessibility
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// Focus styles for accessibility
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid $primary-color;
  outline-offset: 2px;
}

