* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    font-family: Inter, Arial, Helvetica, sans-serif;
    background: #f4f5f7;
    color: #191919;
}

button,
input {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.app {
    height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(400px, 1fr) 300px;
}


/* SIDEBAR */

.sidebar {
    background: #171719;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 28px;
}

.brand-icon {
    width: 44px;
    height: 44px;
    background: #e53935;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.brand h1 {
    margin: 0;
    font-size: 18px;
    letter-spacing: .4px;
}

.brand span {
    color: #a9a9ad;
    font-size: 12px;
}

.new-chat {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #e53935;
    color: white;
    font-weight: 700;
    font-size: 14px;
    padding: 13px;
    margin-bottom: 24px;
}

.new-chat:hover {
    background: #cc302d;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.menu button {
    background: transparent;
    border: 0;
    color: #c7c7ca;
    padding: 12px 14px;
    text-align: left;
    border-radius: 9px;
    font-size: 14px;
}

.menu button:hover,
.menu .active {
    background: #29292d;
    color: white;
}

.ai-status {
    margin-top: auto;
    background: #242427;
    border-radius: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34,197,94,.5);
}

.ai-status strong {
    display: block;
    font-size: 12px;
}

.ai-status small {
    color: #4ade80;
}


/* CHAT */

.chat-area {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header {
    height: 78px;
    padding: 0 28px;
    border-bottom: 1px solid #e6e6e8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header h2 {
    margin: 0;
    font-size: 18px;
}

.chat-header p {
    margin: 4px 0 0;
    color: #8b8b91;
    font-size: 12px;
}

.header-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #666;
}

.header-status span {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
}

.message {
    display: flex;
    margin-bottom: 24px;
    gap: 10px;
}

.avatar {
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #e53935;
    display: grid;
    place-items: center;
    color: white;
}

.message .bubble {
    max-width: 680px;
    padding: 15px 17px;
    border-radius: 13px;
    line-height: 1.5;
    font-size: 14px;
}

.message.bot .bubble {
    background: #f5f5f6;
}

.message.user {
    justify-content: flex-end;
}

.message.user .bubble {
    background: #fff0ef;
    color: #333;
}

.bubble strong {
    display: block;
    margin-bottom: 8px;
}

.bubble p {
    margin: 6px 0;
}

.bubble ol {
    padding-left: 20px;
}

.quick-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 9px;
    margin-top: 16px;
}

.quick-buttons button {
    border: 1px solid #e3e3e5;
    background: white;
    border-radius: 9px;
    padding: 10px;
    font-weight: 600;
    font-size: 12px;
}

.quick-buttons button:hover {
    border-color: #e53935;
}

.answer-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
}

.answer-actions button {
    border: 1px solid #ddd;
    background: white;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12px;
}


/* INPUT */

.composer {
    border-top: 1px solid #e6e6e8;
    padding: 18px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.composer input {
    flex: 1;
    border: 1px solid #dedee1;
    outline: none;
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 14px;
}

.composer input:focus {
    border-color: #e53935;
}

.attach {
    background: transparent;
    border: 0;
    font-size: 24px;
    color: #666;
}

.send {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #e53935;
    border: 0;
    color: white;
    font-size: 18px;
}


/* RIGHT PANEL */

.right-panel {
    background: #f7f7f8;
    border-left: 1px solid #e5e5e7;
    padding: 20px;
    overflow-y: auto;
}

.panel-card,
.human-support {
    background: white;
    border: 1px solid #e6e6e8;
    border-radius: 13px;
    padding: 17px;
    margin-bottom: 16px;
}

.panel-card h3,
.human-support h3 {
    font-size: 14px;
    margin: 0 0 15px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f1;
    font-size: 12px;
}

.info-row:last-child {
    border-bottom: 0;
}

.green {
    color: #16a34a;
}

.link-button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 9px 0;
    font-size: 12px;
}

.link-button:hover {
    color: #e53935;
}

.human-support {
    text-align: center;
}

.human-icon {
    font-size: 28px;
}

.human-support p {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

.human-support button {
    width: 100%;
    border: 0;
    background: #171719;
    color: white;
    padding: 11px;
    border-radius: 8px;
    font-weight: 700;
}


/* MOBILE */

@media (max-width: 1100px) {
    .app {
        grid-template-columns: 230px 1fr;
    }

    .right-panel {
        display: none;
    }
}

@media (max-width: 700px) {

    .app {
        display: block;
    }

    .sidebar {
        display: none;
    }

    .chat-area {
        height: 100vh;
    }

    .chat-header {
        padding: 0 18px;
    }

    .messages {
        padding: 18px;
    }

    .quick-buttons {
        grid-template-columns: repeat(2,1fr);
    }

    .header-status {
        display: none;
    }

}

.bot-text {
    white-space: pre-wrap;
    line-height: 1.65;
}

.bot-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 15px;
}

.download-action {
    display: block;
    text-decoration: none;
    background: #e53935;
    color: #ffffff;
    padding: 11px 15px;
    border-radius: 9px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
}

.download-action:hover {
    background: #c92f2c;
    color: #ffffff;
}


button.download-action {
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}



