﻿/* â”€â”€â”€ Inputs â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--surface1);
  border: 1px solid var(--surface2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.18);
}

/* â”€â”€â”€ Buttons â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.btn-primary {
  padding: 0.6rem 1.2rem;
  background: var(--primary);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
  padding: 0.6rem 1.2rem;
  background: var(--surface1);
  border: none;
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--surface2); }

.danger-btn {
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.danger-btn:hover { background: var(--red); color: #fff; }

.icon-btn {
  background: transparent;
  border: none;
  color: var(--subtext0);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.icon-btn:hover { color: var(--text); background: var(--surface1); }

.error-msg {
  color: var(--red);
  font-size: 0.8rem;
  min-height: 1rem;
}

/* ─── Admin / system notice toast ───────────────────────────────────────── */
.admin-notice {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  max-width: min(560px, 90vw);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  animation: pop-in 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.admin-notice.hidden { display: none; }
.admin-notice[data-severity="info"]     { background: var(--surface1); color: var(--text); border: 1px solid var(--primary); }
.admin-notice[data-severity="warning"]  { background: #3b2e00; color: #ffd166; border: 1px solid #faa61a; }
.admin-notice[data-severity="critical"] { background: #3b0a0a; color: #ff9494; border: 1px solid var(--red); }

#admin-notice-message { flex: 1; }
.admin-notice-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 2px;
  flex-shrink: 0;
}
.admin-notice-close:hover { opacity: 1; }

/* â”€â”€â”€ Chat layout â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#chat-screen {
  display: flex;
}

/* Left panel: wraps server sidebar + channel sidebar + user banner */
#left-panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
}

#left-sidebars {
  display: flex;
  flex: 1;
  overflow: hidden;
}

