body {
    background: linear-gradient(135deg, #1a1333 0%, #2d1a4d 100%);
    color: #e0d7ff;
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* Add a subtle animated background effect */
    background-attachment: fixed;
    background-size: cover;
}

.main-layout {
    display: flex;
    gap: 24px;
    padding: 24px;
    min-height: 100vh;
    /* Glassmorphism effect */
    backdrop-filter: blur(2px);
}

.container {
    max-width: 500px;
    margin: 40px auto;
    background: #232323;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 8px #0005;
}

.conversation-panel, .preview-panel {
    background: rgba(36, 19, 54, 0.85);
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31, 7, 68, 0.37);
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Glassmorphism */
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(123, 125, 251, 0.18);
}

.conversation-panel {
    margin-right: 12px;
    min-width: 700px;
    max-width: 900px;
    padding-bottom: 16px;
}

.preview-panel {
    min-width: 400px;
    max-width: 450px;
    padding-bottom: 16px;
}

.conversation-header, .preview-header {
    padding: 18px 24px 12px 24px;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid #3d2c5a;
    color: #e0d7ff;
    letter-spacing: 1px;
    background: rgba(123, 125, 251, 0.08);
    backdrop-filter: blur(2px);
}

.tabs {
    display: flex;
    gap: 24px;
    padding: 0 24px;
    margin-top: 8px;
    border-bottom: 1.5px solid #3d2c5a;
}

.tab {
    background: none;
    border: none;
    color: #bbaaff;
    font-size: 1rem;
    padding: 12px 0 8px 0;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.tab.active {
    color: #a084ee;
    border-bottom: 2.5px solid #a084ee;
    background: rgba(123, 125, 251, 0.08);
    border-radius: 6px 6px 0 0;
}

.tab-content {
    padding: 24px;
    flex: 1;
}

#chat-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

#message-input {
    flex: 1;
    padding: 8px;
    border-radius: 4px;
    border: none;
}

#add-message {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #3a86ff;
    color: #fff;
    cursor: pointer;
}

/* Chat preview area */
#chat-preview {
    background: transparent;   /* Remove white background */
    padding: 0;                /* Remove extra padding */
    border-radius: 0;          /* Remove rounded corners */
    min-height: 200px;
    max-width: 100%;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    box-shadow: none;
    position: relative;
}

/* Common bubble style */
.bubble {
    display: inline-block;
    padding: 10px 16px;
    margin: 8px 0;
    border-radius: 18px;
    max-width: 80%;
    word-break: break-word;
    font-size: 15px;
    position: relative;
    clear: both;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

/* Left (Receiver) bubble */
.bubble.left {
    background: #e5e5ea;
    color: #222;
    float: left;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

/* Right (Sender) bubble */
.bubble.right {
    background: #007aff;
    color: #fff;
    float: right;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.preview-msg-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
    width: 100%;
}
.preview-msg-row.left {
    justify-content: flex-start;
    text-align: left;
}
.preview-msg-row.right {
    justify-content: flex-end;
    text-align: right;
}
.preview-msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #bfc3c9 url('https://cdn-icons-png.flaticon.com/512/149/149071.png') center/cover no-repeat;
    margin: 0 12px 0 0;
    flex-shrink: 0;
}
.preview-msg-row.right .preview-msg-avatar {
    margin-left: 8px;
    margin-right: 0;
    order: 2; /* Avatar bubble ke baad aaye */
}
.preview-msg-bubble {
    background: #23283a;
    color: #fff;
    border-radius: 18px;
    padding: 12px 22px;
    font-size: 1.08rem;
    font-weight: 500;
    box-shadow: 0 2px 8px #0002;
    min-width: 60px;
    max-width: 70%;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.preview-msg-row.right .preview-msg-bubble {
    background: #7b7dfb;
    color: #fff;
    align-items: flex-end;
}
.preview-msg-name {
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: #bbaaff;
}
.preview-msg-row.right .preview-msg-name {
    color: #fff;
}
.preview-msg-text {
    font-size: 1.08rem;
    word-break: break-word;
    color: #e0d7ff;
}
.preview-msg-row.right .preview-msg-text {
    color: #fff;
}

@media (max-width: 600px) {
    #chat-preview {
        padding: 10px 4px 10px 4px;
    }
    .preview-msg-bubble {
        padding: 8px 12px;
        font-size: 1rem;
    }
}

.messages-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(123, 125, 251, 0.06);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 2px 8px #a084ee22;
}

