<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}DiscordClone{% endblock %}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    :root {
      --dc-bg: #1e1f22;
      --dc-sidebar: #2b2d31;
      --dc-panel: #232428;
      --dc-accent: #5865f2;
      --dc-accent-hover: #4752c4;
      --dc-text: #dcddde;
      --dc-muted: #8a8c92;
      --dc-online: #23a55a;
      --dc-mod: #f0b232;
      --dc-admin: #ed4245;
      --dc-border: #3f4147;
      --dc-msg-bg: #2e3035;
      --dc-input: #383a40;
    }
    * { box-sizing: border-box; }
    body {
      background: var(--dc-bg);
      color: var(--dc-text);
      font-family: 'Segoe UI', system-ui, sans-serif;
      height: 100vh;
      overflow: hidden;
    }
    /* ── Layout ── */
    .app-layout { display: flex; height: 100vh; }
    .sidebar-channels {
      width: 240px;
      min-width: 240px;
      background: var(--dc-sidebar);
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--dc-border);
    }
    .sidebar-users {
      width: 200px;
      min-width: 200px;
      background: var(--dc-sidebar);
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--dc-border);
    }
    .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    /* ── Sidebar items ── */
    .sidebar-header {
      padding: 16px;
      font-weight: 700;
      font-size: 0.95rem;
      border-bottom: 1px solid var(--dc-border);
      letter-spacing: .5px;
    }
    .sidebar-section {
      padding: 16px 8px 4px 8px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--dc-muted);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .channel-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      margin: 1px 4px;
      border-radius: 4px;
      cursor: pointer;
      color: var(--dc-muted);
      text-decoration: none;
      font-size: 0.9rem;
      transition: background .15s, color .15s;
    }
    .channel-item:hover, .channel-item.active {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    .channel-item .bi { font-size: 1rem; }
    /* ── User bar ── */
    .user-bar {
      padding: 10px 12px;
      background: #232428;
      border-top: 1px solid var(--dc-border);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
    }
    .user-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--dc-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 700; color: #fff;
    }
    .user-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
    .role-badge {
      font-size: 0.65rem;
      padding: 1px 5px;
      border-radius: 3px;
      font-weight: 600;
    }
    .role-admin { background: var(--dc-admin); color: #fff; }
    .role-moderator { background: var(--dc-mod); color: #000; }
    .role-user { background: #4e5058; color: #fff; }
    /* ── Chat area ── */
    .chat-header {
      padding: 12px 20px;
      background: var(--dc-panel);
      border-bottom: 1px solid var(--dc-border);
      font-weight: 700;
      font-size: 1rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .messages-container {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .messages-container::-webkit-scrollbar { width: 6px; }
    .messages-container::-webkit-scrollbar-thumb { background: var(--dc-border); border-radius: 3px; }
    .message-group {
      display: flex;
      gap: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background .1s;
    }
    .message-group:hover { background: rgba(0,0,0,0.1); }
    .msg-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--dc-accent);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; color: #fff; font-size: .85rem;
    }
    .msg-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
    .msg-body { flex: 1; min-width: 0; }
    .msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
    .msg-author { font-weight: 600; font-size: .9rem; }
    .msg-time { font-size: 0.72rem; color: var(--dc-muted); }
    .msg-text { font-size: 0.9rem; word-break: break-word; line-height: 1.4; }
    .msg-file img { max-width: 300px; max-height: 200px; border-radius: 6px; margin-top: 6px; }
    .msg-file audio { margin-top: 6px; }
    .msg-file a { color: var(--dc-accent); }
    .msg-actions { margin-left: auto; display: none; gap: 4px; }
    .message-group:hover .msg-actions { display: flex; }
    /* ── Input area ── */
    .input-area {
      padding: 12px 20px 16px;
      background: var(--dc-panel);
    }
    .input-box {
      background: var(--dc-input);
      border-radius: 8px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .input-box input[type="text"] {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: var(--dc-text);
      padding: 12px 0;
      font-size: .95rem;
    }
    .input-box input[type="text"]::placeholder { color: var(--dc-muted); }
    .input-box button {
      background: none;
      border: none;
      color: var(--dc-muted);
      font-size: 1.2rem;
      cursor: pointer;
      transition: color .15s;
    }
    .input-box button:hover { color: var(--dc-accent); }
    /* ── Forms / pages ── */
    .auth-wrapper {
      min-height: 100vh;
      background: var(--dc-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
    }
    .auth-card {
      background: var(--dc-panel);
      border-radius: 8px;
      padding: 32px 36px;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 8px 40px rgba(0,0,0,.6);
    }
    .auth-card h1 { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 4px; }
    .auth-card p.sub { text-align: center; color: var(--dc-muted); font-size: .85rem; margin-bottom: 24px; }
    .form-control {
      background: var(--dc-input) !important;
      border-color: var(--dc-border) !important;
      color: var(--dc-text) !important;
    }
    .form-control:focus { border-color: var(--dc-accent) !important; box-shadow: 0 0 0 2px rgba(88,101,242,.3) !important; }
    .btn-primary {
      background: var(--dc-accent) !important;
      border-color: var(--dc-accent) !important;
    }
    .btn-primary:hover { background: var(--dc-accent-hover) !important; border-color: var(--dc-accent-hover) !important; }
    .online-dot {
      width: 10px; height: 10px;
      background: var(--dc-online);
      border-radius: 50%;
      display: inline-block;
    }
    .offline-dot {
      width: 10px; height: 10px;
      background: var(--dc-muted);
      border-radius: 50%;
      display: inline-block;
    }
    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--dc-border); border-radius: 3px; }
  </style>
</head>
<body>
{% block body %}{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>