/* =========================================================
   MODO NOCHE
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.theme-toggle {
    border: 1px solid #dedee1;
    background: #ffffff;
    color: #222;
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: #e53935;
}


/* BODY */

body.dark-mode {
    background: #0f0f11;
    color: #f4f4f5;
}


/* CHAT CENTRAL */

body.dark-mode .chat-area {
    background: #151517;
}

body.dark-mode .chat-header {
    background: #151517;
    border-bottom-color: #2b2b2f;
}

body.dark-mode .chat-header h2 {
    color: #ffffff;
}

body.dark-mode .chat-header p,
body.dark-mode .header-status {
    color: #a9a9ae;
}


/* MENSAJES */

body.dark-mode .messages {
    background: #151517;
}

body.dark-mode .message.bot .bubble {
    background: #242428;
    color: #f5f5f5;
}

body.dark-mode .message.user .bubble {
    background: #3b2020;
    color: #ffffff;
}


/* BOTONES RÁPIDOS */

body.dark-mode .quick-buttons button {
    background: #1d1d20;
    color: #ffffff;
    border-color: #35353a;
}

body.dark-mode .quick-buttons button:hover {
    border-color: #e53935;
    background: #29292d;
}


/* INPUT */

body.dark-mode .composer {
    background: #151517;
    border-top-color: #2b2b2f;
}

body.dark-mode .composer input {
    background: #242428;
    border-color: #3b3b40;
    color: #ffffff;
}

body.dark-mode .composer input::placeholder {
    color: #88888e;
}

body.dark-mode .attach {
    color: #c7c7cc;
}


/* PANEL DERECHO */

body.dark-mode .right-panel {
    background: #111113;
    border-left-color: #2b2b2f;
}

body.dark-mode .panel-card,
body.dark-mode .human-support {
    background: #1d1d20;
    border-color: #303035;
    color: #ffffff;
}

body.dark-mode .info-row {
    border-bottom-color: #303035;
}

body.dark-mode .human-support p {
    color: #aaaab0;
}

body.dark-mode .link-button {
    color: #e6e6e8;
}

body.dark-mode .link-button:hover {
    color: #ff5753;
}


/* BOTÓN MODO NOCHE */

body.dark-mode .theme-toggle {
    background: #242428;
    border-color: #3b3b40;
    color: #ffffff;
}

body.dark-mode .theme-toggle:hover {
    border-color: #e53935;
}


/* ACCIONES */

body.dark-mode .download-action {
    background: #e53935;
    color: #ffffff;
}

body.dark-mode .download-action:hover {
    background: #c92f2c;
}


/* SCROLLBAR */

body.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #151517;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #3a3a3f;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4b4b50;
}

@media (max-width: 700px) {
    .theme-toggle {
        font-size: 0;
        width: 42px;
        height: 42px;
        padding: 0;
    }

    .theme-toggle::after {
        content: "🌙";
        font-size: 18px;
    }

    body.dark-mode .theme-toggle::after {
        content: "☀️";
    }
}


/* =========================================================
   CORRECCIÓN MÓVIL MODO NOCHE
   ========================================================= */

