:root {
    --chat-bg: #e5ddd5; /* צבע רקע וואטסאפ קלאסי */
    --chat-window-bg: #e5ddd5;
    --chat-txt: #333;
    --user-bubble: #dcf8c6; /* ירוק וואטסאפ */
    --model-bubble: #ffffff;
    --chat-border: #ccc;
    --chat-input-bg: #ffffff;
    --accent-color: #0056a7;
}

body.chat-dark-mode {
    --chat-bg: #0b141a;
    --chat-window-bg: #0b141a;
    --chat-txt: #f1f1f1;
    --user-bubble: #005c4b;
    --model-bubble: #202c33;
    --chat-border: #333;
    --chat-input-bg: #2a3942;
}
.chat-dark-mode .message-model,.chat-dark-mode .message-user {color:#fff;}
#gemini-test-container {
    background: var(--chat-bg);
    color: var(--chat-txt);
    border: 1px solid var(--chat-border);
    border-radius: 15px;
    margin: 20px auto;
    /*max-width: 450px;*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: sans-serif;
    direction: rtl;
	    text-align: left;
}

/* כותרת הצ'אט */
#chat-header {
    background: var(--accent-color);
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #4ef037;
    border-radius: 50%;
}

#chat-window {
    height: 60vh;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* בועות כללי */
.message-user, .message-model {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 10px;
    position: relative;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* הודעת משתמש - שמאל */
.message-user {
    align-self: flex-start;
    background: var(--user-bubble);
    border-top-left-radius: 0;
}

/* הודעת בוט - ימין */
.message-model {
    align-self: flex-end;
    background: var(--model-bubble);
    border-top-right-radius: 0;
}
#input-area {
    padding: 10px;
    background: var(--chat-input-bg);
    display: flex;
    gap: 5px;
    align-items: center;
}

.input-wrapper {
    position: relative;
    flex-grow: 1;
}

#chat-input {
    width: 100%;
    padding: 10px 40px 10px 10px;
    border: none;
    background: var(--chat-window-bg);
    color: var(--chat-txt);
    border-radius: 20px;
}

#mic-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

#send-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    /*border-radius: 50%;
    width: 40px;*/
    height: 40px;
    cursor: pointer;
}

.controls-area {
    text-align: start;
}
/*SideNav*/
.wp-sidenav {
  position: fixed;
  inset: 0 auto 0 0;
  width: 75%;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,.15);
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 100000; /* above admin bar */
  padding: 1rem;
}

/* Open state */
.wp-sidenav.is-open {
  transform: translateX(0);
}

/* Overlay */
.wp-sidenav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 99999;
}

/* Close button */
.wp-sidenav-close {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 1rem;
}
button.wp-sidenav-close.button-link {
    background: #0056a7;
    color: white;
    border: none;
}

/* Menu */
.wp-sidenav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wp-sidenav-menu li {
  margin: 0;
}

.wp-sidenav-menu a {
  padding: 8px 0;
  color: #2271b1; /* WP link blue */
  text-decoration: none;
}

.wp-sidenav-menu a:hover,
.wp-sidenav-menu a:focus {
  text-decoration: underline;
}
button#sidenav-toggle {
    position: fixed;
    left: 10px;
    bottom: 80px;
    padding: 10px;
    border-radius: 45px;
    z-index: 999;
background: #0056a7;
    color: #fff;
}
span#bot-name {
    color: #fff;
}
button#dark-mode-toggle {
    background: #0056a7;
    text-shadow: none;
    font-weight: 100;
}
button#sidenav-toggle{
    max-width: 100px;
    max-width: fit-content !important;
}
/* Typing Indicator Animation */
.typing-indicator {
    display: flex;
    padding: 10px;
    background: #f0f6fb;
    width: fit-content;
    border-radius: 15px;
    margin-bottom: 10px;
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    background: #3b5998;
    display: block;
    border-radius: 50%;
    margin-right: 5px;
    animation: bounce 1.3s linear infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: -1.1s; }
.typing-indicator span:nth-child(3) { animation-delay: -0.9s; }

@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-7px); }
}

/* מניעת היצמדות לימין במצב RTL כשהבוט עונה */
[dir="rtl"] .typing-indicator {
    margin-left: auto;
    margin-right: 0;
}