.tcos-pet-badge {
  position:absolute;

  top:0;
  right:6px;

  min-width:14px;
  height:14px;

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

  padding:0 3px;

  background:var(--accent);
  color:var(--accent-ink);

  border-radius:7px;

  font-family:var(--mono);
  font-size:8px;
  font-weight:700
}

.tcos-pet {
  position:fixed;
  right:18px;
  bottom:calc(var(--taskbar-h) + 14px);
  z-index:40;
  width:76px;
  height:76px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  transition:transform .2s var(--ease);
}

.tcos-pet:hover,
.tcos-pet:focus-visible {
  transform:translateY(-4px) scale(1.04);
  outline:none
}

.tcos-pet.is-animating {
  animation:tcos-pet-float .7s ease-in-out 1
}

.tcos-pet img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

@keyframes tcos-pet-float {
  0%,100% { transform:translateY(0) }
  50% { transform:translateY(-3px) }
}

.notif-panel {
  position:absolute;

  right:18px;
  bottom:calc(var(--taskbar-h) + 102px);

  z-index:100;

  width:320px;
  max-height:60vh;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  background:color-mix(in srgb,var(--surface) 94%,transparent);

  border:1px solid var(--line-strong);
  border-radius:10px;

  box-shadow:0 18px 45px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.24);
  backdrop-filter:blur(14px)
}

.notif-head {
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:12px 14px;

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

  color:var(--text);

  font-size:13px;
  font-weight:600
}

.notif-clear {
  border:none;
  background:none;

  color:var(--text-faint);

  font-size:11px;

  cursor:pointer
}

.notif-clear:hover {
  color:var(--accent)
}

.notif-list {
  overflow:auto
}

.notif-empty {
  padding:26px 18px;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:10px;
  text-align:center
}

.notif-group {
  padding:10px 14px 4px;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:9px;
  font-weight:600;

  letter-spacing:.04em;
  text-transform:uppercase
}

.notif-item {
  width:100%;

  display:flex;
  flex-direction:column;

  gap:4px;

  padding:12px 14px;

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

  background:none;

  text-align:left;

  cursor:pointer
}

.notif-item:hover {
  background:var(--surface-2)
}

.notif-item .t {
  color:var(--text);

  font-size:12px;
  font-weight:600
}

.notif-item .b {
  color:var(--text-dim);

  font-size:11px;
  line-height:1.5
}

.notif-item .w {
  color:var(--text-faint);

  font-family:var(--mono);
  font-size:9px
}

.notif-toasts {
  position:fixed;

  right:18px;
  bottom:calc(var(--taskbar-h) + 102px);

  z-index:90;

  display:flex;
  flex-direction:column;

  gap:8px;

  width:min(330px, calc(100vw - 36px));
  max-height:calc(100vh - var(--taskbar-h) - 122px);
  overflow-y:auto;
  overflow-x:hidden;

  pointer-events:none
}

.notif-toast {
  position:relative;

  display:flex;

  gap:10px;

  max-width:100%;
  padding:12px 13px;

  background:var(--surface);

  border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);
  border-radius:12px 12px 3px 12px;

  box-shadow:var(--shadow);

  pointer-events:auto;

  cursor:pointer;

  animation:notif-in .2s var(--ease)
}

.notif-toast::after {
  content:"";
  position:absolute;
  right:-8px;
  bottom:13px;
  width:14px;
  height:14px;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
  border-right:1px solid var(--line-strong);
  transform:rotate(45deg)
}

@keyframes notif-in {
  from {
    opacity:0;
    transform:translateX(12px)
  }
  to {
    opacity:1;
    transform:none
  }
}

.notif-toast .tx {
  flex:1;

  min-width:0
}

.notif-toast .t {
  display:block;

  color:var(--text);

  font-size:12px;
  font-weight:600
}

.notif-toast .b {
  display:block;

  margin-top:3px;

  color:var(--text-dim);

  font-size:11px;
  line-height:1.5
}

.notif-toast .w {
  display:block;

  margin-top:5px;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:9px
}

.notif-x {
  flex-shrink:0;

  width:22px;
  height:22px;

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

  border:none;
  border-radius:3px;

  background:none;
  color:var(--text-faint);

  font-size:13px;
  line-height:1;

  cursor:pointer
}

.notif-x:hover {
  background:var(--surface-3);
  color:var(--text)
}