/* AEOTEE Orbit — an original, security-conscious messaging interface.
   Presentation only: no authentication, storage, identity, or encryption policy is changed. */
:root {
  color-scheme: dark;
  --orbit-bg: #090c15;
  --orbit-panel: #0e1421;
  --orbit-panel-raised: #141c2d;
  --orbit-panel-soft: #192337;
  --orbit-border: rgba(177, 191, 226, .13);
  --orbit-border-strong: rgba(177, 191, 226, .22);
  --orbit-text: #f2f4ff;
  --orbit-muted: #9aa6c1;
  --orbit-dim: #6d7995;
  --orbit-violet: #9079ff;
  --orbit-violet-deep: #6d58dc;
  --orbit-mint: #70e4d0;
  --orbit-shadow: 0 28px 90px rgba(0, 0, 0, .38);
}
html { min-width: 320px; min-height: 100%; background: var(--orbit-bg); }
body {
  min-height: 100vh;
  padding: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 5%, rgba(116, 84, 238, .13), transparent 32%),
    radial-gradient(ellipse at 94% 94%, rgba(45, 203, 185, .09), transparent 28%),
    #090c15;
  color: var(--orbit-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image: radial-gradient(rgba(204, 211, 255, .36) .55px, transparent .65px);
  background-size: 23px 23px;
  mask-image: linear-gradient(135deg, #000 0%, transparent 66%);
}
::selection { background: rgba(144, 121, 255, .33); color: #fff; }
.app {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  width: min(1660px, 100%);
  max-width: none;
  height: calc(100dvh - 28px);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(177, 191, 226, .17);
  border-radius: 27px;
  background: var(--orbit-panel);
  box-shadow: var(--orbit-shadow), 0 0 0 1px rgba(255,255,255,.018) inset;
}
.app .sidebar {
  position: relative;
  display: flex;
  flex: 0 0 clamp(285px, 27%, 355px);
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--orbit-border);
  background:
    radial-gradient(ellipse at 6% 0%, rgba(119, 93, 242, .12), transparent 43%),
    linear-gradient(180deg, #101626 0%, #0e1421 62%, #0b111d 100%);
}
.app .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 20px 21px 13px;
  color: var(--orbit-text);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: .18em;
}
.app .brand-mark {
  position: relative;
  display: grid;
  flex: 0 0 43px;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(210, 203, 255, .4);
  border-radius: 15px 15px 15px 5px;
  background: linear-gradient(145deg, #9a82ff 0%, #735ce6 53%, #4d87ce 100%);
  box-shadow: 0 8px 24px rgba(115, 92, 230, .23), inset 0 1px 0 rgba(255,255,255,.24);
  color: #fff;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.04em;
}
.app .brand-mark::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  border: 2px solid #0f1523;
  border-radius: 50%;
  background: var(--orbit-mint);
  box-shadow: 0 0 13px rgba(112, 228, 208, .55);
}
.app .brand > span:nth-child(2) { display: block; line-height: 1.1; }
.app .brand > span:nth-child(2)::after {
  content: "PRIVATE, BY DESIGN";
  display: block;
  margin-top: 6px;
  color: #8995b2;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .2em;
}
.app .logout-btn {
  display: grid;
  flex: 0 0 37px;
  place-items: center;
  width: 37px;
  height: 37px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--orbit-border);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #9da9c3;
  cursor: pointer;
  font-size: 18px;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.app .logout-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(144,121,255,.48);
  background: rgba(144,121,255,.1);
  color: #dfd9ff;
}
.app .sidebar-intro { padding: 11px 22px 17px; }
.app .sidebar-intro p {
  margin: 0 0 6px;
  color: #a99cff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .19em;
}
.app .sidebar-intro span { display: block; color: #8793ae; font-size: 12px; line-height: 1.5; }
.app .search { position: relative; padding: 0 16px 16px; }
.app .search::before {
  content: "⌕";
  position: absolute;
  top: 9px;
  left: 29px;
  z-index: 1;
  color: #7785a3;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}
.app .search input {
  width: 100%;
  min-height: 43px;
  padding: 11px 13px 11px 39px;
  border: 1px solid rgba(177,191,226,.13);
  border-radius: 13px;
  outline: none;
  background: rgba(5, 9, 18, .4);
  color: var(--orbit-text);
  font: inherit;
  font-size: 12px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.app .search input::placeholder { color: #7b87a3; }
.app .search input:hover { border-color: var(--orbit-border-strong); }
.app .search input:focus-visible {
  border-color: rgba(144,121,255,.8);
  background: #0b1120;
  box-shadow: 0 0 0 3px rgba(144,121,255,.12);
}
#userList {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  margin: 0;
  padding: 4px 10px 16px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #303b56 transparent;
}
#userList::before {
  content: "YOUR PEOPLE";
  display: block;
  padding: 4px 12px 8px;
  color: #6f7d99;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .19em;
}
#userList .contact {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--orbit-text);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#userList .contact:hover {
  transform: translateX(2px);
  border-color: rgba(177,191,226,.1);
  background: rgba(255,255,255,.035);
}
#userList .contact.active,
#userList .contact[aria-current="true"] {
  border-color: rgba(144,121,255,.22);
  background: linear-gradient(105deg, rgba(126,103,242,.2), rgba(78,100,160,.08));
  box-shadow: inset 3px 0 0 var(--orbit-violet), inset 0 1px 0 rgba(255,255,255,.025);
}
#userList .contact:focus-visible { outline: 2px solid var(--orbit-violet); outline-offset: 2px; }
#userList .contact > .avatar {
  position: relative;
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  background: linear-gradient(145deg, #8a78f8, #4e72bd);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 4px 15px rgba(81,91,183,.18);
}
#userList .contact:nth-of-type(6n + 2) > .avatar { background: linear-gradient(145deg,#53cbbd,#397eaa); }
#userList .contact:nth-of-type(6n + 3) > .avatar { background: linear-gradient(145deg,#e4a46e,#bb6a73); }
#userList .contact:nth-of-type(6n + 4) > .avatar { background: linear-gradient(145deg,#b08cf4,#8362bb); }
#userList .contact:nth-of-type(6n + 5) > .avatar { background: linear-gradient(145deg,#7bcb91,#418a76); }
#userList .contact:nth-of-type(6n + 6) > .avatar { background: linear-gradient(145deg,#6da9f4,#4f6bc2); }
#userList .contact > div:nth-child(2) { flex: 1; min-width: 0; }
#userList .contact b {
  display: block;
  overflow: hidden;
  color: #e8ecfb;
  font-size: 13px;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#userList .contact small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #7885a1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#userList .empty-users {
  margin: 7px;
  padding: 19px 13px;
  border: 1px dashed var(--orbit-border-strong);
  border-radius: 14px;
  color: #8e9ab4;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}
#aeoteeSecurityBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 48px !important;
  margin: 8px 14px 15px !important;
  padding: 12px 13px !important;
  width: calc(100% - 28px) !important;
  border: 1px solid rgba(112,228,208,.2) !important;
  border-radius: 14px !important;
  background: linear-gradient(110deg,rgba(112,228,208,.08),rgba(144,121,255,.08)) !important;
  color: #c3d3e7 !important;
  font: 700 11px/1.4 Inter,ui-sans-serif,system-ui,sans-serif !important;
  letter-spacing: .015em !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
#aeoteeSecurityBtn::before {
  content: "✳";
  display: grid;
  flex: 0 0 25px;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 9px;
  background: rgba(112,228,208,.12);
  color: var(--orbit-mint);
  font-size: 15px;
}
#aeoteeSecurityBtn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(112,228,208,.42) !important;
  background: linear-gradient(110deg,rgba(112,228,208,.13),rgba(144,121,255,.13)) !important;
}
.app .chat {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0d1320;
}
.app .chat-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  height: auto;
  padding: 15px clamp(17px, 3vw, 31px);
  border-bottom: 1px solid var(--orbit-border);
  background: rgba(17, 24, 39, .95);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.app .chat-header > .avatar {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: linear-gradient(145deg,#8d7cff,#506fc4);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 7px 20px rgba(92,87,198,.18);
}
.app .person { flex: 1 1 auto; min-width: 0; }
.app .person b { display: block; overflow: hidden; color: #f0f2ff; font-size: 14px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.app .person small { display: block; min-height: 15px; margin-top: 5px; color: #86cbbd; font-size: 10px; line-height: 1.4; }
.app .actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.app .actions button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(177,191,226,.15);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
  color: #9eacd0;
  cursor: pointer;
  font-size: 17px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.app .actions button:hover:not(:disabled) { border-color: rgba(144,121,255,.42); background: rgba(144,121,255,.12); color: #e1dcff; }
.app .actions button:disabled { opacity: .38; cursor: not-allowed; }
.app .mobile-back {
  display: none;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--orbit-border);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #e4e8fa;
  font-size: 18px;
}
.secure-session-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--orbit-border);
  background: #172033 !important;
  color: #aeb9db !important;
  font-size: 11px;
}
.secure-session-status[hidden], .secure-session-status button[hidden] { display: none !important; }
.secure-session-status[data-kind="success"] { background: rgba(55,148,118,.13) !important; color: #92e3c2 !important; }
.secure-session-status[data-kind="error"] { background: rgba(205,77,95,.13) !important; color: #ffb2ba !important; }
.secure-session-status[data-kind="notice"] { background: rgba(215,166,68,.11) !important; color: #f2d58d !important; }
.secure-session-status button { border-radius: 10px !important; border: 1px solid currentColor !important; background: transparent !important; color: inherit !important; }
.app .messages {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: clamp(18px, 3.2vw, 42px) clamp(17px, 7%, 90px);
  overflow: auto;
  background:
    radial-gradient(ellipse at 17% 17%, rgba(128,104,245,.095), transparent 38%),
    radial-gradient(ellipse at 88% 83%, rgba(56,196,177,.055), transparent 35%),
    radial-gradient(rgba(184,198,242,.06) .65px, transparent .75px),
    linear-gradient(145deg,#0d1422,#101828 54%,#0c1420);
  background-size: auto, auto, 24px 24px, auto;
  scrollbar-width: thin;
  scrollbar-color: #303b56 transparent;
  touch-action: pan-y;
}
.app .day {
  align-self: center;
  width: fit-content;
  margin: 5px 0 18px;
  padding: 7px 11px;
  border: 1px solid rgba(177,191,226,.12);
  border-radius: 99px;
  background: rgba(15,22,36,.76);
  color: #8190af;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.app .system-message {
  align-self: center;
  max-width: min(390px, 100%);
  margin: auto;
  padding: 21px 25px;
  border: 1px solid rgba(177,191,226,.14);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(25,35,56,.94),rgba(16,24,40,.9));
  box-shadow: 0 16px 44px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.03);
  color: #a5b0cb;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}
.app .system-message:only-child::before {
  content: "A";
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border: 1px solid rgba(172,157,255,.29);
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(145deg,rgba(144,121,255,.24),rgba(72,113,174,.16));
  color: #d8d0ff;
  font-size: 20px;
  font-weight: 850;
}
.app .bubble {
  position: relative;
  max-width: min(70%, 650px);
  width: fit-content;
  margin: 4px 0;
  padding: 12px 14px 10px;
  border: 1px solid rgba(177,191,226,.105);
  border-radius: 17px;
  box-shadow: 0 7px 20px rgba(0,0,0,.09);
  color: #edf0fc;
  cursor: pointer;
  line-height: 1.55;
  overflow-wrap: anywhere;
  touch-action: pan-y;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.app .bubble:hover { box-shadow: 0 10px 25px rgba(0,0,0,.14); }
.app .bubble.swiping { transition: none; }
.app .incoming {
  align-self: flex-start;
  border-top-left-radius: 5px;
  background: linear-gradient(145deg,#1a2437,#172033);
}
.app .outgoing {
  align-self: flex-end;
  margin-left: auto;
  border-color: rgba(178,165,255,.17);
  border-top-right-radius: 5px;
  background: linear-gradient(135deg,#6d5cce 0%,#6253ad 58%,#4f659f 100%);
  color: #fff;
}
.app .bubble-body { color: inherit; font-size: 13px; line-height: 1.65; }
.app .bubble .bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 6px;
  color: rgba(220,226,249,.62);
}
.app .bubble .bubble-meta span {
  display: inline-block;
  margin: 0;
  color: inherit;
  font-size: 9px;
  line-height: 1.3;
  text-align: right;
}
.app .incoming .bubble-meta { color: #7987a6; }
.app .outgoing .bubble-meta { color: rgba(244,244,255,.7); }
.app .message-protection { color: #b9c4e6; font-size: 9px; letter-spacing: .015em; }
.app .incoming .message-protection { color: #8e9bb8; }
.app .quoted { padding: 3px 0 3px 9px; border-left: 2px solid #a99aff; color: #aeb8d2; font-size: 10px; line-height: 1.5; }
.app .outgoing .quoted { border-left-color: #aef0e4; color: #e0dcff; }
.app .message-actions {
  right: 7px;
  top: -39px;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--orbit-border-strong);
  border-radius: 12px;
  background: #171f31;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.app .message-actions button {
  display: grid;
  place-items: center;
  min-width: 29px;
  min-height: 29px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c1c9e0;
  cursor: pointer;
  font-size: 13px;
}
.app .message-actions button:hover { background: rgba(144,121,255,.15); color: #fff; }
.app .bubble.media-only { border: 0; background: transparent !important; box-shadow: none !important; }
.app .chat-media-image, .app .chat-media-video { border: 1px solid rgba(177,191,226,.15); border-radius: 15px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.app .file-card {
  border: 1px solid rgba(177,191,226,.13);
  border-radius: 12px;
  background: rgba(9,14,25,.55);
  color: #c9c1ff;
}
.app .media-error { color: #ffabb4; }
.app .reply-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 22px;
  border-top: 1px solid var(--orbit-border);
  background: #111a2a;
  color: #e4e9fb;
}
.app .reply-bar div { border-left: 3px solid var(--orbit-violet); }
.app .reply-bar span { color: #8997b6; font-size: 11px; }
.app .reply-bar button { color: #c5cde3; }
.app .composer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(12px, 2vw, 25px) 17px;
  border-top: 1px solid var(--orbit-border);
  background: rgba(15,22,36,.98);
}
.app .composer button {
  display: grid;
  flex: 0 0 39px;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 1px solid rgba(177,191,226,.13);
  border-radius: 13px;
  background: rgba(255,255,255,.03);
  color: #a7b2ce;
  cursor: pointer;
  font-size: 16px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.app .composer button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(144,121,255,.42); background: rgba(144,121,255,.12); color: #ebe7ff; }
.app .composer button:disabled { opacity: .35; cursor: not-allowed; }
.app .composer #gifBtn { border-radius: 11px; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.app .composer input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 13px 17px;
  border: 1px solid rgba(177,191,226,.15);
  border-radius: 15px;
  outline: none;
  background: #090f1b;
  color: #eff2ff;
  font: inherit;
  font-size: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.app .composer input::placeholder { color: #76829f; }
.app .composer input:focus-visible { border-color: rgba(144,121,255,.7); background: #0c1322; box-shadow: 0 0 0 3px rgba(144,121,255,.11); }
.app .composer input:disabled { opacity: .56; cursor: not-allowed; }
.app .composer .send {
  flex-basis: 45px;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(213,202,255,.32);
  border-radius: 15px;
  background: linear-gradient(145deg,#9781ff,#6b56df);
  box-shadow: 0 7px 19px rgba(107,86,223,.25);
  color: #fff;
  font-size: 17px;
}
.app .composer .send:hover:not(:disabled) { background: linear-gradient(145deg,#a391ff,#7965ec); color: white; }
.app button:focus-visible, .app input:focus-visible { outline: 2px solid #a99aff; outline-offset: 3px; }
.app *::-webkit-scrollbar { width: 7px; height: 7px; }
.app *::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: #303b56; background-clip: padding-box; }
.app *::-webkit-scrollbar-track { background: transparent; }

/* The dynamic Security Center uses the same visual language as the main app. */
#aeoteeSecurityDialog.a2s-backdrop { z-index: 10000; background: rgba(4,7,14,.78) !important; backdrop-filter: blur(11px) !important; }
#aeoteeSecurityDialog .a2s-panel {
  padding: clamp(19px, 3vw, 28px) !important;
  border: 1px solid rgba(177,191,226,.2) !important;
  border-radius: 23px !important;
  background: linear-gradient(150deg,#151d2e,#0e1523) !important;
  color: #eef1ff !important;
  box-shadow: 0 28px 100px rgba(0,0,0,.56) !important;
  font-family: Inter,ui-sans-serif,system-ui,sans-serif !important;
}
#aeoteeSecurityDialog .a2s-head h2 { color: #f4f3ff !important; letter-spacing: -.035em; }
#aeoteeSecurityDialog .a2s-head p,
#aeoteeSecurityDialog .a2s-note,
#aeoteeSecurityDialog .a2s-sub p { color: #98a5c1 !important; }
#aeoteeSecurityDialog .a2s-close { border-color: var(--orbit-border-strong) !important; background: #1b263a !important; color: #e5e9fa !important; }
#aeoteeSecurityDialog .a2s-card {
  border-color: rgba(177,191,226,.13) !important;
  border-radius: 14px !important;
  background: rgba(8,13,23,.47) !important;
  color: #e7ebfb !important;
}
#aeoteeSecurityDialog .a2s-card span { color: #8d9ab8 !important; }
#aeoteeSecurityDialog .a2s-card code { color: #b4aaff !important; }
#aeoteeSecurityDialog .a2s-msg { border: 1px solid rgba(144,121,255,.16); border-radius: 12px !important; background: rgba(144,121,255,.1) !important; color: #d5ceff !important; }
#aeoteeSecurityDialog .a2s-msg[data-kind="error"] { background: rgba(205,77,95,.13) !important; color: #ffb3bc !important; }
#aeoteeSecurityDialog .a2s-msg[data-kind="success"] { background: rgba(55,148,118,.13) !important; color: #a1e9cb !important; }
#aeoteeSecurityDialog .a2s-actions button,
#aeoteeSecurityDialog .a2s-panel button.primary,
#aeoteeSecurityDialog .a2s-subactions button {
  border: 1px solid rgba(177,191,226,.12) !important;
  border-radius: 11px !important;
  background: linear-gradient(120deg,#806bed,#6553cd) !important;
  color: #fff !important;
}
#aeoteeSecurityDialog .a2s-actions button.secondary,
#aeoteeSecurityDialog .a2s-panel button.secondary,
#aeoteeSecurityDialog .a2s-subactions button.secondary { border-color: var(--orbit-border-strong) !important; background: #202a3d !important; color: #d8deef !important; }
#aeoteeSecurityDialog .a2s-sub {
  border-color: rgba(177,191,226,.14) !important;
  border-radius: 15px !important;
  background: rgba(7,12,21,.5) !important;
  color: #e9edfa !important;
}
#aeoteeSecurityDialog .a2s-sub h3 { color: #f1f2ff !important; }
#aeoteeSecurityDialog .a2s-sub label { color: #c0cbe1 !important; }
#aeoteeSecurityDialog .a2s-sub input,
#aeoteeSecurityDialog .a2s-sub textarea {
  border-color: rgba(177,191,226,.18) !important;
  background: #080e19 !important;
  color: #eff2ff !important;
}
#aeoteeSecurityDialog .a2s-device { border-bottom-color: rgba(177,191,226,.12) !important; }
#aeoteeSecurityDialog .a2s-device small { color: #94a0bd !important; }

/* Recipient-key verification remains prominent and intentionally explicit. */
body #aeotee-e2ee-verification-modal { background: rgba(4,7,14,.82) !important; backdrop-filter: blur(11px) !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-card {
  border: 1px solid rgba(177,191,226,.2) !important;
  border-radius: 23px !important;
  background: linear-gradient(150deg,#151d2e,#0e1523) !important;
  color: #eef1ff !important;
  box-shadow: 0 28px 100px rgba(0,0,0,.56) !important;
}
body #aeotee-e2ee-verification-modal .aeotee-e2ee-title h2 { color: #f4f3ff !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-title p,
body #aeotee-e2ee-verification-modal .aeotee-e2ee-secondary { color: #9ba7c1 !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-warning { border-color: rgba(231,181,76,.24) !important; border-radius: 13px !important; background: rgba(215,166,68,.1) !important; color: #f0d38e !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-label { color: #9faaca !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-fingerprint { border-color: rgba(177,191,226,.18) !important; border-radius: 13px !important; background: #080e19 !important; color: #d3cbff !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-check { color: #cdd5e9 !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-actions button { border: 1px solid rgba(177,191,226,.13) !important; border-radius: 11px !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-cancel,
body #aeotee-e2ee-verification-modal .aeotee-e2ee-copy { background: #202a3d !important; color: #dde3f3 !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-verify { background: linear-gradient(120deg,#806bed,#6553cd) !important; color: #fff !important; }
body #aeotee-e2ee-verification-modal .aeotee-e2ee-verify:disabled { opacity: .42; cursor: not-allowed; }

@media (max-width: 980px) {
  body { padding: 9px; }
  .app { height: calc(100dvh - 18px); border-radius: 23px; }
  .app .sidebar { flex-basis: 290px; }
  .app .messages { padding-right: 5%; padding-left: 5%; }
}
@media (max-width: 680px) {
  body { padding: 0; overflow: hidden; }
  .app { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .app .sidebar { flex: 1 1 100%; width: 100%; border-right: 0; }
  .app .chat { display: none; flex: 1 1 100%; width: 100%; }
  .app.mobile-chat-open .sidebar { display: none; }
  .app.mobile-chat-open .chat { display: flex; }
  .app .brand { min-height: 78px; padding: 17px 18px 11px; }
  .app .sidebar-intro { padding: 9px 20px 15px; }
  .app .search { padding-right: 16px; padding-left: 16px; }
  #userList { padding: 4px 12px 18px; }
  .app .chat-header { min-height: 70px; padding: 11px 12px; gap: 9px; }
  .app .mobile-back { display: grid; }
  .app .chat-header > .avatar { flex-basis: 40px; width: 40px; height: 40px; border-radius: 14px; }
  .app .person b { font-size: 12px; }
  .app .actions { gap: 5px; }
  .app .actions button { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
  .app .messages { padding: 17px 13px 22px; }
  .app .bubble { max-width: 86%; padding: 10px 12px 9px; }
  .app .composer { gap: 5px; padding: 9px 9px max(10px, env(safe-area-inset-bottom)); }
  .app .composer button { flex-basis: 33px; width: 33px; height: 36px; border-radius: 11px; font-size: 14px; }
  .app .composer input { min-height: 42px; padding: 10px 12px; border-radius: 13px; font-size: 12px; }
  .app .composer .send { flex-basis: 38px; width: 38px; height: 40px; }
  .app .reply-bar { padding: 9px 12px; }
  #aeoteeSecurityDialog .a2s-panel { max-height: calc(100dvh - 24px) !important; }
}
@media (max-width: 390px) {
  .app .actions button { display: none; }
  .app .chat-header { gap: 7px; }
  .app .composer { gap: 4px; }
  .app .composer #gifBtn { display: none; }
}
@media (max-height: 640px) and (min-width: 681px) {
  body { padding: 7px; }
  .app { height: calc(100dvh - 14px); border-radius: 20px; }
  .app .brand { min-height: 66px; padding-top: 12px; padding-bottom: 8px; }
  .app .sidebar-intro { padding-top: 7px; padding-bottom: 10px; }
  .app .chat-header { min-height: 66px; padding-top: 10px; padding-bottom: 10px; }
  .app .composer { padding-top: 9px; padding-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The device-approval action is injected by the trust workflow at runtime. */
#aeoteeApproveDeviceBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 46px !important;
  margin: 0 14px 10px !important;
  padding: 11px 13px !important;
  width: calc(100% - 28px) !important;
  border: 1px solid rgba(144,121,255,.22) !important;
  border-radius: 13px !important;
  background: rgba(144,121,255,.08) !important;
  color: #c9c1ff !important;
  font: 700 11px/1.4 Inter,ui-sans-serif,system-ui,sans-serif !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .18s ease,border-color .18s ease,color .18s ease !important;
}
#aeoteeApproveDeviceBtn:hover:not(:disabled) {
  border-color: rgba(144,121,255,.42) !important;
  background: rgba(144,121,255,.14) !important;
  color: #f1edff !important;
}
#aeoteeApproveDeviceBtn:disabled { opacity: .55 !important; cursor: wait !important; }