/* ══════════════════════════════════════════════
   Echo 回响 · css/header.css
   顶栏(悬浮磨砂胶囊 + 角落头像)
   ══════════════════════════════════════════════ */
  /* ── Header (floating frosted pill + corner avatar) ── */
  .topbar{
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding: calc(env(safe-area-inset-top) + 8px) var(--side-pad) 10px;
    border-bottom: 1px solid var(--hairline);
    pointer-events: none;
  }
  .topbar > *{ pointer-events: auto; }
  .peerpill{
    display:flex; flex-direction:column; align-items:center; line-height:1.15;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 76px;
  }
  .peerpill .name{
    font-family: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0;
    text-shadow: 0 1px 18px rgba(255,255,255,0.3);
  }
  .peerpill .status{
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(12px, 1.8vw, 16px);
    color: var(--text-soft);
    margin-top: 4px;
    letter-spacing: 0;
  }
  .app[data-conn="reconnecting"] .peerpill .status{ color:#9a8061; }
  .peerpill .status.typing{
    color: #4f9fda;
    font-weight: 500;
    text-shadow: 0 0 16px rgba(79,159,218,.24);
    display: inline-flex; align-items: center;
  }
  .typing-dots{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; }
  .typing-dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; animation: typingDot 1.25s ease-in-out infinite; }
  .typing-dots i:nth-child(2){ animation-delay:.16s; }
  .typing-dots i:nth-child(3){ animation-delay:.32s; }
  @keyframes typingDot{ 0%,70%,100%{ transform:translateY(0); opacity:.4; } 35%{ transform:translateY(-3px); opacity:1; } }
  .backbtn{
    position:absolute; left: calc(var(--side-pad) + 4px); top: calc(env(safe-area-inset-top) + clamp(14px, 2.5vw, 36px));
    width:36px; height:36px; border-radius:50%; padding:0; flex:none; cursor:pointer;
    border: none; background: transparent;
    color: var(--text); display:grid; place-items:center;
    transition: transform .15s ease;
  }
  .backbtn:active{ transform: scale(.9); }
  .backbtn svg{ width:22px; height:22px; display:block; margin-left:-2px; }
  .header-actions{
    position:absolute;
    right: calc(var(--side-pad) - 2px);
    top: calc(env(safe-area-inset-top) + clamp(14px, 2.5vw, 36px));
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: clamp(24px, 4vw, 42px);
    height:36px;
  }
  .topbtn{
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    padding:0;
    background:transparent;
    color: var(--text);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition: transform .15s ease;
  }
  .topbtn:active{ transform: scale(.9); }
  .topbtn svg{ width:24px; height:24px; display:block; }
  .topbtn.more svg{ width:22px; height:22px; }
  .topbtn.terminal.active{ color:var(--accent); }
  .session-pop{
    position:absolute;
    right: calc(var(--side-pad) + 34px);
    top: calc(env(safe-area-inset-top) + clamp(58px, 8vw, 82px));
    z-index:30;
    width:min(82vw, 320px);
    max-height:min(58vh, 480px);
    overflow:auto;
    padding:10px;
    border-radius:18px;
    background:var(--panel-bg);
    border:1px solid var(--card-line);
    box-shadow:0 18px 50px rgba(30,45,62,.18);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  .session-pop[hidden]{ display:none !important; }
  .session-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 2px 8px; }
  .session-title{ font-size:12px; color:var(--text-faint); font-family:var(--font-en), var(--font-cn); }
  .session-new{
    border:1px solid var(--seg-line); border-radius:999px; padding:5px 9px;
    background:var(--seg-track); color:var(--text-soft); font:inherit; font-size:11.5px; cursor:pointer;
  }
  .session-list{ display:flex; flex-direction:column; gap:2px; }
  .session-item{
    border:0; width:100%; background:transparent; color:var(--text);
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
    padding:10px 9px; border-radius:12px; text-align:left; cursor:pointer; font:inherit;
  }
  .session-item.active{ background:var(--seg-track); }
  .session-item:active{ transform:scale(.992); }
  .session-main{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
  .session-name{ font-size:14px; line-height:1.25; }
  .session-meta{ font-size:11px; color:var(--text-faint); font-family:var(--font-en), var(--font-cn); }
  .session-rename{
    border:0; background:transparent; color:var(--text-faint); width:28px; height:28px;
    border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0;
  }
  .session-rename:hover{ color:var(--accent); background:var(--seg-track); }
  .session-rename svg{ width:15px; height:15px; display:block; }
  .terminal-panel{
    position:fixed;
    inset:0;
    z-index:260;
    display:flex;
    flex-direction:column;
    background:#050607;
    color:#d7f7df;
    font-family:"SFMono-Regular", Consolas, "Cascadia Mono", monospace;
    transform:translateX(100%);
    transition:transform .24s cubic-bezier(.2,.8,.2,1);
  }
  .terminal-panel.open{ transform:translateX(0); }
  .terminal-top{
    flex:none;
    min-height:calc(52px + env(safe-area-inset-top));
    display:flex;
    align-items:center;
    gap:10px;
    padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
    border-bottom:1px solid rgba(157,255,188,.18);
    background:#080a0b;
  }
  .terminal-back{
    flex:none;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#d7f7df;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
  }
  .terminal-back:active{ transform:scale(.9); }
  .terminal-back svg{ width:21px; height:21px; display:block; }
  .terminal-title{ min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.15; }
  .terminal-title strong{ font-size:14px; font-weight:600; color:#effff4; }
  .terminal-title span{
    font-size:11px;
    color:rgba(215,247,223,.62);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .terminal-log{
    flex:1 1 auto;
    overflow:auto;
    padding:14px 14px 18px;
    font-size:13px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }
  .term-entry{ margin:0 0 13px; }
  .term-user{ color:#9dffbc; }
  .term-assistant{ color:#d7f7df; }
  .term-tool{
    color:#b6d6ff;
    border-left:2px solid rgba(126,174,255,.45);
    padding-left:10px;
  }
  .term-muted{ color:rgba(215,247,223,.48); }
  .term-cmd{ color:#9dffbc; }
  .term-err{ color:#ffb0a3; }
  .terminal-form{
    flex:none;
    display:flex;
    align-items:flex-end;
    gap:9px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(157,255,188,.18);
    background:#080a0b;
  }
  .terminal-prompt{ flex:none; color:#9dffbc; font-size:15px; line-height:34px; }
  .terminal-input{
    flex:1 1 auto;
    min-width:0;
    max-height:120px;
    border:0;
    outline:0;
    resize:none;
    background:transparent;
    color:#effff4;
    font:inherit;
    font-size:15px;
    line-height:1.45;
    padding:6px 0;
  }
  .terminal-input::placeholder{ color:rgba(215,247,223,.34); }
  .terminal-send{
    flex:none;
    width:34px;
    height:34px;
    border:1px solid rgba(157,255,188,.34);
    border-radius:50%;
    background:rgba(157,255,188,.1);
    color:#d7f7df;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
  }
  .terminal-send:active{ transform:scale(.92); }
  .terminal-send svg{ width:18px; height:18px; display:block; }
  .avatar{
    position:absolute; right: calc(var(--side-pad) - 3px); top: calc(env(safe-area-inset-top) + clamp(14px, 2.5vw, 36px));
    width: var(--avatar-size); height: var(--avatar-size); border-radius:50%; padding:0; flex:none; cursor:pointer;
    border: none;
    background-image: var(--avatar-default);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(24,46,67,0.16);
  }
  .avatar:focus-visible,
  .backbtn:focus-visible,
  button:focus-visible,
  textarea:focus-visible,
  input:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }