/* Kameleon Chat – Dark Luxe Theme  */

:root {
    /* background & glass */
    --bg:     radial-gradient(circle at top left, #151515 0%, #0b0b0b 40%, #000 100%);
    --panel:  rgba(255, 255, 255, 0.06);
    --blur:   blur(18px);
  
    /* bubbles */
    --user:   #3d8bff;   /* bright blue */
    --bot:    #f0f0f0;   /* warm light‑gray */
  
    /* accent */
    --accent: #ff9100;   /* orange */
    --glow:   rgba(255, 145, 0, 0.55);
  
    /* misc */
    --radius: 18px;
    --ease:   cubic-bezier(0.45, 0, 0.2, 1);
    --font:   "Poppins", system-ui, sans-serif;
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg) fixed;
    font-family: var(--font);
    color: #fff;
    overflow-x: hidden;
    /* subtle noise overlay */
    position: relative;
  }
  
  body::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle fill='%23222222' cx='1' cy='1' r='1'/%3E%3C/svg%3E");
    opacity: 0.25;
    mix-blend-mode: soft-light;
  }
  
  header, footer {
    text-align: center;
    margin: 0 0 28px;
    opacity: 0.88;
  }
  
  h1 { font-weight: 600; margin: 0 0 6px; }
  
  #chat {
    width: 100%;
    max-width: 520px;
    height: 74vh;
    backdrop-filter: var(--blur);
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    box-shadow: 0 0 14px var(--glow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s var(--ease);
  }
  
  #chat:hover { transform: translateY(-2px); }
  
  #log {
    flex: 1;
    list-style: none;
    padding: 22px;
    margin: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
  
  /* custom scrollbar */
  #log::-webkit-scrollbar         { width: 6px; }
  #log::-webkit-scrollbar-thumb   { background: #444; border-radius: 3px; }
  #log::-webkit-scrollbar-track   { background: transparent; }
  
  #log li {
    position: relative;
    max-width: 82%;
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    line-height: 1.4;
    animation: fade 0.25s var(--ease);
  }
  
  @keyframes fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  
  /* USER bubble */
  .user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--user) 0%, #2b6af6 100%);
    color: #fff;
    box-shadow: 0 0 8px rgba(61, 139, 255, 0.45);
  }
  .user::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 12px;
    border-left: 6px solid var(--user);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
  
  /* BOT bubble */
  .bot  {
    align-self: flex-start;
    background: var(--bot);
    color: #000;
  }
  .bot::after {
    content: "";
    position: absolute;
    left: -6px;
    top: 12px;
    border-right: 6px solid var(--bot);
    border-top:    6px solid transparent;
    border-bottom: 6px solid transparent;
  }
  
  /* typing loader – three bouncing dots */
  .loader {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bot);
    box-shadow: 14px 0 0 var(--bot), 28px 0 0 var(--bot);
    animation: dots 1s infinite ease-in-out;
  }
  @keyframes dots {
    0%   { box-shadow: 14px 0 0 var(--bot), 28px 0 0 var(--bot); }
    33%  { box-shadow: 14px 0 0 var(--bot), 28px 0 0 transparent; }
    66%  { box-shadow: 14px 0 0 transparent, 28px 0 0 transparent; }
    100% { box-shadow: 14px 0 0 var(--bot), 28px 0 0 var(--bot); }
  }
  
  #prompt {
    display: grid;
    grid-template-columns: 1fr auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  
  #prompt input {
    padding: 16px;
    font-size: 1rem;
    background: transparent;
    border: none;
    color: #fff;
  }
  #prompt input::placeholder { color: #9c9c9c; }
  
  #prompt button {
    padding: 0 26px;
    background: var(--accent);
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
  }
  #prompt button:hover   { opacity: 0.9; transform: scale(1.05); }
  #prompt button:active  { transform: scale(0.98); }

  /* bubble timestamp */
#log li time {
    display: block;
    font-size: 0.65rem;
    margin-top: 6px;
    opacity: 0.55;
    user-select: none;
  }
  
  /* smoother loader */
  .loader {
    width: 9px; height: 9px;
    box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 var(--bot);
    animation: dots 0.9s infinite ease-in-out;
  }
  @keyframes dots {
    0%   { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 var(--bot); }
    25%  { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 transparent; }
    50%  { box-shadow: 0 0 0 var(--bot), 14px 0 0 transparent, 28px 0 0 transparent; }
    75%  { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 transparent; }
    100% { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 var(--bot); }
  }

  /* extra breathing room on ≥700 px tall screens */
