.sidebar-collection-more {
  display: none;
}

.sidebar-collection-actions {
  display: none;
  justify-content: flex-start;
  gap: 7px;
  margin: -3px 14px 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-collection-row.active + .sidebar-collection-actions {
  display: flex;
}

.sidebar-collection-action {
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: 11px;
  background: rgba(255, 255, 255, .76);
  color: #2873b9;
  cursor: pointer;
  touch-action: manipulation;
}

.sidebar-collection-action span { display: none; }
.sidebar-collection-action svg { width: 14px; height: 14px; stroke-width: 2.15; }
.sidebar-collection-action.danger { display: none; color: #d24b55; }

.sidebar-collection-action.share {
  border-color: rgba(37, 99, 235, .32);
  background: linear-gradient(135deg, #367ee9, #55b4f5);
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .19);
}

.sidebar-collection-action.rename {
  border-color: rgba(53, 119, 232, .28);
  background: #eef5ff;
  color: #286cc5;
}

.sidebar-collection-action.safety {
  border-color: #d7dee7;
  background: #f7f9fb;
  color: #7b8797;
}

.sidebar-collection-action.safety.is-safe {
  border-color: #49a879;
  background: #e7f7ed;
  color: #16834d;
  box-shadow: 0 4px 10px rgba(22, 131, 77, .16);
}

.sidebar-collection-action:not(.share):hover { border-color: rgba(37, 99, 235, .36); background: #fff; color: #175d9c; }
.sidebar-collection-action.safety:hover { border-color: #aeb9c6; background: #eef2f6; color: #5e6a79; }
.sidebar-collection-action.safety.is-safe:hover { border-color: #49a879; background: #e7f7ed; color: #16834d; }
.sidebar-collection-action.share:hover { filter: brightness(.97); transform: translateY(-1px); }
.sidebar-collection-action:focus-visible { outline: 3px solid rgba(59, 130, 246, .32); outline-offset: 2px; }

.sidebar-collection-action.safety.is-locked {
  opacity: .72;
  cursor: not-allowed;
  filter: saturate(.78);
  box-shadow: none;
}

.sidebar-collection-action.safety.is-locked:hover { border-color: #d7dee7; background: #f7f9fb; color: #7b8797; transform: none; }
.sidebar-collection-action.safety.is-safe.is-locked:hover { border-color: #49a879; background: #e7f7ed; color: #16834d; }

.sidebar-collection-action.safety.is-plan-locked {
  position: relative;
  opacity: .76;
  cursor: pointer;
}

.sidebar-collection-action.safety.is-plan-locked::after {
  content: "G";
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #d99a12;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.sidebar-collection-action.safety.is-plan-locked:hover { border-color: #d99a12; background: #fff8e7; color: #8b650f; }
.sidebar-collection-action.safety.is-safe.is-plan-locked { border-color: #d7dee7; background: #f7f9fb; color: #7b8797; box-shadow: none; }

body.dark .sidebar-collection-actions { background: transparent; }
body.dark .sidebar-collection-action { border-color: rgba(130, 196, 255, .18); background: rgba(12, 31, 55, .44); color: #b6ddff; }
body.dark .sidebar-collection-action.rename { border-color: rgba(96, 165, 250, .34); background: rgba(30, 64, 175, .18); color: #93c5fd; }
body.dark .sidebar-collection-action.safety { border-color: #475362; background: #202a35; color: #a6b1bf; }
body.dark .sidebar-collection-action.safety.is-safe { border-color: #49a879; background: rgba(22, 131, 77, .32); color: #9ceabb; }
body.dark .sidebar-collection-action:not(.share):hover { background: rgba(130, 196, 255, .14); color: #e1f2ff; }
body.dark .sidebar-collection-action.safety.is-locked:hover { border-color: #475362; background: #202a35; color: #a6b1bf; }
body.dark .sidebar-collection-action.safety.is-safe.is-locked:hover { border-color: #49a879; background: rgba(22, 131, 77, .32); color: #9ceabb; }
body.dark .sidebar-collection-action.safety.is-plan-locked:hover,
body.dark .sidebar-collection-action.safety.is-safe.is-plan-locked { border-color: #735f32; background: #29281f; color: #e0bd67; }

@media (max-width: 768px) {
  .sidebar-collection-row {
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }

  .sidebar-collection-main {
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
  }

  .sidebar-collection-delete {
    display: none !important;
  }

  .sidebar-collection-more {
    position: relative;
    z-index: 12;
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    place-items: center;
    align-self: center;
    justify-self: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    color: var(--muted);
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-collection-more::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 14px;
  }

  .sidebar-collection-more[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
    color: var(--primary-strong);
  }

  .sidebar-collection-actions {
    display: none !important;
  }

  .sidebar-collection-actions.is-open {
    position: relative;
    z-index: 5;
    display: grid !important;
    grid-template-columns: repeat(5, 36px);
    justify-content: start;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 28px);
    margin: 6px 14px 12px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
  }

  .sidebar-collection-action {
    display: grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex: none;
    place-items: center;
    padding: 0;
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
  }

  .sidebar-collection-action span {
    display: none;
  }

  .sidebar-collection-action svg { width: 15px; height: 15px; }
  .sidebar-collection-action.danger { display: grid; border-color: rgba(220, 70, 82, .24); background: #fff4f5; color: #db4450; }
  body.dark .sidebar-collection-action.danger { border-color: rgba(248, 113, 113, .3); background: rgba(127, 29, 29, .2); color: #fca5a5; }
}