/* css/popover.css */

/*
  Popover layer styles.
  This file intentionally consumes global CSS variables from style.css,
  so dark / light theme changes remain synchronized across the app.
*/

/* Footer Popovers */

.footer-popover {
  position: fixed;
  z-index:
    var(--z-popover);

  width: min(320px, calc(100vw - 32px));

  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-popover-bg);
  color: var(--color-text);
  box-shadow: var(--color-popover-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  padding: 16px;
}

.footer-popover[hidden] {
  display: none;
}

.footer-popover-header {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.footer-popover-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.footer-popover-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-text-soft);
}

/* Bookmark Popover */

.bookmark-popover {
  width:
    min(
      420px,
      calc(100vw - 32px)
    );

  max-height:
    calc(
      100dvh -
      var(--top-bar-height) -
      var(--bottom-bar-height) -
      32px
    );

  overflow-y: auto;
}

.bookmark-panel-section {
  padding: 12px 0 0;
}

.bookmark-panel-section + .bookmark-panel-section {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
}

.bookmark-panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.bookmark-panel-section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bookmark-panel-clear-button {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-soft);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.bookmark-panel-clear-button:hover {
  background: var(--color-control-bg-hover);
  color: var(--color-text);
}

.bookmark-panel-clear-button.is-confirming {
  background: var(--color-control-bg-active);
  color: var(--color-text);
  border-color: var(--color-text-soft);
}

.bookmark-panel-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
}

.bookmark-panel-count {
  color: var(--color-text-soft);
  font-size: 12px;
}

.bookmark-panel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.bookmark-panel-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-muted);
  padding: 9px 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  text-align: left;
}

.bookmark-panel-item:hover {
  background: var(--color-control-bg-hover);
  color: var(--color-text);
  border-color: var(--color-border);
}

.bookmark-panel-item-star {
  color: var(--color-text-soft);
  line-height: 1.4;
}

