/* ======================== */
/* DEFAULT MODE */
/* ======================== */
body.default-mode {
    background-color: #f5f5f5; /* koko sivun tausta */
    color: #000;
}

body.default-mode #ai-news {
    background: #fafafa;
    color: #000;
}
body.default-mode .news-item {
    border-bottom: 1px solid #ddd;
}
body.default-mode .news-item h3 a {
    color: #111;
}
body.default-mode .news-item h3 a:hover {
    color: #0077cc;
}
body.default-mode .news-desc {
    color: #444;
}
body.default-mode .news-date {
    color: #888;
}

body.default-mode a {
    color: #000;
}

body.default-mode .header {
    background-color: #B04A1E;
    color: #fff;
}

body.default-mode .navbar, 
body.default-mode .nav-menu li, 
body.default-mode .nav-link {
    background-color: #B04A1E;
    color: #fff;
}

body.default-mode .dropdown-menu,
body.default-mode .settings-submenu {
    background-color: #B04A1E;
    color: #fff;
}

body.default-mode .dropdown-menu li,
body.default-mode .settings-submenu li,
body.default-mode .dropdown-menu li a,
body.default-mode .settings-submenu li a {
    color: #fff;
}

body.default-mode .footer {
    background-color: #B04A1E;
    color: #fff;
}

body.default-mode .footer p,
body.default-mode .footer h3,
body.default-mode .footer ul li,
body.default-mode .footer a {
    color: #fff;
}

body.default-mode .container,
body.default-mode .container .text,
body.default-mode .kokosivu,
body.default-mode .kokosivu h1,
body.default-mode .kokosivu h2,
body.default-mode p {
    color: #000;
}

/* ======================== */
/* DARK MODE */
/* ======================== */
body.dark-mode {
    background-color: #121212; /* koko sivu tummaksi */
    color: #eee;
}

body.dark-mode #ai-news {
    background: #232323 !important;
    color: #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
body.dark-mode .news-item {
    border-bottom: 1px solid #333;
}
body.dark-mode .news-item h3 a {
    color: #fff;
}
body.dark-mode .news-item h3 a:hover {
    color: #4fa3ff;
}
body.dark-mode .news-desc {
    color: #bbb;
}
body.dark-mode .news-date {
    color: #aaa;
}

body.dark-mode a {
    color: #eee;
}

/* Header ja navbar */
body.dark-mode .header {
    background-color: #1e1e1e;
    color: #fff;
}

body.dark-mode .navbar, 
body.dark-mode .nav-menu li, 
body.dark-mode .nav-link {
    background-color: #1e1e1e;
    color: #fff;
}

/* Dropdown-menu ja alavalikot */
body.dark-mode .dropdown-menu,
body.dark-mode .settings-submenu {
    background-color: #1e1e1e;
    color: #fff;
}

body.dark-mode .dropdown-menu li,
body.dark-mode .settings-submenu li,
body.dark-mode .dropdown-menu li a,
body.dark-mode .settings-submenu li a {
    color: #fff;
}

/* Footer */
body.dark-mode .footer {
    background-color: #1e1e1e;
    color: #fff;
}

body.dark-mode .footer p,
body.dark-mode .footer h3,
body.dark-mode .footer ul li,
body.dark-mode .footer a {
    color: #fff;
}

/* Containerit, sisältöalueet ja otsikot */
body.dark-mode .container,
body.dark-mode .container .text,
body.dark-mode .kokosivu,
body.dark-mode .kokosivu h1,
body.dark-mode .kokosivu h2,
body.dark-mode p {
    color: #eee; /* tekstit näkyviin tummalla taustalla */
}

/* Dark-mode sisältöalueiden rajat ja taustat piiloon */
body.dark-mode .container,
body.dark-mode .text-container,
body.dark-mode .text-otsikko,
body.dark-mode .text-esittely,
body.dark-mode .text {
    background-color: transparent; /* tausta sulautuu sivuun */
    border-color: transparent;     /* rajat piiloon */
    color: #eee;                   /* varmista että tekstit näkyy */
}


/* DARK MODE CHATBOT */

body.dark-mode .app-container {
    background-color: #1e1e1e;
    color: white;
}

body.dark-mode .chat-header {
    background-color: #1e1e1e;
}

body.dark-mode .chat-header h1 {
    color: white;
}

body.dark-mode .button-container button {
    background-color: #1e1e1e;
    border: 1px solid white;
}

body.dark-mode .button-container button:hover {
    background-color: #2f2f2f;
    border: 1px solid white;
}

body.dark-mode .chat-messages {
    background-color: rgb(47, 47, 47);
}

body.dark-mode .bot-message {
    background-color: #1e1e1e;
    color: white;
}

