/* ============================================================
   CHUNK 1 — ROOT VARIABLES (EDITOR-DOMINANT, SINGLE SOURCE OF TRUTH)
   ============================================================ */

:root {
  /* Core font */
  --meebo-font: Arial, sans-serif;

  /* Layout */
  --bar-height: 36px;
  --bar-radius: 4px;
  --panel-width: 260px;

  /* Panel + chat surfaces */
  --panel-bg: #ffffff;
  --panel-text: #1a1a1a;
  --panel-border: #2d4470;
  --panel-row-bg: #e8ecf7;
  --panel-row-hover: #dfe4f2;

  --chat-bg: #ffffff;
  --chat-text: #1a1a1a;
  --chat-border: #2d4470;

  /* Accent + status */
  --accent: #6d92dd;

  --status-available: #4cc14c;
  --status-idle: #e8b84c;
  --status-dnd: #d14a4a;
  --status-invisible: #888888;

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Shadows */
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-hard: 0 2px 6px rgba(0,0,0,0.35);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-med: 180ms ease;

  /* Gradient components (Theme Editor edits these) */
  --bar-bg-top: #7aa4f0;
  --bar-bg-bottom: #4a6aa3;

  --panel-header-top: #6d92dd;
  --panel-header-bottom: #4a6aa3;

  /* Reconstructed gradients — single, authoritative definition */
  --bar-bg: linear-gradient(to bottom, var(--bar-bg-top), var(--bar-bg-bottom));
  --panel-header-bg: linear-gradient(to bottom, var(--panel-header-top), var(--panel-header-bottom));
}

/* ============================================================
   CHUNK 1 — MEEBO BAR + RIGHT DOCK
   ============================================================ */

#meebo-bar-root {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  font-family: var(--meebo-font);
  user-select: none;
  overflow: visible !important;
}

#meebo-bar {
  height: var(--bar-height);
  background: var(--bar-bg);
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 6px;
  box-shadow: var(--shadow-hard);
  position: relative;
  overflow: visible !important;
}

#meebo-bar.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

#meebo-bar-right-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-direction: row-reverse;
}

.meebo-bar-icon {
  height: 26px;
  min-width: 26px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.meebo-bar-icon:hover {
  background: rgba(255,255,255,0.22);
}

#meebo-friends-tab {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  z-index: 1000001;
}

#meebo-friends-tab:hover {
  background: rgba(255,255,255,0.25);
}

#meebo-friends-count {
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
}

#meebo-right {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  z-index: 1000000;
  overflow: visible !important;
}

/* ============================================================
   CHUNK 2 — FRIENDS PANEL SHELL
   ============================================================ */

#meebo-right-friends-panel {
 
  width: var(--panel-width);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-hard);
  display: none;
  overflow: visible;
  z-index: 9999999;
  font-size: 12px;
  color: var(--panel-text);

  position: fixed !important;
  bottom: 38px !important;
  right: 4px !important;
}

.meebo-friends-header {
  background: var(--panel-header-bg);
  color: #fff;
  padding: 6px 8px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--panel-border);
}

.meebo-friends-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}

/* ============================================================
   CHUNK 2 — STATUS + THEME DROPDOWN ROW
   ============================================================ */

.meebo-friends-status-row {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  background: var(--panel-row-bg);
  border-bottom: 1px solid var(--panel-border);
}

.meebo-status-left {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.meebo-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-available);
}

.meebo-status-available { background: var(--status-available); }
.meebo-status-idle      { background: var(--status-idle); }
.meebo-status-dnd       { background: var(--status-dnd); }
.meebo-status-invisible { background: var(--status-invisible); }

.meebo-status-label {
  font-size: 12px;
}

.meebo-status-dropdown-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  padding: 0 4px;
}

.meebo-status-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 4px 0;
  display: none;
  z-index: 10000002;
  min-width: 190px;
}

.meebo-status-dropdown.open {
  display: block;
}

.meebo-dropdown-item {
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.meebo-dropdown-item:hover {
  background: var(--panel-row-hover);
}

.meebo-dropdown-divider-thin {
  height: 1px;
  margin: 4px 0;
  background: rgba(0,0,0,0.08);
}

.meebo-dropdown-divider-thick {
  height: 6px;
}

/* ============================================================
   CHUNK 2 — STATUS ROW + SEARCH
   ============================================================ */

.meebo-friends-activity-row {
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-row-bg);
  border-bottom: 1px solid var(--panel-border);
}

