/* ------------------- GENERAL ------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100vh;
}

html, body {
    overflow: hidden; 

}

/* ------------------- LOGIN PAGE ------------------- */
body {
    background-color: #0a0a0a; /* match dashboard */
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    background-color: #111;
    padding: 40px;
    border-radius: 50px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
    width: 350px;
    text-align: center;
    border: 1px solid #333;
}

.login-container h2 {
    color: #ffffff;
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 400;
}

.login-container label {
    display: block;
    text-align: left;
    margin-top: 12px;
    color: #ccc;
    font-size: 13px;
}

.login-container input {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    border: 1px solid #444;
    border-radius: 25px;
    background: #1f1f1f;
    color: #fff;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.login-container input::placeholder {
    color: #999;
}

.login-container button {
    width: 100%;
    margin-top: 20px;
    padding: 12px; /* <-- this makes it shorter */
    background-color: #1b1b1b;
    color: #fff;
    font-size: 14px;
    border: 1px solid #fff;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-container button:hover {
    background-color: #2a2a2a;
    transform: scale(1.01);
}

#error-message {
    margin-top: 12px;
    font-size: 14px;
    color: red;
}
p.danger {
    color: red;
}
p.message {
    color: red;
}
.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-container input {
    width: 100%;
    padding-right: 40px; /* space for icon */
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 55%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s ease;
}

.toggle-password:hover {
    color: #ccc;
}
/* ------------------- TOPBAR (CLEAN + FIXED) ------------------- */
.topbar {
    width: 100%;
    background-color: #0a0a0a;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    z-index: 1000;
    box-shadow: none;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px; /* spacing between logo and text */
    height: 100%;
  }

.topbar-left h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    line-height: 1; /* helps with vertical alignment */
    display: flex;
    align-items: center; /* vertical centering */
    padding-top: 10px;
}

/* Logo layout + clickable */
.logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.5s ease;
  }
  
  .topbar-logo {
    height: 30px;
    width: auto;
    transition: transform 0.8s ease;
    margin-left: 38px;
  }
  
  .logo-link:hover .topbar-logo {
    transform: scale(1.04); /* grow effect */
  }
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 30px;
    padding-left: 0px;
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
    margin-right: 30px;
}

.admin-tag {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    color: #ccc;
    text-decoration: none;
}
.admin-tag i.fa-user-shield {
    margin-right: 5px; /* Pushes the icon 5px away from the Admin text */
}
  

.logout-icon {
    color: #ccc;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.3s ease, color 0.3s ease;
}

.logout-icon:hover {
    animation: vibrate 0.3s ease-in-out 1;
    color: #aaa;
    transform: translateX(-1px);
}

/* Vibration Animation (unchanged) */
@keyframes vibrate {
    0% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, -1px); }
    100% { transform: translate(0); }
} 

.user-role {
    font-size: 14px;
    color: #666;
    margin-right: 50px;
}

/* ------------------- SIDEBAR ------------------- */
.sidebar {
    width: 240px;
    background-color: #0a0a0a; /* ← dark gray */
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    margin-top: 0px;
}
.sidebar a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #1b1b1b;
    border-radius: 30px;
    margin-bottom: 12px;
    color: #fff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav ul li {
    margin-bottom: 6px;
}

.sidebar-nav ul li a {
    background-color: #000000;
    border: 1px solid #333;
    border-radius: 20px;
    color: white;
    margin: 4px 12px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
}
.sidebar-nav ul li a.active {
    border: 1px solid #fff; /* white border to highlight */
}

.sidebar-nav ul li a:hover {
    background-color: #1c1c1c;
    border-color: #555;
}
.sidebar a:hover {
    background-color: #2a2a2a;
}

/* Remove underline on hover */
.sidebar a:hover,
.sidebar a:focus {
    text-decoration: none;
}


/* ------------------- DASHBOARD LAYOUT ------------------- */
.dashboard-container {
    display: flex;
    width: 100%;
    margin-top: 60px;
}

.chat-container {
    display: flex;
    flex-direction: column;
    margin-left: 240px;
    padding: 30px 120px;
    background-color: #111111;
    height: calc(100vh - 60px);
}

/* ------------------- CHAT HEADER ------------------- */
.chat-header {
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    color: #38b6ff;
}

.chat-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.status-indicator {
    color: green;
    font-size: 14px;
}

/* ------------------- CHAT BOX ------------------- */
#chat-box {
    background-color: #111111;
    padding: 20px;
    border-radius: 6px;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    color: #fff;
    min-height: 0;
    padding-bottom: 25px;
}

/* Messages */
.chat-message {
    padding: 12px 16px;
    border-radius: 20px;
    max-width: 75%;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    display: inline-block;
    animation: fadeIn 0.3s ease;
}

.chat-message.bot {
    background-color: #1f1f1f;
    color: #f1f1f1;
    border-radius: 16px 16px 16px 0px;
    padding: 10px 16px;
    max-width: 80%;
    align-self: flex-start;
}

.chat-message.user {
    background-color: #2a2a2a;
    color: #fff;
    border-radius: 16px 16px 0px 16px;
    padding: 10px 16px;
    max-width: 80%;
    align-self: flex-end;
}

/* Typing indicator */
#typing-indicator {
    font-style: italic;
    opacity: 0.6;
}

/* ------------------- INPUT AREA ------------------- */
.input-area {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    padding: 15px 20px 10px 20px; 
    align-items: flex-start;
    justify-content: center;
    position: relative;
    border-top: 2px solid #2a2a2a;
    margin-bottom: 40px;
}

.input-area input {
    flex: 1;
    height: 100px; /* Makes it taller */
    padding: 18px 20px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    resize: none;
    vertical-align: top;
    margin-bottom: 15px;
}

.input-area input::placeholder {
    color: #aaa;
}

.input-area button {
    background-color: #1b1b1b;
    color: white;
    border: 1px solid #fff; /* white border to indicate active */
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
    height: fit-content;
    border-radius: 25px;
    margin-top: 25px;
}

.input-area button:hover {
    background-color: #444;
}

.input-area textarea {
    flex: 1;
    height: 40px;
    padding: 16px 18px;
    border-radius: 25px; /* ✨ Rounded */
    border: 1px solid #ccc;
    font-size: 15px;
    background-color: #222222; /* Matches chatbot widget */
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    resize: none;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.4;
    vertical-align: top;
    overflow: hidden
}
.input-area textarea::placeholder {
    color: #aaa;
    text-align: left !important;
    vertical-align: top;
    line-height: 1.2 !important;
    padding-top: 0;
}
  textarea {
    margin-top: 10px;
}



/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ---------------------------------- */
/* PREDEFINED QUESTIONS IN CHAT STYLE */
/* ---------------------------------- */

.chat-question-bubble {
    background-color: #f9f9f9;
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 75%;
    align-self: flex-start;
    border: 1px solid #e1e1e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-top: 10px;
}

#question-buttons {
    background: #fff;
    padding: 14px;
    border-radius: 12px;
    margin-top: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

.predefined-question {
    background-color: #000;
    color: #f1f1f1; /* Bright text */
    border: 1px solid #666;
    border-radius: 8px; /* Squarer */
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease, border 0.3s ease;
    text-align: left;
}

.predefined-question:hover {
    background-color: #1a1a1a;
    border-color: #999;
}

/* Topbar fix: make sure Admin text doesn't overflow or disappear */
.topbar-right {
    white-space: nowrap;
    padding-left: 20px;
    font-size: 14px;
    color: #ccc;
    max-width: 200px;
    overflow: visible;
}

#chat-box > .chat-question-bubble {
    margin-top: auto;
}

.chatbot-message.predefined-question-bubble {
    background-color: #1b1b1b;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 6px 0;
    max-width: 80%;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    transition: background 0.2s ease;
}

.chatbot-message.predefined-question-bubble:hover {
    background-color: #2a2a2a;
}
#question-buttons .predefined-question {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.3s;
    max-width: 60%;
    white-space: normal;
    word-break: break-word;
}
  
#question-buttons .predefined-question:hover {
    background-color: #e6f0ff;
}
.chat-message.bot.predefined-question-bubble {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.predefined-question-bubble {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  
.predefined-question-bubble div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (max-width: 768px) {
    .predefined-question {
      font-size: 13px;
      padding: 6px 10px;
    }
  }
.chatbot-message.predefined-question-bubble {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 16px;
    padding: 10px 15px;
    margin: 8px 0;
    max-width: 75%;
    align-self: flex-start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.predefined-wrapper {
    background-color: #0a0a0a;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-area textarea::placeholder,
.input-area input::placeholder {
    color: #999;
    text-align: center;
    line-height: 100px; /* vertical centering for taller input */
}
/* Modern slim scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 2px solid #0a0a0a;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

#show-predefined-btn {
  background-color: #000000;         /* Dark theme */
  color: #fff;
  border: 1px solid #fff;            /* White border like other buttons */
  border-radius: 25px;               /* Rounded style */
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 28px;                /* Same spacing as your buttons */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 0 6px rgba(255,255,255,0.05); /* Subtle glow */
}

#show-predefined-btn:hover {
  background-color: #444;            /* Matches your hover color */
  transform: scale(1.02);
}


/* ------------------- AI Manažment AREA ------------------- */
  
#chatbot-header-preview {
    background: #111;
    color: #fff;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 15px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    cursor: pointer;
    box-sizing: border-box;
  }
  
#chatbot-body-preview {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #000;
    color: white;
    display: flex;
    flex-direction: column;
}

#chatbot-send-preview {
    background: #444;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    font-size: 13px;
    height: 30px;
    min-width: 60px;
    margin: 0;
    height: 90%;
}

#chatbot-send-preview:hover {
    background-color: #666;
}

