.side-quick-actions.svelte-1imud23 {
    position: fixed;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    z-index: 45;
  }

  .action-group.svelte-1imud23 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 1.5rem;
    background: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border) / 0.8);
    box-shadow: 0 20px 45px rgb(15 23 42 / 0.1);
    backdrop-filter: blur(12px);
  }

  .action-button.svelte-1imud23 {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.95rem;
    border: 1px solid transparent;
    color: rgb(var(--color-text-secondary));
    background: rgb(var(--color-surface-muted));
    transition: all 0.2s ease;
  }

  .action-button.svelte-1imud23 svg:where(.svelte-1imud23) {
    width: 1.35rem;
    height: 1.35rem;
  }

  .action-button.svelte-1imud23:hover,
  .action-button.svelte-1imud23:focus-visible {
    color: rgb(var(--color-text-primary));
    border-color: rgb(var(--color-border));
    background: rgb(var(--color-surface-elevated));
    box-shadow: 0 10px 20px rgb(15 23 42 / 0.12);
  }

  .action-button.is-active.svelte-1imud23 {
    color: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary) / 0.6);
    background: rgb(var(--color-primary-muted));
    box-shadow: 0 12px 28px rgb(var(--color-primary) / 0.18);
  }

  .action-button.svelte-1imud23:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .intent-primary.svelte-1imud23 {
    color: rgb(var(--color-primary));
  }

  .intent-accent.svelte-1imud23 {
    color: rgb(var(--color-accent));
  }

  .intent-danger.svelte-1imud23 {
    color: rgb(var(--color-danger));
  }

  .intent-neutral.svelte-1imud23 {
    color: rgb(var(--color-text-secondary));
  }

  .sr-only.svelte-1imud23 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  @keyframes svelte-cz9mhf-fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes svelte-cz9mhf-float-1 {
    0%, 100% {
      transform: translateY(0px) translateX(0px);
    }
    33% {
      transform: translateY(-10px) translateX(5px);
    }
    66% {
      transform: translateY(5px) translateX(-3px);
    }
  }
  
  @keyframes svelte-cz9mhf-float-2 {
    0%, 100% {
      transform: translateY(0px) translateX(0px);
    }
    50% {
      transform: translateY(-8px) translateX(-8px);
    }
  }
  
  @keyframes svelte-cz9mhf-float-3 {
    0%, 100% {
      transform: translateY(0px) translateX(0px);
    }
    25% {
      transform: translateY(-6px) translateX(4px);
    }
    75% {
      transform: translateY(4px) translateX(-6px);
    }
  }
  
  .animate-float-1.svelte-cz9mhf {
    animation: svelte-cz9mhf-float-1 3s ease-in-out infinite;
  }
  
  .animate-float-2.svelte-cz9mhf {
    animation: svelte-cz9mhf-float-2 4s ease-in-out infinite;
  }
  
  .animate-float-3.svelte-cz9mhf {
    animation: svelte-cz9mhf-float-3 3.5s ease-in-out infinite;
  }

  /* Styles handled by Tailwind */

  /* Override Flowbite dropdown styles with theme colors */
  .user-dropdown {
    background-color: rgb(var(--color-surface)) !important;
    border-color: rgb(var(--color-border)) !important;
    color: rgb(var(--color-text-primary)) !important;
    min-width: 14rem !important;
  }

  .user-dropdown-header {
    background-color: rgb(var(--color-surface-muted)) !important;
    border-color: rgb(var(--color-border)) !important;
    padding: 0.75rem 1rem !important;
  }

  .user-dropdown-item {
    color: rgb(var(--color-text-secondary)) !important;
    padding: 0.5rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  .user-dropdown-item:hover {
    background-color: rgb(var(--color-surface-elevated)) !important;
    color: rgb(var(--color-text-primary)) !important;
  }

  .user-dropdown-divider {
    border-color: rgb(var(--color-border)) !important;
    margin: 0.5rem 0 !important;
  }

  .user-dropdown-logout {
    color: rgb(var(--color-error)) !important;
    padding: 0.5rem 1rem !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    transition: background-color 0.2s ease !important;
  }

  .user-dropdown-logout:hover {
    background-color: rgb(var(--color-error) / 0.1) !important;
    color: rgb(var(--color-error)) !important;
  }

  header {
    --theme-transition: background-color 0.3s ease, border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .nav-link.svelte-1elxaub {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-text-secondary));
    transition: all 0.2s ease-in-out;
    position: relative;
  }

  .nav-link.svelte-1elxaub:hover {
    color: rgb(var(--color-text-primary));
    background-color: rgba(var(--color-primary), 0.1);
  }

  .nav-link.active.svelte-1elxaub {
    color: rgb(var(--color-text-primary));
    background-color: rgba(var(--color-primary), 0.15);
  }

  .nav-link.active.svelte-1elxaub::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgb(var(--color-primary)), rgb(var(--color-accent)));
    border-radius: 1px;
  }

  .mobile-nav-link.svelte-1elxaub {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-text-secondary));
    background-color: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }

  .mobile-nav-link.svelte-1elxaub:hover {
    background-color: rgba(var(--color-primary), 0.1);
    color: rgb(var(--color-text-primary));
  }

  .mobile-nav-link.active.svelte-1elxaub {
    background-color: rgba(var(--color-primary), 0.15);
    color: rgb(var(--color-text-primary));
  }

  .nav-label.svelte-1elxaub {
    display: inline-block;
  }

  .truncate.svelte-3cy47w {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .skeleton-loader.svelte-frm13r {
    background: linear-gradient(
      90deg,
      rgb(var(--color-surface-muted)) 0%,
      rgb(var(--color-surface-elevated)) 50%,
      rgb(var(--color-surface-muted)) 100%
    );
    background-size: 200% 100%;
    display: block;
  }

  .skeleton-loader.animate.svelte-frm13r {
    animation: svelte-frm13r-skeleton-pulse 1.5s ease-in-out infinite;
  }

  @keyframes svelte-frm13r-skeleton-pulse {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* Variant-specific styles */
  .skeleton-circular.svelte-frm13r {
    aspect-ratio: 1;
  }

  .skeleton-text.svelte-frm13r {
    height: 0.875rem;
  }

  .skeleton-rectangular.svelte-frm13r {
    border-radius: 0;
  }

  .skeleton-rounded.svelte-frm13r {
    border-radius: 0.5rem;
  }

  /* Text container for multi-line skeletons */
  .skeleton-text-container.svelte-frm13r {
    display: flex;
    flex-direction: column;
  }


  /* Better shimmer effect for different shapes */
  .skeleton-circular.animate.svelte-frm13r {
    animation: svelte-frm13r-skeleton-pulse-circular 2s ease-in-out infinite;
  }

  @keyframes svelte-frm13r-skeleton-pulse-circular {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }

  .card-header.svelte-7d5xe5 {
    border-bottom: 1px solid rgb(var(--color-border) / 0.3);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .card-footer.svelte-7d5xe5 {
    border-top: 1px solid rgb(var(--color-border) / 0.3);
    padding-top: 1rem;
    margin-top: 1rem;
  }

  /* Focus styles for interactive cards */
  [role="button"].svelte-7d5xe5:focus-visible,
  a.svelte-7d5xe5:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
  }

  /* Hover effects for interactive variants */
  .cursor-pointer.svelte-7d5xe5:hover:not(.opacity-50) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  /* Loading animation */
  @keyframes svelte-7d5xe5-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin.svelte-7d5xe5 {
    animation: svelte-7d5xe5-spin 1s linear infinite;
  }

  /* Smooth transitions */
  div.svelte-7d5xe5, a.svelte-7d5xe5 {
    transition: all 0.2s ease-in-out;
  }

  /* Better spacing for nested content */
  .card-content.svelte-7d5xe5 > :where(.svelte-7d5xe5):first-child {
    margin-top: 0;
  }

  .card-content.svelte-7d5xe5 > :where(.svelte-7d5xe5):last-child {
    margin-bottom: 0;
  }

  .agent-chat-header.svelte-1lis6uw {
    background: rgb(var(--color-surface));
    border-bottom: 1px solid rgb(var(--color-border));
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  }

  .agent-chat-header.compact.svelte-1lis6uw {
    padding: 0.75rem 1rem;
  }

  .header-main.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .header-left.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }

  .back-button.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.5rem;
    color: rgb(var(--color-text-primary));
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
  }

  .back-button.svelte-1lis6uw:hover {
    background: rgb(var(--color-surface-muted));
    border-color: rgb(var(--color-primary));
    transform: translateX(-2px);
  }

  .chat-status.svelte-1lis6uw {
    display: flex;
    align-items: center;
  }

  .status-indicator.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgb(var(--color-surface-muted));
    color: rgb(var(--color-text-muted));
  }

  .status-indicator.active.svelte-1lis6uw {
    background: rgb(var(--color-success-muted));
    color: rgb(var(--color-success));
  }

  .status-indicator.waiting.svelte-1lis6uw {
    background: rgb(var(--color-warning-muted));
    color: rgb(var(--color-warning));
  }

  .status-dot.svelte-1lis6uw {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
  }

  .customer-info.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
  }

  .customer-avatar.svelte-1lis6uw {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.8));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .avatar-text.svelte-1lis6uw {
    color: white;
    font-weight: 600;
    font-size: 1rem;
  }

  .customer-details.svelte-1lis6uw {
    min-width: 0;
    flex: 1;
  }

  .customer-name.svelte-1lis6uw {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(var(--color-text-primary));
    margin: 0 0 0.25rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .customer-meta.svelte-1lis6uw {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: rgb(var(--color-text-muted));
  }

  .meta-item.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .header-actions.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .action-button.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.5rem;
    color: rgb(var(--color-text-primary));
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .action-button.svelte-1lis6uw:hover {
    background: rgb(var(--color-surface-muted));
    transform: translateY(-1px);
  }

  .action-button.escalate.svelte-1lis6uw {
    border-color: rgb(var(--color-warning));
    color: rgb(var(--color-warning));
  }

  .action-button.escalate.svelte-1lis6uw:hover {
    background: rgb(var(--color-warning-muted));
  }

  .action-button.transfer.svelte-1lis6uw {
    border-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary));
  }

  .action-button.transfer.svelte-1lis6uw:hover {
    background: rgb(var(--color-primary-muted));
  }

  .assignment-info.svelte-1lis6uw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(var(--color-border));
  }

  .assignment-badge.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgb(var(--color-success-muted));
    color: rgb(var(--color-success));
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .assignment-stats.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgb(var(--color-text-muted));
  }

  .stat-item.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .priority-badge.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .priority-badge.high.svelte-1lis6uw {
    background: rgb(var(--color-warning-muted));
    color: rgb(var(--color-warning));
  }

  .priority-badge.urgent.svelte-1lis6uw {
    background: rgb(var(--color-danger-muted));
    color: rgb(var(--color-danger));
  }

  .quick-stats.svelte-1lis6uw {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgb(var(--color-text-muted));
  }

  .quick-stat.svelte-1lis6uw {
    padding: 0.25rem 0.5rem;
    background: rgb(var(--color-surface-muted));
    border-radius: 0.375rem;
  }

  .quick-stat.assigned.svelte-1lis6uw {
    background: rgb(var(--color-success-muted));
    color: rgb(var(--color-success));
    font-weight: 500;
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .agent-chat-header.svelte-1lis6uw {
      padding: 0.75rem;
    }

    .header-main.svelte-1lis6uw {
      gap: 0.75rem;
    }

    .customer-name.svelte-1lis6uw {
      font-size: 1rem;
    }

    .customer-meta.svelte-1lis6uw {
      gap: 0.5rem;
    }

    .meta-item.svelte-1lis6uw {
      font-size: 0.6875rem;
    }

    .header-actions.svelte-1lis6uw {
      gap: 0.25rem;
    }

    .action-button.svelte-1lis6uw {
      padding: 0.5rem;
      min-width: 2.5rem;
      justify-content: center;
    }

    .assignment-info.svelte-1lis6uw {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .assignment-stats.svelte-1lis6uw {
      flex-wrap: wrap;
      gap: 0.5rem;
    }
  }

  /* Compact mode adjustments */
  .compact.svelte-1lis6uw .customer-avatar:where(.svelte-1lis6uw) {
    width: 2rem;
    height: 2rem;
  }

  .compact.svelte-1lis6uw .avatar-text:where(.svelte-1lis6uw) {
    font-size: 0.875rem;
  }

  .compact.svelte-1lis6uw .customer-name:where(.svelte-1lis6uw) {
    font-size: 1rem;
  }

  .compact.svelte-1lis6uw .action-button:where(.svelte-1lis6uw) {
    padding: 0.375rem 0.5rem;
  }

  /* A masked identity is a label, not a value — italics stop an agent reading it as a
     literal number, without inventing a new colour token. */
  .meta-item-masked.svelte-1lis6uw {
    font-style: italic;
    opacity: 0.85;
  }

  .agent-message-input.svelte-1qk9l72 {
    background: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.75rem;
    padding: 1rem;
    position: relative;
  }

  .status-message.svelte-1qk9l72 {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  .status-message.warning.svelte-1qk9l72 {
    background: rgb(var(--color-warning-muted));
    color: rgb(var(--color-warning));
    border: 1px solid rgb(var(--color-warning) / 0.3);
  }

  .status-message.error.svelte-1qk9l72 {
    background: rgb(var(--color-danger-muted));
    color: rgb(var(--color-danger));
    border: 1px solid rgb(var(--color-danger) / 0.3);
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .status-content.svelte-1qk9l72 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
  }

  .status-message.success.svelte-1qk9l72 {
    background: rgb(var(--color-success-muted));
    color: rgb(var(--color-success));
    border: 1px solid rgb(var(--color-success) / 0.3);
  }

  .input-section.svelte-1qk9l72 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .quick-actions.svelte-1qk9l72 {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgb(var(--color-border));
  }

  .action-button.svelte-1qk9l72 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.5rem;
    color: rgb(var(--color-text-primary));
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .action-button.svelte-1qk9l72:hover {
    background: rgb(var(--color-surface-muted));
    border-color: rgb(var(--color-primary));
  }

  .action-button.active.svelte-1qk9l72 {
    background: rgb(var(--color-primary-muted));
    border-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary));
  }

  .message-composer.svelte-1qk9l72 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .input-container.svelte-1qk9l72 {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
  }

  .message-textarea.svelte-1qk9l72 {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.5rem;
    background: rgb(var(--color-surface));
    color: rgb(var(--color-text-primary));
    resize: vertical;
    min-height: 2.5rem;
    max-height: 8rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 0.2s ease;
  }

  .message-textarea.svelte-1qk9l72:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.1);
  }

  .message-textarea.svelte-1qk9l72:disabled {
    background: rgb(var(--color-surface-muted));
    cursor: not-allowed;
  }

  .message-textarea.error.svelte-1qk9l72 {
    border-color: rgb(var(--color-danger));
    box-shadow: 0 0 0 2px rgb(var(--color-danger) / 0.1);
  }

  .send-button.svelte-1qk9l72 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: rgb(var(--color-primary));
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 3rem;
    height: 3rem;
  }

  .send-button.svelte-1qk9l72:hover:not(:disabled) {
    background: rgb(var(--color-primary) / 0.9);
    transform: translateY(-1px);
  }

  .send-button.svelte-1qk9l72:disabled {
    background: rgb(var(--color-surface-muted));
    color: rgb(var(--color-text-muted));
    cursor: not-allowed;
    transform: none;
  }

  .send-button.sending.svelte-1qk9l72 {
    background: rgb(var(--color-primary) / 0.8);
  }

  .message-info.svelte-1qk9l72 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
  }

  .character-count.svelte-1qk9l72 {
    color: rgb(var(--color-text-muted));
    font-weight: 500;
  }

  .character-count.error.svelte-1qk9l72 {
    color: rgb(var(--color-danger));
    font-weight: 600;
  }

  .length-error.svelte-1qk9l72 {
    color: rgb(var(--color-danger));
    font-weight: 500;
  }

  .retry-button.svelte-1qk9l72 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: rgb(var(--color-danger));
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .retry-button.svelte-1qk9l72:hover:not(:disabled) {
    background: rgb(var(--color-danger) / 0.9);
    transform: translateY(-1px);
  }

  .retry-button.svelte-1qk9l72:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .templates-dropdown.svelte-1qk9l72 {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
    z-index: 20;
    max-height: 20rem;
    overflow-y: auto;
  }

  .templates-header.svelte-1qk9l72 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgb(var(--color-border));
  }

  .templates-header.svelte-1qk9l72 h4:where(.svelte-1qk9l72) {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--color-text-primary));
    margin: 0;
  }

  .close-button.svelte-1qk9l72 {
    background: none;
    border: none;
    color: rgb(var(--color-text-muted));
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
  }

  .close-button.svelte-1qk9l72:hover {
    background: rgb(var(--color-surface-muted));
  }

  .templates-grid.svelte-1qk9l72 {
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
  }

  .template-button.svelte-1qk9l72 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
  }

  .template-button.svelte-1qk9l72:hover {
    background: rgb(var(--color-surface-muted));
    border-color: rgb(var(--color-primary));
    transform: translateY(-1px);
  }

  .template-icon.svelte-1qk9l72 {
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .template-content.svelte-1qk9l72 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .template-label.svelte-1qk9l72 {
    font-weight: 600;
    font-size: 0.875rem;
    color: rgb(var(--color-text-primary));
  }

  .template-preview.svelte-1qk9l72 {
    font-size: 0.75rem;
    color: rgb(var(--color-text-muted));
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .loading-spinner.svelte-1qk9l72 {
    animation: svelte-1qk9l72-spin 1s linear infinite;
  }

  @keyframes svelte-1qk9l72-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .input-container.svelte-1qk9l72 {
      flex-direction: column;
      align-items: stretch;
    }

    .send-button.svelte-1qk9l72 {
      align-self: flex-end;
      min-width: 4rem;
    }

    .quick-actions.svelte-1qk9l72 {
      flex-wrap: wrap;
    }

    .templates-grid.svelte-1qk9l72 {
      grid-template-columns: 1fr;
    }

    .template-button.svelte-1qk9l72 {
      padding: 0.625rem;
    }
  }

  /* Ensure modal content is accessible */
  body:has(.fixed.inset-0.z-50) {
    overflow: hidden;
  }

  .media-message.svelte-v0cwfk {
    max-width: 350px;
    margin: 0.5rem 0;
  }
  
  .is-user.svelte-v0cwfk {
    display: flex;
    justify-content: flex-end;
  }
  
  /* Image Styles */
  .image-container.svelte-v0cwfk {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgb(229 231 235);
  }
  
  .image-button.svelte-v0cwfk {
    border: none;
    padding: 0;
    background: none;
    width: 100%;
    cursor: pointer;
    display: block;
  }
  
  .dark .image-container.svelte-v0cwfk {
    background: rgb(55 65 81);
  }
  
  .media-image.svelte-v0cwfk {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .media-image.loaded.svelte-v0cwfk {
    opacity: 1;
  }
  
  .media-image.clickable.svelte-v0cwfk {
    cursor: pointer;
  }
  
  .loading-placeholder.svelte-v0cwfk, .error-placeholder.svelte-v0cwfk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: rgb(107 114 128);
    background: rgb(249 250 251);
    min-height: 150px;
  }
  
  .dark .loading-placeholder.svelte-v0cwfk, 
  .dark .error-placeholder.svelte-v0cwfk {
    background: rgb(31 41 55);
    color: rgb(156 163 175);
  }
  
  .loading-spinner.svelte-v0cwfk {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgb(229 231 235);
    border-top: 2px solid rgb(59 130 246);
    border-radius: 50%;
    animation: svelte-v0cwfk-spin 1s linear infinite;
    margin-bottom: 0.5rem;
  }
  
  @keyframes svelte-v0cwfk-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .error-icon.svelte-v0cwfk, .loading-text.svelte-v0cwfk, .error-text.svelte-v0cwfk {
    font-size: 0.875rem;
  }
  
  .error-icon.svelte-v0cwfk {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    color: rgb(239 68 68);
  }
  
  /* Video Styles */
  .video-container.svelte-v0cwfk {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
  }
  
  .media-video.svelte-v0cwfk {
    width: 100%;
    max-height: 300px;
    border-radius: 0.75rem;
  }
  
  /* Audio Styles */
  .audio-container.svelte-v0cwfk {
    background: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    padding: 1rem;
  }
  
  .dark .audio-container.svelte-v0cwfk {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
  }
  
  .audio-player.svelte-v0cwfk {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .audio-icon.svelte-v0cwfk {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    color: rgb(59 130 246);
  }
  
  .audio-info.svelte-v0cwfk {
    display: flex;
    flex-direction: column;
  }
  
  .audio-label.svelte-v0cwfk {
    font-weight: 500;
    color: rgb(17 24 39);
    font-size: 0.875rem;
  }
  
  .dark .audio-label.svelte-v0cwfk {
    color: rgb(229 231 235);
  }
  
  .audio-element.svelte-v0cwfk {
    width: 100%;
  }
  
  /* Document Styles */
  .document-container.svelte-v0cwfk {
    border-radius: 0.75rem;
    overflow: hidden;
  }
  
  .document-link.svelte-v0cwfk {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  
  .document-preview.svelte-v0cwfk {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    transition: background-color 0.2s;
  }
  
  .dark .document-preview.svelte-v0cwfk {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
  }
  
  .document-link.svelte-v0cwfk:hover .document-preview:where(.svelte-v0cwfk) {
    background: rgb(243 244 246);
  }
  
  .dark .document-link.svelte-v0cwfk:hover .document-preview:where(.svelte-v0cwfk) {
    background: rgb(55 65 81);
  }
  
  .document-icon.svelte-v0cwfk {
    width: 2.5rem;
    height: 2.5rem;
    background: rgb(59 130 246);
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    position: relative;
  }
  
  .document-icon.svelte-v0cwfk svg:where(.svelte-v0cwfk) {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .file-extension.svelte-v0cwfk {
    position: absolute;
    bottom: -0.25rem;
    right: -0.25rem;
    background: rgb(239 68 68);
    color: white;
    font-size: 0.5rem;
    font-weight: bold;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
  }
  
  .document-info.svelte-v0cwfk {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .filename.svelte-v0cwfk {
    font-weight: 500;
    color: rgb(17 24 39);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  
  .dark .filename.svelte-v0cwfk {
    color: rgb(229 231 235);
  }
  
  .download-icon.svelte-v0cwfk {
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(107 114 128);
    margin-left: 0.5rem;
  }
  
  /* Location Styles */
  .location-container.svelte-v0cwfk {
    background: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    padding: 1rem;
  }
  
  .dark .location-container.svelte-v0cwfk {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
  }
  
  .location-preview.svelte-v0cwfk {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .location-icon.svelte-v0cwfk {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    color: rgb(239 68 68);
  }
  
  .location-info.svelte-v0cwfk {
    display: flex;
    flex-direction: column;
  }
  
  .location-label.svelte-v0cwfk {
    font-weight: 500;
    color: rgb(17 24 39);
    font-size: 0.875rem;
  }
  
  .dark .location-label.svelte-v0cwfk {
    color: rgb(229 231 235);
  }
  
  .location-text.svelte-v0cwfk {
    font-size: 0.75rem;
    color: rgb(107 114 128);
  }
  
  .location-link.svelte-v0cwfk {
    display: inline-block;
    color: rgb(59 130 246);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
  }
  
  .location-link.svelte-v0cwfk:hover {
    text-decoration: underline;
  }
  
  /* Unsupported Media Styles */
  .unsupported-container.svelte-v0cwfk {
    background: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    padding: 1rem;
  }
  
  .dark .unsupported-container.svelte-v0cwfk {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
  }
  
  .unsupported-preview.svelte-v0cwfk {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .unsupported-icon.svelte-v0cwfk {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    color: rgb(107 114 128);
  }
  
  .unsupported-info.svelte-v0cwfk {
    display: flex;
    flex-direction: column;
  }
  
  .unsupported-label.svelte-v0cwfk {
    font-weight: 500;
    color: rgb(17 24 39);
    font-size: 0.875rem;
  }
  
  .dark .unsupported-label.svelte-v0cwfk {
    color: rgb(229 231 235);
  }
  
  .unsupported-type.svelte-v0cwfk {
    font-size: 0.75rem;
    color: rgb(107 114 128);
  }
  
  .unsupported-link.svelte-v0cwfk {
    display: inline-block;
    color: rgb(59 130 246);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
  }
  
  .unsupported-link.svelte-v0cwfk:hover {
    text-decoration: underline;
  }
  
  /* Media Info */
  .media-info.svelte-v0cwfk {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    display: flex;
    gap: 0.5rem;
  }
  
  .duration.svelte-v0cwfk, .file-size.svelte-v0cwfk {
    font-size: 0.75rem;
    color: rgb(107 114 128);
  }
  
  /* Lightbox */
  .lightbox-overlay.svelte-v0cwfk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
  }
  
  .lightbox-container.svelte-v0cwfk {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
  }
  
  .lightbox-close.svelte-v0cwfk {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    z-index: 51;
  }
  
  .lightbox-close.svelte-v0cwfk:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  
  .lightbox-close.svelte-v0cwfk svg:where(.svelte-v0cwfk) {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .lightbox-image.svelte-v0cwfk {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
  }
  
  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .media-message.svelte-v0cwfk {
      max-width: 280px;
    }
    
    .media-image.svelte-v0cwfk, .media-video.svelte-v0cwfk {
      max-height: 200px;
    }
    
    .lightbox-container.svelte-v0cwfk {
      max-width: 95vw;
      max-height: 95vh;
    }
  }

  .status-indicator.svelte-tf9ty9 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1;
  }

  .status-indicator.compact.svelte-tf9ty9 {
    margin-top: 0.125rem;
  }

  .status-content.svelte-tf9ty9 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .status-icon.svelte-tf9ty9 {
    font-size: 0.75rem;
    font-weight: 600;
    transition: color 0.2s ease;
  }

  .status-text.svelte-tf9ty9 {
    font-size: 0.6875rem;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .status-time.svelte-tf9ty9 {
    font-size: 0.625rem;
    color: rgb(var(--color-text-muted));
    opacity: 0.8;
  }

  .error-text.svelte-tf9ty9 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: rgb(var(--color-danger));
    font-size: 0.625rem;
    font-weight: 500;
  }

  .retry-button.svelte-tf9ty9 {
    background: none;
    border: none;
    color: rgb(var(--color-danger));
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .retry-button.svelte-tf9ty9:hover {
    background: rgb(var(--color-danger-muted));
    color: rgb(var(--color-danger));
  }

  /* Color classes */
  .text-warning.svelte-tf9ty9 {
    color: rgb(var(--color-warning));
  }

  .text-text-muted.svelte-tf9ty9 {
    color: rgb(var(--color-text-muted));
  }

  .text-info.svelte-tf9ty9 {
    color: rgb(var(--color-info));
  }

  .text-success.svelte-tf9ty9 {
    color: rgb(var(--color-success));
  }

  .text-danger.svelte-tf9ty9 {
    color: rgb(var(--color-danger));
  }

  /* Animation for status changes */
  .status-icon.svelte-tf9ty9,
  .status-text.svelte-tf9ty9 {
    animation: svelte-tf9ty9-statusUpdate 0.3s ease-in-out;
  }

  @keyframes svelte-tf9ty9-statusUpdate {
    0% {
      opacity: 0.5;
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    .status-indicator.svelte-tf9ty9 {
      font-size: 0.6875rem;
      gap: 0.25rem;
    }

    .status-content.svelte-tf9ty9 {
      gap: 0.25rem;
    }

    .status-text.svelte-tf9ty9 {
      font-size: 0.625rem;
    }

    .status-time.svelte-tf9ty9 {
      font-size: 0.5625rem;
    }

    .error-text.svelte-tf9ty9 {
      font-size: 0.5625rem;
    }
  }

  /* Dark mode adjustments */
  @media (prefers-color-scheme: dark) {
    .status-time.svelte-tf9ty9 {
      opacity: 0.7;
    }
  }

  .message-skeleton-container.svelte-lyuz7r {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .message-skeleton-container.compact.svelte-lyuz7r {
    gap: 0.5rem;
  }

  .message-skeleton-wrapper.svelte-lyuz7r {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .skeleton-timestamp.svelte-lyuz7r {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
  }

  .message-skeleton.svelte-lyuz7r {
    display: flex;
    margin-bottom: 0.5rem;
  }

  .message-skeleton.from-user.svelte-lyuz7r {
    justify-content: flex-end;
  }

  .message-skeleton.from-bot.svelte-lyuz7r {
    justify-content: flex-start;
  }

  .message-skeleton-content.svelte-lyuz7r {
    max-width: 75%;
    background: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .from-user.svelte-lyuz7r .message-skeleton-content:where(.svelte-lyuz7r) {
    background: rgb(var(--color-surface-muted));
    border-bottom-right-radius: 0.375rem;
  }

  .from-bot.svelte-lyuz7r .message-skeleton-content:where(.svelte-lyuz7r) {
    border-bottom-left-radius: 0.375rem;
  }

  .skeleton-header.svelte-lyuz7r {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .skeleton-text.svelte-lyuz7r {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .skeleton-status.svelte-lyuz7r {
    display: flex;
    justify-content: flex-end;
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .message-skeleton-content.svelte-lyuz7r {
      max-width: 85%;
      padding: 0.625rem 0.875rem;
    }

    .message-skeleton-container.svelte-lyuz7r {
      padding: 0.75rem;
    }
  }

  /* Compact mode adjustments */
  .compact.svelte-lyuz7r .skeleton-header:where(.svelte-lyuz7r) {
    display: none;
  }

  .compact.svelte-lyuz7r .message-skeleton-content:where(.svelte-lyuz7r) {
    padding: 0.5rem 0.75rem;
  }

  .message-list.svelte-26wxji {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    background: rgb(var(--color-surface));
    border-radius: 0.5rem;
    position: relative;
  }

  .message-list.compact.svelte-26wxji {
    min-height: 300px;
  }

  .loading-state.svelte-26wxji, .empty-state.svelte-26wxji {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    text-align: center;
  }

  .empty-icon.svelte-26wxji {
    width: 4rem;
    height: 4rem;
    background: rgb(var(--color-surface-muted));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .messages-container.svelte-26wxji {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
  }

  .message-wrapper.svelte-26wxji {
    margin-bottom: 1rem;
  }

  .message-wrapper.consecutive.svelte-26wxji {
    margin-bottom: 0.25rem;
  }

  .timestamp-divider.svelte-26wxji {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.5rem 0;
  }

  .timestamp-text.svelte-26wxji {
    background: rgb(var(--color-surface-muted));
    color: rgb(var(--color-text-muted));
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .message-bubble.svelte-26wxji {
    display: flex;
    margin-bottom: 0.5rem;
  }

  .message-bubble.from-user.svelte-26wxji {
    justify-content: flex-end;
  }

  .message-bubble.from-bot.svelte-26wxji {
    justify-content: flex-start;
  }

  .message-content.svelte-26wxji {
    max-width: 75%;
    background: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    position: relative;
  }

  .from-user.svelte-26wxji .message-content:where(.svelte-26wxji) {
    background: rgb(var(--color-primary));
    color: white;
    border-color: rgb(var(--color-primary));
    border-bottom-right-radius: 0.375rem;
  }

  .from-bot.svelte-26wxji .message-content:where(.svelte-26wxji) {
    border-bottom-left-radius: 0.375rem;
  }

  .message-header.svelte-26wxji {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
  }

  .sender-type.svelte-26wxji {
    font-weight: 600;
  }

  .sender-type.user.svelte-26wxji {
    color: rgba(255, 255, 255, 0.9);
  }

  .sender-type.bot.svelte-26wxji {
    color: rgb(var(--color-text-primary));
  }

  .response-time.svelte-26wxji, .confidence.svelte-26wxji {
    color: rgb(var(--color-text-muted));
    font-size: 0.625rem;
  }

  .from-user.svelte-26wxji .response-time:where(.svelte-26wxji),
  .from-user.svelte-26wxji .confidence:where(.svelte-26wxji) {
    color: rgba(255, 255, 255, 0.7);
  }

  .message-text.svelte-26wxji {
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.875rem;
  }

  .message-media.svelte-26wxji {
    margin-bottom: 0.5rem;
  }

  .message-content.svelte-26wxji:has(.message-media:where(.svelte-26wxji)) .message-text:where(.svelte-26wxji) {
    margin-top: 0.5rem;
  }


  .scroll-to-bottom.svelte-26wxji {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgb(var(--color-primary));
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgb(var(--color-primary) / 0.3);
    transition: all 0.2s ease;
    z-index: 10;
  }

  .scroll-to-bottom.svelte-26wxji:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(var(--color-primary) / 0.4);
  }

  .loading-spinner.svelte-26wxji {
    animation: svelte-26wxji-spin 1s linear infinite;
  }

  @keyframes svelte-26wxji-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .message-content.svelte-26wxji {
      max-width: 85%;
      padding: 0.625rem 0.875rem;
    }

    .messages-container.svelte-26wxji {
      padding: 0.75rem;
    }

    .message-header.svelte-26wxji {
      font-size: 0.6875rem;
    }

    .response-time.svelte-26wxji, .confidence.svelte-26wxji {
      font-size: 0.5625rem;
    }
  }

  /* Compact mode adjustments */
  .compact.svelte-26wxji .message-header:where(.svelte-26wxji) {
    display: none;
  }


  .compact.svelte-26wxji .message-content:where(.svelte-26wxji) {
    padding: 0.5rem 0.75rem;
  }

  .compact.svelte-26wxji .timestamp-text:where(.svelte-26wxji) {
    font-size: 0.6875rem;
  }

  .pagination-btn.svelte-f7rahb {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-text-primary));
    transition: all 0.2s ease-in-out;
    cursor: pointer;
  }

  .pagination-btn.svelte-f7rahb:hover:not(:disabled) {
    background-color: rgb(var(--color-surface-elevated));
    box-shadow: var(--shadow-sm);
  }

  .pagination-btn.svelte-f7rahb:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pagination-number.svelte-f7rahb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-text-primary));
    transition: all 0.2s ease-in-out;
    cursor: pointer;
  }

  .pagination-number.svelte-f7rahb:hover:not(:disabled) {
    background-color: rgb(var(--color-surface-elevated));
    box-shadow: var(--shadow-sm);
  }

  .pagination-number.active.svelte-f7rahb {
    background-color: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
    color: rgb(var(--color-text-inverse));
    box-shadow: var(--shadow-sm);
  }

  .pagination-number.svelte-f7rahb:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pagination-select.svelte-f7rahb {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.5rem;
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-text-primary));
    transition: border-color 0.2s ease-in-out;
  }

  .pagination-select.svelte-f7rahb:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.2);
  }

  .pagination-select.svelte-f7rahb:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pagination-input.svelte-f7rahb {
    width: 4rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    text-align: center;
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.375rem;
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-text-primary));
    transition: border-color 0.2s ease-in-out;
  }

  .pagination-input.svelte-f7rahb:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.2);
  }

  .pagination-input.svelte-f7rahb:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .loading-spinner.svelte-f7rahb {
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: svelte-f7rahb-spin 1s linear infinite;
  }

  @keyframes svelte-f7rahb-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .pagination-container.svelte-f7rahb {
      padding: 0.75rem;
    }
    
    .pagination-btn.svelte-f7rahb {
      padding: 0.375rem 0.5rem;
      font-size: 0.8125rem;
    }
    
    .pagination-number.svelte-f7rahb {
      width: 2rem;
      height: 2rem;
      font-size: 0.8125rem;
    }
  }

  /* Hover effects for closable badges */
  button.svelte-16wd81y:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* Better spacing for different content combinations */
  span.svelte-16wd81y:has(svg:where(.svelte-16wd81y):only-child) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Ensure consistent spacing for icon-only buttons */
  button.svelte-1xko78n:has(svg:where(.svelte-1xko78n):only-child),
  a.svelte-1xko78n:has(svg:where(.svelte-1xko78n):only-child) {
    padding: 0;
  }

  /* Smooth loading animation */
  @keyframes svelte-1xko78n-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin.svelte-1xko78n {
    animation: svelte-1xko78n-spin 1s linear infinite;
  }

  /* Focus ring improvements */
  button.svelte-1xko78n:focus-visible,
  a.svelte-1xko78n:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  /* Enhanced hover effects */
  button.svelte-1xko78n:hover:not(:disabled),
  a.svelte-1xko78n:hover:not([aria-disabled="true"]) {
    transform: translateY(-1px);
  }

  button.svelte-1xko78n:active:not(:disabled),
  a.svelte-1xko78n:active:not([aria-disabled="true"]) {
    transform: translateY(0) scale(0.95);
  }

  /* Loading animation */
  @keyframes svelte-138axrz-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin.svelte-138axrz {
    animation: svelte-138axrz-spin 1s linear infinite;
  }

  /* Focus styles */
  .input-group.svelte-138axrz:focus-within .flex:where(.svelte-138axrz) {
    box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0.2);
  }

  /* Placeholder styles */
  input.svelte-138axrz::placeholder {
    opacity: 0.7;
  }

  /* Number input styles */
  input[type="number"].svelte-138axrz::-webkit-outer-spin-button,
  input[type="number"].svelte-138axrz::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"].svelte-138axrz {
    appearance: textfield;
    -moz-appearance: textfield;
  }

  /* Search input styles */
  input[type="search"].svelte-138axrz::-webkit-search-decoration,
  input[type="search"].svelte-138axrz::-webkit-search-cancel-button,
  input[type="search"].svelte-138axrz::-webkit-search-results-button,
  input[type="search"].svelte-138axrz::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  /* Loading animation */
  @keyframes svelte-gjx2ev-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin.svelte-gjx2ev {
    animation: svelte-gjx2ev-spin 1s linear infinite;
  }

  /* Custom scrollbar for dropdown */
  .overflow-auto.svelte-gjx2ev {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-border)) transparent;
  }

  .overflow-auto.svelte-gjx2ev::-webkit-scrollbar {
    width: 6px;
  }

  .overflow-auto.svelte-gjx2ev::-webkit-scrollbar-track {
    background: transparent;
  }

  .overflow-auto.svelte-gjx2ev::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-border));
    border-radius: 3px;
  }

  /* Focus styles */
  .select-group.svelte-gjx2ev:focus-within .relative:where(.svelte-gjx2ev) > div:where(.svelte-gjx2ev):first-child {
    box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0.2);
  }

  /* Remove default select styling */
  select.svelte-gjx2ev {
    background-image: none;
  }

  .filter-bar.svelte-1pxq3hi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    margin-bottom: 1.5rem;
  }

  .filter-bar-header.svelte-1pxq3hi {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .search-wrapper.svelte-1pxq3hi {
    flex: 1;
    min-width: 250px;
  }

  .filter-actions.svelte-1pxq3hi {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .filter-badge.svelte-1pxq3hi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    margin-left: 0.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .filter-bar-content.svelte-1pxq3hi {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
  }

  .filter-grid.svelte-1pxq3hi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .filter-item.svelte-1pxq3hi {
    min-width: 0;
  }

  .active-filters.svelte-1pxq3hi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
  }

  .active-filters-label.svelte-1pxq3hi {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
  }

  .active-filter-chips.svelte-1pxq3hi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .filter-chip.svelte-1pxq3hi {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .chip-remove.svelte-1pxq3hi {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: 9999px;
    transition: background-color 0.2s;
  }

  .chip-remove.svelte-1pxq3hi:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  .rotate-180.svelte-1pxq3hi {
    transform: rotate(180deg);
  }

  @media (max-width: 640px) {
    .filter-bar-header.svelte-1pxq3hi {
      flex-direction: column;
      align-items: stretch;
    }

    .search-wrapper.svelte-1pxq3hi {
      width: 100%;
    }

    .filter-actions.svelte-1pxq3hi {
      justify-content: flex-end;
    }

    .filter-grid.svelte-1pxq3hi {
      grid-template-columns: 1fr;
    }
  }

  .archived-toggle.svelte-1pkbllr {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0.4rem 0.7rem;
    border: 2px solid rgb(var(--color-border, 45 90 79));
    border-radius: 0.75rem;
    background: rgb(var(--color-surface, 17 24 20));
    color: rgb(var(--color-text-primary, 226 232 240));
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .archived-toggle.svelte-1pkbllr input:where(.svelte-1pkbllr) {
    cursor: pointer;
  }

  .line-clamp-2.svelte-khvw4z {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
  }

  .greeting-wrapper.svelte-tyda9u {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }

  .wave-simple.svelte-tyda9u {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
  }

  .wave-emoji.svelte-tyda9u {
    font-size: 1.75rem;
    animation: svelte-tyda9u-wave-hand 1s ease-in-out infinite;
    z-index: 1;
    position: relative;
  }

  .greeting-text-container.svelte-tyda9u {
    flex: 1;
    overflow: hidden;
  }

  .greeting-text.svelte-tyda9u {
    font-size: 2rem;
    font-weight: 700;
    color: rgb(var(--color-text-primary));
    margin: 0;
    line-height: 1.2;
    display: block;
    opacity: 1;
    visibility: visible;
  }

  @supports (-webkit-background-clip: text) {
    .greeting-text.svelte-tyda9u {
      background: linear-gradient(
        135deg,
        rgb(var(--color-text-primary)),
        rgb(var(--color-primary))
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: rgb(var(--color-text-primary));
    }
  }

  .modern-slide-in.svelte-tyda9u {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: svelte-tyda9u-modern-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .modern-slide-in.svelte-tyda9u {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .greeting-placeholder.svelte-tyda9u {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: rgb(var(--color-text-muted));
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .loading-dots.svelte-tyda9u {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  .loading-dots.svelte-tyda9u span:where(.svelte-tyda9u) {
    width: 0.5rem;
    height: 0.5rem;
    background: rgb(var(--color-primary));
    border-radius: 50%;
    animation: svelte-tyda9u-loading-bounce 1.4s ease-in-out infinite both;
  }

  .loading-dots.svelte-tyda9u span:where(.svelte-tyda9u):nth-child(1) {
    animation-delay: -0.32s;
  }
  .loading-dots.svelte-tyda9u span:where(.svelte-tyda9u):nth-child(2) {
    animation-delay: -0.16s;
  }

  @keyframes svelte-tyda9u-wave-hand {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(20deg);
    }
    75% {
      transform: rotate(-10deg);
    }
  }

  @keyframes svelte-tyda9u-modern-entrance {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes svelte-tyda9u-loading-bounce {
    0%,
    80%,
    100% {
      transform: scale(0);
    }
    40% {
      transform: scale(1);
    }
  }

  @media (max-width: 640px) {
    .greeting-wrapper.svelte-tyda9u {
      gap: 0.75rem;
    }

    .wave-emoji.svelte-tyda9u {
      font-size: 1.5rem;
    }

    .greeting-text.svelte-tyda9u {
      font-size: 1.75rem;
    }

    .greeting-placeholder.svelte-tyda9u {
      font-size: 1.75rem;
    }
  }

  [dir='rtl'] .greeting-wrapper.svelte-tyda9u {
    flex-direction: row-reverse;
  }

  [dir='rtl'] .modern-slide-in.svelte-tyda9u {
    animation: svelte-tyda9u-modern-entrance-rtl 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes svelte-tyda9u-modern-entrance-rtl {
    0% {
      opacity: 0;
      transform: translateY(20px) translateX(20px) scale(0.9);
      filter: blur(10px);
    }
    50% {
      opacity: 0.7;
      transform: translateY(-2px) translateX(-2px) scale(1.02);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1);
      filter: blur(0);
    }
  }

  .sr-only.svelte-tyda9u {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .chat-reply-container.svelte-akqnqd {
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.5rem;
    padding: 0.75rem;
  }

  .warning-message.svelte-akqnqd,
  .error-message.svelte-akqnqd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
  }

  .warning-message.svelte-akqnqd {
    background-color: rgb(var(--color-warning-muted));
    color: rgb(var(--color-warning));
  }

  .error-message.svelte-akqnqd {
    background-color: rgb(var(--color-danger-muted));
    color: rgb(var(--color-danger));
    margin-bottom: 0.75rem;
  }

  .error-message.window-error.svelte-akqnqd {
    align-items: flex-start;
    flex-direction: row;
    padding: 0.75rem;
    border: 1px solid rgb(var(--color-danger) / 0.3);
  }

  .error-content.svelte-akqnqd {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .error-title.svelte-akqnqd {
    font-weight: 600;
    font-size: 0.875rem;
  }

  .error-explanation.svelte-akqnqd {
    font-size: 0.75rem;
    opacity: 0.9;
    margin: 0;
  }

  .error-hint.svelte-akqnqd {
    font-size: 0.75rem;
    opacity: 0.8;
    font-style: italic;
    margin: 0.25rem 0 0 0;
  }

  .reply-form.svelte-akqnqd {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .input-container.svelte-akqnqd {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
  }

  .message-input.svelte-akqnqd {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.375rem;
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-text-primary));
    resize: none;
    min-height: 2.25rem;
    max-height: 6rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .message-input.svelte-akqnqd:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.1);
  }

  .message-input.svelte-akqnqd:disabled {
    background-color: rgb(var(--color-surface-muted));
    cursor: not-allowed;
  }

  .send-button.svelte-akqnqd {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: rgb(var(--color-primary));
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 2.5rem;
    height: 2.25rem;
  }

  .send-button.svelte-akqnqd:hover:not(:disabled) {
    background-color: rgb(var(--color-primary) / 0.9);
    transform: translateY(-1px);
  }

  .send-button.svelte-akqnqd:disabled {
    background-color: rgb(var(--color-surface-muted));
    color: rgb(var(--color-text-muted));
    cursor: not-allowed;
    transform: none;
  }

  .send-button.sending.svelte-akqnqd {
    background-color: rgb(var(--color-primary) / 0.8);
  }

  .loading-spinner.svelte-akqnqd {
    animation: svelte-akqnqd-spin 1s linear infinite;
  }

  @keyframes svelte-akqnqd-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Message validation styles */
  .message-input.error.svelte-akqnqd {
    border-color: rgb(var(--color-danger));
    box-shadow: 0 0 0 3px rgb(var(--color-danger) / 0.1);
  }

  .message-info.svelte-akqnqd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
  }

  .character-count.svelte-akqnqd {
    color: rgb(var(--color-text-muted));
    font-weight: 500;
  }

  .character-count.error.svelte-akqnqd {
    color: rgb(var(--color-danger));
    font-weight: 600;
  }

  .length-error.svelte-akqnqd {
    color: rgb(var(--color-danger));
    font-size: 0.75rem;
    font-weight: 500;
  }

  .sr-only.svelte-akqnqd {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  @media (max-width: 768px) {
    .input-container.svelte-akqnqd {
      flex-direction: column;
      align-items: stretch;
    }

    .send-button.svelte-akqnqd {
      align-self: flex-end;
      min-width: 4rem;
    }
  }

  /* Sidebar is now positioned by parent container */
  .chat-sidebar.svelte-fhtucl {
    width: 100%;
    height: 100%;
    background-color: rgb(var(--color-surface));
    overflow-y: auto;
  }
  .sidebar-content.svelte-fhtucl { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .section-title.svelte-fhtucl { font-size: 0.8rem; font-weight: 600; color: rgb(var(--color-text-primary)); display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; width: 100%; }
  .client-card.svelte-fhtucl { display: flex; align-items: flex-start; gap: 0.5rem; }
  .client-avatar.svelte-fhtucl { flex-shrink: 0; }
  .avatar-circle.svelte-fhtucl { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.75rem; }
  .client-details.svelte-fhtucl { flex: 1; min-width: 0; }
  .client-name.svelte-fhtucl { color: rgb(var(--color-text-primary)); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; }
  .contact-item.svelte-fhtucl { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgb(var(--color-text-secondary)); margin-bottom: 0.125rem; }
  .status-grid.svelte-fhtucl { display: flex; flex-direction: column; gap: 0.5rem; }
  .status-item.svelte-fhtucl { display: flex; align-items: center; justify-content: space-between; }
  .status-label.svelte-fhtucl { font-size: 0.75rem; color: rgb(var(--color-text-secondary)); }
  .lead-score.svelte-fhtucl { display: flex; align-items: center; gap: 0.375rem; flex: 1; max-width: 5rem; }
  .score-bar.svelte-fhtucl { flex: 1; height: 0.375rem; background-color: rgb(var(--color-surface-muted)); border-radius: 9999px; overflow: hidden; }
  .score-fill.svelte-fhtucl { height: 100%; background: linear-gradient(90deg, #fbbf24, #10b981); transition: all 0.5s; }
  .score-text.svelte-fhtucl { font-size: 0.625rem; font-weight: 500; color: rgb(var(--color-text-secondary)); }
  .agents-list.svelte-fhtucl { display: flex; flex-direction: column; gap: 0.375rem; }
  .agent-item.svelte-fhtucl { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: 0.375rem; background-color: rgb(var(--color-surface)); transition: background-color 0.2s; }
  .agent-item.svelte-fhtucl:hover { background-color: rgb(var(--color-surface-muted)); }
  .agent-avatar.svelte-fhtucl { width: 1.75rem; height: 1.75rem; background: linear-gradient(135deg, #10b981, #3b82f6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.625rem; flex-shrink: 0; }
  .agent-info.svelte-fhtucl { flex: 1; min-width: 0; }
  .agent-name.svelte-fhtucl { display: block; font-size: 0.75rem; font-weight: 500; color: rgb(var(--color-text-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .agent-role.svelte-fhtucl { display: block; font-size: 0.625rem; color: rgb(var(--color-text-secondary)); }
  .agent-actions.svelte-fhtucl { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
  .agent-status.svelte-fhtucl { width: 0.375rem; height: 0.375rem; border-radius: 50%; flex-shrink: 0; }
  .agent-status.online.svelte-fhtucl { background-color: #10b981; }
  .agent-status.offline.svelte-fhtucl { background-color: #9ca3af; }
  .unassign-btn.svelte-fhtucl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgb(var(--color-text-muted));
    transition: all 0.2s;
    opacity: 0;
  }
  .agent-item.svelte-fhtucl:hover .unassign-btn:where(.svelte-fhtucl) { opacity: 1; }
  .unassign-btn.svelte-fhtucl:hover { background-color: rgb(239 68 68 / 0.1); color: #ef4444; }
  .tags-header.svelte-fhtucl { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; }
  .tags-header.svelte-fhtucl .section-title:where(.svelte-fhtucl) { width: auto; flex: 1; justify-content: flex-start; }
  .tags-container.svelte-fhtucl { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
  .no-tags.svelte-fhtucl { font-size: 0.75rem; color: rgb(var(--color-text-muted)); }
  .add-tag-btn.svelte-fhtucl { font-size: 1.1rem; line-height: 1; background: none; border: none; cursor: pointer; color: rgb(var(--color-text-muted)); padding: 0 0.25rem; border-radius: 0.25rem; transition: all 0.15s; }
  .add-tag-btn.svelte-fhtucl:hover { color: rgb(var(--color-text-primary)); background: rgb(var(--color-surface-muted)); }
  .tag-input.svelte-fhtucl { font-size: 0.75rem; border: 1px dashed rgb(var(--color-border)); border-radius: 9999px; padding: 0.125rem 0.625rem; outline: none; width: 7rem; background: transparent; color: rgb(var(--color-text-primary)); }
  .priority-badge-btn.svelte-fhtucl { background: none; border: none; padding: 0; cursor: pointer; border-radius: 0.375rem; transition: opacity 0.15s, transform 0.1s; }
  .priority-badge-btn.svelte-fhtucl:hover { opacity: 0.8; transform: scale(1.05); }
  .priority-badge-btn.svelte-fhtucl:active { transform: scale(0.97); }

  @media (max-width: 768px) {
    .sidebar-content.svelte-fhtucl { padding: 0.75rem; gap: 0.625rem; }
    .section-title.svelte-fhtucl { font-size: 0.75rem; }
    .client-avatar.svelte-fhtucl .avatar-circle:where(.svelte-fhtucl) { width: 2rem; height: 2rem; font-size: 0.7rem; }
    .client-name.svelte-fhtucl { font-size: 0.8rem; }
    .contact-item.svelte-fhtucl { font-size: 0.7rem; }
    .agent-item.svelte-fhtucl { padding: 0.5rem 0.375rem; }
    .agent-avatar.svelte-fhtucl { width: 1.5rem; height: 1.5rem; font-size: 0.6rem; }
    .agent-name.svelte-fhtucl { font-size: 0.7rem; }
    .agent-role.svelte-fhtucl { font-size: 0.6rem; }
  }

  .chat-header.svelte-1vc4gmw {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    background: rgb(var(--color-surface));
    border-bottom: 1px solid rgb(var(--color-border));
  }

  .header-top.svelte-1vc4gmw {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .back-btn.svelte-1vc4gmw {
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: rgb(var(--color-text-secondary));
    transition: all 0.15s;
  }

  .back-btn.svelte-1vc4gmw:hover {
    background: rgb(var(--color-surface-muted));
    color: rgb(var(--color-text-primary));
  }

  .user-info.svelte-1vc4gmw {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .avatar.svelte-1vc4gmw {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
  }

  .user-details.svelte-1vc4gmw {
    flex: 1;
    min-width: 0;
  }

  .user-name.svelte-1vc4gmw {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(var(--color-text-primary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-contact.svelte-1vc4gmw {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .user-phone.svelte-1vc4gmw {
    font-size: 0.75rem;
    color: rgb(var(--color-text-secondary));
  }

  /* A masked identity is a label, not a value — italics stop it being read as a
     literal phone number, without inventing a new colour token. */
  .user-phone-masked.svelte-1vc4gmw {
    font-style: italic;
    opacity: 0.85;
  }

  .user-email.svelte-1vc4gmw {
    font-size: 0.75rem;
    color: rgb(var(--color-text-secondary));
  }

  .user-email.svelte-1vc4gmw::before {
    content: '•';
    margin-right: 0.5rem;
    color: rgb(var(--color-text-muted));
  }

  .header-meta.svelte-1vc4gmw {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }

  .demo-badge.svelte-1vc4gmw {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    background: rgb(var(--color-warning) / 0.15);
    color: rgb(var(--color-warning));
    border-radius: 0.25rem;
  }

  .status-text.svelte-1vc4gmw {
    font-weight: 600;
  }

  .agents-info.svelte-1vc4gmw {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .agent-badge.svelte-1vc4gmw {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    background: rgb(var(--color-primary) / 0.1);
    color: rgb(var(--color-primary));
    border-radius: 0.25rem;
  }

  .unassigned-badge.svelte-1vc4gmw {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    background: rgb(var(--color-text-muted) / 0.1);
    color: rgb(var(--color-text-secondary));
    border-radius: 0.25rem;
  }

  .message-count.svelte-1vc4gmw {
    font-size: 0.75rem;
    color: rgb(var(--color-text-secondary));
  }

  .menu-btn.svelte-1vc4gmw {
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: rgb(var(--color-text-secondary));
    transition: all 0.15s;
  }

  .menu-btn.svelte-1vc4gmw:hover {
    background: rgb(var(--color-surface-muted));
    color: rgb(var(--color-text-primary));
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .header-meta.svelte-1vc4gmw {
      display: none;
    }
  }

  .message-bubble.svelte-1nkntmy {
    display: flex;
    margin-bottom: 0.75rem;
  }

  .user-message.svelte-1nkntmy {
    justify-content: flex-end;
  }

  .bot-message.svelte-1nkntmy {
    justify-content: flex-start;
  }

  .message-content.svelte-1nkntmy {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    position: relative;
  }

  .user-message.svelte-1nkntmy .message-content:where(.svelte-1nkntmy) {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-bottom-right-radius: 0.25rem;
  }

  .bot-message.svelte-1nkntmy .message-content:where(.svelte-1nkntmy) {
    background-color: rgb(var(--color-surface-muted));
    color: rgb(var(--color-text-primary));
    border-bottom-left-radius: 0.25rem;
  }

  .message-text.svelte-1nkntmy {
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.875rem;
  }

  .message-media.svelte-1nkntmy {
    margin-bottom: 0.5rem;
  }

  .message-content.svelte-1nkntmy:has(.message-media:where(.svelte-1nkntmy)) {
    padding: 0.5rem;
    max-width: 320px;
  }

  .message-meta.svelte-1nkntmy {
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    opacity: 0.7;
    display: flex;
    gap: 0.375rem;
  }

  .user-message.svelte-1nkntmy .message-meta:where(.svelte-1nkntmy) {
    color: rgba(255, 255, 255, 0.8);
  }

  .bot-message.svelte-1nkntmy .message-meta:where(.svelte-1nkntmy) {
    color: rgb(var(--color-text-secondary));
  }

  @media (max-width: 768px) {
    .message-content.svelte-1nkntmy {
      max-width: 85%;
    }
  }

  .messages-container.svelte-gulk7d {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: rgb(var(--color-background));
  }

  .messages-scroll.svelte-gulk7d {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
  }

  .messages-list.svelte-gulk7d {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .load-more-wrap.svelte-gulk7d {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.25rem;
  }

  .load-more-btn.svelte-gulk7d {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid rgb(var(--color-border, 200 200 200));
    background: rgb(var(--color-surface, 255 255 255));
    color: rgb(var(--color-text-secondary, 100 100 100));
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .load-more-btn.svelte-gulk7d:hover:not(:disabled) {
    background: rgb(var(--color-surface-muted, 240 240 240));
    color: rgb(var(--color-text, 30 30 30));
  }

  .load-more-btn.svelte-gulk7d:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .spinner.svelte-gulk7d {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: svelte-gulk7d-spin 0.6s linear infinite;
  }

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

  .empty-state.svelte-gulk7d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
  }

  .chat-page.svelte-ll3pen {
    height: 100vh;
    padding-top: 4rem;
    background: rgb(var(--color-background));
    overflow: hidden;
  }

  .chat-layout.svelte-ll3pen {
    display: flex;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }

  .chat-main.svelte-ll3pen {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgb(var(--color-surface-muted));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.75rem;
    margin: 0.5rem;
    overflow: hidden;
  }

  .chat-messages-area.svelte-ll3pen {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Sidebar - mobile: slide from right */
  .chat-sidebar.svelte-ll3pen {
    position: fixed;
    top: 4rem;
    right: 0;
    width: 320px;
    max-width: 85%;
    height: calc(100vh - 4rem);
    background: rgb(var(--color-surface));
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    border-left: 1px solid rgb(var(--color-border));
  }

  .chat-sidebar.open.svelte-ll3pen {
    transform: translateX(0);
  }

  .backdrop.svelte-ll3pen {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
    z-index: 40;
  }

  /* Desktop: sidebar in grid */
  @media (min-width: 768px) {
    .chat-layout.svelte-ll3pen {
      gap: 0.5rem;
      padding: 0.5rem;
    }

    .chat-main.svelte-ll3pen {
      margin: 0;
    }

    .chat-sidebar.svelte-ll3pen {
      position: static;
      width: 320px;
      max-width: 320px;
      /* height: 100% + overflow-y: auto so the sidebar gets its own internal
         scroll instead of being clipped by .chat-page's overflow: hidden.
         Fixed in v1.1.16.2. */
      height: 100%;
      overflow-y: auto;
      transform: none;
      border-radius: 0.75rem;
      border-left: none;
    }

    .chat-sidebar.open.svelte-ll3pen {
      transform: none;
    }

    .backdrop.svelte-ll3pen {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .chat-layout.svelte-ll3pen {
      gap: 0.75rem;
      padding: 0.75rem;
    }

    .chat-sidebar.svelte-ll3pen {
      width: 380px;
      max-width: 380px;
    }
  }

  @media (min-width: 1280px) {
    .chat-sidebar.svelte-ll3pen {
      width: 420px;
      max-width: 420px;
    }
  }

	/* v1.2.5.23 (N2/N4 build flag): self-hosted Arabic fonts loaded in the editor
	   so the font sample + per-text inline previews render in the real face — the
	   same @font-face set scoped to the public /sc page. woff2 in static/fonts/;
	   all OFL. Tajawal is registered as 'Tajawal Web' so it never auto-applies to
	   any bare-'Tajawal' default stack (mirrors the /sc declarations exactly). */
	@font-face {
		font-family: 'Tajawal Web';
		font-weight: 400;
		font-display: swap;
		src: url('../../../fonts/tajawal-regular.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Tajawal Web';
		font-weight: 700;
		font-display: swap;
		src: url('../../../fonts/tajawal-700.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Cairo';
		font-weight: 400;
		font-display: swap;
		src: url('../../../fonts/cairo-regular.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Cairo';
		font-weight: 700;
		font-display: swap;
		src: url('../../../fonts/cairo-700.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Almarai';
		font-weight: 400;
		font-display: swap;
		src: url('../../../fonts/almarai-regular.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Almarai';
		font-weight: 700;
		font-display: swap;
		src: url('../../../fonts/almarai-700.woff2') format('woff2');
	}
	@font-face {
		font-family: 'IBM Plex Sans Arabic';
		font-weight: 400;
		font-display: swap;
		src: url('../../../fonts/ibm-plex-sans-arabic-regular.woff2') format('woff2');
	}
	@font-face {
		font-family: 'IBM Plex Sans Arabic';
		font-weight: 700;
		font-display: swap;
		src: url('../../../fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Alyamama';
		font-weight: 400;
		font-display: swap;
		src: url('../../../fonts/alyamama-regular.woff2') format('woff2');
	}
	@font-face {
		font-family: 'Alyamama';
		font-weight: 700;
		font-display: swap;
		src: url('../../../fonts/alyamama-700.woff2') format('woff2');
	}

  .theme-selector.svelte-m466h8 {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: rgb(var(--color-surface) / 1);
    border: 1px solid rgb(var(--color-border) / 1);
  }

  .loading-spinner.svelte-1ywjmdk {
    animation: svelte-1ywjmdk-spin 1s linear infinite;
  }

  @keyframes svelte-1ywjmdk-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .ft.svelte-18xzk1o {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .ft-btn.svelte-18xzk1o {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: rgb(var(--color-text-secondary, 148 163 184));
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
  }
  .ft-btn.svelte-18xzk1o:hover {
    color: rgb(var(--color-primary));
  }
  .ft-btn.svelte-18xzk1o svg:where(.svelte-18xzk1o) {
    width: 1rem;
    height: 1rem;
  }
  .ft-pop.svelte-18xzk1o {
    position: absolute;
    top: calc(100% + 0.4rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: max-content;
    max-width: 16rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(var(--color-border));
    background: rgb(var(--color-surface-elevated, 17 24 20));
    color: rgb(var(--color-text-primary, 226 232 240));
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    text-align: start;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  }