/* A2A 人机协作平台 - Editorial Monocle 杂志风
   米白 #f4f0e8 / 衬线 / 墨色 #1a1a1a / 锈色 #c0572e，禁暗色 */

:root{
  --bg:#f4f0e8;
  --card:#ffffff;
  --ink:#1a1a1a;
  --rust:#c0572e;
  --muted:#8a8378;
  --line:#dcd5c8;
  --line-soft:#e8e2d6;
  --serif:"Georgia","Songti SC","Noto Serif SC",serif;
  --sans:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --shadow:0 1px 3px rgba(26,26,26,.06),0 6px 24px rgba(26,26,26,.06);
  --nav-h:60px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:15px;color:var(--ink)}
.admin-only{display:inline-block}

/* ============ 登录视图 ============ */
.auth-view{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.auth-card{
  background:var(--card);border:1px solid var(--line);
  padding:44px 40px;width:100%;max-width:420px;box-shadow:var(--shadow);
  border-radius:2px;
}
.brand{text-align:center;margin-bottom:28px}
.brand-mark{
  width:64px;height:64px;margin:0 auto 16px;border:1px solid var(--rust);
  color:var(--rust);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:26px;letter-spacing:1px;font-weight:bold;
}
.brand-mark.small{width:34px;height:34px;font-size:14px;margin:0 10px 0 0}
.brand-title{font-family:var(--serif);font-size:26px;font-weight:normal;letter-spacing:2px}
.brand-sub{color:var(--muted);font-size:13px;margin-top:6px;letter-spacing:1px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px}
.tab{flex:1;padding:10px;color:var(--muted);border-bottom:2px solid transparent}
.tab.active{color:var(--rust);border-bottom-color:var(--rust);font-weight:600}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form input{
  padding:12px 14px;border:1px solid var(--line);background:var(--bg);
  border-radius:2px;outline:none;transition:border-color .2s;
}
.auth-form input:focus{border-color:var(--rust)}
.btn-primary{
  background:var(--rust);color:#fff;padding:13px;font-size:15px;letter-spacing:2px;
  border-radius:2px;transition:opacity .2s;
}
.btn-primary:hover{opacity:.9}
.auth-msg{margin-top:14px;text-align:center;font-size:13px;color:var(--rust);min-height:18px}

/* ============ 主应用 ============ */
.view{min-height:100vh}
.app-view,.admin-view{display:flex;flex-direction:column;min-height:100vh}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;background:var(--card);border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.topbar-brand{display:flex;align-items:center}
.topbar-title{font-family:var(--serif);font-size:18px;letter-spacing:1px}
.topbar-right{display:flex;align-items:center;gap:10px}
.me-nick{color:var(--muted);margin-right:6px}
.btn-ghost{
  padding:8px 14px;border:1px solid var(--line);color:var(--ink);
  border-radius:2px;transition:all .2s;font-size:14px;background:var(--bg);
}
.btn-ghost:hover{border-color:var(--rust);color:var(--rust)}

.app-body{display:flex;flex:1;overflow:hidden;padding-bottom:var(--nav-h)}
.ws-list{
  width:260px;border-right:1px solid var(--line);background:var(--card);
  overflow-y:auto;padding:16px 12px;flex-shrink:0;transition:width .25s ease, padding .25s ease;
}
.ws-item{
  padding:12px 14px;border:1px solid var(--line-soft);border-radius:2px;
  margin-bottom:10px;background:var(--bg);cursor:pointer;transition:all .2s;
}
.ws-item:hover{border-color:var(--rust)}
.ws-item.active{border-color:var(--rust);background:#fff}
.ws-item .ws-name{font-family:var(--serif);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-item .ws-meta{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 进入聊天室后：工作空间列表收缩为 tab 条 */
.app-body.chatting .ws-list{
  width:92px;padding:16px 8px;
}
.app-body.chatting .ws-item{padding:10px 6px;text-align:center}
.app-body.chatting .ws-item .ws-name{font-size:13px}
.app-body.chatting .ws-item .ws-meta{display:none}

.main{flex:1;overflow:hidden;display:flex;flex-direction:column}

/* 首页 */
.home-view{flex:1;overflow-y:auto;padding:36px;text-align:center}
.home-title{font-family:var(--serif);font-size:30px;font-weight:normal;letter-spacing:2px;margin-bottom:8px}
.home-meta{color:var(--muted);margin-bottom:24px;font-size:14px}
.home-tip{color:var(--rust);font-size:13px;margin-bottom:28px;letter-spacing:1px}
.room-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;max-width:820px;margin:0 auto;
}
.room-card{
  background:var(--card);border:1px solid var(--line);padding:32px 24px;
  border-radius:2px;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,border-color .2s;
}
.room-card:hover{transform:translateY(-3px);border-color:var(--rust)}
.room-card-icon{font-size:36px;margin-bottom:14px}
.room-card-name{font-family:var(--serif);font-size:19px;margin-bottom:8px;letter-spacing:1px}
.room-card-desc{color:var(--muted);font-size:13px}

/* 聊天室 */
.chat-view{flex:1;display:flex;flex-direction:column;height:100%}
.chat-header{
  display:flex;align-items:center;gap:12px;padding:12px 18px;
  background:var(--card);border-bottom:1px solid var(--line);flex-shrink:0;
}
.chat-title{font-family:var(--serif);font-size:18px;letter-spacing:1px}
.chat-online{margin-left:auto;font-size:12px;color:var(--muted)}
.btn-ghost.sync{font-size:12px;padding:6px 12px;flex-shrink:0}
.chat-msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.chat-body{flex:1;display:flex;overflow:hidden;min-height:0}
.chat-main{flex:1;display:flex;flex-direction:column;position:relative;min-width:0}
/* 右侧状态栏 */
.presence-bar{
  width:220px;flex-shrink:0;background:var(--card);border-left:1px solid var(--line);
  padding:16px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;
}
.presence-head{font-family:var(--serif);font-size:15px;letter-spacing:1px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:10px}
.presence-group-title{font-size:12px;color:var(--muted);letter-spacing:1px;margin-bottom:8px}
.presence-list{display:flex;flex-direction:column;gap:9px}
.presence-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.presence-item .p-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presence-item .p-state{font-size:11px;color:var(--muted);flex-shrink:0}
.presence-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.presence-dot.online{background:#3cb371}
.presence-dot.away{background:#e0a83a}
.presence-dot.offline{background:#b9b4ab}
.presence-dot.busy{background:var(--rust)}
.presence-empty{font-size:12px;color:var(--muted);font-style:italic}
.msg{max-width:70%;padding:12px 16px;border-radius:2px;position:relative;font-size:14.5px}
.msg .msg-head{font-size:12px;color:var(--muted);margin-bottom:5px;display:flex;gap:8px;align-items:center}
.msg .msg-name{color:var(--rust);font-weight:600}
.msg-edit{color:var(--rust);cursor:pointer;text-decoration:underline;margin-left:auto;font-size:11px;flex-shrink:0}
.msg-edited{color:var(--muted);font-size:11px;font-style:italic}
.msg.from-user{align-self:flex-end;background:var(--rust);color:#fff}
.msg.from-user .msg-head{color:rgba(255,255,255,.85)}
.msg.from-user .msg-name{color:#fff}
.msg.from-agent{align-self:flex-start;background:var(--card);border:1px solid var(--line)}
.msg.from-system{align-self:center;background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:13px}
.msg .attachments{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.msg .att{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:2px;font-size:13px;color:var(--ink);text-decoration:none}
.msg .att:hover{border-color:var(--rust)}
.chat-typing{text-align:center;font-size:13px;color:var(--rust);padding:4px}

.chat-inputbar{
  display:flex;align-items:flex-end;gap:10px;padding:14px 18px;
  background:var(--card);border-top:1px solid var(--line);flex-shrink:0;
}
#msg-input{
  flex:1;resize:none;border:1px solid var(--line);background:var(--bg);
  padding:11px 14px;border-radius:2px;outline:none;max-height:120px;min-height:44px;
}
#msg-input:focus{border-color:var(--rust)}
.attach-btn{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:2px;color:var(--rust);font-size:22px;cursor:pointer;flex-shrink:0;
}
.btn-primary.send{padding:12px 22px;flex-shrink:0}
.attach-preview{display:flex;gap:8px;flex-wrap:wrap;padding:8px 18px 0}
.attach-chip{font-size:12px;background:var(--bg);border:1px solid var(--line);padding:4px 10px;border-radius:2px}

/* @ 待选面板 */
.at-panel{
  position:absolute;left:70px;right:70px;bottom:76px;z-index:60;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  max-height:200px;overflow-y:auto;border-radius:2px;
}
.chat-view{position:relative}
.at-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;cursor:pointer;border-bottom:1px solid var(--line);
}
.at-item:last-child{border-bottom:none}
.at-item:hover{background:var(--bg)}
.at-item-name{font-family:var(--serif);letter-spacing:1px}
.at-item-type{font-size:12px;color:var(--muted)}

/* 通用选择弹窗列表 */
.pick-list{display:flex;flex-direction:column;gap:8px}
.pick-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  background:var(--bg);
}
.pick-item:hover{border-color:var(--rust)}
.pick-item-name{font-family:var(--serif);letter-spacing:1px}
.pick-item-sub{font-size:12px;color:var(--muted)}

/* Agent 弹窗 */
.modal{position:fixed;inset:0;background:rgba(26,26,26,.4);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-box{background:var(--card);border:1px solid var(--line);width:100%;max-width:520px;box-shadow:var(--shadow);border-radius:2px;max-height:80vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-family:var(--serif);font-weight:normal;letter-spacing:1px}
.modal-close{font-size:24px;color:var(--muted)}
.modal-body{padding:20px;overflow-y:auto}
.agent-form{display:flex;gap:10px;margin-bottom:10px}
.agent-form input{flex:1;padding:10px 12px;border:1px solid var(--line);background:var(--bg);border-radius:2px}
.agent-form select{padding:10px;border:1px solid var(--line);background:var(--bg);border-radius:2px}
.other-type{width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--bg);border-radius:2px;margin-bottom:14px}
.other-type:focus{border-color:var(--rust);outline:none}
.agent-list{display:flex;flex-direction:column;gap:10px}
.agent-row{border:1px solid var(--line-soft);background:var(--bg);padding:12px 14px;border-radius:2px;display:flex;align-items:center;justify-content:space-between}
.agent-row .a-name{font-family:var(--serif);font-size:15px}
.agent-row .a-type{font-size:12px;color:var(--muted);margin-left:8px}
.agent-row .a-token{font-size:11px;color:var(--muted);word-break:break-all;margin-top:4px}
.agent-row .a-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:12px}
.agent-row .a-status{font-size:12px;padding:3px 8px;border-radius:2px;border:1px solid var(--line)}
.agent-row .a-status.idle{color:#3a7d44;border-color:#3a7d44}
.agent-row .a-status.busy{color:var(--rust);border-color:var(--rust)}
.btn-bind{padding:6px 12px;border:1px solid var(--rust);color:var(--rust);border-radius:2px;font-size:13px}
.btn-bind:hover{background:var(--rust);color:#fff}
.btn-connect{padding:6px 12px;border:1px solid var(--line);color:var(--ink);border-radius:2px;font-size:13px}
.btn-connect:hover{border-color:var(--rust);color:var(--rust)}
.btn-del{padding:6px 12px;border:1px solid #a3342a;color:#a3342a;border-radius:2px;font-size:13px}
.btn-del:hover{background:#a3342a;color:#fff}

/* 接入信息 */
.agent-connect{margin-top:20px;border:1px solid var(--line);background:var(--card);border-radius:2px;padding:16px}
.connect-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.connect-head h4{font-family:var(--serif);font-weight:normal;letter-spacing:1px}
.connect-desc{font-size:12px;color:var(--muted);margin-bottom:14px}
.connect-block{margin-bottom:12px}
.connect-label{font-size:12px;color:var(--muted);margin-bottom:4px;letter-spacing:1px}
.connect-val{font-size:13px;font-family:monospace;word-break:break-all;background:var(--bg);border:1px solid var(--line-soft);padding:8px 10px;border-radius:2px}
.connect-prompt{width:100%;font-size:12.5px;line-height:1.6;background:var(--bg);border:1px solid var(--line-soft);padding:10px;border-radius:2px;resize:vertical;color:var(--ink)}

/* ============ 管理后台 ============ */
.admin-view{min-height:100vh}
.admin-page{flex:1;padding:28px 24px calc(var(--nav-h) + 20px);max-width:860px;margin:0 auto;width:100%}
.admin-page-title{font-family:var(--serif);font-size:26px;font-weight:normal;letter-spacing:2px;margin-bottom:16px}
.admin-hint{font-size:13px;color:var(--muted);margin-bottom:16px;padding:10px 12px;background:var(--card);border:1px solid var(--line-soft);border-radius:2px}
.admin-list{display:flex;flex-direction:column;gap:10px}
.admin-row{border:1px solid var(--line-soft);background:var(--card);padding:12px 14px;border-radius:2px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin-row .u-main{display:flex;align-items:center;gap:10px;flex:1;min-width:160px}
.admin-row .u-avatar{width:34px;height:34px;border:1px solid var(--rust);color:var(--rust);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:bold;flex-shrink:0}
.admin-row .u-name{font-family:var(--serif);font-size:15px}
.admin-row .u-user{font-size:12px;color:var(--muted);margin-top:2px}
.admin-row .u-tags{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.admin-row .u-tag{font-size:11px;padding:2px 8px;border-radius:2px;border:1px solid var(--line)}
.admin-row .u-tag.admin{color:var(--rust);border-color:var(--rust)}
.admin-row .u-tag.pending{color:#b8860b;border-color:#b8860b}
.admin-row .u-tag.disabled{color:var(--muted);border-color:var(--muted)}
.admin-row .u-tag.active{color:#3a7d44;border-color:#3a7d44}
.admin-row .u-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.btn-mini{padding:5px 11px;border:1px solid var(--line);border-radius:2px;font-size:12.5px;color:var(--ink);background:var(--card);transition:all .2s}
.btn-mini:hover{border-color:var(--rust);color:var(--rust)}
.btn-mini.approve{color:#3a7d44;border-color:#3a7d44}
.btn-mini.approve:hover{background:#3a7d44;color:#fff}
.btn-mini.danger{color:#a3342a;border-color:#a3342a}
.btn-mini.danger:hover{background:#a3342a;color:#fff}
.admin-empty{text-align:center;color:var(--muted);padding:24px;font-size:13px}

/* ============ 全平台底部导航栏（固定底部） ============ */
.bottom-nav{
  display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;height:var(--nav-h);
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -1px 6px rgba(26,26,26,.06);
}
.bnav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;color:var(--muted);transition:color .2s;border-top:2px solid transparent;
}
.bnav-btn svg{display:block}
.bnav-btn.active{color:var(--rust);border-top-color:var(--rust);font-weight:600}

/* ============ 移动端响应式 ============ */
@media (max-width:768px){
  .auth-view{padding:16px}
  .auth-card{padding:34px 26px}
  .brand-title{font-size:22px}
  .topbar{padding:10px 12px}
  .topbar-title{font-size:15px}
  .me-nick{display:none}
  .topbar-right .btn-ghost{display:none}
  .topbar-right .btn-ghost#btn-new-ws{display:inline-block;font-size:13px;padding:7px 10px}
  .topbar-right .btn-ghost#btn-agents{display:inline-block;font-size:13px;padding:7px 10px}
  .topbar-right .btn-ghost#btn-logout{display:inline-block;font-size:13px;padding:7px 10px}
  .topbar-right .btn-ghost#btn-admin-back{display:inline-block;font-size:13px;padding:7px 10px}

  /* 工作空间切换条：横向滚动 */
  .app-body{flex-direction:column;overflow:auto}
  .ws-list{
    width:100%;flex:none;border-right:none;border-bottom:1px solid var(--line);
    display:flex;gap:8px;padding:10px 12px;overflow-x:auto;overflow-y:hidden;
  }
  .ws-item{flex:0 0 auto;margin-bottom:0;min-width:110px}
  .ws-item .ws-name{font-size:14px}
  .ws-item .ws-meta{font-size:11px}

  /* 手机端进入聊天室后：收缩为顶部横向 tab 条（覆盖全局 92px 竖条规则） */
  .app-body.chatting .ws-list{
    width:100%;padding:8px 10px;gap:6px;flex-direction:row;
    overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
  }
  .app-body.chatting .ws-item{
    flex:0 0 auto;min-width:auto;padding:7px 14px;text-align:center;margin-bottom:0;
  }
  .app-body.chatting .ws-item .ws-name{font-size:13px;white-space:nowrap}
  .app-body.chatting .ws-item .ws-meta{display:none}

  /* 首页：隐藏两个大卡片，只用底部导航 */
  .home-view{padding:28px 16px 80px}
  .home-title{font-size:24px}
  .home-meta{margin-bottom:16px}
  .room-cards{display:none}
  .home-tip{margin-bottom:8px;font-size:14px}

  .msg{max-width:85%}
  .presence-bar{display:none}
  .chat-view{padding-bottom:0}
  .chat-inputbar{position:static}
  .admin-page{padding:20px 16px calc(var(--nav-h) + 20px)}
  .admin-row{flex-direction:column;align-items:flex-start}
  .admin-row .u-actions{width:100%}
  .admin-row .u-actions .btn-mini{flex:1;text-align:center}
}

@media (max-width:480px){
  .room-cards{grid-template-columns:1fr}
}

/* ============ 个人中心 ============ */
.profile-view{min-height:100vh}
.profile-page{
  flex:1;padding:28px 24px calc(var(--nav-h) + 20px);
  max-width:760px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:20px;
}
.p-card{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:22px 24px;box-shadow:var(--shadow)}
.p-title{font-family:var(--serif);font-size:20px;font-weight:normal;letter-spacing:1px;margin-bottom:16px;color:var(--ink)}
.p-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.p-head .p-title{margin-bottom:0}
.p-form{display:flex;flex-direction:column;gap:14px}
.p-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);letter-spacing:1px}
.p-form input{
  padding:11px 14px;border:1px solid var(--line);background:var(--bg);
  border-radius:2px;outline:none;font-size:15px;color:var(--ink);
}
.p-form input:focus{border-color:var(--rust)}
.p-form .btn-primary{align-self:flex-start;padding:11px 28px;letter-spacing:2px}
.p-msg{margin-top:4px;font-size:13px;color:var(--rust);min-height:18px}
.p-list{display:flex;flex-direction:column;gap:10px}
.p-row{border:1px solid var(--line-soft);background:var(--bg);padding:12px 14px;border-radius:2px}
.p-row-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.p-row-name{font-family:var(--serif);font-size:15px}
.p-row-sub{font-size:12px;color:var(--muted);margin-top:3px;word-break:break-all}
.p-row-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.p-empty{color:var(--muted);font-size:13px;padding:8px 0}

@media (max-width:768px){
  .profile-page{padding:18px 14px calc(var(--nav-h) + 20px)}
  .p-card{padding:18px 16px}
  .p-row-main{flex-direction:column;align-items:flex-start}
  .p-row-actions{width:100%}
  .p-row-actions .btn-mini{flex:1;text-align:center}
}