@media (max-width: 768px) {
  header button {
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
  }
}
*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#ffffff;--text:#202123;--input-bg:#f7f7f8;--bubble-you:"";--bubble-them:#e5e5ea}body[data-theme="dark"]{--bg:#202123;--text:#e6e6e6;--input-bg:#343541;--bubble-you:#6ee7b7;--bubble-them:#444654}body[data-theme="dark-minimal"]{--bg:#1e1e2f;--text:#c5c6c7;--input-bg:#2a2a3e;--bubble-you:#1f6f8b;--bubble-them:#2f3e4f}body[data-theme="gradient"]{--bg:#0d0b1a;--text:#e0e0e0;--input-bg:"";--bubble-you:#7959fe;--bubble-them:#1e1a38;--bubble-gradient:linear-gradient(135deg, #7959fe, #fc00ff);background:linear-gradient(to right,#0f0c29,#302b63,#24243e);background-attachment:fixed}body,html{height:100%;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:var(--bg);color:var(--text);transition:background 0.3s ease,color 0.3s ease}header{padding:.60rem;display:flex;justify-content:space-between;align-items:center;border-radius:99px;flex-shrink:0;border:1px solid #ccc}body[data-theme="gradient"] header,body[data-theme="gradient"] footer{background:rgb(0 0 0 / .4);border-color:#444}#user-id{font-weight:500;margin-right:auto}body[data-theme="gradient"] #user-id{text-shadow:0 0 5px #fc00ff}#theme-toggle{background:#fff0;border:none;cursor:pointer;padding:6px;border-radius:8px;transition:background-color 0.2s ease;color:var(--text)}#theme-toggle:hover{background-color:#e5e7eb}#theme-toggle svg{width:20px;height:20px;fill:currentColor}main{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg);scrollbar-width:none}main::-webkit-scrollbar{display:none}#chat-area{position:relative}#app{display:flex;flex-direction:column;height:100vh}.message{display:flex;padding:0;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;border-radius:0}.message.you{justify-content:flex-end}.message.them{justify-content:flex-start}.message-content-block{display:flex;align-items:flex-start;gap:8px;max-width:80%}.message.you .message-content-block{flex-direction:row-reverse}.message.them .message-content-block{flex-direction:row}#anonymous-disclaimer{position:fixed;top:20px;left:50%;transform:translateX(-50%);background-color:#000000e8;color:#fff;border:1px solid #b2ebf2;padding:15px 25px;border-radius:8px;text-align:center;font-size:.75em;font-weight:700;z-index:1000;box-shadow:0 4px 8px rgb(0 0 0 / .2);opacity:0;transition:opacity 0.5s ease-in-out}.message-bubble{padding:.75rem 1rem;border-radius:39px;border:1px solid #000;word-wrap:break-word;font-size:.88rem;overflow-wrap:break-word;line-height:1.4;max-width:100%}.message.you .message-bubble{background:var(--bubble-you);color:var(--text)}body[data-theme="gradient"] .message.you .message-bubble{background:var(--bubble-gradient);color:#fff}.message.them .message-bubble{background:var(--bubble-them);color:var(--text)}.message.system .message-content-block{justify-content:center;width:100%;text-align:center}.message.system .message-bubble{align-self:center;font-style:italic;font-size:.9rem;color:var(--text);background:#fff0;padding:.2rem .5rem;border-radius:8px}footer{padding:1rem;flex-shrink:0;display:flex;gap:.5rem}.message-input-container{flex-grow:1;display:flex;border:1px solid #ccc;border-radius:20px;overflow:hidden;background-color:#fff;align-items:center}.input-row{display:flex;flex:1;align-items:center;border:1px solid #ccc;border-radius:24px;overflow:hidden;background-color:#fff0;padding-right:.5rem}.input-row #message-input{flex:1;border:none;margin:0;padding:.75rem 1rem;background:#fff0;outline:none}input[type="text"]{flex:1;flex-basis:100%;flex-grow:1;flex-shrink:1;margin-bottom:.5rem;padding:.75rem;font-size:1rem;border-radius:24px;border:1px solid #ccc;background:var(--bg);color:var(--text)}body[data-theme^="dark"] input[type="text"]{border-color:#555}.avatar{width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:1.5em;flex-shrink:0;border:1px solid rgb(255 255 255 / .4);box-shadow:0 1px 2px rgb(0 0 0 / .15);user-select:none}.sender-label{font-weight:700;margin-right:5px}button{padding:.75rem 1rem;font-size:1rem;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background 0.2s}button:hover{background:#0056b3}body[data-theme="gradient"] button{background:#9a00ff}body[data-theme="gradient"] button:hover{background:#d400ff}.icon-twitter-check{fill:#007bff;position:absolute;margin-left:70px;transition:fill 0.3s ease-in-out}#sound-toggle-btn{background:none;border:none;cursor:pointer;color:inherit;padding:5px;font-size:1.5em;display:inline-flex;align-items:center;justify-content:center;outline:none}#sound-toggle-btn:hover{color:#007bff}#sound-toggle-btn svg{width:1em;height:1em;vertical-align:middle}#upload-btn{background:#fff0;border:none;cursor:pointer;font-size:24px;width:auto;color:#6b7280;padding:8px;border-radius:8px;transition:background-color 0.2s ease}#upload-btn:hover{background-color:#e5e7eb;color:#374151}#upload-btn:active{background-color:#d1d5db}#voice-btn{background:#fff0;border:none;cursor:pointer;padding:8px;border-radius:8px;color:#6b7280;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:background-color 0.2s ease,color 0.2s ease;user-select:none;flex-shrink:0}#voice-btn:hover{background-color:#e5e7eb;color:#374151}#voice-btn:active{background-color:#d1d5db;color:#202123}#voice-btn svg{width:24px;height:24px;fill:currentColor}body[data-theme="gradient"] #upload-btn{background:#00c896}body[data-theme="gradient"] #upload-btn:hover{background:#00a77b}@media (max-width:600px){#typing-watermark {font-size: 3rem;}header{position:sticky;top:0;z-index:1000;background:var(--bg);backdrop-filter:blur(5px)}#message-input{flex:1;min-width:50px}footer{position:fixed;bottom:0;left:0;right:0;z-index:1000;padding:.5rem;background:var(--bg)}main{padding-top:10px!important;padding-bottom:200px!important;min-height:calc(100vh - 140px)}.input-row{padding:.25rem}#chat-area{overflow-anchor:none}#voice-btn,#emoji-btn{min-width:32px;height:32px;padding:4px}#voice-btn svg,#emoji-btn svg{width:18px;height:18px}#upload-btn{width:32px;height:32px;padding:4px}#upload-btn svg{width:18px;height:18px}}#upload-btn svg{width:20px;height:20px}.image-content-wrapper{position:relative;display:inline-block;border-radius:12px;overflow:hidden;cursor:pointer;border:none;outline:none}.chat-image{max-width:300px;max-height:300px;height:auto;border-radius:12px;display:block;user-select:none;border:none;outline:none;object-fit:contain}.message-bubble.image-message-bubble{background-color:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.image-menu-btn{position:absolute;top:6px;right:6px;background:rgb(0 0 0 / .4);border:none;color:#fff;font-size:18px;cursor:pointer;border-radius:50%;width:28px;height:28px;line-height:24px;text-align:center;padding:0;transition:background 0.2s ease;user-select:none}.image-menu-btn:hover{background:rgb(0 0 0 / .7)}.image-menu{position:absolute;top:36px;right:6px;background:var(--input-bg);border:1px solid #444;border-radius:6px;display:none;min-width:120px;box-shadow:0 2px 8px rgb(0 0 0 / .3);z-index:10;overflow:hidden}.menu-dropdown-button{background:none;border:none;padding:8px 12px;width:100%;text-align:left;cursor:pointer;font-size:.9rem;color:var(--text);user-select:none;transition:background 0.2s ease}.menu-dropdown-button:hover{background:#007bff;color:#fff}body[data-theme="dark"] .image-menu{background:#343541;border-color:#666}body[data-theme="dark-minimal"] .image-menu{background:#2a2a3e;border-color:#555}body[data-theme="gradient"] .image-menu{background:rgb(30 26 56 / .9);border-color:#7959fe}body[data-theme="cyberpunk-neon"]{--bg:#1a0f2b;--text:#e0ffff;--input-bg:#2e1c4b;--bubble-you:#00ffff;--bubble-them:#ff00ff;--bubble-gradient-you:linear-gradient(
        135deg,
        #00ffff,
        #00bfff
    );--bubble-gradient-them:linear-gradient(
        135deg,
        #ff00ff,
        #ff007f
    );background:linear-gradient(to bottom right,#1a0f2b,#0f091f);background-attachment:fixed}body[data-theme="cyberpunk-neon"] .message.you .message-bubble{background:var(--bubble-gradient-you);color:var(--text);box-shadow:0 0 8px rgb(0 255 255 / .6)}body[data-theme="cyberpunk-neon"] .message.them .message-bubble{background:var(--bubble-gradient-them);color:var(--text);box-shadow:0 0 8px rgb(255 0 255 / .6)}body[data-theme="cyberpunk-neon"] header,body[data-theme="cyberpunk-neon"] footer{background:var(--input-bg);border-color:indigo}body[data-theme="cyberpunk-neon"] button{background:cyan;color:#1a0f2b;transition:background 0.3s ease,box-shadow 0.3s ease}body[data-theme="cyberpunk-neon"] button:hover{background:#00e5e5;box-shadow:0 0 15px rgb(0 255 255 / .9)}body[data-theme="cyberpunk-neon"] #upload-btn,body[data-theme="cyberpunk-neon"] #voice-btn{background:#f0f;color:#1a0f2b;box-shadow:0 0 10px rgb(255 0 255 / .7)}body[data-theme="cyberpunk-neon"] #upload-btn:hover,body[data-theme="cyberpunk-neon"] #voice-btn:hover{background:#e500e5;box-shadow:0 0 15px rgb(255 0 255 / .9)}body[data-theme="cyberpunk-neon"] #user-id{color:cyan;text-shadow:0 0 5px cyan}.message-bubble.voice-message-bubble{background-color:transparent!important;margin-left: -4px;border:none;box-shadow:none}body[data-theme="dark"] .message-bubble.voice-message-bubble{background-color:transparent!important}body[data-theme="gradient"] .message-bubble.voice-message-bubble{background-color:transparent!important}.action-buttons{display:flex;gap:4px;flex-shrink:0}.message.you .message-bubble.voice-message-bubble{background-color:transparent!important}.message.them .message-bubble.voice-message-bubble{background-color:transparent!important}.message.bot{color:var(--text)}.message.bot .message-bubble{border:none;border-radius:8px;text-align:left;max-width:70%;padding:12px 16px;line-height:1.5}.message-bubble iframe{    width:270%;    height:240px;    border-radius:20px;    overflow:hidden;    display:block}#emoji-btn{background:#fff0;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#555;transition:color 0.2s ease-in-out;padding:0 8px;flex-shrink:0}#emoji-btn svg{width:24px;height:24px;fill:currentColor}#emoji-btn:hover{color:#007bff}
body[data-theme="cyberpunk-neon"] .message.you .message-bubble.voice-message-bubble,
body[data-theme="cyberpunk-neon"] .message.them .message-bubble.voice-message-bubble {
    box-shadow: none;
}
.message.you .message-bubble.sticker-message,
.message.them .message-bubble.sticker-message {
    border: none;
}
.sticker-emoji {
    font-size: 3rem;
    line-height: 1;
    margin: 0.2rem;
    display: inline-block;
    transition: transform 0.2s ease;
}
.sticker-message {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center;
}
.animated-emoji-container {
  font-size: 3rem;
  line-height: 1;
  display: inline-block;
}
.animated-message {
  background: transparent !important;
  text-align: center;
  min-width: 60px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-bubble.animated-message {
    border: none;
}
button.image-menu-btn {
    background: none;
}
body[data-theme="gradient"] .message.you .message-bubble.voice-message-bubble {
    background: none !important;
}
body[data-theme="cyberpunk-neon"] .message.you .message-bubble.voice-message-bubble {
    background: none !important;
}
body[data-theme="gradient"] .message.them .message-bubble.voice-message-bubble {
    background: none !important;
}
body[data-theme="cyberpunk-neon"] .message.them .message-bubble.voice-message-bubble {
    background: none !important;
}
.hidden-image-placeholder {
    background-color: #f0f0f0;
    color: #888;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px; /* Jarak dari elemen di atasnya */
    font-style: italic;
}

.hidden-image-placeholder:hover {
    background-color: #e0e0e0;
    color: #666;
}
.voice-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  max-width: 260px;
}

.play-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.waveform {
  display: flex;
  gap: 2px;
  height: 16px;
}

.waveform .bar {
  width: 2px;
  background: #4caf50;
  height: 6px;
  transition: height 0.2s;
}

.waveform.playing .bar {
  animation: bounce 1s infinite ease-in-out;
}

@keyframes bounce {
  0%, 100% { height: 6px; }
  50% { height: 16px; }
}

#loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 2s ease;
}

