/* Minimal VDB-style inbox UI (for testing) */

.vdb-comm-wrap {
  max-width: 980px;
  margin: 18px auto;
  padding: 18px;
  background: rgba(23, 28, 35, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  color: #e8eef6;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Top bar (user + who + logout) */
.vdb-comm-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 0 0 14px 0;
  flex-wrap: wrap;
}

.vdb-comm-topbar-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}

.vdb-comm-topbar-sep{ color: rgba(232,238,246,.55); }
/* Header colors: match conversation logic (Podpora left / user right) */
.vdb-comm-topbar-with{ color: #f1c40f; }
.vdb-comm-topbar-user{ color: #1bb77a; }
.vdb-comm-btn-logout{ padding: 8px 14px; }

.vdb-comm-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.vdb-comm-header-left{
  display:flex;
  align-items:center;
  gap: 10px;
}

.vdb-comm-title {
  font-size: 20px;
  font-weight: 800;
  color: #1bb77a;
}

.vdb-comm-grid {
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 14px;
}

@media (max-width: 820px) {
  .vdb-comm-grid { grid-template-columns: 1fr; }
}

.vdb-comm-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px;
}

.vdb-comm-panel-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.vdb-comm-list {
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 520px;
  overflow:auto;
  padding-right: 4px;
}

.vdb-comm-item {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
  cursor:pointer;
}

.vdb-comm-item:hover {
  background: rgba(0,0,0,0.25);
  /* outline se reže pri overflow:auto; uporabimo inset obrobo */
  box-shadow: inset 0 0 0 2px rgba(27,183,122,0.45);
}

.vdb-comm-item.active {
  box-shadow: inset 0 0 0 2px rgba(241,196,15,0.75);
}

.vdb-comm-item.active:hover {
  box-shadow: inset 0 0 0 2px rgba(241,196,15,0.85);
}

.vdb-comm-item-subject {
  font-weight: 800;
  color: #dff8ef;
  margin-bottom: 6px;
}

.vdb-comm-item-meta {
  font-size: 12px;
  color: rgba(232,238,246,0.75);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.vdb-comm-messages {
  max-height: 520px;
  overflow:auto;
  padding: 6px 12px 6px 2px;
}

.vdb-comm-msg {
  margin: 0 0 10px 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  max-width: 92%;
}

/* Podpora levo, uporabnik desno */
.vdb-comm-msg.staff  { border-left: 4px solid #f1c40f; margin-right: auto; }
.vdb-comm-msg.person { border-right: 4px solid #1bb77a; margin-left: auto; background: rgba(27,183,122,0.08); }

.vdb-comm-msg-meta {
  font-size: 12px;
  color: rgba(232,238,246,0.7);
  margin-bottom: 6px;
}

.vdb-comm-compose {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.vdb-comm-input,
.vdb-comm-textarea {
  width: 100%;
  box-sizing:border-box;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #e8eef6 !important;
  caret-color: #e8eef6;
  padding: 10px 12px;
  outline: none;
}

.vdb-comm-input:focus,
.vdb-comm-textarea:focus {
  color: #e8eef6 !important;
  border-color: rgba(27,183,122,0.7);
  box-shadow: 0 0 0 3px rgba(27,183,122,0.18);
}

/*
  Native <select> dropdown options often render with a light system background.
  Our select text is white, so we force dropdown option text to be dark to keep it readable.
*/
.vdb-comm-input option,
.vdb-comm-input optgroup {
  color: #111111;
  background: #ffffff;
}

/* "Zadeva" polje (novo sporočilo podpori) mora biti belo in z črno pisavo. */
.vdb-comm-input.vdb-comm-input-white {
  background: #ffffff !important;
  color: #111111 !important;
  caret-color: #111111;
  padding-top: 14px;
  padding-bottom: 14px;
}

.vdb-comm-input.vdb-comm-input-white:focus {
  background: #ffffff !important;
  color: #111111 !important;
  caret-color: #111111;
}

.vdb-comm-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}

.vdb-comm-btn {
  border: 1px solid rgba(27,183,122,0.7);
  color: #1bb77a;
  background: transparent;
  padding: 9px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
}

.vdb-comm-btn:hover { background: rgba(27,183,122,0.12); }

.vdb-comm-muted {
  font-size: 12px;
  color: rgba(232,238,246,0.65);
}

.vdb-comm-error {
  margin-top: 12px;
  background: rgba(231,76,60,0.12);
  border: 1px solid rgba(231,76,60,0.45);
  color: #fbe1dc;
  padding: 10px 12px;
  border-radius: 12px;
}

.vdb-comm-box {
  max-width: 720px;
  margin: 18px auto;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e8eef6;
}