.input-with-button {
      position: relative;
    }
    
    .input-with-button input {
      width: 100%;
      padding: 10px 70px 10px 12px; /* space for button */
      background: #151518;
      border: 1px solid #26262b;
      border-radius: 8px;
      color: white;
      font-size: 14px;
    }
    
    #use-username {
      position: absolute;
      right: 6px;
      top: 58%;
      transform: translateY(-50%);
      height: 28px;
      padding: 0 12px;
      border: none;
      border-radius: 6px;
      background: #d0d0d0;
      color: #000;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    
    #use-username:hover {
      background: #e0e0e0;
    }
    
    
    .main-title {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 700;
      color: var(--foreground);
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 1.125rem;
      color: var(--muted-foreground);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.6;
    }


    .suggestions-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
    }

    .suggestion-btn {
      padding: 0.5rem 1rem;
      border-radius: 20px;
      background: hsla(222, 47%, 8%, 0.6);
      backdrop-filter: blur(24px);
      border: 1px solid hsla(222, 30%, 18%, 0.5);
      color: var(--muted-foreground);
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s ease;
      /* font-family: 'Sora', system-ui, sans-serif; */
    }

    .suggestion-btn:hover {
      color: var(--foreground);
      border-color: hsla(199, 89%, 48%, 0.5);
      transform: translateY(-2px) scale(1.05);
    }
    
    #settings-panel label {
      display: block;
      color: #c0b9c0;
      font-size: 14px;
      margin-bottom: 16px;
    }
    
    #settings-panel input,
    #settings-panel select,
    #settings-panel textarea {
      width: 100%;
      margin-top: 6px;
      padding: 8px;
      background: #151518;
      border: none;
      color: white;
      border-radius: 6px;
      font-family: inherit;
      resize: vertical;
    }
    
    #settings-panel textarea {
      min-height: 80px;
    }

    /* Smooth Transitions */
    .search-header,
    .suggestions,
    #results,
    #networkFeed {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .fade-out {
      opacity: 0 !important;
      transform: translateY(-10px) !important;
      pointer-events: none;
    }

    #networkFeedContent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }
    
    
    /* Light Mode */
    [data-theme="light"] {
      --background: #EEE9DF;
      --foreground: #000;
      --card: #C9C1B1;
      --primary: #FFB162;
      --secondary: #A35139;
      --muted: #1B2632;
      --muted-foreground: #2C3B4D;
    }
    
    [data-theme="light"] body {
      background-color: #EEE9DF;
      color: #000;
    }
    
    [data-theme="light"] .bg-grid {
      opacity: 0.05;
    }
    
    [data-theme="light"] .context-badge {
      background: rgba(255, 177, 98, 0.2);
      color: #000;
    }
    
    [data-theme="light"] .logo-text {
      color: #000;
    }
    
    [data-theme="light"] .main-title {
      color: #000;
    }
    
    [data-theme="light"] .suggestion-btn {
      background: rgba(255, 177, 98, 0.1);
      color: #000;
      border-color: rgba(163, 81, 57, 0.3);
    }
    
    [data-theme="light"] .suggestion-btn:hover {
      background: rgba(255, 177, 98, 0.2);
      border-color: #A35139;
    }
    
    [data-theme="light"] .glass {
      background: rgba(201, 193, 177, 0.6);
      border-color: rgba(163, 81, 57, 0.3);
    }
    
    [data-theme="light"] #settings-panel {
      background: #EEE9DF;
      border-left-color: #C9C1B1;
    }
    
    [data-theme="light"] #settings-panel h3 {
      color: #000;
    }
    
    [data-theme="light"] #settings-panel label {
      color: #2C3B4D;
    }
    
    /* [data-theme="light"] #settings-panel input,
    [data-theme="light"] #settings-panel textarea {
      background: #C9C1B1;
      color: #000;
    } */
    
    [data-theme="light"] .segmented button {
      background: #C9C1B1;
      color: #000;
      border-color: #A35139;
    }
    
    [data-theme="light"] .segmented button.active {
      background: #FFB162;
      color: #000;
    }
    
    
    [data-theme="light"] .word {
      color: #FFB162;
    }
    
    [data-theme="light"] .toggle-text {
      color: #000;
    }
    
    [data-theme="light"] .network-person-section h4 {
      color: #000;
    }
    
    [data-theme="light"] .social-posts-section h4 {
      color: #000;
    }

    

    /* Loading */
    
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.95); }
    }

    .loading-card {
  width: 100%;
  max-width: 560px;
  padding: 2rem;
  border-radius: 1rem;
  position: fixed;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}


    .loading-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .researching-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      background: hsla(199, 89%, 48%, 0.1);
      color: var(--primary);
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 1rem;
    }

    .loading-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--foreground);
      margin-bottom: 0.5rem;
    }

    .loading-subtitle {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    /* Loading Steps */
    .loading-steps {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .loading-step {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.75rem;
      border-radius: 0.75rem;
      transition: background 0.3s ease;
      opacity: 0;
      transform: translateX(-20px);
      animation: slideIn 0.3s ease forwards;
    }

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

    .loading-step.active {
      background: hsla(199, 89%, 48%, 0.1);
    }

    .loading-step.completed {
      background: hsla(199, 89%, 48%, 0.05);
    }

    .step-icon {
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .step-icon.pending {
      background: var(--secondary);
      color: var(--muted-foreground);
    }

    .step-icon.active {
      background: var(--primary);
      color: var(--primary-foreground);
      animation: glow-pulse 2s infinite;
    }

    .step-icon.completed {
      background: hsla(199, 89%, 48%, 0.2);
      color: var(--primary);
    }

    @keyframes glow-pulse {
      0%, 100% { box-shadow: 0 0 10px hsla(199, 89%, 48%, 0.3); }
      50% { box-shadow: 0 0 20px hsla(199, 89%, 48%, 0.5); }
    }

    .step-icon.active i {
      animation: spin 2s linear infinite;
    }

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

    .step-content {
      flex: 1;
    }

    .step-label {
      font-size: 0.875rem;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .step-label.pending {
      color: var(--muted-foreground);
    }

    .step-label.active {
      color: var(--foreground);
    }

    .step-label.completed {
      color: var(--primary);
    }

    .step-progress {
      height: 4px;
      background: hsla(199, 89%, 48%, 0.3);
      border-radius: 9999px;
      margin-top: 0.5rem;
      overflow: hidden;
    }

    .step-progress-bar {
      height: 100%;
      width: 0;
      background: var(--primary);
      border-radius: 9999px;
      animation: progress 1.5s linear forwards;
    }

    @keyframes progress {
      to { width: 100%; }
    }



    /* Settings panel must ALWAYS stay dark */
.settings-panel,
.settings-panel * {
  color-scheme: dark;
}


    /* Bento Grid */
    .bento-grid {
      display: grid;
      grid-template-columns: 350px 1fr;
      gap: 1rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    @media (min-width: 1024px) {
      .bento-grid {
        grid-template-columns: repeat(12, 1fr);
      }

      .bento-profile { grid-column: span 5; }
      .bento-synthesis { grid-column: span 7; }
      .bento-posts { grid-column: span 7; }
      .bento-icebreakers { grid-column: span 5; }
    }



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

    .status-text {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    .divider {
      width: 1px;
      height: 16px;
      background: var(--border);
    }

    /* Synthesis Card */
    .synthesis-card {
      position: relative;
      padding: 1.5rem;
      border-radius: 1rem;
      overflow: hidden;
    }

    .synthesis-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, hsla(199, 89%, 48%, 0.05), transparent, hsla(199, 89%, 48%, 0.1));
      pointer-events: none;
    }

    .synthesis-content {
      position: relative;
    }

    .synthesis-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .synthesis-icon {
      padding: 0.5rem;
      border-radius: 0.5rem;
      background: hsla(199, 89%, 48%, 0.1);
      color: var(--primary);
    }

    .synthesis-title-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .synthesis-title {
      font-weight: 600;
      color: var(--foreground);
    }

    .sparkle-icon {
      color: var(--primary);
      animation: wiggle 2s infinite;
    }

    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(10deg); }
      75% { transform: rotate(-10deg); }
    }

    .synthesis-text {
      font-size: 1.125rem;
      color: var(--foreground);
      line-height: 1.6;
      margin-bottom: 0.75rem;
    }

    .synthesis-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding-top: 0.5rem;
    }

    .meta-dot {
      width: 4px;
      height: 4px;
      border-radius: 9999px;
      background: var(--primary);
      animation: pulse 2s infinite;
    }

    .meta-text {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    /* Posts Section */
    .posts-section {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--foreground);
    }

    .title-dot {
      width: 8px;
      height: 8px;
      border-radius: 9999px;
      background: var(--primary);
    }

    /* Context Card (Post) */
    .context-card {
      padding: 1.5rem;
      border-radius: 1rem;
      transition: border-color 0.3s ease;
    }

    .context-card:hover {
      border-color: hsla(199, 89%, 48%, 0.3);
    }

    .context-card:hover .copy-btn {
      opacity: 1;
    }

    .context-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
    }

    .platform-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .platform-icon-wrapper {
      padding: 0.5rem;
      border-radius: 0.5rem;
    }

    .platform-icon-wrapper.linkedin {
      background: hsla(207, 91%, 39%, 0.1);
      color: #0A66C2;
    }

    .platform-icon-wrapper.twitter {
      background: hsla(0, 0%, 100%, 0.1);
      color: var(--foreground);
    }

    .platform-icon-wrapper.news {
      background: hsla(199, 89%, 48%, 0.1);
      color: var(--primary);
    }

    .platform-name {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--foreground);
    }

    .platform-date {
      font-size: 0.75rem;
      color: var(--muted-foreground);
    }

    .copy-btn {
      padding: 0.5rem;
      border-radius: 0.5rem;
      border: none;
      background: transparent;
      cursor: pointer;
      opacity: 0;
      transition: all 0.2s ease;
    }

    .copy-btn:hover {
      background: var(--secondary);
      transform: scale(1.1);
    }

    .copy-btn .check-icon {
      color: var(--primary);
    }

    .copy-btn .copy-icon {
      color: var(--muted-foreground);
    }

    .post-content {
      color: var(--foreground);
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .keyword-highlight {
      background: hsla(199, 89%, 48%, 0.2);
      color: var(--primary);
      padding: 0 0.25rem;
      border-radius: 0.25rem;
      font-weight: 500;
    }

    .engagement-stats {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding-top: 1rem;
      border-top: 1px solid hsla(222, 30%, 18%, 0.5);
    }

    .stat {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      color: var(--muted-foreground);
      font-size: 0.875rem;
    }

    .keywords-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .keyword-tag {
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
      border-radius: 9999px;
      background: var(--secondary);
      color: var(--muted-foreground);
    }

    /* Icebreaker Card */
    .icebreaker-card {
      padding: 1.5rem;
      border-radius: 1rem;
    }

    .icebreaker-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .icebreaker-icon {
      padding: 0.5rem;
      border-radius: 0.5rem;
      background: hsla(199, 89%, 48%, 0.1);
      color: var(--primary);
    }

    .icebreaker-title {
      font-weight: 600;
      color: var(--foreground);
    }

    .icebreaker-subtitle {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    .icebreaker-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .icebreaker-item {
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      margin-bottom: 8px;
      cursor: pointer;
    }
    
    .icebreaker-item:hover {
      background: rgba(255,255,255,0.06);
    }
    

    .icebreaker-item.selected {
      border-color: var(--primary);
      background: hsla(199, 89%, 48%, 0.05);
    }

    .icebreaker-row {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .icebreaker-number {
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .icebreaker-number.default {
      background: var(--secondary);
      color: var(--muted-foreground);
    }

    .icebreaker-number.selected {
      background: var(--primary);
      color: var(--primary-foreground);
    }

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

    .icebreaker-preview {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .icebreaker-text-preview {
      color: var(--muted-foreground);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }

    .icebreaker-full {
      display: none;
    }

    .icebreaker-item.selected .icebreaker-preview {
      display: none;
    }

    .icebreaker-item.selected .icebreaker-full {
      display: block;
    }

    .icebreaker-full-text {
      color: var(--foreground);
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .copy-message-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      border: none;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Sora', system-ui, sans-serif;
    }

    .copy-message-btn.default {
      background: var(--secondary);
      color: var(--foreground);
    }

    .copy-message-btn.default:hover {
      background: hsla(222, 30%, 14%, 0.8);
    }

    .copy-message-btn.copied {
      background: var(--primary);
      color: var(--primary-foreground);
    }


    .suggestions.visible {
      opacity: 1;
      visibility: visible;
    }
    


    
    .setting-group button {
      margin-top: 10px;
    }
    

    .bg-bento-purple {
      background: linear-gradient(135deg,#6d28d9,#9333ea);
    }

    /* Change from vertical (top/bottom) to horizontal (left/right) */
.link-one::before {
  clip-path: circle(0% at 50% 50%); /* Same */
}
.link-one:hover::before {
  clip-path: circle(100% at 50% 50%); /* Same */
}

/* Change the after pseudo-element for horizontal reveal */
.link-one::after {
  clip-path: polygon(
    0% 40%,
    0% 60%,
    0% 60%,
    0% 40%,
    100% 40%,
    100% 60%,
    100% 60%,
    100% 40%
  );
}

.link-one:hover::after {
  clip-path: polygon(
    10% 40%,
    10% 60%,
    35% 60%,
    35% 40%,
    90% 40%,
    90% 60%,
    65% 60%,
    65% 40%
  );
}

/* For link-two - horizontal stripes */
.link-two::before {
  clip-path: polygon(
    -20% 0%,
    -30% 100%,
    -10% 100%,
    0% 0%,
    130% 0%,
    120% 100%,
    100% 100%,
    110% 0%
  );
}

.link-two:hover::before {
  clip-path: polygon(
    10% 0%,
    0% 100%,
    20% 100%,
    30% 0%,
    100% 0%,
    90% 100%,
    70% 100%,
    80% 0%
  );
}

    


.suggestion-img {
  object-fit: contain;
  background-color: white;
}

.loading-card {
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

body.light-mode .settings-panel {
  background: #f5f5f5;
  border-left-color: rgba(0,0,0,0.1);
  color: #000;
}

body.light-mode .settings-panel h3,
body.light-mode .settings-panel label,
body.light-mode .settings-panel .setting-label {
  color: #000;
}


body.light-mode .settings-panel input,
body.light-mode .settings-panel textarea,
body.light-mode .settings-panel select {
  background: #e0e0e0;
  color: #000;
  border-color: #ccc;
}

body.light-mode .theme-btn {
  border-color: #000;
  color: #000;
}

body.light-mode .setting-label{
    background-color: #f5f5f5;
}

body.light-mode .network-toggle{
    color: #000;
}

body.light-mode .network-toggle-label, .theme-btn1{
     background-color: #f5f5f5;
    
}

body.light-mode .toggle-text{
    color: black;
}

body.light-mode .toggle-switch {
    background: rgba(0, 0, 0, 0.8);
}
body.light-mode .toggle-slider {
    background: rgba(0, 0, 0, 0.8);
}

body.light-mode .toggle-switch.active {
    background: var(--primary);
}

body.light-mode .toggle-slider.active {
    background: var(--primary);
}

/* body.light-mode .theme-btn::before {
  background-color: #fff;
} */

/* body.light-mode .theme-btn:hover {
  color: #fff;
} */

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  position: relative;

  background: rgba(255, 255, 255, 0.18);
  color: #d0d0d0;
}

.help-icon:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Tooltip bubble */
.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  right: 90%;
  transform: translateX(0);
  background: #111;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;

  max-width: 220px;
  max-height: 120px;          /* key */
  overflow-y: auto;           /* key */

  white-space: normal;
  word-wrap: break-word;
  text-align: left;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
}


/* Tooltip arrow */
.help-icon::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 19;
}

.help-icon:hover::after,
.help-icon:hover::before {
  opacity: 1;
}

/* Light mode */
body.light-mode .help-icon {
  background: rgba(0, 0, 0, 0.15);
  color: #111;
}

body.light-mode .help-icon:hover {
  background: rgba(0, 0, 0, 0.25);
  color: #000;
}

body.light-mode .help-icon::after {
  background: #222;
}

body.light-mode .help-icon::before {
  border-top-color: #222;
}

body.light-mode .network-news-card {
  background-color: #6171bb !important; /* sky blue */
  color: #fff !important;
}

body.light-mode .settings-btn{
 background-color: #6171bb;
    color: #fff;
}

body.light-mode .network-news-card a,
body.light-mode .network-news-card .meta {
  color: #fff !important;
}

/* Fix 1: Ensure toast-root exists for draft-intro notifications */
/* Add this element to your HTML if missing: <div id="toast-root"></div> */

/* Fix 2: Add spacing between LinkedIn cards */
.linkedin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; /* ADD THIS - spacing between cards */
}

.linkedin-card {
  margin-bottom: 0; /* Remove if you had margin-bottom, use gap instead */
    width: 900px;
    font-size: medium;
}

/* Fix 3: Show full suggestion images without cropping */
.suggestion-img {
  width: 40px;
  height: 40px;
  object-fit: contain; /* Changed from 'cover' to 'contain' */
  background-color: white; /* Shows full image on white bg */
  border-radius: 6px;
}


.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.welcome-modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

.welcome-panel {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.welcome-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s;
}

.welcome-close:hover {
  color: white;
}

.welcome-content {
  text-align: center;
}

.welcome-icon {
  margin-bottom: 1.5rem;
}

.welcome-title {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.welcome-subtitle {
  font-size: 1rem;
  color: #17A2B8;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.welcome-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  text-align: left;
}

.welcome-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.welcome-feature i {
  color: #17A2B8;
}

.welcome-cta {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #17A2B8, #138496);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.welcome-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 162, 184, 0.4);
}

body.light-mode .welcome-panel {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
}

body.light-mode .welcome-title,
body.light-mode .welcome-description,
body.light-mode .welcome-feature {
  color: #000;
}

body.light-mode .welcome-close {
  color: rgba(0, 0, 0, 0.6);
}

body.light-mode .welcome-close:hover {
  color: #000;
}

/* Smooth fade-in for all content */
.fade-in-content {
  animation: smoothFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

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

/* Stagger animation for multiple items */
.stagger-item {
  opacity: 0;
  animation: smoothFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(n+6) { animation-delay: 0.6s; }

/* Smooth image loading */
img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.loaded {
  opacity: 1;
}

/* Skeleton loading for images */
.img-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

body.light-mode .img-skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  background-size: 200% 100%;
}

/* ============================================
   SIMPLE TOAST SYSTEM - CLEAN & WORKING
   ============================================ */

.simple-toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  z-index: 99999;
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 300px;
  text-align: center;
}

.simple-toast.show {
  bottom: 32px;
}

.simple-toast.success {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: rgba(255, 255, 255, 0.2);
}

.simple-toast.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: rgba(255, 255, 255, 0.2);
}

.simple-toast.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: rgba(255, 255, 255, 0.2);
}

body.light-mode .simple-toast {
  background: rgba(255, 255, 255, 0.98);
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light-mode .simple-toast.success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

body.light-mode .simple-toast.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

body.light-mode .simple-toast.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.spinning-icon {
  display: inline-block;
  animation: spin-loader 1s linear infinite;
  margin-right: 8px;
}

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

.draft-btn:disabled {
  pointer-events: none;
}

/* ============================================
   DRAFT INTRO MODAL - MODERN POPUP
   ============================================ */

.draft-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.draft-modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.draft-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.draft-panel {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideUpModal 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@keyframes slideUpModal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.draft-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.draft-header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.draft-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.draft-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.draft-close:hover {
  color: white;
}

.draft-body {
  padding: 1.5rem;
}

.draft-message {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  color: white;
  font-size: 1rem;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.draft-footer {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.draft-copy-btn,
.draft-done-btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  font-family: inherit;
}

.draft-copy-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.draft-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.draft-done-btn {
  background: linear-gradient(135deg, #17A2B8, #138496);
  color: white;
}

.draft-done-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
}

/* Light Mode */
body.light-mode .draft-panel {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
}

body.light-mode .draft-header h3,
body.light-mode .draft-message {
  color: #000;
}

body.light-mode .draft-message {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .draft-close {
  color: rgba(0, 0, 0, 0.6);
}

body.light-mode .draft-close:hover {
  color: #000;
}

body.light-mode .draft-copy-btn {
  background: rgba(0, 0, 0, 0.1);
  color: #000;
  border-color: rgba(0, 0, 0, 0.2);
}

body.light-mode .draft-copy-btn:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* Scrollbar for draft message */
.draft-message::-webkit-scrollbar {
  width: 8px;
}

.draft-message::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.draft-message::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.draft-message::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   SIMPLE TOAST SYSTEM - BOTTOM RIGHT CORNER
   ============================================ */

.simple-toast {
  position: fixed;
  bottom: -100px;
  right: 32px; /* Changed from center to right */
  transform: none; /* Remove translateX */
  background: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 99999;
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 280px;
  max-width: 400px;
  text-align: left;
}

.simple-toast.show {
  bottom: 32px;
}

.simple-toast.success {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: rgba(255, 255, 255, 0.2);
}

.simple-toast.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: rgba(255, 255, 255, 0.2);
}

.simple-toast.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: rgba(255, 255, 255, 0.2);
}

body.light-mode .simple-toast {
  background: rgba(255, 255, 255, 0.98);
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light-mode .simple-toast.success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

body.light-mode .simple-toast.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

body.light-mode .simple-toast.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .simple-toast {
    right: 16px;
    left: 16px;
    min-width: auto;
  }
}

#demo-indicator {
  position: fixed;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 180, 0, 0.15);
  color: #ffb400;
  border: 1px solid rgba(255, 180, 0, 0.35);
  z-index: 9999;
}
/* Profile card light-only override */
.profile-card.profile-light {
  background: #C9C1B1;
  color: #000;
}


.meta{
    overflow: hidden;
}