/* ====== CSS Variables ====== */
:root {
  --background  : #111;
  --text        : #fff;
  --bubble-self : #222;
  --bubble-other: #191919;
  --input-bg    : #181818;
  --footer-bg   : #111;
  --status      : #0c8054;
  --meta        : #22553a;
  --dark-gray   : #f0f0f0;
  --light-gray  : #333;
  --icon-stroke : #fafcff;
  --main-bg     : #181b20;
  --main-fg     : #fff;
  --main-bg-dark: #181b20;
  --main-fg-dark: #fafcff;
  --accent      : #21a366;
  --emoji-bg    : #23292f;
  --emoji-border: #444;
}

[data-theme="light"] {
  --background  : ##F6F7F7;
  --text        : #222;
  --bubble-self : #e6e8eb;
  --bubble-other: #f0f1f3;
  --input-bg    : #eceef1;
  --footer-bg   : ##F6F7F7;
  --status      : #0c8054;
  --meta        : #22553a;
  --dark-gray   : #444;
  --light-gray  : #e0e0e0;
  --icon-stroke : #23292f;
  --main-bg     : ##F6F7F7;
  --main-fg     : #23292f;
  --main-bg-dark: #e6e8eb;
  --main-fg-dark: #23292f;
  --accent      : #5b9bd5;
  --emoji-bg    : #f9fafd;
  --emoji-border: #d3d6db;
}

/* ====== Base Styles ====== */
body {
  background    : var(--background);
  color         : var(--text);
  font-family   : 'Segoe UI', Arial, sans-serif;
  margin        : 0;
  padding-bottom: 64px;
}

#chatUI,
.chat-container,
.message,
.message.self,
#typingStatus,
footer {
  color     : var(--text);
  background: none;
}

.chat-container {
  margin        : 50px 50px 10px 0px;
  display       : flex;
  flex-direction: column;
  gap           : 0.4em;
  width         : 100vw;
}

.message,
.message.self {
  display       : flex;
  flex-direction: column;
  align-self    : stretch;
  background    : var(--bubble-other);
  color         : var(--text);
  border-radius : 1.3em;
  padding       : 0.8em 1.2em;
  margin        : 0.3em 0;
  width         : 100%;
  word-break    : break-word;
}

.message.self {
  background: var(--bubble-self);
  color     : var(--accent);
}

.message-content {
  flex         : 1 1 auto;
  margin-bottom: 0.4em;
}

.message-meta {
  display        : flex;
  flex-direction : row;
  justify-content: space-between;
  align-items    : center;
  width          : 100%;
  font-size      : 0.95em;
}

/* ====== Input Bar ====== */
#inputBox {
  flex         : 1;
  background   : var(--input-bg);
  color        : var(--text);
  border       : none;
  border-radius: 20px;
  font-size    : 1em;
  padding      : 0.5em 0.9em;
  outline      : none;
  margin-right : 0.5em;
  height       : 20px;
  max-width    : 100%;
  overflow     : hidden;
  resize       : none;
  min-height   : 20px;
  max-height   : 150px;
}

.input-bar {
  position  : fixed;
  left      : 0;
  right     : 0;
  bottom    : 48px;
  background: var(--footer-bg);
  display   : flex;
  padding   : 0.2em 0.7em;
  box-shadow: 0 -2px 8px #0002;
  z-index   : 998;
}

/* ====== Buttons ====== */
button {
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  padding        : 0;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1em;
  background     : #222;
  color          : #fff;
  border         : none;
  margin-right   : 0.5em;
  cursor         : pointer;
  transition     : background 0.2s, color 0.2s;
}

[data-theme="light"] button,
[data-theme="light"] #themeToggle,
[data-theme="light"] #clearChat,
[data-theme="light"] #lockChat {
  background: #f0f0f0;
  color     : #111;
}