#chatbot-container-preview {
    width: 350px;
    max-height: 500px;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    background: #000;
    border: 1px solid #222; /* Softer border */
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 var(--shadow-intensity, 12px) rgba(255, 255, 255, 0.08); /* Live brightness */
    margin-top: 65px; /* Lower placement */
    overflow: hidden; /* Prevent scroll */
    height: auto;
    margin-left: 170px;
    margin-right: 150px;
    min-width: 320px; /* ✅ Prevents collapsing */
    width: 100%;
    max-width: 350px;
    flex-shrink: 0; 
}

.ai-management-container input,
.ai-management-container select,
.ai-management-container button {
  font-size: 12px;
  padding: 4px 8px;
  margin-bottom: 8px;
}

.style-section label {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 6px;
    display: block;
}
.ai-management-container {
    display: flex;
    flex-direction: column;
    /*height: calc(100vh - 60px); /* Adjust for topbar */
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background: #111111;
    overflow-x: hidden;
    overflow-y: auto; 
    max-height: none;
    flex-wrap: wrap;
  }


.style-section h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: white;
    align-items: center;
}
  
  input[type="color"] {
    padding: 0;
    height: 26px;
}
  
.chatbot-message-preview {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 5px 10px;
    padding: 10px 15px;
    border-radius: 18px;
    word-wrap: break-word;
    max-width: 70%;
}

.chatbot-message-preview.user {
    background: #555;
    align-self: flex-end;
    border-radius: 18px 18px 0px 18px;
  }

  .chatbot-message-preview.bot {
    background: #333;
    align-self: flex-start;
    border-radius: 18px 18px 18px 0px;
  }

  
  /* Preview scrollbar */
#chatbot-body-preview::-webkit-scrollbar {
    width: 6px;
}

#chatbot-body-preview::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color, #888);

}

#chatbot-body-preview::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

#chatbot-body-preview::-webkit-scrollbar-track {
    background: #0a0a0a;
}

/* AI Manažment Background */


.style-wrapper {
    flex: 1;
    max-width: 1800px; /* ⬅️ wider container */
    margin-left: 260px;
}

.style-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* ⬅️ three columns */
    gap: 24px;
    background-color: #0A0A0A;
    border: 1px solid #222;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
    color: white;
    padding: 30px;
    border-radius: 16px;
    max-width: 1800px; /* ⬅️ wider panel */
    margin-left: 100px;
    margin-bottom: 50px;
    padding-bottom: 20px;
    width: 90%;
}

.style-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.style-actions {
    grid-column: span 3; /* ⬅️ spans across all three columns */
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0px;
}

.style-section label,
.style-section input,
.style-section select,
.style-section button {
    width: 100%;
    box-sizing: border-box;
}

  
.ai-management-columns {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
    padding: 40px;
    box-sizing: border-box;
    overflow: hidden;
  }

#chatbot-input-container-preview {
    display: flex;
    padding: 6px 10px;
    border-top: 1px solid #444;
    background: #000;
    gap: 12px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    align-items: center;
    height: 42px;
  }
  

/* Improved scrollbar style */
#chatbot-body-preview::-webkit-scrollbar {
    width: 6px;
}
#chatbot-body-preview::-webkit-scrollbar-track {
    background: #0a0a0a;
}
#chatbot-body-preview::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 8px;
}
#chatbot-body-preview::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}
/* Sharp corner options */
.sharp-corner-bot {
    border-radius: 16px 16px 16px 0px !important;
}
  
.sharp-corner-user {
    border-radius: 16px 16px 0px 16px !important;
}
#chatbot-input-preview::placeholder {
    font-size: 14px;
    color: var(--placeholder-color, #999) !important;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
}


.style-title-visible {
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
    text-align: center;
    width: 100%; /* ⬅️ force full width inside column */
    margin-right: 50px;
    margin-left: 50px;
  }
  


#chatbot-toggle-preview {
    margin-left: 130px;
}

#chatbot-input-preview {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #666;
    border-radius: 20px;
    background: #222222;
    color: white;
    font-size: 13.5px;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    height: 25px;
    margin: 0;
  }


.chatbot-input-preview {
    flex: 1;
    padding: 10px;
    border: 1px solid #666;
    border-radius: 20px;
    background: #222;
    color: white;
    font-size: 14px;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    height: 90%;
}

.chatbot-preview-title {
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
    text-align: center;
    width: 100%; /* ⬅️ force full width inside column */
    margin-right: 50px;
    padding-left: 400px;
}
    
  /* Updated buttons */
.style-actions button {
    background-color: #000000;
    color: white;
    border: 1px solid #fff;
    padding: 10px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
  
.style-actions button:hover {
    background-color: #2a2a2a;
    transform: scale(1.01);
}
  
.title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 500px;
    margin-right: 100px;
    margin-bottom: 20px;
}
  
.title-row h2,
.title-row h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.title-row-aligned {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 260px; /* matches left offset */
    margin-right: 20px; /* matches chatbot margin */
    margin-top: 40px;
    margin-bottom: 0px;
  }
  
  .title-row-aligned .section-left {
    text-align: left;
    flex: 1;
    padding-left: 250px;
    color: white;
    font-family: 'Montserrat', sans-serif;
  }
  
  .title-row-aligned .section-right {
    text-align: right;
    flex: 1;
    padding-right: 0px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    padding-left: 0px;
    padding-right: 250px;
  }

  #font {
    background-color: #1b1b1b;
    border: 1px solid #444;
    border-radius: 10px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    padding: 8px;
    font-size: 12px;
}

/* Also style when it is opened */
#font option {
    background-color: #000000;
    color: white;
    font-family: 'Montserrat', sans-serif;
}

  @media (max-width: 1250px) {
    html, body {
      overflow-x: hidden;
      overflow-y: auto;
    }
  
    .dashboard-container {
      flex-direction: column;
      align-items: center;
      padding-top: 80px;
    }
  
    .ai-management-container {
      padding: 40px 10px;
      width: 100%;
      align-items: center;
      margin-top: 120px; /* 🔼 pulled up for better visibility */
    }
  
    .ai-management-columns {
      flex-direction: column;
      align-items: center;
      gap: 40px;
      width: 100%;
      margin-left: 0;          /* ✅ remove left bias */
      padding-left: 50px;   /* 🔄 subtle shift to the right */
    }
  
    .style-wrapper {
      display: flex;
      justify-content: center;
      padding: 0;
      margin-left: 210px;
      margin-top: 130px;
      width: 96%;              /* ✅ slightly wider */
      transform: translateX(4px);
    }
  
    .style-section {
      width: 90%;
      max-width: 650px;
      padding: 24px;
      grid-template-columns: 1fr;
      margin: 0 auto;
    }
  
    #chatbot-container-preview {
      margin-left: 210px;
      margin-right: 0;
      margin-top: 10px;
      max-width: 650px;
      width: 100%;
      min-width: 0;
      padding: 0px;
      transform: translateX(4px);
    }
  
    .title-row-aligned {
      flex-direction: column;
      text-align: center;
      gap: 10px;
      margin: 0 auto 20px auto;
      padding: 0;
      width: 100%;
      justify-content: center;
    }
  
    .title-row-aligned .section-left,
    .title-row-aligned .section-right {
      text-align: center;
      margin: 5px 0;
      padding: 0;
    }
  }

  .disabled-feature {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }

  .access-2,
  .access-3 {
    display: none;
  }
  
  .sidebar-nav li.access-2,
  .sidebar-nav li.access-3 {
    display: none; /* 🔒 Hide restricted items by default */
  }


/* 🔒 ....................Email function........................ */

/* FIX the Email Assistant Layout */

