/* Rodnie Messenger 7.3.5 — unified theme */

/* ---------- LIGHT ---------- */

body {
  --ui-bg:#f3f6f5;
  --ui-panel:#ffffff;
  --ui-surface:#ffffff;
  --ui-surface2:#f1f4f3;
  --ui-surface3:#e7ecea;
  --ui-hover:#edf2f0;

  --ui-text:#17201d;
  --ui-text2:#586660;
  --ui-muted:#89938f;

  --ui-border:#dce5e1;
  --ui-accent:#18a77d;
  --ui-danger:#df5353;
}

/* ---------- DARK ---------- */

body.dark {
  --ui-bg:#0d0f11;
  --ui-panel:#15171a;
  --ui-surface:#1b1e22;
  --ui-surface2:#22262b;
  --ui-surface3:#2a2f35;
  --ui-hover:#292e34;

  --ui-text:#f2f3f5;
  --ui-text2:#c4c9cd;
  --ui-muted:#92999f;

  --ui-border:#2c3137;
  --ui-accent:#35c99c;
  --ui-danger:#ff6868;

  color-scheme:dark;
}

/* ---------- MAIN ---------- */

body {
  color:var(--ui-text);
}

body.dark,
body.dark .app,
body.dark .main {
  background-color:var(--ui-bg) !important;
  color:var(--ui-text) !important;
}

/* ---------- PANELS ---------- */

body.dark .side,
body.dark .nav,
body.dark .chathead,
body.dark .composer {
  background:var(--ui-panel) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}

/* ---------- MESSAGE MENU ---------- */

body .sheet {
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}

body .sheet button {
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}

body .sheet button:hover,
body .sheet button:active {
  background:var(--ui-hover) !important;
  color:var(--ui-text) !important;
}

/* ---------- PICKERS ---------- */

body .picker,
body .picker-tabs,
body .picker-body {
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}

body .picker button {
  color:var(--ui-text) !important;
}

body.dark .picker-tabs .on {
  background:var(--ui-surface3) !important;
  color:var(--ui-accent) !important;
}

/* ---------- REACTIONS ---------- */

body .reactionbar {
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border:1px solid var(--ui-border) !important;
}

body .reactionbar button {
  background:transparent !important;
}

body .reaction-plus {
  background:var(--ui-surface2) !important;
  color:var(--ui-text2) !important;
  border:1px solid var(--ui-border) !important;
}

/* ---------- MODALS / PROFILES ---------- */

body .modal .card {
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}

body.dark .personcard,
body.dark .settings-card {
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}

/* ---------- FORMS ---------- */

body.dark input,
body.dark textarea,
body.dark select,
body.dark .search,
body.dark .composebox {
  background:var(--ui-surface2) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color:var(--ui-muted) !important;
}

/* ---------- SECONDARY TEXT ---------- */

body.dark .preview,
body.dark .time {
  color:var(--ui-muted) !important;
}

/* ---------- MESSAGES ---------- */

body.dark .bubble {
  background:var(--ui-surface2) !important;
  color:var(--ui-text) !important;
}

body.dark .mine .bubble {
  background:#263b35 !important;
  color:var(--ui-text) !important;
}

body.dark .reply {
  background:rgba(255,255,255,.05) !important;
}

/* ---------- FILE / AUDIO ---------- */

body.dark .filecard,
body.dark .audio-card {
  background:var(--ui-surface3) !important;
  color:var(--ui-text) !important;
}

/* ---------- SELECTED ---------- */

body.dark .tabs .on,
body.dark .nav button.on {
  background:#24352f !important;
  color:var(--ui-accent) !important;
}

/* ---------- OVERLAY ---------- */

.floating-backdrop {
  background:rgba(0,0,0,.42) !important;
}

/* ---------- DESTRUCTIVE ---------- */

body .sheet [data-a="delete"],
body .sheet [data-a="hide"],
body .danger {
  color:var(--ui-danger) !important;
}

/* ---------- TEXT SELECTION ---------- */

body.dark ::selection {
  background:#315248;
  color:#fff;
}

body:not(.dark) ::selection {
  background:#ccefe4;
  color:#10231d;
}

/* 7.3.6 — destructive buttons */
body .danger {
  background: var(--ui-danger) !important;
  color: #fff !important;
}

body .danger:hover,
body .danger:active {
  color: #fff !important;
}

/* destructive actions inside context menu:
   dark/light surface + red text */
body .sheet [data-a="delete"],
body .sheet [data-a="hide"] {
  background: var(--ui-surface) !important;
  color: var(--ui-danger) !important;
}

body .sheet [data-a="delete"]:active,
body .sheet [data-a="hide"]:active {
  background: var(--ui-hover) !important;
  color: var(--ui-danger) !important;
}