body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.hero {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .hero {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .hero {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .hero-content {
        flex-direction: row;
    }

    .text-block {
        text-align: left;
    }
}

.hero-content img {
    width: 100%;
    max-width: 32rem;
    border-radius: 0.5rem;
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}

.text-block {
    text-align: center;
}

h1 {
    font-size: 1.875rem;
    font-weight: bold;
}

@media (min-width: 640px) {
    h1 {
        font-size: 2.25rem;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }
}

.paragraph {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
}

@media (min-width: 640px) {
    .paragraph {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .paragraph {
        font-size: 1.25rem;
    }
}

.small-text {
    padding-bottom: 1rem;
    font-size: 0.875rem;
}

@media (min-width: 640px) {
    .small-text {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .small-text {
        font-size: 1.125rem;
    }
}

.text-primary {
    color: #0d6efd;
    /* Bootstrap primary */
    font-weight: bold;
    text-decoration: none;
}

.text-secondary {
    color: #6c757d;
    /* Bootstrap secondary */
    font-weight: 500;
    text-decoration: none;
}

.navbar_new.scrolled {
    background: #455de6;
    background: linear-gradient(60deg, rgb(195, 199, 220) 0%, rgba(56, 88, 148, 1) 45%, rgba(60, 62, 194, 1) 100%);
    transition: background-color 0.6s ease-in-out;
}


.nav-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

}

.footer {
    background-color: #333c4dd8;
    padding: 20px;
    text-align: center;
}


.footer a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.card p {
    font-size: 20px;
}

#tesla {
    background: linear-gradient(90deg,
            rgba(79, 69, 35, 0.8) 0%,
            /* 0.8 = 80% opaque */
            rgba(59, 48, 33, 0.8) 46%,
            rgba(82, 72, 51, 0.8) 100%);
    color: white;
}


#tesla video {
    background-color: #465e5a;
}


#lynb {
    background: #597891;
    background: linear-gradient(90deg, rgba(89, 120, 145, 1) 0%, rgba(108, 141, 171, 1) 46%, rgba(63, 91, 102, 1) 100%);
    color: white;
}

#lynb video {
    background-color: #f3f0ee;
}

#gwc {
    background: linear-gradient(90deg,
            rgba(191, 137, 42, 0.8) 0%,
            rgba(173, 143, 94, 0.8) 46%,
            rgba(138, 98, 34, 0.8) 100%);
    color: white;
}

#gwc video {
    background-color: #73512e;
}

#leo {
    background: #946b38;
    background: linear-gradient(60deg, rgba(148, 107, 56, 1) 0%, rgba(222, 125, 29, 1) 24%, rgba(219, 170, 96, 1) 35%, rgba(186, 137, 32, 1) 51%, rgba(196, 173, 139, 1) 74%, rgba(247, 147, 25, 1) 86%, rgba(84, 50, 11, 1) 100%);
    color: white;
}

#leo video {
    background-color: #604c29;
}

#gab {
    background: #e6ddd3;
    background: linear-gradient(60deg, rgba(230, 221, 211, 1) 0%, rgba(148, 132, 108, 1) 21%, rgba(232, 213, 186, 1) 35%, rgba(130, 116, 91, 1) 68%, rgba(204, 193, 167, 1) 88%, rgba(135, 130, 120, 1) 100%);
    color: white;
}

#gab video {
    background-color: #b0a492;
}

#gandhi {
    background: #f55a0c;
    background: linear-gradient(23deg, rgba(245, 90, 12, 1) 1%, rgba(209, 184, 184, 1) 49%, rgba(15, 163, 22, 1) 100%);
    color: white;
}

#gandhi video {
    background-color: #a4885a;
}

#tubman {
    background: #e81c1c;
    background: linear-gradient(53deg, rgba(232, 28, 28, 1) 0%, rgba(61, 151, 156, 1) 17%, rgba(242, 153, 153, 1) 49%, rgba(90, 85, 163, 1) 80%, rgba(44, 82, 158, 1) 100%);
    color: white;
}

#tubman video {
    background-color: #c19551;
}