.email-assistant-container {
    position: absolute;
    top: 60px; /* height of the topbar */
    left: 240px; /* width of the sidebar */
    width: calc(100vw - 240px);
    height: calc(100vh - 60px);
    background-color: #111;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  
  
  .email-assistant-wrapper {
    width: 100%;
    max-width: 1600px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .email-assistant-header {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 0px;
    /*padding-right: 60px !important;*/
  }

  .email-header-left,
    .email-header-right {
    width: 45%;
    text-align: left;
}

  .email-assistant-grid {
    display: grid;
    grid-template-columns: 160px 1fr 1fr 160px; /* sidebars smaller, boxes big */
    gap: 40px;
    height: 100%;
  }
  
  /* Shared sidebar style */
  .email-sidebar {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    align-self: flex-start; /* <-- allows it to shrink */
    height: auto; /* <-- new: don't stretch full height */
    max-height: 600px; /* optional: cap the height if needed */
  }
  
  .email-sidebar button,
  .email-sidebar select {
    padding: 10px;
    border-radius: 10px;
    background: #1b1b1b;
    border: 1px solid #444;
    color: white;
    font-family: 'Montserrat', sans-serif;
  }
  
  .email-box {
    background: #000;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    box-sizing: border-box;
  }
  
  .email-box.user input,
  .email-box.user textarea {
    background: #1c1c1c;
    color: white;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
  }
  
  .email-box.user input {
    height: 40px;
  }
  
  .email-box.user textarea {
    flex: 1;
    min-height: 360px;
    resize: none;
  }
  
  .email-box-output-header {
    font-size: 14px;
    font-weight: 600;
    color: #ccc;
  }
  

  .email-action-btn {
    margin-top: auto;
    align-self: flex-end;
    padding: 10px 16px;
    background-color: #111;
    color: white;
    border: 1px solid #fff;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-wrap: wrap;
  }
  
.email-action-btn:hover {
    background-color: #2a2a2a;
}

.dark-placeholder {
    background-color: #0a0a0a;
    height: 100%;
  }

.copy-icon:hover {
    color: #fff;
}

.copy-icon.body-copy {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  pointer-events: auto;
  z-index: 10;
}


.email-box.ai input {
    background: #1c1c1c;
    color: white;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 12px;
    height: auto; /* make it full again */
    box-sizing: border-box;
    position: relative; /* required for absolute positioning the copy icon */
  }

  .email-box.ai {
    background: #000;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;           /* Already present */
    min-height: 360px;       /* ✅ Match input height */
    box-sizing: border-box;
    overflow: hidden; 
  }
  
  
  .email-box-output-body {
    flex: 1;
    background: #1c1c1c;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 20px 20px 50px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: white;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;         /* Ensure it stretches fully */
    min-height: 200px;    /* Minimum size, but will grow */
    box-sizing: border-box;
    position: relative;
  }
  
  .copy-icon {
    position: absolute;
    bottom: 14px;
    right: 14px;
    font-size: 18px;
    color: white;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    vertical-align: middle;
    margin-left: 10px;
  }
  
  .copy-icon:hover {
    opacity: 1;
  }

  .email-output-subject-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .email-output-subject-wrapper input {
    flex: 1;
    background: #1c1c1c;
    color: white;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 12px;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    pointer-events: none;
  }
  
  .copy-icon.subject-copy {
    position: absolute;
    right: 14px;
    top: 40%;
    transform: translateY(-50%);
    font-size: 18px;
    color: white;
    cursor: pointer;
    opacity: 0.7;
    line-height: 1; /* added to center more neatly */
    height: 20px; /* slightly reduce height to align better */
  }

  #emailOutputSubject {
    width: 100%;
    padding-right: 40px; /* make room for icon inside input */
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: #1c1c1c;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 10px 14px;
    color: white;
  }
  .email-sidebar.right button {
    padding: 10px 14px;
    background-color: #111;
    border: 1px solid #fff;
    color: white;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.email-sidebar.right button:hover {
    background-color: #2a2a2a;
}

.email-box-output-body-wrapper {
  position: relative;
  background: #1c1c1c;
  padding: 16px;
  border-radius: 12px;
  min-height: 440px;
  border: 1px solid #333;
  font-family: 'Montserrat', sans-serif;
  color: white;
  height: 100%;
  overflow-y: auto;
  padding-right: 12px;
  overflow-x: hidden;
  overflow: hidden;
  padding-bottom: 8px;
}


/*#emailOutputBody {
    background: #111;
    color: white;
    padding: 16px;
    border-radius: 12px;
    min-height: 360px; 
    max-height: 360px; 
    overflow-y: auto; 
    white-space: pre-wrap;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    border: 1px solid #333;
}*/

.copy-icon-body {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  font-size: 18px;
  cursor: pointer;
}


.email-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  .email-action-buttons button {
    padding: 10px 14px;
    background-color: #111;
    border: 1px solid #fff;
    color: white;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .email-action-buttons button:hover {
    background-color: #2a2a2a;
  }

  .email-body-wrapper {
    position: relative;
    width: 100%;
    height: 100%; /* <-- important to stretch fully */
    display: flex; /* new */
    flex-direction: column; /* new */
}

#emailBody {
    width: 100%;
    height: 100%; /* make it fill parent */
    background: #1c1c1c;
    color: white;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 20px; /* a bit more padding inside */
    font-family: 'Montserrat', sans-serif;
    resize: none;
    box-sizing: border-box;
    font-size: 14px;
}

#wordCounter {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 12px;
    color: #888;
    font-family: 'Montserrat', sans-serif;
}

#emailOutputBody:empty::before {
  content: "Text emailu (vygeneruje sa)...";
  color: #888; /* light gray */
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  pointer-events: none;
}
html[lang="en"] #emailOutputBody:empty::before {
  content: "Email text (will be generated)...";
}

#emailOutputBody {
  height: 100%;
  max-height: 480px;
  min-height: 480px;
  overflow-y: auto;
  padding-right: 16px;
  padding-bottom: 5px;
  white-space: pre-wrap;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  scrollbar-gutter: stable;
}

/* 🔧 Force consistent font size for both subject and body output */
#emailOutputSubject,
#emailOutputBody {
  font-size: 14px !important;
}

.email-sidebar button,
.email-sidebar select {
    font-size: 14px;  /* or 11px if you want it even smaller */
}

.email-sidebar label {
  font-size: 16+px;
}

/* 🔒 ....................Analytics function........................ */
/* Analytics Dashboard Styling */
/* 🎨 Updated Analytics Style for Visual Consistency */
.analytics-dashboard {
  background-color: rgb(17, 17, 17);
  box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 12px;
  color: white;
  font-family: Montserrat, sans-serif;
  width: 100%;
  max-width: 1400px;
  margin-top: 30px;
  padding: 30px 40px;
  border-radius: 16px;
}


.analytics-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
}

#analytics-select {
  background-color: #1b1b1b;
  color: white;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

#analytics-content {
  background-color: #0A0A0A;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 30px;
  min-height: 400px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
}

/* Sections */
.analytics-section {
  display: none;
  animation: fadeIn 0.3s ease;
}

.analytics-section.active {
  display: block;
}

.analytics-section h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
  color: white;
  margin-top: -5px; /* Fine-tuned position */
  position: relative;
  top: -5px;
}

#visitStats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  display: none !important;
}

.canvas-container {
  background-color: transparent !important;
  box-shadow: none !important;
}

#visitStats p {
  font-size: 15px;
  color: #ccc;
  margin: 0;
  padding: 8px;
  background-color: #1b1b1b;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* Chart */
#visitChart {
  background-color: #0a0a0a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 20px;
  height: 450px; /* Change this value to adjust */
  max-height: 450px; /* Ensure it doesn't overflow */
  margin-bottom: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
}

#visitChart::-webkit-scrollbar {
  width: 5px;
}

#visitChart::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 5px;
}

#visitChart::-webkit-scrollbar-track {
  background: #111;
}

.analytics-dashboard-container {
  position: absolute;
  top: 80px;
  left: 240px;
  width: calc(100vw - 240px);
  height: calc(100vh - 80px);
  padding: 20px 40px; /* More padding to center it */
  box-sizing: border-box;
  background-color: #111;
  overflow-y: hidden !important;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}


.button-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  z-index: 10;
}

#timeRangeButtons {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 20px;
  top: -45px;
  z-index: 10;
}

#timePeriodButtons {
  display: flex;
  gap: 15px;
  margin-top: 0px;
  margin-bottom: 5px;
  justify-content: start;
}

#timePeriodButtons .time-btn {
  padding: 12px 18px;
  background-color: #111111;
  border-radius: 20px;
  color: white;
  border: 1px solid #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

#timePeriodButtons .time-btn.active {
  background-color: #111111;
  border-color: #4CAF50;
}

#timePeriodButtons .time-btn:hover {
  background-color: #444;
}


.time-btn {
  background-color: #1b1b1b;
  color: white;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.time-btn.active {
  background-color: #333;
  border-color: #555;
}

.time-btn:hover {
  background-color: #444;
}


#timeRangeButtons button.active {
  background-color: #444 !important;
  border-color: #666 !important;
}

#totalVisits {
  font-size: 18px;
  color: #4CAF50;
  transition: color 0.3s ease;
}

#totalVisits.animate {
  color: #76FF03;  /* Light green flash */
}

/* Add these styles to your stylesheet */
.empty-state {
  text-align: center;
  padding: 40px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  margin: 20px 0;
}

.empty-state p {
  margin-bottom: 15px;
  font-size: 16px;
  color: #aaa;
}

.error-state {
  text-align: center;
  padding: 40px;
  background: rgba(255,0,0,0.1);
  border-radius: 8px;
  margin: 20px 0;
  border: 1px solid rgba(255,0,0,0.2);
}

.error-state p {
  margin-bottom: 15px;
  font-size: 16px;
  color: #ff6666;
}

.loading-indicator {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #aaa;
}

.retry-btn {
  background: #333;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.retry-btn:hover {
  background: #444;
}

/* Ensure the chart is visible and has the right background */
#trafficSourceChart {
  background-color: #0a0a0a !important;
  border: 1px solid #333 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  height: 450px !important;
  max-height: 450px !important;
  margin-bottom: 20px !important;
}

/* Fix traffic source section visibility */
#traffic_sources {
  display: none;  /* Hidden by default - only shown when selected */
  min-height: 500px;
  background-color: #0A0A0A;
  border-radius: 16px;
  padding: 20px;
}

/* Ensure canvas is visible */
#trafficSourceChart canvas {
  max-height: 400px;
  background-color: transparent !important;
}

#website_visits {
  display: block;  /* Initially visible */
}

/* Match style for chatbot section buttons */
#chatbotTimePeriodButtons {
  display: flex;
  gap: 15px;
  margin-top: 0px;
  margin-bottom: 5px;
  justify-content: start;
}

#chatbotTimePeriodButtons .time-btn {
  padding: 12px 18px;
  background-color: #111111;
  border-radius: 20px;
  color: white;
  border: 1px solid #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

#chatbotTimePeriodButtons .time-btn.active {
  background-color: #111111;
  border-color: rgb(78, 200, 200); /* Highlight blue from your new graph */
}

#chatbotTimePeriodButtons .time-btn:hover {
  background-color: #444;
}

@media (max-width: 768px) {
  #chatbot-container {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    left: 0;
    right: 0;
  }
}


.server-break-container {
  background-color: #111 !important;
  padding: 40px;
  position: absolute;
  top: 60px;
  left: 240px;
  width: calc(100vw - 240px);
  height: calc(100vh - 60px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.server-break-panel {
  background-color: #111;
  padding: 40px 30px;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  color: white;
  box-shadow: 0 0 20px #00000044;
  text-align: center;
}

.server-break-panel h2 {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 600;
}

.server-break-panel p {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 30px;
}

#serverBreakToggle {
  padding: 12px 28px;
  background: #b30000;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

#serverBreakToggle:hover {
  background: #cc0000;
}

#breakTimer {
  margin-top: 25px;
  font-size: 14px;
  color: #aaa;
}




