/* ==========================================================================
   ghostline.css — targeted overrides applied last
   Re-tunes key components (buttons, sidebar, chat-bubbles, dialog rows,
   auth card, top bar) to match the ghostline hacker-terminal aesthetic
   without rewriting components.css.
   ========================================================================== */

/* ——— Primary button: section-accent gradient with inner highlight ——— */
.btn--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #04120B;
  border-color: transparent;
  font-weight: var(--fw-semibold);
  box-shadow:
    0 4px 16px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transition: transform .35s var(--ease-gl), box-shadow .35s ease, filter .2s ease;
  will-change: transform;
}
.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-deep), var(--accent));
  color: #04120B;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow:
    0 8px 24px var(--accent-glow),
    0 0 0 4px rgba(167, 240, 208, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
  filter: brightness(1.05);
}

.btn {
  font-family: var(--font-ui);
  letter-spacing: 0.01em;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gl-rule);
  color: var(--gl-dim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gl-ink);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 3px rgba(167, 240, 208, 0.06);
}

.btn--danger {
  background: rgba(255, 177, 193, 0.10);
  color: var(--gl-manual);
  border-color: rgba(255, 177, 193, 0.35);
}
.btn--danger:hover:not(:disabled) {
  background: rgba(255, 177, 193, 0.18);
  border-color: var(--gl-manual);
  box-shadow: 0 0 18px var(--gl-manual-glow);
}

/* ——— Sidebar: transparent rail with phosphor active state ——— */
.sidebar {
  background: linear-gradient(180deg, rgba(4, 8, 7, 0.55), transparent 40%);
  border-right: 1px solid var(--gl-rule);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sidebar__item {
  color: var(--gl-dim);
  transition: color .25s ease, background .25s ease;
  position: relative;
  overflow: hidden;
}
.sidebar__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(167, 240, 208, 0.08), transparent);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-gl);
  pointer-events: none;
}
.sidebar__item:hover::after { transform: translateX(100%); }
.sidebar__item:hover {
  color: var(--gl-ink);
  background: rgba(74, 191, 140, 0.06);
}
.sidebar__item--active {
  color: var(--gl-phos);
  background: rgba(74, 191, 140, 0.12);
  box-shadow: inset 2px 0 0 var(--gl-phos), inset 0 0 24px rgba(74, 191, 140, 0.06);
}
.sidebar__item--active svg {
  filter: drop-shadow(0 0 6px var(--gl-phos-glow));
}

/* ——— Chat bubbles: liquid-glass inbound, violet-glass operator ——— */
.chat-bubble {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.chat-bubble--inbound .chat-bubble__body,
.chat-bubble--user .chat-bubble__body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 40%, rgba(0, 0, 0, 0.08)),
    radial-gradient(120% 80% at 0% 0%, rgba(180, 255, 220, 0.05), transparent 55%),
    var(--gl-bg-user);
  border: 1px solid var(--gl-rule);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 5px 5px 5px 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
  color: var(--gl-ink);
}

.chat-bubble--outbound .chat-bubble__body,
.chat-bubble--operator .chat-bubble__body {
  background: linear-gradient(180deg, var(--gl-bg-op), color-mix(in srgb, var(--gl-bg-op) 92%, black));
  border: 1px solid var(--gl-bd-op);
  border-radius: 5px 5px 2px 5px;
  color: #F3E4FB;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30), 0 0 20px rgba(62, 42, 85, 0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-bubble__time,
.chat-bubble__meta {
  color: var(--gl-low);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.chat-bubble__check,
.chat-bubble__status--read {
  color: var(--gl-phos);
  text-shadow: 0 0 6px var(--gl-phos-glow);
}

/* ——— Dialog row (list item) ——— */
.dialog-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background .25s ease, padding .25s ease;
  position: relative;
  overflow: hidden;
}
.dialog-row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(167, 240, 208, 0.05), transparent);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-gl);
  pointer-events: none;
}
.dialog-row:hover::after { transform: translateX(100%); }
.dialog-row:hover { background: rgba(74, 191, 140, 0.04); }

