/* Topbar popovers for the dark app: the notification panel and the account
   menu. Split into its own file because app-pages.css is already long, but it
   is still part of the one global bundle — so every class here is scoped
   under `.app` or carries an app-specific prefix. */

/* The topbar has to own a stacking context above the page body, or the
   dashboard's cards paint straight over an open popover. */
.app .topbar { position: relative; z-index: 80; }

.app .pop { position: relative; }

/* The bell became a real button; keep it reading like the old span. */
.app .bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease),
    color var(--hover) var(--ease);
}
.app .bell .icon { width: 16px; }
.app .bell:hover,
.app .bell.is-open {
  border-color: rgba(201, 160, 99, 0.45);
  background: rgba(201, 160, 99, 0.08);
  color: var(--gold-bright);
}
.app .bell i {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #0b0908;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
}
/* Mark-all-read empties the badge rather than removing the node. */
.app .bell i:empty { display: none; }

.app .who {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px 0 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.app .who:hover,
.app .who.is-open {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.app .who .icon {
  width: 10px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform var(--hover) var(--ease);
}
.app .who.is-open .icon { transform: rotate(180deg); }

/* Shared popover surface. Anchored to the right edge of its trigger so
   neither panel can widen the topbar or push the layout. */
.app .notif,
.app .acct {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: linear-gradient(168deg, #191512 0%, #100d0b 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  animation: popIn 180ms var(--ease) both;
}
.app .notif[hidden],
.app .acct[hidden] { display: none; }

@keyframes popIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

/* ---- notifications ----------------------------------------------------- */

.app .notif { width: 385px; overflow: hidden; }

.notif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.notif__head h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.notif__head b {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(201, 160, 99, 0.16);
  color: var(--gold-bright);
  font-size: 10.5px;
  font-weight: 600;
}
.notif__read {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
  transition: color var(--hover) var(--ease);
}
.notif__read:hover { color: var(--gold); }

.notif__scroll { max-height: 400px; overflow-y: auto; padding: 6px 0; }
.notif__scroll::-webkit-scrollbar { width: 8px; }
.notif__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.notif__group {
  margin: 8px 0 3px;
  padding: 0 17px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.notifrow {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 11px 17px;
  text-decoration: none;
  transition: background-color var(--hover) var(--ease);
}
.notifrow:hover { background: rgba(255, 255, 255, 0.035); }
/* Unread carries a gold hairline on the leading edge — quieter than tinting
   the whole row, and still scannable straight down the column. */
.notifrow.is-unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--gold);
}

.notifrow__i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}
.notifrow__i .icon { width: 15px; }
/* Tone, so a failure never reads like a success at a glance. */
.notifrow__i.is-good { color: #7fd3a0; border-color: rgba(127, 211, 160, 0.3); background: rgba(127, 211, 160, 0.09); }
.notifrow__i.is-warn { color: #e3b45f; border-color: rgba(227, 180, 95, 0.32); background: rgba(227, 180, 95, 0.1); }
.notifrow__i.is-bad { color: #e08a7c; border-color: rgba(224, 138, 124, 0.32); background: rgba(224, 138, 124, 0.09); }
.notifrow__i.is-gold { color: var(--gold-bright); border-color: rgba(201, 160, 99, 0.38); background: rgba(201, 160, 99, 0.1); }

.notifrow__thumb {
  flex-shrink: 0;
  width: 46px;
  height: 34px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.notifrow__x { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notifrow__x b { font-size: 13px; font-weight: 500; color: var(--white); }
.notifrow__x i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.45);
}
.notifrow__x em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.28); }

.notifrow__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
}
.notifrow.is-unread .notifrow__dot { background: var(--gold); }

.notif__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: var(--gold);
  text-decoration: none;
  transition: background-color var(--hover) var(--ease);
}
.notif__all .icon { width: 13px; }
.notif__all:hover { background: rgba(201, 160, 99, 0.07); color: var(--gold-bright); }

/* ---- account menu ------------------------------------------------------ */

.app .acct { width: 254px; padding: 6px; }