.meebo-friends-activity-text {
  flex: 1;
  font-size: 12px;
  color: var(--panel-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meebo-friends-activity-edit {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.meebo-friends-search-row {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-row-bg);
  border-bottom: 1px solid var(--panel-border);
}

.meebo-friends-search-icon {
  font-size: 12px;
  opacity: 0.7;
}

#meebo-friends-search {
  flex: 1;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: 12px;
  background: #fff;
  color: var(--panel-text);
}

/* ============================================================
   CHUNK 2 — GROUPS
   ============================================================ */

#meebo-friends-groups {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
}

.meebo-friends-group {
  border-bottom: 1px solid var(--panel-border);
}

.meebo-friends-group-header {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-row-bg);
  cursor: pointer;
}

.meebo-group-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.meebo-group-name {
  font-weight: bold;
  font-size: 12px;
}

.meebo-friends-group-body {
  padding: 4px 0;
}

.meebo-group-popup {
  position: absolute;
  bottom: 100%; /* appear above the tab */
  left: 0;
  background: var(--panel-bg);
  border: 1px solid #0003;
  padding: 4px 0;
  z-index: 999999;
  min-width: 140px;
  box-shadow: 0 2px 6px #0004;
}

/* ============================================================
   CHUNK 2 — FRIEND ROWS
   ============================================================ */

.meebo-friend-row {
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background var(--transition-fast);
  pointer-events: auto;
}

.meebo-friend-row:hover {
  background: var(--panel-row-hover);
}

.meebo-friend-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meebo-friend-topline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meebo-friend-name {
  font-weight: bold;
  font-size: 12px;
}

.meebo-friend-activity {
  font-size: 11px;
  opacity: 0.8;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meebo-friend-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meebo-friend-service-icon {
  width: 14px;
  height: 14px;
  background: #ccc;
  border-radius: var(--radius-sm);
}

.meebo-friend-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
}

.meebo-friend-arrow {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

/* ============================================================
   CHUNK 3 — CHAT WINDOW CONTAINER
   ============================================================ */

#meebo-chat-container {
  position: absolute;
  bottom: 0;
  right: 286px;
  display: flex;
  align-items: flex-end;
  min-width: 260px;
  pointer-events: none;
}

/* ============================================================
   CHUNK 3 — CHAT WINDOW FRAME
   ============================================================ */

.meebo-chat-window {
  width: 260px;
  height: 320px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-hard);

  position: absolute;
  bottom: var(--bar-height);

  display: flex;
  flex-direction: column;
  overflow: visible !important;

  pointer-events: auto;
  transition: height var(--transition-med), left var(--transition-med);
  z-index: 1000001;
}

.meebo-chat-window.minimized {
  height: 40px !important;
  overflow: hidden;
  bottom: var(--bar-height) !important;
}

.meebo-chat-window.minimized .meebo-chat-extrusion {
  display: none;
}

.meebo-chat-window.minimized .meebo-group-extrusion {
  bottom: 0;
  position: absolute;
}

.meebo-chat-window.dragging {
  opacity: 0.85;
  transition: none;
}

/* ============================================================
   CHUNK 3 — CHAT HEADER
   ============================================================ */

.meebo-im-header {
  background: var(--panel-header-bg);
  color: #fff;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  border-bottom: 1px solid var(--chat-border);
}

.meebo-im-header:active {
  cursor: grabbing;
}

.meebo-im-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meebo-im-name-row {
  font-weight: bold;
  font-size: 13px;
}

.meebo-im-status-row {
  font-size: 11px;
  opacity: 0.9;
}

.meebo-im-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meebo-im-minimize,
.meebo-chat-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
}

/* ============================================================
   CHUNK 3 — ACTIVITY + SERVICE ROWS
   ============================================================ */

