// Community Inbox Styles
// ======================
// Mobile-first responsive design für die Community Inbox View

.community-inbox {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 500px;

  // Header Section
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;

    h1 {
      margin: 0;
      font-size: 1.75rem;
      font-weight: 600;
    }
  }

  &__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  // Stats Bar
  &__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--theme-elevation-50);
    border-radius: 8px;
  }

  &__stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--theme-elevation-0);
    border-radius: 6px;
    text-align: center;

    .stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--theme-text);
      line-height: 1.2;
    }

    .stat-label {
      font-size: 0.75rem;
      color: var(--theme-elevation-800);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 0.25rem;
    }

    &--urgent .stat-value {
      color: var(--theme-error-500);
    }

    &--waiting .stat-value {
      color: var(--theme-warning-500);
    }

    &--new .stat-value {
      color: var(--theme-success-500);
    }
  }

  // Main Content Area
  &__content {
    display: flex;
    flex: 1;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
  }

  // Filter Sidebar
  &__filters {
    width: 280px;
    flex-shrink: 0;
    background: var(--theme-elevation-50);
    border-radius: 8px;
    padding: 1rem;
    overflow-y: auto;

    @media (max-width: 1024px) {
      display: none;
    }
  }

  &__filter-section {
    margin-bottom: 1.5rem;

    &:last-child {
      margin-bottom: 0;
    }

    h3 {
      font-size: 0.875rem;
      font-weight: 600;
      margin: 0 0 0.75rem;
      color: var(--theme-elevation-800);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }

  &__filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  &__filter-btn {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--theme-elevation-200);
    border-radius: 20px;
    background: var(--theme-elevation-0);
    color: var(--theme-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;

    &:hover {
      border-color: var(--theme-elevation-400);
      background: var(--theme-elevation-100);
    }

    &--active {
      background: var(--theme-elevation-900);
      color: var(--theme-elevation-0);
      border-color: var(--theme-elevation-900);

      &:hover {
        background: var(--theme-elevation-800);
        border-color: var(--theme-elevation-800);
      }
    }

    .filter-count {
      background: var(--theme-elevation-200);
      padding: 0.125rem 0.375rem;
      border-radius: 10px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    &--active .filter-count {
      background: var(--theme-elevation-700);
      color: var(--theme-elevation-0);
    }
  }

  // Interaction List
  &__list {
    flex: 1;
    min-width: 300px;
    max-width: 480px;
    background: var(--theme-elevation-50);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

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

  &__list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--theme-elevation-150);
    flex-shrink: 0;

    h2 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
    }

    .result-count {
      font-size: 0.8125rem;
      color: var(--theme-elevation-600);
    }
  }

  &__list-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
  }

  // Interaction Card
  &__interaction-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--theme-elevation-0);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;

    &:hover {
      background: var(--theme-elevation-100);
    }

    &--selected {
      border-color: var(--theme-elevation-500);
      background: var(--theme-elevation-100);
    }

    &--unread {
      border-left: 3px solid var(--theme-success-500);
    }
  }

  &__card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-elevation-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-elevation-600);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__card-content {
    flex: 1;
    min-width: 0;
  }

  &__card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
  }

  &__card-author {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-text);
    display: flex;
    align-items: center;
    gap: 0.375rem;

    .verified-badge {
      color: var(--theme-success-500);
      font-size: 0.75rem;
    }
  }

  &__card-time {
    font-size: 0.75rem;
    color: var(--theme-elevation-600);
    flex-shrink: 0;
  }

  &__card-message {
    font-size: 0.8125rem;
    color: var(--theme-elevation-700);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }

  &__card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  &__card-platform {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-elevation-600);

    .platform-icon {
      font-size: 0.875rem;
    }
  }

  &__card-badges {
    display: flex;
    gap: 0.375rem;
  }

  // Detail Panel
  &__detail {
    flex: 1;
    background: var(--theme-elevation-50);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 400px;

    @media (max-width: 768px) {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      border-radius: 0;
      min-width: 0;

      &--visible {
        display: flex;
      }
    }
  }

  &__detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--theme-elevation-600);
    text-align: center;
    padding: 2rem;

    .empty-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      opacity: 0.5;
    }

    p {
      margin: 0;
      font-size: 1rem;
    }
  }

  &__detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem;
    border-bottom: 1px solid var(--theme-elevation-150);
    flex-shrink: 0;
    gap: 1rem;
  }

  &__detail-author {
    display: flex;
    gap: 0.875rem;
    align-items: center;
  }

  &__detail-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-elevation-200);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-elevation-600);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__detail-author-info {
    h3 {
      margin: 0 0 0.25rem;
      font-size: 1rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.375rem;

      .verified-badge {
        color: var(--theme-success-500);
      }
    }

    .author-handle {
      font-size: 0.8125rem;
      color: var(--theme-elevation-600);
    }

    .author-stats {
      font-size: 0.75rem;
      color: var(--theme-elevation-500);
      margin-top: 0.25rem;
    }
  }

  &__detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  &__detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
  }

  &__detail-message {
    background: var(--theme-elevation-0);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;

    .message-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
      font-size: 0.8125rem;
      color: var(--theme-elevation-600);
    }

    .message-text {
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--theme-text);
      white-space: pre-wrap;
    }

    .message-engagement {
      display: flex;
      gap: 1rem;
      margin-top: 0.875rem;
      padding-top: 0.875rem;
      border-top: 1px solid var(--theme-elevation-100);
      font-size: 0.8125rem;
      color: var(--theme-elevation-600);

      span {
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }
    }
  }

  &__detail-video {
    background: var(--theme-elevation-0);
    border-radius: 8px;
    padding: 0.875rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .video-thumb {
      width: 120px;
      height: 68px;
      background: var(--theme-elevation-200);
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .video-info {
      flex: 1;
      min-width: 0;

      h4 {
        margin: 0 0 0.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      a {
        font-size: 0.75rem;
        color: var(--theme-elevation-600);

        &:hover {
          color: var(--theme-text);
        }
      }
    }
  }

  &__detail-analysis {
    background: var(--theme-elevation-0);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;

    h4 {
      margin: 0 0 0.75rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--theme-elevation-800);
    }

    .analysis-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--theme-elevation-100);

      &:last-child {
        border-bottom: none;
      }

      .analysis-label {
        font-size: 0.8125rem;
        color: var(--theme-elevation-600);
      }

      .analysis-value {
        font-size: 0.8125rem;
        font-weight: 500;
      }
    }

    .analysis-topics {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
      margin-top: 0.5rem;
    }
  }

  &__detail-flags {
    background: var(--theme-warning-100);
    border: 1px solid var(--theme-warning-300);
    border-radius: 8px;
    padding: 0.875rem;
    margin-bottom: 1.25rem;

    h4 {
      margin: 0 0 0.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--theme-warning-700);
      display: flex;
      align-items: center;
      gap: 0.375rem;
    }

    .flag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .flag-item {
      background: var(--theme-warning-200);
      color: var(--theme-warning-800);
      padding: 0.25rem 0.625rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 500;
    }
  }

  &__detail-response {
    background: var(--theme-success-50);
    border: 1px solid var(--theme-success-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;

    h4 {
      margin: 0 0 0.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--theme-success-700);
    }

    .response-meta {
      font-size: 0.75rem;
      color: var(--theme-success-600);
      margin-bottom: 0.5rem;
    }

    .response-text {
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--theme-text);
      white-space: pre-wrap;
    }
  }

  // Reply Section
  &__reply {
    border-top: 1px solid var(--theme-elevation-150);
    padding: 1rem 1.25rem;
    flex-shrink: 0;
    background: var(--theme-elevation-0);
  }

  &__reply-suggested {
    background: var(--theme-elevation-100);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;

    .suggested-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;

      span {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--theme-elevation-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    }

    .suggested-text {
      font-size: 0.8125rem;
      line-height: 1.4;
      color: var(--theme-elevation-700);
    }
  }

  &__reply-input {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;

    textarea {
      flex: 1;
      min-height: 80px;
      max-height: 200px;
      padding: 0.75rem;
      border: 1px solid var(--theme-elevation-200);
      border-radius: 6px;
      font-size: 0.875rem;
      line-height: 1.5;
      resize: vertical;
      font-family: inherit;

      &:focus {
        outline: none;
        border-color: var(--theme-elevation-500);
      }

      &::placeholder {
        color: var(--theme-elevation-400);
      }
    }
  }

  &__reply-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  // Badges
  &__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25px;

    // Status badges
    &--new {
      background: var(--theme-success-100);
      color: var(--theme-success-700);
    }

    &--in_review {
      background: var(--theme-elevation-200);
      color: var(--theme-elevation-700);
    }

    &--waiting {
      background: var(--theme-warning-100);
      color: var(--theme-warning-700);
    }

    &--replied {
      background: var(--theme-success-100);
      color: var(--theme-success-700);
    }

    &--resolved {
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-600);
    }

    &--archived {
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-500);
    }

    &--spam {
      background: var(--theme-error-100);
      color: var(--theme-error-700);
    }

    // Priority badges
    &--urgent {
      background: var(--theme-error-100);
      color: var(--theme-error-700);
    }

    &--high {
      background: var(--theme-warning-100);
      color: var(--theme-warning-700);
    }

    &--normal {
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-600);
    }

    &--low {
      background: var(--theme-elevation-50);
      color: var(--theme-elevation-500);
    }

    // Sentiment badges
    &--positive {
      background: var(--theme-success-100);
      color: var(--theme-success-700);
    }

    &--neutral {
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-600);
    }

    &--negative {
      background: var(--theme-error-100);
      color: var(--theme-error-700);
    }

    // Topic badges
    &--topic {
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-700);
    }
  }

  // Buttons
  &__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;

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

    &--primary {
      background: var(--theme-elevation-900);
      color: var(--theme-elevation-0);

      &:hover:not(:disabled) {
        background: var(--theme-elevation-800);
      }
    }

    &--secondary {
      background: var(--theme-elevation-100);
      color: var(--theme-text);
      border: 1px solid var(--theme-elevation-200);

      &:hover:not(:disabled) {
        background: var(--theme-elevation-200);
      }
    }

    &--danger {
      background: var(--theme-error-500);
      color: white;

      &:hover:not(:disabled) {
        background: var(--theme-error-600);
      }
    }

    &--success {
      background: var(--theme-success-500);
      color: white;

      &:hover:not(:disabled) {
        background: var(--theme-success-600);
      }
    }

    &--icon {
      padding: 0.5rem;
      min-width: 36px;
      min-height: 36px;
    }

    &--small {
      padding: 0.375rem 0.625rem;
      font-size: 0.75rem;
    }
  }

  // Loading & Empty States
  &__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--theme-elevation-600);

    .loading-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--theme-elevation-200);
      border-top-color: var(--theme-elevation-600);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-bottom: 1rem;
    }

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

  &__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--theme-elevation-600);

    .empty-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      opacity: 0.5;
    }

    h3 {
      margin: 0 0 0.5rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--theme-text);
    }

    p {
      margin: 0;
      font-size: 0.875rem;
    }
  }

  // Mobile Menu Button
  &__mobile-menu-btn {
    display: none;

    @media (max-width: 1024px) {
      display: flex;
    }
  }

  &__mobile-back-btn {
    display: none;

    @media (max-width: 768px) {
      display: flex;
    }
  }

  // Search
  &__search {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--theme-elevation-150);

    input {
      width: 100%;
      padding: 0.625rem 0.875rem;
      border: 1px solid var(--theme-elevation-200);
      border-radius: 6px;
      font-size: 0.875rem;

      &:focus {
        outline: none;
        border-color: var(--theme-elevation-500);
      }

      &::placeholder {
        color: var(--theme-elevation-400);
      }
    }
  }

  // Pagination
  &__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--theme-elevation-150);

    .pagination-info {
      font-size: 0.8125rem;
      color: var(--theme-elevation-600);
      margin: 0 0.5rem;
    }
  }

  // Modal Overlay (for mobile detail view)
  &__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;

    @media (max-width: 768px) {
      &--visible {
        display: block;
      }
    }
  }

  // Quick Actions Menu
  &__quick-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--theme-elevation-50);
    border-radius: 6px;
    margin-bottom: 1rem;

    button {
      flex: 1;
    }
  }

  // Toast Notifications
  &__toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: slideIn 0.3s ease;

    &--success {
      background: var(--theme-success-500);
      color: white;
    }

    &--error {
      background: var(--theme-error-500);
      color: white;
    }

    &--info {
      background: var(--theme-elevation-800);
      color: white;
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
  }
}

