/* =========================================================
   MIA DENTAL DESIGN SYSTEM V1
   ========================================================= */

:root {
    --mia-brand-purple: #7651a8;
    --mia-brand-purple-dark: #55347f;
    --mia-brand-purple-soft: #f4edff;

    --mia-brand-pink: #e8659a;
    --mia-brand-pink-soft: #fff0f6;

    --mia-brand-mint: #38bfa0;
    --mia-brand-mint-soft: #e9fbf6;

    --mia-brand-orange: #f59e52;

    --mia-brand-ink: #332a3a;
    --mia-brand-muted: #756b7e;
}


/* =========================================================
   LOGOTIPO GLOBAL
   ========================================================= */

.brand.mia-brand {
    display: inline-flex;
    align-items: center;

    min-width: 185px;
}

.mia-brand-logo {
    display: block;

    width: 230px;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   NAVEGACIÓN GLOBAL
   ========================================================= */

.main-nav .mia-studio-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    border:
        1px solid rgba(118, 81, 168, 0.16);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--mia-brand-purple-soft),
            var(--mia-brand-pink-soft)
        );

    color:
        var(--mia-brand-purple-dark);
}

.main-nav .mia-studio-nav-link:hover {
    border-color:
        rgba(232, 101, 154, 0.34);

    color:
        var(--mia-brand-purple-dark);
}


/* =========================================================
   MASCOTA GLOBAL
   ========================================================= */

.mia-official-mascot {
    position: relative;

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

    overflow: visible;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff4f9
        );

    box-shadow:
        0 14px 35px
        rgba(85, 52, 127, 0.16);
}

.mia-official-mascot img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   LANDING
   ========================================================= */

.mia-card .mia-avatar.mia-official-mascot {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    padding: 3px;

    background: transparent;
}

.mia-card .mia-avatar.mia-official-mascot img {
    width: 72px;
    height: 72px;
}


/* =========================================================
   STUDIO
   ========================================================= */

.studio-preview-avatar.mia-official-mascot {
    width: 105px;
    height: 105px;

    margin-bottom: 18px;

    padding: 4px;

    background: transparent;

    border: 0;
}

.studio-preview-avatar.mia-official-mascot img {
    width: 105px;
    height: 105px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.mia-footer-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color:
        var(--mia-brand-purple-dark);

    font-weight: 700;
}

.mia-footer-symbol {
    width: 25px;
    height: 25px;

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

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            var(--mia-brand-purple),
            var(--mia-brand-pink)
        );

    color: #ffffff;

    font-size: 0.85rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .brand.mia-brand {
        min-width: auto;
    }

    .mia-brand-logo {
        width: 185px;
    }

    .main-nav .mia-studio-nav-link {
        padding: 6px 8px;
    }
}


@media (max-width: 650px) {

    .mia-brand-logo {
        width: 150px;
    }

    .main-nav .mia-studio-nav-link {
        font-size: 0;
    }

    .main-nav .mia-studio-nav-link::before {
        content: "🎨";

        font-size: 1rem;
    }

    .mia-card .mia-avatar.mia-official-mascot {
        width: 58px;
        height: 58px;

        flex-basis: 58px;
    }

    .mia-card .mia-avatar.mia-official-mascot img {
        width: 58px;
        height: 58px;
    }
}


@media (max-width: 430px) {

    .mia-brand-logo {
        width: 128px;
    }
}


/* =========================================================
   MIA_STICKY_COMPOSER_V1
   Mantiene visible el cuadro de escritura.
   ========================================================= */

/*
 * El contenedor central funciona como una columna completa.
 */
.dashboard-chat {
    display: flex !important;
    flex-direction: column !important;

    min-height: 0 !important;
    overflow: hidden !important;
}

/*
 * La conversación ocupa todo el espacio disponible
 * y administra su propio desplazamiento.
 */
.dashboard-chat .chat-content {
    flex: 1 1 auto !important;

    min-height: 0 !important;

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

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/*
 * El compositor permanece siempre visible en la parte inferior.
 */
.dashboard-chat .chat-form,
.dashboard-chat .mia-chat-composer {
    position: sticky !important;
    z-index: 50 !important;

    bottom: 0 !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            #ffffff
        ) !important;

    border-top:
        1px solid rgba(118, 81, 168, 0.16) !important;

    box-shadow:
        0 -12px 28px rgba(51, 42, 58, 0.09) !important;

    backdrop-filter: blur(14px);
}

/*
 * Evita que los últimos mensajes queden ocultos
 * detrás del compositor.
 */
.dashboard-chat .chat-message-list {
    padding-bottom: 14px;
}


/* =========================================================
   TABLET Y CELULAR
   ========================================================= */

@media (max-width: 900px) {

    .dashboard-chat {
        height:
            calc(
                100dvh
                - 78px
            ) !important;
    }
}