#florence {
    background: #464378;
    background: linear-gradient(53deg, rgba(70, 67, 120, 1) 2%, rgba(85, 163, 155, 1) 39%, rgba(158, 44, 150, 1) 100%);
    color: white;
}

#florence video {
    background-color: #c19551;
}

.card-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 60px;
}

.video-container,
.text-container {
    flex: 1 1 350px;
    max-width: 500px;
}

.video-container video {
    width: 90%;
    height: 300px;
    object-fit: contain;
    object-position: center top;
    border-radius: 8px;
}

.alert {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-error,
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
/* ---------------------------------------------------------------------- */
/* Shared "ask the clone" widget styles (used by every clone page).       */
/* Previously duplicated in a <style> block inside each of 7 templates.   */
/* ---------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

/* Scoped to the clone Q&A widget only — deliberately NOT named
   .video-container, which is a different, pre-existing rule used by
   sampleClones.html with different sizing. Reusing that name here would
   silently clash depending on stylesheet load order. */
.clone-video-container {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1 / 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #ccc;
    background-color: #fff;
    position: relative;
}

.clone-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-body p {
    color: black !important;
}

.content-section {
    padding-top: 0;
}

.content-section p {
    font-size: 18px;
}

.spinner-grow.custom-speed {
    animation-duration: 1.5s !important;
}

.content {
    width: 100%;
    max-width: 900px;
    min-height: 340px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.717);
    border-radius: 10px;
    color: white;
    box-sizing: border-box;
}

.content p {
    margin-top: 1em;
    font-size: 1.4em;
    color: #ffffff;
    line-height: 1.5;
    max-width: 900px;
}

.content a {
    text-decoration: none;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: rgb(254, 254, 3);
    cursor: pointer;
}

video {
    background-color: #73512e;
}

.radio-button input[type="radio"] {
    display: none;
}

.radio-button label {
    display: inline-block;
    background-color: white;
    padding: 3px 3px;
    font-size: 17px;
    cursor: pointer;
}

.radio-button input[type="radio"]:checked + label {
    background-color: #d6953a;
}

.fo-ok {
    color: #9CADBD;
    margin-top: 25px;
}

.typing-dots::after {
    content: " ...";
    animation: blink 1.2s infinite steps(1);
}

@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Clone chat UI (tesla, gandhi, gwc, gabriela, harriet, florence,     */
/* leo_tolstoy, lynb_app). Replaces the previous hero+form layout with */
/* a sidebar + conversation-thread layout, distinct designs for        */
/* desktop (sidebar beside the thread) and mobile (sidebar collapses   */
/* into a compact top bar) rather than one layout stretched to fit     */
/* both. New class names only -- doesn't touch .content/.radio-button/ */
/* .fo-ok/.checkbox-label, which home.html and contact.html still use. */
/* ------------------------------------------------------------------ */

.clone-chat {
    display: flex;
    max-width: 1700px;
    margin: 16px auto;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    height: calc(100vh - 160px);
}

/* --- Sidebar (desktop) / compact header (mobile) --- */

.clone-chat-sidebar {
    width: 480px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.35);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    overflow-y: auto;
}

.clone-avatar {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #000;
}

.clone-avatar-poster,
.clone-avatar-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clone-avatar-video {
    object-fit: contain;
}

.clone-avatar-play {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.clone-avatar-play svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

.clone-name {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.clone-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 18px;
}

.clone-verified-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5be29c;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: auto;
    padding-top: 12px;
}

.clone-verified-badge svg {
    width: 14px;
    height: 14px;
    fill: #5be29c;
    flex-shrink: 0;
}

.clone-download-link {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 7px 14px;
    text-align: center;
    margin-top: 12px;
    display: inline-block;
}

.clone-download-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* --- Conversation pane --- */

.clone-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: rgba(255, 255, 255, 0.97);
}

.chat-thread {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    min-height: 0;
}

.chat-bubble {
    max-width: 78%;
    display: flex;
    flex-direction: column;
}

.chat-bubble-bot {
    align-self: flex-start;
}

.chat-bubble-user {
    align-self: flex-end;
}

.chat-bubble-content {
    font-size: 0.98rem;
    line-height: 1.6;
}

