/* Global blue highlight/theme overrides */

/* Selection */
::selection { background:#2267a8; color:#fff; }

/* ===== Global overlay z-index fixes (always above mobile sidebars) ===== */
#ay-userlist-modal { z-index: 13000 !important; position: fixed !important; }
#ccAliasModal { z-index: 13000 !important; position: fixed !important; }
.modal-overlay { z-index: 13000 !important; position: fixed !important; }

/* When any modal is open, push sidebars and toggles below and disable interactions */
body.modal-open #ay-left-col,
body.modal-open #ay-right-col { z-index: 1000 !important; pointer-events: none !important; }
body.modal-open .ay-toggle { z-index: 0 !important; pointer-events: none !important; opacity: 0.3; }
@media (max-width: 768px) {
  body.modal-open #ay-left-col { transform: translateX(-100%) !important; }
  body.modal-open #ay-right-col { transform: translateX(100%) !important; }
}
::-moz-selection { background:#2267a8; color:#fff; }

/* Replace gray hover highlights with subtle blue */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-gray-300:hover { background-color: rgba(34,103,168,.18) !important; }

/* Focus rings */
input:focus, textarea:focus, select:focus, button:focus, a:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,103,168,.35) !important;
  border-color: #2267a8 !important;
}

/* Link hover color */
a { color: inherit; }
a:hover { color: #2267a8; }

/* Trending cards */
.trend-item { transition: background-color 150ms ease, border-color 150ms ease; border: 1px solid transparent; }
.trend-item:hover { background-color: rgba(34, 103, 168, 0.25); border-color: #2267a8; }
.trend-item .font-medium { color: #2267a8 !important; }
.trend-item .font-medium:hover { color: #1d4ed8 !important; }

/* Tailwind blue utility overrides to DA blue */
.text-blue-600 { color: #2267a8 !important; }
.hover\:text-blue-600:hover { color: #2267a8 !important; }
.text-blue-700 { color: #1f5c96 !important; }
.bg-blue-600 { background-color: #2267a8 !important; }
.hover\:bg-blue-600:hover { background-color: #2267a8 !important; }
.bg-blue-700 { background-color: #1f5c96 !important; }
.hover\:bg-blue-700:hover { background-color: #1f5c96 !important; }
.ring-blue-500 { --tw-ring-color: #2267a8 !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: #2267a8 !important; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, #2267a8) !important; }
.border-blue-500 { border-color: #2267a8 !important; }

/* DA brand semantic colors */
/* Error (Red) */
.text-red-700 { color: #a42244 !important; }
.border-red-400 { border-color: #a42244 !important; }
.bg-red-100 { background-color: rgba(164,34,68,0.12) !important; }
.bg-red-600 { background-color: #a42244 !important; }
.hover\:bg-red-600:hover { background-color: #a42244 !important; }
.bg-red-700 { background-color: #8e1d3a !important; }
.hover\:bg-red-700:hover { background-color: #8e1d3a !important; }
.ring-red-500 { --tw-ring-color: #a42244 !important; }

/* Warning (Yellow) */
.text-yellow-700 { color: #b38f02 !important; }
.border-yellow-400 { border-color: #f5bf03 !important; }
.bg-yellow-50 { background-color: rgba(245,191,3,0.10) !important; }
.bg-yellow-100 { background-color: rgba(245,191,3,0.16) !important; }
.bg-yellow-500 { background-color: #f5bf03 !important; }
.hover\:bg-yellow-500:hover { background-color: #e0ae03 !important; }
.ring-yellow-500 { --tw-ring-color: #f5bf03 !important; }

/* Success (Green) */
.text-green-700 { color: #2e874f !important; }
.border-green-400 { border-color: #2e874f !important; }
.bg-green-100 { background-color: rgba(46,135,79,0.12) !important; }
.bg-green-600 { background-color: #2e874f !important; }
.hover\:bg-green-600:hover { background-color: #2a7a47 !important; }
.bg-green-700 { background-color: #256a3f !important; }
.hover\:bg-green-700:hover { background-color: #205c36 !important; }
.ring-green-500 { --tw-ring-color: #2e874f !important; }

/* Simple badge utilities */
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:9999px; font-size:12px; font-weight:600; line-height:1; }
.badge-success { background-color: rgba(46,135,79,0.15); color:#2e874f; border:1px solid rgba(46,135,79,0.35); }
.badge-warning { background-color: rgba(245,191,3,0.18); color:#f5bf03; border:1px solid rgba(245,191,3,0.45); }
.badge-error   { background-color: rgba(164,34,68,0.15); color:#a42244; border:1px solid rgba(164,34,68,0.40); }
.badge-verified{ background-color: rgba(34,103,168,0.15); color:#2267a8; border:1px solid rgba(34,103,168,0.35); }

/* Standardized alert utilities */
.alert { padding: 12px 14px; border-radius: 8px; border-width: 1px; display: flex; gap: 10px; align-items: flex-start; }
.alert i { margin-top: 2px; }
.alert-error   { background-color: rgba(164,34,68,0.12); border-color: #a42244; color: #f2d7dd; }
.alert-success { background-color: rgba(46,135,79,0.12); border-color: #2e874f; color: #d7efe1; }
.alert-warning { background-color: rgba(245,191,3,0.12); border-color: #f5bf03; color: #f8e9b0; }

/* Chat rooms list: make hover/active blue, not white */
.room-item { transition: background-color 150ms ease, border-color 150ms ease; }
.room-item:hover { background-color: rgba(34,103,168,0.18) !important; }
.room-item.active { background-color: rgba(34,103,168,0.25) !important; border-color: #2267a8 !important; }

/* Invite Post Card (dark yellow theme) */
.invite-card {
  background: linear-gradient(180deg, rgba(202,138,4,0.18), rgba(202,138,4,0.12)); /* amber-600 tint */
  color: #fef3c7; /* amber-100 */
}
.invite-card .font-semibold { color: #fde68a; } /* amber-200 */
.invite-card button { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }

/* --- Mobile Responsiveness & Overflow Fixes --- */
/* Ensure no horizontal scrolling and responsive media across the site */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
*, *::before, *::after { box-sizing: border-box; }

/* Ensure navigation is flush with top of page */
nav.sticky {
  margin-top: 0 !important;
  top: 0 !important;
}

/* Remove all spacing above navigation */
body > nav:first-of-type,
nav:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure body starts at top */
body {
  padding-top: 0 !important;
}
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Ensure media controls are always clickable (avoid accidental overlays) */
.post-media { position: relative; z-index: 1; overflow: hidden; }
.post-media video, .post-media audio { position: relative; z-index: 2; pointer-events: auto; display:block; }

/* Keep post action buttons above any media */
[data-actions="1"] { position: relative; z-index: 5; }

/* In case any overlay inside post uses absolute positioning, don't block media */
.post-media * { pointer-events: auto; }

/* Phones/Tablets only: allow main wrappers to use full viewport width and hide horizontal overflow */
@media (max-width: 1024px) {
  .max-w-7xl, .container { max-width: 100vw !important; }
  html, body { overflow-x: hidden !important; }
}
/* Desktop/Laptop: explicitly restore Tailwind defaults and allow natural overflow */
@media (min-width: 1025px) {
  /* Tailwind's max-w-7xl is 80rem by default */
  .max-w-7xl { max-width: 80rem !important; }
  .container { max-width: 100% !important; }
  html, body { overflow-x: visible !important; }
}

/* Avoid mobile issues with fixed background attachments */
@media (max-width: 640px) {
  body.home-bg { background-attachment: scroll !important; }
}

/* --- Top navigation dropdown restore: prevent clipping/scroll box --- */
/* Make sure the profile dropdown in the navbar is allowed to overflow */
nav .relative { overflow: visible !important; }
/* The dropdown panel itself should not introduce its own scroll bar */
#dropdown {
  position: fixed !important; /* float as popup, do not change page height */
  right: 0 !important;
  top: auto !important; /* JS will set exact top */
  z-index: 9999 !important;
  max-height: none !important;
  overflow: visible !important; /* no inner scrollbar */
  display: block !important; /* visible when not .hidden */
}

/* Respect Tailwind's .hidden utility explicitly */
#dropdown.hidden { display: none !important; }

/* Remove any scrollbar rendering inside dropdown across browsers */
#dropdown { scrollbar-width: none; }
#dropdown::-webkit-scrollbar { width: 0; height: 0; }

/* When dropdown is open, prevent the page from showing a vertical scrollbar */
body.no-scroll, html.no-scroll {
  overflow: hidden !important;
}
/* Also hide scrollbar chrome while locked */
body.no-scroll, html.no-scroll { scrollbar-width: none !important; }
body.no-scroll::-webkit-scrollbar, html.no-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* ===== Scale up UI by 20% on tablets/desktops only (keep phones unchanged) ===== */
@media (min-width: 640px) {
  html { font-size: 120%; }
}

/* ===== Mobile sidebars overlay (default closed) ===== */
/* Easy to change: breakpoint currently 768px */
@media (max-width: 768px) {
  /* Make center take the visual focus; sidebars are overlays */
  #ay-center-col { grid-column: 1 / -1; }

  /* Left and right columns become fixed overlays that slide in */
  #ay-left-col, #ay-right-col {
    position: fixed !important;
    top: 0; bottom: 0;
    width: 85vw; max-width: 360px;
    overflow-y: auto;
    background: rgba(22,27,34,0.98); /* dark */
    border-right: 1px solid #2d333b;
    z-index: 9000;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    padding: 16px 12px;
  }
  /* Right starts off-screen to the right */
  #ay-right-col {
    right: 0; left: auto;
    border-left: 1px solid #2d333b; border-right: none;
    transform: translateX(100%);
  }
  /* Left anchored to left edge */
  #ay-left-col { left: 0; right: auto; }

  /* When open, slide into view */
  body.open-left #ay-left-col { transform: translateX(0); }
  body.open-right #ay-right-col { transform: translateX(0); }

  /* Toggle arrow buttons */
  .ay-toggle {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 9999px;
    background: rgba(31,41,55,0.65); /* semi-transparent */
    color: #e5e7eb; /* gray-200 */
    border: 1px solid rgba(55,65,81,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 9500; /* above page, below call modal */
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  }
  .ay-toggle-left { left: 8px; }
  .ay-toggle-right { right: 8px; }

  /* Show toggles only on phones */
  #ay-left-toggle, #ay-right-toggle { display: flex !important; }
}

/* Who to follow: truncate long names/handles to avoid button overlap */
#ay-suggested .user-info { min-width: 0; }
#ay-suggested .user-name,
#ay-suggested .user-handle {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ay-suggested .follow-btn { flex-shrink: 0; }

/* ===== Chat (Private Room) responsive layout ===== */
@media (max-width: 768px) {
  /* Stack the shell vertically and avoid fixed height clipping */
  #chatShell { flex-direction: column !important; height: auto !important; min-height: calc(100vh - 140px) !important; }
  /* Rooms list full width on top */
  #roomsCol { width: 100% !important; border-right: none !important; border-bottom: 1px solid #2d333b !important; max-height: 40vh; }
  #roomsCol #roomsList, #roomsCol #invitesList { max-height: 30vh; }
  /* Conversation fills the rest */
  #convCol { width: 100% !important; min-height: 50vh; }
  /* Messages area should scroll independently */
  #messagesContainer { max-height: none; overflow-y: auto; }
  
  /* Composer: ensure input and buttons fit on one row without overlap */
  #composer form { display: flex; align-items: center; gap: 8px; }
  #composer input[type="text"],
  #composer #messageInput { flex: 1 1 auto; min-width: 0; }
  #composer label[for="attachmentInput"],
  #composer button[type="submit"] { flex: 0 0 auto; }
  /* Make submit/attach controls slightly smaller on phones */
  #composer label[for="attachmentInput"] { width: 40px; height: 40px; }
  #composer button[type="submit"] { padding: 8px 14px; border-radius: 9999px; }

  /* Right member panel: slide-in overlay from right */
  #sidePanel {
    display: block !important;
    position: fixed !important;
    top: 64px; /* below nav */
    right: 0; bottom: 0;
    width: 85vw; max-width: 360px;
    background: rgba(22,27,34,0.98);
    border-left: 1px solid #2d333b !important;
    z-index: 9600;
    transform: translateX(100%);
    transition: transform 220ms ease;
  }
  body.chat-side-open #sidePanel { transform: translateX(0); }

  /* Floating toggle button */
  #chat-side-toggle {
    position: fixed; right: 10px; top: calc(64px + 10px);
    width: 42px; height: 42px; border-radius: 9999px;
    background: rgba(31,41,55,0.7);
    color: #e5e7eb; border: 1px solid rgba(55,65,81,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 9650; box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  }
}