/* ---- Grundlayout ---- */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

    /* Rot-layout: header överst, footer nederst, mitten flexar */
    body.layout-root {
        display: flex;
        flex-direction: column;
        height: 100vh; /* fyll fönstret */
        overflow: hidden; /* ingen browserscroll */
    }

/* Header & footer ska inte krympa */
.layout-header,
.layout-footer {
    flex: 0 0 auto;
}

/* Scrollbart innehåll */
#page-content {
    flex: 1 1 auto;
    min-height: 0; /* SUPER-viktigt i flex-layouter */
    overflow: auto; /* scroll här */
    -webkit-overflow-scrolling: touch;
}

/* För felsökning – ta bort senare om du vill */
#page-content {
    /* border: 2px solid red; */
}

/* ---- Din befintliga styling (rensad) ---- */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* VIKTIGT: TA BORT/COMMENTA EXAKT DETTA OM DET FINNS NÅGONSTANS: */

/*
html, body {
    overflow: hidden;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}
*/
/* Överstyr gamla template-regler */
html {
    position: static !important;
    min-height: 100% !important;
}

body {
    margin: 0 !important;
}

/* Se till att footern INTE är absolut längre */
.footer {
    position: static !important;
    height: auto !important;
}


/* Hela konversationsytan */
#chat-container {
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: .5rem;
    border: 1px solid #ddd;
    /* Extra botten-padding så sista bubblorna inte hamnar under inputbaren */
    margin-bottom: 40px;
}

.chat-row {
    display: flex;
    margin-bottom: .5rem;
}

    .chat-row.user {
        justify-content: flex-end;
    }

    .chat-row.assistant {
        justify-content: flex-start;
    }

.chat-bubble {
    max-width: 75%;
    padding: .5rem .75rem;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    white-space: pre-wrap;
    word-wrap: break-word;
}

    .chat-bubble.user {
        background-color: #0d6efd;
        color: #fff;
        border-bottom-right-radius: .2rem;
    }

    .chat-bubble.assistant {
        background-color: #ffffff;
        color: #212529;
        border-bottom-left-radius: .2rem;
    }

.chat-label {
    font-size: .75rem;
    font-weight: 600;
    opacity: .8;
    margin-bottom: .15rem;
}

/* Wrapper för svarskälla + "tänker" + input – sticky längst ner,
           så den hamnar typ 10px ovanför footern */
.chat-input-wrapper {
    position: sticky;
    bottom: 10px; /* ca 10px ovanför nederkant / footern */
    z-index: 20;
    margin-top: 1rem;
    background-color: #ebebeb;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Svarskälla-baren som sitter precis ovanför inputbaren */
.chat-mode-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    
    border-bottom: none;
    font-size: .875rem;
}

    .chat-mode-bar label {
        margin: 0;
        font-weight: 600;
    }

/* "Boxi tänker..."-raden – precis under mode-baren, över input */
#thinking-indicator {
    padding: .35rem .75rem;
    font-size: .875rem;
    
    border-top: none;
    border-bottom: none;
    display: none; /* start gömd */
    align-items: center;
    gap: .5rem;
}

.chat-input-bar {
    padding: .5rem;
    
    border-top: none;
    
}

    .chat-input-bar textarea.form-control {
        resize: none; /* vi styr höjd med JS */
        max-height: 200px; /* så den inte tar över hela vyn */
        overflow-y: auto;
    }

/* Skicka-knappen som ikon (pappersflygplan) */
#send-btn {
    height: 40px;
    width: 40px;
    min-height: 40px;
    min-width: 40px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #send-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(13,110,253,.35);
    }




.chat-bubble.assistant table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.chat-bubble.assistant th,
.chat-bubble.assistant td {
    padding: 6px 10px;
    border: 1px solid #ddd;
    font-size: 0.9rem;
}

.chat-bubble.assistant th {
    background-color: #f3f3f3;
    font-weight: 600;
}