/* Product component rules copied from critiqueai-extension/sidepanel.html. */
.prompt-demo {
  --green:#2D4A3E; --green-light:#EBF0EE; --green-mid:#3d6356;
  --cream:#FAF9F6; --sand:#E5E0D8; --sand-dark:#C8C0B4;
  --warm-mid:#8C7E70; --warm-text:#3D3530; --warm-sub:#6B5E55;
  --amber:#D97706; --amber-light:#FEF3C7;
  --white:#fff;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',monospace;
  --r-pill:32px;
}
.prompt-demo .panel-header{
  padding:12px 14px;border-bottom:1px solid var(--sand);
  background:white;display:flex;align-items:center;
  justify-content:space-between;flex-shrink:0;
}
.prompt-demo .panel-header-left{display:flex;align-items:center;gap:8px;}
.prompt-demo .panel-logo{display:block;flex-shrink:0;width:22px;height:22px;}
.prompt-demo .panel-title{font-size:13px;font-weight:600;color:var(--warm-text);}
.prompt-demo .panel-close{background:none;border:none;font-size:18px;color:var(--warm-mid);cursor:pointer;padding:2px 5px;border-radius:5px;transition:background .15s;}
.prompt-demo .panel-close:hover{background:var(--sand);}
.prompt-demo .panel-tabs{display:flex;border-bottom:1px solid var(--sand);background:white;flex-shrink:0;padding:0 14px;}
.prompt-demo .panel-tab{padding:10px 12px;font-size:13px;color:var(--warm-mid);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;}
.prompt-demo .panel-tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:500;}
.prompt-demo .prompt-back{font-size:16px;padding:8px 10px;color:var(--warm-mid);border-right:1px solid var(--sand);margin-right:4px;}
.prompt-demo .prompt-back:hover{color:var(--green);background:var(--green-light);}
.prompt-demo .case-tab{font-size:15px;padding:8px 10px;min-width:40px;text-align:center;}
.prompt-demo .case-tab.active{border-bottom-color:var(--amber);}
.prompt-demo .panel-tab:hover:not(.active){color:var(--warm-text);}
.prompt-demo .panel-context{
  padding:12px 14px;background:#FFFBF2;border-bottom:1px solid #F0E8D0;
  font-family:var(--mono);font-size:13px;color:var(--warm-sub);
  border-left:4px solid var(--amber);flex-shrink:0;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.prompt-demo .panel-body{flex:1;overflow-y:auto;padding:14px;}
.prompt-demo .suggestion-item{
  background:white;border:1px solid var(--sand);border-radius:12px;
  padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:all .15s;
}
.prompt-demo .suggestion-item:hover{border-color:var(--green);background:var(--green-light);}
.prompt-demo .suggestion-item.applied{border-color:var(--green);background:var(--green-light);}
.prompt-demo .sug-num{font-size:11px;font-family:var(--mono);color:var(--warm-mid);margin-bottom:4px;letter-spacing:.06em;}
.prompt-demo .sug-text{font-size:14px;color:var(--warm-text);line-height:1.5;}
.prompt-demo .sug-copy-badge{font-size:11px;color:var(--green);font-family:var(--mono);margin-top:5px;display:none;}
.prompt-demo .suggestion-item.applied .sug-copy-badge{display:block;}
.prompt-demo .panel-footer{
  padding:10px 14px;border-top:1px solid var(--sand);background:white;
  display:flex;gap:8px;flex-shrink:0;
}
.prompt-demo .btn-primary{flex:1;padding:9px;background:var(--green);color:white;border:none;border-radius:var(--r-pill);font-size:13px;font-weight:500;font-family:var(--sans);cursor:pointer;transition:background .15s;}
.prompt-demo .btn-primary:hover{background:var(--green-mid);}
.prompt-demo .btn-outline{padding:9px 14px;background:none;border:1.5px solid var(--sand-dark);color:var(--warm-text);border-radius:var(--r-pill);font-size:12px;font-weight:500;font-family:var(--sans);cursor:pointer;transition:all .15s;}
.prompt-demo .btn-outline:hover{border-color:var(--green);color:var(--green);}
.prompt-demo .case-tab{color:var(--warm-text);}
/* Portfolio presentation frame. */
.feature-media.prompt-feature-media{height:auto;background:#EBF0EE;border-color:#E5E0D8}
.prompt-demo{margin:0;width:100%;font-family:var(--sans);color:var(--warm-text);line-height:normal;letter-spacing:normal}
.prompt-demo *{box-sizing:border-box}
.prompt-demo-stage{padding:28px 22px 20px;display:flex;justify-content:center}
.prompt-demo-panel{width:360px;max-width:100%;background:var(--cream);border:1px solid var(--sand);border-radius:12px;overflow:hidden;box-shadow:0 12px 32px rgba(45,74,62,.09)}
.prompt-demo .panel-logo{max-width:none}
.prompt-demo .panel-body{overflow:visible;min-height:296px}
.prompt-demo .panel-context{min-height:58px;margin:0;line-height:1.5}
.prompt-demo .suggestion-item{cursor:default}
.prompt-demo .suggestion-item:nth-child(2){border-color:var(--green);background:var(--green-light)}
.prompt-demo .sug-copy-badge{display:block}
.prompt-demo .btn-primary{text-align:center;cursor:default;display:block}
.prompt-demo .panel-tab,.prompt-demo .panel-close{cursor:default}
.prompt-demo-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px 16px;font:11px var(--mono);color:var(--warm-sub)}
.prompt-demo-caption button{font:inherit;color:var(--green);background:transparent;border:0;padding:7px 0;cursor:pointer}
.prompt-demo-caption button:disabled{opacity:.45;cursor:default}
.prompt-demo-caption button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.prompt-demo-caption [hidden]{display:none}
@media(max-width:480px){.prompt-demo-stage{padding:18px 12px 14px}.prompt-demo-caption{padding:0 12px 12px}.prompt-demo .panel-tabs{padding:0 8px}.prompt-demo .panel-tab{padding-left:9px;padding-right:9px}}
@media(prefers-reduced-motion:reduce){.prompt-demo *{transition:none!important}}