.meebo-im-activity-row {
  padding: 6px 8px;
  background: var(--panel-row-bg);
  border-bottom: 1px solid var(--chat-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meebo-im-activity-text {
  font-size: 11px;
  color: var(--chat-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.meebo-im-activity-avatar {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  margin-left: 6px;
}

.meebo-im-service-row {
  padding: 6px 8px;
  background: var(--panel-row-bg);
  border-bottom: 1px solid var(--chat-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.meebo-im-service-icon {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
}

.meebo-im-profile-link {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}

/* ============================================================
   CHUNK 3 — MESSAGE LIST
   ============================================================ */

.meebo-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  color: var(--chat-text);
  font-size: 12px;
}

.meebo-chat-message {
  margin-bottom: 10px;
}

.meebo-im-message-header {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 2px;
}

.meebo-im-message-sender {
  font-weight: bold;
}

.meebo-im-message-body {
  background: var(--panel-row-bg);
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  font-size: 12px;
}

/* ============================================================
   CHUNK 3 — INPUT BAR
   ============================================================ */

.meebo-chat-input {
  display: flex;
  border-top: 1px solid var(--chat-border);
  background: var(--panel-row-bg);
  padding: 6px;
  gap: 6px;
}

.meebo-chat-input input {
  flex: 1;
  border: 1px solid var(--chat-border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: 12px;
}

.meebo-chat-input button {
  background: var(--accent);
  border: 1px solid var(--chat-border);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
}

/* ============================================================
   CHUNK 3 — EXTRUSION TABS (PRESERVED EXACTLY)
   ============================================================ */

.meebo-chat-extrusion {
  position: absolute;
  top: 100%;
  right: -1px;

  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 0 8px;

  background: var(--panel-bg);
  border: 1px solid var(--chat-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);

  z-index: 2000001;
  pointer-events: auto;
}

.meebo-chat-ex-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.meebo-chat-ex-service {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
}

.meebo-chat-ex-name {
  font-size: 12px;
  font-weight: bold;
}

/* ⭐ EXACTLY AS YOU DESIGNED IT — DO NOT TOUCH ⭐ */
.meebo-group-extrusion {
  position: absolute;
  top: 100%;
  right: 0;

  height: 36px;                 /* preserved */
  display: none;
  align-items: center;
  gap: 6px;

  padding: 0 8px;

  background: var(--panel-bg);
  border: 1px solid var(--chat-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);

  white-space: nowrap;
  flex-shrink: 0;

  z-index: 2000002;
  pointer-events: auto;

  font-family: var(--meebo-font); /* preserved */
  font-size: 13px;                /* preserved */
  font-weight: bold;              /* preserved */
}

.meebo-group-count {
  min-width: 16px;
  text-align: center;
}

/* ============================================================
   CHUNK 4 — ANIMATIONS (TRANSFORM‑FREE, NO SIDE EFFECTS)
   ============================================================ */

@keyframes meebo-dock-bounce {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.dock-bounce {
  animation: meebo-dock-bounce 260ms ease-out;
}

@keyframes meebo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in {
  animation: meebo-fade-in 180ms ease-out;
}

@keyframes meebo-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.fade-out {
  animation: meebo-fade-out 180ms ease-out;
}

@keyframes meebo-slide-up {
  0%   { margin-top: 10px; opacity: 0; }
  100% { margin-top: 0;    opacity: 1; }
}

.slide-up {
  animation: meebo-slide-up 200ms ease-out;
}

@keyframes meebo-slide-down {
  0%   { margin-top: -10px; opacity: 0; }
  100% { margin-top: 0;     opacity: 1; }
}

.slide-down {
  animation: meebo-slide-down 200ms ease-out;
}

@keyframes meebo-panel-open {
  0%   { margin-top: 8px; opacity: 0; }
  100% { margin-top: 0;   opacity: 1; }
}

.meebo-panel-open {
  animation: meebo-panel-open 180ms ease-out;
}

@keyframes meebo-panel-close {
  0%   { margin-top: 0;   opacity: 1; }
  100% { margin-top: 8px; opacity: 0; }
}

.meebo-panel-close {
  animation: meebo-panel-close 160ms ease-in;
}

@keyframes meebo-minimize {
  from { height: 320px; }
  to   { height: 32px; }
}

.meebo-minimize-anim {
  animation: meebo-minimize 160ms ease-out forwards;
}

@keyframes meebo-restore {
  from { height: 32px; }
  to   { height: 320px; }
}

.meebo-restore-anim {
  animation: meebo-restore 160ms ease-out forwards;
}

/* ============================================================
   CHUNK 4 — BUTTONS + COMPONENTS
   ============================================================ */

.meebo-btn {
  background: var(--accent);
  border: 1px solid var(--panel-border);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: background var(--transition-fast);
}

.meebo-btn:hover {
  background: #7aa4f0;
}

.meebo-btn-ghost {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--panel-text);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
}

.meebo-btn-ghost:hover {
  background: var(--panel-row-hover);
}

/* ============================================================
   CHUNK 4 — SCROLLBARS
   ============================================================ */

#meebo-friends-groups::-webkit-scrollbar,
.meebo-chat-messages::-webkit-scrollbar {
  width: 8px;
}

#meebo-friends-groups::-webkit-scrollbar-thumb,
.meebo-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: var(--radius-sm);
}

#meebo-friends-groups::-webkit-scrollbar-track,
.meebo-chat-messages::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
}

/* ============================================================
   CHUNK 4 — UTILITIES (CLEAN + SAFE)
   ============================================================ */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end { display: flex; justify-content: flex-end; align-items: center; }

.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }

.p-4  { padding: 4px; }
.p-6  { padding: 6px; }
.p-8  { padding: 8px; }
.px-6 { padding-left: 6px; padding-right: 6px; }
.px-8 { padding-left: 8px; padding-right: 8px; }

.m-4  { margin: 4px; }
.m-6  { margin: 6px; }
.m-8  { margin: 8px; }

.text-sm  { font-size: 11px; }
.text-md  { font-size: 12px; }
.text-lg  { font-size: 14px; }
.text-bold { font-weight: bold; }

.text-muted { opacity: 0.7; }

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

.pointer { cursor: pointer; }
.no-pointer { pointer-events: none; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-hard { box-shadow: var(--shadow-hard); }

.border { border: 1px solid var(--panel-border); }
.border-top { border-top: 1px solid var(--panel-border); }
.border-bottom { border-bottom: 1px solid var(--panel-border); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

.w-full { width: 100%; }
.w-auto { width: auto; }

.h-full { height: 100%; }
.h-auto { height: auto; }

.absolute { position: absolute; }
.relative { position: relative; }
.fixed { position: fixed; }

.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }

.z-max  { z-index: 999999; }
.z-high { z-index: 9999; }
.z-mid  { z-index: 100; }
.z-low  { z-index: 1; }

/* ============================================================
   CHUNK 5 — FRIENDS PANEL EXTRUSION + OPEN STATES
   ============================================================ */

#meebo-right-friends-panel {
  overflow: visible;
}

#meebo-right-friends-panel::after {
  content: attr(data-friends-label);
  position: absolute;
  bottom: -34px;
  right: 68px;

  height: 32px;
  line-height: 39px;

  background: var(--panel-bg);
  color: var(--panel-text);
  border: 1px solid var(--panel-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);

  font-size: 12px;
  font-weight: bold;

  display: flex;
  align-items: flex-start;
  padding-left: 11px;
  width: 131px;

  pointer-events: none;
  z-index: 10000000;
}

#meebo-friends-tab.meebo-open {
  background: rgba(255,255,255,0.25);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#meebo-right-friends-panel.meebo-open {
  border-bottom: none;
}

#meebo-right-friends-panel.meebo-open .meebo-friends-header::before {
  content: "👤";
  margin-right: 6px;
  font-size: 14px;
}

