/* 猪猪施工队 · 手机端手绘纸张布局
   独立于 pc.css，避免手机适配反向改变桌面三栏。 */
@media (max-width:1023.5px){
  html[data-theme="bluesky"]{
    --mobile-ink:#234d6b;
    --mobile-paper:#fff9ed;
    --mobile-blue:#d9eef9;
    --mobile-composer:calc(80px + env(safe-area-inset-bottom));
    --avatar-size:48px;
    --side-pad:16px;
    --composer-zone:calc(var(--mobile-composer) + var(--keyboard-offset));
  }

  html[data-theme="bluesky"] html, html[data-theme="bluesky"] body{ background:#e8f2f6; }
  html[data-theme="bluesky"] body, html[data-theme="bluesky"] button, html[data-theme="bluesky"] input, html[data-theme="bluesky"] textarea, html[data-theme="bluesky"] select{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  }
  html[data-theme="bluesky"] .wall{
    background:#f7efe3 url("chat-bluesky-v1.png") center/cover fixed no-repeat !important;
  }
  html[data-theme="bluesky"] .wall::after{ background:rgba(255,251,241,.04); }
  html[data-theme="bluesky"] .app{
    width:min(100vw,620px);
    max-width:620px;
    background:transparent;
    border:0;
  }

  /* 顶部：返回、纸片标题、会话和设置。 */
  html[data-theme="bluesky"] .topbar{
    order:1;
    flex:0 0 auto;
    height:calc(108px + env(safe-area-inset-top));
    min-height:calc(108px + env(safe-area-inset-top));
    padding:calc(env(safe-area-inset-top) + 13px) 56px 9px;
    border:0;
    background:transparent;
    overflow:visible;
  }
  html[data-theme="bluesky"] .topbar::before{ display:none; }
  html[data-theme="bluesky"] .peerpill{
    position:relative;
    min-width:min(66vw,360px);
    max-width:calc(100vw - 128px);
    padding:12px 28px 10px;
    border:1px solid rgba(115,88,62,.12);
    border-radius:13px 19px 15px 17px;
    background:rgba(255,248,232,.96);
    box-shadow:0 7px 16px rgba(86,66,48,.11);
  }
  html[data-theme="bluesky"] .peerpill::before{
    content:"";
    position:absolute;
    top:-8px;
    left:50%;
    width:58px;
    height:16px;
    transform:translateX(-50%) rotate(-3deg);
    border-radius:3px;
    background:repeating-linear-gradient(45deg,rgba(242,151,158,.45) 0 6px,rgba(255,229,216,.62) 6px 10px);
  }
  html[data-theme="bluesky"] .peerpill .name{
    color:var(--mobile-ink);
    font-family:var(--font-hand);
    font-size:clamp(24px,7vw,34px);
    font-weight:400;
    line-height:1.05;
    white-space:nowrap;
  }
  html[data-theme="bluesky"] .peerpill .status{
    margin-top:7px;
    color:#4b9c68;
    font-size:12px;
  }
  html[data-theme="bluesky"] .backbtn, html[data-theme="bluesky"] .header-actions{
    top:calc(env(safe-area-inset-top) + 24px);
    min-height:44px;
    border:1px solid rgba(115,88,62,.12);
    border-radius:11px 16px 13px 15px;
    background:rgba(255,248,232,.96);
    box-shadow:0 6px 14px rgba(86,66,48,.10);
  }
  html[data-theme="bluesky"] .backbtn{ left:12px; width:44px; height:46px; color:var(--mobile-ink); }
  html[data-theme="bluesky"] .header-actions{ right:12px; height:46px; gap:0; padding:1px 3px; }
  html[data-theme="bluesky"] .topbtn{ width:34px; height:42px; color:var(--mobile-ink); }
  html[data-theme="bluesky"] .topbtn svg{ width:21px; height:21px; }
  html[data-theme="bluesky"] .topbtn.terminal, html[data-theme="bluesky"] .topbtn.inspector-toggle{ display:none; }

  /* 成员卡在标题下方，四位成员固定同屏。 */
  html[data-theme="bluesky"] .agent-strip{
    order:2;
    position:relative;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
    height:116px;
    min-height:116px;
    margin:0 12px;
    padding:13px 9px 9px 23px;
    overflow:visible;
    border:1px solid rgba(115,88,62,.12);
    border-radius:15px 20px 16px 18px;
    background:rgba(255,249,237,.97);
    box-shadow:0 8px 18px rgba(86,66,48,.11);
  }
  html[data-theme="bluesky"] .agent-strip::before{
    content:"";
    position:absolute;
    left:6px;
    top:11px;
    bottom:11px;
    width:12px;
    height:auto;
    border-radius:0;
    background:radial-gradient(circle,rgba(111,116,112,.25) 0 3px,transparent 3.6px) center top/12px 25px repeat-y;
    box-shadow:none;
    transform:none;
  }
  html[data-theme="bluesky"] .agent-strip::after{
    content:"";
    position:absolute;
    top:-7px;
    right:18px;
    width:58px;
    height:16px;
    transform:rotate(7deg);
    border-radius:3px;
    background:repeating-linear-gradient(45deg,rgba(242,151,158,.42) 0 6px,rgba(255,229,216,.58) 6px 10px);
  }
  html[data-theme="bluesky"] .agent-chip{
    min-width:0;
    height:92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:3px;
    padding:1px;
    border:0;
    border-radius:14px;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  html[data-theme="bluesky"] .agent-chip-avatar{
    width:clamp(52px,15vw,68px);
    height:clamp(52px,15vw,68px);
    border:3px solid rgba(255,255,255,.92);
    box-shadow:0 5px 12px rgba(75,62,48,.15);
  }
  html[data-theme="bluesky"] .agent-chip-dot{ width:11px; height:11px; border-width:2px; right:1px; bottom:1px; }
  html[data-theme="bluesky"] .agent-chip-copy{ align-items:center; line-height:1.1; }
  html[data-theme="bluesky"] .agent-chip-name{
    color:var(--mobile-ink);
    font-family:var(--font-hand);
    font-size:17px;
    font-weight:400;
  }
  html[data-theme="bluesky"] .agent-chip-model{ display:none; }

  /* 房间仍保留独立会话语义，但收成一条轻量标签。 */
  html[data-theme="bluesky"] .room-tabs{
    order:3;
    flex:0 0 auto;
    margin:7px 12px 0;
    padding:3px;
    gap:2px;
    border:1px solid rgba(115,88,62,.09);
    border-radius:12px 16px 13px 15px;
    background:rgba(255,249,237,.90);
    box-shadow:0 4px 11px rgba(86,66,48,.07);
  }
  html[data-theme="bluesky"] .room-tabs button{
    flex:1 0 auto;
    padding:5px 11px;
    border-radius:9px 12px 10px 11px;
    color:#667c89;
    font-size:12px;
  }
  html[data-theme="bluesky"] .room-tabs button.active{
    color:#285a7c;
    background:#d8edfa;
    box-shadow:inset 0 0 12px rgba(255,255,255,.48);
  }

  /* 聊天纸面与消息。 */
  html[data-theme="bluesky"] .scroll{
    order:4;
    flex:1 1 auto;
    margin:7px 8px 0;
    padding:16px 10px calc(var(--mobile-composer) + 14px);
    border:1px solid rgba(115,88,62,.08);
    border-radius:18px 18px 0 0;
    background:rgba(255,249,238,.72);
    box-shadow:0 4px 14px rgba(86,66,48,.06);
    -webkit-mask-image:none;
    mask-image:none;
  }
  html[data-theme="bluesky"] .day{ color:#8a908e; font-size:11px; }
  html[data-theme="bluesky"] .row{ margin-top:18px; }
  html[data-theme="bluesky"] .row.grouped{ margin-top:8px; }
  html[data-theme="bluesky"] .row.ai{
    padding-left:58px;
    padding-right:3px;
  }
  html[data-theme="bluesky"] .row.ai::before{
    top:16px;
    width:48px;
    height:48px;
    border:2px solid rgba(255,255,255,.90);
    box-shadow:0 5px 12px rgba(75,62,48,.13);
  }
  html[data-theme="bluesky"] .message-stack{ max-width:min(76vw,500px); }
  html[data-theme="bluesky"] .message-stack .meta{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:17px;
    margin:0 8px 5px;
    color:#7c8894;
    font-family:var(--font-readable);
    font-size:11px;
    line-height:1.2;
  }
  html[data-theme="bluesky"] .message-stack .meta .sender{ margin:0; color:#315f80; font-weight:700; }
  html[data-theme="bluesky"] .message-stack .meta .time{ color:#87929a; }
  html[data-theme="bluesky"] .bubble{
    max-width:100%;
    padding:10px 15px 11px;
    color:#234967;
    font-family:var(--font-readable);
    font-size:15px;
    line-height:1.62;
    border:1px solid rgba(126,104,78,.11) !important;
    text-shadow:none;
    box-shadow:0 5px 12px rgba(84,74,59,.09) !important;
  }
  html[data-theme="bluesky"] .row.ai.agent-codex:nth-of-type(n) .bubble, html[data-theme="bluesky"] .row.ai.agent-assistant:nth-of-type(n) .bubble{
    background:#fffdf5;
    border-radius:8px 19px 15px 18px;
  }
  html[data-theme="bluesky"] .row.ai.agent-kimi:nth-of-type(n) .bubble{
    background:#ffefbc;
    border-radius:19px 8px 18px 13px;
  }
  html[data-theme="bluesky"] .row.ai.agent-deepseek:nth-of-type(n) .bubble{
    background:#dceff9;
    border-radius:9px 20px 12px 18px;
  }
  html[data-theme="bluesky"] .row.ai.agent-grok:nth-of-type(n) .bubble{
    background:#fbe2e3;
    border-radius:19px 13px 20px 9px;
  }
  html[data-theme="bluesky"] .row.human:nth-of-type(n) .bubble{
    background:#e2f1df;
    border-radius:18px 9px 17px 14px;
  }
  html[data-theme="bluesky"] .row.human .message-stack{ max-width:min(76vw,500px); }
  html[data-theme="bluesky"] .row.think, html[data-theme="bluesky"] .row.act{ padding-left:58px; }
  html[data-theme="bluesky"] .think-block{ width:min(76vw,500px); max-width:min(76vw,500px); }
  html[data-theme="bluesky"] .act-block{ max-width:min(76vw,500px); }
  html[data-theme="bluesky"] .new-divider{ margin:20px 0 12px; font-size:12px; }

  /* 底部长条：附件、@、输入和蓝色纸飞机全部同框。 */
  html[data-theme="bluesky"] .composer{
    left:8px;
    right:8px;
    bottom:0;
    width:auto;
    min-height:var(--mobile-composer);
    margin:0 auto;
    padding:8px 9px calc(8px + env(safe-area-inset-bottom));
    gap:7px;
    border:1px solid rgba(115,88,62,.12);
    border-radius:17px 19px 0 0;
    background:rgba(255,249,237,.98);
    box-shadow:0 -5px 16px rgba(86,66,48,.10);
  }
  html[data-theme="bluesky"] .composer .field{
    min-width:0;
    min-height:56px;
    padding:0;
    gap:6px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  html[data-theme="bluesky"] .clip-in-field, html[data-theme="bluesky"] #mentionBtn{
    flex:0 0 46px;
    width:46px;
    height:52px;
    border:1px solid rgba(115,88,62,.11);
    border-radius:11px 15px 12px 14px;
    color:#315f80;
    background:#fffaf0;
    box-shadow:0 3px 9px rgba(86,66,48,.07);
  }
  html[data-theme="bluesky"] #mentionBtn{ font-size:23px !important; font-weight:700 !important; }
  html[data-theme="bluesky"] #emojiBtn{ display:none; }
  html[data-theme="bluesky"] .composer textarea{
    min-width:0;
    min-height:52px;
    max-height:116px;
    padding:14px 13px 10px;
    border:1px solid rgba(115,88,62,.11);
    border-radius:12px 17px 13px 16px;
    color:#314f63;
    background:#fffdf7;
    box-shadow:inset 0 1px 7px rgba(86,66,48,.04);
    font-family:var(--font-readable);
    font-size:15px;
    line-height:1.4;
  }
  html[data-theme="bluesky"] .floatbtn.send{
    flex:0 0 54px;
    width:54px;
    height:56px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:14px 19px 16px 20px;
    color:#fff;
    background:#68a8dc;
    box-shadow:0 7px 15px rgba(69,128,179,.27);
  }
  html[data-theme="bluesky"] .floatbtn.send svg{ width:28px; height:28px; }
  html[data-theme="bluesky"] .newmsg-pill{ bottom:calc(var(--mobile-composer) + 8px); }
  html[data-theme="bluesky"] .mention-pop, html[data-theme="bluesky"] .sticker-pop{ bottom:calc(var(--mobile-composer) + 8px); }
  html[data-theme="bluesky"] .session-pop{
    top:calc(env(safe-area-inset-top) + 75px);
    right:12px;
    width:min(88vw,340px);
    border:1px solid rgba(115,88,62,.12);
    background:#fff9ed;
    box-shadow:0 14px 32px rgba(70,60,50,.17);
  }
  html[data-theme="bluesky"] .insp-quota-track.unknown i{ width:0 !important; }
}

@media (max-width:380px){
  html[data-theme="bluesky"] .topbar{ padding-left:50px; padding-right:50px; }
  html[data-theme="bluesky"] .peerpill{ min-width:0; max-width:calc(100vw - 108px); padding-left:16px; padding-right:16px; }
  html[data-theme="bluesky"] .peerpill .name{ font-size:23px; }
  html[data-theme="bluesky"] .header-actions{ right:7px; }
  html[data-theme="bluesky"] .backbtn{ left:7px; }
  html[data-theme="bluesky"] .agent-strip{ margin-left:7px; margin-right:7px; padding-right:4px; }
  html[data-theme="bluesky"] .agent-chip-avatar{ width:50px; height:50px; }
  html[data-theme="bluesky"] .room-tabs{ margin-left:7px; margin-right:7px; }
  html[data-theme="bluesky"] .room-tabs button{ padding-left:9px; padding-right:9px; }
  html[data-theme="bluesky"] .composer{ left:5px; right:5px; padding-left:6px; padding-right:6px; gap:5px; }
  html[data-theme="bluesky"] .clip-in-field, html[data-theme="bluesky"] #mentionBtn{ flex-basis:41px; width:41px; }
  html[data-theme="bluesky"] .floatbtn.send{ flex-basis:49px; width:49px; }
}