/* Footer styling */
.footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 10px);
    height: 35px;
    background: linear-gradient(var(--primary-color-start), var(--primary-color-end));
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Make children match footer height */
    z-index: 999;
    margin-right: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* Left button group */
.footer-left {
    display: flex;
}

/* Chat button on right */
.footer-right {
    display: flex;
}

#chatBtn {
 border-top-right-radius: 5px; 
}

.button-group {
    display: flex;
    height: 100%; /* Ensure group fills footer height */
}

.button-group button:not(:last-child) {
  border-right: 1px solid #000; /* Prevent double borders; border color contained here. */
}

.footer-btn {
    background: linear-gradient(var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center; /* Center text vertically */
    height: 100%; /* Fill footer height */
}

.footer-btn:hover {
    background: #666;
}

/* Rounded corners for left group */
.button-group .footer-btn:first-child {
    border-top-left-radius: 5px;
}

/*
.footer-btn:last-child {
    border-top-right-radius: 5px;
}
Disabled on purpose. */

/* Chat popup styling */
.chat-popup {
    display: none;
    position: fixed;
    bottom: 35px;
    right: 0;
    width: 300px;
    background: white;
    border: 1px solid #ccc;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index: 1000;
}

.chat-header {
    background: linear-gradient(var(--primary-color-start), var(--primary-color-end));
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header button {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.chat-body {
    padding: 10px;
}

.chat-body textarea {
    width: 100%;
    height: 60px;
    resize: none;
    padding: 5px;
}

.chat-footer {
    padding: 10px;
    text-align: right;
}

.send-btn {
    background: #0078d7;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
}

.send-btn:hover {
    background: #005fa3;
}

/* Multiple theme spam */

:root .chat-header {
  --primary-color-start: #0078d7;
  --primary-color-end: #004680;
}

:root .footer-btn {
  --primary-color-start: #0078d7;
  --primary-color-end: #004680;
}

.dark-theme .footer {
  --primary-color-start: #cccccc;
  --primary-color-end: #737373;
}

.dark-theme .footer:hover {
  --primary-color-start: #8c8c8c;
  --primary-color-end: #333333;
}