/* ============================================================
   CHUNK 5 — THEME BLOCKS (COMPONENT VARIABLES ONLY)
   ============================================================ */
/* Gradients are defined in Chunk 1 — these only set component colors */

.meebo-2010 {
  --bar-bg-top: #7aa4f0;
  --bar-bg-bottom: #4a6aa3;
  --panel-header-top: #6d92dd;
  --panel-header-bottom: #4a6aa3;

  --panel-bg: #ffffff;
  --panel-text: #1a1a1a;
  --panel-border: #2d4470;
  --panel-row-bg: #e8ecf7;
  --panel-row-hover: #dfe4f2;

  --chat-bg: #ffffff;
  --chat-text: #1a1a1a;
  --chat-border: #2d4470;

  --accent: #6d92dd;
}

.meebo-2010-dark {
  --bar-bg-top: #1f2a3a;
  --bar-bg-bottom: #141b26;
  --panel-header-top: #2c3e55;
  --panel-header-bottom: #1a2433;

  --panel-bg: #1b2433;
  --panel-text: #e6e6e6;
  --panel-border: #0d121a;
  --panel-row-bg: #222c3d;
  --panel-row-hover: #2a3548;

  --chat-bg: #1b2433;
  --chat-text: #e6e6e6;
  --chat-border: #0d121a;

  --accent: #6d92dd;
}

