/* SATYA habitat terminal — docked module (compressed / visible / open). Uses the site font variables. */

.no-js .hab { display: none; }
.hab {
  --y: #FED804;
  --p: #7C3AED;
  --ink: #0A0A0B;
  --panel: #0E0E11;
  --line: rgba(255, 255, 255, .15);
  --text: #F4F2EC;
  --grey: #8C8C93;
  --sweep: 2.4s;
  box-sizing: border-box;
  position: fixed; right: 32px; bottom: 28px; z-index: 1000;
  width: 380px; height: 60px;
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .5);
  font-family: var(--sans);
  transition: height .38s cubic-bezier(.2, .8, .2, 1);
}
.hab[data-size="visible"] { height: 264px; }
.hab[data-size="open"] { height: min(600px, calc(100vh - 56px)); }
.hab *, .hab *::before, .hab *::after { box-sizing: border-box; }
.hab button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.hab :focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }

/* ---------- light bar: a bright pulse travels along the top line ---------- */
.hab__light { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5; pointer-events: none;
  background: rgba(254, 216, 4, .55); box-shadow: 0 0 8px rgba(254, 216, 4, .45); overflow: visible; }
.hab__light::after { content: ""; position: absolute; top: -1px; left: 0; width: 28%; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--y) 30%, #FFFBE0 50%, var(--y) 70%, transparent);
  box-shadow: 0 0 10px 2px rgba(254, 216, 4, .85), 0 0 26px 6px rgba(254, 216, 4, .35);
  animation: hab-sweep var(--sweep) linear infinite; }
