/* Chat's landing tiles (chat-landing.js; owner, 2026-11-01). Chat's own tokens (chat-layout.css), so Dark and Light
   follow; LiveLoop alone wears the Sary-OS purple. */
#chat-landing {
  --cl-tile: #18181b;
  --cl-tile-hover: #202024;
  width: min(100%, 760px);
  margin: 0 auto 18px;
  padding: 0 4px;
  box-sizing: border-box;
  text-align: center;
  color: var(--chl-text, #ededee);
  font-family: Inter, system-ui, sans-serif;
}
#chat-landing[hidden] { display: none !important; }
:root.light-mode #chat-landing { --cl-tile: #ffffff; --cl-tile-hover: #f4f4f5; }

#chat-landing .cl-title { margin: 0 0 6px; font: 800 28px/1.2 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: inherit; }
#chat-landing .cl-sub { margin: 0 0 18px; font: 500 14px/1.5 Inter, system-ui, sans-serif; color: var(--chl-muted, #8b8b95); }

#chat-landing .cl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#chat-landing .cl-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 104px; padding: 14px 14px 12px;
  border: 1px solid var(--chl-border, #27272b); border-radius: 14px;
  background: var(--cl-tile); color: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#chat-landing .cl-tile:hover { background: var(--cl-tile-hover); transform: translateY(-1px); }
#chat-landing .cl-tile:focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; }
#chat-landing .cl-ico { font-size: 17px; color: var(--chl-muted, #8b8b95); }
#chat-landing .cl-head { margin-bottom: 4px; }
#chat-landing .cl-tile strong { font: 700 14px/1.25 Inter, system-ui, sans-serif; color: inherit; }
#chat-landing .cl-tile small { font: 500 12px/1.35 Inter, system-ui, sans-serif; color: var(--chl-muted, #8b8b95); }

/* LiveLoop: the Sary-OS purple, a slow light running round its edge, its badge on top. */
#chat-landing .cl-star { border-color: transparent; color: #fff; background: var(--cl-purple); overflow: hidden; isolation: isolate; box-shadow: 0 10px 26px rgba(124, 92, 255, .35); }
#chat-landing .cl-star:hover { background: var(--cl-purple); filter: brightness(1.06); }
#chat-landing .cl-star .cl-ico, #chat-landing .cl-star small { color: rgba(255, 255, 255, .86); }
#chat-landing .cl-star::before {
  content: ''; position: absolute; inset: -60%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .55) 80%, transparent 90%);
  animation: cl-spin 4.5s linear infinite;
}
#chat-landing .cl-star::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; border-radius: 12.5px; background: var(--cl-purple); }
#chat-landing .cl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
#chat-landing .cl-badge {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); color: #fff;
  font: 700 10.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap;
}
#chat-landing .cl-badge:empty { display: none; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #chat-landing .cl-star::before { animation: none; } }

/* Narrow windows: two columns. */
@media (max-width: 760px) {
  #chat-landing .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #chat-landing .cl-title { font-size: 22px; }
}
/* Short windows: the lines go, so the tiles and the box both fit. */
@media (max-height: 760px) {
  #chat-landing .cl-tile { min-height: 0; padding: 11px 12px; }
  #chat-landing .cl-tile small { display: none; }
  #chat-landing .cl-sub { margin-bottom: 12px; }
}