/* 🔒 ....................AU function........................ */

.graph-compass .needle{ display:inline-block; }

.ai-settings .hint { font-size:11px; color:#9aa0a6; margin-top:4px; }
.ai-settings textarea.ai-emoji,
.ai-settings textarea.ai-banned { min-height: 56px; }
.ai-settings input[type="number"] { background:#121212; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#eaeaea; padding:6px 10px; }
/* --- Sources: equal-width pill checkboxes --- */
.ai-settings .chip-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  position:relative;
}
.ai-settings .chip{
  display:flex; align-items:center; justify-content:center;
  gap:8px; user-select:none; cursor:pointer;
  padding:8px 10px; border-radius:12px;
  background:#141414; border:1px solid rgba(255,255,255,.10);
  transition:transform .06s ease, border-color .15s, background .15s;
  width:100%;                /* fill cell – click anywhere */
  min-height:44px;
  position:relative; z-index:1;
}
.ai-settings .chip input{ position:absolute; opacity:0; pointer-events:none; }
.ai-settings .chip.is-on{
  border-color:#4aa3ff; background:rgba(74,163,255,.12);
  box-shadow: inset 0 0 0 1px rgba(74,163,255,.15);
}
.ai-settings .chip > * { pointer-events: none; }        /* pass clicks to label */
.ai-settings .chip span { display:inline-flex; align-items:center; gap:8px; }
.ai-settings .chip:active{ transform:scale(.98); }

/* --- Emoji editor + picker --- */
.emoji-editor{ position:relative; display:flex; gap:8px; align-items:center; }
.emoji-editor textarea.ai-emoji{ flex:1; min-height:56px; }
.emoji-editor .emoji-btn{
  flex:0 0 44px;
  height:44px;               /* same visual height as input */
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:#1b1b1b; border:1px solid rgba(255,255,255,.12);
  font-size:18px; cursor:pointer;
  transform:none;            /* remove the previous nudge */
}
.emoji-popover .em-btn,
.ai-settings .emoji-editor textarea{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
               "Twemoji Mozilla","EmojiOne Color",system-ui,sans-serif !important;
  font-variant-emoji: emoji;
}
.emoji-popover{
  position:fixed; z-index:10000; display:none;
  background:#1a1a1a; color:#eaeaea; border:1px solid #333; border-radius:12px;
  width:280px; padding:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.emoji-popover .em-group + .em-group{ margin-top:8px; }
.emoji-popover .em-title{ color:#bdbdbd; font-size:12px; margin:10px 0 6px; }
.emoji-popover .em-grid { display:grid; grid-template-columns: repeat(10, 36px); gap:8px; }
.emoji-popover .em-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid #2a2a2a;
  background:#121212; font-size:20px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.emoji-popover .em-btn img.emoji{ width:22px; height:22px; } /* Twemoji imgs */
/* --- ZDROJE ZNALOSTÍ chips: click anywhere & center icon/text --- */
.ai-settings .ai-sources label.chip{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; cursor:pointer;
}
.ai-settings .ai-sources label.chip > *{ pointer-events:none !important; }
.ai-settings .ai-sources label.chip span{
  display:inline-flex; align-items:center; gap:.5rem;
}
.ai-settings .ai-sources .chip-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

/* --- Emoji trigger vertical alignment next to textarea --- */
.ai-settings .emoji-editor{ display:flex; align-items:center; gap:8px; }
.ai-settings .emoji-editor .emoji-btn{
  flex:0 0 44px;
  height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transform:none !important;   /* remove any previous translateY */
}
/* Twemoji images inside tiles look crisp and centered */
#globalEmojiPicker .em-btn{ line-height:1; }
#globalEmojiPicker .em-btn img{ display:block; width:22px; height:22px; }


/* --- Emoji fonts + force emoji presentation everywhere we show them --- */
.emoji-popover .em-btn,
.ai-settings .emoji-editor textarea,
.ai-settings .emoji-preview,
.ai-settings .tone-dd-btn,
.ai-settings .ai-sources label.chip span {
  font-family:
    "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
    "Twemoji Mozilla","EmojiOne Color", system-ui, sans-serif !important;
  font-variant-emoji: emoji;
}

/* keep the hand cursor even when hovering inner elements */
.ai-settings .ai-sources label.chip *,
.ai-settings .emoji-btn * {
  cursor: pointer;
}

.emoji-popover .em-btn:hover{ background:#222; transform:translateY(-1px); }
/* compact, scrollable emoji popover */
#globalEmojiPicker.emoji-popover{
  position: fixed;
  z-index: 10060;
  max-height: min(60vh, 420px);
  overflow: auto;
  overscroll-behavior: contain;
  width: 360px;
  padding: 10px 10px 6px;
  border-radius: 12px;
  background:#1a1a1a;
  border:1px solid #333;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#globalEmojiPicker .em-group{ margin-bottom: 6px; }
#globalEmojiPicker .em-title{
  font-size: 12px; opacity:.7; margin: 4px 2px 6px;
}
#globalEmojiPicker .em-grid{
  display:grid; grid-template-columns:repeat(10,1fr); gap:6px;
}
#globalEmojiPicker .em-btn{
  width:32px; height:32px; font-size:20px;
  border-radius:8px; background:#222; border:1px solid #2b2b2b;
}
#globalEmojiPicker .em-btn:hover{ background:#272727; border-color:#3b3b3b; }
/* unified pretty range with edge-to-edge fill */
input[type="range"].au {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 8px;
  background:
    /* filled part (we'll make this the “health bar” look in §4) */
    linear-gradient(to right, #22c55e, #16a34a) left / var(--p, 0%) 100% no-repeat,
    /* unfilled track */
    #151515;
}
input[type="range"].au::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: none;
  margin-top: -3px;  /* centers the thumb on a 12px track so ends line up */
  cursor: pointer;
}
input[type="range"].au::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
}
input[type="range"].au::-moz-range-track{ background:transparent; }
.range-line{ display:flex; align-items:center; gap:8px; }
.range-val{ width:36px; text-align:right; opacity:.9; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 0 #000}
input[type="range"].au::-webkit-slider-runnable-track { height: 12px; background: transparent; border-radius: 8px; }
input[type="range"].au::-moz-range-track              { height: 12px; background: transparent; border-radius: 8px; }
.ai-settings input[type="range"].au {
  background:
    linear-gradient(
      to right,
      #a7f3d0 0%,  #a7f3d0 25%,
      #34d399 25%, #34d399 50%,
      #10b981 50%, #10b981 75%,
      #059669 75%, #059669 100%
    ) left / var(--p, 0%) 100% no-repeat,
    #151515;
}

/* --- Tone dropdown (Automatizácia style) --- */
.tone-ctrl { display:flex; }
.tone-dd-btn{
  width:100%; height:36px; border-radius:10px;
  background:#121212; border:1px solid rgba(255,255,255,.12);
  color:#eaeaea; padding:0 10px; text-align:left; cursor:pointer;
}
.tone-dd-btn:hover{ border-color:rgba(255,255,255,.18); }

/* Small hints already in your CSS */
.ai-settings .hint { font-size:11px; color:#9aa0a6; margin-top:4px; }

/* --- AI Logika: source chips row --- */
.ai-sources{
  display:flex;
  gap:12px;
  padding:8px 0;
  overflow:hidden;           /* keep inside the card */
}
.ai-sources label.chip{
  flex:1 1 0;
  min-width:0;
  box-sizing:border-box;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  transition: transform .08s ease;
}
.ai-sources label.chip:active{
  transform: translateY(1px) scale(.985); /* subtle press, no stretch */
}
.ai-sources label.chip .chip-icon{ 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
}
/* Selected (= blue) state for knowledge pills */
.ai-settings .ai-sources label.chip.is-on{
  border-color:#4aa3ff;
  background:rgba(74,163,255,.12);
  box-shadow: inset 0 0 0 1px rgba(74,163,255,.15);
}

/*___________________________________________________________________Zameranie UI___________________________*/
/* Focus chips */
.focus-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 6px; }
.focus-toolbar .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.focus-toolbar .tok{
  background:#1b1b1b;
  border:1px solid #2b2b2b;
  color:#ddd;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.focus-toolbar .tok:hover{ border-color:#4aa3ff; }
.focus-toolbar .tok.is-on{
  background:linear-gradient(180deg,#111 0%,#0f172a 100%);
  border-color:#4aa3ff;
  box-shadow:0 0 0 2px rgba(74,163,255,.2) inset, 0 4px 16px rgba(0,0,0,.35);
  color:#e9f3ff;
}
.focus-toolbar .tok:active{ transform:scale(.96); }
@keyframes chipPulse { from{transform:scale(.96);} to{transform:scale(1);} }
.focus-toolbar .tok.pressed{ animation:chipPulse .18s ease-out; }

/* Emoji button in the toolbar (unchanged) */
.focus-toolbar .emoji-btn{
  width:34px; height:34px; border-radius:10px;
  background:#1b1b1b; border:1px solid #2b2b2b; cursor:pointer;
}

/* Make the meta (sentences / chars) readable */
.focus-meta{ color:#fff; opacity:.75; font-size:12px; display:flex; gap:12px; justify-content:flex-end; margin-top:6px; }

/*___________________________________________________________________Zameranie UI___________________________*/

.automation-container {
  position: absolute;
  top: 60px;
  left: 240px;
  width: calc(100vw - 240px);
  height: calc(100vh - 60px);
  background: #111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.automation-title-bar {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  pointer-events: none;
}
/* hide the bar unless the automation container is actually shown */
.automation-title-bar { display: none; }
.automation-container[style*="display: block"] .automation-title-bar { display: flex; }

.automation-title {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.automation-scroll-area {
  flex: 1;
  overflow: auto; /* or use 'scroll' if needed */
  position: relative;
  cursor: grab;
  overscroll-behavior: contain; /* prevents bounce on mac */
  width: 100%;
  height: 100%;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
}

.automation-scroll-area::-webkit-scrollbar {
  display: none;
}

.automation-virtual-space {
  width: 100000px;
  height: 100000px;
  position: relative;
}

.automation-canvas {
  width: 100000px;
  height: 100000px;
  position: relative;
  top: 0;
  left: 0;
  background: transparent;
  background-size: 32px 32px;
  transform-origin: top left;
  inset: 0;
}

.automation-node {
  position: absolute;
  background: #1e1e1e;
  padding: 0.5rem;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  width: 250px;
  height: auto;
  overflow: visible;
  z-index: 1;
}

.automation-node textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.5rem;
  background: #2a2a2a;
  color: #ddd;
  border: none;
  border-radius: 6px;
  resize: vertical;
  padding: 0.4rem;
  font-family: monospace;
}

.node-header {
  font-weight: bold;
  margin-bottom: 10px;
  color: #f5f5f5; /* ⬅️ Light color for visibility */
  font-size: 16px;
  display: flex;
  align-items: center;
}

.node-actions {
  display: flex;
  gap: 1px;
  margin-left: auto; /* 🆕 push to right */
  align-items: center;
}

.node-textarea {
  width: 100%;
  min-height: 60px;
  background: #2a2a2a;
  border: none;
  border-radius: 6px;
  color: #ddd;
  padding: 8px;
  resize: vertical;
  font-family: monospace;
  box-sizing: border-box;
}

.automation-add-node {
  position: fixed;
  bottom: 24px;
  left: 260px; /* aligns well considering sidebar width */
  z-index: 1000;
  background: #1f1f1f;
  color: white;
  font-weight: bold;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 0 10px #00000088;
  transition: background 0.2s;
}

.automation-add-node:hover {
  background: #333;
}

.node-close-btn {
  float: right;
  background: none;
  border: none;
  color: #888;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s;
}

.node-close-btn:hover {
  color: #ff5555;
}

.node-connector {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  position: absolute;
  z-index: 10; /* raise above SVG */
  pointer-events: auto; /* ✅ make sure it's clickable */
}

.node-connector-input {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}

.node-connector-output {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}
  
.connection-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:auto;
}

.connection-line {
  stroke: #ffffff80;
  stroke-width: 2px;
  fill: none; /* ✅ just in case */
  pointer-events: stroke;
  cursor: pointer;
}

.selected-connector {
  outline: 2px solid rgb(135, 14, 233);
}

.connection-layer line {
  position: relative;
  z-index: 0;
  pointer-events: stroke; /* ✅ makes the line clickable */
  cursor: pointer;
}

#connectionConfirmModal button {
  background-color: #333;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}

#connectionConfirmModal button:hover {
  background-color: #444;
}
.line-selected {
  stroke: hwb(273 29% 17%) !important;
  stroke-width: 3px;
}
.automation-toolbar {
  position: fixed;
  bottom: 24px;
  left: 260px;
  z-index: 1000;
  display: flex;
  gap: 12px;
}

.automation-toolbar button {
  background: #1f1f1f;
  color: white;
  font-weight: bold;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 0 10px #00000088;
  transition: background 0.2s;
}

.automation-toolbar button:hover {
  background: #333;
}
.node-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  margin-left: 6px;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;       /* ✅ ensure consistent vertical alignment */
  display: flex;                /* ⬅ helps align icon inside */
  align-items: center;          /* ⬅ center icon vertically */
  justify-content: center;
}

.node-header button:hover {
  color: #888;
}

.node-close-btn:hover {
  color: #ff5555 !important; /* 🔥 forces override */
}
 
.color-picker-popup{
  position:fixed;
  display:none;
  background:#222;
  padding:8px;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  z-index:10001;
  gap:6px; flex-wrap:wrap; width:auto;
}
.color-dot{
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--accent, #999);   /* visible ring */
  background: transparent;
  position: relative;
  cursor: pointer;
  padding: 0;
  transform: translateZ(0);
}
.color-dot::after{
  content:"";
  position:absolute; inset:4px;           /* inner circle */
  border-radius:50%;
  background: var(--swatch, #1e1e1e);     /* actual node color */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.color-dot:hover{ transform: scale(1.08); }
.color-dot.is-selected{ box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
/* distinct, high-contrast rings; inner is the real node color */
.color-picker-popup .color-dot{
  width:24px; height:24px; border-radius:50%;
  border:3px solid var(--accent);               /* vivid ring */
  background: transparent;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
}
.color-picker-popup .color-dot::after{
  content:"";
  position:absolute; inset:5px;                 /* inner swatch */
  border-radius:50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.color-picker-popup .color-dot:hover{
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 12px var(--accent);
}
.color-picker-popup .color-dot.is-selected{
  box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 0 16px var(--accent);
}


.automation-node .node-info-panel{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  top:48px;              /* just below header */
  background:rgba(10,10,10,.96);
  border:1px solid #454545;
  border-radius:12px;
  padding:12px;
  z-index:5;
  display:flex; flex-direction:column; gap:10px;
}
.automation-node .node-info-panel[hidden]{ display:none; }
.automation-node .node-info-panel .info-scroll{
  overflow:auto; flex:1; color:#eaeaea; font-size:13px; line-height:1.45;
}
.automation-node .node-info-panel h4{ margin:0 0 6px; }
.automation-node .node-info-panel button.info-close{
  align-self:flex-end; background:#1f1f1f; color:#fff; border:1px solid #444;
  padding:6px 10px; border-radius:8px; cursor:pointer;
}

.node-info-btn:hover::after {
  content: "Tento blok definuje odpoveď na spúšťací vstup";
  position: absolute;
  background: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  top: 100%;
  right: 0;
  white-space: nowrap;
  font-size: 12px;
  z-index: 1000;
  font-family: 'Montserrat', sans-serif;
}
/* 🇬🇧 English version */
html[lang="en"] .node-info-btn:hover::after {
  content: "This block defines the reply to a trigger input";
}
.node-info-btn {
  position: relative;
  display: flex;          /* ✅ ensures icon is vertically centered */
  align-items: center;
  justify-content: center;
}
/*  social btn */
.social-select-modal {
  background: #111;
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  min-width: 300px;
  text-align: center;
}

.social-btn-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
}

.social-choice-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: transparent;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.social-choice-btn:hover {
  background: #444;
  color: white;
}

.close-modal-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.close-modal-btn:hover {
  color: red;
}

/*  social btn */

/*  delay btn */

.delay-node {
  background: #2c2c2c;
  border: 1px solid #555;
  border-radius: 8px;
  width: 230px;
  padding: 10px;
}

.delay-body {
  margin-top: 10px;
  font-size: 13px;
  color: #ccc;
}

.delay-slider {
  width: 100%;
  margin-top: 4px;
}

.random-toggle {
  display: flex;
  align-items: center;
  margin-top: 8px;
  gap: 6px;
  cursor: pointer;
}

.random-box {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  background: #000;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  cursor: pointer;
  position: relative;
}

.random-box.checked::after {
  content: "✔";
  display: block;
  text-align: center;
  line-height: 18px; /* match height for vertical center */
  font-size: 14px;
  color: #2ecc71; /* green checkmark */
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.node-close-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 14px;
}

.node-close-btn:hover {
  color: red;
}

/*  delay btn */

/*  change btn */

.focus-node {
  border: 2px dashed #7f8c8d;
}

#focusSelectModal p {
  margin-top: 0;
  font-size: 16px;
  color: #fff;
}

#focusSelectModal .social-choice-btn {
  padding: 10px 16px;
  background: #444;
  border: 1px solid #888;
  color: white;
  cursor: pointer;
  border-radius: 8px;
  margin: 6px;
  transition: 0.2s;
}

#focusSelectModal .social-choice-btn:hover {
  background: #666;
}
/*  change btn */

/*  +- btn */
.automation-zoom-controls {
  position: absolute;
  top: 50px;
  right: 20px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.automation-zoom-controls button {
  background: #1f1f1f;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 8px #00000088;
  transition: background 0.2s;
}

.automation-zoom-controls button:hover {
  background: #333;
}
/*  +- btn */

.zoom-layer{
  position:absolute;        /* was relative */
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Reusable dropdown */
.au-dd {
  position: fixed;
  background: #222;
  border: 1px solid #555;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  padding: 4px;
  z-index: 10000;
}
.au-dd.is-hidden { display: none; }

.au-dd .dd-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #e8e8e8;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
}
.au-dd .dd-item:hover,
.au-dd .dd-item[aria-selected="true"] {
  background: #2f2f2f;
}
.au-dd .dd-sep { height: 1px; background: #444; margin: 6px 2px; }

/*__________________________________________COMPASS_________________________________________*/
.graph-compass{
  position:absolute; 
  top: 140px;           /* under your zoom +/- */
  right: 20px;
  z-index:1001;
  width:36px;height:36px;
  background:#1f1f1f;
  color:#fff;
  border:none;border-radius:50%;
  box-shadow:0 0 8px #00000088;
  cursor:pointer;
  transition:background .2s, transform .15s ease;
  display:flex;align-items:center;justify-content:center;
}
.graph-compass:hover{ background:#333; transform:scale(1.05); }
.graph-compass[hidden]{ display:none; }
/*__________________________________________COMPASS_________________________________________*/

.automation-canvas { background: transparent; } /* no !important */

#stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin: 0 0;
  will-change: transform;

  /* put the grid HERE */
  background: radial-gradient(#1b1b1b 1px, transparent 1px);
  background-size: 32px 32px;
}
/* Let clicks pass THROUGH empty zoom-layer areas */
#stage > .zoom-layer { pointer-events: none; }
/* …but keep nodes interactive */
#stage > .zoom-layer .automation-node,
#stage > .zoom-layer .automation-node * { pointer-events: auto; }

/* Let only the LINES in the SVG receive events (not the empty SVG area) */
#stage > svg.connection-layer { pointer-events: none; }
#stage > svg.connection-layer line {
  pointer-events: stroke; /* ← clickable only on the stroke */
  cursor: pointer;
}
#stage > .zoom-layer,
#stage > svg.connection-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin: 0 0;
  will-change: transform;
}
.zoom-layer { z-index: 1; }
svg.connection-layer { z-index: 0; }

#stage { position: relative; }
#stage .zoom-layer {
  position: relative;          /* ← anchor for .automation-node left/top */
  transform-origin: top left;
}
#stage svg.connection-layer {
  position: absolute; top: 0; left: 0;
  overflow: visible;           /* lines won’t be clipped */
  z-index: 1;                  /* under nodes (your JS sets 1/3 too) */
}