@keyframes hab-sweep { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
@keyframes hab-orbit { to { transform: rotate(360deg); } }
/* compressed: a short bounce every few seconds to catch the eye */
.hab[data-size="compressed"] { animation: hab-bounce 5s ease-in-out 1.5s infinite; }
.hab[data-size="compressed"]:hover, .hab[data-size="compressed"]:focus-within { animation-play-state: paused; }
@keyframes hab-bounce {
  0%, 82%, 100% { transform: translateY(0); }
  86% { transform: translateY(-12px); }
  90% { transform: translateY(0); }
  93% { transform: translateY(-5px); }
  96% { transform: translateY(0); }
}
.hab[data-state="listening"] { --sweep: 1.8s; }
.hab[data-state="thinking"]  { --sweep: .9s; }
.hab[data-state="talking"]   { --sweep: 1.3s; }
.hab[data-state="away"] .hab__light { background: rgba(255, 255, 255, .14); box-shadow: none; }
.hab[data-state="away"] .hab__light::after { animation: none; opacity: 0; }

/* ---------- bar (identical in every size) ---------- */
.hab__bar { position: relative; flex: none; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 10px; }
.hab__open { position: absolute; inset: 0; z-index: 1; }
.hab__slot { position: relative; width: 42px; height: 42px; flex: none; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16); background: radial-gradient(ellipse at 50% 30%, #2d1f4d, #120d1e 70%); }
.hab__slot img { position: absolute; width: 209%; left: -54.5%; top: -28.3%; }
.hab__mark { display: none; width: 16px; flex: none; justify-content: center; }
.hab__mark i { width: 10px; height: 10px; background: var(--y); box-shadow: 0 0 8px rgba(254, 216, 4, .8); }
.hab:not([data-size="compressed"]) .hab__slot { display: none; }
.hab:not([data-size="compressed"]) .hab__mark { display: flex; }
.hab__name { flex: 1; min-width: 0; }
.hab__name b { display: block; font: 400 21px/1 var(--imp); letter-spacing: .03em; text-transform: uppercase; }
.hab__name b span { color: var(--y); }
.hab__status { display: flex; align-items: center; gap: 7px; margin-top: 6px; font: 600 8.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.hab__status em { font-style: normal; color: var(--text); }
.hab__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--y); box-shadow: 0 0 6px rgba(254, 216, 4, .9); }
.hab[data-state="listening"] .hab__dot { background: #a78bfa; box-shadow: 0 0 6px rgba(167, 139, 250, .9); }
.hab[data-state="thinking"] .hab__dot { background: #fff; box-shadow: 0 0 6px #fff; }
.hab[data-state="away"] .hab__dot { background: #4a4a50; box-shadow: none; }
.hab__badge { position: relative; z-index: 2; min-width: 20px; height: 20px; border-radius: 10px; background: var(--y); color: var(--ink);
  font: 700 11px/20px var(--sans); text-align: center; padding: 0 6px; flex: none; }
.hab__badge[hidden] { display: none; }
.hab__ctl { position: relative; z-index: 2; width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16) !important; color: #b9b9bf !important; font-size: 13px !important; }
.hab__ctl:hover { border-color: var(--y) !important; color: var(--y) !important; }
.hab__ctl--y { background: var(--y) !important; border-color: var(--y) !important; color: var(--ink) !important; font: 400 16px/1 var(--imp) !important; }
.hab[data-size="compressed"] .hab__min, .hab[data-size="compressed"] .hab__close { display: none; }
.hab:not([data-size="compressed"]) .hab__expand, .hab:not([data-size="compressed"]) .hab__badge, .hab:not([data-size="compressed"]) .hab__open { display: none; }

/* ---------- body ---------- */
.hab__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hab[data-size="compressed"] .hab__body { visibility: hidden; }
.hab__win { position: relative; flex: none; height: 136px; margin: 0 10px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12);
  background: radial-gradient(ellipse 200px 150px at 25% 70%, rgba(124, 58, 237, .38), transparent 70%), linear-gradient(180deg, #17121f, #0d0b12); }
.hab__win::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(254, 216, 4, .5); box-shadow: 0 0 10px rgba(254, 216, 4, .6); }
.hab__bust { position: absolute; width: 205px; height: 205px; left: -22px; top: -11px; transition: opacity .2s; }
.hab__say { position: absolute; left: 176px; right: 14px; top: 26px; }
.hab__say i { display: block; font: 600 8.5px/1 var(--mono); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--y); margin-bottom: 8px; }
.hab__say p { margin: 0; font: 400 26px/1 var(--imp); letter-spacing: .02em; text-transform: uppercase; }
.hab__say p span { color: var(--y); }

.hab__log { list-style: none; margin: 0; padding: 16px 16px 4px; flex: 1; min-height: 0; overflow-y: auto; display: none; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.hab[data-size="open"] .hab__log { display: block; }
.hab__m { margin: 0 0 14px; max-width: 300px; border-left: 2px solid var(--y); padding-left: 12px; animation: hab-in .25s ease-out; }
.hab__m i { display: block; font: 600 8.5px/1 var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--y); margin-bottom: 6px; }
.hab__m p { margin: 0; font: 400 14px/1.45 var(--sans); color: #E8E6E0; }
.hab__m--me { margin-left: auto; border-left: 0; border-right: 2px solid var(--p); padding: 0 12px 0 0; text-align: right; }
.hab__m--me i { color: #c4b5fd; }
.hab__typing { display: inline-flex; gap: 5px; padding: 6px 0 4px 14px; border-left: 2px solid var(--y); }
.hab__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--y); animation: hab-blink 1s infinite; }
.hab__typing span:nth-child(2) { animation-delay: .15s; } .hab__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hab-blink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes hab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hab__chips { display: none; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px; }
.hab[data-size="open"] .hab__chips { display: flex; }
.hab__chips button { font: 400 11px/1 var(--sans); color: #d6d4cd; border: 1px solid rgba(255, 255, 255, .16); padding: 8px 10px; }
.hab__chips button:hover { border-color: var(--y); color: var(--y); }

.hab__in { flex: none; display: flex; height: 44px; margin: 10px 10px 10px; border: 1px solid rgba(255, 255, 255, .2); }
.hab[data-size="open"] .hab__in { margin-top: 0; }
.hab__in:focus-within { border-color: var(--y); }
.hab__in input:focus-visible { outline: none; }
.hab__in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); padding: 0 12px; font: 400 14px var(--sans); caret-color: var(--y); }
.hab__in input::placeholder { color: #6f6f78; }
.hab__in button { width: 46px; background: var(--y) !important; color: var(--ink) !important; font: 400 18px var(--imp) !important; }
.hab__privacy { flex: none; margin: -4px 12px 10px; font: 400 9.5px/1.5 var(--mono); letter-spacing: .02em; color: #8c8a84; }
.hab[data-size="open"] .hab__privacy { margin-bottom: 8px; }
.hab__foot { display: none; justify-content: space-between; padding: 0 12px 10px; font: 400 8px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #5d5d64; }
.hab[data-size="open"] .hab__foot { display: flex; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .hab { right: 14px; bottom: 14px; width: calc(100vw - 28px); }
  .hab[data-size="compressed"] { width: 64px; height: 64px; border-radius: 50%; }
  .hab[data-size="compressed"] .hab__bar { padding: 0; justify-content: center; }
  .hab[data-size="compressed"] .hab__name, .hab[data-size="compressed"] .hab__expand { display: none; }
  .hab[data-size="compressed"] .hab__slot { width: 64px; height: 64px; border: 0; border-radius: 50%; }
  .hab[data-size="compressed"] .hab__badge { position: absolute; right: 0; top: 0; }
  /* the same light line, wrapped around the round button: a bright pulse travels around the ring */
  .hab[data-size="compressed"] { overflow: visible; border: 0; background: none; box-shadow: 0 0 18px rgba(254, 216, 4, .35), 0 12px 30px rgba(0, 0, 0, .6); }
  .hab[data-size="compressed"] .hab__light { top: -3px; left: -3px; right: -3px; bottom: -3px; height: auto; border-radius: 50%; box-shadow: none;
    background: conic-gradient(rgba(254, 216, 4, .7) 0deg 230deg, var(--y) 285deg, #FFFBE0 325deg, var(--y) 345deg, rgba(254, 216, 4, .7) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
    animation: hab-orbit var(--sweep) linear infinite; }
  .hab[data-size="compressed"] .hab__light::after { display: none; }
  /* moving glow behind the ring, following the bright part of the line */
  .hab[data-size="compressed"]::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: -1;
    background: conic-gradient(transparent 0deg 230deg, rgba(254, 216, 4, .9) 290deg, #FFFBE0 325deg, rgba(254, 216, 4, .9) 345deg, transparent 360deg);
    filter: blur(7px); animation: hab-orbit var(--sweep) linear infinite; }
  .hab[data-size="compressed"][data-state="away"]::before { display: none; }
  .hab[data-size="compressed"][data-state="away"] .hab__light { background: rgba(255, 255, 255, .18); animation: none; }
  .hab[data-size="compressed"] .hab__badge { z-index: 6; }
  .hab[data-size="open"] { right: 0; bottom: 0; width: 100vw; height: 82vh; border-radius: 14px 14px 0 0; border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hab { transition: none; }
  .hab__light::after { animation: none; left: 36%; }
  .hab__light, .hab::before, .hab { animation: none !important; }
  .hab__m { animation: none; }
  .hab__typing span { animation: none; opacity: .7; }
}