/* Chat WhatsApp-like */
#secret-page {
  display: flex; flex-direction: column;
  height: 100dvh; max-height: 100dvh;
  width: 100%; max-width: 100vw;
  overflow: hidden;
  background-color: var(--wa-bg);
  background-image:
    radial-gradient(ellipse at top, rgba(26,42,50,.9) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%231e2a30' stroke-width='1.2' opacity='.55'%3E%3Cpath d='M20 40c8-12 24-12 32 0M70 30c6 10 22 10 28 0M120 45c7-9 20-7 24 4'/%3E%3Ccircle cx='40' cy='90' r='8'/%3E%3Cpath d='M90 80h28M90 88h18'/%3E%3Cpath d='M20 130c10 0 10-12 20-12s10 12 20 12'/%3E%3Crect x='115' y='100' width='22' height='16' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
  position: relative;
}
body.light-mode #secret-page {
  background-color: #efeae2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d5cdc0' stroke-width='1.2' opacity='.65'%3E%3Cpath d='M20 40c8-12 24-12 32 0M70 30c6 10 22 10 28 0M120 45c7-9 20-7 24 4'/%3E%3Ccircle cx='40' cy='90' r='8'/%3E%3Cpath d='M90 80h28M90 88h18'/%3E%3Cpath d='M20 130c10 0 10-12 20-12s10 12 20 12'/%3E%3Crect x='115' y='100' width='22' height='16' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.secret-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px;
  padding-top: calc(8px + var(--safe-t));
  background: var(--wa-header); min-height: 58px; z-index: 20;
}
body.light-mode .secret-header { background: var(--wa-teal); }

.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--wa-green), #128c7e);
  color: #fff; display: grid; place-items: center; font-weight: 700;
}
.header-info { min-width: 0; }
.header-info h1 {
  font-size: 1rem; font-weight: 600; color: var(--wa-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.light-mode .header-info h1 { color: #fff; }
.status-indicator {
  font-size: .72rem; color: var(--wa-muted);
  display: flex; align-items: center; gap: 5px;
}
body.light-mode .status-indicator { color: rgba(255,255,255,.85); }
.online-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--wa-green);
  animation: blink 2s infinite;
}

.header-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; color: var(--wa-muted); cursor: pointer;
  display: grid; place-items: center; font-size: 1rem;
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: var(--wa-text); }
body.light-mode .icon-btn { color: rgba(255,255,255,.9); }

.overflow-wrap { position: relative; display: none; }
.overflow-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px; background: #233138; border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; z-index: 80;
  animation: popIn .16s var(--ease);
}
.overflow-dropdown.open { display: block; }
.overflow-item {
  width: 100%; border: 0; background: none; color: var(--wa-text);
  padding: 13px 16px; text-align: left; cursor: pointer;
  display: flex; gap: 12px; align-items: center; font-size: .9rem;
}
.overflow-item:hover { background: rgba(255,255,255,.06); }
.overflow-item i { width: 18px; color: var(--wa-muted); text-align: center; }

.call-pill-wrap { position: relative; }
.call-pill-btn {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: var(--wa-text); border-radius: 999px; padding: 7px 12px;
  cursor: pointer; font-size: .82rem;
}
.call-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: #233138; border-radius: 12px; min-width: 160px;
  box-shadow: var(--shadow); overflow: hidden; z-index: 80;
}
.call-dropdown.open { display: block; animation: popIn .16s var(--ease); }
.call-dropdown-item {
  width: 100%; border: 0; background: none; color: var(--wa-text);
  padding: 12px 14px; text-align: left; cursor: pointer;
  display: flex; gap: 10px; align-items: center;
}
.call-dropdown-item:hover { background: rgba(255,255,255,.06); }

@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .overflow-wrap { display: block; }
}
@media (min-width: 721px) {
  .mobile-only { display: none !important; }
}

.chat-container {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.chat-messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 12px 6vw 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .chat-messages {
    padding-left: max(6vw, calc(50% - 420px));
    padding-right: max(6vw, calc(50% - 420px));
  }
}