@media (min-height: 700px) {
    #chat { height: 80vh; }
  }
  
  /* faint glow for bot bubbles so they pop on very dark backgrounds */
  .bot {
    box-shadow: 0 0 6px rgba(240,240,240,0.25);/* Kameleon Chat – Dark Luxe Theme */

    :root {
      /* background & glass */
      --bg:     radial-gradient(circle at top left, #151515 0%, #0b0b0b 40%, #000 100%);
      --panel:  rgba(255, 255, 255, 0.06);
      --blur:   blur(18px);
    
      /* bubbles */
      --user:   #3d8bff;   /* bright blue */
      --bot:    #f0f0f0;   /* warm light‑gray */
    
      /* accent */
      --accent: #ff9100;   /* orange */
      --glow:   rgba(255, 145, 0, 0.55);
    
      /* misc */
      --radius: 18px;
      --ease:   cubic-bezier(0.45, 0, 0.2, 1);
      --font:   "Poppins", system-ui, sans-serif;
    }
    
    *, *::before, *::after { box-sizing: border-box; }
    
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: var(--bg) fixed;
      font-family: var(--font);
      color: #fff;
      overflow-x: hidden;
      /* subtle noise overlay */
      position: relative;
    }
    
    body::before {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle fill='%23222222' cx='1' cy='1' r='1'/%3E%3C/svg%3E");
      opacity: 0.25;
      mix-blend-mode: soft-light;
    }
    
    header, footer {
      text-align: center;
      margin: 0 0 28px;
      opacity: 0.88;
    }
    
    h1 { font-weight: 600; margin: 0 0 6px; }
    
    #chat {
      width: 100%;
      max-width: 520px;
      height: 74vh;
      backdrop-filter: var(--blur);
      background: var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius);
      box-shadow: 0 0 14px var(--glow);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.3s var(--ease);
    }
    
    #chat:hover { transform: translateY(-2px); }
    
    #log {
      flex: 1;
      list-style: none;
      padding: 22px;
      margin: 0;
      overflow-y: auto;
      scroll-behavior: smooth;
      display: flex;
      flex-direction: column;
    }
    
    /* custom scrollbar */
    #log::-webkit-scrollbar         { width: 6px; }
    #log::-webkit-scrollbar-thumb   { background: #444; border-radius: 3px; }
    #log::-webkit-scrollbar-track   { background: transparent; }
    
    #log li {
      position: relative;
      max-width: 82%;
      padding: 14px 16px;
      border-radius: var(--radius);
      margin-bottom: 14px;
      line-height: 1.4;
      animation: fade 0.25s var(--ease);
    }
    
    @keyframes fade {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: none; }
    }
    
    /* USER bubble */
    .user {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--user) 0%, #2b6af6 100%);
      color: #fff;
      box-shadow: 0 0 8px rgba(61, 139, 255, 0.45);
    }
    .user::after {
      content: "";
      position: absolute;
      right: -6px;
      top: 12px;
      border-left: 6px solid var(--user);
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }
    
    /* BOT bubble */
    .bot  {
      align-self: flex-start;
      background: var(--bot);
      color: #000;
      box-shadow: 0 0 6px rgba(240,240,240,0.25);
    }
    .bot::after {
      content: "";
      position: absolute;
      left: -6px;
      top: 12px;
      border-right: 6px solid var(--bot);
      border-top:    6px solid transparent;
      border-bottom: 6px solid transparent;
    }
    
    /* typing loader – three bouncing dots */
    .loader {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--bot);
      box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 var(--bot);
      animation: dots 0.9s infinite ease-in-out;
    }
    @keyframes dots {
      0%   { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 var(--bot); }
      25%  { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 transparent; }
      50%  { box-shadow: 0 0 0 var(--bot), 14px 0 0 transparent, 28px 0 0 transparent; }
      75%  { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 transparent; }
      100% { box-shadow: 0 0 0 var(--bot), 14px 0 0 var(--bot), 28px 0 0 var(--bot); }
    }
    
    #prompt {
      display: grid;
      grid-template-columns: 1fr auto;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    
    #prompt input {
      padding: 16px;
      font-size: 1rem;
      background: transparent;
      border: none;
      color: #fff;
    }
    #prompt input::placeholder { color: #9c9c9c; }
    
    #prompt button {
      padding: 0 26px;
      background: var(--accent);
      border: none;
      font-size: 1.3rem;
      cursor: pointer;
      transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
    }
    #prompt button:hover   { opacity: 0.9; transform: scale(1.05); }
    #prompt button:active  { transform: scale(0.98); }
    
    /* bubble timestamp */
    #log li time {
      display: block;
      font-size: 0.65rem;
      margin-top: 6px;
      opacity: 0.55;
      user-select: none;
    }
    
    /* extra breathing room on ≥700 px tall screens */
    @media (min-height: 700px) {
      #chat { height: 80vh; }
    }
  }