.chat-bubble-content p:first-child { margin-top: 0; }
.chat-bubble-content p:last-child { margin-bottom: 0; }

.chat-bubble-bot .chat-bubble-content {
    background: #f1f2f5;
    color: #1c1f24;
    border-radius: 16px 16px 16px 4px;
    padding: 12px 16px;
}

.chat-bubble-user .chat-bubble-content {
    background: #1a3d5c;
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    padding: 12px 16px;
}

.chat-bubble-meta {
    font-size: 0.78rem;
    color: #8a8f98;
    margin-bottom: 6px;
}

.chat-bubble-error .chat-bubble-content {
    background: #fde8e8;
    color: #8a2626;
}

.chat-bubble-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #d8dbe0;
    background: #fff;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #33404d;
    cursor: pointer;
}

.chat-action-btn:hover {
    background: #eceef1;
}

/* Typing indicator -- replaces the old static "Thinking.gif" image */

.chat-typing-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 4px 2px;
}

.chat-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa1ab;
    animation: chatDotBounce 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes chatDotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* --- Composer --- */

.chat-composer-area {
    border-top: 1px solid #e4e6eb;
    padding: 14px 20px 18px;
    background: #fff;
}

.chat-toggle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.answer-toggle {
    display: inline-flex;
    background: #eef0f3;
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
}

.answer-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.answer-toggle label {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5b6470;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.answer-toggle input:checked + label {
    background: #fff;
    color: #1a3d5c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.answer-toggle input:focus-visible + label {
    outline: 2px solid #1a3d5c;
    outline-offset: 2px;
}

.qa-terms {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #5b6470;
}

.qa-terms input {
    width: 16px;
    height: 16px;
    accent-color: #1a3d5c;
    cursor: pointer;
}

.qa-terms a {
    color: #1a3d5c;
    font-weight: 600;
}

/* Captcha panel -- only shown pre-verification; hidden entirely once a
   session is verified (see clone_utils.py / gwc/views.py ask_clone). */

.captcha-panel {
    background: #f6f7f9;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.captcha-prompt {
    font-size: 0.85rem;
    margin: 0 0 10px;
    color: #33404d;
}

.captcha-prompt .captcha-word {
    color: #d8790f;
    font-weight: 700;
}

.captcha-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.captcha-option {
    position: relative;
    display: block;
    width: 52px;
    cursor: pointer;
}

.captcha-option .captcha-radio {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #2fa96b;
    cursor: pointer;
    z-index: 1;
}

.captcha-option .captcha-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 9px;
    border: 2px solid #d8dbe0;
    transition: border-color .15s, box-shadow .15s;
}

.captcha-option .captcha-radio:checked ~ .captcha-img {
    border-color: #2fa96b;
    box-shadow: 0 0 0 3px rgba(47, 169, 107, 0.3);
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: 1px solid #d8dbe0;
    border-radius: 22px;
    padding: 6px 6px 6px 18px;
    background: #fff;
}

.chat-composer:focus-within {
    border-color: #1a3d5c;
    box-shadow: 0 0 0 3px rgba(26, 61, 92, 0.12);
}

.chat-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 8px 0;
    max-height: 120px;
    font-family: inherit;
}

.chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1a3d5c;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-send-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

/* --- Responsive: sidebar collapses to a compact top bar on mobile --- */

@media (max-width: 767px) {
    .clone-chat {
        flex-direction: column;
        margin: 0;
        border-radius: 0;
        height: calc(100vh - 90px);
    }

    .clone-chat-sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 12px 16px;
        gap: 12px;
    }

    .clone-avatar {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .clone-avatar-play {
        width: 22px;
        height: 22px;
        bottom: -2px;
        right: -2px;
    }

    .clone-avatar-play svg {
        width: 9px;
        height: 9px;
    }

    .clone-name {
        font-size: 0.95rem;
        margin: 0;
    }

    .clone-desc,
    .clone-verified-badge {
        display: none;
    }

    #downloadSection {
        margin-left: auto;
    }

    .clone-download-link {
        margin-top: 0;
        padding: 6px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .chat-thread {
        max-height: none;
    }

    .chat-bubble {
        max-width: 88%;
    }
}