.meebo-modern-2010 {
  --bar-bg-top: #fdfdfd;
  --bar-bg-bottom: #e6e6e6;
  --panel-header-top: #e6e6e6;
  --panel-header-bottom: #cfcfcf;

  --panel-bg: #ffffff;
  --panel-text: #1a1a1a;
  --panel-border: #b8b8b8;
  --panel-row-bg: #f3f3f3;
  --panel-row-hover: #e9e9e9;

  --chat-bg: #ffffff;
  --chat-text: #1a1a1a;
  --chat-border: #b8b8b8;

  --accent: #4a6aa3;
}

.meebo-modern-2010-dark {
  --bar-bg-top: #2e2e2e;
  --bar-bg-bottom: #1f1f1f;
  --panel-header-top: #3a3a3a;
  --panel-header-bottom: #2a2a2a;

  --panel-bg: #262626;
  --panel-text: #e0e0e0;
  --panel-border: #0f0f0f;
  --panel-row-bg: #2f2f2f;
  --panel-row-hover: #3a3a3a;

  --chat-bg: #262626;
  --chat-text: #e0e0e0;
  --chat-border: #0f0f0f;

  --accent: #7aa4f0;
}

.meebo-2011 {
  --bar-bg-top: #8aa8ff;
  --bar-bg-bottom: #5a78d0;
  --panel-header-top: #7d96e8;
  --panel-header-bottom: #5a78d0;

  --panel-bg: #ffffff;
  --panel-text: #1a1a1a;
  --panel-border: #3a4a80;
  --panel-row-bg: #eef0fb;
  --panel-row-hover: #e3e6f7;

  --chat-bg: #ffffff;
  --chat-text: #1a1a1a;
  --chat-border: #3a4a80;

  --accent: #7d96e8;
}

.meebo-2011-dark {
  --bar-bg-top: #2f3b52;
  --bar-bg-bottom: #1e2738;
  --panel-header-top: #2f3b52;
  --panel-header-bottom: #1e2738;

  --panel-bg: #1e2738;
  --panel-text: #e6e6e6;
  --panel-border: #0f1622;
  --panel-row-bg: #263044;
  --panel-row-hover: #2c3850;

  --chat-bg: #1e2738;
  --chat-text: #e6e6e6;
  --chat-border: #0f1622;

  --accent: #6d92dd;
}

.meebo-2012 {
  --bar-bg-top: #f7f7f7;
  --bar-bg-bottom: #e2e2e2;
  --panel-header-top: #dcdcdc;
  --panel-header-bottom: #c8c8c8;

  --panel-bg: #ffffff;
  --panel-text: #1a1a1a;
  --panel-border: #b8b8b8;
  --panel-row-bg: #f3f3f3;
  --panel-row-hover: #e9e9e9;

  --chat-bg: #ffffff;
  --chat-text: #1a1a1a;
  --chat-border: #b8b8b8;

  --accent: #4a6aa3;
}

.meebo-2012-dark {
  --bar-bg-top: #3a3a3a;
  --bar-bg-bottom: #2a2a2a;
  --panel-header-top: #444444;
  --panel-header-bottom: #333333;

  --panel-bg: #2a2a2a;
  --panel-text: #e6e6e6;
  --panel-border: #1a1a1a;
  --panel-row-bg: #333333;
  --panel-row-hover: #3d3d3d;

  --chat-bg: #2a2a2a;
  --chat-text: #e6e6e6;
  --chat-border: #1a1a1a;

  --accent: #6d92dd;
}

/* ============================================================
   CHUNK 6 — THEME EDITOR PANEL (FINAL, STABLE)
   ============================================================ */

.meebo-theme-editor {
  position: fixed;
  right: 8px;
  bottom: 48px;
  width: 320px;
  max-height: 360px;

  background: var(--panel-bg);
  color: var(--panel-text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard);
  font-size: 12px;
  z-index: 10000001; /* ABOVE chat windows — your choice A */

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   CHUNK 6 — EDITOR HEADER
   ============================================================ */

.meebo-theme-editor-header {
  background: var(--panel-header-bg);
  color: #fff;
  padding: 6px 8px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

#meebo-theme-editor-close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

/* ============================================================
   CHUNK 6 — EDITOR BODY
   ============================================================ */

.meebo-theme-editor-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.meebo-theme-editor-body label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

/* Inputs */
.meebo-theme-editor-body input[type="text"],
.meebo-theme-editor-body select {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 3px 4px;
  font-size: 11px;
  background: #fff;
  color: var(--panel-text);
}

.meebo-theme-editor-body input[type="color"] {
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  height: 22px;
}

/* ============================================================
   CHUNK 6 — SAVED THEMES LIST
   ============================================================ */

.meebo-theme-saved-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meebo-theme-saved-title {
  font-weight: bold;
  font-size: 11px;
}

#meebo-theme-saved {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 3px 4px;
  font-size: 11px;
  background: #fff;
  color: var(--panel-text);
}

/* ============================================================
   CHUNK 6 — FLAT MODE TOGGLE
   ============================================================ */

.meebo-theme-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-top: 4px;
}

