/*
 * LoomRoom M3 — 2026-11-10 视觉基线
 * 目标：把散落在 base/shell/panels 的暖色与自定义圆角，收束到一套
 * Material 3 语义令牌；不引入 UI 依赖，只覆盖变量与少量基础件。
 * 载入顺序：必须在 shell.css / meet.css 之后（index.html 最后一个 link）。
 */
body.v5{
  /* M3 color roles（浅色） */
  --bg:#f8fafd;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f1f4f9;
  --panel-3:#e8eef7;
  --line:#e1e5ea;
  --line-soft:#eef1f5;
  --line-strong:#c4c7c5;

  --text:#1f1f1f;
  --text-2:#444746;
  --muted:#5f6368;
  --faint:#6b7280;

  --lamp:#0b57d0;
  --lamp-strong:#0b57d0;
  --lamp-text:#0842a0;
  --lamp-ink:#ffffff;
  --lamp-soft:#e8f0fe;
  --lamp-line:#c2d7fb;

  --ok:#146c2e;
  --ok-strong:#0f5223;
  --danger:#b3261e;
  --warn:#8a5a00;
  --warn-strong:#6b4600;

  /* 分类色：低饱和、冷暖成对，避免紫/黑大色块 */
  --viz-violet:#7c5cff;
  --viz-blue:#0b57d0;
  --viz-teal:#0f766e;
  --viz-amber:#a15c00;
  --viz-rose:#b3261e;

  --font-ui:"Google Sans","Roboto","Segoe UI","Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --font-display:"Google Sans","Roboto","Segoe UI","Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --font-mono:"Roboto Mono","Cascadia Mono","JetBrains Mono",Consolas,monospace;

  --fs-1:11px;--fs-2:12px;--fs-3:13px;--fs-4:14px;--fs-5:16px;--fs-6:18px;--fs-7:22px;--fs-8:28px;

  --r-sm:8px;--r:12px;--r-lg:16px;
  --shadow:0 1px 2px rgba(60,64,67,.08),0 2px 12px rgba(60,64,67,.08);
  --scrim:rgba(32,33,36,.46);
  /* 视频 tile 上的名字条：Meet 是深色半透明，白字，不带第二行角色 */
  --tile-label-bg:rgba(32,33,36,.78);
  --tile-label-ink:#ffffff;
  --tint:rgba(60,64,67,.035);
  --tint-2:rgba(60,64,67,.06);
  --hairline:rgba(60,64,67,.10);
  --hairline-strong:rgba(60,64,67,.18);
  --bar-bg:rgba(248,250,253,.88);
}

body.v5{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-feature-settings:"kern" 1,"liga" 1;
}

/* 首页：去掉暖色极光，只留一层极淡的品牌冷光 */
body.v5.home-mode .home-bg{
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(11,87,208,.055), transparent 66%),
    var(--bg);
}
body.v5.home-mode .home-bg::after{display:none}
body.v5.home-mode .home-canvas{
  border-color:var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  background:var(--panel);
}
body.v5.home-mode .home-aside > section,
body.v5.home-mode .home-aside > .home-card-local{
  border-color:var(--line);
  border-radius:20px;
  box-shadow:none;
}
body.v5.home-mode .home-slogan{
  letter-spacing:-.025em;
  line-height:1.12;
}

/* 基础件：Meet / M3 的 40px 高、pill 形状、弱阴影 */
body.v5 .primary-btn,
body.v5 .ghost-btn,
body.v5 .icon-btn,
body.v5 .link-btn{
  border-radius:999px;
  font-weight:500;
}
body.v5 .primary-btn{
  background:var(--lamp-strong);
  color:var(--lamp-ink);
  border:1px solid transparent;
  box-shadow:none;
}
body.v5 .primary-btn:hover{background:var(--lamp-text);filter:none}
body.v5 .ghost-btn{
  border-color:var(--line);
  color:var(--text-2);
  background:var(--panel);
}
body.v5 .ghost-btn:hover{background:var(--panel-2);border-color:var(--line-strong)}
body.v5 .icon-btn{border-color:transparent;background:transparent}
body.v5 .icon-btn:hover{background:var(--panel-2)}

body.v5 .input,
body.v5 textarea.input,
body.v5 select.input{
  border-radius:var(--r-sm);
  border-color:var(--line);
  background:var(--panel);
}
body.v5 .input:focus,
body.v5 textarea.input:focus,
body.v5 select.input:focus{
  border-color:var(--lamp);
  box-shadow:0 0 0 1px var(--lamp);
}

body.v5 .modal-card,
body.v5 .clarify-card{
  border-radius:var(--r-lg);
  border-color:var(--line);
  box-shadow:0 24px 64px -24px rgba(32,33,36,.36);
}
body.v5 .nm-card{border-radius:28px}
body.v5 #v5-panel{border-radius:28px;border-color:var(--line)}
body.v5 #v5-panel > div:first-child{padding-top:18px;padding-bottom:18px}
body.v5 .overlay{background:var(--scrim);backdrop-filter:blur(1.5px)}
body.v5 .drawer{border-left:1px solid var(--line);box-shadow:-16px 0 48px rgba(32,33,36,.18)}
body.v5 .drawer-head{border-bottom-color:var(--line-soft)}
body.v5 .toast{border-radius:var(--r-sm);border-color:var(--line);box-shadow:var(--shadow);font-size:12px}