.chat-options {
  position: fixed;
  top     : 10px;
  right   : 10px;
  display : flex;
  gap     : 0.5em;
}

.chat-options button {
  width          : 32px;
  height         : 32px;
  border-radius  : 50%;
  padding        : 0;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1.2em;
  background     : #222;
  color          : #fff;
  border         : none;
  cursor         : pointer;
  transition     : background 0.2s, color 0.2s;
}

[data-theme="light"] .chat-options button {
  background: #f0f0f0;
  color     : #111;
}

/* ====== Footer ====== */
footer {
  position           : fixed;
  left               : 0;
  right              : 0;
  bottom             : 0;
  height             : 48px;
  background         : var(--footer-bg);
  color              : var(--text);
  text-align         : center;
  font-size          : 0.98em;
  line-height        : 48px;
  z-index            : 999;
  user-select        : none;
  -webkit-user-select: none;
  cursor             : pointer;
  letter-spacing     : 0.06em;
  border-top         : 1px solid #222;
}

[data-theme="light"] footer {
  border-top: 1px solid #ededed;
}

/* ====== Typing Bar ====== */
.typing-bar {
  position      : fixed;
  left          : 0;
  right         : 40px;
  bottom        : 120px;
  display       : flex;
  align-items   : center;
  min-height    : 24px;
  margin-bottom : 4px;
  margin-top    : 0;
  background    : transparent;
  pointer-events: none;
}

#typingStatus {
  font-size     : 0.8em;
  color         : #21a366;
  padding       : 2px 10px;
  text-align    : left;
  opacity       : 1;
  transition    : opacity 0.18s;
  font-style    : italic;
  letter-spacing: .5px;
}

[data-theme="dark"] #typingStatus {
  color: #87ffc3;
}

[data-theme="light"] #typingStatus {
  color: #2196f3;
}

/* ====== Status & Meta ====== */
.status {
  font-size: 0.8em;
}

.status .tick {
  font-size     : 0.8em;
  color         : var(--dark-gray);
  margin-left   : 2px;
  vertical-align: middle;
  opacity       : 0.8;
  transition    : color 0.2s;
}

.status .tick.delivered {
  color      : #0c8054;
  font-weight: 700;
  opacity    : 1;
}

.status .tick.read {
  color      : #0097ea;
  font-weight: 700;
  opacity    : 1;
}

[data-theme="light"] .status .tick.read {
  color: #0097ea;
}

/* ====== Date Separator ====== */
.date-separator {
  width         : 100%;
  text-align    : center;
  color         : #888;
  font-size     : 0.95em;
  margin        : 1em 0 0.7em 0;
  letter-spacing: 0.03em;
  font-weight   : 500;
  opacity       : 0.92;
}

/* ====== Emoji Picker ====== */
.emoji-picker {
  position     : absolute;
  bottom       : 120px;
  background   : var(--emoji-bg);
  border       : 1px solid var(--emoji-border);
  border-radius: 0.5em;
  padding      : 8px;
  display      : flex;
  flex-wrap    : wrap;
  gap          : 5px;
  z-index      : 10;
}

.emoji {
  cursor    : pointer;
  font-size : 1.4em;
  transition: filter 0.2s;
}

.emoji:hover {
  filter: brightness(1.25);
}

[data-theme="dark"] .emoji {
  filter: brightness(1.1);
}

/* ====== Reply & Edit Bars ====== */
.reply-bar,
.reply-preview {
  background   : #eee;
  border-left  : 3px solid #2196f3;
  margin       : 2px 0 6px 0;
  padding      : 2px 8px;
  border-radius: 4px;
  font-size    : 0.97em;
  color        : #333;
}

[data-theme="dark"] .reply-bar,
[data-theme="dark"] .reply-preview {
  background : #23292f;
  color      : #fafcff;
  border-left: 3px solid #21a366;
}

