/* ================================== */
/* Global / Base Styles             */
/* ================================== */

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

body {
    overflow-x: hidden;
    position: fixed;
    width: 100%;
  }
  
  #container {
    overflow-x: hidden;
    touch-action: pan-y pinch-zoom;
  }
  
  /* ================================== */
  /* Page Layout                      */
  /* ================================== */
  .entry-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow-y: auto;
    position: relative;
    scroll-behavior: smooth;
    background-color: var(--bg-primary, #fff); /* Default background */
  }
  
  /* Background Style Implementations */
  body.background-style-minimal .entry-content {
    /* Minimal: Relies on the base --bg-primary or a super subtle light texture if uncommented */
    /* background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="rgba(255,255,255,0.02)"/></svg>'); */
    background-color: var(--bg-primary, #fff);
  }
  
  body.background-style-celestial .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="10" cy="10" r="1" fill="rgba(100,100,200,0.25)"/><circle cx="30" cy="30" r="0.5" fill="rgba(120,100,220,0.2)"/><circle cx="40" cy="15" r="0.8" fill="rgba(90,80,180,0.22)"/><circle cx="15" cy="40" r="0.7" fill="rgba(110,90,190,0.21)"/></svg>');
    background-color: var(--bg-primary, #fff);
  }
  
  body.background-style-mystic .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="2" fill="rgba(160,160,200,0.2)"/><path d="M30 5 L30 15 M30 45 L30 55 M5 30 L15 30 M45 30 L55 30 M12 12 L19 19 M41 41 L48 48 M12 48 L19 41 M41 19 L48 12" stroke="rgba(120,120,180,0.15)" stroke-width="1" stroke-linecap="round"/><path d="M34 30 C34 32.2 32.2 34 30 34 C27.8 34 26 32.2 26 30 C26 27.8 27.8 26 30 26 C30.5 26 31 26.1 31.5 26.3 C30.6 27 30 28 30 29.2 C30 31 31.4 32.4 33.2 32.4 C33.5 32.4 33.8 32.3 34 32.2 C34 31.5 34 30.7 34 30 Z" fill="rgba(140,140,220,0.25)"/></svg>');
    background-color: var(--bg-primary, #fff);
  }
  
  body.background-style-vintage .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><line x1="0" y1="10" x2="20" y2="10" stroke="rgba(160,160,160,0.2)" stroke-width="1"/><line x1="10" y1="0" x2="10" y2="20" stroke="rgba(160,160,160,0.2)" stroke-width="1"/></svg>');
    background-color: var(--bg-primary, #fff);
  }
  
  body.background-style-nature .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(100,170,120,0.2)" transform="rotate(10 20 20)"/><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(80,160,100,0.15)" transform="translate(15 10) scale(0.7) rotate(-25 20 20)"/></svg>');
    background-color: var(--bg-primary, #fff);
  }
  
  /* Dark Mode Background Styles */
  .dark-mode.background-style-minimal .entry-content {
    /* Minimal: Relies mostly on the base --bg-primary dark color */
    background-color: var(--bg-primary, #1a1a1a);
  }
  
  .dark-mode.background-style-celestial .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="10" cy="10" r="1" fill="rgba(200,200,255,0.15)"/><circle cx="30" cy="30" r="0.5" fill="rgba(200,200,255,0.1)"/><circle cx="40" cy="15" r="0.8" fill="rgba(220,180,255,0.12)"/><circle cx="15" cy="40" r="0.7" fill="rgba(180,180,255,0.11)"/></svg>');
    background-color: var(--bg-primary, #1a1a1a);
  }
  
  .dark-mode.background-style-mystic .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="2" fill="rgba(200,200,255,0.3)"/><path d="M30 5 L30 15 M30 45 L30 55 M5 30 L15 30 M45 30 L55 30 M12 12 L19 19 M41 41 L48 48 M12 48 L19 41 M41 19 L48 12" stroke="rgba(180,180,255,0.25)" stroke-width="1" stroke-linecap="round"/><path d="M34 30 C34 32.2 32.2 34 30 34 C27.8 34 26 32.2 26 30 C26 27.8 27.8 26 30 26 C30.5 26 31 26.1 31.5 26.3 C30.6 27 30 28 30 29.2 C30 31 31.4 32.4 33.2 32.4 C33.5 32.4 33.8 32.3 34 32.2 C34 31.5 34 30.7 34 30 Z" fill="rgba(200,200,255,0.35)"/></svg>');
    background-color: var(--bg-primary, #1a1a1a);
  }
  
  .dark-mode.background-style-vintage .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><line x1="0" y1="10" x2="20" y2="10" stroke="rgba(200,180,160,0.15)" stroke-width="1"/><line x1="10" y1="0" x2="10" y2="20" stroke="rgba(200,180,160,0.15)" stroke-width="1"/></svg>');
    background-color: var(--bg-primary, #1a1a1a);
  }
  
  .dark-mode.background-style-nature .entry-content {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(140,200,140,0.12)" transform="rotate(10 20 20)"/><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(160,210,160,0.1)" transform="translate(15 10) scale(0.7) rotate(-25 20 20)"/></svg>');
    background-color: var(--bg-primary, #1a1a1a);
  }
  
  @media (max-width: 480px) {
    .entry-content {
      height: calc(100vh - 40px);
    }
  }
  
  @supports (-webkit-touch-callout: none) {
    .entry-content {
      height: -webkit-fill-available;
    }
  }
  
  /* ================================== */
  /* Chat Interface                   */
  /* ================================== */
  
  .chat-container {
    width: 100%;
    max-width: 800px;
    min-width: 280px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0 auto;
    position: relative;
    scroll-behavior: smooth;
  }
  
  .dark-mode .chat-container {
    background-color: transparent;
  }
  
  .chat-messages {
    padding: 12px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(100vh - 100px); /* Space for footer + mobile toolbar */
    scroll-behavior: smooth;
  }
  
  
  
  /* Individual Messages */
  .message-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
  }
  
  .user-message-wrapper {
    align-items: flex-end;
  }
  
  .message {
    padding: 12px 16px;
    margin-bottom: 0; 
    border-radius: 16px;
    max-width: 85%;
    width: fit-content;
    clear: both;
    word-wrap: break-word;
    overflow-wrap: break-word;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease forwards;
  }

  /* Ensure message wrappers are visible by default */
  .message-wrapper {
    opacity: 1;
  }
  
  @media (max-width: 480px) {
    .message {
      max-width: 95%;
    }
  }
  
  .user-message {
    background-color: #d9d9d9;
    align-self: flex-end;
    float: right;
    color: #000;
    font-size: 0.8rem;
    border-bottom-right-radius: 3px;
  }
  
  .dark-mode .user-message {
    background-color: #d9d9d9;
    color: #333;
  }
  
  @media (max-width: 480px) {
    .user-message {
      font-size: 0.9rem;
    }
  }
  
  .AskCard-message {
    font-family: "Sarabun", sans-serif;
    background-color: #f0f0f0;
    align-self: flex-start;
    float: left;
    color: #3f3f46;
    min-width: 80%;
    font-size: 0.8rem;
    border-bottom-left-radius: 3px;
  }
  
  .AskCard-message p {
    margin-bottom: 0px;
  }
  .AskCard-message p:has(strong) {
    margin-bottom: 0;
  }
  
  .dark-mode .AskCard-message {
    background-color: #121212; 
    color: #f0f0f0; 
  }
  
  .dark-mode .AskCard-message h1,
  .dark-mode .AskCard-message h2,
  .dark-mode .AskCard-message h3,
  .dark-mode .AskCard-message h4,
  .dark-mode .AskCard-message h5,
  .dark-mode .AskCard-message h6 {
    color: #f0f0f0; 
  }
  
  .dark-mode .AskCard-message strong {
    color: #f0f0f0; 
  }
  
  .dark-mode .AskCard-message code {
    background-color: #374151; 
    color: #f0f0f0; 
    padding: 2px 4px;
    border-radius: 3px;
  }
  
  .dark-mode .AskCard-message pre {
    background-color: #1e293b; 
    border: 1px solid #475569;
  }
  
  .dark-mode .AskCard-message blockquote {
    border-left-color: #64748b; 
    background-color: #334155; 
    color: #f0f0f0; 
  }
  
  @media (max-width: 480px) {
    .AskCard-message {
      min-width: 85%;
      font-size: 0.85rem;
    }
  }
  
  /* Message Content & Formatting */
  .message-content {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    font-size: 0.95rem;
    min-height: 22.8px;
    font-family: "Sarabun", sans-serif;
  }
  
  /* Result message specific styling */
  #result-message {
    min-height: 240px;
  }
  
  @media (max-width: 480px) {
    .message-content {
      font-size: 0.9rem;
    }
  }
  
  /* Enhanced markdown styles */
  .message-content h1 {
    font-size: 1.3em;
  }
  .message-content h2 {
    font-size: 1.2em;
  }
  .message-content h3 {
    font-size: 1.1em;
  }
  .message-content h4 {
    font-size: 1.05em;
  }
  .message-content h5 {
    font-size: 1em;
  }
  .message-content h6 {
    font-size: 0.95em;
  }
  
  .message-content ul,
  .message-content ol {
    margin: 0.4em 0;
    padding-left: 1.8em;
    font-size: 0.9rem;
  }
  
  .message-content ul {
    list-style-type: disc;
  }
  .message-content ul ul {
    list-style-type: circle;
  }
  .message-content ul ul ul {
    list-style-type: square;
  }
  .message-content ol {
    list-style-type: decimal;
  }
  .message-content ol ol {
    list-style-type: lower-alpha;
  }
  .message-content ol ol ol {
    list-style-type: lower-roman;
  }
  
  .message-content li {
    margin: 0.3em 0;
    padding-left: 0.2em;
  }
  .message-content li > p {
    margin: 0;
  }
  
  .message-content blockquote {
    border-left: 4px solid rgb(51, 5, 119); 
    margin: 1em 0;
    padding: 0.5em 1em;
    background: rgba(0, 188, 212, 0.05);
    border-radius: 0 4px 4px 0;
    font-size: 0.9rem;
  }
  
  .dark-mode .message-content blockquote {
    border-left-color: rgb(64, 8, 96);
    background: rgba(0, 188, 212, 0.1);
  }
  
  .message-content pre {
    background: rgba(0, 0, 0, 0.04);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5em 0;
    font-size: 0.85em;
  }
  
  .message-content code {
    background: rgba(0, 0, 0, 0.04);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
      Liberation Mono, monospace;
  }
  
  .dark-mode .message-content pre,
  .dark-mode .message-content code {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .message-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.9rem;
  }
  
  .message-content th,
  .message-content td {
    border: 1px solid #e0e0e0;
    padding: 8px;
    text-align: left;
  }
  
  .dark-mode .message-content th,
  .dark-mode .message-content td {
    border-color: #444;
  }
  
  .message-content th {
    background: rgba(0, 0, 0, 0.04);
  }
  
  .dark-mode .message-content th {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .message-content hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 1em 0;
  }
  
  .dark-mode .message-content hr {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  
  
  /* Typing Indicator */
  .typing-animation {
    display: block;
    min-height: 24px;
    position: relative;
  }
  
  .typing-animation::after {
    content: "...";
    animation: ellipsis 1.5s infinite;
    display: inline-block;
    width: 24px;
    text-align: left;
    overflow: hidden;
    letter-spacing: 2px;
  }
    
  /* Countdown Timer */
  .countdown-container {
    position: relative;
    width: 96%;
    margin: 10px auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
  }
  
  .dark-mode .countdown-container {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .countdown-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
  }
  
  .dark-mode .countdown-text {
    color: #ccc;
  }
  
  .progress-bar-background {
    width: 100%;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  
  .dark-mode .progress-bar-background {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .progress-bar-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #4a1a6c, #6b238e, #7d2ca7);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2), 0 0 5px rgba(138, 43, 226, 0.2);
    border-radius: 3px;
    position: relative;
    animation: countdown-bar 60s linear forwards;
    overflow: hidden;
  }
  
  .progress-bar-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shine 4s infinite;
  }
  
  /* ================================== */
  /* Visual Effects                   */
  /* ================================== */
  
  /* Note: Smoke Effect section has been moved to welcome-smadhi.php */
  
  /* ================================== */
  /* Note: Animations section has been moved to welcome-smadhi.php */
  /* ================================== */
  
  /* Note: Background Style Options moved to style.css for better organization */