// Export Modal
.export-modal {
  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: 1rem;

  &__content {
    background: var(--theme-elevation-0);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--theme-elevation-100);

    h2 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
    }
  }

  &__body {
    padding: 1.25rem;
  }

  &__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--theme-elevation-100);
  }

  &__field {
    margin-bottom: 1.25rem;

    &:last-child {
      margin-bottom: 0;
    }

    label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
    }

    select,
    input {
      width: 100%;
      padding: 0.625rem 0.875rem;
      border: 1px solid var(--theme-elevation-200);
      border-radius: 6px;
      font-size: 0.875rem;

      &:focus {
        outline: none;
        border-color: var(--theme-elevation-500);
      }
    }

    .field-hint {
      font-size: 0.75rem;
      color: var(--theme-elevation-500);
      margin-top: 0.375rem;
    }
  }

  &__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;

    label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      font-weight: 400;
      cursor: pointer;

      input {
        width: auto;
      }
    }
  }
}

// ==============================================
// Sync Status Badge
// ==============================================
.sync-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--theme-elevation-50);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--theme-elevation-600);

  .sync-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-elevation-300);
    transition: background 0.2s ease;

    &.active {
      background: var(--color-success);
      animation: pulse 1.5s ease-in-out infinite;
    }
  }

  .sync-text {
    white-space: nowrap;
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
}

