.side-panel,
.floating-panel {

  position: fixed;

  z-index: 2000;

  background:
    var(--panel);

  border:
    1px solid var(--border);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 24px 70px var(--shadow);

  overflow: hidden;

  animation:
    panelAppear 0.16s ease;

}

/* =========================
   SIDE PANEL
========================= */

.side-panel {

  top: 70px;
  right: 20px;
  bottom: 52px;

  width: 340px;

  display: flex;
  flex-direction: column;

}

/* =========================
   FLOATING PANEL
========================= */

.floating-panel {

  top: 90px;
  left: 50%;

  transform:
    translateX(-50%);

  width: 440px;

  max-height:
    calc(100vh - 160px);

  display: flex;
  flex-direction: column;

}

/* =========================
   HEADER
========================= */

.panel-header {

  height: 54px;

  flex: 0 0 auto;

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

  padding: 0 14px;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(255,255,255,0.015);

}

.panel-title {

  font-size:
    12px;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

  color:
    var(--text);

}

/* =========================
   CONTENT
========================= */

.panel-content {

  flex: 1;

  padding: 16px;

  overflow-y: auto;

}

/* =========================
   SETTINGS
========================= */

.settings-content {

  display: flex;
  flex-direction: column;

  gap: 20px;

}

.settings-group {

  display: flex;
  flex-direction: column;

  gap: 8px;

}

.settings-group label {

  font-size:
    12px;

  color:
    var(--muted);

}

.settings-group select {

  height: 42px;

}

.checkbox-group {

  flex-direction: row;
  align-items: center;

}

.checkbox-group label {

  display: flex;
  align-items: center;
  gap: 10px;

}

/* =========================
   ITEMS
========================= */

.fragment-item,
.snapshot-item {

  padding:
    14px;

  margin-bottom:
    12px;

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid var(--border);

  transition:
    border var(--transition-fast),
    background var(--transition-fast);

}

.fragment-item:hover,
.snapshot-item:hover {

  background:
    rgba(255,255,255,0.045);

  border-color:
    rgba(255,255,255,0.14);

}

/* =========================
   SNAPSHOT TITLE
========================= */

.snapshot-title {

  margin-bottom:
    8px;

  font-size:
    12px;

  color:
    var(--text);

}

/* =========================
   TEXT
========================= */

.fragment-text,
.snapshot-preview {

  white-space:
    pre-wrap;

  overflow-wrap:
    break-word;

  line-height:
    1.7;

  color:
    var(--muted);

  font-size:
    12px;

}

/* =========================
   DATE
========================= */

.snapshot-date {

  margin-bottom:
    10px;

  color:
    var(--ghost);

  font-size:
    11px;

}

/* =========================
   ACTIONS
========================= */

.item-actions {

  display: flex;
  gap: 8px;

  margin-top: 14px;

  flex-wrap: wrap;

}

.item-actions button {

  flex: 1;

}

/* =========================
   EMPTY NOTE
========================= */

.empty-note {

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;

}

/* =========================
   SEARCH INPUT
========================= */

#searchInput {

  height: 44px;

  font-size:
    13px;

}

/* =========================
   PANEL CLOSE
========================= */

.panel-close {

  min-width:
    34px;

  padding:
    8px 10px;

}

/* =========================
   SUPPORT PANEL
========================= */

#supportPanel .panel-content {

  display: flex;
  flex-direction: column;

  gap: 18px;

}

#supportPanel p {

  color:
    var(--muted);

  line-height:
    1.8;

  font-size:
    13px;

}

/* =========================
   ANIMATION
========================= */

@keyframes panelAppear {

  from {

    opacity: 0;

    transform:
      translateY(6px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}

/* =========================
   NO EFFECTS
========================= */

body.no-effects .side-panel,
body.no-effects .floating-panel {

  animation: none;

}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .side-panel {

    left: 10px;
    right: 10px;

    width: auto;

    top: 120px;

  }

  .floating-panel {

    width:
      calc(100vw - 20px);

    left: 10px;

    transform: none;

    top: 130px;

  }

}