.edit-bar {
  background   : var(--bubble-self, #eef);
  color        : #333;
  padding      : 2px 10px;
  border-radius: 6px 6px 0 0;
  font-size    : 0.92em;
  margin-bottom: 2px;
}

[data-theme="dark"] .edit-bar {
  background: var(--bubble-self, #222);
  color     : #fafcff;
}

.edit-bar button {
  background : none;
  border     : none;
  color      : #a00;
  font-weight: bold;
  margin-left: 10px;
  cursor     : pointer;
}

.edit-bar button:hover {
  color: #d00;
}

/* ====== Icon Buttons & Icons ====== */
.icon-btn {
  background   : none;
  border       : none;
  outline      : none;
  padding      : 0 6px;
  margin       : 0 1px;
  display      : inline-flex;
  align-items  : center;
  cursor       : pointer;
  opacity      : 0.82;
  transition   : opacity 0.16s, background 0.16s;
  border-radius: 5px;
  height       : 36px;
}

.icon-btn:active,
.icon-btn:focus {
  background: var(--main-bg);
  opacity   : 1;
}

[data-theme="dark"] .icon-btn:active,
[data-theme="dark"] .icon-btn:focus {
  background: var(--main-bg-dark);
}

.icon {
  stroke        : var(--icon-stroke);
  width         : 1.25em;
  height        : 1.25em;
  display       : block;
  pointer-events: none;
}

/* ====== Theme Toggle Icons ====== */
.theme-icon {
  display        : none;
  vertical-align : middle;
  align-items    : center;
  justify-content: center;
  line-height    : 1;
}

.theme-toggle.sunmode .theme-icon.sun,
.theme-toggle.moonmode .theme-icon.moon,
.theme-toggle:not(.moonmode) .theme-icon.sun {
  display: inline-flex;
}

.theme-icon .icon {
  width  : 1.25em;
  height : 1.25em;
  stroke : var(--icon-stroke);
  display: block;
}

.theme-toggle.sunmode .theme-icon.sun {
  display: inline;
}

.theme-toggle.moonmode .theme-icon.moon {
  display: inline;
}

.theme-toggle:not(.moonmode) .theme-icon.sun {
  display: inline;
}

/* ====== Not Found Page ====== */
#notFound {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  min-height     : 80vh;
  font-size      : 2.4rem;
  font-weight    : 600;
  color          : var(--main-fg, #111);
  background     : var(--main-bg, #fff);
  border-radius  : 1.3em;
  box-shadow     : 0 0 12px 0 rgba(80, 80, 80, .04);
  margin         : 5vw;
  padding        : 2em 1.5em;
  transition     : background 0.3s, color 0.3s;
  text-align     : center;
}

[data-theme="dark"] #notFound {
  color     : var(--main-fg-dark, #fafcff);
  background: var(--main-bg-dark, #181b20);
  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.14);
}

/* ====== Chat Images ====== */
.chat-img {
  max-width    : 160px;
  max-height   : 160px;
  border-radius: 0.5em;
  margin       : 2px 0 4px 0;
}

/* ====== Misc ====== */
.msg-actions {
  float      : right;
  margin-left: 5px;
}

.msg-actions button {
  background: none;
  border    : none;
  cursor    : pointer;
  font-size : 1.2em;
}

.edited-label {
  font-size  : 0.8em;
  color      : #888;
  margin-left: 5px;
}

.user-count-badge {
  background    : var(--background);
  color         : var(--text);
  border-radius : 12px;
  padding       : 2px 7px;
  font-size     : 0.85em;
  margin-left   : 4px;
  vertical-align: top;
  font-weight   : bold;
}

.notif-toggle .notif-on {
  display: none;
}

.notif-toggle.active .notif-off {
  display: none;
}

.notif-toggle.active .notif-on {
  display: inline;
}

.notif-toggle .notif-off {
  display: inline;
}
#notifToggle.has-unread::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  z-index: 2;
}
#notifToggle { position: relative; }