:root{
  --bg: #0B1014;
  --panel: #12161B;
  --muted: #8E9399;
  --text: #F9F9F9;
  --divider: rgba(255,255,255,.06);
  --blue: #517AFF;
  --chip: #2B3036;
  --green: #22C55E;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

.dm-body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dm-app{
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
}

/* ================= Topbar ================= */
.dm-topbar{
  position: sticky;
  top: 0;
  z-index: 9999999;
  background: var(--bg);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--divider);
}

.dm-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.icon-btn{
  width: 42px;
  height: 42px;
  border:0;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.icon-btn:hover{ background: rgba(255,255,255,.06); }
.icon{ width: 22px; height: 22px; }

.dm-title{
  display:flex;
  flex-direction:column;
  line-height: 1.1;
  flex:1;
  min-width:0;
}
.dm-title-main{
  font-weight: 650;
  font-size: 16px;
}
.dm-title-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= Search ================= */
.dm-search{
  margin-top: 10px;
  position: relative;
}
.dm-search-icon{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  opacity: .95;
}
.dm-search-input{
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 999px;
  padding: 11px 12px 11px 40px;
  font-size: 16px;
  background: rgb(37,40,45);
  color: var(--muted);
}
.dm-search-input::placeholder{ color: var(--muted); }

/* ================= Stories ================= */
.dm-stories-wrap{
  position: relative;
  padding-top: 8px;
}
.dm-stories{
  display:flex;
  gap: 16px;
  padding: 12px 16px 8px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.dm-stories::-webkit-scrollbar{ height: 0; }

.dm-stories-fade{
  position:absolute;
  top: 8px;
  right: 0;
  height: 92px;
  width: 40px;
  pointer-events:none;
  background: linear-gradient(to left, var(--bg), transparent);
}

.story-item{
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

.story-avatar-container{
  width: 69px;
  height: 69px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  background: rgb(31,41,55);
}

.story-avatar{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.story-avatar[data-avatar-type="locked"]{
  filter: blur(4px);
  -webkit-filter: blur(4px);
  background: rgb(55,65,81);
}

.story-avatar-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  background: transparent;
}

.story-lock-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  color: var(--text);
}
.story-lock-overlay[data-locked="true"]{ display:flex; }
.story-lock-overlay .lock-icon{ width: 20px; height: 20px; }

.story-name{
  margin-top: 6px;
  width: 72px;
  text-align:center;
  font-size: 12px;
  color: rgba(229,231,231,1);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.blur-sm{
  filter: blur(4px);
  user-select:none;
  pointer-events:none;
}

/* ================= Mensagens header ================= */
.dm-messages-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px 6px;
}
.dm-h2{
  margin:0;
  font-size: 18px;
  font-weight: 700;
}
.dm-link{
  border:0;
  background: transparent;
  color: var(--blue);
  font-size: 14px;
  cursor: pointer;
}

/* ================= List ================= */
.dm-list-wrap{
  padding: 0 16px 64px;
}
.dm-list{ width: 100%; }

.message-item{
  display:flex;
  align-items:center;
  padding: 12px 0;
  transition: background-color 150ms;
}
.message-item[data-has-cursor="true"]{ cursor: pointer; }
.message-item:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

.message-avatar-wrapper{
  position: relative;
  margin-right: 12px;
  flex-shrink: 0;
}

.message-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(31, 41, 55);
}

/* APLICA O BLUR NA IMAGEM, MAS NÃO A ESCONDE */
.message-avatar[data-blurred="true"] .message-avatar-img {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transform: scale(1.06);
  opacity: .85;
}

/* Removemos aquele display:none antigo que sumia com a foto */
.message-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* O cadeado só aparece se tiver data-locked="true" explícito no container do cadeado, não no avatar */
.message-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  color: var(--text);
  background-color: rgba(0, 0, 0, .40);
}
.message-lock-overlay[data-locked="true"] { display: flex; }
.message-lock-overlay[data-locked="false"]{ display:none; }
.message-lock-overlay .lock-icon{ width: 22px; height: 22px; }

.online-indicator{
  position:absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: var(--green);
  border: 2px solid var(--bg);
  border-radius: 999px;
  display:none;
}
.online-indicator[data-online="true"]{ display:block; }

.message-content{
  flex:1;
  min-width: 0;
}

.message-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.message-name{
  font-size: 15px;
  color: #F6F6F6;
  font-weight: 500;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-shrink: 0;
}

.unread-indicator{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
  display:none;
}
.unread-indicator[data-unread="true"]{ display:block; }

.camera-icon{
  width: 19px;
  height: 19px;
  opacity: .45;
  display:none;
}
.camera-icon[data-blocked="true"]{ display:block; }

.verified-badge{
  width: 24px;
  height: 24px;
  display:none;
  opacity: .95;
}
.verified-badge[data-verified="true"]{ display:block; }
.verified-badge svg{ width:100%; height:100%; }

.message-preview{
  margin-top: 3px;
  display:flex;
  align-items:center;
  min-width:0;
  overflow:hidden;
  font-size: 13px;
}

.message-text-wrapper{
  display:flex;
  align-items:center;
  gap: 0;
  min-width:0;
  overflow:hidden;
  color: #A8A8A8;
}