.acct__id { display: flex; align-items: center; gap: 11px; padding: 11px 11px 12px; }
.acct__av {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-size: 14px;
  font-weight: 600;
}
.acct__x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct__x b { font-size: 13px; font-weight: 500; color: var(--white); }
.acct__x i {
  font-style: normal;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The identity block now sits directly on the menu list, so it carries the
   divider that the plan row used to provide. */
.acct__id { border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 4px; }

.acct__list { padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.acct__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  margin: 1px 5px;
  border-radius: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: background-color var(--hover) var(--ease), color var(--hover) var(--ease);
}
.acct__item .icon { width: 15px; color: rgba(255, 255, 255, 0.4); }
.acct__item:hover { background: rgba(255, 255, 255, 0.05); color: var(--white); }
.acct__item:hover .icon { color: var(--gold); }
.acct__item--out { margin-top: 4px; }
.acct__item--out:hover { color: #d98a7a; }
.acct__item--out:hover .icon { color: #d98a7a; }

@media (max-width: 640px) {
  .app .notif { width: min(340px, calc(100vw - 32px)); }
}

/* ---- Voice Character picker (Create Video) ------------------------------
   Pill-style gender toggle + voice chips, matching the reference: solid gold
   fill on the selected chip, plain outline pills otherwise. */

.voicegender {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 12px;
}
.voicegender__btn {
  height: 26px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.voicegender__btn:hover { border-color: rgba(201, 160, 99, 0.4); color: var(--white); }
.voicegender__btn.is-on {
  border-color: transparent;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
}

.voicechips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.voicechips[hidden] { display: none; }
.voicechip {
  height: 27px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.voicechip:hover { border-color: rgba(201, 160, 99, 0.4); transform: translateY(-1px); }
.voicechip.is-on {
  border-color: transparent;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-weight: 600;
}

/* ---- Invoice request (My Credits) --------------------------------------
   Sits under the credit history: purchases are logged there, but a formal
   tax invoice is issued by hand, so the card says how to get one. */
.invcard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  padding: 20px 22px;
}
.invcard__i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(201, 160, 99, 0.28);
  background: rgba(201, 160, 99, 0.1);
  color: var(--gold-bright);
}
.invcard__i .icon { width: 18px; }

.invcard__x { flex: 1; min-width: 0; }
.invcard__x h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}
.invcard__x p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  max-width: 62ch;
}
.invcard__meta {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.32) !important;
}

.invcard__cta { flex-shrink: 0; align-self: center; }
.invcard__cta .icon { width: 14px; }

@media (max-width: 720px) {
  .invcard { flex-wrap: wrap; }
  .invcard__cta { align-self: stretch; width: 100%; }
}

/* ---- Settings: profile edit + delete confirmation ---------------------- */

.profedit { display: grid; gap: 14px; padding: 4px 0 2px; }
.profedit[hidden] { display: none; }
.profedit__f { display: grid; gap: 7px; }
.profedit__f > span {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.profedit__f input {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  outline: none;
  transition: border-color var(--hover) var(--ease), box-shadow var(--hover) var(--ease);
}
.profedit__f input:focus {
  border-color: rgba(201, 160, 99, 0.55);
  box-shadow: 0 0 0 3px rgba(201, 160, 99, 0.12);
}
.profedit__act { display: flex; gap: 10px; margin-top: 2px; }
.profedit__act .icon { width: 14px; }

/* -- delete confirmation -- */
.delmodal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.delmodal[hidden] { display: none; }
.delmodal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 2, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.delmodal__card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(200, 70, 60, 0.28);
  background: linear-gradient(165deg, #1a1210, #0c0908 70%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  animation: popIn 180ms var(--ease) both;
  text-align: center;
}
.delmodal__i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(200, 70, 60, 0.35);
  background: rgba(200, 70, 60, 0.12);
  color: #e08a7c;
}
.delmodal__i .icon { width: 20px; }
.delmodal__card h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  color: var(--cream);
}
.delmodal__card p {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}
.delmodal__f { display: grid; gap: 8px; margin-top: 20px; text-align: left; }
.delmodal__f > span { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.delmodal__f b { color: var(--white); font-weight: 600; letter-spacing: 0.06em; }
.delmodal__f input {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  outline: none;
}
.delmodal__f input:focus { border-color: rgba(200, 70, 60, 0.55); }
.delmodal__act { display: flex; gap: 10px; margin-top: 20px; }
.delmodal__act > * { flex: 1; justify-content: center; }
/* Disabled until the word is typed — the gate is the point of the dialog. */
.delmodal__act .btn-danger:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* `display: flex` on the row beats the hidden attribute, so the read state
   would sit above the edit form instead of being replaced by it. */
.profrow[hidden] { display: none; }