.dialog-row.is-selected,
.dialog-row[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(74, 191, 140, 0.10), rgba(74, 191, 140, 0.02) 60%, transparent);
  border-left: 2px solid var(--gl-phos);
  box-shadow: inset 0 0 24px rgba(74, 191, 140, 0.04);
}

.dialog-row--manual {
  background: linear-gradient(90deg, rgba(255, 177, 193, 0.06), transparent);
  border-left: 2px solid var(--gl-manual);
}

/* ——— Auth / login card ——— */
.auth-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    rgba(14, 25, 21, 0.78);
  border: 1px solid var(--gl-rule);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(167, 240, 208, 0.08);
}

.auth-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--gl-ink);
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.auth-card__title::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: var(--gl-phos);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='4' y='4' width='92' height='92' fill='none' stroke='black' stroke-width='6'/><rect x='22' y='22' width='56' height='10' fill='black'/><rect x='22' y='22' width='10' height='56' fill='black'/><rect x='22' y='68' width='56' height='10' fill='black'/><rect x='68' y='50' width='10' height='28' fill='black'/><rect x='48' y='50' width='30' height='10' fill='black'/><rect x='80' y='80' width='8' height='8' fill='black'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='4' y='4' width='92' height='92' fill='none' stroke='black' stroke-width='6'/><rect x='22' y='22' width='56' height='10' fill='black'/><rect x='22' y='22' width='10' height='56' fill='black'/><rect x='22' y='68' width='56' height='10' fill='black'/><rect x='68' y='50' width='10' height='28' fill='black'/><rect x='48' y='50' width='30' height='10' fill='black'/><rect x='80' y='80' width='8' height='8' fill='black'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--gl-phos-glow));
  animation: gl-breathe 4.5s ease-in-out infinite;
}
.auth-card__title::after {
  content: '_';
  color: var(--gl-phos);
  text-shadow: 0 0 6px var(--gl-phos-glow);
  animation: gl-caret 1.06s steps(1) infinite;
  font-weight: var(--fw-regular);
  margin-left: 2px;
}

/* ——— Header operator menu + avatar ——— */
.app-header__avatar {
  background: linear-gradient(135deg, rgba(74, 191, 140, 0.35), rgba(62, 42, 85, 0.60));
  color: var(--gl-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.app-header__operator {
  color: var(--gl-dim);
}
.app-header__operator:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--gl-ink);
}

/* ——— Bundle switcher ——— */
.bundle-switcher__current {
  border: 1px solid var(--gl-rule);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  transition: border-color .2s ease, box-shadow .25s ease;
}
.bundle-switcher__current:hover {
  border-color: rgba(167, 240, 208, 0.25);
  box-shadow: 0 0 0 3px rgba(167, 240, 208, 0.06);
}

/* ——— Top tabs ——— */
.top-tabs__item,
.bundle-tabs__item {
  transition: color .2s ease, border-color .25s ease;
}
.top-tabs__item--active,
.bundle-tabs__item--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

/* ——— Toast ——— */
.toast {
  background: rgba(14, 25, 21, 0.88);
  border: 1px solid var(--gl-rule);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(167, 240, 208, 0.06);
}
.toast--success .toast__icon { color: var(--gl-phos); text-shadow: 0 0 6px var(--gl-phos-glow); }
.toast--error   .toast__icon { color: var(--gl-manual); text-shadow: 0 0 6px var(--gl-manual-glow); }

/* ——— Inputs / textarea ——— */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
select,
.field__input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--gl-ink);
  border-radius: var(--radius-sm);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover,
.field__input:hover {
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.field__input:focus,
.field__input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
  background: rgba(74, 191, 140, 0.04);
}

input::placeholder,
textarea::placeholder {
  color: var(--gl-low);
  opacity: 1;
}

.field__label {
  color: var(--gl-low);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-xs);
}

/* ——— Badges / chips ——— */
.chip, .badge, .tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-ui);
}

/* ——— Status pills phosphor accent ——— */
.status-pill--active,
.status-pill--online,
.dot-online {
  color: var(--gl-phos);
  background: rgba(74, 191, 140, 0.14);
  box-shadow: 0 0 10px var(--gl-phos-glow);
}

/* ——— Horizontal rules subtle ——— */
hr {
  border: none;
  border-top: 1px solid var(--gl-rule);
}