/* ============================================================
   KRYPTARK UI — clean minimal design
   ============================================================ */

/* -----------------------------------------------------------
   GLOBAL RESET
   ----------------------------------------------------------- */
*, *::before, *::after {
    font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    color: #cdd1dc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

body {
    font-size: 13px !important;
    letter-spacing: 0.01em !important;
    color: #cdd1dc !important;
    background: #08090d !important;
    background-image: none !important;
}

.app {
    background: #08090d !important;
    background-image: none !important;
    flex-direction: column !important;
}

/* Full-width transparent logo bar */
.app-header {
    height: 56px !important;
    width: 100% !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 22px !important;
    flex-shrink: 0 !important;
    z-index: 20 !important;
    position: relative !important;
}

.app-logo {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #00ffff !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Row container below header */
.app-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* Keep .hidden working */
.hidden { display: none !important; }

/* Allow streaming animation */
.streaming-dots span {
    animation: streamingDot 1.2s infinite !important;
}
@keyframes streamingDot { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

/* -----------------------------------------------------------
   SIDEBAR — 52px icon rail
   ----------------------------------------------------------- */
.sidebar {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    background: #08090d !important;
    border-right: 1px solid transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    transition: border-right-color 0.2s !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    height: 100% !important;
}

.sidebar.contacts-open {
    border-right-color: rgba(0,255,255,0.55) !important;
    border-bottom: 1px solid rgba(0,255,255,0.55) !important;
}

.sidebar-header {
    display: none !important;
}

.header-actions { display: none !important; }

/* Ghost zone — all hidden */
.ghost-zone { display: none !important; }
.badge-bottom-row { display: none !important; }
.search-box { display: none !important; }
.new-chat-btn { display: none !important; }

/* Nav icons */
.sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin-top: 4px !important;
}

.nav-icon {
    position: relative !important;
    width: 100% !important;
    height: 50px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: rgba(205,209,220,0.38) !important;
    transition: color 0.15s !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nav-icon:hover {
    color: #cdd1dc !important;
    background: rgba(255,255,255,0.04) !important;
}

.nav-icon.active {
    color: #00ffff !important;
}

.nav-icon.nav-icon-x1ns {
    color: rgba(0,255,255,0.3) !important;
    margin-top: 4px !important;
}

.nav-icon.nav-icon-x1ns:hover {
    color: rgba(0,255,255,0.8) !important;
}

.nav-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* Hover tooltip label */
.nav-label {
    display: none !important;
    position: absolute !important;
    left: calc(100% + 6px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #111318 !important;
    color: #cdd1dc !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 9px !important;
    white-space: nowrap !important;
    z-index: 200 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    pointer-events: none !important;
}

.nav-icon:hover .nav-label {
    display: block !important;
}

/* Old injected sidebar buttons — hidden */
.vault-sidebar-btn,
.starred-sidebar-btn,
.contacts-section-label {
    display: none !important;
}

/* -----------------------------------------------------------
   ICON-RAIL SIDEBAR — matches the chat area's tone (#08090d), not its own darker
   shade (reverted 2026-07-25 per feedback — only the contacts panel should read as a
   visually distinct layer; the icon rail is meant to feel like part of the same surface
   as the chat area, just with the nav icons on it).
   ----------------------------------------------------------- */
.sidebar {
    background: #08090d !important;
}
.sidebar-header {
    background: #08090d !important;
}

/* -----------------------------------------------------------
   CONTACTS PANEL — the one panel that should read as visually distinct (a faint
   diagonal hairline texture + a slightly lighter/bluer tone than the chat area).
   ----------------------------------------------------------- */
.contacts-panel {
    width: 240px !important;
    min-width: 240px !important;
    background:
        repeating-linear-gradient(135deg, rgba(0,255,255,0.022) 0px, rgba(0,255,255,0.022) 1px, transparent 1px, transparent 4px),
        radial-gradient(ellipse at top, rgba(0,255,255,0.045), transparent 55%),
        #0b0d13 !important;
    border-top: 2px solid #00ffff !important;
    border-right: 1px solid rgba(0,255,255,0.28) !important;
    border-bottom: 1px solid rgba(0,255,255,0.28) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: width 0.22s ease, min-width 0.22s ease !important;
    height: 100% !important;
    z-index: 9 !important;
    flex-shrink: 0 !important;
}

.contacts-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: none !important;
}

.contacts-panel-search {
    padding: 10px 10px 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.13) !important;
    flex-shrink: 0 !important;
}

.contacts-panel-search input {
    width: 100% !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #cdd1dc !important;
    font-size: 12px !important;
    padding: 6px 9px !important;
    outline: none !important;
}

.contacts-panel-search input:focus {
    border-color: rgba(0,255,255,0.4) !important;
}

.contacts-panel-search input::placeholder {
    color: rgba(205,209,220,0.35) !important;
}

.add-contact-btn {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(0,255,255,0.7) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    flex-shrink: 0 !important;
}

.add-contact-btn:hover {
    background: rgba(0,255,255,0.05) !important;
    color: #00ffff !important;
}

/* The invite-count pill's inline color:#000 was being overridden by the global wildcard
   reset (color: #cdd1dc !important on *) above — near-invisible light-grey text on a
   bright cyan background. Needs its own !important, specific selector to win. */
#groupInvitesCount { color: #000 !important; }

.contacts-list {
    flex: 1 !important;
    overflow-y: auto !important;
}

/* X1NS button in contacts panel — always hidden (use sidebar nav icon instead) */
.x1ns-panel-btn { display: none !important; }

/* Contact items */
.contact-item {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    border-left: 2px solid transparent !important;
    padding: 8px 10px !important;
    gap: 10px !important;
}

.contact-item:hover { background: rgba(255,255,255,0.04) !important; }

.contact-item.active {
    background: rgba(0,255,255,0.06) !important;
    border-left-color: rgba(0,255,255,0.6) !important;
}

.contact-avatar {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(205,209,220,0.75) !important;
    font-size: 11px !important;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.contact-info {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.contact-name {
    color: #d2d6e2 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.contact-preview { display: none !important; }
.contact-time    { display: none !important; }

/* Contact meta — flex column, right-aligned */
.contact-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 12px !important;
}

/* Unread indicator — solid cyan square, no count text */
.contact-unread {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #00ffff !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* -----------------------------------------------------------
   CHAT AREA
   ----------------------------------------------------------- */
.chat-area {
    flex: 1 !important;
    background: #08090d !important;
    background-image: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

/* Remove center line */
.chat-view::before { display: none !important; }

.chat-header,
.messages-container,
.input-area,
.file-preview-bar,
.upload-progress,
#selectionBar {
    position: relative !important;
    z-index: 1 !important;
}

/* -----------------------------------------------------------
   CHAT TOPBAR — removed (wallet moved to app-header)
   ----------------------------------------------------------- */
.chat-topbar { display: none !important; }

/* Wallet chip area — right side of app-header */
.wallet-chip-area {
    position: relative !important;
    margin-left: auto !important;
}

.wallet-badge {
    display: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: rgba(205,209,220,0.85) !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.wallet-badge.visible {
    display: flex !important;
}

.wallet-badge:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(0,255,255,0.3) !important;
}

/* Live status square — shows when wallet connected */
.live-indicator {
    display: none !important;
    width: 7px !important;
    height: 7px !important;
    background: #00ffff !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important;
}

.wallet-badge.visible .live-indicator {
    display: block !important;
}

.wallet-badge-address {
    color: rgba(0,255,255,0.8) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Real, visible avatar circle in the compact wallet badge — .wallet-badge-avatar (below)
   is a ghost element permanently hidden inside a display:none wrapper; this is the actual
   place a user can see their own profile picture reflected anywhere in the app. */
.wallet-badge-pic {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}
.wallet-badge-pic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.wallet-badge-avatar,
.wallet-badge-label,
.wallet-badge-stealth,
.wallet-badge-info,
.wallet-badge-copy,
.wallet-badge-qr,
.wallet-badge-actions {
    display: none !important;
}

/* Wallet dropdown */
.wallet-dropdown {
    position: absolute !important;
    top: calc(100% + 3px) !important;
    right: 0 !important;
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    min-width: 135px !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
}

.wallet-dropdown.hidden { display: none !important; }

.drop-item {
    padding: 8px 13px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #cdd1dc !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    letter-spacing: 0.02em !important;
}

.drop-item:last-child { border-bottom: none !important; }
.drop-item:hover { background: rgba(255,255,255,0.07) !important; color: #e0e4ee !important; }
.drop-danger { color: rgba(255,80,110,0.75) !important; }
.drop-danger:hover { color: #ff5070 !important; background: rgba(255,68,102,0.08) !important; }

/* -----------------------------------------------------------
   CHAT HEADER — hidden (kept in DOM for JS)
   ----------------------------------------------------------- */
.chat-header { display: none !important; }

/* -----------------------------------------------------------
   NO CHAT PLACEHOLDER
   ----------------------------------------------------------- */
.no-chat { background: transparent !important; }

.no-chat p {
    color: rgba(205,209,220,0.55) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

.no-chat svg { color: rgba(255,255,255,0.1) !important; opacity: 1 !important; }

/* -----------------------------------------------------------
   MESSAGES — traditional layout
   ----------------------------------------------------------- */
.messages-container {
    max-width: 820px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 16px 24px 16px !important;
}

.message.sent {
    align-self: flex-end !important;
    margin-left: 15% !important;
    margin-right: 0 !important;
    max-width: 72% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform-origin: right center !important;
    padding: 0 0 20px 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.message.sent .message-body {
    background: #00b4b4 !important;
    padding: 8px 14px !important;
}

/* Dark text on teal bubble */
.message.sent .message-content {
    color: #001818 !important;
}

/* Timestamp below bubble — right-aligned */
.message.sent .message-meta {
    position: absolute !important;
    bottom: 2px !important;
    right: 0 !important;
    white-space: nowrap !important;
    background: transparent !important;
    padding: 0 !important;
    align-self: auto !important;
}

.message.sent .message-time {
    color: rgba(205,209,220,0.55) !important;
    font-size: 10px !important;
}

.message.sent .message-status svg { color: rgba(205,209,220,0.4) !important; }
.message.sent.read .message-status svg { color: rgba(205,209,220,0.65) !important; }

.message.received {
    align-self: flex-start !important;
    margin-right: 15% !important;
    margin-left: 0 !important;
    max-width: 72% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform-origin: left center !important;
    padding: 0 0 20px 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.message.received .message-body {
    background: rgba(255,255,255,0.07) !important;
    padding: 8px 14px !important;
}

.message.received .message-content { color: #cdd1dc !important; }

/* Timestamp below bubble — left-aligned */
.message.received .message-meta {
    position: absolute !important;
    bottom: 2px !important;
    left: 0 !important;
    white-space: nowrap !important;
    background: transparent !important;
    padding: 0 !important;
    align-self: auto !important;
}

.message.received .message-time,
.message-time {
    color: rgba(205,209,220,0.6) !important;
    font-size: 10px !important;
}

/* Payment bubbles: transparent bg on both message and body */
.message.payment-msg,
.message.sent.payment-msg,
.message.received.payment-msg {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.message.payment-msg .message-body,
.message.sent.payment-msg .message-body,
.message.received.payment-msg .message-body {
    background: transparent !important;
    padding: 0 !important;
}

.message.payment-msg .message-meta {
    position: static !important;
    display: none !important;
}

.message-content {
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

/* Date dividers — much more visible */
.message-date-divider span {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: rgba(205,209,220,0.7) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.07em !important;
    padding: 3px 10px !important;
}

/* Reply quote */
.reply-quote {
    border-left-color: rgba(0,255,255,0.4) !important;
    background: rgba(255,255,255,0.05) !important;
    color: rgba(205,209,220,0.6) !important;
    font-size: 11px !important;
}

/* Reactions */
.reaction-chip {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(205,209,220,0.8) !important;
    font-size: 11px !important;
}

.reaction-chip.mine {
    background: rgba(0,255,255,0.1) !important;
    border-color: rgba(0,255,255,0.3) !important;
}

/* -----------------------------------------------------------
   PINNED BANNER
   ----------------------------------------------------------- */
#pinnedBanner {
    background: rgba(8,9,13,0.95) !important;
    border-bottom: 1px solid rgba(0,255,255,0.18) !important;
    position: relative !important;
    z-index: 2 !important;
}

.pinned-label  { color: rgba(0,255,255,0.7) !important; font-size: 10px !important; font-weight: 500 !important; }
.pinned-icon   { color: rgba(0,255,255,0.6) !important; }
.pinned-text   { color: rgba(205,209,220,0.7) !important; font-size: 11px !important; }
#pinnedClose   { color: rgba(205,209,220,0.45) !important; }
.pinned-counter { color: rgba(205,209,220,0.5) !important; }

/* -----------------------------------------------------------
   INPUT AREA
   ----------------------------------------------------------- */
.input-area {
    background: #08090d !important;
    border-top: 1px solid transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
}

.input-wrapper {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    position: relative !important;
}

.textarea-wrap {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

/* Plus button — visually inside textarea left */
.plus-wrap {
    position: absolute !important;
    left: 6px !important;
    bottom: 6px !important;
    z-index: 3 !important;
}

.plus-btn {
    width: 26px !important;
    height: 26px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(205,209,220,0.38) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.plus-btn:hover { color: rgba(205,209,220,0.75) !important; }

/* Plus menu */
.plus-menu {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    min-width: 155px !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.55) !important;
}

.plus-menu.hidden { display: none !important; }

.plus-item {
    padding: 9px 13px !important;
    font-size: 12px !important;
    color: #cdd1dc !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 400 !important;
}

.plus-item:last-child { border-bottom: none !important; }
.plus-item:hover { background: rgba(255,255,255,0.07) !important; color: #e0e4ee !important; }
.plus-item svg { color: rgba(205,209,220,0.5) !important; flex-shrink: 0 !important; }

/* Old buttons: hidden but in DOM */
.attach-btn, .pay-btn { display: none !important; }

/* Textarea */
.input-area textarea {
    width: 100% !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #cdd1dc !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    min-height: 38px !important;
    padding: 10px 36px 10px 38px !important;
    resize: none !important;
    outline: none !important;
    line-height: 1.4 !important;
}

.input-area textarea:focus {
    border-color: rgba(255,255,255,0.22) !important;
    box-shadow: none !important;
}

.input-area textarea::placeholder {
    color: rgba(205,209,220,0.25) !important;
}

/* Emoji picker grid */
#emojiPicker {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    width: 296px !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 2px !important;
    padding: 8px !important;
    background: #0d1117 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    overflow: visible !important;
    z-index: 200 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}

#emojiPicker button {
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 4px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background 0.1s !important;
    text-align: center !important;
}

#emojiPicker button:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* In-chat message search — floats over the top of .messages-container,
   anchored by .chat-view's own position:relative (index.html base styles) */
.msg-search-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: linear-gradient(135deg, rgba(0,255,255,0.06), rgba(0,10,20,0.92)) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    border-bottom: 1px solid rgba(0,255,255,0.2) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
}
.msg-search-bar.hidden { display: none !important; }

.msg-search-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
}
.msg-search-input-row input {
    flex: 1 !important;
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}
.msg-search-input-row button {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.7) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
}
.msg-search-input-row button:hover { color: #fff !important; }

.msg-search-results { padding: 0 8px 8px !important; }
.msg-search-hit {
    padding: 8px 10px !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.msg-search-hit:hover { background: rgba(0,255,255,0.08) !important; }
.msg-search-snippet {
    font-size: 13px !important;
    color: rgba(255,255,255,0.9) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.msg-search-time {
    font-size: 11px !important;
    color: rgba(255,255,255,0.45) !important;
    margin-top: 2px !important;
}
.msg-search-empty {
    padding: 12px !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px !important;
    text-align: center !important;
}

.msg-search-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.7) !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.msg-search-btn:hover { color: #00ffff !important; }

/* Emoji button inside textarea right */
.emoji-btn {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(205,209,220,0.38) !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

.emoji-btn:hover { color: rgba(205,209,220,0.7) !important; }
.emoji-btn svg { width: 16px !important; height: 16px !important; }

/* Send button */
.send-btn {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    background: rgba(0,255,255,0.1) !important;
    border: 1px solid rgba(0,255,255,0.28) !important;
    color: rgba(0,255,255,0.8) !important;
    box-shadow: none !important;
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.send-btn svg { stroke: rgba(0,255,255,0.8) !important; }
.send-btn:hover { background: rgba(0,255,255,0.18) !important; }
.send-btn:disabled {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(205,209,220,0.18) !important;
}

/* -----------------------------------------------------------
   FILE PREVIEW + UPLOAD PROGRESS
   ----------------------------------------------------------- */
.file-preview-bar {
    background: rgba(8,9,13,0.95) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}

.file-preview-name { color: #cdd1dc !important; font-size: 12px !important; }
.file-preview-size { color: rgba(205,209,220,0.5) !important; font-size: 10px !important; }
.file-preview-remove {
    background: rgba(255,68,102,0.1) !important;
    color: rgba(255,68,102,0.75) !important;
    border: none !important;
}

.upload-progress { background: #0a0c11 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; }
.upload-progress-bar { background: rgba(255,255,255,0.08) !important; }
.upload-progress-fill { background: rgba(0,255,255,0.45) !important; }
.upload-progress-text { color: rgba(0,255,255,0.6) !important; font-size: 11px !important; }

/* -----------------------------------------------------------
   STATUS + TYPING
   ----------------------------------------------------------- */
.status-dot          { background: rgba(205,209,220,0.22) !important; }
.status-dot.online   { background: rgba(0,255,255,0.65) !important; }
.typing-status       { color: rgba(0,255,255,0.6) !important; }

/* -----------------------------------------------------------
   SELECTION BAR
   ----------------------------------------------------------- */
#selectionBar { background: #0c0e14 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; }
.selection-count   { color: rgba(205,209,220,0.6) !important; font-size: 12px !important; }
.sel-cancel-btn    { background: transparent !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(205,209,220,0.55) !important; font-size: 11px !important; }
.selection-delete-btn { background: rgba(255,68,102,0.1) !important; color: rgba(255,68,102,0.85) !important; border: 1px solid rgba(255,68,102,0.25) !important; font-size: 11px !important; }
.sel-forward-btn   { background: transparent !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(205,209,220,0.55) !important; font-size: 11px !important; }

/* -----------------------------------------------------------
   CONNECT OVERLAY
   ----------------------------------------------------------- */
.connect-overlay {
    background: rgba(8,9,13,0.98) !important;
    background-image: none !important;
}

.connect-card {
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: none !important;
}

.connect-card h2 {
    font-size: 17px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #00ffff !important;
    font-weight: 700 !important;
}

.connect-card p { color: rgba(205,209,220,0.65) !important; font-size: 12px !important; }

.connect-btn {
    background: rgba(0,255,255,0.1) !important;
    border: 1px solid rgba(0,255,255,0.38) !important;
    color: #00ffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.connect-btn:hover { background: rgba(0,255,255,0.18) !important; }

/* Primary CTA — solid fill, distinct from the secondary/tertiary options below it.
   ID specificity beats .connect-btn (and .connect-btn:hover) so this wins in every state,
   including while relabeled "Retry" after a failed connect attempt (same element/class). */
#connectBtn {
    background: linear-gradient(135deg,#00ffff,#00cccc) !important;
    border: none !important;
    color: #000 !important;
}
#connectBtn:hover { filter: brightness(1.08) !important; }

.connected-wallet-badge {
    background: rgba(0,255,255,0.07) !important;
    border: 1px solid rgba(0,255,255,0.25) !important;
    color: rgba(0,255,255,0.85) !important;
    font-size: 12px !important;
}

.connected-dot {
    background: rgba(0,255,255,0.65) !important;
    box-shadow: none !important;
}

/* Relay setting */
.relay-setting label { color: rgba(205,209,220,0.55) !important; font-size: 10px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }
.relay-setting input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #cdd1dc !important; font-size: 11px !important; }
.relay-setting input:focus { border-color: rgba(0,255,255,0.28) !important; }
.relay-setting input::placeholder { color: rgba(205,209,220,0.25) !important; }
.relay-changed-notice { color: rgba(0,255,255,0.65) !important; font-size: 11px !important; }
#relaySuggestions { background: #111318 !important; border: 1px solid rgba(255,255,255,0.18) !important; }

/* -----------------------------------------------------------
   MODALS
   ----------------------------------------------------------- */
/* Modal open/close — was an instant display:none/flex snap with zero transition anywhere
   in the app. Keep display:flex always and animate opacity + a subtle scale/rise on
   .modal instead, since `display` itself can't be transitioned. pointer-events:none while
   hidden so an invisible-but-still-`display:flex` overlay can't eat clicks behind it. */
.modal-overlay {
    background: rgba(8,9,13,0.86) !important;
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease !important;
}
.modal-overlay:not(.hidden) {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.modal-overlay .modal {
    transform: scale(0.94) translateY(10px) !important;
    transition: transform 0.18s cubic-bezier(0.2,0.9,0.3,1.2) !important;
}
.modal-overlay:not(.hidden) .modal {
    transform: scale(1) translateY(0) !important;
}

.modal {
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: none !important;
}

/* Payment recipient address — prevent overflow */
#paymentRecipient {
    font-size: 10px !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
}

.modal h3 {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #cdd1dc !important;
    font-weight: 600 !important;
}

/* Profile pictures: clip the <img> to the existing avatar shapes. */
.contact-avatar { overflow: hidden !important; }
.wallet-badge-avatar { overflow: hidden !important; }
.gm-avatar { overflow: hidden !important; }

/* Small 🤖 badge on the avatar of a contact that's an agent you created/manage. */
.contact-avatar { position: relative !important; }
.agent-badge {
    position: absolute !important;
    bottom: -3px !important;
    right: -3px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    background: #000 !important;
    border: 1px solid rgba(0,255,255,0.5) !important;
    border-radius: 50% !important;
    width: 15px !important;
    height: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Agent modals hold a lot more content (settings, wallet, permissions, policy,
   ledger, memory, seed) than a typical form modal — give them real room on
   desktop instead of the generic 360-540px form-modal width. */
@media (min-width: 900px) {
    #agentManageModal .modal { max-width: 880px !important; width: 82vw !important; }
    #agentsModal .modal { max-width: 560px !important; }
}

.modal input {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #cdd1dc !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

.modal input::placeholder { color: rgba(205,209,220,0.3) !important; }
.modal input:focus { border-color: rgba(0,255,255,0.32) !important; box-shadow: none !important; }

.modal-actions button, .group-invite-actions button { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; box-shadow: none !important; }

/* .group-invite-actions included here — per-invite Accept/Decline buttons live inside
   invite cards, not .modal-actions, but must look identical to every other modal button.
   Plain ".modal .confirm-btn" also included — the "+ Add member" button in the Group
   Members modal is a direct child of .modal, not .modal-actions, and fell back to the
   browser's default white button styling without this. */
.modal-actions .confirm-btn, .group-invite-actions .confirm-btn, .modal .confirm-btn {
    background: rgba(0,255,255,0.09) !important;
    border: 1px solid rgba(0,255,255,0.28) !important;
    color: rgba(0,255,255,0.88) !important;
}
.modal-actions .confirm-btn:hover, .group-invite-actions .confirm-btn:hover, .modal .confirm-btn:hover { background: rgba(0,255,255,0.16) !important; }
.modal-actions .confirm-btn:disabled, .group-invite-actions .confirm-btn:disabled, .modal .confirm-btn:disabled { opacity: 0.4 !important; }

.modal-actions .cancel-btn, .group-invite-actions .cancel-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(205,209,220,0.6) !important;
}
.modal-actions .cancel-btn:hover, .group-invite-actions .cancel-btn:hover { background: rgba(255,255,255,0.05) !important; color: #cdd1dc !important; }

.delete-option { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #cdd1dc !important; }
.delete-option:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.22) !important; }
.delete-option.danger { border-color: rgba(255,68,102,0.28) !important; }
.delete-option.danger:hover { background: rgba(255,68,102,0.07) !important; border-color: rgba(255,68,102,0.42) !important; }
.delete-option-title { color: #cdd1dc !important; font-size: 12px !important; font-weight: 500 !important; }
.delete-option-title.danger { color: rgba(255,80,110,0.85) !important; }
.delete-option-desc { color: rgba(205,209,220,0.5) !important; font-size: 11px !important; }

/* -----------------------------------------------------------
   VAULT PANEL
   ----------------------------------------------------------- */
.vault-overlay { background: rgba(8,9,13,0.78) !important; }

.vault-panel {
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: none !important;
}

.vault-header { border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.vault-header span { color: #cdd1dc !important; font-size: 13px !important; font-weight: 600 !important; }

.vault-close-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(205,209,220,0.6) !important;
}
.vault-close-btn:hover { background: rgba(255,255,255,0.1) !important; color: #cdd1dc !important; }

.vault-empty { color: rgba(205,209,220,0.42) !important; font-size: 12px !important; }

.vault-file-item { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.14) !important; }
.vault-file-item:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; }
.vault-file-icon { background: rgba(0,255,255,0.07) !important; color: rgba(0,255,255,0.6) !important; }
.vault-file-name { color: #cdd1dc !important; font-size: 12px !important; }
.vault-file-meta { color: rgba(205,209,220,0.45) !important; font-size: 10px !important; }

.vault-action-btn { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(205,209,220,0.6) !important; }
.vault-action-btn:hover { background: rgba(255,255,255,0.09) !important; color: #cdd1dc !important; }

.vault-footer { border-top: 1px solid rgba(255,255,255,0.12) !important; }
.vault-footer-note { color: rgba(205,209,220,0.35) !important; font-size: 10px !important; }

.vault-upload-btn {
    background: rgba(0,255,255,0.09) !important;
    border: 1px solid rgba(0,255,255,0.3) !important;
    color: rgba(0,255,255,0.82) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.vault-upload-btn:hover { background: rgba(0,255,255,0.16) !important; }

.vault-progress {
    color: rgba(0,255,255,0.7) !important;
    background: rgba(0,255,255,0.06) !important;
    border: 1px solid rgba(0,255,255,0.2) !important;
    font-size: 11px !important;
}

/* -----------------------------------------------------------
   WEB LAUNCHER — clearer drop zone
   ----------------------------------------------------------- */
.wl-drop-zone {
    background: rgba(255,255,255,0.05) !important;
    border: 1.5px dashed rgba(255,255,255,0.28) !important;
    color: rgba(205,209,220,0.7) !important;
    padding: 28px 20px 22px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: border-color 0.15s, background 0.15s !important;
}

.wl-drop-zone.wl-drop-hover,
.wl-drop-zone:hover {
    border-color: rgba(0,255,255,0.55) !important;
    background: rgba(0,255,255,0.04) !important;
}

.wl-select-btn {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #cdd1dc !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    cursor: pointer !important;
}

.wl-select-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(0,255,255,0.35) !important;
    color: #e0e4ee !important;
}

.wl-clear-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(205,209,220,0.55) !important;
    font-size: 11px !important;
    cursor: pointer !important;
}

.wl-clear-btn:hover { background: rgba(255,255,255,0.06) !important; color: #cdd1dc !important; }

/* Domain input — make it prominent */
#wlDomainInput {
    background: rgba(0,255,255,0.05) !important;
    border: 1px solid rgba(0,255,255,0.28) !important;
    color: #cdd1dc !important;
    font-size: 12px !important;
}

#wlDomainInput:focus { border-color: rgba(0,255,255,0.5) !important; }
#wlDomainInput::placeholder { color: rgba(0,255,255,0.3) !important; }

.wl-file-row { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.wl-file-path { color: rgba(205,209,220,0.8) !important; font-size: 11px !important; }
.wl-file-size { color: rgba(205,209,220,0.45) !important; font-size: 10px !important; }
.wl-file-remove { color: rgba(255,68,102,0.65) !important; background: transparent !important; border: none !important; cursor: pointer !important; }
.wl-warn { color: rgba(255,180,0,0.75) !important; font-size: 11px !important; }
.wl-empty { color: rgba(205,209,220,0.38) !important; font-size: 12px !important; }
.wl-root-candidate {
    color: #00ffff !important;
    font-size: 11px !important;
    font-family: monospace !important;
    cursor: pointer !important;
    padding: 3px 0 !important;
}
.wl-root-candidate:hover { text-decoration: underline !important; }
.wl-root-candidate-inline {
    color: #00ffff !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}

.wl-sites-label { font-size: 11px !important; color: rgba(255,255,255,0.5) !important; margin-bottom: 5px !important; }
.wl-site-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.wl-site-link { color: #00ffff !important; font-size: 12px !important; font-family: monospace !important; text-decoration: none !important; }
.wl-site-link:hover { text-decoration: underline !important; }
.wl-site-date { color: rgba(205,209,220,0.4) !important; font-size: 10px !important; }

.wl-log { background: rgba(0,0,0,0.4) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(205,209,220,0.7) !important; font-size: 11px !important; }

/* -----------------------------------------------------------
   CONTEXT MENU
   ----------------------------------------------------------- */
.ctx-menu {
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.65) !important;
}

.ctx-emoji-row { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.ctx-sep { background: rgba(255,255,255,0.1) !important; }

.ctx-item { font-size: 12px !important; color: #cdd1dc !important; font-weight: 400 !important; }
.ctx-item:hover { background: rgba(255,255,255,0.07) !important; color: #e0e4ee !important; }
.ctx-danger { color: rgba(255,80,110,0.8) !important; }
.ctx-danger:hover { background: rgba(255,68,102,0.08) !important; color: #ff5070 !important; }

/* -----------------------------------------------------------
   TOAST
   ----------------------------------------------------------- */
.toast {
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    font-size: 12px !important;
    color: #cdd1dc !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important;
}
.toast.success { border-color: rgba(0,210,100,0.35) !important; background: rgba(0,210,100,0.07) !important; color: rgba(80,220,145,0.95) !important; }
.toast.error   { border-color: rgba(255,68,102,0.38) !important; background: rgba(255,68,102,0.07) !important; color: rgba(255,120,140,0.95) !important; }
.toast.info    { border-color: rgba(0,255,255,0.28) !important; background: rgba(0,255,255,0.06) !important; color: rgba(0,210,225,0.9) !important; }

/* -----------------------------------------------------------
   TOOLTIP — disabled
   ----------------------------------------------------------- */
.xchat-tooltip-popup { display: none !important; }
[data-tooltip]::after { display: none !important; }

/* -----------------------------------------------------------
   QR PANEL
   ----------------------------------------------------------- */
#walletQrPanel {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(8,9,13,0.9) !important;
}

#walletQrPanel.open { display: flex !important; }

#walletQrPanel .qr-card {
    background: #111318 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 24px !important;
    text-align: center !important;
    width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

#walletQrPanel .qr-heading { color: rgba(205,209,220,0.65) !important; font-size: 10px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; }
#walletQrPanel canvas { border: 1px solid rgba(255,255,255,0.18) !important; }
#walletQrPanel .qr-id-text { font-size: 10px !important; color: rgba(205,209,220,0.7) !important; word-break: break-all !important; border: 1px solid rgba(255,255,255,0.15) !important; width: 100% !important; padding: 7px 8px !important; cursor: pointer !important; }
#walletQrPanel .qr-note { font-size: 10px !important; color: rgba(205,209,220,0.35) !important; }
#walletQrPanel .qr-btn { background: transparent !important; border: 1px solid rgba(0,255,255,0.32) !important; color: rgba(0,255,255,0.8) !important; padding: 7px 16px !important; cursor: pointer !important; font-size: 11px !important; }
#walletQrPanel .qr-btn-close { border-color: rgba(255,255,255,0.18) !important; color: rgba(205,209,220,0.5) !important; }

/* -----------------------------------------------------------
   IPFS FILE CARD
   ----------------------------------------------------------- */
.ipfs-file-card {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    box-shadow: none !important;
}

.ipfs-file-name   { color: #cdd1dc !important; font-size: 12px !important; }
.ipfs-file-detail { color: rgba(205,209,220,0.45) !important; font-size: 10px !important; }
.ipfs-cid { color: rgba(0,210,220,0.65) !important; background: rgba(0,210,220,0.05) !important; border: none !important; border-top: 1px solid rgba(0,210,220,0.15) !important; font-size: 10px !important; }
.ipfs-download-btn { background: rgba(255,255,255,0.05) !important; border: none !important; border-top: 1px solid rgba(255,255,255,0.12) !important; color: rgba(0,210,220,0.7) !important; font-size: 11px !important; }
.ipfs-download-btn:hover:not(:disabled) { background: rgba(255,255,255,0.09) !important; }
.ipfs-inline-file { color: rgba(205,209,220,0.75) !important; }

/* Dark text for IPFS/file cards inside teal sent bubbles */
.message.sent .ipfs-file-name,
.message.sent .ipfs-file-detail,
.message.sent .ipfs-cid,
.message.sent .ipfs-download-btn,
.message.sent .ipfs-inline-file,
.message.sent .ipfs-inline-file * { color: #002a2a !important; }
.message.sent .ipfs-download-btn {
    background: rgba(0,40,40,0.1) !important;
    border-color: rgba(0,40,40,0.15) !important;
}
.message.sent .ipfs-download-btn:hover:not(:disabled) { background: rgba(0,40,40,0.2) !important; }

/* Claim to wallet button — dark text on teal gradient background */
button[onclick*="claimStealthPayment"] { color: #001818 !important; }

/* Pay XNT button — dark text on cyan gradient, matching Claim to wallet style */
button[onclick*="confirmPayment"] { color: #1a1a1a !important; }

/* Soft wallet onboarding buttons — override wildcard for inline-styled buttons */
#softWalletContinueBtn { color: #000 !important; font-weight: 600 !important; border-radius: 0 !important; }
#softWalletSetup button[onclick*="copySoftWalletSeed"],
#softWalletSetup button[onclick*="exportSoftWalletKey"] { border-radius: 0 !important; }
.connect-card > button:last-of-type { border-radius: 0 !important; }

/* -----------------------------------------------------------
   PQ BADGES — hidden
   ----------------------------------------------------------- */
.pq-badge { display: none !important; }

/* -----------------------------------------------------------
   PAYMENT CARDS
   ----------------------------------------------------------- */
.payment-card-glass,
.pay-card-wrap {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    box-shadow: none !important;
}

.payment-tabs { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.14) !important; }
.payment-tab { color: rgba(205,209,220,0.5) !important; font-size: 11px !important; }
.payment-tab.active { background: rgba(255,255,255,0.08) !important; color: #cdd1dc !important; }

/* -----------------------------------------------------------
   CALL OVERLAYS
   ----------------------------------------------------------- */
.call-overlay { background: rgba(8,9,13,0.97) !important; background-image: none !important; }
.call-overlay-name   { color: #cdd1dc !important; font-size: 16px !important; }
.call-overlay-type   { color: rgba(205,209,220,0.5) !important; font-size: 12px !important; }
.call-overlay-avatar { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: #cdd1dc !important; }
.call-overlay-notjoined {
    color: rgba(255,196,0,0.85) !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    text-align: center !important;
}
.call-decline-group-link {
    background: none !important;
    border: none !important;
    color: rgba(255,85,105,0.85) !important;
    font-size: 12px !important;
    margin-top: 14px !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    padding: 4px !important;
}
.call-decline-group-link:hover { color: rgba(255,85,105,1) !important; }
.call-answer-btn { background: rgba(0,180,90,0.2) !important; color: rgba(0,215,110,0.95) !important; border: 1px solid rgba(0,180,90,0.32) !important; }
.call-reject-btn, .call-end-btn { background: rgba(255,68,102,0.18) !important; color: rgba(255,85,105,0.95) !important; border: 1px solid rgba(255,68,102,0.32) !important; }
.call-ctrl-btn { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(205,209,220,0.75) !important; }
#callActiveBar { background: rgba(8,9,13,0.97) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
#callTimer { color: rgba(0,255,255,0.65) !important; font-size: 12px !important; }
#callActiveName { color: #cdd1dc !important; font-size: 13px !important; }

/* -----------------------------------------------------------
   LINKS + PREVIEWS
   ----------------------------------------------------------- */
a.msg-link { color: rgba(0,210,225,0.8) !important; text-decoration: underline; text-underline-offset: 2px; }
a.msg-link:hover { opacity: 0.8; }

.auto-link-preview {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------
   DECRYPT FAILED
   ----------------------------------------------------------- */
.decrypt-failed-placeholder { color: rgba(205,209,220,0.4) !important; }
.decrypt-dismiss-btn { background: transparent !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(205,209,220,0.5) !important; font-size: 10px !important; }

/* -----------------------------------------------------------
   AVATAR COLORS
   ----------------------------------------------------------- */
.avatar-1 { background: rgba(0,200,110,0.08) !important; color: rgba(0,200,110,0.7) !important; }
.avatar-2 { background: rgba(0,160,230,0.08) !important; color: rgba(0,160,230,0.7) !important; }
.avatar-3 { background: rgba(0,200,200,0.08) !important; color: rgba(0,200,200,0.7) !important; }
.avatar-4 { background: rgba(220,60,90,0.08) !important; color: rgba(220,60,90,0.7) !important; }
.avatar-5 { background: rgba(190,140,0,0.08) !important; color: rgba(190,140,0,0.7) !important; }
.avatar-6 { background: rgba(60,180,210,0.08) !important; color: rgba(60,180,210,0.7) !important; }
.avatar-group { background: rgba(0,255,255,0.1) !important; color: #00ffff !important; }

.message-sender {
    font-size: 11px !important;
    color: #00ffff !important;
    opacity: 0.75 !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.message-sender-avatar {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* -----------------------------------------------------------
   GROUP CHAT UI
   ----------------------------------------------------------- */

/* Pulsing cyan invite indicator — sidebar button glows + badge scales while any
   invite is pending. Specific selectors (not the global `*` reset) so `!important`
   here correctly wins over the global "animation: none !important" reset above. */
@keyframes inviteGlowPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,255,255,0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(0,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,255,255,0); }
}
@keyframes inviteBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.22); }
}
#groupInvitesBtn.has-invites {
    animation: inviteGlowPulse 1.8s ease-out infinite !important;
    border-color: rgba(0,255,255,0.5) !important;
}
#groupInvitesBtn.has-invites #groupInvitesCount {
    animation: inviteBadgePulse 1.8s ease-in-out infinite !important;
}

/* New Group modal — member checklist */
.group-member-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 8px !important;
    cursor: pointer;
    border-left: 2px solid transparent !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
.group-member-row:hover {
    background: rgba(0,255,255,0.06) !important;
    border-left-color: rgba(0,255,255,0.5) !important;
    transform: translateX(2px);
}
.group-member-row input[type="checkbox"] { accent-color: #00ffff; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.group-member-row .gm-avatar {
    width: 26px !important; height: 26px !important;
    background: rgba(0,255,255,0.1) !important;
    color: #00ffff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 10px !important; font-weight: 700 !important;
    flex-shrink: 0;
}
.group-member-row .gm-name { font-size: 13px !important; color: #cdd1dc !important; }

/* Group invite cards */
.group-invite-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-left: 3px solid rgba(0,255,255,0.45) !important;
    background: rgba(255,255,255,0.02) !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
.group-invite-card:hover {
    background: rgba(0,255,255,0.05) !important;
    border-left-color: #00ffff !important;
    transform: translateX(2px);
}
.group-invite-name { font-weight: 700 !important; color: #00ffff !important; font-size: 16px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.group-invite-meta { font-size: 13px !important; color: rgba(205,209,220,0.55) !important; margin: 6px 0 12px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.group-invite-meta .dot { width: 3px !important; height: 3px !important; border-radius: 50% !important; background: rgba(205,209,220,0.4) !important; display: inline-block !important; flex-shrink: 0; }
.group-invite-actions { display: flex !important; gap: 8px !important; }
.group-invite-actions button { flex: 1 !important; font-size: 13px !important; padding: 10px !important; }

/* Group Members modal (leave-group box) */
.group-member-list-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 4px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    transition: background 0.15s ease, padding-left 0.15s ease !important;
}
.group-member-list-row:last-child { border-bottom: none !important; }
.group-member-list-row:hover { background: rgba(0,255,255,0.04) !important; padding-left: 8px !important; }
.group-member-list-row .gm-avatar {
    width: 28px !important; height: 28px !important;
    background: rgba(0,255,255,0.1) !important;
    color: #00ffff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 10px !important; font-weight: 700 !important;
    flex-shrink: 0;
}
.group-member-list-row .gm-dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: rgba(0,255,255,0.6) !important; flex-shrink: 0; }
.group-member-list-row .gm-id {
    font-size: 12px !important;
    color: #cdd1dc !important;
    font-family: monospace !important;
    letter-spacing: 0.02em !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.group-member-list-row .gm-you-tag {
    font-size: 10px !important;
    color: #00ffff !important;
    background: rgba(0,255,255,0.1) !important;
    padding: 2px 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    flex-shrink: 0;
}

/* Leave Group button — warning-tinted hover */
#groupMembersLeaveBtn { transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important; }
#groupMembersLeaveBtn:hover {
    background: rgba(255,85,102,0.12) !important;
    box-shadow: 0 0 12px rgba(255,85,102,0.25) !important;
    transform: translateY(-1px);
}

/* -----------------------------------------------------------
   SCROLLBAR
   ----------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* -----------------------------------------------------------
   FAQ PANEL (xchat-faq.js — reuses vault-overlay/vault-panel shell)
   ----------------------------------------------------------- */
.faq-panel { max-width: 720px !important; width: 94vw !important; }
.faq-search { padding: 10px 16px 4px; }
.faq-search input {
    width: 100%;
    background: #000 !important;
    border: 1px solid rgba(0,255,255,0.25) !important;
    color: #fff !important;
    padding: 8px 10px;
    font-size: 13px;
}
.faq-section { padding: 6px 16px 2px; }
.faq-section-title {
    color: #00ffff !important;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 14px 0 6px;
}
.faq-item { border: 1px solid rgba(0,255,255,0.12); margin-bottom: 6px; background: rgba(0,255,255,0.02); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    text-align: left;
    padding: 10px 12px;
    font-size: 13px !important;
    cursor: pointer;
}
.faq-q:hover { background: rgba(0,255,255,0.06) !important; }
.faq-chevron { flex-shrink: 0; transition: transform 0.15s ease; color: #00ffff; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a {
    display: none;
    padding: 0 12px 12px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #cdd1dc !important;
}
.faq-item.open .faq-a { display: block; }
.faq-a b { color: #fff !important; }
.faq-a code {
    background: rgba(0,255,255,0.08);
    color: #00ffff !important;
    padding: 0 4px;
    font-size: 11.5px;
}

/* -----------------------------------------------------------
   AGENT PANEL (right column)
   Fourth flex child of .app-body. Collapsed to width:0 rather than
   display:none so opening/closing animates instead of snapping — the
   same reason the modals animate opacity/transform (see the modal
   note above): `display` isn't animatable.
   ----------------------------------------------------------- */
.agent-panel {
    width: 0;
    flex: 0 0 0;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    background: #06070a !important;
    border-left: 1px solid rgba(0,255,255,0.14) !important;
    transition: width 180ms ease, flex-basis 180ms ease;
    min-height: 0;
}
.agent-panel.open { width: 360px; flex: 0 0 360px; }

.agent-panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 10px 10px 12px;
    border-bottom: 1px solid rgba(0,255,255,0.14) !important;
    flex-shrink: 0;
}
.ap-avatar {
    width: 28px; height: 28px; flex-shrink: 0;
    background: rgba(0,255,255,0.1);
    border: 1px solid rgba(0,255,255,0.3) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background-size: cover; background-position: center;
}
.ap-title { flex: 1; min-width: 0; }
.ap-name {
    font-size: 15px; font-weight: 700; color: #fff !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-sub { font-size: 12px; color: rgba(255,255,255,0.62) !important; }
.ap-close {
    background: transparent !important; border: none !important;
    color: rgba(255,255,255,0.5) !important; cursor: pointer;
    padding: 4px; display: flex; flex-shrink: 0;
}
.ap-close:hover { color: #00ffff !important; }

.agent-panel-tabs {
    display: flex; flex-shrink: 0;
    border-bottom: 1px solid rgba(0,255,255,0.14) !important;
}
.ap-tab {
    flex: 1; padding: 7px 2px;
    background: transparent !important; border: none !important;
    border-bottom: 2px solid transparent !important;
    color: rgba(255,255,255,0.58) !important;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    font-family: inherit;
}
.ap-tab:hover { color: rgba(255,255,255,0.8) !important; }
.ap-tab.active {
    color: #00ffff !important;
    border-bottom-color: #00ffff !important;
    background: rgba(0,255,255,0.05) !important;
}

.agent-panel-body {
    flex: 1; overflow-y: auto; min-height: 0;
    padding: 14px; font-size: 13.5px;
}
.ap-section-note {
    font-size: 12px; line-height: 1.65;
    color: rgba(255,255,255,0.6) !important;
    margin-bottom: 12px;
}
.ap-empty {
    text-align: center; padding: 20px 8px;
    color: rgba(255,255,255,0.5) !important; font-size: 12.5px; line-height: 1.7;
}
/* Budget meter — knowledge is included whole up to a cap, so "how full am I"
   is the number that actually predicts whether a new entry will be used. */
.ap-meter { margin-bottom: 12px; }
.ap-meter-bar {
    height: 3px; background: rgba(255,255,255,0.1);
    overflow: hidden; margin-bottom: 4px;
}
.ap-meter-fill { height: 100%; background: #00ffff; transition: width 200ms ease; }
.ap-meter-fill.over { background: #ff9800; }
.ap-meter-label { font-size: 11.5px; color: rgba(255,255,255,0.6) !important; }
.ap-meter-label.over { color: #ff9800 !important; }

.ap-item {
    border: 1px solid rgba(0,255,255,0.14) !important;
    padding: 8px; margin-bottom: 8px;
    background: rgba(255,255,255,0.02) !important;
}
.ap-item.disabled { opacity: 0.5; }
.ap-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ap-item-title {
    flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; color: #fff !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-item-body {
    font-size: 12.5px; line-height: 1.65;
    color: rgba(255,255,255,0.78) !important;
    white-space: pre-wrap; word-break: break-word;
    max-height: 96px; overflow: hidden;
}
.ap-item-body.expanded { max-height: none; }
.ap-item-meta {
    font-size: 11.5px; color: rgba(255,255,255,0.5) !important; margin-top: 6px;
}
.ap-icon-btn {
    background: transparent !important; border: none !important;
    color: rgba(255,255,255,0.4) !important;
    cursor: pointer; padding: 2px; display: flex; flex-shrink: 0;
}
.ap-icon-btn:hover { color: #00ffff !important; }
.ap-icon-btn.danger:hover { color: #ff5252 !important; }
.ap-icon-btn.on { color: #00ffff !important; }

.ap-add-btn {
    width: 100%; padding: 7px;
    background: rgba(0,255,255,0.08) !important;
    border: 1px solid rgba(0,255,255,0.3) !important;
    color: #00ffff !important;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    font-family: inherit; margin-bottom: 12px;
}
.ap-add-btn:hover { background: rgba(0,255,255,0.16) !important; }

.ap-form { margin-bottom: 12px; }
.ap-form input, .ap-form textarea {
    width: 100%; padding: 6px 8px; margin-bottom: 6px;
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(0,255,255,0.22) !important;
    color: #fff !important; font-size: 13px; font-family: inherit; line-height: 1.55;
}
.ap-form textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.ap-form-actions { display: flex; gap: 6px; }
.ap-form-actions button {
    flex: 1; padding: 7px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    border: 1px solid rgba(0,255,255,0.3) !important;
    background: rgba(0,255,255,0.1) !important; color: #00ffff !important;
}
.ap-form-actions button.ghost {
    background: transparent !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.5) !important;
}

/* "What is it doing" — running/scheduled tasks */
.ap-task { border-left: 2px solid #00ffff !important; padding-left: 8px; margin-bottom: 10px; }
.ap-task-name { font-size: 13.5px; font-weight: 700; color: #fff !important; }
.ap-task-meta { font-size: 11.5px; color: rgba(255,255,255,0.58) !important; line-height: 1.6; }
.ap-task-result.ok   { color: #4caf50 !important; }
.ap-task-result.fail { color: #ff5252 !important; }

.ap-warn {
    border: 1px solid rgba(255,152,0,0.4) !important;
    background: rgba(255,152,0,0.07) !important;
    color: #ffb74d !important;
    padding: 10px; font-size: 12px; line-height: 1.6; margin-bottom: 12px;
}

/* Edge handle to reopen a closed panel */
.agent-panel-handle {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 60;
    width: 18px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,255,255,0.1) !important;
    border: 1px solid rgba(0,255,255,0.3) !important;
    border-right: none !important;
    color: #00ffff !important; cursor: pointer; padding: 0;
}
.agent-panel-handle:hover { background: rgba(0,255,255,0.2) !important; }

/* -----------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------- */
@media (max-width: 768px) {
    .contacts-panel {
        position: fixed !important;
        left: 52px !important;
        top: 56px !important;
        height: calc(100dvh - 56px) !important;
        z-index: 100 !important;
        width: 220px !important;
        min-width: 220px !important;
    }

    .contacts-panel.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        display: flex !important;
        overflow: hidden !important;
    }

    /* Contact items on mobile */
    .contact-item { padding: 8px 10px !important; gap: 8px !important; justify-content: flex-start !important; }
    .contact-avatar { width: 30px !important; height: 30px !important; font-size: 9px !important; }
    .contact-info { display: flex !important; flex-direction: column !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
    .contact-meta { display: flex !important; }
    .contact-name { font-size: 11px !important; color: #e0e4ef !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

    /* Wallet badge — compact chip, same row as logo */
    .app-header { padding: 0 10px 0 14px !important; }
    .wallet-chip-area { margin-left: auto !important; width: auto !important; }

    .wallet-badge {
        padding: 4px 8px !important;
        width: auto !important;
    }

    .wallet-badge-address {
        font-size: 10px !important;
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .message.sent  { margin-left: 5% !important; max-width: 88% !important; }
    .message.received { margin-right: 5% !important; max-width: 88% !important; }
    .messages-container { padding: 12px 12px 12px !important; }
    .input-wrapper { padding: 0 10px !important; }

    /* Connect overlay: scrollable on mobile so the soft-wallet setup panel is reachable */
    .connect-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding: 24px 16px !important;
    }
    .connect-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 24px 20px !important;
    }
}

/* Agent modals on mobile: use nearly the full screen (they hold a lot — settings,
   wallet, permissions, policy, ledger, memory, seed) and collapse two-column field
   rows (character/provider, policy numbers) to one column so nothing gets crushed. */
@media (max-width: 600px) {
    #agentManageModal .modal, #agentsModal .modal {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        padding: 14px !important;
    }
    #agentManageBody div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}


/* ── Optional wallet passphrase ("25th word") ─────────────────────────────── */
.passphrase-toggle {
    background: none !important;
    border: none !important;
    color: var(--green) !important;
    font-size: 12px !important;
    cursor: pointer;
    padding: 6px 0 !important;
    text-decoration: underline;
    display: block;
    margin: 8px auto 0 !important;
}
.passphrase-box { margin-top: 8px; text-align: left; }
.passphrase-box input {
    width: 100%;
    padding: 10px 12px !important;
    background: rgba(0, 255, 255, 0.04) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
}
.passphrase-note {
    font-size: 11px !important;
    line-height: 1.45 !important;
    opacity: 0.8;
    margin-top: 6px !important;
}
.passphrase-box.hidden { display: none !important; }

.passphrase-field { display: flex; align-items: stretch; gap: 6px; }
.passphrase-field input { flex: 1; min-width: 0; }
.passphrase-eye {
    background: rgba(0,255,255,0.06) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--green) !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.passphrase-eye:hover { background: rgba(0,255,255,0.14) !important; }
.passphrase-match {
    font-size: 11px !important;
    opacity: 0.7;
    margin-top: 4px !important;
    min-height: 14px;
}
.passphrase-match.warn { color: #ffb347 !important; opacity: 1; }

.passphrase-next {
    font-size: 12px !important;
    color: var(--green) !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--border-color) !important;
    background: rgba(0,255,255,0.05) !important;
    line-height: 1.4 !important;
}

/* ── Guided agent creation wizard ─────────────────────────────────────────── */
#agentWizard { position: relative; }
.wiz-step { display: none; animation: wizIn 340ms cubic-bezier(.22,.9,.3,1) both; }
.wiz-step.active { display: block; }
@keyframes wizIn {
    from { opacity: 0; transform: translateX(26px) scale(.985); filter: blur(2px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .wiz-step { animation: none !important; } }

.wiz-progress { display: flex; gap: 6px; margin-bottom: 20px; }
.wiz-dot {
    flex: 1; height: 3px; background: rgba(0,255,255,0.14);
    position: relative; overflow: hidden;
}
.wiz-dot::after {
    content: ''; position: absolute; inset: 0; width: 0;
    background: var(--green); box-shadow: 0 0 10px var(--green);
    transition: width 420ms cubic-bezier(.22,.9,.3,1);
}
.wiz-dot.done::after, .wiz-dot.current::after { width: 100%; }
.wiz-dot.current::after { animation: wizPulse 1.9s ease-in-out infinite; }
@keyframes wizPulse { 0%,100% { opacity: 1 } 50% { opacity: .48 } }

.wiz-kicker {
    font-size: 11px !important; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(0,255,255,0.62) !important; margin-bottom: 8px !important;
}
.wiz-title {
    font-size: 27px !important; font-weight: 900 !important; line-height: 1.12 !important;
    margin-bottom: 8px !important; color: #fff !important;
}
.wiz-sub {
    font-size: 14px !important; line-height: 1.6 !important;
    color: rgba(255,255,255,0.62) !important; margin-bottom: 22px !important;
}
#agentWizard input[type=text], #agentWizard input[type=password], #agentWizard select {
    width: 100% !important; padding: 16px 18px !important;
    font-size: 17px !important; font-weight: 600 !important;
    background: rgba(0,255,255,0.035) !important;
    border: 1px solid rgba(0,255,255,0.28) !important;
    color: #fff !important; transition: border-color .18s, box-shadow .18s, background .18s;
}
#agentWizard input:focus, #agentWizard select:focus {
    outline: none !important; border-color: var(--green) !important;
    background: rgba(0,255,255,0.07) !important;
    box-shadow: 0 0 0 3px rgba(0,255,255,0.11), 0 0 22px rgba(0,255,255,0.13) !important;
}
#agentWizard input::placeholder { color: rgba(255,255,255,0.3) !important; font-weight: 400 !important; }

.wiz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.wiz-card {
    padding: 16px 14px; cursor: pointer; text-align: left;
    background: rgba(0,255,255,0.035); border: 1px solid rgba(0,255,255,0.2);
    transition: transform .16s cubic-bezier(.22,.9,.3,1), border-color .16s, background .16s, box-shadow .16s;
}
.wiz-card:hover { transform: translateY(-3px); border-color: rgba(0,255,255,0.55); background: rgba(0,255,255,0.07); }
.wiz-card.sel {
    border-color: var(--green); background: rgba(0,255,255,0.11);
    box-shadow: 0 0 0 1px var(--green), 0 0 22px rgba(0,255,255,0.16);
}
.wiz-card-t { font-size: 15px !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 3px; }
.wiz-card-d { font-size: 11.5px !important; color: rgba(255,255,255,0.5) !important; line-height: 1.45 !important; }

.wiz-nav { display: flex; gap: 10px; margin-top: 26px; align-items: center; }
.wiz-nav button { padding: 14px 26px !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .04em; }
.wiz-next { flex: 1; background: var(--green) !important; color: #000 !important; border: none !important; }
.wiz-next:hover { box-shadow: 0 0 26px rgba(0,255,255,0.42) !important; }
.wiz-next:disabled { opacity: .32 !important; cursor: not-allowed; box-shadow: none !important; }
.wiz-back { background: transparent !important; color: rgba(255,255,255,0.5) !important; border: 1px solid rgba(255,255,255,0.16) !important; }
.wiz-note {
    font-size: 12px !important; line-height: 1.6 !important; padding: 13px 15px; margin-top: 16px;
    background: rgba(0,255,255,0.05); border-left: 2px solid var(--green);
    color: rgba(255,255,255,0.7) !important;
}
.wiz-review { display: flex; flex-direction: column; gap: 9px; margin-bottom: 6px; }
.wiz-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13.5px; }
.wiz-row span:first-child { color: rgba(255,255,255,0.44) !important; }
.wiz-row span:last-child { color: #fff !important; font-weight: 700 !important; text-align: right; word-break: break-word; }
@media (max-width: 600px) { .wiz-title { font-size: 22px !important; } #agentWizard input, #agentWizard select { font-size: 16px !important; } }

/* Wizard takes over the modal, so the modal must be able to scroll on short screens.
   Measured 751px tall at the personality step — that overflows a 700px viewport. */
#agentsModal .modal:has(#agentWizard:not(.hidden)) {
    max-height: 92vh !important;
    overflow-y: auto !important;
}
/* Tighter personality grid so 6 cards don't dominate the step. */
#wizCharacters { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
#wizCharacters .wiz-card { padding: 12px 12px; }
#wizCharacters .wiz-card-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-height: 780px) {
    .wiz-title { font-size: 22px !important; margin-bottom: 5px !important; }
    .wiz-sub { font-size: 13px !important; margin-bottom: 15px !important; }
    .wiz-progress { margin-bottom: 14px; }
    .wiz-nav { margin-top: 18px; }
    #agentWizard input, #agentWizard select { padding: 13px 15px !important; font-size: 15.5px !important; }
}

/* ── Agents modal: distinguishable sections, bounded height ───────────────── */
/* The list grew unbounded — with several agents the modal ran off screen. */
#agentsModal .modal { max-height: 88vh; overflow-y: auto; }
#agentsList { max-height: 40vh !important; overflow-y: auto !important; padding-right: 4px; }

/* Sections were visually monotone — same tone, same spacing, nothing to
   separate "what this is" from "your agents" from "create one". */
.agents-section {
    border: 1px solid rgba(0,255,255,0.14);
    background: rgba(0,255,255,0.022);
    padding: 13px 14px;
    margin-bottom: 12px;
}
.agents-section-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(0,255,255,0.72) !important;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,255,255,0.12);
}
.agents-section-head::before {
    content: ''; width: 3px; height: 12px; background: var(--green);
    box-shadow: 0 0 8px var(--green); flex-shrink: 0;
}
.agents-section-count {
    margin-left: auto; font-size: 10px; letter-spacing: .06em;
    color: rgba(255,255,255,0.42) !important;
}
.agents-intro { background: transparent; border-color: rgba(255,255,255,0.09); }

/* -----------------------------------------------------------
   AGENT PANEL — mobile
   Slides OVER the chat instead of taking a column. At <=768px there
   isn't room for a third column, and shrinking the chat area to fit
   one would leave the messages unreadable.
   ----------------------------------------------------------- */
@media (max-width: 768px) {
    .agent-panel {
        position: fixed !important;
        right: 0 !important;
        top: 56px !important;
        height: calc(100dvh - 56px) !important;
        z-index: 120 !important;
        width: 0 !important;
        flex-basis: 0 !important;
        box-shadow: -8px 0 24px rgba(0,0,0,0.6) !important;
    }
    .agent-panel.open {
        width: min(92vw, 380px) !important;
        flex-basis: min(92vw, 380px) !important;
    }
    .agent-panel-handle { top: auto; bottom: 96px; transform: none; }
}

/* -----------------------------------------------------------
   RUN-YOUR-OWN-RELAY PANEL
   ----------------------------------------------------------- */
.sh-lead p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.82) !important; margin-bottom: 12px; }
.sh-lead b { color: #fff !important; }
.sh-list { margin: 0 0 14px 18px; padding: 0; }
.sh-list li { font-size: 13px; line-height: 1.75; color: rgba(255,255,255,0.78) !important; margin-bottom: 6px; }
.sh-note { font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,0.6) !important; margin-bottom: 14px; }
.sh-cmd-wrap { margin-bottom: 12px; }
.sh-cmd {
    display: block; padding: 12px;
    background: rgba(0,0,0,0.55) !important;
    border: 1px solid rgba(0,255,255,0.3) !important;
    color: #00ffff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px; line-height: 1.6;
    word-break: break-all; user-select: all;
}
.sh-list code, .sh-note code {
    background: rgba(0,255,255,0.08); color: #00ffff !important;
    padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
    word-break: break-all;
}
.sh-warn {
    border: 1px solid rgba(255,152,0,0.4) !important;
    background: rgba(255,152,0,0.06) !important;
    padding: 12px; margin-top: 4px;
}
.sh-warn p { font-size: 12.5px; line-height: 1.7; color: #ffcc80 !important; margin-bottom: 10px; }
.sh-warn p:last-child { margin-bottom: 0; }
.sh-warn b { color: #ffb74d !important; }

/* -----------------------------------------------------------
   MODAL CLOSE (X) + BOTTOM-PINNED SIDEBAR ICON
   ----------------------------------------------------------- */
/* The agents modal scrolls, so its bottom Close button can sit off-screen.
   This X stays reachable regardless of scroll position. */
.modal-x {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(0,255,255,0.25) !important;
    color: rgba(255,255,255,0.6) !important;
    cursor: pointer;
}
.modal-x:hover { background: rgba(0,255,255,0.14) !important; color: #00ffff !important; }

/* Push the gear to the bottom of the icon rail, separated from the nav list. */
.sidebar-nav { flex: 1 1 auto; }
.sidebar-bottom {
    margin-top: auto;
    padding-bottom: 10px;
    border-top: 1px solid rgba(0,255,255,0.1);
    padding-top: 10px;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    /* The rail collapses to icons only on mobile; keep the gear pinned but compact. */
    .sidebar-bottom { padding-bottom: 6px; padding-top: 6px; }
}