/* Love Ocean: halaman Botolku (daftar percakapan layar penuh). Dipakai oleh js/mine.js */
.mine-page{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:#fff;color:#1c1b3a;
  padding-top:env(safe-area-inset-top,0px);animation:mineIn .25s var(--ease)}
.mine-page[hidden]{display:none!important}
.mine-bar{flex:none;display:flex;align-items:center;gap:14px;height:60px;padding:0 10px 0 6px;background:#fff}
.mine-back{width:44px;height:44px;border:0;border-radius:50%;background:none;color:#1c1b3a;display:grid;place-items:center}
.mine-back:active{background:rgba(28,27,58,.08)}
.mine-back .ic{width:26px;height:26px}
.mine-bar h2{margin:0;font-family:var(--sans);font-size:22px;font-weight:500;line-height:1.2;color:#1c1b3a}

.mine-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 calc(96px + env(safe-area-inset-bottom,0px))}
.chat-row{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:10px 16px;border:0;background:none;text-align:left;color:inherit;font:inherit}
.chat-row:active{background:rgba(28,27,58,.06)}
.chat-row:focus-visible{outline:3px solid #ff5f84;outline-offset:-3px}
.c-ava{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 35% 30%,#fff6,transparent 55%),var(--mood,#ff5f84);box-shadow:0 2px 8px rgba(28,27,58,.18)}
.c-ava .ic{width:26px;height:26px}
.c-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.c-top,.c-bot{display:flex;align-items:center;gap:10px;min-width:0}
.c-name{flex:1;min-width:0;font-size:17px;font-weight:500;color:#1c1b3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-time{flex:none;font-size:12.5px;color:#8b8b97}
.c-prev{flex:1;min-width:0;font-size:15px;color:#8b8b97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-badge{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff5f84;color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center}
.chat-row.unread .c-name{font-weight:700}
.chat-row.unread .c-prev{color:#3b3a55}
.chat-row.unread .c-time{color:#e5557c;font-weight:600}
.mine-empty{padding:56px 28px;text-align:center;color:#8b8b97;line-height:1.6;font-size:15px}

.mine-fab{position:absolute;right:18px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;
  color:#3a0f22;background:linear-gradient(135deg,#ffc9a8,#ff5f84);box-shadow:0 8px 22px rgba(255,95,132,.5)}
.mine-fab:active{transform:scale(.95)}
.mine-fab .ic{width:26px;height:26px}
@keyframes mineIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){@keyframes mineIn{from{opacity:0}to{opacity:1}}}

/* ---------- desktop: halaman penuh dengan kartu dalam grid ---------- */
@media (min-width:700px){
  .mine-page{inset:0;width:auto;height:auto;max-width:none;transform:none;border-radius:0;box-shadow:none;padding-top:0;background:#f4f3f9}
  .mine-bar{--g:max(24px,calc((100% - 1180px)/2));height:72px;padding:0 var(--g);gap:16px;background:#fff;border-bottom:1px solid rgba(28,27,58,.1)}
  .mine-bar h2{font-size:26px;font-weight:600}
  .mine-list{--g:max(24px,calc((100% - 1180px)/2));display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-content:start;
    padding:28px var(--g) 110px}
  .chat-row{background:#fff;border:1px solid rgba(28,27,58,.08);border-radius:18px;padding:16px;min-height:96px;box-shadow:0 1px 3px rgba(28,27,58,.06);
    transition:transform .15s,box-shadow .15s}
  .c-ava{width:54px;height:54px}
  .mine-empty{grid-column:1/-1;padding:80px 20px}
  .mine-fab{cursor:pointer;right:max(28px,calc((100% - 1180px)/2));bottom:32px;width:62px;height:62px}
  .mine-list::-webkit-scrollbar{width:10px}
  .mine-list::-webkit-scrollbar-thumb{background:rgba(28,27,58,.2);border-radius:5px}
}

@media (min-width:700px) and (hover:hover){
  .chat-row:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(28,27,58,.12)}
  .mine-back:hover{background:rgba(28,27,58,.08)}
  .mine-fab:hover{filter:brightness(1.05);transform:translateY(-2px)}
}