body.dark-mode .user-message {
    background-color: #7a7a7a;
    color: white;
}

body.dark-mode .chat-input-container {
    background-color: #1e1e1e;
}

body.dark-mode .chat-input-container input {
    background-color: rgb(47, 47, 47);
    color: white;
}

body.dark-mode .chat-input-container button {
    background-color: #1e1e1e;
    border: 1px solid white;
}

body.dark-mode .chat-input-container button:hover {
    background-color: #2f2f2f;
    border: 1px solid white;
}

/* ======================== */
/* LIGHT MODE */
/* ======================== */
body.light-mode {
    background-color: #ffffff;
    color: #000;
}

body.light-mode #ai-news {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
body.light-mode .news-item {
    border-bottom: 1px solid #e0e0e0;
}
body.light-mode .news-item h3 a {
    color: #222;
}
body.light-mode .news-item h3 a:hover {
    color: #ff6600;
}
body.light-mode .news-desc {
    color: #333;
}
body.light-mode .news-date {
    color: #888;
}

body.light-mode a {
    color: #000;
}

/* Header ja navbar */
body.light-mode .header {
    background-color: #f5a17b; /* haluttu vaalea väri */
    color: #000;
}

body.light-mode .header nav,
body.light-mode .navbar,
body.light-mode .nav-menu li,
body.light-mode .nav-link {
    background-color: #f5a17b; /* vaalea navbar */
    color: #000;               /* tumma teksti */
}

/* Dropdown-menu ja alavalikot */
body.light-mode .dropdown-menu,
body.light-mode .settings-submenu {
    background-color: #f5a17b;
    color: #000;
}

body.light-mode .dropdown-menu li,
body.light-mode .settings-submenu li,
body.light-mode .dropdown-menu li a,
body.light-mode .settings-submenu li a {
    color: #000;
}

/* Footer */
body.light-mode .footer {
    background-color: #f5a17b; /* vaalea footer */
    color: #000;               /* tumma teksti */
}

body.light-mode .footer p,
body.light-mode .footer h3,
body.light-mode .footer ul li,
body.light-mode .footer a {
    color: #000; /* kaikki tekstit ja linkit tummiksi */
}

/* Containerit, sisältöalueet ja otsikot */
body.light-mode .container,
body.light-mode .container .text,
body.light-mode .kokosivu,
body.light-mode .kokosivu h1,
body.light-mode .kokosivu h2,
body.light-mode p {
    color: #000; /* kaikki sisältö näkyviin */
}

/*Uusimmat tekoälyuutiset*/
body.light-mode .otsikko1 {
    color: #000;
}


/* Light-mode sisältöalueiden rajat ja taustat */
body.light-mode .container,
body.light-mode .text-container,
body.light-mode .text-otsikko,
body.light-mode .text-esittely,
body.light-mode .text {
    background-color: #ffffff;  /* vaalea tausta */
    border-color: #f5a17b;      /* rajat näkyviin */
    color: #000;                /* varmistaa tekstin näkyvyyden */
}

/* LIGHT MODE CHATBOT */
body.light-mode .app-container {
    background-color: #ffffff; /* vaalea tausta botille */
     /* rajat näkyviin */
    color: #000; /* tekstit tummiksi */
}

body.light-mode .chat-header {
    background-color: #f5a17b; /* otsikkoalue vaaleaksi */
    color: #000;
    border-bottom: 2px solid #f5a17b;
}

body.light-mode .button-container button {
    background-color: white;
    color: black;
}

body.light-mode .button-container button:hover {
    background-color: #f7c3ab;
}

body.light-mode .chat-messages {
    background-color: #fff; /* chat-alueen tausta */
    color: #000;
}

body.light-mode .bot-message {
    background-color: #f0f0f0; /* botin viestien vaalea tausta */
    color: #000;
}

body.light-mode .user-message {
    background-color: #e0e0e0; /* käyttäjän viestit hieman eri sävyllä */
    color: #000;
}

body.light-mode .chat-input-container {
    background-color: #f5a17b;
}


body.light-mode .chat-input-container input {
    flex: 1;
    padding: 8px;
    border: 1px solid #f5a17b;
    background-color: #fff;
    color: #000;
}

body.light-mode .chat-input-container button {
    background-color: #f5a17b;
    color: #000;
    border: 1px solid white;
    cursor: pointer;

}

body.light-mode .chat-input-container button:hover {
    background-color: #f7c3ab;
}

body.light-mode .shine-text {
    background: none;
    color: #000;
}

/* Korjaa iOS Safari 100vh-bugin */
@supports (-webkit-touch-callout: none) {
  .dropdown-menu {
    max-height: calc(100dvh - 60px); /* dynaaminen vh Safari iOS 16+ */
  }
}