/* Claude component reused from mcp/mcp.css; isolated to the Playbooks illustration. */
.lpb-mcp-scene .mx-demo.mcui{ max-width:1120px; height:660px; display:flex; background:#faf9f7; border-radius:12px; font-family:var(--ds-font); color:var(--ds-ink); }
.lpb-mcp-scene .mcui img{ display:block; object-fit:contain; width:16px; height:16px; flex-shrink:0; }
.lpb-mcp-scene .mcui-sidebar{ width:190px; flex-shrink:0; padding:18px 12px 12px; background:#f6f5f2; border-right:1px solid #1217220b; display:flex; flex-direction:column; }
.lpb-mcp-scene .mcui-brand{ display:flex; align-items:center; font:500 25px/30px Georgia,serif; padding:0 5px 22px; letter-spacing:-1px; }
.lpb-mcp-scene .mcui-brand > span{ margin-left:auto; opacity:.55; }
.lpb-mcp-scene .mcui-nav{ display:flex; flex-direction:column; gap:3px; }
.lpb-mcp-scene .mcui-nav > span{ display:flex; align-items:center; gap:10px; padding:8px 7px; font-size:12px; line-height:17px; }
.lpb-mcp-scene .mcui-nav img{ width:15px; height:15px; opacity:.7; }
.lpb-mcp-scene .mcui-recents-label{ margin:30px 7px 10px; color:var(--ds-ink-50); font-size:11px; }
.lpb-mcp-scene .mcui-recent{ display:flex; align-items:center; gap:8px; padding:9px 8px; border-radius:7px; background:#ecebe7; font-size:11px; }
.lpb-mcp-scene .mcui-recent img{ width:12px; height:12px; opacity:.45; }
.lpb-mcp-scene .mcui-recent > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lpb-mcp-scene .mcui-profile{ display:flex; align-items:center; gap:8px; margin-top:auto; border-top:1px solid #1217220b; padding:15px 3px 0; font-size:11px; }
.lpb-mcp-scene .mcui-profile > span{ display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#e9e8e2; font-size:9px; }
.lpb-mcp-scene .mcui-profile small{ display:block; color:var(--ds-ink-50); font-size:10px; margin-top:3px; }
.lpb-mcp-scene .mcui-profile > img{ margin-left:auto; width:12px; height:12px; }
.lpb-mcp-scene .mcui-main{ display:flex; flex-direction:column; flex:1; min-width:0; height:100%; }
.lpb-mcp-scene .mcui-topbar{ display:flex; align-items:center; gap:7px; height:48px; flex-shrink:0; padding:0 20px; font-size:12px; }
.lpb-mcp-scene .mcui-topbar > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lpb-mcp-scene .mcui-topbar > img{ width:12px; height:12px; opacity:.6; }
.lpb-mcp-scene .mcui-share{ margin-left:auto; border:1px solid #1217221a; border-radius:6px; padding:5px 10px; background:#ffffff70; font-size:11px; }
.lpb-mcp-scene .mcui-chat{ flex:1; min-height:0; overflow:hidden; padding:20px 32px 0; }
.lpb-mcp-scene .mcui-thread{ width:100%; max-width:680px; margin:0 auto; }
.lpb-mcp-scene .mcui-thread[hidden]{ display:none; }
.lpb-mcp-scene .mcui-user{ max-width:88%; width:fit-content; margin-left:auto; padding:12px 16px; border-radius:13px; background:#eeede9; font-size:14px; line-height:21px; }
.lpb-mcp-scene .mcui-answer{ margin-top:26px; }
.lpb-mcp-scene .mcui-tool-label{ display:flex; align-items:center; gap:6px; color:#85857f; font-size:11px; line-height:17px; margin-bottom:10px; }
.lpb-mcp-scene .mcui-tool-label img{ width:12px; height:12px; opacity:.45; }
.lpb-mcp-scene .mcui-tool-call{ border:1px solid #12172218; border-radius:10px; overflow:hidden; margin-bottom:19px; font-size:11px; line-height:16px; color:#85857f; }
.lpb-mcp-scene .mcui-tool-call > div{ display:flex; align-items:center; gap:8px; padding:8px 10px; white-space:nowrap; overflow:hidden; }
.lpb-mcp-scene .mcui-tool-call > div + div{ border-top:1px solid #12172210; }
.lpb-mcp-scene .mcui-tool-call > div > img:last-child{ width:11px; height:11px; margin-left:auto; transform:rotate(-90deg); opacity:.45; }
.lpb-mcp-scene .mcui-tool-call img[src*="dock-mark"]{ width:14px; height:14px; }
.lpb-mcp-scene .mcui-reply{ font:400 15px/23px var(--ds-font); }
.lpb-mcp-scene .mcui-reply p{ margin:0 0 13px; }
.lpb-mcp-scene .mcui-reply b{ font-weight:500; }
.lpb-mcp-scene .mcui-reply ul{ padding-left:22px; margin:0 0 15px; list-style:disc; }
.lpb-mcp-scene .mcui-reply li{ margin:3px 0; }
.lpb-mcp-scene .mcui-text-link{ color:#385a80; text-decoration:underline; text-underline-offset:3px; }
.lpb-mcp-scene .mcui-message-actions{ display:flex; gap:11px; margin-top:15px; opacity:.5; }
.lpb-mcp-scene .mcui-message-actions img{ width:13px; height:13px; }
.lpb-mcp-scene .mcui-file{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid #12172216; }
.lpb-mcp-scene .mcui-file + p{ margin-top:15px; }
.lpb-mcp-scene .mcui-file > img{ width:19px; height:19px; opacity:.7; }
.lpb-mcp-scene .mcui-file b{ font-size:14px; }
.lpb-mcp-scene .mcui-file small{ display:block; font-size:11px; line-height:17px; color:var(--ds-ink-50); margin-top:2px; }
.lpb-mcp-scene .mcui-table{ margin:0 0 15px; }
.lpb-mcp-scene .mcui-table > div{ display:flex; justify-content:space-between; padding:7px 0; font-size:13px; border-bottom:1px solid #12172214; }
.lpb-mcp-scene .mcui-table span{ color:var(--ds-ink-50); }
.lpb-mcp-scene .mcui-compose-wrap{ flex-shrink:0; width:100%; max-width:748px; padding:12px 28px 10px; margin:0 auto; }
.lpb-mcp-scene .mcui-compose{ border:1px solid #12172224; border-radius:18px; background:#fff; padding:16px 18px 13px; box-shadow:0 4px 14px #12172206; }
.lpb-mcp-scene .mcui-compose > p{ margin:0; font-size:13px; line-height:20px; color:#85857f; }
.lpb-mcp-scene .mcui-compose-controls{ display:flex; align-items:center; gap:16px; margin-top:21px; }
.lpb-mcp-scene .mcui-compose-controls > img{ width:17px; height:17px; }
.lpb-mcp-scene .mcui-model{ display:flex; align-items:center; gap:5px; margin-left:auto; font-size:12px; }
.lpb-mcp-scene .mcui-model span{ color:var(--ds-ink-50); }
.lpb-mcp-scene .mcui-model img{ width:12px; height:12px; }
.lpb-mcp-scene .mcui-disclaimer{ font-size:9px; line-height:14px; color:#85857f; text-align:center; margin:6px 0 0; }
.lpb-mcp-scene .mcui .mcui-wordmark{ width:110px; height:auto; aspect-ratio:573 / 125; object-fit:contain; }
.lpb-mcp-scene .mcui-chat-list{ display:flex; flex-direction:column; gap:3px; }
.lpb-mcp-scene .mcui-chat-list .mcui-recent{ background:transparent; color:#74746f; transition:background .2s ease,color .2s ease; }
.lpb-mcp-scene .mcui-chat-list .mcui-recent.is-current{ background:#ecebe7; color:var(--ds-ink); }
.lpb-mcp-scene .mcui-chat-list .mcui-recent.is-current img{ opacity:.7; }