/* ==========================================================================
   SECRET CHATS — distinct appearance
   Deliberately theme-independent (uses its own fixed palette, not the
   Theme Engine variables) so a Secret Chat is unmistakable at a glance
   no matter what theme the rest of Connexa is wearing.
   ========================================================================== */

.secret-root {
  position: fixed; inset: 0; z-index: 2000;
  background: #0a0f1a;
  color: #e7ecf5;
  display: flex; /* toggled via JS to none/flex */
  font-family: var(--font-family, 'Inter', sans-serif);
}

.secret-view { display: none; flex-direction: column; width: 100%; height: 100%; position: relative; }
.secret-view.active { display: flex; }

/* ---- Lock screen ---- */
.secret-lock-screen {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 20%, #14213b 0%, #060911 70%);
}
.secret-lock-card { text-align: center; padding: 24px; width: 280px; }
.secret-lock-icon { font-size: 44px; color: #7dd3fc; text-shadow: 0 0 18px rgba(125,211,252,0.6); }
.secret-lock-card h3 { margin: 10px 0 2px; font-size: 20px; }
.secret-lock-card p { color: #93a1b7; font-size: 13px; margin-bottom: 18px; }

.secret-pin-dots { display: flex; justify-content: center; gap: 14px; margin-bottom: 22px; }
.secret-pin-dots span {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #4b5c78; transition: all .15s;
}
.secret-pin-dots span.filled { background: #7dd3fc; border-color: #7dd3fc; box-shadow: 0 0 8px rgba(125,211,252,0.7); }

.secret-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.secret-key {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid #263149; background: #101a2d;
  color: #e7ecf5; font-size: 18px; cursor: pointer;
}
.secret-key:active { background: #1c2942; }
.secret-close-btn { background: none; border: none; color: #93a1b7; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* ---- Header (shared across list/new/settings views) ---- */
.secret-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #0d1424; border-bottom: 1px solid #1b2842;
}
.secret-header h3 { flex: 1; font-size: 16px; display: flex; align-items: center; gap: 8px; margin: 0; }
.secret-header-icon { color: #7dd3fc; }
.secret-header .material-icons { cursor: pointer; color: #93a1b7; flex-shrink: 0; }
.secret-header .material-icons:hover { color: #e7ecf5; }
.secret-verified-badge { color: #93a1b7; }

/* ---- Session list ---- */
.secret-session-items { flex: 1; overflow-y: auto; padding: 8px; }
.secret-session-item {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer;
}
.secret-session-item:hover { background: #101a2d; }
.secret-session-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid #263149; flex-shrink: 0; }
.secret-session-text { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.secret-session-text strong { font-size: 14px; display: flex; align-items: center; gap: 4px; }
.secret-session-text span { font-size: 12px; color: #7d8aa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secret-session-lock { color: #4b5c78 !important; font-size: 18px !important; }
.secret-inline-verified { font-size: 13px !important; color: #34d399 !important; cursor: default !important; }

.secret-session-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.secret-session-time { font-size: 11px; color: #5d6c88; }
.secret-session-meta-icons { display: flex; align-items: center; gap: 6px; }
.secret-mute-icon, .secret-pin-icon { font-size: 15px !important; color: #5d6c88 !important; cursor: default !important; }
.secret-unread-badge {
  background: #38bdf8; color: #06121f; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}

.secret-fab {
  position: absolute; bottom: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8); border: none; color: #06121f;
  box-shadow: 0 6px 18px rgba(56,189,248,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ---- Chat header variants (normal / search / selection) ---- */
.secret-chat-header { position: relative; z-index: 3; }
.secret-chat-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.secret-chat-title strong { font-size: 14px; }
.secret-chat-title span { font-size: 11px; color: #38bdf8; }
.secret-chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.secret-search-bar { flex: 1; }
.secret-search-bar input {
  width: 100%; background: #101a2d; border: 1px solid #263149; border-radius: 20px;
  padding: 8px 14px; color: #e7ecf5; outline: none; font-size: 14px;
}
.secret-search-bar input:focus { border-color: #38bdf8; }

.secret-selection-toolbar { background: #14213b; }
.secret-selection-toolbar strong { font-size: 14px; }

/* ---- Typing indicator ---- */
.secret-typing-indicator {
  display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: #7d8aa3;
  background: #0a0f1a;
}
.secret-typing-dots { display: inline-flex; gap: 3px; }
.secret-typing-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: #38bdf8; opacity: .5;
  animation: secret-typing-bounce 1.2s infinite ease-in-out;
}
.secret-typing-dots span:nth-child(2) { animation-delay: .15s; }
.secret-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes secret-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---- Chat view ---- */
.secret-chat-theme .secret-chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  background:
    linear-gradient(#0a0f1a, #0a0f1a),
    repeating-linear-gradient(45deg, #10182b 0 2px, transparent 2px 14px);
  transition: background-color .15s;
}
.secret-chat-messages.secret-dropzone-active { background-color: rgba(56,189,248,0.08); outline: 2px dashed #38bdf8; outline-offset: -6px; }

.secret-msg { display: flex; flex-direction: column; margin-bottom: 4px; padding: 6px 4px; border-radius: 10px; position: relative; }
.secret-msg.me { align-items: flex-end; }
.secret-msg.them { align-items: flex-start; }
.secret-msg.selectable { cursor: pointer; padding-left: 34px; }
.secret-msg.selectable:hover { background: rgba(56,189,248,0.06); }
.secret-msg-select-check { display: none; position: absolute; left: 6px; top: 10px; color: #4b5c78; font-size: 20px !important; }
.secret-msg.selectable .secret-msg-select-check { display: inline-block; }
.secret-msg.selected .secret-msg-select-check { color: #38bdf8; }
.secret-msg.selected { background: rgba(56,189,248,0.1); }

.secret-msg-bubble {
  max-width: 72%; padding: 8px 12px 6px; border-radius: 16px; font-size: 14px; line-height: 1.4;
  display: flex; flex-direction: column; gap: 4px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* discourage easy copy */
}
.secret-msg.me .secret-msg-bubble { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); color: #fff; border-bottom-right-radius: 4px; }
.secret-msg.them .secret-msg-bubble { background: #111c33; color: #e7ecf5; border: 1px solid #1e2b47; border-bottom-left-radius: 4px; }
.secret-msg-bubble.has-image { padding: 4px; max-width: 60%; }

.secret-msg-text { white-space: pre-wrap; word-break: break-word; }
.secret-msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 11px; opacity: .75; align-self: flex-end; }
.secret-msg-meta .material-icons { font-size: 14px !important; cursor: default !important; color: inherit; }
.secret-msg-time { font-size: 10px; }
.secret-msg-badge { opacity: .9; }
.secret-msg-status .material-icons { font-size: 15px !important; }
.secret-tick-read { color: #34d399 !important; }

.secret-reply-preview {
  border-left: 3px solid #38bdf8; padding: 4px 8px; font-size: 12px; opacity: .8;
  background: rgba(255,255,255,0.06); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Reactions ---- */
.secret-reactions-row { display: flex; gap: 4px; margin-top: -6px; flex-wrap: wrap; }
.secret-reaction-pill {
  background: #101a2d; border: 1px solid #263149; border-radius: 999px; padding: 1px 7px;
  font-size: 12px; color: #e7ecf5; cursor: pointer;
}
.secret-reaction-pill.mine { border-color: #38bdf8; background: rgba(56,189,248,0.15); }

.secret-reaction-picker {
  position: fixed; z-index: 3000; background: #101a2d; border: 1px solid #263149; border-radius: 24px;
  padding: 6px 10px; display: flex; gap: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.secret-reaction-opt { background: none; border: none; font-size: 20px; cursor: pointer; padding: 2px 3px; transition: transform .1s; }
.secret-reaction-opt:hover { transform: scale(1.25); }

/* ---- Images ---- */
.secret-msg-image { max-width: 260px; max-height: 320px; border-radius: 12px; display: block; cursor: pointer; object-fit: cover; }
.secret-msg-image-wrap {
  width: 220px; height: 160px; border-radius: 12px; background: #0d1424; border: 1px solid #1e2b47;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #7d8aa3; font-size: 12px;
}
.secret-image-spinner { font-size: 30px !important; animation: secret-pulse 1.4s infinite ease-in-out; color: #4b5c78 !important; }
.secret-image-tap-to-load { cursor: pointer; }
.secret-image-tap-to-load .material-icons { font-size: 26px !important; color: #38bdf8 !important; }
@keyframes secret-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }

.secret-lightbox {
  position: fixed; inset: 0; z-index: 4000; background: rgba(4,7,14,0.94);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
}
.secret-lightbox img { max-width: 92vw; max-height: 78vh; border-radius: 8px; }
.secret-lightbox-close { position: absolute; top: 20px; right: 24px; color: #e7ecf5; font-size: 28px !important; cursor: pointer; }
.secret-lightbox-actions button {
  background: #101a2d; border: 1px solid #263149; color: #e7ecf5; border-radius: 20px;
  padding: 8px 18px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px;
}

/* ---- TTL bar / reply bar / composer ---- */
.secret-ttl-bar { display: flex; gap: 8px; padding: 8px 12px; background: #0d1424; border-top: 1px solid #1b2842; flex-wrap: wrap; }
.secret-ttl-option { background: #101a2d; border: 1px solid #263149; color: #e7ecf5; border-radius: 20px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.secret-ttl-option:hover { border-color: #38bdf8; }

.secret-reply-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #101a2d;
  border-top: 1px solid #1b2842; border-left: 3px solid #38bdf8;
}
.secret-reply-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.secret-reply-bar-text strong { font-size: 12px; color: #38bdf8; }
.secret-reply-bar-text span { font-size: 12px; color: #93a1b7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secret-reply-bar .material-icons { font-size: 18px !important; cursor: pointer; color: #93a1b7; }

.secret-composer { display: flex; gap: 8px; padding: 12px; background: #0d1424; border-top: 1px solid #1b2842; align-items: center; }
.secret-composer input[type="text"] {
  flex: 1; background: #101a2d; border: 1px solid #263149; border-radius: 22px; padding: 10px 16px;
  color: #e7ecf5; outline: none; font-size: 14px;
}
.secret-composer button {
  width: 42px; height: 42px; border-radius: 50%; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.secret-composer #secret-send-btn { background: linear-gradient(135deg, #7dd3fc, #38bdf8); color: #06121f; }
.secret-composer #secret-attach-btn { background: #101a2d; border: 1px solid #263149; color: #93a1b7; }
.secret-composer #secret-attach-btn:hover { color: #38bdf8; border-color: #38bdf8; }

/* ---- Context menu ---- */
.secret-ctx-menu {
  position: fixed; z-index: 3500; background: #101a2d; border: 1px solid #263149; border-radius: 12px;
  min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); overflow: hidden; padding: 4px;
}
.secret-ctx-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none;
  border: none; color: #e7ecf5; font-size: 13px; text-align: left; cursor: pointer; border-radius: 8px;
}
.secret-ctx-item:hover { background: #1c2942; }
.secret-ctx-item.danger { color: #f87171; }
.secret-ctx-item .material-icons { font-size: 18px !important; cursor: pointer; color: inherit; }

/* ---- Settings + device picker ---- */
.secret-settings-list { padding: 8px 16px; overflow-y: auto; }
.secret-settings-list .settings-row { border-bottom: 1px solid #1b2842; }
.secret-settings-list .settings-row-text strong { color: #e7ecf5; }
.secret-settings-list .settings-row-text span { color: #7d8aa3; }
.secret-hint { color: #7d8aa3; font-size: 13px; padding: 0 4px 10px; }
.secret-device-option {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid #263149;
  background: #101a2d; color: #e7ecf5; cursor: pointer;
}
.secret-device-option:hover { border-color: #38bdf8; }
.secret-device-mgmt-revoke { color: #f87171 !important; }
.secret-device-badge-this {
  font-size: 10px; background: rgba(56,189,248,0.15); color: #38bdf8; border-radius: 6px;
  padding: 1px 6px; margin-left: 6px; font-weight: 600;
}
.secret-root .settings-action-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
  border-bottom: 1px solid #1b2842; color: #e7ecf5; padding: 14px 4px; font-size: 14px; cursor: pointer; text-align: left;
}
.secret-root .settings-action-btn:hover { color: #38bdf8; }
.secret-root .settings-action-btn.danger { color: #f87171; }
.secret-root .settings-action-btn .material-icons { cursor: pointer; }

/* ---- Safety number view ---- */
.secret-safety-body { padding: 24px; text-align: center; overflow-y: auto; }
.secret-safety-shield { font-size: 48px !important; color: #34d399 !important; cursor: default !important; margin-bottom: 12px; }
.secret-safety-code {
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 17px; letter-spacing: 1px;
  background: #101a2d; border: 1px solid #263149; border-radius: 12px; padding: 18px;
  margin: 16px 0; word-spacing: 6px; line-height: 1.8;
}
.secret-safety-body .settings-row { text-align: left; border-bottom: none; margin-top: 8px; }

/* Entry icon pulse to make Secret Chats discoverable-but-distinct in the main UI */
.secret-entry-btn .material-icons { color: #38bdf8; }