@media (max-width: 700px) {

    .chat-header {
        height: auto;
        min-height: 70px;
        padding: 12px 14px;
        gap: 10px;
    }

    .chat-header > div:first-child {
        min-width: 0;
        flex: 1;
    }

    .chat-header h2 {
        font-size: 16px;
    }

    .chat-header p {
        font-size: 11px;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .header-status {
        display: none !important;
    }

    .theme-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 10px;
        font-size: 0 !important;
        flex-shrink: 0;
    }

    .theme-toggle::after {
        content: "🌙";
        font-size: 20px;
        line-height: 1;
    }

    body.dark-mode .theme-toggle::after {
        content: "☀️";
    }

    .messages {
        padding: 14px;
    }

    .message .bubble {
        max-width: 100%;
        font-size: 14px;
    }

    .quick-buttons {
        grid-template-columns: 1fr !important;
    }

    .composer {
        padding: 10px 12px;
        gap: 8px;
    }

    .composer input {
        min-width: 0;
        font-size: 16px;
    }

    .send {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .attach {
        width: 40px;
        min-width: 40px;
    }

    body.dark-mode .chat-header,
    body.dark-mode .chat-area,
    body.dark-mode .messages,
    body.dark-mode .composer {
        background: #151517 !important;
    }

    body.dark-mode .composer input {
        background: #242428 !important;
        color: #fff !important;
        border-color: #3b3b40 !important;
    }

    body.dark-mode .message.bot .bubble {
        background: #242428 !important;
        color: #f5f5f5 !important;
    }

    body.dark-mode .message.user .bubble {
        background: #3b2020 !important;
        color: #ffffff !important;
    }
}


/* =========================================================
   CHAT-IA - OPTIMIZACIÓN MÁXIMA PARA MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        background: #ffffff;
    }

    body.dark-mode {
        background: #151517;
    }

    .app {
        display: block !important;
        width: 100%;
        min-height: 100%;
    }

    /* OCULTAR ELEMENTOS DE ESCRITORIO */

    .sidebar,
    .right-panel {
        display: none !important;
    }

    /* CHAT PRINCIPAL */

    .chat-area {
        width: 100% !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* CABECERA */

    .chat-header {
        position: sticky;
        top: 0;
        z-index: 50;

        width: 100%;
        min-height: 66px;
        height: auto;

        padding: 10px 12px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        background: rgba(255,255,255,.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        border-bottom: 1px solid #e8e8eb;
    }

    body.dark-mode .chat-header {
        background: rgba(21,21,23,.98) !important;
        border-bottom-color: #2c2c31 !important;
    }

    .chat-header > div:first-child {
        flex: 1;
        min-width: 0;
    }

    .chat-header h2 {
        margin: 0;
        font-size: 16px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-header p {
        margin: 3px 0 0;
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-status {
        display: none !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    /* BOTÓN MODO NOCHE */

    .theme-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        padding: 0 !important;
        border-radius: 12px !important;

        font-size: 0 !important;
    }

    .theme-toggle::after {
        content: "🌙";
        font-size: 19px;
        line-height: 1;
    }

    body.dark-mode .theme-toggle::after {
        content: "☀️";
    }

    /* MENSAJES */

    .messages {
        flex: 1;

        width: 100%;
        padding: 14px 10px 100px;

        overflow-y: auto;
        overflow-x: hidden;

        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .message {
        width: 100%;
        margin-bottom: 16px;
        gap: 8px;
        align-items: flex-start;
    }

    .avatar {
        min-width: 34px;
        width: 34px;
        height: 34px;

        border-radius: 9px;
        font-size: 17px;
    }

    .message .bubble {
        max-width: calc(100% - 42px);
        width: auto;

        padding: 13px 14px;

        border-radius: 14px;

        font-size: 14px;
        line-height: 1.55;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .message.user .bubble {
        max-width: 88%;
    }

    .bot-text {
        font-size: 14px;
        line-height: 1.6;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    /* BOTONES DEL MENÚ INICIAL */

    .quick-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;

        width: 100%;
        margin-top: 14px;
    }

    .quick-buttons button {
        width: 100%;
        min-height: 48px;

        padding: 12px 14px;

        border-radius: 12px;

        font-size: 14px;
        font-weight: 700;

        text-align: left;

        display: flex;
        align-items: center;

        touch-action: manipulation;
    }

    /* BOTONES DE ACCIÓN / DESCARGA */

    .bot-actions {
        width: 100%;
        gap: 9px;
        margin-top: 13px;
    }

    .download-action {
        width: 100%;
        min-height: 48px;

        display: flex !important;
        align-items: center;
        justify-content: center;

        padding: 12px 14px;

        border-radius: 12px;

        font-size: 14px;
        font-weight: 700;

        text-decoration: none;

        touch-action: manipulation;
    }

    button.download-action {
        width: 100%;
        border: 0;
    }

    /* INPUT INFERIOR */

    .composer {
        position: sticky;
        bottom: 0;
        z-index: 60;

        width: 100%;

        padding:
            10px
            10px
            calc(10px + env(safe-area-inset-bottom));

        display: flex;
        align-items: center;
        gap: 7px;

        background: rgba(255,255,255,.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        border-top: 1px solid #e4e4e7;
    }

    body.dark-mode .composer {
        background: rgba(21,21,23,.98) !important;
        border-top-color: #2c2c31 !important;
    }

    .composer input {
        flex: 1;
        min-width: 0;
        height: 48px;

        padding: 0 14px;

        border-radius: 14px;

        font-size: 16px !important;
        line-height: normal;
    }

    .attach {
        width: 42px;
        min-width: 42px;
        height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        font-size: 24px;
    }

    .send {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;

        border-radius: 14px !important;

        display: flex;
        align-items: center;
        justify-content: center;

        touch-action: manipulation;
    }

    /* LISTAS Y TEXTOS LARGOS */

    .bubble ol,
    .bubble ul {
        padding-left: 20px;
        margin: 10px 0;
    }

    .bubble li {
        margin-bottom: 7px;
    }

    .bubble p {
        margin: 7px 0;
    }

    /* EVITAR ZOOM AUTOMÁTICO EN IOS */

    input,
    textarea,
    select,
    button {
        font-size: 16px;
    }

    /* MODO NOCHE */

    body.dark-mode .messages {
        background: #151517 !important;
    }

    body.dark-mode .message.bot .bubble {
        background: #242428 !important;
        color: #f6f6f7 !important;
    }

    body.dark-mode .message.user .bubble {
        background: #3b2020 !important;
        color: #ffffff !important;
    }

    body.dark-mode .quick-buttons button {
        background: #1f1f22 !important;
        color: #ffffff !important;
        border-color: #36363b !important;
    }

    body.dark-mode .composer input {
        background: #242428 !important;
        color: #ffffff !important;
        border-color: #3d3d42 !important;
    }

    body.dark-mode .composer input::placeholder {
        color: #909096 !important;
    }
}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 390px) {

    .chat-header {
        padding: 9px 10px;
    }

    .chat-header h2 {
        font-size: 15px;
    }

    .chat-header p {
        font-size: 9px;
    }

    .messages {
        padding-left: 8px;
        padding-right: 8px;
    }

    .message .bubble {
        padding: 12px;
        font-size: 13px;
    }

    .quick-buttons button,
    .download-action {
        min-height: 46px;
        font-size: 13px;
    }

    .composer {
        padding-left: 8px;
        padding-right: 8px;
    }

    .attach {
        display: none;
    }
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (min-width: 701px) and (max-width: 1000px) {

    .app {
        grid-template-columns: 210px 1fr !important;
    }

    .right-panel {
        display: none !important;
    }

    .messages {
        padding: 22px;
    }

    .quick-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}



/* =========================================================
   MENÚ LATERAL PARA MÓVILES
   ========================================================= */

.mobile-menu-button {
    display: none;
}

.mobile-menu-overlay {
    display: none;
}


@media (max-width: 700px) {

    /* BOTÓN ☰ */

    .mobile-menu-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: 42px;
        min-width: 42px;
        height: 42px;

        padding: 0;

        border: 1px solid #36363b;
        border-radius: 11px;

        background: #1f1f22;
        color: #ffffff;

        font-size: 22px !important;
        line-height: 1;

        cursor: pointer;
    }


    /* BARRA LATERAL */

    .sidebar {
        display: flex !important;

        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;

        z-index: 1000;

        width: min(82vw, 310px);
        height: 100%;

        padding:
            calc(18px + env(safe-area-inset-top))
            16px
            calc(18px + env(safe-area-inset-bottom));

        background: #171719;

        transform: translateX(-105%);
        transition: transform .25s ease;

        overflow-y: auto;

        box-shadow: 10px 0 30px rgba(0,0,0,.35);
    }

    body.mobile-menu-open .sidebar {
        transform: translateX(0);
    }


    /* CAPA OSCURA */

    .mobile-menu-overlay {
        display: block;

        position: fixed;
        inset: 0;

        z-index: 999;

        background: rgba(0,0,0,.60);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    body.mobile-menu-open .mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
    }


    /* LOGO */

    .sidebar .brand {
        margin-bottom: 22px;
    }

    .sidebar .brand h1 {
        font-size: 18px;
    }


    /* NUEVO CHAT */

    .sidebar .new-chat {
        min-height: 50px;
        font-size: 15px;
        border-radius: 12px;
    }


    /* OPCIONES */

    .sidebar .menu {
        gap: 7px;
    }

    .sidebar .menu button {
        min-height: 48px;

        display: flex;
        align-items: center;

        width: 100%;

        padding: 12px 14px;

        font-size: 14px;

        border-radius: 11px;
    }


    /* ESTADO IA */

    .sidebar .ai-status {
        margin-top: auto;
        min-height: 64px;
    }


    /* CABECERA MÓVIL */

    .chat-header {
        display: flex !important;
    }

    .header-actions {
        display: flex !important;
        gap: 7px;
    }

}


/* MÓVILES MUY PEQUEÑOS */

@media (max-width: 390px) {

    .sidebar {
        width: 88vw;
        max-width: 300px;
    }

}



/* =========================================================
   IMÁGENES DENTRO DE RESPUESTAS DEL CHAT
   ========================================================= */

.bot-images {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bot-image-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    padding: 10px;
}

.bot-image-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.bot-image-caption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255,255,255,0.88);
    text-align: center;
    font-weight: 600;
}

@media (max-width: 768px) {
    .bot-images {
        gap: 14px;
    }

    .bot-image-card {
        padding: 8px;
        border-radius: 12px;
    }

    .bot-image-caption {
        font-size: 13px;
    }
}


/* =========================================================
   TUTORIAL FIRESTICK PASO A PASO
   ========================================================= */

.firestick-guide {
    width: min(100%, 820px);
}

.firestick-guide-title {
    margin-top: 18px;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
}

.firestick-step {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.firestick-step:first-of-type {
    margin-top: 10px;
}

.firestick-step-title {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 800;
}

.firestick-step p,
.firestick-extra p {
    line-height: 1.7;
    margin: 10px 0;
}

.firestick-step img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
}

.firestick-extra {
    margin-top: 28px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.firestick-extra.warning {
    border-color: rgba(255,165,0,.25);
}


@media (max-width: 768px) {

    .firestick-guide {
        width: 100%;
    }

    .firestick-guide-title {
        font-size: 16px;
    }

    .firestick-step-title {
        font-size: 15px;
    }

    .firestick-step {
        margin-top: 22px;
        padding-top: 16px;
    }

    .firestick-step img {
        border-radius: 10px;
    }

    .firestick-extra {
        padding: 14px;
    }

}

/* =========================================================
   AJUSTE TAMAÑO IMÁGENES ANDROID TV
   ========================================================= */

.androidtv-step img {
    width: min(100%, 560px) !important;
    max-height: 420px;
    object-fit: contain;
    margin: 16px auto 0 auto;
    display: block;
}

@media (max-width: 768px) {

    .androidtv-step img {
        width: 100% !important;
        max-height: none;
        margin-top: 14px;
    }

}

/* =========================================================
   ANDROID TV - APROVECHAR ANCHO EN PC
   ========================================================= */

@media (min-width: 1000px) {

    .androidtv-guide-message {
        width: 100%;
    }

    .androidtv-guide-message .bubble {
        width: calc(100% - 70px);
        max-width: 1180px;
    }

    .androidtv-guide {
        width: 100%;
        max-width: none;
    }

    .androidtv-step img {
        width: 100% !important;
        max-width: 980px;
        max-height: none;
        object-fit: contain;
        margin: 18px auto 0 auto;
    }

}

/* =========================================================
   TUTORIALES VISUALES - ANCHO COMPLETO EN PC
   ========================================================= */

@media (min-width: 1000px) {

    /* Mensaje completo */
    .message.bot.firestick-guide-message,
    .message.bot.androidtv-guide-message {
        width: 100% !important;
        max-width: none !important;
        align-items: flex-start;
    }

    /* Burbuja del tutorial */
    .message.bot.firestick-guide-message > .bubble,
    .message.bot.androidtv-guide-message > .bubble {
        width: calc(100% - 60px) !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        box-sizing: border-box;
    }

    /* Contenido interior */
    .firestick-guide,
    .androidtv-guide {
        width: 100% !important;
        max-width: none !important;
    }

    /* Imágenes */
    .firestick-step img,
    .androidtv-step img {
        width: 100% !important;
        max-width: 1100px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
        margin: 20px auto 0 auto !important;
        display: block;
    }

}


/* MÓVIL: mantener adaptación normal */
@media (max-width: 999px) {

    .message.bot.firestick-guide-message,
    .message.bot.androidtv-guide-message {
        width: 100% !important;
    }

    .message.bot.firestick-guide-message > .bubble,
    .message.bot.androidtv-guide-message > .bubble {
        width: 100% !important;
        max-width: 100% !important;
    }

    .firestick-step img,
    .androidtv-step img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

}

/* =========================================================
   ESTABILIDAD MÓVIL + ZOOM
   ========================================================= */

@media (max-width: 999px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    * {
        box-sizing: border-box;
    }

    .messages,
    .message,
    .bubble,
    .firestick-guide,
    .androidtv-guide,
    .firestick-step,
    .androidtv-step,
    .firestick-extra,
    .androidtv-extra {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .message.bot.firestick-guide-message,
    .message.bot.androidtv-guide-message {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .message.bot.firestick-guide-message > .bubble,
    .message.bot.androidtv-guide-message > .bubble {
        width: calc(100% - 48px) !important;
        max-width: calc(100% - 48px) !important;
        min-width: 0 !important;
    }

    .firestick-step img,
    .androidtv-step img,
    .bot-image-card img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .quick-buttons {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .quick-buttons button {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .bot-text,
    .firestick-guide p,
    .androidtv-guide p {
        overflow-wrap: anywhere;
        word-break: normal;
    }

}



/* =========================================================
   DESKTOP - SOLO SCROLL EN LA CONVERSACIÓN
   SIDEBAR Y PANEL DERECHO SIEMPRE VISIBLES
   ========================================================= */

@media (min-width: 701px) {

    html,
    body {
        height: 100% !important;
        overflow: hidden !important;
    }

    .app {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* MENU IZQUIERDO */
    .sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        height: 100% !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ZONA CENTRAL */
    .chat-area {
        height: 100% !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }

    /* SOLO ESTA ZONA SE DESPLAZA */
    .messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;
    }

    /* CABECERA SIEMPRE VISIBLE */
    .chat-header {
        flex: 0 0 auto !important;
    }

    /* CAJA DE ESCRIBIR SIEMPRE VISIBLE */
    .composer,
    .chat-input,
    .input-area {
        flex: 0 0 auto !important;
    }

    /* PANEL DERECHO */
    .right-panel {
        height: 100% !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

}

/* =========================================================
   DESKTOP - SOLO SCROLL EN LA CONVERSACIÓN
   SIDEBAR Y PANEL DERECHO SIEMPRE VISIBLES
   ========================================================= */

@media (min-width: 701px) {

    html,
    body {
        height: 100% !important;
        overflow: hidden !important;
    }

    .app {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* MENU IZQUIERDO */
    .sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        height: 100% !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ZONA CENTRAL */
    .chat-area {
        height: 100% !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }

    /* SOLO ESTA ZONA SE DESPLAZA */
    .messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;
    }

    /* CABECERA SIEMPRE VISIBLE */
    .chat-header {
        flex: 0 0 auto !important;
    }

    /* CAJA DE ESCRIBIR SIEMPRE VISIBLE */
    .composer,
    .chat-input,
    .input-area {
        flex: 0 0 auto !important;
    }

    /* PANEL DERECHO */
    .right-panel {
        height: 100% !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

}

/* =========================================================
   GUÍA VISUAL RENOVACIÓN BOT
   ========================================================= */

.renewal-guide {
    width: min(100%, 900px);
}

.renewal-guide-title {
    margin-top: 18px;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
}

.renewal-step {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.renewal-step-title {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 800;
}

.renewal-step p {
    line-height: 1.7;
    margin: 10px 0;
}

.renewal-step img {
    display: block;
    width: min(100%, 720px);
    height: auto;
    margin: 18px auto 0 auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
}

.renewal-step a {
    color: #39c6ff;
    font-weight: 700;
}

/* PC */
@media (min-width: 1000px) {

    .renewal-guide-message {
        width: 100%;
    }

    .renewal-guide-message > .bubble {
        width: calc(100% - 60px) !important;
        max-width: 1180px !important;
    }

    .renewal-guide {
        width: 100%;
        max-width: none;
    }

    .renewal-step img {
        width: min(100%, 820px);
    }

}

/* Móvil */
@media (max-width: 999px) {

    .renewal-guide-message,
    .renewal-guide-message > .bubble,
    .renewal-guide {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .renewal-step img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

}

/* =========================================================
   ESTILO PREMIUM GENERAL PARA FICHAS / RESPUESTAS
   ========================================================= */

.message.bot .bubble {
    background:
        linear-gradient(
            180deg,
            rgba(38,38,42,.98),
            rgba(27,27,31,.98)
        ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    padding: 20px 22px !important;
}


/* NOMBRE MDPRIME AI */

.message.bot .bubble > strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .3px;

    color: #ffffff;

    margin-bottom: 14px;
}


/* TEXTO GENERAL */

.bot-text {
    font-size: 14px;
    line-height: 1.75 !important;
    color: rgba(255,255,255,.92);
}


/* =========================================================
   TÍTULOS PREMIUM
   ========================================================= */

.firestick-guide-title,
.androidtv-guide-title,
.renewal-guide-title {
    position: relative;

    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.35;

    padding: 16px 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(229,57,53,.14),
            rgba(0,157,255,.08)
        );

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);

    margin-bottom: 24px !important;
}


/* =========================================================
   PASOS / BLOQUES INTERNOS
   ========================================================= */

.firestick-step,
.androidtv-step,
.renewal-step {
    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 16px;

    padding: 18px;

    margin-top: 20px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
}


.firestick-step-title,
.androidtv-step-title,
.renewal-step-title {
    display: inline-flex;
    align-items: center;

    font-size: 16px !important;
    font-weight: 900 !important;

    color: #ffffff;

    padding-bottom: 8px;
    margin-bottom: 10px !important;

    border-bottom: 2px solid rgba(229,57,53,.55);
}


/* TEXTO DE PASOS */

.firestick-step p,
.androidtv-step p,
.renewal-step p,
.firestick-extra p,
.androidtv-extra p {
    font-size: 14px;
    line-height: 1.75 !important;
    color: rgba(255,255,255,.9);
}


/* =========================================================
   BLOQUES EXTRA / AVISOS
   ========================================================= */

.firestick-extra,
.androidtv-extra {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.01)
        ) !important;

    border-radius: 16px !important;

    padding: 18px 20px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
}


.firestick-extra.warning,
.androidtv-extra.warning {
    background:
        linear-gradient(
            135deg,
            rgba(255,161,0,.07),
            rgba(229,57,53,.05)
        ) !important;

    border: 1px solid rgba(255,161,0,.22) !important;
}


/* =========================================================
   BOTONES PREMIUM
   ========================================================= */

.quick-buttons button,
.download-action {
    min-height: 46px;

    border-radius: 12px !important;

    border: 1px solid rgba(255,255,255,.12) !important;

    background:
        linear-gradient(
            180deg,
            #171719,
            #111113
        ) !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 6px 16px rgba(0,0,0,.18);

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.quick-buttons button:hover,
.download-action:hover {
    transform: translateY(-1px);

    border-color: rgba(229,57,53,.7) !important;

    background:
        linear-gradient(
            180deg,
            #202024,
            #151517
        ) !important;
}


/* =========================================================
   IMÁGENES PREMIUM
   ========================================================= */

.firestick-step img,
.androidtv-step img,
.renewal-step img,
.bot-image-card img {
    border-radius: 14px !important;

    border: 1px solid rgba(255,255,255,.09) !important;

    box-shadow:
        0 14px 32px rgba(0,0,0,.24);
}


/* =========================================================
   TARJETAS DEL PANEL DERECHO
   ========================================================= */

.panel-card,
.human-support {
    background:
        linear-gradient(
            180deg,
            #151517,
            #111113
        ) !important;

    border: 1px solid rgba(255,255,255,.09) !important;

    border-radius: 16px !important;

    box-shadow:
        0 16px 30px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .message.bot .bubble {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    .firestick-guide-title,
    .androidtv-guide-title,
    .renewal-guide-title {
        font-size: 17px !important;
        padding: 14px !important;
    }

    .firestick-step,
    .androidtv-step,
    .renewal-step {
        padding: 14px;
        border-radius: 14px;
    }

    .quick-buttons button {
        min-height: 44px;
    }

}

/* =========================================================
   EFECTO NEÓN PREMIUM
   ========================================================= */

/* MDPRIME AI */
.message.bot .bubble > strong {
    color: #ffffff !important;

    text-shadow:
        0 0 4px rgba(0, 190, 255, .75),
        0 0 10px rgba(0, 140, 255, .35);
}


/* TÍTULOS PRINCIPALES */
.firestick-guide-title,
.androidtv-guide-title,
.renewal-guide-title {
    color: #ffffff !important;

    text-shadow:
        0 0 5px rgba(0, 220, 255, .9),
        0 0 12px rgba(0, 160, 255, .55),
        0 0 24px rgba(118, 64, 255, .25);
}


/* TÍTULOS DE CADA PASO */
.firestick-step-title,
.androidtv-step-title,
.renewal-step-title {
    color: #f7fbff !important;

    text-shadow:
        0 0 4px rgba(0, 190, 255, .7),
        0 0 9px rgba(0, 120, 255, .3);
}


/* BOTONES - NEÓN AL PASAR EL RATÓN */
.quick-buttons button:hover,
.download-action:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.85),
        0 0 10px rgba(0,190,255,.65);

    box-shadow:
        0 0 0 1px rgba(0,190,255,.28),
        0 0 14px rgba(0,150,255,.22),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* REFERIDOS / PRECIOS / TEXTO DESTACADO */
.bot-text strong {
    color: #ffffff;

    text-shadow:
        0 0 4px rgba(0, 190, 255, .45);
}


/* PANEL DERECHO */
.panel-card h3,
.human-support h3 {
    text-shadow:
        0 0 5px rgba(0,190,255,.55),
        0 0 10px rgba(0,120,255,.2);
}


/* =========================================================
   MÓVIL - NEÓN MÁS SUAVE
   ========================================================= */

@media (max-width: 700px) {

    .message.bot .bubble > strong,
    .firestick-guide-title,
    .androidtv-guide-title,
    .renewal-guide-title {
        text-shadow:
            0 0 4px rgba(0,190,255,.6),
            0 0 8px rgba(0,120,255,.25);
    }

    .firestick-step-title,
    .androidtv-step-title,
    .renewal-step-title {
        text-shadow:
            0 0 3px rgba(0,190,255,.5);
    }

}

/* =========================================================
   CORRECCIÓN DEFINITIVA MODO CLARO
   El modo claro NO lleva clase.
   El modo oscuro usa body.dark-mode
   ========================================================= */

/* FICHA PRINCIPAL BOT - CLARO */
.message.bot .bubble {
    background: linear-gradient(
        180deg,
        #ffffff,
        #f3f5f8
    ) !important;

    color: #171717 !important;

    border: 1px solid rgba(0,0,0,.10) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}


/* TEXTO GENERAL BOT */
.message.bot .bot-text,
.message.bot .bubble p {
    color: #1d2530 !important;
}


/* MDPRIME AI */
.message.bot .bubble > strong {
    color: #172033 !important;

    text-shadow:
        0 0 4px rgba(0,170,255,.45),
        0 0 10px rgba(0,120,255,.18) !important;
}


/* BOTONES EN CLARO */
.quick-buttons button {
    background: linear-gradient(
        180deg,
        #ffffff,
        #edf0f4
    ) !important;

    color: #161616 !important;

    border: 1px solid rgba(0,0,0,.13) !important;

    box-shadow:
        0 6px 14px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}


/* HOVER EN CLARO */
.quick-buttons button:hover {
    border-color: rgba(0,170,255,.65) !important;

    box-shadow:
        0 0 0 1px rgba(0,170,255,.20),
        0 0 14px rgba(0,150,255,.18) !important;
}


/* PASOS / FICHAS INTERNAS EN CLARO */
.firestick-step,
.androidtv-step,
.renewal-step {
    background: #ffffff !important;
    color: #1d2530 !important;
    border: 1px solid rgba(0,0,0,.08) !important;
}


/* TEXTO DE PASOS */
.firestick-step p,
.androidtv-step p,
.renewal-step p {
    color: #1d2530 !important;
}


/* TÍTULOS DE GUÍAS EN CLARO */
.firestick-guide-title,
.androidtv-guide-title,
.renewal-guide-title {
    color: #172033 !important;

    background: linear-gradient(
        135deg,
        rgba(0,160,255,.08),
        rgba(110,70,255,.05)
    ) !important;

    border: 1px solid rgba(0,0,0,.08) !important;
}


/* =========================================================
   RESTAURAR MODO OSCURO
   ========================================================= */

body.dark-mode .message.bot .bubble {
    background: linear-gradient(
        180deg,
        rgba(38,38,42,.98),
        rgba(27,27,31,.98)
    ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,.08) !important;
}


body.dark-mode .message.bot .bot-text,
body.dark-mode .message.bot .bubble p {
    color: rgba(255,255,255,.92) !important;
}


body.dark-mode .message.bot .bubble > strong {
    color: #ffffff !important;

    text-shadow:
        0 0 4px rgba(0,190,255,.75),
        0 0 10px rgba(0,140,255,.35) !important;
}


body.dark-mode .quick-buttons button {
    background: linear-gradient(
        180deg,
        #171719,
        #111113
    ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,.12) !important;
}


body.dark-mode .firestick-step,
body.dark-mode .androidtv-step,
body.dark-mode .renewal-step {
    background: rgba(255,255,255,.025) !important;
    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,.07) !important;
}


body.dark-mode .firestick-step p,
body.dark-mode .androidtv-step p,
body.dark-mode .renewal-step p {
    color: rgba(255,255,255,.90) !important;
}


body.dark-mode .firestick-guide-title,
body.dark-mode .androidtv-guide-title,
body.dark-mode .renewal-guide-title {
    color: #ffffff !important;
}


/* =========================================================
   MÓVIL PREMIUM + NEÓN
   ========================================================= */

@media (max-width: 700px) {

    /* FICHA DEL BOT */
    .message.bot .bubble {
        border-radius: 18px !important;
        padding: 18px 16px !important;

        box-shadow:
            0 14px 32px rgba(0,0,0,.14),
            0 0 18px rgba(0,170,255,.08) !important;
    }


    /* MDPRIME AI */
    .message.bot .bubble > strong {
        font-size: 18px !important;
        font-weight: 900 !important;
        letter-spacing: .4px;

        text-shadow:
            0 0 4px rgba(0,200,255,.85),
            0 0 10px rgba(0,150,255,.55),
            0 0 18px rgba(120,70,255,.28) !important;
    }


    /* TEXTO GENERAL */
    .message.bot .bot-text,
    .message.bot .bubble p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        font-weight: 500;
    }


    /* TEXTO DESTACADO */
    .message.bot .bubble strong:not(:first-child),
    .bot-text strong {
        font-weight: 850 !important;

        text-shadow:
            0 0 3px rgba(0,180,255,.35),
            0 0 8px rgba(0,140,255,.18) !important;
    }


    /* TÍTULOS DE GUÍAS */
    .firestick-guide-title,
    .androidtv-guide-title,
    .renewal-guide-title {
        font-size: 19px !important;
        font-weight: 900 !important;
        line-height: 1.35 !important;

        border-radius: 16px !important;
        padding: 15px 16px !important;

        text-shadow:
            0 0 4px rgba(0,200,255,.85),
            0 0 10px rgba(0,140,255,.50),
            0 0 18px rgba(120,70,255,.25) !important;
    }


    /* TÍTULOS DE PASOS */
    .firestick-step-title,
    .androidtv-step-title,
    .renewal-step-title {
        font-size: 17px !important;
        font-weight: 900 !important;

        text-shadow:
            0 0 4px rgba(0,190,255,.70),
            0 0 9px rgba(0,130,255,.30) !important;
    }


    /* FICHAS DE PASOS */
    .firestick-step,
    .androidtv-step,
    .renewal-step {
        border-radius: 16px !important;
        padding: 16px !important;

        box-shadow:
            0 10px 24px rgba(0,0,0,.10),
            0 0 14px rgba(0,160,255,.06) !important;
    }


    /* BOTONES */
    .quick-buttons {
        gap: 12px !important;
    }

    .quick-buttons button,
    .download-action {
        min-height: 56px !important;
        border-radius: 15px !important;

        font-size: 16px !important;
        font-weight: 800 !important;

        box-shadow:
            0 8px 18px rgba(0,0,0,.12),
            0 0 0 1px rgba(0,170,255,.10),
            0 0 12px rgba(0,150,255,.08) !important;
    }


    /* BOTÓN AL TOCAR */
    .quick-buttons button:active,
    .download-action:active {
        transform: scale(.985);

        box-shadow:
            0 0 0 1px rgba(0,190,255,.35),
            0 0 16px rgba(0,160,255,.22) !important;
    }


    /* IMÁGENES */
    .firestick-step img,
    .androidtv-step img,
    .renewal-step img,
    .bot-image-card img {
        border-radius: 16px !important;

        box-shadow:
            0 12px 28px rgba(0,0,0,.16),
            0 0 14px rgba(0,150,255,.08) !important;
    }


    /* =====================================================
       MODO OSCURO EN MÓVIL
       ===================================================== */

    body.dark-mode .message.bot .bubble {
        background:
            linear-gradient(
                180deg,
                rgba(34,35,42,.98),
                rgba(22,23,29,.98)
            ) !important;

        border: 1px solid rgba(0,190,255,.20) !important;

        box-shadow:
            0 14px 32px rgba(0,0,0,.35),
            0 0 20px rgba(0,150,255,.10) !important;
    }


    body.dark-mode .message.bot .bot-text,
    body.dark-mode .message.bot .bubble p {
        color: rgba(255,255,255,.94) !important;
    }


    body.dark-mode .quick-buttons button,
    body.dark-mode .download-action {
        background:
            linear-gradient(
                180deg,
                #191b20,
                #101116
            ) !important;

        color: #ffffff !important;

        border: 1px solid rgba(0,180,255,.22) !important;
    }


    body.dark-mode .quick-buttons button:active,
    body.dark-mode .download-action:active {
        border-color: rgba(0,200,255,.55) !important;

        text-shadow:
            0 0 5px rgba(255,255,255,.80),
            0 0 10px rgba(0,190,255,.50) !important;
    }


    /* =====================================================
       MODO CLARO EN MÓVIL
       ===================================================== */

    body:not(.dark-mode) .message.bot .bubble {
        background:
            linear-gradient(
                180deg,
                #ffffff,
                #f5f8fb
            ) !important;

        border: 1px solid rgba(0,130,220,.14) !important;
    }


    body:not(.dark-mode) .message.bot .bot-text,
    body:not(.dark-mode) .message.bot .bubble p {
        color: #18202a !important;
    }


    body:not(.dark-mode) .quick-buttons button,
    body:not(.dark-mode) .download-action {
        background:
            linear-gradient(
                180deg,
                #ffffff,
                #edf3f8
            ) !important;

        color: #131820 !important;

        border: 1px solid rgba(0,140,220,.16) !important;
    }

}