/* 分段控件与 tab：M3 的 pill / 48px 行高 */
body.v5 .seg{border-radius:999px;padding:3px;background:var(--panel-2);border:1px solid var(--line-soft)}
body.v5 .seg-btn{border-radius:999px;min-height:28px;padding:0 12px;font-size:12px}
body.v5 .seg-btn.active{background:var(--lamp-strong);color:var(--lamp-ink);box-shadow:none}

body.v5 .v10-console-tabs button[data-pane]{height:48px;font-size:12px;letter-spacing:0;text-transform:none}

/* 滚动条更接近 Chrome/Meet：细、浅、无描边 */
body.v5 ::-webkit-scrollbar{width:8px;height:8px}
body.v5 ::-webkit-scrollbar-thumb{background:#c7cacf;border:2px solid transparent;background-clip:content-box;border-radius:999px}
body.v5 ::-webkit-scrollbar-track{background:transparent}

/* 侧栏：M3 navigation drawer；选中项是 tonal pill，不是 2px 竖线 */
body.v5 .sidebar,
body.v5.home-mode .sidebar{
  background:var(--bg);
  border-right:1px solid var(--line-soft);
  padding:12px 10px 10px;
  box-shadow:none;
}
body.v5 .sidebar .brand{padding:4px 8px 12px}
body.v5 .sidebar .brand-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
body.v5 #btn-new-meeting.primary-btn{
  height:44px;border-radius:999px;font-size:14px;font-weight:500;
}
body.v5 .sidebar .sb-nav{padding:10px 0;gap:2px;border-top:1px solid var(--line-soft)}
body.v5 .sidebar .sb-nav .sb-h,
body.v5 .sb-nav .sb-h{
  font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;
  color:var(--muted);padding:8px 12px 4px;
}
body.v5 .sidebar .sb-nav-item,
body.v5 .sb-nav .sb-nav-item{
  height:40px;border-radius:999px;padding:0 12px;font-size:13px;font-weight:500;
  color:var(--text-2);
}
body.v5 .sidebar .sb-nav-item:hover,
body.v5 .sb-nav .sb-nav-item:hover{background:var(--panel-2);color:var(--text)}
body.v5 .sidebar .sb-nav-item.is-active,
body.v5 .sb-nav .sb-nav-item.is-active{
  background:var(--lamp-soft);color:var(--lamp-text);box-shadow:none;
}
body.v5 .sidebar .sb-nav-item.is-active .sb-ico,
body.v5 .sb-nav .sb-nav-item.is-active .sb-ico{color:var(--lamp-strong)}
body.v5 .sidebar .sb-nav-item .sb-ico,
body.v5 .sb-nav .sb-nav-item .sb-ico{color:var(--muted)}
body.v5 .sidebar .sb-nav-item .sb-n{display:none}

/* 设置里的旧 segmented control 覆盖：M3 tonal active */
body[data-v5mode="2"] #v5-panel .seg{
  border-radius:999px;padding:3px;background:var(--panel-2);border:1px solid var(--line-soft);
}
body[data-v5mode="2"] #v5-panel .seg button{
  height:32px;border-radius:999px;font-size:12px;color:var(--muted);
}
body[data-v5mode="2"] #v5-panel .seg button.active,
body[data-v5mode="2"] #v5-panel .seg button[aria-pressed="true"],
body[data-v5mode="2"] #v5-panel .seg button.on{
  background:var(--lamp-strong);color:var(--lamp-ink);
}

/* 小屏不要用大圆角卡片堆叠 */
@media (max-width:640px){
  body.v5.home-mode .home-canvas{border-radius:20px}
  body.v5.home-mode .home-aside > section{border-radius:16px}
}

/* 键盘焦点：统一 2px primary 环（不放大字号、不新增颜色）
   文本输入保留自己的 1px 边框/box-shadow，避免 outline + border 双描边；
   现有 :focus-visible 规则（如 .set-switch）不移除，只与其值保持一致。 */
body.v5 :where(button, a[href], summary, [role="button"], [role="tab"], [role="switch"], input[type="checkbox"], input[type="radio"], [tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--lamp);
  outline-offset:2px;
  /* 组件自带的 Tailwind ring 不再叠在 outline 外面，避免变成双层环 */
  --tw-ring-shadow:0 0 transparent;
}

/* 390：六个洞察 tab 横向滚动，右缘留渐隐提示（纯 CSS，无额外 DOM）
   24px 内边距保证首/末 tab 完全落在不透明区，只有滚动余量处被渐隐。 */
@media (max-width:760px){
  body.v5 #v5-panel [data-testid="insights-panel"] > [role="tablist"]{
    padding-left:24px;
    padding-right:24px;
    scroll-padding-inline:24px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, var(--text) 20px, var(--text) calc(100% - 20px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, var(--text) 20px, var(--text) calc(100% - 20px), transparent 100%);
  }
}