/* backend/app/static/css/activity-overlay.css */

/* relies upon - //backend/app/static/js/app/activityOverlay.js
//relies upon - # app/services/activity_stream.py */

/* container */
#activity-tray {
  --w-closed: 70px;   /* minimized */
  --w-open: 160px;    /* expanded */
  position: fixed;
  z-index: 1080;
  right: 1rem;
  bottom: 1rem;
  width: var(--w-closed);               /* start minimized */
  font-size: 0.875rem;
  font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
  user-select: none;
  transition: width .18s ease;          /* animate width */
  
}

/* square look */
#activity-header,
#activity-list { border-radius: 0; }

/* header */
#activity-header {
  background: hsl(12, 98%, 52%, 0.637);
  color: #fff;
  padding: .5rem .6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  touch-action: none;                    /* keep for drag */
}

/* Title text inside the header */
#activity-title {
  color: #ffffff;   /* warm yellow, example */
  font-weight: 700; /* keep it bold if needed */
}

.activity-item strong {        /* title text */
  color: hsla(12, 98%, 52%, 0.637);  /* Bootstrap primary blue, for example */
  font-weight: 600;
}






#activity-count { opacity: .9; font-variant-numeric: tabular-nums; }

/* list panel — animate height instead of display:none */
#activity-list {
  background: rgba(10, 37, 54, 1);
  border: 1px solid rgba(0,0,0,.1);
  border-top: 0;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  max-height: 0;
  overflow: hidden;              /* hide when collapsed */
  transition: max-height .18s ease;
}

/* when open: widen + reveal list */
#activity-tray.open { width: var(--w-open); }
#activity-tray.open #activity-list {
  max-height: 8.5rem;            /* ~4 rows */
  overflow-y: auto;              /* enable scrolling */
}

/* hide the label in minimized state to keep the bar tiny */
#activity-tray:not(.open) #activity-title { display: none; }

/* docking: four corners (unchanged) */
#activity-tray.pos-tl { left: 1rem; top: 100px; right: auto; bottom: auto; }
#activity-tray.pos-tr { right: 1rem; top: 100px; left: auto; bottom: auto; }
#activity-tray.pos-bl { left: 1rem; bottom: 1rem; right: auto; top: auto; }
#activity-tray.pos-br { right: 1rem; bottom: 1rem; left: auto; top: auto; }

/* drag feedback */
#activity-tray.dragging #activity-header { filter: brightness(0.9); }
#activity-tray.move-mode #activity-header { background: #eeeceb; }

/* items */
.activity-item {
  padding: .5rem .6rem;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  cursor: pointer;
}
.activity-item .ico { width: 1.25rem; text-align: center; }
.activity-item .meta { font-size: 12px; opacity: .75; color: #f7f7f7; } /*body text*/
.activity-item .txt { white-space: normal; overflow-wrap: anywhere; }



/* Scrollbar for activity list (WebKit: Chrome, Edge, Safari) start */
#activity-list::-webkit-scrollbar {
  width: 8px;                 /* overall width */
}

#activity-list::-webkit-scrollbar-track {
  background: rgba(10, 37, 54, 1);         /* track color */
  border-radius: 4px;
}

#activity-list::-webkit-scrollbar-thumb {
  background: hsl(12, 98%, 52%);         /* thumb color (Bootstrap primary) */
  border-radius: 4px;
}

#activity-list::-webkit-scrollbar-thumb:hover {
  background: hsl(12, 98%, 52%);         /* darker on hover */
}

/* Firefox (limited) */
#activity-list {
  scrollbar-width: thin;       /* "auto" or "thin" */
  scrollbar-color: hsl(12, 98%, 52%) rgba(10, 37, 54, 1);  /* thumb track */
}
/* Scrollbar for activity list end */

/* --- temporary resize grip (non-persistent) --- */
/* corner resize grip (bottom-right) */
/* base */
#activity-resize {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: .7;
  background:
    linear-gradient(135deg, rgba(255,255,255,.35) 0 2px, transparent 0 6px) 0 0/100% 100%,
    linear-gradient(135deg, rgba(255,255,255,.20) 0 1px, transparent 0 6px) 4px 4px/100% 100%;
}
#activity-resize:hover { opacity: 1; }

/* per quadrant placement + cursor direction */
#activity-tray.pos-br #activity-resize {
  top: 0; left: 0;
  cursor: nwse-resize;
}
#activity-tray.pos-bl #activity-resize {
  right: 0; top: 0;
  cursor: nesw-resize;
}
#activity-tray.pos-tr #activity-resize {
  left: 0; bottom: 0;
  cursor: nesw-resize;
}
#activity-tray.pos-tl #activity-resize {
  right: 0; bottom: 0;
  cursor: nwse-resize;
}


/* feedback while resizing */
#activity-tray.resizing #activity-header { filter: brightness(0.9); }


/* Ensure header paints across whatever width the tray has */
#activity-header {
  width: 100%;
  box-sizing: border-box;
}

/* Clip children that would hang outside when closed */
#activity-tray {
  overflow: hidden;  /* prevents the count from sticking out when closed */
}

#activity-return.return-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  opacity: .85;
  cursor: pointer;
}
#activity-return.return-btn:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* When minimized we hide the title, but keep the return button visible */
#activity-tray:not(.open) #activity-title { display: none; }
/* Return button (left side) end */

/* === Mobile / touch-friendly sizing =========================== */

/* Phones & small tablets (Bootstrap-ish) */
@media (max-width: 576px), (pointer: coarse) {
  /* Wider closed state + slightly wider open state on mobile */
  #activity-tray {
    --w-closed: 100px;   /* was 40/70; give thumbs a real target */
    --w-open:   200px;   /* optional: a bit wider when open */
  }

  /* Bigger header hit area + font legibility */
  #activity-header {
    min-height: 44px;          /* touch target (Apple HIG recommends ≥44px) */
    padding: .65rem .75rem;    /* more breathing room */
    font-size: 0.95rem;
  }

  /* Return button: larger target */
  #activity-return.return-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
    border-radius: 6px;
  }

  /* Counter: a touch larger so it reads well */
  #activity-count {
    font-size: 0.95rem;
  }

  /* List rows: slightly taller spacing on touch */
  .activity-item {
    padding: .6rem .7rem;
  }

  /* When open, allow a bit more visible rows on small screens */
  #activity-tray.open #activity-list {
    max-height: 11rem; /* ~5 rows */
  }

  /* Resize grip: bigger/easier to grab */
  #activity-resize {
    width: 18px;
    height: 18px;
  }
}

/* Super small devices */
@media (max-width: 360px) {
  #activity-tray {
    --w-closed: 96px;
    --w-open:   188px;
  }
}

/* Landscape phones: a bit wider open state feels nicer */
@media (max-height: 480px) and (orientation: landscape) {
  #activity-tray {
    --w-open: 220px;
  }
}