/* ============================================================
   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;
}

.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;
}

/* -----------------------------------------------------------
   CONTACTS PANEL
   ----------------------------------------------------------- */
.contacts-panel {
    width: 240px !important;
    min-width: 240px !important;
    background: #08090d !important;
    border-top: 2px solid #00ffff !important;
    border-right: 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;
}

.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: 6px !important;
    width: 100% !important;
    padding: 8px 10px !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: 11px !important;
    font-weight: 500 !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;
}

.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;
}

.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;
}

/* 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;
}

.connect-btn:hover { background: rgba(0,255,255,0.18) !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-overlay { background: rgba(8,9,13,0.86) !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;
}

.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 { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; box-shadow: none !important; }

.modal-actions .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 { background: rgba(0,255,255,0.16) !important; }
.modal-actions .confirm-btn:disabled { opacity: 0.4 !important; }

.modal-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 { 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-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; }

/* -----------------------------------------------------------
   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-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; }

/* -----------------------------------------------------------
   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); }

/* -----------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------- */
@media (max-width: 768px) {
    .contacts-panel {
        position: fixed !important;
        left: 52px !important;
        top: 56px !important;
        height: calc(100vh - 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; }
}