/* ================================== */
/* AskCard Theme - Complete CSS Bundle */
/* ================================== */

/* ================================== */
/* 1. GLOBAL / BASE STYLES           */
/* ================================== */

/* Dashboard Card Selection and Blur Effects */
.dashboard-card {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-card.selected {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border: 2px solid #007cba;
}

.dashboard-card .content-blur {
    filter: blur(3px);
    transition: filter 0.3s ease;
    user-select: none;
    pointer-events: none;
}

.dashboard-card.selected .content-blur {
    filter: blur(0px);
    user-select: auto;
    pointer-events: auto;
}

.dashboard-card .blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.dashboard-card.selected .blur-overlay {
    opacity: 0;
}

.dark-mode .dashboard-card .blur-overlay {
    background: rgba(0, 0, 0, 0.1);
}

/* Card of the Day specific styling */
.card-of-day-section .dashboard-card {
    border-radius: 12px;
    overflow: hidden;
}

.card-of-day-section .dashboard-card .headblock {
    position: relative;
    z-index: 2;
}

.card-of-day-section .dashboard-card .describeblock {
    position: relative;
    z-index: 2;
}

.card-of-day-section .dashboard-card ul {
    position: relative;
    z-index: 2;
}

/* Life Aspects section styling */
.life-aspects-section .dashboard-card {
    border-radius: 12px;
    overflow: hidden;
}

.life-aspects-section .dashboard-card .headblock {
    position: relative;
    z-index: 2;
}

.life-aspects-section .dashboard-card .describeblock {
    position: relative;
    z-index: 2;
}

.life-aspects-section .dashboard-card .content-dashboard {
    position: relative;
    z-index: 2;
}

/* Daily Actions section styling */
.daily-actions-section .dashboard-card {
    border-radius: 12px;
    overflow: hidden;
}

.daily-actions-section .dashboard-card .headblock {
    position: relative;
    z-index: 2;
}

.daily-actions-section .dashboard-card .describeblock {
    position: relative;
    z-index: 2;
}

.daily-actions-section .dashboard-card .content-dashboard {
    position: relative;
    z-index: 2;
}
/* ================================== */

/* Animation Keyframes */

  

  

  

  

  

  

  

  
  /* ================================== */
  /* 6. FONT SIZE CONTROLS             */
  /* ================================== */
  
  /* Small Font Size */
  #chatask[data-font-size="small"] .welcome-section h3 {
      font-size: 1rem; /* 16px */
  }
  
  #chatask[data-font-size="small"] .welcome-section .examples {
      font-size: 0.6875rem; /* 11px */
  }
  
  #chatask[data-font-size="small"] .welcome-section .close-btn {
      font-size: 12px;
  }
  
  #chatask[data-font-size="small"] .welcome-section .welcome-text {
      font-size: 0.75rem; /* 12px */
  }
  
  #chatask[data-font-size="small"] .welcome-section .welcome-list {
      font-size: 0.6875rem; /* 11px */
  }
  
  #chatask[data-font-size="small"] #how-to-use-section h3 {
      font-size: 1rem; /* 16px */
  }
  
  #chatask[data-font-size="small"] #how-to-use-section .how-to-use-examples {
      font-size: 0.6875rem; /* 11px */
  }
  
  #chatask[data-font-size="small"] #how-to-use-section .how-to-use-close-btn {
      font-size: 12px;
  }
  
  #chatask[data-font-size="small"] #whats-new-section .welcome-text {
      font-size: 0.75rem; /* 12px */
  }
  
  #chatask[data-font-size="small"] #whats-new-section .welcome-list {
      font-size: 0.6875rem; /* 11px */
  }
  
  #chatask[data-font-size="small"] #whats-new-section .whats-new-close-btn {
      font-size: 12px;
  }
  
  /* Medium Font Size (Default) */
  #chatask[data-font-size="medium"] .welcome-section h3 {
      font-size: var(--font-size-lg); /* 1.1rem / 17.6px */
  }
  
  #chatask[data-font-size="medium"] .welcome-section .examples {
      font-size: var(--font-size-sm); /* 0.75rem / 12px */
  }
  
  #chatask[data-font-size="medium"] .welcome-section .close-btn {
      font-size: 14px;
  }
  
  #chatask[data-font-size="medium"] .welcome-section .welcome-text {
      font-size: 0.875rem; /* 14px */
  }
  
  #chatask[data-font-size="medium"] .welcome-section .welcome-list {
      font-size: var(--font-size-sm); /* 0.75rem / 12px */
  }
  
  #chatask[data-font-size="medium"] #how-to-use-section h3 {
      font-size: var(--font-size-lg); /* 1.1rem / 17.6px */
  }
  
  #chatask[data-font-size="medium"] #how-to-use-section .how-to-use-examples {
      font-size: var(--font-size-sm); /* 0.75rem / 12px */
  }
  
  #chatask[data-font-size="medium"] #how-to-use-section .how-to-use-close-btn {
      font-size: 14px;
  }
  
  #chatask[data-font-size="medium"] #whats-new-section .welcome-text {
      font-size: 0.875rem; /* 14px */
  }
  
  #chatask[data-font-size="medium"] #whats-new-section .welcome-list {
      font-size: var(--font-size-sm); /* 0.75rem / 12px */
  }
  
  #chatask[data-font-size="medium"] #whats-new-section .whats-new-close-btn {
      font-size: 14px;
  }
  
  /* Large Font Size */
  #chatask[data-font-size="large"] .welcome-section h3 {
      font-size: 1.25rem; /* 20px */
  }
  
  #chatask[data-font-size="large"] .welcome-section .examples {
      font-size: 0.9375rem; /* 15px */
  }
  
  #chatask[data-font-size="large"] .welcome-section .close-btn {
      font-size: 16px;
  }
  
  #chatask[data-font-size="large"] .welcome-section .welcome-text {
      font-size: 1rem; /* 16px */
  }
  
  #chatask[data-font-size="large"] .welcome-section .welcome-list {
      font-size: 0.9375rem; /* 15px */
  }
  
  #chatask[data-font-size="large"] #how-to-use-section h3 {
      font-size: 1.25rem; /* 20px */
  }
  
  #chatask[data-font-size="large"] #how-to-use-section .how-to-use-examples {
      font-size: 0.9375rem; /* 15px */
  }
  
  #chatask[data-font-size="large"] #how-to-use-section .how-to-use-close-btn {
      font-size: 16px;
  }
  
  #chatask[data-font-size="large"] #whats-new-section .welcome-text {
      font-size: 1rem; /* 16px */
  }
  
  #chatask[data-font-size="large"] #whats-new-section .welcome-list {
      font-size: 0.9375rem; /* 15px */
  }
  
  #chatask[data-font-size="large"] #whats-new-section .whats-new-close-btn {
      font-size: 16px;
  }
  
  /* ================================== */
  /* 7. WELCOME SECTIONS               */
  /* ================================== */
  
  /* Welcome Section Base Styles */
  .welcome-section {
      margin: 20px 0;
      padding: 16px;
      border-radius: var(--radius-lg);
      position: relative;
  }
  
  .welcome-section h3 {
      margin: 0 0 12px 0;
      font-weight: var(--font-weight-medium);
  }
  
  .welcome-section .examples {
      display: grid;
      gap: 8px;
  }
  
  .welcome-section .welcome-text {
      margin: 8px 0 12px 0;
      font-weight: var(--font-weight-medium);
      color: var(--text-heading);
  }
  
  .welcome-section .welcome-list {
      margin: 0;
      padding-left: 20px;
      font-size: var(--font-size-sm);
      color: var(--text-primary);
  }
  
  .welcome-section .welcome-list li {
      margin: 6px 0;
  }
  .welcome-message {
    padding: 16px;
    }

  
  /* Close Button Styles */
  .welcome-section .close-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: all 0.2s ease;
      z-index: 10;
      font-size: 14px;
  }
  
  .welcome-section .close-btn:hover {
      transform: scale(1.1);
      opacity: 1;
  }
  
  /* How to Use Section Specific Styles */
  #how-to-use-section {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
  }
  
  #how-to-use-section .close-btn {
      background: rgba(255, 255, 255, 0.2);
      color: white;
  }
  
  #how-to-use-section .close-btn:hover {
      background: rgba(255, 255, 255, 0.3);
  }
  
  /* What's New Section Specific Styles */
  #whats-new-section {
      background: var(--bg-tertiary);
      border-left: 4px solid var(--purple-medium);
  }
  
  #whats-new-section .close-btn {
      background: rgba(0, 0, 0, 0.1);
      color: var(--text-primary);
  }
  
  #whats-new-section .close-btn:hover {
      background: rgba(0, 0, 0, 0.2);
  }
  
  /* Welcome Message Header Section */
  .welcome-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
  }
  
  .welcome-header .welcome-icon {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .welcome-header .welcome-icon img {
      width: 64px;
      height: 64px;
      border-radius: var(--radius-md);
      background: white;
      padding: 12px;
      box-shadow: var(--shadow-md);
  }
  
  .welcome-header .welcome-content {
      text-align: center;
  }
  
  .welcome-header .welcome-greeting {
      margin: 0 0 8px 0;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-bold);
      color: var(--text-heading);
  }
  
  .welcome-header .welcome-subtitle {
      margin: 0;
      font-size: var(--font-size-md);
      color: var(--text-primary);
      font-weight: var(--font-weight-medium);
  }
  
  .welcome-subtitle {
      margin-bottom: 20px;
      color: var(--text-primary);
      font-size: var(--font-size-md);
  }
  
  /* ================================== */
  /* 8. ASKCARD THEME SPECIFIC STYLES  */
  /* ================================== */
  
  /* AskCard theme card selection styling */
  .askcard-theme-card-selection .card-option {
      transition: all 0.3s ease;
      border: 2px solid transparent;
  }
  
  .askcard-theme-card-selection .card-option:hover {
      border-color: #667eea;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  }
  
  .askcard-theme-card-selection .card-option.selected {
      border-color: #667eea;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
  }
  
  .askcard-theme-card-selection .card-selection-header {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
      border: 1px solid rgba(102, 126, 234, 0.2);
  }
  
  /* AskCard theme welcome message styling */
  .askcard-theme-welcome .welcome-header {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
      border: 1px solid rgba(102, 126, 234, 0.2);
  }
  
  .askcard-theme-welcome .welcome-subtitle {
      color: var(--text-primary);
      font-size: var(--font-size-md);
  }
  
  /* ================================== */
  /* 9. RBAC USAGE DISPLAY STYLES      */
  /* ================================== */
  
  .usage-display {
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 10px;
      margin: 10px 0;
      font-size: 12px;
  }
  
  .dark-mode .usage-display {
      background: #2a2a2a;
      border-color: #444;
      color: #e0e0e0;
  }
  
  .usage-text {
      display: block;
      font-weight: 600;
      color: #1d2327;
      margin-bottom: 5px;
  }
  
  .dark-mode .usage-text {
      color: #e0e0e0;
  }
  
  .usage-bar {
      width: 100%;
      height: 6px;
      background: #e0e0e0;
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 5px;
  }
  
  .dark-mode .usage-bar {
      background: #444;
  }
  
  .usage-progress {
      height: 100%;
      background: linear-gradient(90deg, #46b450 0%, #ffb900 70%, #dc3232 90%);
      transition: width 0.3s ease;
  }
  
  .usage-remaining {
      display: block;
      font-size: 11px;
      color: #646970;
  }
  
  .dark-mode .usage-remaining {
      color: #a0a0a0;
  }
  
  /* Usage warning states */
  .usage-display.warning {
      border-color: #ffb900;
      background: #fffbf0;
  }
  
  .dark-mode .usage-display.warning {
      background: #2a2a1a;
      border-color: #ffb900;
  }
  
  .usage-display.danger {
      border-color: #dc3232;
      background: #fff0f0;
  }
  
  .dark-mode .usage-display.danger {
      background: #2a1a1a;
      border-color: #dc3232;
  }
  
  .usage-display.limit-reached {
      border-color: #dc3232;
      background: #fff0f0;
      animation: pulse 2s infinite;
  }
  
  .dark-mode .usage-display.limit-reached {
      background: #2a1a1a;
      border-color: #dc3232;
  }
  
  .usage-info-container {
      margin: 10px 0;
  }
  
  .usage-info-container .usage-toggle {
      background: none;
      border: none;
      color: var(--text-primary);
      cursor: pointer;
      font-size: 12px;
      text-decoration: underline;
      padding: 0;
      margin: 0;
  }
  
  .usage-info-container .usage-toggle:hover {
      color: var(--accent-color);
  }
  
  .dark-mode .usage-info-container .usage-toggle:hover {
      color: var(--accent-color);
  }
  
  .usage-details {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }
  
  .usage-details.expanded {
      max-height: 200px;
  }
  
  .usage-details .usage-breakdown {
      margin-top: 10px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
  }
  
  .dark-mode .usage-details .usage-breakdown {
      background: rgba(255, 255, 255, 0.05);
  }
  
  .usage-breakdown .usage-item {
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
      font-size: 11px;
  }
  
  .usage-breakdown .usage-item .service {
      font-weight: 500;
  }
  
  .usage-breakdown .usage-item .count {
      color: var(--text-secondary);
      font-weight: 600;
  }
  
  /* ================================== */
  /* 10. CHAT INPUT & FOOTER STYLES    */
  /* ================================== */
  
  .chat-footer, .chat-input, .chat-input-container {
      transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .chat-footer.hidden, .chat-input.hidden, .chat-input-container.hidden {
      transform: translateY(100%);
      opacity: 0;
      pointer-events: none;
  }
  
  .chat-footer.visible, .chat-input.visible, .chat-input-container.visible {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
  }
  
  .chat-footer {
      margin-top: auto;
  }
  
  .chat-input-container {
      position: relative;
  }
  
  .chat-input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--border-color, #e0e0e0);
      border-radius: var(--radius-lg, 12px);
      font-size: var(--font-size-base, 14px);
      resize: none;
      min-height: 48px;
      max-height: 120px;
      background: var(--bg-primary, #fff);
      color: var(--text-primary, #333);
  }
  
  .chat-footer.hidden {
      transform: translateY(100%);
  }
  
  .chat-input-container.hidden {
      transform: translateY(100%);
  }
  
  .chat-input.hidden {
      transform: translateY(100%);
  }
  
  .char-count {
      position: absolute;
      bottom: 8px;
      right: 8px;
      font-size: 11px;
      color: var(--text-secondary, #666);
      background: var(--bg-primary, #fff);
      padding: 2px 6px;
      border-radius: 10px;
      pointer-events: none;
  }
  
  .char-count.warning {
      color: #ffb900;
  }
  
  .char-count.danger {
      color: #dc3232;
  }
  
  .message-wrapper {
      opacity: 0;
      animation: fadeInUp 0.5s ease forwards;
  }
  
  .message-wrapper.visible {
      opacity: 1;
  }
  
  /* ================================== */
  /* 11. RESPONSIVE DESIGN             */
  /* ================================== */
  
  @media (max-width: 768px) {
      .chat-container {
          padding: 16px;
      }
      
      .welcome-header {
          flex-direction: column;
          text-align: center;
      }
      
      .welcome-icon img {
          width: 48px;
          height: 48px;
      }
      
      .welcome-greeting {
          font-size: 1.2rem;
      }
      
      .welcome-subtitle {
          font-size: 0.875rem;
      }
      
      .welcome-section {
          padding: 12px;
      }
      
      .welcome-section .close-btn {
          width: 20px;
          height: 20px;
          font-size: 12px;
      }
      
      .usage-display {
          padding: 8px;
          font-size: 11px;
      }
      
      .usage-text {
          font-size: 11px;
      }
      
      .usage-remaining {
          font-size: 10px;
      }
      
      /* Font size responsive adjustments */
      #chatask[data-font-size="small"] .welcome-section h3 {
          font-size: 0.9rem; /* 14.4px */
      }
      
      #chatask[data-font-size="small"] .welcome-section .examples {
          font-size: 0.625rem; /* 10px */
      }
      
      #chatask[data-font-size="small"] .welcome-section .welcome-text {
          font-size: 0.6875rem; /* 11px */
      }
      
      #chatask[data-font-size="small"] .welcome-section .welcome-list {
          font-size: 0.625rem; /* 10px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section h3 {
          font-size: 1rem; /* 16px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section .examples {
          font-size: 0.6875rem; /* 11px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section .welcome-text {
          font-size: 0.8125rem; /* 13px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section .welcome-list {
          font-size: 0.6875rem; /* 11px */
      }
      
      #chatask[data-font-size="large"] .welcome-section h3 {
          font-size: 1.125rem; /* 18px */
      }
      
      #chatask[data-font-size="large"] .welcome-section .examples {
          font-size: 0.8125rem; /* 13px */
      }
      
      #chatask[data-font-size="large"] .welcome-section .welcome-text {
          font-size: 0.9375rem; /* 15px */
      }
      
      #chatask[data-font-size="large"] .welcome-section .welcome-list {
          font-size: 0.8125rem; /* 13px */
      }
  }
  
  @media (max-width: 480px) {
      .chat-container {
          padding: 12px;
      }
      
      .welcome-message {
          padding: 0px;
      }
      
      .welcome-section {
          padding: 12px;
      }
      
      .welcome-header .welcome-icon img {
          width: 40px;
          height: 40px;
      }
      
      .welcome-section .close-btn {
          width: 18px;
          height: 18px;
          font-size: 10px;
      }
      
      .usage-display {
          padding: 6px;
          font-size: 10px;
      }
      
      .usage-bar {
          height: 4px;
      }
      
      .usage-breakdown .usage-item {
          font-size: 10px;
      }
      
      /* Font size responsive adjustments */
      #chatask[data-font-size="small"] .welcome-section h3 {
          font-size: 0.875rem; /* 14px */
      }
      
      #chatask[data-font-size="small"] .welcome-section .examples {
          font-size: 0.625rem; /* 10px */
      }
      
      #chatask[data-font-size="small"] .welcome-section .welcome-text {
          font-size: 0.6875rem; /* 11px */
      }
      
      #chatask[data-font-size="small"] .welcome-section .welcome-list {
          font-size: 0.625rem; /* 10px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section h3 {
          font-size: 0.9375rem; /* 15px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section .examples {
          font-size: 0.6875rem; /* 11px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section .welcome-text {
          font-size: 0.75rem; /* 12px */
      }
      
      #chatask[data-font-size="medium"] .welcome-section .welcome-list {
          font-size: 0.6875rem; /* 11px */
      }
      
      #chatask[data-font-size="large"] .welcome-section h3 {
          font-size: 1.0625rem; /* 17px */
      }
      
      #chatask[data-font-size="large"] .welcome-section .examples {
          font-size: 0.8125rem; /* 13px */
      }
      
      #chatask[data-font-size="large"] .welcome-section .welcome-text {
          font-size: 0.875rem; /* 14px */
      }
      
      #chatask[data-font-size="large"] .welcome-section .welcome-list {
          font-size: 0.8125rem; /* 13px */
      }
  }
  
  /* ================================== */
  /* 12. ACCESSIBILITY & INTERACTIONS  */
  /* ================================== */
  
  .welcome-section .close-btn:focus {
      outline: 2px solid var(--accent-color, #667eea);
      outline-offset: 2px;
  }
  
  .usage-info-container .usage-toggle:focus {
      outline: 2px solid var(--accent-color, #667eea);
      outline-offset: 2px;
  }
  
  /* Reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
      .welcome-section {
          animation: none;
      }
      
      .welcome-section .close-btn {
          transition: none;
      }
      
      .welcome-section .close-btn:hover {
          transform: none;
      }
      
      .usage-progress {
          transition: none;
      }
      
      .usage-details {
          transition: none;
      }
      
      .usage-display.limit-reached {
          animation: none;
      }
  }
  
  /* Touch device optimizations */
  @media (hover: none) and (pointer: coarse) {
      .close-btn:hover {
          transform: none;
      }
      
      .welcome-section .close-btn:active {
          transform: scale(0.95);
      }
  }
  
  /* ================================== */
  /* 13. ANIMATIONS & TRANSITIONS      */
  /* ================================== */
  
  .welcome-section {
      animation: fadeInUp 0.6s ease forwards;
  }
  
  .welcome-section:nth-child(1) { animation-delay: 0.1s; }
  .welcome-section:nth-child(2) { animation-delay: 0.2s; }
  .welcome-section:nth-child(3) { animation-delay: 0.3s; } 