@media (max-width: 720px) {

    .dashboard-chat {
        height:
            calc(
                100dvh
                - 58px
            ) !important;

        min-height: 0 !important;

        border-radius: 0 !important;
    }

    .dashboard-chat .chat-form,
    .dashboard-chat .mia-chat-composer {
        padding:
            7px 8px
            calc(
                7px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    /*
     * El teclado del teléfono no debe provocar zoom.
     */
    #message-input {
        font-size: 16px !important;
    }
}



/* =========================================================
   MIA_DASHBOARD_DENSITY_V1
   Optimización vertical del Dashboard.
   ========================================================= */


/* =========================================================
   CABECERA GLOBAL
   ========================================================= */

/*
 * Reducimos la altura del encabezado principal
 * únicamente cuando estamos dentro del Dashboard.
 */
body:has(.dashboard-section) .main-header {
    position: relative;
}

body:has(.dashboard-section) .header-content {
    min-height: 52px;
}

body:has(.dashboard-section) .mia-brand-logo {
    width: 168px;
}

body:has(.dashboard-section) .main-nav {
    gap: 12px;

    font-size: 0.80rem;
}

body:has(.dashboard-section) .main-nav .nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

body:has(.dashboard-section) .dashboard-section {
    min-height:
        calc(
            100dvh
            - 52px
        );

    padding:
        8px 0
        10px;
}

body:has(.dashboard-section)
.dashboard-section > .container {
    width:
        min(
            calc(100% - 20px),
            1480px
        );
}


/* =========================================================
   ENCABEZADO COMPACTO
   ========================================================= */

body:has(.dashboard-section)
.mia-compact-dashboard-header {
    min-height: 58px;

    margin-bottom: 8px;
    padding: 7px 11px;

    border-radius: 14px;
}

body:has(.dashboard-section)
.mia-compact-tooth {
    width: 37px;
    height: 37px;

    flex-basis: 37px;

    border-radius: 12px;
}

body:has(.dashboard-section)
.mia-compact-tooth svg {
    width: 24px;
    height: 24px;
}

body:has(.dashboard-section)
.mia-compact-name {
    font-size: 0.92rem;
}

body:has(.dashboard-section)
.mia-compact-user {
    font-size: 0.84rem;
}

body:has(.dashboard-section)
.mia-compact-action {
    min-height: 31px;
    padding: 5px 8px;

    font-size: 0.64rem;
}


/* =========================================================
   ESPACIO DE TRABAJO
   ========================================================= */

body:has(.dashboard-section)
.mia-workspace {
    gap: 10px;

    height:
        calc(
            100dvh
            - 126px
        );

    min-height: 520px;
}


/* =========================================================
   SIDEBAR DE CONVERSACIONES
   ========================================================= */

body:has(.dashboard-section)
.conversation-sidebar {
    padding: 12px;

    border-radius: 15px;
}

body:has(.dashboard-section)
.conversation-sidebar-header {
    margin-bottom: 8px;
}

body:has(.dashboard-section)
.new-conversation-button {
    min-height: 37px;
    padding: 7px 10px;

    font-size: 0.75rem;
}

body:has(.dashboard-section)
.conversation-list {
    gap: 5px;
}

body:has(.dashboard-section)
.conversation-item {
    padding: 8px 9px;

    border-radius: 9px;
}


/* =========================================================
   BARRA PROFESIONAL
   ========================================================= */

body:has(.dashboard-section)
.mia-professional-toolbar {
    min-height: 36px;
    padding: 3px 7px;
}

body:has(.dashboard-section)
.mia-main-tool {
    min-height: 28px;
    padding: 4px 7px;

    font-size: 0.60rem;
}


/* =========================================================
   CABECERA DE CONVERSACIÓN
   ========================================================= */

body:has(.dashboard-section)
.dashboard-chat .chat-header {
    min-height: 45px;
    padding: 4px 8px;
}

body:has(.dashboard-section)
.dashboard-chat .mia-dental-avatar {
    width: 33px;
    height: 33px;

    flex-basis: 33px;
}

body:has(.dashboard-section)
.active-conversation-title {
    font-size: 0.76rem;
}

body:has(.dashboard-section)
.chat-header-information::after {
    font-size: 0.53rem;
}

body:has(.dashboard-section)
.chat-tool-button {
    width: 27px;
    height: 27px;

    font-size: 0.72rem;
}


/* =========================================================
   ÁREA DE MENSAJES
   ========================================================= */

body:has(.dashboard-section)
.dashboard-chat .chat-content {
    padding: 9px 11px;
}

body:has(.dashboard-section)
.chat-message-list {
    gap: 9px;
}

body:has(.dashboard-section)
.message-mia,
body:has(.dashboard-section)
.message-user {
    padding: 10px 12px;

    border-radius: 14px;

    font-size: 0.83rem;
    line-height: 1.48;
}


/* =========================================================
   COMPOSITOR
   ========================================================= */

body:has(.dashboard-section)
.dashboard-chat .chat-form,
body:has(.dashboard-section)
.dashboard-chat .mia-chat-composer {
    padding: 6px 9px !important;
}

body:has(.dashboard-section)
.mia-composer-tools {
    margin-bottom: 4px;
}

body:has(.dashboard-section)
.mia-composer-tool {
    min-height: 29px;
    padding: 4px 7px;

    font-size: 0.60rem;
}

body:has(.dashboard-section)
.mia-composer-main #message-input {
    min-height: 41px;
    padding: 9px 12px;
}

