/* Layout moderno + micro-interações + PWA safe-area */
:root {
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 16px;
  --brand: #0ea5e9;
  --brand-2: #6366f1;
  --bg: #f6f8fb;
  --text: #0f172a;
  --gp-navbar-height: 64px;
}

html.dark { color-scheme: dark; }
body { background: linear-gradient(180deg, var(--bg) 0%, #eef2f7 100%); color: var(--text); }

.card{ border-radius: var(--radius); border:0; box-shadow: var(--shadow); }
.navbar.bg-navbar{
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(170%) blur(8px);
  box-shadow: 0 10px 30px rgba(2,8,23,.06);
}

/* Page fade-in */
body.page-fade-in { animation: pagefade .25s ease both; }
@keyframes pagefade { from { opacity:.0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

/* Ripple */
.ripple { position: relative; overflow: hidden; }
.ripple-press::after{
  content:""; position:absolute; left:50%; top:50%; width:220%; height:220%;
  transform: translate(-50%,-50%); border-radius:50%;
  background: radial-gradient(circle, rgba(14,165,233,.25) 10%, rgba(14,165,233,0) 60%);
  animation: rip .45s ease-out;
}
@keyframes rip { from { opacity:1; } to { opacity:0; } }

/* Tooltips um pouco mais suaves */
.tooltip .tooltip-inner{ border-radius: 10px; }

/* ===== CHATS (altura certa) ===== */
body.page-chats { overflow:hidden; height:100vh; }
.chat-shell{
  height: calc(100vh - var(--gp-navbar-height));
  padding: 1rem 1rem max(env(safe-area-inset-bottom, 0px), 1rem);
  overflow: hidden;
  box-sizing: border-box;
}
.chat-sidebar, .chat-main{
  height: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
.chat-main .card-body,
.chat-sidebar .card-body{ display:flex; flex-direction:column; min-height:0; }
#chatList{ flex: 1 1 auto; overflow:auto; min-height:0; }
#historyWrap{ flex:1 1 auto; overflow:auto; min-height:0; padding:.75rem; padding-bottom:.25rem; }

/* Bolhas */
.msg-bubble{
  max-width: clamp(220px, 85%, 820px);
  word-break: break-word;
  overflow-wrap: anywhere;
  border-radius: 12px;
}
.msg-meta{ display:flex; gap:.5rem; justify-content:space-between; }
.msg-text{ white-space: pre-wrap; }
.msg-media{ display:block; max-width:100%; height:auto; border-radius:.5rem; }
.file-line{ display:flex; align-items:center; gap:.5rem; }
.file-line .file-name{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }