@charset "utf-8";
.info-box { background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 8px; padding: 8px 10px; width: 100%; max-width: 384px; box-sizing: border-box; color: #f1f1f1; font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin: 0 auto; }
.info-box-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.info-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.info-tab { background-color: #8a0707; border: 1px solid #b64040; border-radius: 4px; color: #e9e9e9; padding: 2px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; line-height: 1.4; }
.info-tab.is-off { background-color: #2b0707; color: #bbb; border-color: #4a0f0f; }
.info-tab:hover { background-color: #ff0000; color: #fff; }
.info-actions { display: inline-flex; align-items: center; gap: 6px; }
.info-sound-button { background-color: #8a0707; border: 1px solid #b64040; border-radius: 4px; color: #f3f3f3; font-size: 10px; text-transform: uppercase; letter-spacing: 0.35px; padding: 2px 10px; line-height: 1.2; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; min-width: 66px; }
.info-sound-button:hover { background-color: #ff0000; color: #fff; }
.info-sound-button.is-pending,
.info-sound-button.is-enabled { cursor: default; pointer-events: none; }
.info-sound-button.is-pending { opacity: 0.6; }
.info-sound-button.is-enabled { background-color: #14532d; border-color: #1f8a56; color: #dcfce7; box-shadow: none; }
.info-sound-button.is-required { border-color: #facc15; box-shadow: 0 0 6px rgba(250, 204, 21, 0.5); }
.info-sound-button.is-error { background-color: #7a1f1f; border-color: #d05252; color: #ffe4e6; box-shadow: 0 0 6px rgba(208, 82, 82, 0.55); }
.info-icon { width: 16px; height: 16px; display: block; cursor: pointer; transition: opacity 0.15s ease; }
.info-icon:active { transform: translateY(1px); }
.info-icon.is-refreshing { opacity: 0.4; }
[data-info-occupancy] { font-size: 10px; color: #e5e5e5; min-width: auto; text-decoration: none; padding: 2px 0; display: inline-block; }
[data-info-occupancy]:hover { color: #ffffff; text-decoration: underline; }
.info-error { display: none; margin-top: 6px; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.45); color: #fecaca; padding: 6px 8px; border-radius: 4px; font-size: 11px; }
.info-error.is-visible { display: block; }
.info-list { margin-top: 8px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.info-msg { display: flex; gap: 8px; background: #131313; border: 1px solid #1f1f1f; border-radius: 6px; padding: 8px; animation: info-fade-in 0.2s ease-in; }
.info-msg-new { animation: info-pulse 1.1s ease-in-out 4; }
.info-msg-avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #0a0a0a; }
.info-msg-content { flex: 1 1 auto; min-width: 0; }
.info-msg-user { font-weight: 700; font-size: 11px; margin-bottom: 2px; color: #f7f7f7; }
.info-msg-body { font-size: 12px; line-height: 1.35; color: #f0f0f0; word-break: break-word; }
.info-msg-body a { color: #60a5fa; }
.info-msg-meta { font-size: 10px; color: #9aa0ac; margin-top: 4px; }
.info-msg-empty { text-align: center; color: #9ca3af; font-size: 12px; padding: 16px 0; border: 1px dashed #1f1f1f; border-radius: 6px; }
.info-msg-tradealerts { border-left: 4px solid #cc2b2b; }
.info-msg-bots { border-left: 4px solid #f472b6; }
.info-msg-music { border-left: 4px solid #4d7cfe; }

@keyframes info-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes info-pulse {
  0% { box-shadow: 0 0 0 0 rgba(204, 43, 43, 0.0); background-color: #131313; }
  25% { box-shadow: 0 0 12px 2px rgba(255, 82, 82, 0.75); background-color: #1d0202; }
  50% { box-shadow: 0 0 0 0 rgba(204, 43, 43, 0.0); background-color: #131313; }
  75% { box-shadow: 0 0 10px 2px rgba(255, 82, 82, 0.6); background-color: #1a0101; }
  100% { box-shadow: 0 0 0 0 rgba(204, 43, 43, 0.0); background-color: #131313; }
}