/* muru — a quiet terminal */
:root{
  --page-a:#f7f4ee;
  --page-b:#eef1f5;
  --page-c:#e6e9ee;
  --win:#ffffff;
  --bar-a:#fbfbfb;
  --bar-b:#f1f1f1;
  --bar-line:#d8d8d8;
  --text:#1d1d1f;
  --dim:#8a8a8e;
  --faint:#b3b3b8;
  --radius:10px;
  --mono:"SF Mono",ui-monospace,Menlo,Monaco,"Cascadia Code",Consolas,"Liberation Mono",
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  display:grid;place-items:center;
  padding:clamp(0px,5vh,52px) clamp(0px,4vw,48px);
  background:
    radial-gradient(120% 110% at 18% 0%,var(--page-a) 0%,transparent 55%),
    radial-gradient(120% 120% at 100% 100%,#e9edf3 0%,transparent 60%),
    linear-gradient(160deg,var(--page-b),var(--page-c));
  font-family:var(--mono);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:#b8d9ff;color:#101114}

.window{
  position:relative;
  width:min(820px,100%);
  height:min(560px,100%);
  display:flex;flex-direction:column;
  background:var(--win);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10),
    0 1px 2px rgba(0,0,0,.06),
    0 22px 55px -14px rgba(0,0,0,.32),
    0 6px 16px -6px rgba(0,0,0,.16);
}

.titlebar{
  flex:none;
  position:relative;
  display:flex;align-items:center;
  height:38px;
  padding:0 14px;
  background:linear-gradient(var(--bar-a),var(--bar-b));
  border-bottom:1px solid var(--bar-line);
  user-select:none;
}
.lights{display:flex;align-items:center;gap:8px}
.lights i{
  display:block;width:12px;height:12px;border-radius:50%;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.16);
}
.lights .r{background:#ff5f57}
.lights .y{background:#febc2e}
.lights .g{background:#28c840}
.title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:62%;
  font-size:13px;line-height:1;
  color:#4a4a4e;
  letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-pad{width:44px}

.term{
  flex:1;min-height:0;
  overflow:auto;
  background:var(--win);
  padding:16px 18px 22px;
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.64;
  scrollbar-width:none;
}
.term::-webkit-scrollbar{width:0;height:0}
.session{white-space:pre-wrap;word-break:break-word}
.line{min-height:1.64em}
.line.dim{color:var(--dim)}
.line.cmd .p{color:var(--dim)}
.line.cmd .c{color:var(--text)}
.cursor{
  display:inline-block;width:.56em;height:1.08em;
  background:var(--text);
  vertical-align:-.15em;
  margin-left:.06em;
  animation:blink 1.06s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.hint{
  margin:0;
  position:absolute;right:16px;bottom:12px;
  font-size:11px;color:var(--faint);
  letter-spacing:.02em;
  pointer-events:none;
  animation:fade .5s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.noscript{margin:0;font:13px var(--mono);color:var(--dim)}

@media (max-width:640px){
  body{padding:0;display:block;background:var(--win)}
  .window{
    width:100%;
    height:100dvh;height:100vh;
    border-radius:0;
    box-shadow:none;
  }
  .titlebar{
    height:calc(36px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 14px 0;
  }
  .lights i{width:11px;height:11px}
  .lights{gap:7px}
  .title{font-size:12px;max-width:58%}
  .term{
    font-size:15px;
    line-height:1.72;
    padding:18px 16px calc(34px + env(safe-area-inset-bottom));
  }
  .line{min-height:1.72em}
  .cursor{height:1.05em;vertical-align:-.14em}
  .hint{right:14px;bottom:calc(12px + env(safe-area-inset-bottom));font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}
  .hint{animation:none}
}

/* ---------- chat snippets ---------- */
.cmdline{padding-top:.62em}
.line.cmdline .p{color:var(--dim)}
.line.cmdline .c{color:var(--text)}
.msg{
  display:grid;
  grid-template-columns:11.5ch 2.3ch minmax(0,1fr);
  column-gap:.5em;
  align-items:start;
  padding:1.5px 0;
  line-height:1.58;
  animation:fadein .16s ease both;
}
.msg .t{color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.msg .s{color:var(--dim)}
.msg .s.her{color:#b0472f}
.msg .s.him{color:#2f6c9c}
.msg .x{color:var(--text);word-break:break-word;overflow-wrap:anywhere}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (max-width:640px){
  .msg{grid-template-columns:10.6ch 2.1ch minmax(0,1fr);column-gap:.45em;line-height:1.66}
}

/* ---------- chat hint pill ---------- */
.hint{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  padding:4px 11px;
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.05);
}
@media (max-width:640px){
  .hint{right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:4px 10px}
}