#loading-screen.hide {
  opacity: 0;
  pointer-events: none;
}

#dice {
  filter: drop-shadow(0 0 10px #e63946) drop-shadow(0 0 20px #e63946);
  animation: spin 2s infinite linear;
}

/* Animasi putar lambat-cepat */
@keyframes spin {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
/* voiceplayer.css */
.voice-message {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #2c3e50, #4ca1af);
  color: white;
  border-radius: 12px;
  padding: 8px 12px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  max-width: 300px;
}

.voice-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.voice-btn svg {
  width: 24px;
  height: 24px;
}

.progress {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: white;
  transition: width 0.2s linear;
}

.time {
font-size: 0.8em;
  margin-left: 8px;
  min-width: 30px;
}
#typing-watermark {
  position: fixed; /* ganti dari absolute jadi fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .15;
  font-size: 2rem;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
  color: #007bff;
}

#typing-watermark::after {
  content: '|';
  animation: blink .7s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}
body {
  user-select: none;
}

/* Izinkan di elemen tertentu */
.allow-copy {
  user-select: text;
}
.dropdown-container {
  position: relative;
  display: inline-block;
}

#threeDotBtn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: inherit;
}

#dropdownContent {
  display: none;
  position: absolute;
  right: 0;
  background-color: #333;
  min-width: 140px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 6px;
  z-index: 1000;
}