.messages-table th, .messages-table td {
    padding: 14px 12px;
    text-align: left;
    font-size: 1rem;
}

.messages-table th {
    background: rgba(123, 125, 251, 0.13);
    color: #bbaaff;
    font-weight: 500;
    border-bottom: 1px solid #3d2c5a;
}

.messages-table td {
    background: rgba(123, 125, 251, 0.06);
    color: #fff;
    border-bottom: 1px solid #3d2c5a;
}

.messages-table select, .messages-table input[type="text"] {
    background: rgba(36, 19, 54, 0.85);
    color: #e0d7ff;
    border: 1px solid #7b7dfb;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 1rem;
    margin-right: 6px;
    outline: none;
    transition: border 0.2s;
}

.messages-table select:focus, .messages-table input[type="text"]:focus {
    border: 1.5px solid #a084ee;
}

.messages-table input[type="text"] {
    width: 180px;
}

.message-footer {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.preview-content {
    padding: 24px;
}

.chat-header {
    display: flex;
    align-items: center;
    background: rgba(123, 125, 251, 0.13);
    border-radius: 12px 12px 0 0;
    padding: 12px 16px;
    margin-bottom: 8px;
    position: relative;
    box-shadow: 0 2px 8px #a084ee22;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #23283a;
    display: inline-block;
    margin-right: 12px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/149/149071.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px #a084ee44;
}

.chat-title {
    font-weight: 600;
    color: #fff;
    margin-right: 8px;
    letter-spacing: 0.5px;
}

.chat-status {
    color: #a084ee;
    font-size: 0.98rem;
    margin-right: auto;
}

.chat-icons {
    display: flex;
    gap: 12px;
}

.icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 0 4px #a084ee88);
}

.icon.video {
    background: url('https://cdn-icons-png.flaticon.com/512/727/727245.png') no-repeat center/contain;
}

.icon.call {
    background: url('https://cdn-icons-png.flaticon.com/512/724/724664.png') no-repeat center/contain;
}

.preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 0 24px;
    font-size: 1rem;
    color: #bbaaff;
}

.settings-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings-label {
    font-size: 1.08rem;
    color: #bbaaff;
    font-weight: 500;
    margin-bottom: 12px;
    margin-top: 0;
    letter-spacing: 0.5px;
}

.character-cards {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    margin-bottom: 18px;
}

.character-card {
    background: rgba(123, 125, 251, 0.10);
    border-radius: 12px;
    padding: 16px 18px 10px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 120px;
    box-shadow: 0 2px 8px #a084ee22;
}

