/* =========================================================
   V8 — APP SHELL
   Makes the web app feel like an installed app. Loaded last.
   ========================================================= */

/* ---------- No "web page" tells (all devices) ---------- */

html,
body {
  overscroll-behavior-y: none;
}

button,
[role="button"],
.v6-mobile-dock,
.top-bar,
.chat-header,
.sidebar-nav,
.character-card,
.group-card,
.history-item {
  -webkit-user-select: none;
  user-select: none;
}

img,
video {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

@media (hover: none) and (pointer: coarse) {
  /* Long-press opens Chati's own menu (with Copy) instead of the system
     text-selection callout. */
  .message,
  .message * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ---------- Compact header (phones) ---------- */

.v8-compact-header {
  display: none;
}

@media (max-width: 760px) {
  .v8-compact-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: calc(env(safe-area-inset-top, 0px) + 48px);
    padding-bottom: 12px;
    background: rgba(11, 11, 15, .78);
    border-bottom: 1px solid rgba(120, 116, 140, .18);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .v8-compact-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  body.v8-header-compact .v8-compact-header {
    opacity: 1;
    transform: none;
  }

  html[data-chati-theme="light"] .v8-compact-header {
    background: rgba(246, 245, 250, .82);
    border-bottom-color: rgba(0, 0, 0, .08);
  }
}

/* ---------- Navigation: dock only, no floating ☰ (phones) ---------- */

@media (max-width: 760px) {
  .mobile-sidebar-btn {
    display: none !important;
  }

  /* The space that was reserved for the floating ☰ button. */
  .main-content {
    padding-top: 0 !important;
  }

  #homeView .top-bar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    margin-top: 0 !important;
  }

  /* The "Chats" tab shows the recent-chats list as a full page. */
  .sidebar.mobile-open {
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    background: #0d0d12 !important;
    animation: v8-tab-in .18s ease both;
  }

  html[data-chati-theme="light"] .sidebar.mobile-open {
    background: #f6f5fa !important;
  }

  .sidebar-mobile-overlay {
    display: none !important;
  }

  /* Home and Create already live in the dock. */
  .sidebar.mobile-open #chatsBtn,
  .sidebar.mobile-open #createBtn,
  .sidebar.mobile-open #sidebarCollapseBtn {
    display: none !important;
  }
}

@keyframes v8-tab-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Native-style screen transitions (phones) ---------- */

@keyframes v8-push-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes v8-back-in {
  from { opacity: .4; transform: translateX(-24%); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  #chatView:not(.hidden) {
    animation: v8-push-in .3s cubic-bezier(.2, .8, .2, 1) both;
  }

  #homeView:not(.hidden) {
    animation: v8-back-in .26s cubic-bezier(.2, .8, .2, 1) both;
  }

  #createView:not(.hidden),
  #groupCreateView:not(.hidden),
  #characterCreateView:not(.hidden) {
    animation: v8-push-in .3s cubic-bezier(.2, .8, .2, 1) both;
  }
}

/* ---------- Bottom sheets instead of floating menus (phones) ---------- */