.bookmark-panel-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bookmark-panel-item-title {
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-panel-item-meta {
  color: var(--color-text-soft);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-panel-item:focus-visible,
.bookmark-panel-clear-button:focus-visible,
.settings-option-button:focus-visible {
  outline: 1px solid var(--color-text-soft);
  outline-offset: 2px;
}

.bookmark-panel-empty {
  border: 1px dashed var(--color-placeholder-border);
  border-radius: 12px;
  background: var(--color-placeholder-bg);
  color: var(--color-text-soft);
  padding: 10px;
  font-size: 13px;
  line-height: 1.6;
}

/* Settings Popover */

.settings-popover {
  width: min(340px, calc(100vw - 32px));
}

.settings-panel-group {
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}

.settings-panel-group:first-of-type {
  padding-top: 0;
  border-top: none;
}

.settings-panel-group:last-child {
  padding-bottom: 0;
}

.settings-panel-label {
  margin: 0 0 10px;
  color: var(--color-text-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.settings-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-option-button {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
}

.settings-option-button:hover {
  background: var(--color-control-bg-hover);
  color: var(--color-text);
}

.settings-option-button.is-active,
.settings-option-button[aria-pressed="true"] {
  background: var(--color-control-bg-active);
  color: var(--color-text);
  border-color: var(--color-text-soft);
}

.settings-panel-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.settings-panel-value {
  color: var(--color-text-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.settings-slider {
  width: 100%;
  margin: 8px 0 0;
  accent-color: var(--color-text-muted);
}

.settings-panel-note {
  margin: 8px 0 0;
  color: var(--color-text-soft);
  font-size: 12px;
  line-height: 1.55;
}

/* Responsive */

@media (max-width: 760px) {
  .footer-popover {
    width: calc(100vw - 24px);
  }
}


/* ==========================================================================
   Header User Popover
   ========================================================================== */

.user-popover {
  position:
    fixed;

  z-index:
    var(--z-popover);

  width:
    min(
      360px,
      calc(100vw - 32px)
    );

  max-height:
    calc(
      100dvh -
      var(--top-bar-height) -
      24px
    );

  overflow-y:
    auto;

  padding:
    16px;

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

  border-radius:
    18px;

  background:
    var(--color-popover-bg);

  color:
    var(--color-text);

  box-shadow:
    var(--color-popover-shadow);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.user-popover[hidden] {
  display:
    none;
}

.user-popover-header {
  display:
    grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap:
    12px;

  align-items:
    center;

  padding-bottom:
    14px;

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

.user-popover-avatar {
  display:
    block;

  width:
    46px;

  height:
    46px;

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

  border-radius:
    999px;

  background:
    var(--color-control-bg);

  --user-avatar-font-size:
    34px;
}

.user-popover-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-popover-avatar-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-soft);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;

  transition:
    color
    140ms
    ease,
    opacity
    140ms
    ease;
}

.user-popover-avatar-action:hover {
  color: var(--color-text);
}

.user-popover-identity {
  min-width:
    0;
}

.user-popover-eyebrow {
  margin:
    0
    0
    3px;

  color:
    var(--color-text-soft);

  font-size:
    10px;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.user-popover-name {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(--color-text);

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.user-popover-type {
  margin:
    4px
    0
    0;

  color:
    var(--color-text-muted);

  font-size:
    12px;
}

.user-popover-actions {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  padding:
    12px
    0;
}

.user-popover-action {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap:
    10px;

  align-items:
    center;

  padding:
    10px;

  border:
    1px solid
    transparent;

  border-radius:
    12px;

  background:
    transparent;

  color:
    var(--color-text-muted);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color
    160ms
    ease,
    background-color
    160ms
    ease,
    color
    160ms
    ease,
    transform
    160ms
    ease;
}

.user-popover-action:hover {
  border-color:
    var(--color-border);

  background:
    var(--color-control-bg-hover);

  transform:
    translateX(
      2px
    );
}

.user-popover-action-main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.user-popover-action-label {
  color:
    var(--color-text);

  font-size:
    13px;

  font-weight:
    500;
}

.user-popover-action-description {
  color:
    var(--color-text-soft);

  font-size:
    11px;

  line-height:
    1.45;
}

.user-popover-action-arrow {
  color:
    var(--color-text-soft);

  font-size:
    14px;

  transition:
    color
    160ms
    ease,
    transform
    160ms
    ease;
}

.user-popover-action:hover
.user-popover-action-arrow {
  color:
    var(--color-text-muted);

  transform:
    translateX(
      3px
    );
}

.user-popover-session {
  padding:
    12px
    0;

  border-top:
    1px solid
    var(--color-border);
}

.user-popover-section-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    9px;
}

.user-popover-section-heading h3 {
  margin:
    0;

  color:
    var(--color-text-soft);

  font-size:
    11px;

  font-weight:
    500;

  letter-spacing:
    0.08em;
}

.user-popover-detail-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  margin:
    0;
}

.user-popover-detail-row {
  display:
    grid;

  grid-template-columns:
    6.5rem
    minmax(0, 1fr);

  gap:
    12px;

  align-items:
    baseline;
}

.user-popover-detail-row dt,
.user-popover-detail-row dd {
  margin:
    0;
}

.user-popover-detail-row dt {
  color:
    var(--color-text-soft);

  font-size:
    11px;
}

.user-popover-detail-row dd {
  overflow:
    hidden;

  color:
    var(--color-text-muted);

  font-size:
    11px;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.user-popover-notice {
  margin:
    0
    0
    12px;

  padding:
    9px
    10px;

  border:
    1px dashed
    var(--color-placeholder-border);

  border-radius:
    10px;

  background:
    var(--color-placeholder-bg);

  color:
    var(--color-text-muted);

  font-size:
    12px;

  line-height:
    1.55;
}

.user-popover-notice[hidden] {
  display:
    none;
}

.user-popover-footer {
  display:
    flex;

  justify-content:
    flex-end;

  padding-top:
    12px;

  border-top:
    1px solid
    var(--color-border);
}

.user-popover-logout {
  padding:
    7px
    12px;

  border:
    1px solid
    rgba(180, 92, 92, 0.55);

  border-radius:
    999px;

  background:
    transparent;

  color:
    #c98484;

  font-size:
    12px;

  cursor:
    pointer;

  transition:
    background-color
    150ms
    ease,
    border-color
    150ms
    ease,
    transform
    150ms
    ease;
}

.user-popover-logout:hover {
  background:
    rgba(180, 92, 92, 0.12);

  transform:
    translateY(
      -1px
    );
}

.user-popover-action:focus-visible,
.user-popover-logout:focus-visible {
  outline:
    1px solid
    var(--color-text-soft);

  outline-offset:
    2px;
}


/* ==========================================================================
   Logout Confirmation Modal
   ========================================================================== */

body.is-logout-confirmation-open {
  overflow:
    hidden;
}

.logout-confirmation-modal {
  position:
    fixed;

  top:
    var(--top-bar-height);

  right:
    0;

  bottom:
    0;

  left:
    0;

  z-index:
    var(--z-confirmation-modal);

  display:
    grid;

  place-items:
    center;

  padding:
    clamp(
      1rem,
      3vw,
      2.5rem
    );

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity
    180ms
    ease,
    visibility
    180ms
    ease;
}

.logout-confirmation-modal[hidden] {
  display:
    none;
}

.logout-confirmation-modal.is-open {
  opacity:
    1;

  visibility:
    visible;
}

.logout-confirmation-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      4,
      5,
      7,
      0.7
    );

  backdrop-filter:
    blur(
      8px
    );

  -webkit-backdrop-filter:
    blur(
      8px
    );
}

.logout-confirmation-dialog {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      30rem,
      100%
    );

  padding:
    1.5rem;

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

  border-radius:
    1.05rem;

  outline:
    none;

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

  box-shadow:
    0
    1.8rem
    5.5rem
    rgba(
      0,
      0,
      0,
      0.48
    );

  transform:
    translateY(
      0.65rem
    )
    scale(
      0.985
    );

  transition:
    transform
    180ms
    ease;
}

.logout-confirmation-modal.is-open
.logout-confirmation-dialog {
  transform:
    translateY(
      0
    )
    scale(
      1
    );
}

.logout-confirmation-eyebrow {
  margin:
    0
    0
    0.35rem;

  color:
    var(--color-text-soft);

  font-size:
    0.68rem;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}

.logout-confirmation-title {
  margin:
    0;

  color:
    var(--color-text);

  font-size:
    1.25rem;

  font-weight:
    500;

  line-height:
    1.35;
}

.logout-confirmation-content {
  margin-top:
    1rem;

  color:
    var(--color-text-muted);

  font-size:
    0.86rem;

  line-height:
    1.75;
}

.logout-confirmation-content p {
  margin:
    0
    0
    0.75rem;
}

.logout-confirmation-content p:last-child {
  margin-bottom:
    0;
}

.logout-confirmation-error {
  margin:
    1rem
    0
    0;

  color:
    #c98484;

  font-size:
    0.8rem;

  line-height:
    1.55;
}

.logout-confirmation-error[hidden] {
  display:
    none;
}

.logout-confirmation-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    1.25rem;
}

.logout-confirmation-button {
  min-width:
    6.5rem;

  padding:
    8px
    13px;

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

  border-radius:
    999px;

  background:
    var(--color-control-bg);

  color:
    var(--color-text-muted);

  cursor:
    pointer;
}

.logout-confirmation-button:hover {
  background:
    var(--color-control-bg-hover);

  color:
    var(--color-text);
}

.logout-confirmation-danger {
  border-color:
    rgba(
      180,
      92,
      92,
      0.55
    );

  background:
    rgba(
      180,
      92,
      92,
      0.08
    );

  color:
    #c98484;
}

.logout-confirmation-danger:hover {
  background:
    rgba(
      180,
      92,
      92,
      0.16
    );

  color:
    #d99a9a;
}

.logout-confirmation-button:disabled {
  opacity:
    0.48;

  cursor:
    wait;
}

.logout-confirmation-button:focus-visible {
  outline:
    1px solid
    var(--color-text-soft);

  outline-offset:
    2px;
}


@media (
  prefers-reduced-motion:
  reduce
) {
  .logout-confirmation-modal,
  .logout-confirmation-dialog,
  .user-popover-avatar-action,
  .user-popover-action,
  .user-popover-action-arrow,
  .user-popover-logout {
    transition:
      none;
  }

  .user-popover-action:hover,
  .user-popover-action:hover
  .user-popover-action-arrow,
  .user-popover-logout:hover {
    transform:
      none;
  }
}