#dropdownContent button, 
#dropdownContent div {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  margin-bottom: 4px;
}

#dropdownContent button:hover {
  background-color: rgba(255,255,255,0.1);
  border-radius: 4px;
}
#dropdownContent > div > * {
  /* Tambahkan padding agar ada jarak antara konten dan garis */
  padding-bottom: 8px; 
  margin-bottom: 8px; 
  border-bottom: 1px solid #ccc; 
}
#dropdownContent > div > *:last-child {
  border-bottom: none;
  margin-bottom: 0; 
  padding-bottom: 0; 
}
body[data-theme="light"] #openPopup {
color: black;}
button#openPopup {
  background-color: transparent !important; /* Use !important sparingly, prefer specificity */
}

body[data-theme="dark"] #voice-btn svg,
body[data-theme="dark"] #emoji-btn svg,
body[data-theme="dark"] footer button svg {
  fill: white;
}
body[data-theme="light"] #voice-btn svg,
body[data-theme="light"] #emoji-btn svg,
body[data-theme="light"] footer button svg {
  fill: black;
}
body[data-theme="dark-minimal"] #voice-btn svg,
body[data-theme="dark-minimal"] #emoji-btn svg,
body[data-theme="dark-minimal"] footer button svg {
  fill: white;
}
body[data-theme="gradient"] #voice-btn svg,
body[data-theme="gradient"] #emoji-btn svg,
body[data-theme="gradient"] footer button svg {
  fill: white;
}
body[data-theme="cyberpunk-neon"] #emoji-btn svg {
  fill: white;
}