@keyframes v8-sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (max-width: 760px) {
  #newChatMenu:not(.hidden),
  #chatMenu:not(.hidden),
  #mediaAttachMenu:not(.hidden),
  #messageContextMenu:not(.hidden) {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 9500 !important;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px) * 0) !important;
    border-radius: 22px !important;
    transform: none;
    /* Dim the page behind the sheet. Taps outside still close it. */
    box-shadow:
      0 0 0 100vmax rgba(0, 0, 0, .5),
      0 -8px 40px rgba(0, 0, 0, .35) !important;
    animation: v8-sheet-up .26s cubic-bezier(.2, .8, .2, 1) both;
  }

  #newChatMenu:not(.hidden) button,
  #chatMenu:not(.hidden) button,
  #mediaAttachMenu:not(.hidden) button,
  #messageContextMenu:not(.hidden) button {
    min-height: 48px;
    font-size: 16px;
  }

  /* Grab handle on top of each sheet. */
  #newChatMenu:not(.hidden)::before,
  #chatMenu:not(.hidden)::before,
  #mediaAttachMenu:not(.hidden)::before,
  #messageContextMenu:not(.hidden)::before {
    content: "";
    display: block;
    width: 38px;
    height: 5px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: rgba(160, 156, 180, .45);
  }

  .memory-modal:not(.hidden) {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .memory-modal:not(.hidden) .memory-panel {
    width: 100% !important;
    max-width: none !important;
    max-height: 90vh !important;
    border-radius: 24px 24px 0 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    animation: v8-sheet-up .3s cubic-bezier(.2, .8, .2, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  #chatView:not(.hidden),
  #homeView:not(.hidden),
  #createView:not(.hidden),
  #groupCreateView:not(.hidden),
  #characterCreateView:not(.hidden),
  .sidebar.mobile-open,
  #newChatMenu:not(.hidden),
  #chatMenu:not(.hidden),
  #mediaAttachMenu:not(.hidden),
  #messageContextMenu:not(.hidden),
  .memory-modal:not(.hidden) .memory-panel {
    animation: none !important;
  }
}

/* =========================================================
   DESKTOP: three columns (icon rail · chat list · content)
   ========================================================= */

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .sidebar:not(.is-collapsed) {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);
    /* The nav spans the flexible row, so it never stretches the rows next
       to the search box. */
    grid-template-rows: auto auto 1fr auto auto auto;
    grid-template-areas:
      "brand search"
      "nav   private"
      "nav   history"
      "icons history"
      "prof  history"
      "set   history";
    width: 384px !important;
    min-width: 384px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
  }

  /* Column 1: the icon rail. */
  .sidebar:not(.is-collapsed)::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    background: rgba(0, 0, 0, .22);
    border-right: 1px solid rgba(120, 116, 140, .16);
  }

  .sidebar:not(.is-collapsed) > * {
    position: relative;
    z-index: 1;
  }

  .sidebar:not(.is-collapsed) .sidebar-brand-row {
    grid-area: brand;
    justify-content: center;
    padding: 16px 0 10px !important;
    margin: 0 !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-brand {
    width: 48px !important;
    min-width: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    overflow: visible;
  }

  .sidebar:not(.is-collapsed) .sidebar-brand-mark {
    margin: 0 !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-brand-name,
  .sidebar:not(.is-collapsed) .sidebar-collapse-btn {
    display: none !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-nav {
    grid-area: nav;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0 !important;
    margin: 0 !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-nav .nav-btn,
  .sidebar:not(.is-collapsed) .settings-btn {
    width: 46px !important;
    height: 46px !important;
    min-height: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 14px !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-nav .sidebar-label,
  .sidebar:not(.is-collapsed) .settings-btn .sidebar-label {
    display: none !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-nav .nav-btn::before {
    display: none !important;
  }

  .sidebar:not(.is-collapsed) .v6-account-icons {
    grid-area: icons;
    justify-self: center;
  }

  .sidebar:not(.is-collapsed) .v6-profile-button {
    grid-area: prof;
    justify-self: center;
    width: 46px !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 6px 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    overflow: hidden;
  }

  .sidebar:not(.is-collapsed) .v6-profile-button > :first-child {
    margin: 0 !important;
  }

  .sidebar:not(.is-collapsed) .v6-profile-button > :not(:first-child) {
    display: none !important;
  }

  .sidebar:not(.is-collapsed) .settings-btn {
    grid-area: set;
    justify-self: center;
    margin: 0 0 16px !important;
  }

  /* Column 2: search + recent chats. */
  .sidebar:not(.is-collapsed) .sidebar-search {
    grid-area: search;
    align-self: end;
    margin: 16px 14px 6px !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-search[data-shortcut]::after {
    content: attr(data-shortcut);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    opacity: .5;
    border: 1px solid rgba(160, 156, 180, .35);
    border-radius: 6px;
    pointer-events: none;
  }

  .sidebar:not(.is-collapsed) .sidebar-search:focus-within::after {
    display: none;
  }

  .sidebar:not(.is-collapsed) .sidebar-private-indicator {
    grid-area: private;
    margin: 4px 14px !important;
  }

  .sidebar:not(.is-collapsed) .sidebar-divider {
    display: none !important;
  }

  .sidebar:not(.is-collapsed) .chat-history-section {
    grid-area: history;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 10px 16px !important;
    margin: 0 !important;
  }
}

/* =========================================================
   INSTALLED DESKTOP APP: blend the title bar into the app
   ========================================================= */

@media (display-mode: window-controls-overlay) {
  body {
    padding-top: env(titlebar-area-height, 0px);
  }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: env(titlebar-area-x, 0px);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 0px);
    z-index: 99999;
    -webkit-app-region: drag;
    app-region: drag;
  }
}

/* =========================================================
   SKELETON LOADERS (shown until the app renders real data)
   ========================================================= */

@keyframes v8-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

.v8-skeleton-card,
.v8-skeleton-row i,
.v8-skeleton-row span,
.v8-skeleton-card span {
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, .03) 30%,
      rgba(255, 255, 255, .08) 50%,
      rgba(255, 255, 255, .03) 70%) 0 0 / 200% 100%,
    rgba(255, 255, 255, .03);
  animation: v8-shimmer 1.4s ease-in-out infinite;
}

.v8-skeleton-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: 1px solid rgba(120, 116, 140, .14);
}

.v8-skeleton-card span {
  position: absolute;
  left: 14px;
  height: 12px;
  border-radius: 6px;
}

.v8-skeleton-card span:first-child { bottom: 40px; width: 45%; height: 14px; }
.v8-skeleton-card span:last-child { bottom: 18px; width: 70%; }

.v8-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.v8-skeleton-row i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
}

.v8-skeleton-row span {
  height: 12px;
  width: 60%;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .v8-skeleton-card,
  .v8-skeleton-row i,
  .v8-skeleton-row span,
  .v8-skeleton-card span {
    animation: none;
  }
}

/* =========================================================
   EXPLORE (starter characters on Home)
   ========================================================= */

.v8-explore {
  margin-top: 34px;
  padding-bottom: 8px;
}

.v8-explore-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.v8-explore-head p {
  margin: 0 0 14px;
  font-size: 13.5px;
  opacity: .65;
}

.v8-explore-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 16px;
}

.v8-explore-card {
  padding: 0;
  border: 1px solid rgba(120, 116, 140, .2);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 760px) {
  /* A swipeable row on phones, like app stores and Botify. */
  .v8-explore-row {
    display: flex;
    gap: 12px;
    margin: 0 -16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .v8-explore-row::-webkit-scrollbar {
    display: none;
  }

  .v8-explore-card {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }
}

/* ---------- Language picker in Settings ---------- */

.v8-language-select {
  flex: 0 0 auto;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(140, 136, 160, .35);
  border-radius: 10px;
}

/* With Explore below it, the "no characters yet" hint becomes a compact card. */
#homeView:has(#v8ExploreSection) .empty-state:not(.hidden) {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 8px !important;
  padding: 26px 18px !important;
  border: 1px dashed rgba(140, 136, 160, .3);
  border-radius: 18px;
}

#homeView:has(#v8ExploreSection) .empty-state .empty-icon,
#homeView:has(#v8ExploreSection) .empty-state > :first-child:not(h3):not(p):not(button) {
  transform: scale(.75);
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  #homeView {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
}