body:has(.dashboard-section)
.mia-send-button {
    min-height: 41px;
}

body:has(.dashboard-section)
.mia-composer-note {
    display: none;
}


/* =========================================================
   ÍNDICE DERECHO
   ========================================================= */

body:has(.dashboard-section)
.chat-index-panel {
    padding: 12px;

    border-radius: 15px;
}

body:has(.dashboard-section)
.chat-index-description {
    margin: 8px 0;

    font-size: 0.68rem;
}

body:has(.dashboard-section)
.chat-index-item {
    padding: 7px 8px;

    font-size: 0.68rem;
}


/* =========================================================
   PIE DE PÁGINA
   ========================================================= */

/*
 * En el Dashboard no necesitamos mostrar el footer,
 * porque reduce el área útil del chat.
 *
 * Continúa visible en landing, login, perfil y Studio.
 */
body:has(.dashboard-section) .main-footer {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1020px) {

    body:has(.dashboard-section)
    .mia-workspace {
        height:
            calc(
                100dvh
                - 160px
            );
    }

    body:has(.dashboard-section)
    .mia-compact-dashboard-header {
        gap: 5px;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 720px) {

    body:has(.dashboard-section)
    .main-header {
        display: none;
    }

    body:has(.dashboard-section)
    .dashboard-section {
        min-height: 100dvh;
        padding: 0;
    }

    body:has(.dashboard-section)
    .dashboard-section > .container {
        width: 100%;
    }

    body:has(.dashboard-section)
    .mia-compact-dashboard-header {
        margin:
            5px 6px
            6px;

        padding: 6px 7px;

        border-radius: 12px;
    }

    body:has(.dashboard-section)
    .mia-workspace {
        height:
            calc(
                100dvh
                - 101px
            );

        min-height: 0;

        gap: 0;
    }

    body:has(.dashboard-section)
    .mia-professional-toolbar {
        min-height: 34px;
        padding: 2px 5px;
    }

    body:has(.dashboard-section)
    .mia-main-tool {
        min-height: 27px;
        padding: 3px 6px;
    }

    body:has(.dashboard-section)
    .dashboard-chat .chat-header {
        min-height: 41px;
        padding: 3px 6px;
    }

    body:has(.dashboard-section)
    .dashboard-chat .chat-content {
        padding: 7px;
    }

    body:has(.dashboard-section)
    .message-mia,
    body:has(.dashboard-section)
    .message-user {
        max-width: 93%;

        padding: 9px 10px;

        font-size: 0.80rem;
    }
}



/* ===========================================================
   MIA_WORKSPACE_WELCOME_V1
   =========================================================== */

.mia-workspace-welcome{

    margin:18px auto;

    max-width:760px;

    animation:fadeWelcome .45s ease;
}

@keyframes fadeWelcome{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.mia-workspace-card{

    background:white;

    border-radius:22px;

    padding:30px;

    border:1px solid #ebe9f5;

    box-shadow:
        0 12px 30px rgba(0,0,0,.06);

}

.mia-workspace-logo{

    width:74px;

    height:74px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    background:#f8f3ff;

}

.mia-workspace-card h2{

    text-align:center;

    margin-top:18px;

    color:#5f3ea3;

}

.mia-workspace-card p{

    text-align:center;

    margin-top:8px;

    color:#666;

}

.mia-workspace-card h3{

    margin-top:28px;

    text-align:center;

    font-size:1rem;

}

.mia-workspace-actions{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:18px;

    margin-top:24px;

}

.mia-start-action{

    border:none;

    border-radius:18px;

    background:white;

    border:1px solid #e8e8ef;

    padding:24px;

    cursor:pointer;

    transition:.25s;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    font-size:32px;

}

.mia-start-action strong{

    font-size:15px;

    color:#4f3b84;

}

.mia-start-action:hover{

    transform:translateY(-4px);

    box-shadow:

        0 14px 24px rgba(95,62,163,.12);

    border-color:#cdb8ff;

}

@media(max-width:720px){

.mia-workspace-card{

padding:22px;

}

.mia-workspace-actions{

grid-template-columns:1fr;

}

.mia-start-action{

padding:18px;

font-size:28px;

}

}