.meebo-toggle {
  width: 42px;
  height: 20px;
  border-radius: 20px;
  background: #bbb;
  border: 1px solid var(--panel-border);
  position: relative;
  cursor: pointer;
  transition: background 120ms ease;
}

.meebo-toggle.on {
  background: var(--accent);
}

.meebo-toggle-knob {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: left 120ms ease;
}

.meebo-toggle.on .meebo-toggle-knob {
  left: 21px;
}

/* ============================================================
   CHUNK 7 — GLOBAL SAFETY + RESET HELPERS
   ============================================================ */

/* Prevent accidental text selection on draggable UI */
.meebo-no-select,
.meebo-im-header,
.meebo-chat-extrusion,
.meebo-group-extrusion {
  user-select: none;
}

/* Hidden state used by JS */
.hidden {
  display: none !important;
}

/* Prevent pointer-events bleed-through */
.meebo-pointer-none {
  pointer-events: none !important;
}

.meebo-pointer-auto {
  pointer-events: auto !important;
}

/* Smooth transitions for inline variable updates */
:root,
#meebo-bar-root,
#meebo-chat-container {
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Prevent scrollbars from shifting layout */
.meebo-scroll-stable {
  overflow-y: scroll;
}

/* Utility for absolute fill */
.meebo-abs-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Old availability/theme rows (kept hidden) */
#meebo-popup-availability,
#meebo-theme-select {
  display: none;
}

.meebo-availability-row.open #meebo-popup-availability,
.meebo-theme-row.open #meebo-theme-select {
  display: block;
}

.meebo-availability-row .arrow,
.meebo-theme-row .arrow {
  cursor: pointer;
}

/* ============================================================
   CHUNK 7 — FINAL POLISH
   ============================================================ */

/* Crisp text rendering */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent layout jitter when gradients update */
.meebo-im-header,
.meebo-friends-header {
  will-change: background;
}

/* Ensure minimized windows never overlap the bar */
.meebo-chat-window.minimized {
  bottom: var(--bar-height) !important;
}

/* Ensure extrusion tabs always sit above minimized windows */
.meebo-chat-extrusion,
.meebo-group-extrusion {
  will-change: transform, opacity;
}

/* Prevent accidental overflow clipping */
.meebo-chat-window,
#meebo-right-friends-panel {
  overflow: visible;
}

/* Make sure theme editor never gets clipped */
.meebo-theme-editor {
  overflow: hidden;
}

/* Final safety: no component may override gradients */
*[style*="--bar-bg"],
*[style*="--panel-header-bg"] {
  background-size: cover;
}

.meebo-chat-window.minimized {
  height: 40px !important;
  bottom: var(--bar-height) !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* =====================================================
   COLLAPSE / EXPAND BEHAVIOR
   ===================================================== */

/* Root bar (default) */
#meebo-bar-root {
  max-height: 36px;
  overflow: hidden;
  transition:
    max-height 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* Visible bar collapse */
#meebo-bar.meebo-collapsing {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

#meebo-bar.meebo-collapsed {
  display: none;
}

/* Root collapse */
#meebo-bar-root.meebo-collapsing {
  max-height: 0;
  pointer-events: none;
}

#meebo-bar-root.meebo-collapsed {
  display: none;
}

/* Nub is fully independent */
#meebo-collapse-nub {
  position: fixed;
  bottom: 0;
  right: 0;
  background: #444;
  color: #fff;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 6px 6px 0 0;
  z-index: 999999;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.2s ease;
}

#meebo-collapse-nub.meebo-nub-visible {
  opacity: 0.5;
  pointer-events: auto;
}

#meebo-collapse-nub::before {
  content: "";
  position: absolute;
  inset: 10px -40px 0 0px;
  background: #FF000080;
  pointer-events: none; /* default: no hitbox */
}

#meebo-collapse-nub.meebo-nub-visible::before {
  pointer-events: auto; /* only active when visible */