.zoom-dead {
  opacity: 0.5;
  cursor: default !important;
  pointer-events: none; /* optional; makes them completely inert */
}

/* --- Social block polish --- */
.social-settings{
  margin:10px 8px 2px;
  padding:12px;
  background:rgba(255,255,255,.04);
  border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.social-settings .row{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
  margin:8px 0;
}

.social-settings label{
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#9aa0a6;
}

.social-settings input,
.social-settings textarea{
  width:100%;
  background:#121212;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:10px 12px;
  color:#eaeaea;
  outline:none;
  box-sizing:border-box;
}

.social-settings input:focus,
.social-settings textarea:focus{
  border-color:#5e9cff;
  box-shadow:0 0 0 3px rgba(94,156,255,.15);
}

.social-settings input::placeholder,
.social-settings textarea::placeholder{
  color:#9aa0a6;
  opacity:.85;
}

.social-settings textarea{
  min-height:76px;
  resize:vertical;
  line-height:1.35;
}

/* Make the social header feel “owned” and balanced */
.automation-node[data-node-type="social"] .node-header{
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  border-radius: 8px;
  padding:10px 12px;
  margin: -8px -8px 8px;
}

/* Sharper connectors so the block feels premium */
.automation-node .node-connector{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(#fff, #7a7a7a);
  box-shadow: 0 0 0 2px #1e1e1e, 0 0 10px rgba(0,0,0,.5);
  transition: transform .08s ease, box-shadow .2s ease;
}
.automation-node .node-connector:hover{
  transform: scale(1.1);
  box-shadow: 0 0 0 2px #1e1e1e, 0 0 14px rgba(255,255,255,.25);
}

.social-settings .cd-ui{
  display:flex; align-items:center; gap:8px; margin:6px 0;
}
.social-settings .cd-ui .cd-dec,
.social-settings .cd-ui .cd-inc{
  background:#1f1f1f; border:1px solid rgba(255,255,255,.15);
  border-radius:8px; width:28px; height:28px; cursor:pointer; color:#eaeaea;
}
.social-settings .cd-ui .cd-val{
  min-width:24px; text-align:center; font-weight:600; color:#eaeaea;
}
.social-settings .cd-slider{ width:100%; }
.node-notes-row label { 
  color: #fff; 
}
/* SOCIAL: cooldown range look + fill */
.cd-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  outline: none;
  background:
    linear-gradient(to right,
      #16a34a 0,
      #16a34a var(--p,0%),
      #151515 var(--p,0%),
      #151515 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(0,0,0,.6);
}

/* make thumb sit flush with track edges (WebKit/Blink) */
.cd-slider::-webkit-slider-runnable-track{
  height: 14px;
  background: transparent;
  border-radius: 999px;
}
.cd-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  margin-top: -2px;               /* vertically centers on 14px track */
  border: 0;
}

/* Firefox */
.cd-slider::-moz-range-track{
  height: 14px;
  background: transparent;
  border-radius: 999px;
}
.cd-slider::-moz-range-thumb{
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.cd-slider::-moz-range-progress{
  background: #16a34a;
  height: 14px;
  border-radius: 999px 0 0 999px;
}
/* number next to creativity slider */
.range-line .range-val,
.range-line .cre-val { color: #fff !important; }

/* ADD BLOCK: health-bar look */
.ai-creativity{
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 100%;
  border-radius: 10px;
  outline: none;
  /* base gradient (you can tweak the colors) */
  background:
    linear-gradient(to right, #b9f3c7 0, #60d892 50%, #1bb364 100%) 0/var(--p,0%) 100% no-repeat,
    #121212;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.7);
}
/* add faint separators every 20px over the full bar */
.ai-creativity::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 10px;
  background:
    repeating-linear-gradient(to right,
      rgba(255,255,255,.08) 0 2px,
      transparent 2px 22px);
  pointer-events:none;
}
/* hide the thumb entirely */
.ai-creativity::-webkit-slider-thumb{ -webkit-appearance:none; width:0; height:0; border:0; }
.ai-creativity::-moz-range-thumb{ width:0; height:0; border:0; }
.ai-creativity::-webkit-slider-runnable-track{ background: transparent; }
.ai-creativity::-moz-range-track{ background: transparent; }


/* _________________________________________Add a pinch of CSS_______________________________________- */
#automation-connect-slot{
  position:sticky; top:12px; z-index:10005;
  margin:12px auto; max-width:900px;
}
.connect-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: #0e1116;
  border: 1px solid #222833;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.connect-banner button{
  background:#2e7d32; border:none; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer;
}
.cb-title { font-weight: 600; font-size: 15px; color: #e8eef8; }
.cb-sub   { margin-top: 4px; font-size: 13px; color: #a9b2c2; }

.btn-primary {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #5865f2, #4651d6);
  color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 4px 16px rgba(88,101,242,.25);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost {
  background: transparent; color: #c9d2e3; border: 1px solid #2a3140;
  padding: 10px 12px; border-radius: 10px; font-weight: 600; cursor: pointer;
}
.btn-ghost:hover { background: #151a22; }

.connect-modal {
  position: fixed; inset: 0; display: none;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index: 9999;
}
.cm-card {
  width: 520px; max-width: calc(100% - 32px);
  margin: 8vh auto; background: #0e1116; border: 1px solid #222833;
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 18px;
}
.cm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.cm-head h3 { margin:0; color:#e8eef8; font-size: 18px; }
.cm-x { background:transparent; color:#a9b2c2; border:0; font-size:26px; line-height:1; cursor:pointer; }
.cm-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; }
.cm-field { display:flex; flex-direction:column; gap:6px; }
.cm-field span { color:#c9d2e3; font-size:12px; }
.cm-field input, .cm-field select {
  background:#0b0f14; border:1px solid #2a3140; color:#e8eef8;
  border-radius:10px; padding:10px 12px; outline:none;
}
.cm-field input::placeholder { color:#6e7a90; }
.cm-footer { display:flex; justify-content:flex-end; gap:10px; margin-top: 14px; }
.connect-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:3000; display:none; }
.connect-modal .cm-card{
  width:360px; background:#222; border:1px solid #444; color:#eaeaea; border-radius:12px; padding:16px;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.connect-modal label{ display:block; font-size:12px; margin:8px 0 6px; }
.connect-modal input, .connect-modal select{
  width:100%; background:#121212; border:1px solid #444; color:#eaeaea; border-radius:8px; padding:8px;
}
.connect-modal .cm-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.connect-modal .cm-actions button{
  background:#1f1f1f; color:#fff; border:1px solid #444; border-radius:8px; padding:8px 12px; cursor:pointer;
}

.node-menu-btn { background:none; border:none; color:#fff; font-size:16px; cursor:pointer; }
.social-notes { margin:8px; }
.social-notes textarea { width:100%; min-height:70px; background:#2a2a2a; color:#ddd; border:none; border-radius:8px; padding:8px; }
.is-hidden { display:none; }

.au-dd{ position:fixed; background:#222; border:1px solid #555; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.45); padding:4px; z-index:10000; }
.au-dd.is-hidden{ display:none; }
.au-dd .dd-item{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border-radius:8px; cursor:pointer; color:#e8e8e8; background:transparent; border:none; text-align:left; white-space:nowrap; }
.au-dd .dd-item:hover, .au-dd .dd-item[aria-selected="true"]{ background:#2f2f2f; }

/* position banner at the bottom-right content area (not under sidebar) */
:root{ --sidebar-w: 260px; }

.automation-container #automation-connect-slot{
  position: fixed;
  left: var(--sidebar-w);
  right: 24px;
  bottom: 24px;
  z-index: 10040;
  margin: 0;
}

/* simple banner look (keeps your green .btn-primary) */
.connect-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#121212; border:1px solid #2a2a2a; border-radius:14px; padding:14px 16px;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.cb-title{ font-weight:700; color:#e8e8e8; font-size:15px; }
.cb-sub{ color:#b7b7b7; font-size:13px; margin-top:2px; }

/* blocker over the toolbar row */
#connectBlocker{
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  height: 100px;          /* tall enough to cover the toolbar buttons */
  z-index: 10030;
  display: none;          /* shown by JS when no accounts */
  background: transparent;
  pointer-events: auto;   /* intercept clicks */
}

/* dim/disable toolbar while blocked (optional) */
.automation-container.no-accounts .automation-toolbar button{
  pointer-events: none;
  opacity: .45;
  filter: grayscale(1);
}

/* _________________________________________Add a pinch of CSS________________________________________- */

/* ===================== Kontrola pred odoslaním (Moderation) ===================== */
.automation-node.check-node { width: 360px; }

.mod-badge {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 12px;
  border-radius: 999px;
  background: #22c55e; /* green */
  color: #0a0a0a;
  font-weight: 700;
}
.mod-badge.hidden { display: none; }

.mod-queue {
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mod-empty {
  opacity: .7;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
}
.mod-list { display: flex; flex-direction: column; gap: 10px; }

.mod-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px;
}
.mod-item .mod-meta {
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
  opacity: .8; font-size: 12px;
}
.mod-item .mod-chip {
  background: #0f172a;
  border: 1px solid #243453;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.mod-item .mod-incoming {
  font-size: 13px;
  opacity: .9;
  border-left: 2px solid #334155;
  padding-left: 8px;
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.mod-item .mod-label {
  display: block;
  font-size: 12px;
  opacity: .8;
  margin-bottom: 4px;
}
.mod-item .mod-reply {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border-radius: 10px;
  background: #0b0b0b;
  border: 1px solid #2b2b2b;
  color: #fff;
  padding: 8px;
}
.mod-item .mod-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}
.mod-item .mod-actions .btn-approve,
.mod-item .mod-actions .btn-reject {
  appearance: none; border: none; cursor: pointer;
  padding: 7px 10px; border-radius: 10px; font-weight: 600; font-size: 13px;
}
.mod-item .btn-approve { background: #22c55e; color: #03210E; }
.mod-item .btn-approve:hover { filter: brightness(1.05); }
.mod-item .btn-reject { background: #ef4444; color: #2b0b0b; }
.mod-item .btn-reject:hover { filter: brightness(1.05); }

/* Kontrola: white text + new proportions */
.automation-node[data-node-type="check"],
.automation-node.check-node {
  width: 300px;              /* narrower */
  min-height: 280px;         /* taller base */
  color: #fff;               /* inherit white text */
}

/* header text stays bright */
.automation-node[data-node-type="check"] .node-header { color: #fff; }

/* queue area sizing */
.automation-node[data-node-type="check"] .mod-queue {
  max-height: 380px;         /* make the box feel taller */
  overflow: auto;
}

/* make empty + list items readable on dark */
.automation-node[data-node-type="check"] .mod-empty,
.automation-node[data-node-type="check"] .mod-item,
.automation-node[data-node-type="check"] .mod-meta,
.automation-node[data-node-type="check"] .mod-incoming,
.automation-node[data-node-type="check"] .mod-label {
  color: #fff;
  opacity: 0.95;
}

/* if any textarea remains (legacy), make it readable */
.automation-node[data-node-type="check"] .node-textarea {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.automation-node[data-node-type="check"] .node-textarea::placeholder {
  color: #e6e6e6;
  opacity: .85;
}
/* Kontrola – rounded, dashed inner area (works for both legacy textarea and the new queue) */
.automation-node[data-node-type="check"] .node-textarea,
.automation-node[data-node-type="check"] .mod-queue{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  padding: 10px;
}
/* === Kontrola pred odoslaním — outer dashed ring like before === */
.automation-node[data-node-type="check"] {
  position: relative;              /* ensure we can paint the ring */
}

/* draw the green dashed ring without affecting layout */
.automation-node[data-node-type="check"]::before {
  content: "";
  position: absolute;
  inset: 0;                        /* hug the node edges */
  border-radius: 12px;             /* same rounding as other nodes */
  border: 1px dashed #55d187;      /* the classic green ring */
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(85,209,135,0.18) inset,
    0 0 18px rgba(85,209,135,0.10) inset;
}

/* keep text readable */
.automation-node[data-node-type="check"],
.automation-node[data-node-type="check"] .node-header,
.automation-node[data-node-type="check"] .mod-empty,
.automation-node[data-node-type="check"] .mod-item,
.automation-node[data-node-type="check"] .mod-item .mod-incoming {
  color: #f2f2f2;
}

/* the little empty-state bubble inside */
.automation-node[data-node-type="check"] .mod-empty {
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  opacity: 1;                      /* make it bright/white now */
}

/* sizing: a bit narrower, taller feel */
.automation-node[data-node-type="check"] {
  width: 340px;
  min-height: 260px;
}

/* round + icon button in the toolbar */
.fab-add-account{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #111;
  color: #fff;
  border: 1px solid #2a2a2a;
  box-shadow: 0 0 0 2px #2ecc7122 inset;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fab-add-account:hover{
  transform: translateY(-1px);
/*  background:#151515;*/
  box-shadow: 0 0 0 2px #2ecc71aa inset;
}
.fab-add-account:active{ transform: translateY(0); }

/* Moderation – classic card look */
.mod-body { display:flex; flex-direction:column; gap:12px; padding:8px 10px; }
.mod-list { display:flex; flex-direction:column; gap:12px; }
.mod-empty { opacity:.75; font-size:13px; padding:8px 2px; }

.mod-item {
  background:#121416;
  border:1px solid #2a2f35;
  border-radius:12px;
  padding:12px;
}
.mod-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.mod-chip {
  background:#1e293b;
  color:#cbd5e1;
  font-size:11px; line-height:1; padding:4px 6px; border-radius:6px; text-transform:lowercase;
}
.mod-who { color:#e5e7eb; font-weight:500; }
.mod-incoming {
  background:#0f1113; border:1px dashed #2a2f35; border-radius:8px;
  padding:8px; white-space:pre-wrap; margin-bottom:8px; color:#e5e7eb;
}
.mod-label { display:block; font-size:12px; opacity:.7; margin-bottom:4px; }
.mod-reply { width:100%; min-height:72px; resize:vertical; border-radius:8px; padding:8px; border:1px solid #2a2f35; background:#0f1113; color:#e5e7eb; }
.mod-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.mod-actions .btn-approve {
  background:#16a34a; color:white; border:0; border-radius:8px; padding:6px 10px; cursor:pointer;
}
.mod-actions .btn-reject {
  background:#ef4444; color:white; border:0; border-radius:8px; padding:6px 10px; cursor:pointer;
}


/* ===================== Kontrola pred odoslaním (Moderation) ===================== */

/* _________________________________________TOKEN USAGE________________________________________- */

.token-usage-container {
  position: absolute;
  top: 80px;  /* below topbar */
  left: 240px; /* beside sidebar */
  width: calc(100vw - 240px);
  height: calc(100vh - 80px);
  padding: 40px;
  box-sizing: border-box;
  background-color: #111;  /* same as analytics-dashboard-container */
  display: flex;
  justify-content: flex-end;  /* keep it aligned to the right */
  align-items: center;
}

.token-credit-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.token-credit-panel {
  background-color: #0A0A0A;  /* match analytics inner panels */
  border: 1px solid #222;
  box-shadow: 0 0 12px rgba(255,255,255,0.06);
  padding: 40px 30px;
  border-radius: 16px;
  max-width: 400px;
  width: 100%;
  color: white;
  text-align: center;
}


.token-progress-bar {
  width: 100%;
  height: 20px;
  background: #333;
  border-radius: 10px;
  margin: 20px 0;
  overflow: hidden;
}

.token-progress-fill {
  height: 100%;
  width: 100%; /* Starts full */
  background: #4caf50; /* Green */
  transition: width 0.3s ease-in-out;
}

/* Pulsing effect for low balance */
@keyframes pulseBorder {
  0% {
    box-shadow: 0 0 5px rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
  }
  50% {
    box-shadow: 0 0 15px rgba(255,255,255,0.8);
    border-color: #fff;
  }
  100% {
    box-shadow: 0 0 5px rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
  }
}

.pulse-outline {
  animation: pulseBorder 1.8s infinite ease-in-out;
  border: 1px solid #fff !important;
}

.sidebar-nav a.pulse-warning {
  animation: pulse-border 1.5s infinite;
  border-color: #fff !important; /* Keep white border */
  position: relative;
  z-index: 2000; /* Always on top */
}


.token-stats-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(100vw - 280px); /* Stretch closer to left */
  height: calc(100vh - 120px); /* Leave some top/bottom breathing space */
  margin: 40px auto; /* Center horizontally */
  background-color: #0A0A0A;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 30px 40px;
  box-sizing: border-box;
  color: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,0.08);
}

/* Top bar styled like Tokeny & Kredit first view */
.token-stats-topbar {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}


.token-stats-topbar h2 {
  font-size: 20px;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #fff;  /* White, no yellow */
}

.token-stats-topbar p {
  margin: 8px 0 0;
  color: #ddd;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

#showFullTokenStats {
  background-color: #000000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 25px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 28px;
  cursor: pointer;
  margin: 20px auto 0 auto; /* center below panel */
  display: block;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 0 6px rgba(255,255,255,0.05);
}

#showFullTokenStats:hover {
  background-color: #2a2a2a;
  transform: scale(1.02);
}

.token-stats-toggle {
  font-family: 'Montserrat', sans-serif;
  margin-top: 20px;
  padding: 8px 20px;
  background: transparent;
  color: #fff;
  font-weight: 500;
  border: 1px solid #fff;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}

.token-stats-toggle:hover {
  background-color: #fff;
  color: #000;
}

.back-arrow-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  color: #000000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px rgba(255,255,255,0.3);
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 1000;
}

.back-arrow-btn:hover {
  background-color: #e5e5e5;
  transform: scale(1.05);
}


.token-stats-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 90%;  /* Keep charts inside */
  max-width: 1400px;
  flex: 1;
  align-items: stretch;
}

.token-chart-card {
  background-color: #111;
  border: 1px solid #333;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 0 8px rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-height: 500px; /* Prevent charts from overflowing */
  overflow: hidden;
}

#sourceTokenChart {
  max-width: 90%;
  max-height: 400px;  /* Prevents bottom overflow */
  height: auto;
}

/* Remove the yellow text from the header */
.token-stats-header h4 {
  color: #fff;  /* White text */
  margin: 0;
}

/* Hide the credit wrapper when full stats is shown */
#fullTokenStats:visible ~ .token-credit-wrapper,
#fullTokenStats[style*="display: block"] ~ .token-credit-wrapper {
  display: none !important;
}

/* Or force the fullTokenStats to fill the container regardless of wrapper */
.token-usage-container.full-stats-active .token-credit-wrapper {
  display: none;
}

.token-usage-container.full-stats-active #fullTokenStats {
  display: flex !important;
  flex-direction: column;
  width: calc(100vw - 240px - 80px);
  height: calc(100vh - 80px - 80px);
  margin: 40px 40px 40px 40px;
  background-color: #0A0A0A;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 20px 40px;
  box-sizing: border-box;
}

#helpView {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}

#helpView h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
}

#helpView p {
  background-color: #111;
  padding: 12px 18px;
  margin: 0;
  border: 1px solid #333;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: #fff;
}

#helpView strong {
  color: #4cafef; /* subtle blue highlight */
}

/* FAQ Accordion Styles */
.faq-item {
  background-color: #111;
  border: 1px solid #fff; /* White border, no Arkan blue */
  border-radius: 16px;
  margin: 20px 0;
  padding: 20px 20px; /* Smaller default padding */
  color: #fff;
  width: 100%;
  min-height: auto;  /* Let it shrink naturally */
  transition: background-color 0.3s ease; /* Smaller default size */
  cursor: pointer;
}

.faq-item:hover {
  background-color: #1a1a1a;
}

.faq-question {
  font-weight: 500;
  font-size: 16px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.faq-answer {
  margin-top: 5px;
  display: block;
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.faq-item.open .faq-answer {
  opacity: 1;
  max-height: 400px; /* Smooth fade in, no jump */
}

/* Stretch FAQ width */
#helpView .faq-item {
  max-width: 100%;
}

/* Token Progress Bar Percentage */
.token-progress-fill {
  position: relative;
  text-align: center;
  font-weight: 600;
  color: #fff;
}

.faq-item.open {
  background-color: #1a1a1a;
  border-color: #fff;
}

#tokenProgressText {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #fff;
}

/* === KONVERZÁCIE (Chat Sessions) ======================================= */
.chat-sessions-container { display:block; width:100%;   padding-left: calc(var(--sidebar-w) + 8px);padding-right: 190px; background: #111; padding-top: 16px;}

/* wider card */
.cs-card{
  width:min(1280px, 96vw);
  margin: 78px auto 18px;        /* more top air so nothing is covered */
  padding:0 8px;
}
/* session badge – higher contrast */
.cs-chip-id{
  background:#0f1a2a;           /* deep navy */
  border:1px solid #1f6feb;     /* bright blue edge */
  color:#cfe8ff;                /* light text */
  font-family: ui-monospace, Menlo, monospace;
  font-size:12px;
  padding:2px 8px;
  border-radius:8px;
}

/* title spacing */
.cs-title{ color:#fff; margin:0 0 12px; font-weight:600; padding-top: 8px; }

/* filters & chips (unchanged basics) */
.cs-quick{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.cs-chip{ background:#1a1a1a; color:#ddd; border:1px solid #2a2a2a; border-radius:999px; padding:6px 10px; cursor:pointer; }
.cs-chip.is-on{ background:#2ecc71; border-color:#2ecc71; color:#111; font-weight:600; }
.cs-spacer{ flex:1; }
.cs-advanced-toggle{ color:#9aa; cursor:pointer; text-decoration:none; }

/* darker, wider search row */
.cs-filters{
  display:grid;
  grid-template-columns: 180px 180px minmax(280px, 1fr) 220px 130px auto;
  gap:12px;
  align-items:end;
}
.cs-filters label{ color:#bbb; font-size:12px; display:block; margin-bottom:4px; }
.cs-filters input, .cs-filters select{
  width:90%; background:#111; color:#fff; border:1px solid #333; border-radius:10px; padding:8px 10px;
}
.cs-wide{ grid-column: span 2; }
.cs-apply{ background:#2ecc71; color:#111; border:none; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; }

/* make native date inputs feel “Arkan” */
.cs-filters input[type="date"]{
  color-scheme: dark;                 /* dark popup in modern browsers */
  accent-color:#2ecc71;
}
/* white calendar icon in WebKit (Chrome/Edge/Safari) */
.cs-filters input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);                  /* turn the glyph white */
  opacity:.9; cursor:pointer;
  background-color:#111; color:#fff; border:1px solid #333; border-radius:10px;
}
/* Firefox icon color (best we can do) */
.cs-filters input[type="date"]::-moz-focus-inner{ border:0; }

/* select arrow – white chevron */
.cs-filters select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 20 12' fill='none'><path d='M2 2l8 8 8-8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position: right 10px center;
  padding-right:34px;
}

/* sticky tool bar below the top bar */
.cs-toolbar{
  position: sticky;
  top: calc(var(--topbar-h) + 32px);
  z-index: 5;
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  margin-top: 25px;
}

/* table area scrolls; make it breathe and wider */
.cs-table{
  background:#0f0f0f;
  border:1px solid #222;
  border-radius:16px;
  overflow:auto;
  margin-top:12px;
  max-height: calc(100vh - 340px);
}
.cs-table table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.cs-table thead th{
  position:sticky; top:0; z-index:1;
  background:#121212; color:#aaa; text-align:left; padding:12px 14px;
}
.cs-table td{ padding:12px 14px; border-top:1px solid #1f1f1f; vertical-align:top; }
.cs-ellipsis{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  line-clamp:2;
}
/* the answer column in Arkan green */
.cs-table td:nth-child(4){ color:#9fd09f; }

/* pager – numbers white + Arkan style buttons */
.cs-pager{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  margin:12px 0 0px;
}
.cs-pager #cs-page{ color:#fff; font-weight:600; }

/* nice pill buttons (works with #cs-prev/#cs-next AND .cs-page-btn) */
.cs-pager #cs-prev,
.cs-pager #cs-next,
.cs-pager .cs-page-btn{
  background:#1b1b1b; color:#eee;
  border:1px solid #2a2a2a;
  border-radius:999px;
  padding:8px 14px; font-weight:600; cursor:pointer;
  transition: all .15s ease;
}
.cs-pager #cs-prev:hover,
.cs-pager #cs-next:hover,
.cs-pager .cs-page-btn:hover{
  background:#2ecc71; color:#111; border-color:#2ecc71;
  box-shadow:0 0 0 3px rgba(46,204,113,.22);
}
.cs-pager #cs-prev:disabled,
.cs-pager #cs-next:disabled{
  opacity:.45; cursor:not-allowed; filter:grayscale(.2);
}

/* make the search input stand out a bit */
#cs-q{ outline:0; box-shadow:0 0 0 2px rgba(46,204,113,.25); }
/* responsive: stack neatly on narrower screens */
@media (max-width: 1280px){
  .cs-filters{
    grid-template-columns: 1fr 1fr;
  }
  .cs-wide{ grid-column: 1 / -1; }        /* search takes full row */
  .cs-adv{ grid-column: 1 / -1; }         /* session id (advanced) full row */
  .cs-apply{ justify-self:end; }          /* filter button to the right */
}

.cs-dialog-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:10050}
.cs-dialog{width:min(900px,92vw);max-height:84vh;background:#0f0f0f;border:1px solid #222;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.45);display:flex;flex-direction:column}
.cs-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #181818}
.cs-dialog-title{margin:0;color:#fff;font-weight:700;font-size:16px}
.cs-dialog-close{background:#1b1b1b;color:#eee;border:1px solid #2a2a2a;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:700}
.cs-dialog-close:hover{background:#2ecc71;color:#111;border-color:#2ecc71}
.cs-thread{padding:16px;overflow:auto;min-height:220px}
.cs-msg{max-width:82%;padding:10px 12px;border-radius:12px;margin:8px 0;line-height:1.45;font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.cs-msg.user{background:#1b1b1b;color:#ddd;border:1px solid #2a2a2a;align-self:flex-start;border-top-left-radius:6px}
.cs-msg.bot{background:#13261a;color:#b8f3c7;border:1px solid #1f3a2a;align-self:flex-end;border-top-right-radius:6px}
.cs-msg .role{display:block;font-size:11px;opacity:.7;margin-bottom:4px}
.cs-thread-empty,.cs-thread-loading{color:#bbb;text-align:center;padding:30px 10px}
.cs-open{
  cursor:pointer !important;
  transition:background .15s,color .15s,border-color .15s,transform .12s,box-shadow .15s !important;
}

.cs-open:hover{
  background:#2ecc71 !important;
  color:#111 !important;
  border-color:#2ecc71 !important;
  transform: translateY(-1px) !important;
  box-shadow:0 6px 16px rgba(46,204,113,.22) !important;
}

.cs-open:active{ transform:translateY(0) !important; box-shadow:none !important; }
.cs-open:focus-visible{ outline:none !important; box-shadow:0 0 0 3px rgba(46,204,113,.35) !important; }

  @media (max-width: 1250px) {
    .email-assistant-grid {
      grid-template-columns: 1fr;
    }
  
    .email-sidebar,
    .email-box {
      width: 100%;
    }
  
    .email-assistant-container {
      margin-left: 0;
      width: 100vw;
    }
    .email-assistant-header {
      padding: 0px;
  }
  }

  .token-stats-section h3 {
    margin-bottom: 10px;
    color: #ffd700;
  }

  @keyframes bubble-wiggle {
    0% { transform: translateX(0px); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(0px); }
    75% { transform: translateX(4px); }
    100% { transform: translateX(0px); }
  }