.character-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
}
.character-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #23283a;
    object-fit: cover;
    border: 2px solid #a084ee;
    box-shadow: 0 2px 8px #a084ee44;
}
.char-edit-btn, .char-del-btn {
    position: absolute;
    top: 4px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(123, 125, 251, 0.18);
    color: #a084ee;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}
.char-edit-btn {
    left: 4px;
}
.char-del-btn {
    right: 4px;
}
.char-edit-btn:hover, .char-del-btn:hover {
    background: #a084ee;
    color: #fff;
}

.character-name {
    color: #e0d7ff;
    font-size: 1rem;
    margin-top: 2px;
    text-align: center;
    letter-spacing: 0.2px;
}

.btn.add-character {
    background: none;
    color: #a084ee;
    border: 1.5px solid #a084ee;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 1rem;
    margin-left: 12px;
    margin-bottom: 6px;
    transition: background 0.2s, color 0.2s;
    box-shadow: none;
}
.btn.add-character:hover {
    background: #a084ee;
    color: #fff;
}

.settings-select {
    background: rgba(36, 19, 54, 0.85);
    color: #e0d7ff;
    border: 1.5px solid #7b7dfb;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 1rem;
    margin-bottom: 18px;
    margin-top: 8px;
    width: 220px;
    outline: none;
    transition: border 0.2s;
}
.settings-select:focus {
    border: 1.5px solid #a084ee;
}

.settings-model-info {
    background: rgba(123, 125, 251, 0.13);
    color: #bbaaff;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 8px;
    font-size: 1rem;
    margin-top: 8px;
    border: 1px solid #23283a;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
    margin-top: 18px;
}

.template-card {
    background: rgba(123, 125, 251, 0.10);
    border-radius: 14px;
    padding: 0 0 8px 0;
    box-shadow: 0 2px 8px #a084ee22;
    border: 2px solid transparent;
    transition: border 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 260px;
}
.template-card.selected {
    border: 2px solid #e05cff;
    box-shadow: 0 0 0 3px #e05cff33;
}
.template-label {
    color: #bbaaff;
    font-size: 1.05rem;
    padding: 10px 18px 0 18px;
    margin-top: 8px;
    border-top: 1px solid #23283a;
}

.template-preview {
    border-radius: 12px 12px 0 0;
    padding: 0;
    margin: 0;
    min-height: 120px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.iphone-light {
    background: #f8f8fa;
    border-bottom: 1px solid #e5e5ef;
}
.iphone-dark {
    background: linear-gradient(135deg, #23243a 60%, #181c24 100%);
    border-bottom: 1px solid #23283a;
}
.whatsapp-light {
    background: #f4f7f9;
    border-bottom: 1px solid #e5e5ef;
}
.whatsapp-dark {
    background: #181c24;
    border-bottom: 1px solid #23283a;
}
.tinder-light {
    background: #fff;
}
.tinder-dark {
    background: #181c24;
}

.tpl-header {
    display: flex;
    align-items: center;
    padding: 10px 14px 0 14px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #23243a;
    gap: 8px;
}
.iphone-dark .tpl-header,
.whatsapp-dark .tpl-header {
    color: #fff;
}
.tpl-header.tinder {
    display: flex;
    align-items: center;
    padding: 14px 18px 0 18px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #23243a;
    gap: 8px;
    background: none;
}
.tinder-dark .tpl-header.tinder {
    color: #fff;
}

.tpl-back {
    font-size: 1.3rem;
    color: #7b7dfb;
    margin-right: 6px;
}
.tpl-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d1d1e7;
    color: #7b7dfb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 8px;
}
.iphone-dark .tpl-avatar {
    background: #23283a;
    color: #fff;
}
.tpl-title {
    flex: 1;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.tpl-status {
    color: #7b7dfb;
    font-size: 0.98rem;
    margin-left: 8px;
}
.tpl-video, .tpl-call {
    width: 22px;
    height: 22px;
    margin-left: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
.tpl-video {
    background-image: url('https://cdn-icons-png.flaticon.com/512/727/727245.png');
}
.tpl-call {
    background-image: url('https://cdn-icons-png.flaticon.com/512/724/724664.png');
}
.tpl-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e0f7 url('https://cdn-icons-png.flaticon.com/512/149/149071.png') center/cover no-repeat;
    margin-right: 8px;
    display: inline-block;
}

.tpl-message-row {
    display: flex;
    margin: 18px 18px;      /* Add left/right margin */
    align-items: flex-end;  /* Align avatar and bubble */
}
.tpl-message-row.left {
    justify-content: flex-start;
    text-align: left;
}
.tpl-message-row.right {
    justify-content: flex-end;
    text-align: right;
}
.tpl-message {
    background: #f5f6fa;
    color: #23243a;
    padding: 12px 22px;
    border-radius: 18px;
    font-size: 1.15rem;
    box-shadow: 0 2px 8px #0001;
    max-width: 70%;
    display: inline-block;
}
.tpl-message-row.right .tpl-message {
    background: #007aff;
    color: #fff;
}
.tpl-message-row.right .tpl-avatar {
    margin-left: 8px;
    margin-right: 0;
    order: 2; /* Avatar bubble ke baad aaye */
}

.tpl-menu {
    margin-left: auto;
    font-size: 1.3rem;
    color: #bbaaff;
    cursor: pointer;
}

.tpl-match-row {
    padding: 8px 18px 0 18px;
    color: #888;
    font-size: 0.98rem;
}
.tinder-dark .tpl-match-row.dark {
    color: #bbaaff;
}

.tpl-heart {
    margin-left: auto;
    font-size: 1.5rem;
    color: #d1d1e7;
}
.tinder-dark .tpl-heart {
    color: #fff;
}

/* Cantina styles refined */
.cantina {
    background: #181c24;
}
.tpl-cantina-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0 0 0;
}
.tpl-cantina-logo {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #00e6d0;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #00e6d088;
    margin-bottom: 2px;
}
.tpl-header.cantina {
    display: flex;
    align-items: center;
    padding: 10px 18px 0 18px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    gap: 8px;
    background: none;
}
.tpl-back {
    color: #fff;
    font-size: 1.3rem;
    margin-right: 8px;
    font-weight: 700;
}
.tpl-cantina-chats {
    color: #fff;
    font-size: 1.08rem;
    margin-right: 10px;
    margin-left: 0;
    font-weight: 500;
}
.tpl-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #bfc3c9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-right: 8px;
    box-shadow: 0 2px 8px #23283a55;
}
.tpl-header.cantina .tpl-avatar {
    margin-right: 10px;
}
.tpl-title {
    color: #fff;
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: 0.2px;
    margin-left: 0;
}
.tpl-cantina-divider {
    border-bottom: 1px solid #23283a;
    margin: 12px 0 0 0;
}
.tpl-message-row.cantina {
    background: none;
    padding: 18px 18px 18px 18px;
    display: flex;
    align-items: flex-start;
    margin-top: 0;
}
.tpl-message.cantina {
    background: #23283a;
    color: #fff;
    border-radius: 12px;
    padding: 10px 18px 10px 18px;
    font-size: 1.08rem;
    font-weight: 500;
    box-shadow: 0 1px 2px #0001;
    display: inline-block;
    border: 1.5px solid #23283a;
    min-width: 220px;
    position: relative;
    margin-left: 0;
}
.tpl-cantina-sender {
    color: #00e6d0;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 2px;
}
.tpl-cantina-tick {
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 2px;
    color: #00e6d0;
}
.tpl-message.cantina br {
    line-height: 1.2;
}
.templates-grid .template-card .template-preview.cantina {
    background: #181c24;
    border-radius: 12px 12px 0 0;
    border: 1.5px solid #23283a;
    min-height: 180px;
    padding-bottom: 0;
}

/* Avatar for light templates */
.iphone-light .tpl-avatar,
.whatsapp-light .tpl-avatar,
.tinder-light .tpl-avatar {
    background: #d1d1e7;
    color: #23243a; /* Dark text for visibility */
    box-shadow: 0 2px 8px #23283a22;
}

/* Header text for light templates */
.iphone-light .tpl-header,
.whatsapp-light .tpl-header,
.tinder-light .tpl-header {
    color: #23243a; /* Dark text for visibility */
}

/* Message bubble for light templates */
.iphone-light .tpl-message,
.whatsapp-light .tpl-message,
.tinder-light .tpl-message {
    background: #f5f6fa;
    color: #23243a;
    box-shadow: 0 2px 8px #0001;
}

::-webkit-scrollbar {
    width: 8px;
    background: #3d2c5a;
}
::-webkit-scrollbar-thumb {
    background: #a084ee55;
    border-radius: 8px;
}

.scriptgen-section {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.scriptgen-title {
    font-size: 1.13rem;
    font-weight: 500;
    color: #e0d7ff;
    margin-bottom: 10px;
}

.scriptgen-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.btn.scriptgen-upload {
    background: none;
    color: #a084ee;
    border: 1.5px solid #a084ee;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: none;
    transition: background 0.2s, color 0.2s;
}
.btn.scriptgen-upload:hover {
    background: #23283a;
    color: #fff;
}

.scriptgen-upload-icon {
    font-size: 1.2rem;
    margin-right: 2px;
    color: #a084ee;
}

.scriptgen-link {
    color: #7b7dfb;
    font-size: 1rem;
    text-decoration: none;
    margin-left: 0;
    transition: color 0.2s;
}
.scriptgen-link:hover {
    color: #e05cff;
    text-decoration: underline;
}

.scriptgen-info {
    background: #111c2a;
    color: #bbaaff;
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 1rem;
    display: flex;
}
.scriptgen-info-icon {
    color: #7b7dfb;
    font-size: 1.3rem;
    margin-right: 6px;
}

/* Add loading spinner for video generation feedback */
#video-loading {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(36,19,54,0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#video-loading .spinner {
    width: 64px;
    height: 64px;
    border: 6px solid #a084ee;
    border-top: 6px solid #23283a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: auto;
}
#video-loading .loading-text {
    color: #fff;
    font-size: 1.15rem;
    margin-top: 18px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

#download-ready-video-btn {
    background: #7b7dfb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 600;
    margin-left: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px #a084ee44;
    transition: background 0.2s, color 0.2s;
    display: none;
}
#download-ready-video-btn:hover {
    background: #23283a;
    color: #a084ee;
}
    align-items: center;
    gap: 12px;
    border: 1px solid #23283a;
    margin-top: 8px;
}
.scriptgen-info-icon {
    color: #7b7dfb;
    font-size: 1.3rem;
    margin-right: 6px;
}

