/**
 * Manic Pixels Web OS — Notification Tray CSS
 * Botão de sino + painel deslizante de notificações.
 */

/* ── Botão da tray ───────────────────────────────────────────────────────── */

#mp-notif-tray-btn {
  position:   relative;
  width:      28px;
  height:     28px;
  display:    flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor:     pointer;
  color:      rgba(255,255,255,0.70);
  background: transparent;
  border:     none;
  padding:    0;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

#mp-notif-tray-btn:hover {
  background: var(--mp-taskbar-highlight);
  color:      var(--mp-taskbar-fg);
}

#mp-notif-tray-btn.active {
  background: rgba(var(--mp-accent-rgb), 0.18);
  color:      var(--mp-accent);
}

#mp-notif-tray-btn svg {
  width:  15px;
  height: 15px;
  pointer-events: none;
}

/* ── Badge de contagem ───────────────────────────────────────────────────── */

.mp-notif-badge {
  position:     absolute;
  top:          3px;
  right:        3px;
  min-width:    14px;
  height:       14px;
  padding:      0 3px;
  border-radius: 7px;
  background:   #e74c3c;
  color:        #fff;
  font-size:    9px;
  font-weight:  700;
  line-height:  14px;
  text-align:   center;
  font-family:  var(--mp-font-ui, system-ui, sans-serif);
  pointer-events: none;
  border:       1px solid rgba(0,0,0,0.25);
}

/* ── Painel deslizante ───────────────────────────────────────────────────── */

.mp-notif-panel {
  position:     fixed;
  z-index:      9700;
  width:        320px;
  max-height:   480px;
  display:      flex;
  flex-direction: column;

  background:   var(--mp-menu-bg, rgba(27,30,46,0.96));
  border:       1px solid var(--mp-menu-border, rgba(255,255,255,0.10));
  border-radius: var(--mp-menu-radius, 10px);
  box-shadow:   var(--mp-menu-shadow, 0 8px 32px rgba(0,0,0,0.50));
  backdrop-filter: blur(var(--mp-menu-blur, 20px));
  -webkit-backdrop-filter: blur(var(--mp-menu-blur, 20px));
  overflow:     hidden;

  opacity:      0;
  transform:    translateY(6px) scale(0.97);
  transform-origin: top right;
  transition:   opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.mp-notif-panel--visible {
  opacity:      1;
  transform:    translateY(0) scale(1);
  pointer-events: all;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.mp-notif-panel-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.mp-notif-panel-title {
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   12px;
  font-weight: 600;
  color:       rgba(255,255,255,0.80);
  letter-spacing: 0.01em;
}

.mp-notif-panel-actions {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.mp-notif-clear-btn {
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   11px;
  color:       rgba(255,255,255,0.40);
  background:  transparent;
  border:      none;
  cursor:      pointer;
  padding:     3px 6px;
  border-radius: 4px;
  transition:  background 0.12s, color 0.12s;
}
.mp-notif-clear-btn:hover {
  background: rgba(255,255,255,0.08);
  color:      rgba(255,255,255,0.70);
}

.mp-notif-close-btn {
  width:       22px;
  height:      22px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border:      none;
  background:  transparent;
  color:       rgba(255,255,255,0.35);
  cursor:      pointer;
  padding:     0;
  transition:  background 0.12s, color 0.12s;
}
.mp-notif-close-btn:hover {
  background: rgba(255,255,255,0.08);
  color:      rgba(255,255,255,0.70);
}
.mp-notif-close-btn svg {
  width: 10px; height: 10px;
}

/* ── Lista de notificações ───────────────────────────────────────────────── */

.mp-notif-list {
  overflow-y:  auto;
  overflow-x:  hidden;
  flex:        1;
  display:     flex;
  flex-direction: column;
  gap:         0;
}

/* ── Item ────────────────────────────────────────────────────────────────── */

.mp-notif-item {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position:    relative;
  cursor:      default;
  transition:  background 0.10s;
}
.mp-notif-item:hover { background: rgba(255,255,255,0.04); }
.mp-notif-item:last-child { border-bottom: none; }

.mp-notif-item--unread::before {
  content:      '';
  position:     absolute;
  left:         4px;
  top:          50%;
  transform:    translateY(-50%);
  width:        4px;
  height:       4px;
  border-radius: 50%;
  background:   var(--mp-accent, #3daee9);
}

.mp-notif-icon {
  font-size:   18px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 1px;
}

.mp-notif-body {
  flex:        1;
  min-width:   0;
  display:     flex;
  flex-direction: column;
  gap:         2px;
}

.mp-notif-title {
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   12px;
  font-weight: 600;
  color:       rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.mp-notif-desc {
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   11px;
  color:       rgba(255,255,255,0.50);
  overflow:    hidden;
  text-overflow: ellipsis;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mp-notif-time {
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   10px;
  color:       rgba(255,255,255,0.28);
  margin-top:  1px;
}

.mp-notif-dismiss {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  justify-content: center;
  border:      none;
  background:  transparent;
  color:       rgba(255,255,255,0.30);
  cursor:      pointer;
  border-radius: 4px;
  padding:     0;
  opacity:     0;
  transition:  opacity 0.12s, background 0.12s, color 0.12s;
}
.mp-notif-dismiss svg { width: 8px; height: 8px; }
.mp-notif-item:hover .mp-notif-dismiss { opacity: 1; }
.mp-notif-dismiss:hover {
  background: rgba(255,255,255,0.10);
  color:      rgba(255,255,255,0.70);
}

/* ── Estado vazio ────────────────────────────────────────────────────────── */

.mp-notif-empty {
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:         12px;
  padding:     40px 24px;
  color:       rgba(255,255,255,0.20);
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   12px;
}
.mp-notif-empty svg { width: 36px; height: 36px; }