.message-text{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 4px;
}
.message-text.bold{
  color: var(--text);
  font-weight: 800;
}

.message-time{
  color: #A8A8A8;
  flex-shrink: 0;
}
.message-time[data-show-time="false"]{ display:none; }

/* ================= Empty state ================= */
.dm-empty{
  padding: 28px 0;
  text-align: center;
  color: var(--muted);
}
.dm-empty-title{
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.dm-empty-sub{
  font-size: 14px;
}

/* Responsivo */
@media (min-width: 390px){
  .story-avatar-container{ width: 79px; height: 79px; }
}


/* =========================
   IG NOTES (Direct)
   ========================= */

/* =========================
   IG NOTES (Direct) - FIXED
   ========================= */

/* CLEAN NOTES (igual sua img 1) */

.notes-wrap{
  position: relative;
  padding: 12px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: visible;
}

.notes-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:visible;
  padding: 6px 16px 8px;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  touch-action: pan-x;
}
.notes-row::-webkit-scrollbar{display:none;}
.notes-row{scrollbar-width:none;}

.note-item{
  flex:0 0 auto;
  text-align:center;
  position:relative;
}

.note-btn{
  position:relative;
  width:fit-content;
  margin:0 auto;
  padding-top: 32px; /* SLOT FIXO do balão */
  background:none;
  border:none;
  cursor:pointer;
  overflow:visible !important;
}

.note-bubble-wrap{
  position:absolute;
  z-index:30;
  top: 0px;
  left:0;
  right:0;
  height: 28px;          /* mantém todos iguais */
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible !important;
}

.note-bubble{
  position:relative;
  max-width: 104px;          /* um pouco maior pra caber */
  padding: 6px 10px;
  border-radius: 14px; 
  background: rgba(38,38,38,.88);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  max-width: 92px; /* mais clean */
}

/* ===== NOTE MUSIC ===== */
.note-bubble.is-music{
  padding: 6px 10px;
  border-radius: 14px;
}

.note-music{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:100%;
}

.note-music-top{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
}

.note-music-title-wrap{
  overflow:hidden;
  white-space:nowrap;
  max-width:60px;
  flex:1;
}

.note-music-title{
  font-size:10px;
  line-height:1.2;
  font-weight:700;
  white-space:nowrap;
  display:inline-block;
  will-change: transform;
}

.note-music-artist{
  font-size:10px;
  line-height:1.2;
  color: rgba(249,249,249,.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
  text-align:center;
}

/* marquee só quando precisa */
@keyframes noteMarquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.note-music-title.marquee{
  animation: noteMarquee 9s linear infinite;
}

.note-music-waves{
  width:8px;
  height:10px;
  flex-shrink:0;
}

.note-music-waves rect{
  transform-origin: center;
  animation: wavePulse 1.1s ease-in-out infinite;
}

.note-music-waves rect:nth-child(2){ animation-delay: .15s; }
.note-music-waves rect:nth-child(3){ animation-delay: .30s; }

@keyframes wavePulse{
  0%,100% { transform: scaleY(.75); opacity:.85; }
  50%     { transform: scaleY(1.2); opacity:1; }
}

/* Mata o highlight do iOS (o "quadrado" feio ao tocar) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Evita menu de segurar (copiar/salvar/selecionar) */
html, body {
  -webkit-touch-callout: none;
}

/* Impede seleção/realce em itens clicáveis */
.message-item,
.message-item * ,
.note-item,
.note-item * {
  -webkit-user-select: none;
  user-select: none;
}

/* Evita arrastar/selecionar imagens */
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Remove contorno de foco que às vezes aparece como “seleção” */
.message-item:focus,
.message-item:active,
.message-item *:focus,
.message-item *:active {
  outline: none !important;
}

/* Se algum elemento estiver com background/box-shadow no :active, neutraliza */
.message-item:active {
  background: inherit !important;
  box-shadow: none !important;
}



/* remove rabinho (mais organizado) */
.note-bubble::after{ display:none; }

/* texto do balão: QUEBRA e não fica incompleto */
.note-text{
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* 2 linhas, igual seu print */
  -webkit-line-clamp: 2;

  overflow: hidden;          /* corta excesso, mas sem reticências */
  white-space: normal;       /* permite quebrar */
  word-break: break-word;    /* evita estourar */
  text-overflow: clip;       /* sem ... */

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:10px;
  line-height:1.15;
  color: rgb(249,249,249);
  max-width: 92px;           /* largura do balão */
}

/* muted mantém */
.note-text.muted{ color:#A8A8A8; }

.note-avatar{
  width:69px;
  height:69px;
  border-radius:999px;
  overflow:hidden;
  background: rgb(31,41,55);
  display:block;
  position:relative;
  z-index:1;
}
.note-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.80;
}

.note-label{
  margin-top:6px;
  width:64px;
  margin-left:auto;
  margin-right:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12.18px;
  color:#A8A8A8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* LOCK */
.note-item.is-locked .note-avatar img{
  filter: blur(5px);
  -webkit-filter: blur(5px);
  opacity: .80;
}