* { box-sizing: border-box; }

    body { overflow: hidden; }

    /* ── Overall layout ── */
    .messages-page {
      display: flex;
      height: calc(100vh - 64px);
      background: var(--bg, #0d0d1a);
      border-top: 1px solid var(--border, #2a2a3e);
    }

    /* ── Sidebar ── */
    .msg-sidebar {
      width: 360px; flex-shrink: 0;
      display: flex; flex-direction: column;
      background: var(--bg-card, #12121e);
      border-right: 1px solid var(--border, #2a2a3e);
    }
    .msg-sidebar-header {
      padding: 20px 20px 12px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border, #2a2a3e);
    }
    .msg-sidebar-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: 20px; font-weight: 700; color: #fff;
    }
    .msg-new-btn {
      background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.25);
      color: var(--accent, #00e5ff); padding: 6px 14px; border-radius: 8px;
      font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
      transition: background 0.15s;
    }
    .msg-new-btn:hover { background: rgba(0,229,255,0.2); }
    .msg-search { padding: 12px 16px; }
    .msg-search input {
      width: 100%; background: rgba(255,255,255,0.05);
      border: 1px solid var(--border, #2a2a3e); border-radius: 10px;
      color: var(--text, #e8e8f0); padding: 9px 14px;
      font-size: 13px; font-family: inherit; outline: none;
    }
    .msg-search input:focus { border-color: var(--accent, #00e5ff); }
    .msg-conv-list { flex: 1; overflow-y: auto; }
    .msg-conv-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px; cursor: pointer; transition: background 0.15s;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .msg-conv-item:hover  { background: rgba(255,255,255,0.04); }
    .msg-conv-item.active { background: rgba(0,229,255,0.07); }
    .msg-conv-avatar {
      width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #7b2fbe, #4a1090);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 18px; color: #fff; overflow: hidden;
    }
    .msg-conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .msg-conv-info { flex: 1; min-width: 0; }
    .msg-conv-name {
      font-size: 14px; font-weight: 600; color: #fff;
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 3px;
    }
    .msg-conv-time { font-size: 11px; color: var(--text-muted, #666); font-weight: 400; }
    .msg-conv-preview {
      font-size: 13px; color: var(--text-muted, #666);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .msg-conv-unread {
      background: var(--accent, #00e5ff); color: #000;
      border-radius: 99px; padding: 2px 8px;
      font-size: 11px; font-weight: 700; flex-shrink: 0;
    }
    .msg-empty-convs {
      padding: 40px 20px; text-align: center;
      color: var(--text-muted, #666); font-size: 14px; line-height: 1.6;
    }

    /* ── Chat area ── */
    .msg-chat {
      flex: 1; display: flex; flex-direction: column;
      background: var(--bg, #0d0d1a);
      overflow: hidden;
    }
    .msg-chat-header {
      padding: 14px 20px; border-bottom: 1px solid var(--border, #2a2a3e);
      display: flex; align-items: center; gap: 12px;
      background: var(--bg-card, #12121e);
      flex-shrink: 0;
    }
    .msg-chat-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(135deg, #7b2fbe, #4a1090);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 15px; color: #fff; overflow: hidden;
      flex-shrink: 0;
    }
    .msg-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .msg-chat-name { font-weight: 700; color: #fff; font-size: 15px; }
    .msg-chat-profile {
      margin-left: auto; color: var(--text-muted, #666); font-size: 13px;
      text-decoration: none; transition: color 0.15s;
    }
    .msg-chat-profile:hover { color: var(--accent, #00e5ff); }

    /* ── Messages ── */
    .msg-messages {
      flex: 1; overflow-y: auto; padding: 20px 16px;
      display: flex; flex-direction: column; gap: 6px;
    }

    /* Date divider */
    .msg-date-divider {
      text-align: center; color: var(--text-muted, #555); font-size: 11px;
      margin: 10px 0; position: relative;
    }
    .msg-date-divider::before, .msg-date-divider::after {
      content: ""; position: absolute; top: 50%;
      width: 30%; height: 1px; background: var(--border, #2a2a3e);
    }
    .msg-date-divider::before { left: 0; }
    .msg-date-divider::after  { right: 0; }

    /* Bubbles — Instagram style */
    .msg-bubble-wrap {
      display: flex; align-items: flex-end; gap: 8px;
      max-width: 75%;
    }
    .msg-bubble-wrap:has(.gif-bubble) {
      max-width: 320px;
    }
    .msg-bubble-wrap.own {
      align-self: flex-end; flex-direction: row-reverse;
    }
    .msg-bubble-wrap:not(.own) { align-self: flex-start; }

    .msg-bubble-avatar {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #7b2fbe, #4a1090);
      overflow: hidden; display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: #fff;
    }
    .msg-bubble-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .msg-bubble-avatar.hidden { visibility: hidden; }

    .msg-bubble {
      padding: 10px 14px; border-radius: 22px;
      font-size: 14px; line-height: 1.5; word-break: break-word;
      max-width: 100%;
    }
    .msg-bubble-wrap:not(.own) .msg-bubble {
      background: rgba(255,255,255,0.1);
      color: #e8e8f0;
      border-bottom-left-radius: 6px;
    }
    .msg-bubble-wrap.own .msg-bubble {
      background: var(--accent, #00e5ff);
      color: #000; font-weight: 500;
      border-bottom-right-radius: 6px;
    }
    .msg-bubble-time {
      font-size: 10px; color: var(--text-muted, #555);
      margin-top: 3px; padding: 0 4px;
    }
    .msg-bubble-wrap.own .msg-bubble-time { text-align: right; }

    /* ── Input ── */
    .msg-input-area {
      padding: 12px 16px; border-top: 1px solid var(--border, #2a2a3e);
      display: flex; gap: 10px; align-items: center;
      background: var(--bg-card, #12121e);
      flex-shrink: 0;
    }
    .msg-input {
      flex: 1; background: rgba(255,255,255,0.06);
      border: 1px solid var(--border, #2a2a3e); border-radius: 24px;
      color: var(--text, #e8e8f0); padding: 10px 18px;
      font-size: 14px; font-family: inherit; outline: none;
      resize: none; max-height: 120px; min-height: 44px; line-height: 1.4;
    }
    .msg-input:focus { border-color: var(--accent, #00e5ff); }
    .msg-send-btn {
      background: var(--accent, #00e5ff); color: #000; border: none;
      width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0; transition: transform 0.1s;
    }
    .msg-send-btn:hover  { transform: scale(1.08); }
    .msg-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

    /* ── No conversation selected ── */
    .msg-no-conv {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      color: var(--text-muted, #555); gap: 12px;
    }
    .msg-no-conv-icon { font-size: 52px; opacity: 0.3; }

    /* ── New conversation modal ── */
    .msg-new-modal {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center;
    }
    .msg-new-modal.open { display: flex; }
    .msg-new-box {
      background: var(--bg-card, #12121e); border: 1px solid var(--border, #2a2a3e);
      border-radius: 16px; padding: 24px; width: 360px;
    }
    .msg-new-box h3 { color: #fff; margin: 0 0 16px; font-family: 'Rajdhani', sans-serif; font-size: 18px; }
    .msg-new-search {
      width: 100%; background: var(--bg, #0d0d1a);
      border: 1px solid var(--border, #2a2a3e); border-radius: 10px;
      color: var(--text, #e8e8f0); padding: 10px 14px;
      font-size: 14px; font-family: inherit; outline: none; margin-bottom: 12px;
    }
    .msg-new-search:focus { border-color: var(--accent, #00e5ff); }
    .msg-user-results { max-height: 240px; overflow-y: auto; }
    .msg-user-result {
      display: flex; align-items: center; gap: 10px;
      padding: 10px; border-radius: 10px; cursor: pointer; transition: background 0.15s;
    }
    .msg-user-result:hover { background: rgba(255,255,255,0.05); }
    .msg-new-cancel {
      margin-top: 12px; width: 100%; background: none;
      border: 1px solid var(--border, #2a2a3e); color: var(--text-muted, #666);
      padding: 9px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit;
    }

    /* ── Empty cta btn ── */
    .empty-cta-btn {
      margin-top: 12px; background: rgba(0,229,255,0.1);
      color: var(--accent, #00e5ff); border: 1px solid rgba(0,229,255,0.3);
      padding: 8px 20px; border-radius: 99px; font-size: 13px;
      text-decoration: none; transition: background 0.15s; cursor: pointer;
    }
    .empty-cta-btn:hover { background: rgba(0,229,255,0.2); }

/* ── Media buttons ── */
.msg-media-btns {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.gif-bubble {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  max-width: 300px !important;
  width: 300px !important;
  display: block !important;
}
.gif-bubble img {
  max-width: 300px !important;
  width: 300px !important;
  border-radius: 12px !important;
  display: block !important;
}