/* Source, counter and board components copied from critiqueai-extension/sidepanel.html.
   Shared panel chrome, fonts and tokens live in prompt-suggestion-demo.css. */
.feature-demo .source-intro{font-size:13px;color:var(--warm-mid);line-height:1.55;margin-bottom:14px;}
.feature-demo .source-item{
  background:white;border:1px solid var(--sand);border-radius:12px;
  padding:13px;margin-bottom:10px;
}
.feature-demo .source-num-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.feature-demo .source-num{width:20px;height:20px;border-radius:50%;background:var(--green);color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feature-demo .source-type{display:none;}
.feature-demo .source-title{font-size:14px;font-weight:600;color:var(--warm-text);margin-bottom:4px;line-height:1.4;}
.feature-demo .source-desc{font-size:13px;color:var(--warm-sub);line-height:1.55;margin-bottom:7px;}
.feature-demo .source-link{font-size:12px;font-family:var(--mono);color:var(--green);margin-bottom:7px;cursor:pointer;}
.feature-demo .source-link:hover{text-decoration:underline;}
.feature-demo .source-tags{display:none;}
.feature-demo .source-tag{font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:10px;font-weight:600;}
.feature-demo .counter-banner{
  font-size:13px;color:var(--warm-mid);line-height:1.55;margin-bottom:14px;
}
.feature-demo .counter-item{
  border-left:3px solid var(--amber);background:white;
  border-radius:0 10px 10px 0;padding:12px 13px;margin-bottom:10px;
  border-top:1px solid var(--sand);border-right:1px solid var(--sand);border-bottom:1px solid var(--sand);
}
.feature-demo .counter-label{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--amber);margin-bottom:5px;}
.feature-demo .counter-text{font-size:14px;color:var(--warm-text);line-height:1.55;margin-bottom:6px;}
.feature-demo .counter-source{font-size:12px;font-family:var(--mono);color:var(--warm-mid);}
.feature-demo .board-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.feature-demo .board-list-title{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--warm-mid);}
.feature-demo .board-item{
  background:white;border:1px solid var(--sand);border-radius:12px;
  padding:13px;margin-bottom:8px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:space-between;
}
.feature-demo .board-item:hover{border-color:var(--green);box-shadow:0 2px 8px rgba(45,74,62,.08);}
.feature-demo .board-item-info{flex:1;min-width:0;}
.feature-demo .board-item-name{font-size:13px;font-weight:500;color:var(--warm-text);margin-bottom:3px;}
.feature-demo .board-item-meta{font-size:12px;color:var(--warm-mid);font-family:var(--mono);}
.feature-demo .board-item-arrow{color:var(--sand-dark);font-size:14px;flex-shrink:0;}
.feature-demo .board-editor{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.feature-demo .board-toolbar{
  padding:8px 12px;background:white;border-bottom:1px solid var(--sand);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.feature-demo .board-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;}
.feature-demo .board-back{color:var(--warm-mid);cursor:pointer;transition:color .15s;}
.feature-demo .board-back:hover{color:var(--green);}
.feature-demo .board-name{color:var(--warm-text);font-weight:500;}
.feature-demo .board-canvas{
  flex:1;position:relative;overflow:hidden;
  background-color:var(--cream);
  background-image:radial-gradient(circle,var(--sand) 1px,transparent 1px);
  background-size:24px 24px;
  cursor:default;
}
.feature-demo .board-canvas.panning{cursor:grabbing;}
.feature-demo .bc-pan{position:absolute;top:0;left:0;width:3000px;height:3000px;transform-origin:0 0;}
.feature-demo .bc-card{
  position:absolute;width:200px;background:white;
  border:1.5px solid var(--sand);border-radius:14px;
  cursor:grab;z-index:2;user-select:none;overflow:hidden;
  transition:box-shadow .15s,border-color .15s;
}
.feature-demo .bc-card:hover{border-color:var(--sand-dark);box-shadow:0 2px 8px rgba(45,74,62,.08);}
.feature-demo .bc-card:active{cursor:grabbing;}
.feature-demo .bc-card.bc-selected{
  box-shadow:0 0 0 3px rgba(45,74,62,.18),0 4px 16px rgba(45,74,62,.12);
}
.feature-demo .bc-card-header{
  display:flex;align-items:center;gap:6px;
  padding:9px 10px 7px;border-bottom:1px solid var(--sand);cursor:grab;
}
.feature-demo .bc-color-bar{width:11px;height:11px;border-radius:50%;flex-shrink:0;cursor:pointer;transition:transform .15s;}
.feature-demo .bc-color-bar:hover{transform:scale(1.25);}
.feature-demo .bc-tag{font-size:8.5px;font-family:var(--mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;flex:1;cursor:pointer;outline:none;}
.feature-demo .bc-tag[contenteditable="true"]{box-shadow:0 0 0 1.5px rgba(45,74,62,.3);}
.feature-demo .bc-delete-btn{width:16px;height:16px;border-radius:50%;background:transparent;border:1.5px solid var(--green);color:var(--green);font-size:9px;font-weight:700;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;line-height:1;padding:0;}
.feature-demo .bc-card.bc-selected .bc-delete-btn{display:flex;}
.feature-demo .bc-delete-btn:hover{background:var(--green);color:white;}
.feature-demo .bc-body-wrap{padding:9px 10px 8px;cursor:grab;}
.feature-demo .bc-body{font-size:12px;color:var(--warm-text);line-height:1.55;min-height:36px;cursor:text;border-radius:6px;padding:4px 5px;margin:-4px -5px;}
.feature-demo .bc-body.bc-editing{background:rgba(235,240,238,.6);outline:none;cursor:text;}
.feature-demo .bc-body:empty:before{content:attr(data-placeholder);color:var(--sand-dark);pointer-events:none;}
.feature-demo .bc-link-row{display:flex;align-items:center;gap:5px;padding:0 10px 9px;}
.feature-demo .bc-link{font-size:9.5px;font-family:var(--mono);color:var(--green);text-decoration:underline;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feature-demo .bc-color-picker{position:absolute;top:30px;left:0;z-index:100;background:white;border:1px solid var(--sand);border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.14);}
.feature-demo .bc-swatch{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s;flex-shrink:0;}
.feature-demo .bc-swatch:hover{transform:scale(1.25);}
.feature-demo .bc-swatch.picked{border-color:var(--warm-text);}
.feature-demo .bc-bottom-bar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;}
.feature-demo .board-canvas{padding-bottom:60px;}
.feature-demo .bc-add-btn{display:flex;align-items:center;gap:5px;padding:9px 18px;background:var(--green);color:white;border:none;border-radius:var(--r-pill);font-size:12px;font-weight:500;font-family:var(--sans);cursor:pointer;transition:background .15s;box-shadow:0 3px 12px rgba(45,74,62,.25);}
.feature-demo .bc-add-btn:hover{background:var(--green-mid);}
/* Portfolio framing and demonstration states. */
.feature-demo .prompt-demo-stage{height:var(--feature-stage-height,auto);align-items:flex-start}
.feature-demo .prompt-demo-panel{flex-shrink:0;transform:scale(var(--feature-panel-scale,1));transform-origin:top center}
.feature-demo .panel-body{min-height:360px}
.feature-demo .source-link{display:block;overflow-wrap:anywhere}
.feature-demo .save-to-board-btn{display:table;margin-top:8px;padding:5px 10px;background:var(--green);color:white;border:none;border-radius:20px;font-size:10px;font-weight:500;font-family:var(--sans)}
.feature-demo .source-link,.feature-demo .bc-card,.feature-demo .bc-card-header,.feature-demo .bc-body-wrap,.feature-demo .bc-body,.feature-demo .bc-tag,.feature-demo .bc-color-bar,.feature-demo .bc-link,.feature-demo .board-back,.feature-demo .bc-add-btn{cursor:default}
.feature-demo .source-link:hover{text-decoration:none}
.feature-demo .board-demo-save{padding:5px 12px;font-size:11px}
.feature-demo .board-canvas{height:486px;flex:none}
.feature-demo .bc-card{max-width:calc(100% - 28px)}
.feature-demo .board-demo-card-1{top:18px;left:14px}
.feature-demo .board-demo-card-2{top:148px;right:14px}
.feature-demo .board-demo-card-3{top:278px;left:28px}
.feature-demo .board-demo-toast{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);background:var(--warm-text);color:white;padding:8px 16px;border-radius:var(--r-pill);font-size:12px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.2);white-space:nowrap;z-index:25}
@media(max-width:480px){.feature-demo .board-demo-card-3{left:14px}.feature-demo .board-toolbar{padding:8px 10px}.feature-demo .board-breadcrumb{gap:5px}}