.day-sep {
  display: flex; justify-content: center; margin: 14px 0 10px;
}
.day-sep span {
  background: #182229; color: var(--wa-muted);
  font-size: .72rem; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  text-transform: capitalize;
}
body.light-mode .day-sep span { background: #fff; color: #667781; }

.message-wrap {
  display: flex; flex-direction: column; margin: 2px 0 3px;
  max-width: min(85%, 520px); position: relative;
}
.message-wrap.is-new {
  animation: fadeUp .22s var(--ease);
}
.message-wrap.own { align-self: flex-end; align-items: flex-end; }
.message-wrap.other { align-self: flex-start; align-items: flex-start; }
.message-wrap.selected .message-bubble {
  outline: 2px solid rgba(37,211,102,.55);
  box-shadow: 0 0 0 4px rgba(37,211,102,.12);
}

.message-bubble {
  position: relative;
  background: var(--wa-in); color: var(--wa-text);
  border-radius: 10px 10px 10px 3px;
  padding: 7px 10px 18px; min-width: 72px;
  box-shadow: 0 1px 1px rgba(0,0,0,.18);
  word-break: break-word;
  user-select: none;
  -webkit-user-select: none;
}
.message-wrap.own .message-bubble {
  background: var(--wa-out);
  border-radius: 10px 10px 3px 10px;
}
body.light-mode .message-bubble { background: #fff; color: #111; }
body.light-mode .message-wrap.own .message-bubble { background: #d9fdd3; color: #111; }
.message-bubble.pending { opacity: .7; }

.message-username {
  font-size: .72rem; font-weight: 700; color: var(--wa-green); margin-bottom: 3px;
}
.message-text { font-size: .95rem; line-height: 1.4; white-space: pre-wrap; }
.reply-context {
  background: rgba(0,0,0,.18); border-left: 3px solid var(--wa-green);
  border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: .78rem; color: var(--wa-muted);
}
.reply-context strong { display: block; color: var(--wa-green); font-size: .72rem; }

.message-media { margin-top: 6px; border-radius: 8px; overflow: hidden; }
.message-media img, .message-media video {
  display: block; max-width: 100%; max-height: 320px; border-radius: 8px;
}
.message-media a { color: var(--wa-green); font-size: .88rem; }

.message-meta {
  position: absolute; right: 8px; bottom: 4px;
  display: flex; align-items: center; gap: 4px;
  font-size: .65rem; color: rgba(233,237,239,.65);
}
body.light-mode .message-meta { color: #667781; }
.edited-tag { font-style: italic; opacity: .8; }
.seen-icon { color: #53bdeb; }

.msg-chevron {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.25); color: var(--wa-text);
  opacity: 0; pointer-events: none; cursor: pointer;
  display: grid; place-items: center; font-size: .7rem;
}
.message-wrap.own .msg-chevron { left: 4px; right: auto; }
@media (hover: hover) and (pointer: fine) {
  .message-wrap:hover .msg-chevron { opacity: 1; pointer-events: auto; }
}
@media (hover: none), (pointer: coarse) {
  .msg-chevron { display: none !important; }
}

.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reaction-item {
  background: rgba(0,0,0,.2); border-radius: 999px; padding: 2px 7px;
  font-size: .78rem; cursor: pointer;
}

.chat-input-area {
  flex-shrink: 0;
  padding: 6px 10px calc(8px + var(--safe-b));
  background: var(--wa-panel);
}
body.light-mode .chat-input-area { background: #f0f2f5; }

.reply-indicator, .selection-bar {
  display: none; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px; margin-bottom: 6px;
  background: rgba(255,255,255,.04); border-radius: 10px; color: var(--wa-text);
  font-size: .85rem;
}
.reply-indicator.open, .selection-bar.open { display: flex; }
.cancel-reply-btn, .sel-btn {
  border: 0; background: transparent; color: var(--wa-muted); cursor: pointer; padding: 6px;
}
.selection-bar .sel-actions { display: flex; gap: 2px; }

.file-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.file-chip {
  position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: var(--wa-input); display: grid; place-items: center; color: var(--wa-muted);
}
.file-chip img { width: 100%; height: 100%; object-fit: cover; }
.file-chip video { width: 100%; height: 100%; object-fit: cover; }
.file-chip .fa-video { position: absolute; color: #fff; font-size: .85rem; text-shadow: 0 1px 3px #000; }
.file-chip.audio-chip {
  width: auto; min-width: 88px; padding: 0 12px; gap: 8px;
  flex-direction: row; color: var(--wa-green); font-size: .8rem; font-weight: 600;
}
.file-chip.audio-chip i { font-size: 1rem; }
.file-chip button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; cursor: pointer;
}

.input-row { display: flex; align-items: flex-end; gap: 8px; }
.input-box {
  flex: 1; display: flex; align-items: flex-end; gap: 2px;
  background: var(--wa-input); border-radius: 24px; padding: 4px 8px 4px 2px;
  min-height: 46px;
}
body.light-mode .input-box { background: #fff; }
.attach-plus, .emoji-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--wa-muted); cursor: pointer;
  display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0;
}
#message-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--wa-text); font-size: 1rem; line-height: 1.35;
  max-height: 120px; resize: none; padding: 10px 4px; font-family: inherit;
}
body.light-mode #message-input { color: #111; }
.action-btn {
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--wa-teal); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
}
.action-btn.recording { background: #e11d48; animation: blink 1s infinite; }

.attach-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.attach-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.attach-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%);
  width: min(480px, 100%); background: #233138; border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(18px + var(--safe-b)); z-index: 91;
  transition: transform .28s var(--ease); box-shadow: var(--shadow);
}
.attach-sheet.open { transform: translate(-50%, 0); }
.attach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: center;
}
.attach-opt {
  border: 0; background: none; color: var(--wa-text); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .75rem;
}
.attach-opt .ico {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.25rem; color: #fff;
}
.attach-opt .ico.photo { background: #7c3aed; }
.attach-opt .ico.camera { background: #0d9488; }
.attach-opt .ico.video { background: #dc2626; }
.attach-opt .ico.doc { background: #5285ec; }
.attach-opt .ico.audio { background: #f59e0b; }

/* Câmara in-app */
.pinora-camera {
  position: fixed; inset: 0; z-index: 200;
  background: #000; display: flex; flex-direction: column;
}
.pinora-camera.hidden { display: none !important; }
.cam-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-t, env(safe-area-inset-top, 0px))) 12px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  color: #fff;
}
.cam-title { font-weight: 700; font-size: .95rem; }
.cam-btn {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem;
}
.cam-video {
  flex: 1; width: 100%; height: 100%; object-fit: cover; background: #111;
}
.cam-canvas { display: none; }
.cam-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-around;
  padding: 18px 24px calc(28px + var(--safe-b, env(safe-area-inset-bottom, 0px)));
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.cam-mode {
  border: 0; background: transparent; color: rgba(255,255,255,.55);
  font-weight: 700; font-size: .85rem; cursor: pointer; min-width: 64px;
}
.cam-mode.active { color: #fff; }
.cam-shutter {
  width: 72px; height: 72px; border-radius: 50%;
  border: 4px solid #fff; background: #fff; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.cam-shutter.video { background: #ef4444; border-color: #fff; }
.cam-shutter.recording {
  border-radius: 16px; width: 56px; height: 56px; background: #ef4444;
}
.cam-hint {
  position: absolute; left: 0; right: 0; bottom: calc(110px + var(--safe-b, 0px));
  text-align: center; color: rgba(255,255,255,.8); font-size: .8rem; z-index: 2;
  pointer-events: none; margin: 0;
}
.cam-rec-badge {
  position: absolute; top: calc(64px + var(--safe-t, 0px)); left: 50%;
  transform: translateX(-50%); z-index: 2;
  background: rgba(220,38,38,.92); color: #fff; font-weight: 700;
  font-size: .8rem; padding: 6px 12px; border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
}
.cam-rec-badge .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: blink .8s infinite;
}

.msg-menu-backdrop {
  position: fixed; inset: 0; z-index: 100; display: none;
}
.msg-menu-backdrop.open { display: block; }
.msg-menu {
  position: fixed; z-index: 101; width: min(260px, calc(100vw - 24px));
  background: #233138; border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; animation: popIn .16s var(--ease);
}
.msg-menu-react {
  display: flex; gap: 4px; padding: 10px; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.msg-menu-react button {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; font-size: 1.25rem; cursor: pointer;
}
.msg-menu-item {
  width: 100%; border: 0; background: none; color: var(--wa-text);
  padding: 13px 16px; display: flex; align-items: center; gap: 14px;
  font-size: .92rem; cursor: pointer; text-align: left;
}
.msg-menu-item:hover { background: rgba(255,255,255,.06); }
.msg-menu-item i { width: 20px; color: var(--wa-muted); text-align: center; }
.msg-menu-item.danger { color: #f87171; }
.msg-menu-sep { height: 1px; background: rgba(255,255,255,.06); margin: 2px 0; }

.typing-indicator {
  display: none; align-items: center; gap: 8px;
  padding: 0 6vw 6px; color: var(--wa-muted); font-size: .78rem;
}
.loading, .empty-hint { color: var(--wa-muted); text-align: center; padding: 40px 20px; }

.custom-audio-player {
  display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 4px 0;
}
.cap-play {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--wa-green); color: #073b1e; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
.cap-right { flex: 1; min-width: 0; }
.cap-canvas { width: 100%; height: 28px; display: block; cursor: pointer; }
.cap-bottom { display: flex; justify-content: space-between; margin-top: 2px; }
.cap-time, .cap-speed { font-size: .68rem; color: var(--wa-muted); border: 0; background: transparent; }
.cap-speed { cursor: pointer; }

.edit-textarea {
  width: 100%; border: 0; border-radius: 8px; padding: 8px;
  background: rgba(0,0,0,.2); color: inherit; font: inherit; resize: vertical;
}
.edit-actions { display: flex; gap: 8px; margin-top: 6px; }
.edit-actions button {
  border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer;
  background: var(--wa-green); color: #073b1e; font-weight: 600;
}
.edit-actions button:last-child { background: rgba(255,255,255,.1); color: var(--wa-text); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
  padding: 20px; animation: fadeUp .2s var(--ease);
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox video {
  max-width: min(96vw, 960px); max-height: 88dvh;
  border-radius: 10px; box-shadow: var(--shadow);
}
.lightbox-close {
  position: absolute; top: calc(12px + var(--safe-t)); right: 14px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 1.1rem;
}
.lightbox-dl {
  position: absolute; bottom: calc(16px + var(--safe-b)); right: 16px;
  border: 0; border-radius: 999px; padding: 10px 16px;
  background: var(--wa-teal); color: #fff; cursor: pointer; font-weight: 600;
}

/* Emoji panel */
.emoji-panel {
  display: none; flex-wrap: wrap; gap: 4px;
  padding: 8px; margin-bottom: 6px;
  background: rgba(255,255,255,.04); border-radius: 12px;
  max-height: 140px; overflow-y: auto;
}
.emoji-panel.open { display: flex; }
.emoji-panel button {
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; font-size: 1.25rem; cursor: pointer;
}
.emoji-panel button:hover { background: rgba(255,255,255,.08); }

/* Hold-to-record hint */
.rec-hint {
  display: none; align-items: center; gap: 10px;
  color: #f87171; font-size: .85rem; padding: 4px 8px 8px;
}
.rec-hint.open { display: flex; }
.rec-hint .pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #e11d48;
  animation: blink .8s infinite;
}

.message-media img { cursor: zoom-in; }