/* TyapTerm — Toasts, context menu, badges, animations, global UI */

/* Noise texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* Selection */
::selection {
  background: var(--accent);
  color: #fff;
}

/* Global scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ═══════════════════════════════════════════════
   NOTIFICATION TOAST
   ═══════════════════════════════════════════════ */
#toastContainer {
  position: fixed;
  top: 44px;  /* below titlebar (40px + 4px gap) */
  left: 12px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  overflow: hidden;
  transform: translateX(-100%);
  opacity: 0;
  transition: all var(--dur-slide) var(--ease-out);
}
.toast.visible { transform: translateX(0); opacity: 1; }
.toast-accent { height: 3px; background: var(--accent); }
.toast.success .toast-accent { background: var(--green); }
.toast.error .toast-accent { background: var(--red); }
.toast.warning .toast-accent { background: var(--orange); }

.toast-body {
  padding: 10px 14px;
  display: flex;
  gap: 10px;
}
.toast-icon { font-size: 17px; flex-shrink: 0; padding-top: 1px; }
.toast-text { flex: 1; min-width: 0; }
.toast-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.toast-message {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}
.toast-close {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-3); border-radius: var(--border-r);
  cursor: pointer; font-size: 13px;
  flex-shrink: 0;
}
.toast-close:hover { background: var(--surface-3); color: var(--text-1); }

.toast-action {
  padding: 6px 14px;
  border-top: 1px solid var(--border-1);
}
.toast-action-btn {
  border: none; background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.toast-action-btn:hover { color: var(--accent-hover); }

.toast-progress { height: 3px; background: var(--border-1); overflow: hidden; }
.toast-progress-bar { height: 100%; background: var(--accent); width: 100%; }

/* ═══════════════════════════════════════════════
   CONTEXT MENU
   ═══════════════════════════════════════════════ */
.context-menu {
  position: fixed;
  z-index: 3000;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  padding: 4px 0;
  min-width: 180px;
  display: none;
}


.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
  position: relative;
}
.ctx-item:hover { background: var(--accent-glow); }
.ctx-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.ctx-item:hover .ctx-icon { opacity: 0.9; }
[data-theme="light"] .ctx-icon, [data-theme="tyap-light"] .ctx-icon { filter: brightness(0) invert(0.3); }
[data-theme="dark"] .ctx-icon, [data-theme="tyap-dark"] .ctx-icon { filter: brightness(0) invert(0.7); }
.ctx-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-item .ctx-shortcut {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-disabled);
}
.ctx-sep { height: 1px; background: var(--border-1); margin: 4px 0; }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover { background: var(--red-glow); }
.ctx-item.orange { color: var(--orange); }
.ctx-item.orange:hover { background: var(--orange-glow); }
.ctx-item.mint { color: var(--codex-mint, #35d6a6); }
.ctx-item.mint:hover { background: var(--codex-mint-glow, rgba(53, 214, 166, 0.12)); }
.ctx-item.orange .ctx-icon,
.ctx-item.mint .ctx-icon {
  filter: none;
  opacity: 0.95;
}
/* Submenu arrow + hover trigger */
.ctx-item.has-submenu::after {
  content: '\25B8'; font-size: 10px; color: var(--text-3); margin-left: auto;
}
.ctx-submenu {
  position: absolute; left: 100%; top: -4px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 6px; box-shadow: var(--shadow-2);
  padding: 4px 0; min-width: 160px;
  display: none; z-index: 3001;
}
.ctx-item.has-submenu:hover > .ctx-submenu { display: block; }

/* ═══════════════════════════════════════════════
   BADGE COLORS
   ═══════════════════════════════════════════════ */
.badge-ssh { background: rgba(105,255,180,0.12); color: var(--ssh-color); }
.badge-telnet { background: rgba(255,138,128,0.12); color: var(--telnet-color); }
.badge-ftp { background: rgba(77,208,225,0.12); color: var(--ftp-color); }
.badge-remote { background: rgba(188,140,255,0.12); color: var(--remote-color); }
.badge-rdp { background: rgba(255,158,100,0.12); color: var(--rdp-color); }
.badge-local { background: rgba(255,183,77,0.12); color: var(--local-color); }
.badge-ps { background: rgba(88,166,255,0.12); color: var(--powershell-color); }

[data-theme="light"] .badge-ssh { background: rgba(26,127,55,0.1); }
[data-theme="light"] .badge-telnet { background: rgba(207,34,46,0.1); }
[data-theme="light"] .badge-ftp { background: rgba(2,132,168,0.1); }
[data-theme="light"] .badge-remote { background: rgba(124,58,237,0.1); }
[data-theme="light"] .badge-rdp { background: rgba(194,89,10,0.1); }
[data-theme="light"] .badge-local { background: rgba(191,90,18,0.1); }
[data-theme="light"] .badge-ps { background: rgba(9,105,218,0.1); }

[data-theme="tyap-dark"] .badge-ssh { background: rgba(105,255,180,0.12); }
[data-theme="tyap-dark"] .badge-telnet { background: rgba(255,138,128,0.12); }
[data-theme="tyap-dark"] .badge-ftp { background: rgba(77,208,225,0.12); }
[data-theme="tyap-dark"] .badge-remote { background: rgba(186,104,200,0.12); }
[data-theme="tyap-dark"] .badge-rdp { background: rgba(255,158,100,0.12); }
[data-theme="tyap-dark"] .badge-local { background: rgba(255,183,77,0.12); }
[data-theme="tyap-dark"] .badge-ps { background: rgba(66,165,245,0.12); }

[data-theme="tyap-light"] .badge-ssh { background: rgba(46,125,50,0.1); }
[data-theme="tyap-light"] .badge-telnet { background: rgba(198,40,40,0.1); }
[data-theme="tyap-light"] .badge-ftp { background: rgba(0,131,143,0.1); }
[data-theme="tyap-light"] .badge-remote { background: rgba(166,38,164,0.1); }
[data-theme="tyap-light"] .badge-rdp { background: rgba(194,89,10,0.1); }
[data-theme="tyap-light"] .badge-local { background: rgba(230,81,0,0.1); }
[data-theme="tyap-light"] .badge-ps { background: rgba(21,101,192,0.1); }

/* ═══════════════════════════════════════════════
   FAVORITES DROPDOWN
   ═══════════════════════════════════════════════ */
.fav-dropdown {
  position: fixed;
  z-index: 3000;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  padding: 4px 0;
  min-width: 200px;
  max-width: 320px;
  max-height: 300px;
  overflow-y: auto;
}
.fav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.fav-dropdown-item:hover { background: var(--accent-glow); }
.fav-dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.95;
}
.fav-dropdown-item.orange {
  color: var(--orange);
}
.fav-dropdown-item.orange:hover {
  background: var(--orange-glow);
}
.fav-dropdown-item.mint {
  color: var(--codex-mint, #35d6a6);
}
.fav-dropdown-item.mint:hover {
  background: var(--codex-mint-glow, rgba(53, 214, 166, 0.12));
}
.fav-dropdown-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-dropdown-del {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-3); border-radius: var(--border-r);
  cursor: pointer; font-size: 14px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.fav-dropdown-item:hover .fav-dropdown-del { opacity: 1; }
.fav-dropdown-del:hover { color: var(--red); background: var(--surface-3); }
.fav-dropdown-sep { height: 1px; background: var(--border-1); margin: 4px 0; }
.fav-dropdown-add { color: var(--accent); font-weight: 500; }
.fav-dropdown-add:hover { background: var(--accent-glow); }
.fav-dropdown-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}

/* Star button active state */
.fb-fav-btn:hover { color: var(--orange) !important; }

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Claude rate limit overlay */
.claude-rate-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--bg-warm);
  border-bottom: 2px solid var(--accent);
  padding: 10px 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-1);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.claude-rate-countdown {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--accent);
  min-width: 48px;
}
.claude-rate-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
}