/* Left (Receiver) bubble */
.tpl-message-row.left .tpl-message {
    background: #f5f6fa;
    color: #23243a;
}

/* Right (Sender) bubble */
.tpl-message-row.right .tpl-message {
    background: #7b7dfb;
    color: #fff;
}

/* Left (Receiver) avatar */
.tpl-message-row.left .tpl-avatar {
    background: #d1d1e7;
    color: #23243a;
}

/* Right (Sender) avatar */
.tpl-message-row.right .tpl-avatar {
    background: #7b7dfb;
    color: #fff;
}

.wa-preview {
    background: #ece5dd;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px #0002;
    max-width: 350px;
    margin: 0 auto;
}
.wa-header {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    padding: 10px 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.wa-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    background: #fff;
    object-fit: cover;
}
.wa-title {
    font-weight: bold;
    color: #222;
    margin-right: 8px;
}
.wa-status {
    color: #25d366;
    font-size: 0.95em;
    margin-right: auto;
}
.wa-messages {
    background: #ece5dd;
    padding: 24px 16px;
    min-height: 80px;
}
.wa-bubble {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 18px 18px 18px 4px;
    background: #fff;
    color: #222;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px #0001;
    max-width: 70%;
    clear: both;
}
.wa-bubble.right {
    background: #dcf8c6;
    color: #222;
    border-radius: 18px 18px 4px 18px;
    float: right;
    margin-left: 30%;
}
.wa-bubble.left {
    float: left;
    margin-right: 30%;
}

#auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #2d2046;
}
.modal-form {
    background: #fff;
    color: #222;
    padding: 24px 32px;
    border-radius: 12px;
    box-shadow: 0 4px 24px #0004;
    z-index: 1000;
    min-width: 320px;
    text-align: center;
}
.modal-form input {
    margin: 8px 0;
    padding: 8px;
    width: 90%;
    border-radius: 4px;
    border: 1px solid #ccc;
}
.modal-form button {
    margin: 8px 4px 0 0;
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    background: #4b2aad;
    color: #fff;
    cursor: pointer;
}

/* Admin Panel Container */
#admin-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #fff;
    padding: 32px 40px;
    border-radius: 0;
    box-shadow: 0 4px 32px #0002;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Headings */
#admin-panel h2 {
    color: #7c4dff;
    margin-bottom: 24px;
    font-size: 2rem;
    font-weight: 700;
}
#admin-panel h3 {
    color: #7c4dff;
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Table */
#admin-panel table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background: #f7f5ff;
    border-radius: 8px;
    overflow: hidden;
}
#admin-panel th, #admin-panel td {
    padding: 12px 10px;
    text-align: left;
}
#admin-panel th {
    background: #ede7f6;
    color: #7c4dff;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 2px solid #d1c4e9;
}
#admin-panel td {
    border-bottom: 1px solid #ede7f6;
    color: #333;
    font-size: 0.98rem;
}
#admin-panel tr:last-child td {
    border-bottom: none;
}

/* License List */
#license-list {
    list-style: disc inside;
    margin-bottom: 16px;
    color: #7c4dff;
    font-size: 1rem;
}
#license-list li {
    margin-bottom: 6px;
    color: #7c4dff;
    display: flex;
    align-items: center;
}
#license-list button {
    margin-left: 10px;
    background: #ff5252;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s;
}
#license-list button:hover {
    background: #d32f2f;
}

/* Inputs & Buttons */
#admin-panel input[type="text"] {
    padding: 7px 12px;
    border-radius: 5px;
    border: 1px solid #b39ddb;
    margin-right: 8px;
    font-size: 1rem;
    outline: none;
    transition: border 0.2s;
}
#admin-panel input[type="text"]:focus {
    border: 1.5px solid #7c4dff;
}
#admin-panel button {
    background: #7c4dff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 7px 18px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 8px;
    margin-bottom: 8px;
    transition: background 0.2s;
}
#admin-panel button:hover {
    background: #512da8;
}

/* Logout Button */
#admin-content > button[onclick="logoutAdmin()"] {
    float: right;
    background: #ff5252;
    color: #fff;
    padding: 6px 16px;
    border-radius: 5px;
    margin-top: -10px;
    margin-bottom: 10px;
}
#admin-content > button[onclick="logoutAdmin()"]:hover {
    background: #d32f2f;
}

/* Responsive */
@media (max-width: 600px) {
    #admin-panel {
        padding: 16px 4vw;
    }
    #admin-panel table, #admin-panel th, #admin-panel td {
        font-size: 0.95rem;
    }
}