// ==============================================
// AI Buttons (Reply Generation)
// ==============================================
.ai-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;

  .btn-ai-variants {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

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

    svg {
      width: 14px;
      height: 14px;
    }
  }
}

// ==============================================
// AI Reply Suggestions
// ==============================================
.ai-reply-suggestions {
  margin-top: 1.25rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 8px;

  h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-elevation-800);

    svg {
      width: 16px;
      height: 16px;
      color: #6366f1;
    }
  }

  .suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.875rem;
  }

  .suggestion-card {
    background: white;
    border: 1px solid var(--theme-elevation-150);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;

    &:hover {
      border-color: rgba(99, 102, 241, 0.3);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .suggestion-tone {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      background: rgba(99, 102, 241, 0.1);
      color: #6366f1;
      border-radius: 4px;
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-bottom: 0.625rem;
    }

    .suggestion-text {
      font-size: 0.8125rem;
      line-height: 1.5;
      color: var(--theme-elevation-700);
      margin-bottom: 0.75rem;
      white-space: pre-wrap;
    }

    .suggestion-warnings {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
      margin-bottom: 0.75rem;

      .warning-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border-radius: 4px;
        font-size: 0.6875rem;
        font-weight: 500;

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

    .btn-use-suggestion {
      width: 100%;
      padding: 0.5rem 0.75rem;
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-700);
      border: 1px solid var(--theme-elevation-200);
      border-radius: 6px;
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #6366f1;
        color: white;
        border-color: #6366f1;
      }
    }
  }

  .btn-clear-suggestions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--theme-elevation-500);
    border: 1px dashed var(--theme-elevation-200);
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      color: var(--theme-elevation-700);
      border-color: var(--theme-elevation-400);
    }

    svg {
      width: 14px;
      height: 14px;
    }
  }
}
