/* tyyli.css */

/* 1. Perusasetukset ja väripaletti */
:root {
  --primary-color: #007bff; /* Pääväri (esim. painikkeet, linkit) */
  --secondary-color: #6c757d; /* Toissijainen väri */
  --background-light: #f8f9fa; /* Vaalea taustaväri */
  --background-white: #ffffff; /* Valkoinen tausta (kortit, elementit) */
  --border-color: #dee2e6; /* Reunaviivan väri */
  --text-primary: #212529; /* Päätekstin väri */
  --text-secondary: #6c757d; /* Toissijaisen tekstin väri */
  --success-color: #28a745; /* Onnistumisen väri */
  --danger-color: #dc3545; /* Vaaran/virheen väri */
  --unread-bg: #98b8e9;    /* Lukemattoman viestin taustaväri */
  --message-sent-bg: #007bff; /* Lähetetyn viestin kuplan väri */
  --message-received-bg: #e9ecef; /* Vastaanotetun viestin kuplan väri */
  --direct-color: #007bff; /* Yksityisviestin tunnusväri */
  --group-color: #b8176a; /* Ryhmäviestin tunnusväri */
  --announcement-color: #ffc107; /* Tiedotteen tunnusväri */
    --support-color: #17a2b8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --border-radius: 0.5rem; /* Pyöristyksen säde */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background-light);
  color: var(--text-primary);
  margin: 0;
  padding: 1rem;
}

/* 2. Viestikeskuksen päärakenne */
.message-center-container {
  display: flex;
  height: calc(100vh - 2rem); /* Vie koko näytön korkeuden miinus body-padding */
  max-width: 1200px;
  margin: auto;
  background: var(--background-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden; /* Piilottaa ylitsevuotavat osat pyöristystä varten */
}

.thread-list-panel {
  width: 35%;
  min-width: 300px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.message-view-panel {
  width: 65%;
  display: flex;
  flex-direction: column;
}

/* 3. Yläpalkki ja painikkeet */
.panel-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#message-view-header.direct {
  background-color: var(--direct-color);
  color: #fff;
}
#message-view-header.group {
  background-color: var(--group-color);
  color: #fff;
}
#message-view-header.announcement {
  background-color: var(--announcement-color);
  color: #212529;
}
#message-view-header.support {
  background-color: var(--support-color);
  color: #fff;
}
.panel-header h2 {
  margin: 0;
  font-size: 1.25rem;
}






/* 4. Uuden viestin lomake */
#new-thread-form {
  padding: 1rem;
  background-color: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

.form-control {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-sizing: border-box; /* Varmistaa, että padding ei kasvata leveyttä */
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 5. Viestiketjujen lista */
#thread-list {
  overflow-y: auto;
  flex-grow: 1; /* Täyttää jäljelle jäävän tilan */
}

.thread-item {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s;
}
.thread-item.direct {
  border-left: 4px solid var(--direct-color);
  padding-left: calc(1rem - 4px);
}
.thread-item.group {
  border-left: 4px solid var(--group-color);
  padding-left: calc(1rem - 4px);
}
.thread-item.announcement {
  border-left: 4px solid var(--announcement-color);
  padding-left: calc(1rem - 4px);
}
.thread-item.support {
  border-left: 4px solid var(--support-color);
  padding-left: calc(1rem - 4px);
}
.thread-item:hover {
  background-color: var(--background-light);
}

.thread-item.active {
  background-color: var(--primary-color) !important;
  color: white;
}
.thread-item.active .thread-meta,
.thread-item.active .thread-sender {
    color: rgba(255, 255, 255, 0.85);
}


.thread-item.unread {
  background-color: var(--unread-bg);
  border-left: 4px solid var(--primary-color);
  padding-left: calc(1rem - 4px);
}
.thread-item.unread.direct { border-left-color: var(--direct-color); }
.thread-item.unread.group { border-left-color: var(--group-color); }
.thread-item.unread.announcement { border-left-color: var(--announcement-color); }
.thread-item.unread.support { border-left-color: var(--support-color); }

.thread-item.unread .thread-sender {
  font-weight: bold;
}

.thread-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.thread-sender {
    font-weight: 500;
}

.thread-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.thread-preview {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Lisää ... jos teksti ei mahdu */
}

/* 6. Keskustelunäkymä */
#message-view {
  flex-grow: 1; /* Täyttää tilan */
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#message-view-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--text-secondary);
    text-align: center;
}

.message-bubble {
  max-width: 70%;
  padding: 0.6rem 1rem;
  border-radius: 1.2rem;
  margin-bottom: 0.75rem;
}

.message-bubble.sent {
  background-color: var(--message-sent-bg);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 0.2rem; /* Tyylikäs yksityiskohta */
}

.message-bubble.received {
  background-color: var(--message-received-bg);
  color: var(--text-primary);
  margin-right: auto;
  border-bottom-left-radius: 0.2rem; /* Tyylikäs yksityiskohta */
}

.message-meta {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.message-bubble.sent .message-meta {
    color: rgba(255,255,255,0.8);
    text-align: right;
}

/* 7. Viestin lähetyslomake keskustelussa */
#reply-form {
  display: flex;
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  background-color: var(--background-light);
}

#reply-form input {
  flex-grow: 1;
  margin-right: 0.5rem;
}

/* 8. Responsiivisuus mobiililaitteille */
@media (max-width: 768px) {
  .message-center-container {
    flex-direction: column;
    height: 100vh;
    padding: 0;
  }
  .thread-list-panel {
    width: 100%;
    height: 100%;
    border-right: none;
    display: flex; /* Varmistetaan, että näkyy */
  }
  .message-view-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    transform: translateX(100%); /* Piilotetaan oletuksena */
    transition: transform 0.3s ease-in-out;
  }
  .message-view-panel.active {
    transform: translateX(0); /* Tuodaan näkyviin */
  }
}