:host
  display: block
  height: 100vh

.app
  display: grid
  grid-template-columns: var(--sidebar-w) 1fr
  height: 100vh
  overflow: hidden

.main
  display: flex
  flex-direction: column
  overflow: hidden
  position: relative
  min-width: 0

.content
  flex: 1
  min-height: 0
  overflow: hidden
  padding: 18px 22px 20px
  display: flex
  flex-direction: column
  gap: 22px

// Activity drawer
.scrim
  position: fixed
  inset: 0
  background: oklch(25% 0.02 240 / 0.35)
  z-index: 40

.activity
  position: fixed
  top: 0
  right: 0
  bottom: 0
  width: 340px
  max-width: 100vw
  background: var(--surface)
  border-left: 1px solid var(--border)
  box-shadow: -12px 0 40px oklch(30% 0.02 240 / 0.15)
  transform: translateX(100%)
  transition: transform 0.22s ease
  z-index: 50
  display: flex
  flex-direction: column

  &.show
    transform: translateX(0)

.activity-head
  display: flex
  align-items: center
  padding: 16px 18px
  border-bottom: 1px solid var(--border)
  flex: none

  .activity-title
    font-size: 15px
    font-weight: 600
    color: var(--fg)

  .icon-btn
    margin-left: auto

.activity-body
  flex: 1
  overflow-y: auto
  padding: 14px 18px

.activity-empty
  text-align: center
  color: var(--muted)
  font-size: 13px
  padding: 40px 0

.activity-item
  padding: 10px 0
  border-bottom: 1px solid var(--border)

  .activity-msg
    font-size: 13px
    color: var(--fg)
    margin-bottom: 3px

  .activity-url
    font-size: 11.5px
    color: var(--muted)
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    font-family: var(--font-mono)

  .activity-time
    font-size: 11px
    color: var(--muted)
    margin-top: 4px

.activity-clear
  margin-top: 14px
  width: 100%
  justify-content: center

.icon-btn
  width: 32px
  height: 32px
  display: grid
  place-items: center
  border: 1px solid transparent
  background: none
  border-radius: 6px
  color: var(--muted)
  transition: background 0.12s ease, color 0.12s ease

  &.neutral:hover
    background: var(--bg)
    color: var(--fg)

.ghost-btn
  display: inline-flex
  align-items: center
  gap: 7px
  padding: 7px 10px
  border: 1px solid var(--border)
  background: var(--surface)
  border-radius: 6px
  font-size: 12.5px
  color: var(--fg)
  transition: background 0.12s ease, border-color 0.12s ease

  &:hover
    background: var(--bg)
    border-color: oklch(82% 0.01 240)

.batch-status
  font-size: 0.9rem
  color: var(--muted)

.modal.fade.show
  background-color: rgba(0, 0, 0, 0.5)

@media (max-width: 900px)
  .app
    grid-template-columns: 1fr

  .content
    padding: 14px 14px 16px