/* 猪猪施工队 · PC 端视觉层
   仅覆盖 >=1024px；移动端沿用 app.css，等 PC 定稿后再同步。 */
@media (min-width:1024px){
  html[data-theme="bluesky"]{
    --pc-sky:#cfe8f5;
    --pc-paper:#fffaf0;
    --pc-paper-strong:#fffdf7;
    --pc-blue:#d8edfa;
    --pc-ink:#214e70;
    --pc-muted:#778a98;
    --pc-inspector-width:clamp(224px,22vw,314px);
    --font-readable:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  }

  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:var(--font-readable);
    letter-spacing:0;
  }

  html[data-theme="bluesky"] body, html[data-theme="bluesky"] .wall{
    background-color:var(--pc-sky);
    background-image:url("chat-bluesky-v1.png") !important;
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }
  html[data-theme="bluesky"] .wall::after{
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.08));
  }

  /* 中栏分成三块：顶部成员+设置、中央聊天、底部长输入条。 */
  html[data-theme="bluesky"] .app{
    right:calc(var(--pc-inspector-width) + 36px);
    /* 所有 PC 宽度都扣减右栏:topbar/agent-strip 在 .app 内,随 .app 一起避开施工面板 */
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  html[data-theme="bluesky"] .topbar{
    flex:0 0 130px;
    height:130px;
    min-height:130px;
    padding:0;
    border:1px solid rgba(113,89,65,.12);
    border-radius:18px 21px 17px 20px;
    background:rgba(255,251,242,.97);
    box-shadow:0 8px 20px rgba(77,103,119,.12);
    backdrop-filter:none;
  }
  html[data-theme="bluesky"] .topbar::before{ display:none; }
  html[data-theme="bluesky"] .peerpill{ display:none; }
  html[data-theme="bluesky"] .header-actions{
    top:42px;
    right:14px;
    z-index:20;
    height:46px;
    gap:4px;
    padding:5px 7px;
    border:1px solid rgba(112,90,69,.12);
    border-radius:13px 18px 14px 17px;
    background:rgba(255,250,238,.96);
    box-shadow:0 7px 18px rgba(72,100,120,.12);
  }
  html[data-theme="bluesky"] .topbtn{
    width:36px;
    height:36px;
    border:0;
    background:transparent;
    box-shadow:none;
    color:#2c5d7d;
  }

  /* 成员条绝对定位进 topbar：不再产生第二层重复栏。 */
  html[data-theme="bluesky"] .agent-strip{
    position:absolute;
    top:8px;
    left:12px;
    right:132px;
    z-index:12;
    width:auto;
    height:112px;
    min-height:112px;
    margin:0;
    padding:8px 6px;
    gap:5px;
    overflow:hidden;
    border:0;
    border-radius:14px;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  html[data-theme="bluesky"] .agent-strip::before{ display:none; }
  html[data-theme="bluesky"] .agent-chip{
    flex:1 1 0;
    min-width:108px;
    height:96px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    gap:7px;
    padding:6px;
    border:0;
    border-radius:18px;
    background:transparent;
    box-shadow:none;
  }
  html[data-theme="bluesky"] .agent-chip:hover{ background:rgba(216,237,250,.52); }
  html[data-theme="bluesky"] .agent-chip-avatar{
    width:44px;
    height:44px;
    border:3px solid rgba(255,255,255,.95);
    box-shadow:0 5px 12px rgba(76,66,53,.15);
  }
  html[data-theme="bluesky"] .agent-chip-copy{ align-items:flex-start; text-align:left; min-width:0; }
  html[data-theme="bluesky"] .agent-chip-name{
    color:var(--pc-ink);
    font-family:var(--font-readable);
    font-size:15px;
    font-weight:700;
    line-height:1.2;
  }
  html[data-theme="bluesky"] .agent-chip-model{
    display:block;
    max-width:72px;
    overflow:hidden;
    color:#82909a;
    font-family:var(--font-readable);
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 聊天区域是一整张浅米色纸，消息本身再叠彩色小纸条。 */
  html[data-theme="bluesky"] .scroll{
    margin-top:12px;
    padding-top:22px;
    border:1px solid rgba(113,89,65,.10);
    border-radius:18px 16px 20px 17px;
    background:
      linear-gradient(90deg,rgba(255,255,255,.30),transparent 16%,transparent 84%,rgba(255,255,255,.20)),
      rgba(255,250,240,.97);
    box-shadow:0 8px 22px rgba(77,103,119,.11);
  }

  /* 左侧主便签：孔洞、标题小便签、蓝色选中项。 */
  html[data-theme="bluesky"] .sidebar{
    padding:24px 18px 18px 32px;
    overflow:hidden;
    transform:none;
    background:rgba(255,250,239,.98);
    border:1px solid rgba(113,89,65,.12);
    border-radius:20px 16px 19px 23px;
    box-shadow:0 10px 26px rgba(77,103,119,.14);
  }
  html[data-theme="bluesky"] .sidebar::before{
    content:"";
    position:absolute;
    left:8px;
    top:20px;
    bottom:20px;
    width:14px;
    height:auto;
    border-radius:0;
    background:radial-gradient(circle,rgba(107,116,118,.22) 0 3px,transparent 3.6px) center top/14px 32px repeat-y;
    box-shadow:none;
    transform:none;
  }
  html[data-theme="bluesky"] .sidebar::after{
    content:"♡";
    top:52px;
    right:27px;
    color:#ed9297;
    font-size:24px;
  }
  html[data-theme="bluesky"] .side-brand{
    position:relative;
    margin:0 8px;
    padding:21px 16px 5px;
    color:#174b70;
    font-family:var(--font-hand);
    font-size:27px;
    font-weight:700;
    background:#fff7e9;
    border:1px solid rgba(119,91,62,.10);
    border-bottom:0;
    border-radius:12px 17px 0 0;
    box-shadow:0 6px 13px rgba(93,70,47,.08);
  }
  html[data-theme="bluesky"] .side-brand::before{
    content:"";
    position:absolute;
    top:-9px;
    left:24px;
    width:62px;
    height:18px;
    border-radius:3px;
    transform:rotate(-6deg);
    background:repeating-linear-gradient(45deg,rgba(244,151,160,.48) 0 6px,rgba(255,232,220,.66) 6px 10px);
  }
  html[data-theme="bluesky"] .side-brand-sub{
    margin:0 8px 18px;
    padding:5px 16px 13px;
    color:#4e9f68;
    background:#fff7e9;
    border:1px solid rgba(119,91,62,.10);
    border-top:0;
    border-radius:0 0 16px 12px;
    box-shadow:0 6px 13px rgba(93,70,47,.08);
  }
  html[data-theme="bluesky"] .side-label{
    color:#315872;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
  }
  html[data-theme="bluesky"] .side-room, html[data-theme="bluesky"] .side-sessions .session-item{
    border-radius:10px 15px 11px 13px;
  }
  html[data-theme="bluesky"] .side-room.active, html[data-theme="bluesky"] .side-sessions .session-item.active, html[data-theme="bluesky"] .side-sessions .session-item:hover{
    color:#285a7c;
    background:#d8edfa;
    box-shadow:inset 0 0 14px rgba(255,255,255,.42);
  }
  html[data-theme="bluesky"] .side-new-capsule{
    border-radius:13px 18px 14px 20px;
    background:#6ca9dc;
    box-shadow:0 7px 15px rgba(83,145,196,.26);
  }

  /* 右栏也是一张完整便签，内部信息分成几张浅纸卡。 */
  html[data-theme="bluesky"] .inspector{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:fixed;
    top:18px;
    right:18px;
    bottom:18px;
    width:var(--pc-inspector-width);
    z-index:5;
    padding:25px 16px 18px;
    overflow-y:auto;
    pointer-events:auto;
    transform:none;
    background:rgba(255,250,239,.98);
    border:1px solid rgba(113,89,65,.12);
    border-radius:17px 22px 19px 15px;
    box-shadow:0 10px 26px rgba(77,103,119,.14);
  }
  html[data-theme="bluesky"] .inspector::before{
    width:72px;
    height:20px;
    right:26px;
    top:-7px;
    transform:rotate(5deg);
  }
  html[data-theme="bluesky"] .insp-head{
    color:#174b70;
    font-family:var(--font-hand);
    font-size:24px;
  }
  html[data-theme="bluesky"] .insp-close{ display:none; }
  html[data-theme="bluesky"] .topbtn.inspector-toggle{ display:none; }
  html[data-theme="bluesky"] .insp-card{
    background:rgba(255,253,247,.93);
    border:1px solid rgba(119,91,62,.10);
    border-radius:12px 18px 14px 16px;
    box-shadow:0 5px 13px rgba(93,70,47,.07);
  }

  /* 昵称与时间独立放在气泡上方；每个 Agent 固定自己的纸条颜色与轮廓。 */
  html[data-theme="bluesky"] .message-stack{ max-width:min(66vw,540px); }
  html[data-theme="bluesky"] .message-stack .meta{
    min-height:17px;
    margin:0 8px 5px;
    color:#7b8c99;
    font-family:var(--font-readable);
    font-size:12px;
    line-height:1.2;
  }
  html[data-theme="bluesky"] .message-stack .meta .sender{
    color:#315f80;
    font-weight:700;
  }
  html[data-theme="bluesky"] .row.ai.agent-kimi .message-stack .meta .sender::before{ content:none; }
  html[data-theme="bluesky"] .bubble{
    color:#234967;
    font-family:var(--font-readable);
    font-size:15px;
    font-weight:400;
    line-height:1.68;
    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-color:rgba(129,105,78,.13) !important;
    border-radius:8px 19px 15px 18px;
  }
  html[data-theme="bluesky"] .row.ai.agent-kimi:nth-of-type(n) .bubble{
    background:#ffefbc;
    border-color:rgba(204,157,65,.18) !important;
    border-radius:19px 8px 18px 13px;
  }
  html[data-theme="bluesky"] .row.ai.agent-deepseek:nth-of-type(n) .bubble{
    background:#dceff9;
    border-color:rgba(86,151,183,.17) !important;
    border-radius:9px 20px 12px 18px;
  }
  html[data-theme="bluesky"] .row.ai.agent-grok:nth-of-type(n) .bubble{
    background:#fbe2e3;
    border-color:rgba(198,117,122,.16) !important;
    border-radius:19px 13px 20px 9px;
  }
  html[data-theme="bluesky"] .row.human:nth-of-type(n) .bubble{
    background:#e2f1df;
    border-color:rgba(96,151,103,.17) !important;
    border-radius:18px 9px 17px 14px;
  }

  /* 发送栏：附件与 @ 都在输入区左侧，发送键是独立蓝色小标签。 */
  html[data-theme="bluesky"] .composer{
    /* .app 在 bluesky 带 transform(rotate(0deg)),成为 fixed 后代的包含块:
       composer 的 fixed 定位是相对 .app 解析的,left/right 归零即与 .app 左右缘完全重合。 */
    left:0;
    right:0;
    width:auto;
    min-height:82px;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    background:rgba(255,252,245,.98);
    border:1px solid rgba(113,89,65,.13);
    border-radius:17px 20px 18px 16px;
    box-shadow:0 8px 20px rgba(77,103,119,.13);
    box-sizing:border-box;
  }
  html[data-theme="bluesky"] .composer .field{
    flex:1 1 auto;
    width:auto;
    min-height:64px;
    gap:2px;
    padding:6px 10px;
    border:0;
    border-radius:13px;
    background:transparent;
    box-shadow:none;
  }
  html[data-theme="bluesky"] .clip-in-field{ order:1; background:transparent; }
  html[data-theme="bluesky"] #mentionBtn{
    order:2;
    width:38px;
    height:38px;
    border-radius:11px;
    color:#2f6488;
    font-size:20px !important;
    font-weight:700 !important;
    background:rgba(216,237,250,.54);
  }
  html[data-theme="bluesky"] .composer textarea{
    order:3;
    color:#314f63;
    font-size:15px;
    line-height:1.45;
  }
  html[data-theme="bluesky"] #emojiBtn{ display:none; }
  html[data-theme="bluesky"] .floatbtn.send{
    width:56px;
    height:56px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:15px 19px 16px 20px;
    background:#69a8dc;
    box-shadow:0 7px 15px rgba(69,128,179,.27);
  }
  html[data-theme="bluesky"] .floatbtn.send:hover{
    transform:translateY(-1px) rotate(-1deg);
    box-shadow:0 10px 19px rgba(69,128,179,.33);
  }
  html[data-theme="bluesky"] .floatbtn.send svg{ width:27px; height:27px; }
}

@media (min-width:1024px) and (max-width:1279.5px){
  html[data-theme="bluesky"] .agent-strip{ right:148px; gap:2px; }
  html[data-theme="bluesky"] .agent-chip{
    min-width:0;
    grid-template-columns:36px minmax(0,1fr);
    gap:5px;
    padding:4px;
  }
  html[data-theme="bluesky"] .agent-chip-avatar{ width:36px; height:36px; }
  html[data-theme="bluesky"] .agent-chip-model{ display:none; }
}