/* ── Interactive Add-in Demo ── */
/* All selectors scoped under .addin-demo to avoid conflicts */

.addin-demo { width: 100%; max-width: 1080px; margin: 0 auto; }

/* Override global * { transition-duration: 300ms } so it doesn't fight animations */
.addin-demo .demo-stagger > *,
.addin-demo .demo-progress-fill,
.addin-demo .demo-module,
.addin-demo .demo-guided {
    transition-property: none !important;
    transition-duration: 0s !important;
}

/* Word Frame */
.addin-demo .word-frame {
    background: #f0f0f0;
    border: 1px solid #bbb;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
}

/* ── Title Bar (macOS) ── */
.addin-demo .demo-title-bar {
    background: #dcdcdc;
    border-bottom: 1px solid #c0c0c0;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    user-select: none;
}
.addin-demo .demo-title-bar-dots { display: flex; gap: 7px; }
.addin-demo .demo-title-bar-text {
    flex: 1;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-weight: 400;
    font-size: 10.5px;
    color: #333;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Ribbon Tab Row ── */
.addin-demo .demo-ribbon-tabs {
    background: #f0f0f0;
    padding: 5px 12px 0;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 11px;
    color: #444;
    user-select: none;
    border-bottom: 1px solid #d4d4d4;
    font-family: 'Inter', sans-serif;
    position: relative;
}
.addin-demo .demo-ribbon-tab {
    padding: 5px 10px 6px;
    cursor: default;
    font-weight: 400;
    white-space: nowrap;
}
.addin-demo .demo-ribbon-tab.active {
    color: #B48434;
    font-weight: 600;
    background: #f8f8f8;
    border: 1px solid #d4d4d4;
    border-bottom: 1px solid #f8f8f8;
    margin-bottom: -1px;
    padding: 5px 10px 7px;
}
.addin-demo .demo-ribbon-share {
    margin-left: auto;
    display: flex;
    align-items: center;
    align-self: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    padding: 4px 14px;
    border: none;
    background: #2b5797;
    cursor: default;
    border-radius: 3px;
    margin-bottom: 4px;
}
.addin-demo .demo-ribbon-share svg { width: 13px; height: 13px; stroke: #ffffff; }

/* ── Ribbon Icon Row (inchambers.ai tab content) ── */
.addin-demo .demo-ribbon-icons {
    background: #f8f8f8;
    border-bottom: 1px solid #d4d4d4;
    padding: 6px 10px 4px;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    user-select: none;
    overflow-x: auto;
}
.addin-demo .demo-ribbon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 6px 3px;
    cursor: default;
    min-width: 48px;
}
.addin-demo .demo-ribbon-btn svg {
    width: 22px;
    height: 22px;
    stroke: #B48434;
    flex-shrink: 0;
}
.addin-demo .demo-ribbon-btn span {
    font-size: 8.5px;
    font-family: 'Inter', sans-serif;
    color: #444;
    white-space: nowrap;
    line-height: 1.2;
}

/* ── Ruler ── */
.addin-demo .demo-ruler {
    background: #e8e8e8;
    border-bottom: 1px solid #ccc;
    height: 16px;
    display: flex;
    align-items: center;
    overflow: hidden;
    user-select: none;
}
.addin-demo .demo-ruler-inner {
    display: flex;
    align-items: center;
    padding-left: 16px;
    gap: 0;
    width: 100%;
}
.addin-demo .demo-ruler-inner span {
    font-size: 8px;
    color: #888;
    font-family: 'Inter', sans-serif;
    flex: 1;
    text-align: center;
    position: relative;
}
.addin-demo .demo-ruler-inner span::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 1px;
    height: 6px;
    background: #aaa;
}

/* ── Main Content ── */
.addin-demo .demo-content {
    display: flex;
    min-height: 540px;
    max-height: 540px;
}

/* ── Document Area (Print Layout) ── */
.addin-demo .demo-doc-area {
    flex: 1;
    background: #d0d0d0;
    padding: 16px 20px 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-right: 1px solid #bbb;
}
.addin-demo .demo-doc-area::-webkit-scrollbar { width: 8px; }
.addin-demo .demo-doc-area::-webkit-scrollbar-track { background: #d0d0d0; }
.addin-demo .demo-doc-area::-webkit-scrollbar-thumb { background: #aaa; }

/* Document Page */
.addin-demo .demo-doc {
    background: #ffffff;
    padding: 36px 44px 60px;
    font-family: 'Times New Roman', 'Georgia', serif;
    font-size: 12.5px;
    line-height: 1.7;
    color: #333;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08);
    max-width: 580px;
    width: 100%;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.addin-demo .demo-doc-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.addin-demo .demo-doc-heading {
    font-size: 13px;
    font-weight: bold;
    margin: 16px 0 6px;
}
.addin-demo .demo-doc-hl {
    padding: 1px 2px;
    margin: -1px -2px;
}
.addin-demo .demo-doc-hl.hl-high {
    background: rgba(220, 38, 38, 0.1);
    box-shadow: inset 3px 0 0 #dc2626;
}
.addin-demo .demo-doc-hl.hl-moderate {
    background: rgba(234, 88, 12, 0.1);
    box-shadow: inset 3px 0 0 #ea580c;
}
.addin-demo .demo-doc-hl.hl-low {
    background: rgba(22, 163, 74, 0.08);
    box-shadow: inset 3px 0 0 #16a34a;
}
.addin-demo .demo-doc-hl.hl-active {
    background: rgba(180, 132, 52, 0.15);
    box-shadow: inset 3px 0 0 #B48434;
}

/* ── Tracked Changes in Document ── */
.addin-demo .demo-tc-del {
    color: #dc2626;
    text-decoration: line-through;
    text-decoration-color: #dc2626;
}
.addin-demo .demo-tc-ins {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: #2563eb;
    font-weight: bold;
}
.addin-demo .demo-tc-hidden { display: none; }
.addin-demo .demo-tc-visible {
    display: inline;
    animation: demoTcFadeIn 0.5s ease forwards;
}
@keyframes demoTcFadeIn {
    from { opacity: 0; background: rgba(37, 99, 235, 0.1); }
    to { opacity: 1; background: transparent; }
}

/* Apply Change button (in risk suggestion) */
.addin-demo .demo-tc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: white;
    background: #2563eb;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.addin-demo .demo-tc-btn:hover { background: #1d4ed8; }
.addin-demo .demo-tc-btn.applied {
    background: #16a34a;
    cursor: default;
    pointer-events: none;
}
.addin-demo .demo-tc-btn svg { width: 10px; height: 10px; }

/* ── Add-in Panel ── */
.addin-demo .demo-panel {
    width: 310px;
    min-width: 310px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    position: relative;
}

/* Panel Header */
.addin-demo .demo-panel-hdr {
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.addin-demo .demo-panel-name {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
}
.addin-demo .demo-panel-hdr-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.addin-demo .demo-panel-close {
    width: 18px;
    height: 18px;
    color: #999;
    cursor: default;
}
.addin-demo .demo-panel-info-icon {
    position: absolute;
    top: 38px;
    right: 4px;
    z-index: 5;
}
.addin-demo .demo-panel-info-icon svg {
    width: 18px;
    height: 18px;
    color: #4281a4;
}

/* Panel Body — scrollable area */
.addin-demo .demo-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
}
.addin-demo .demo-panel-body::-webkit-scrollbar { width: 5px; }
.addin-demo .demo-panel-body::-webkit-scrollbar-thumb { background: #ddd; }

/* ── Home Screen: Module Cards ── */
.addin-demo .demo-home {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.addin-demo .demo-home.hidden { display: none; }

.addin-demo .demo-module-card {
    padding: 12px 14px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
}
.addin-demo .demo-module-card:hover {
    background: #faf8f4;
}
.addin-demo .demo-card-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B48434;
    flex-shrink: 0;
}
.addin-demo .demo-card-icon svg { width: 22px; height: 22px; }
.addin-demo .demo-card-text { flex: 1; min-width: 0; }
.addin-demo .demo-card-title {
    margin: 0 0 1px 0;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}
.addin-demo .demo-card-desc {
    margin: 0;
    font-size: 11.5px;
    color: #4a5568;
    line-height: 1.3;
}

/* Static cards (look active, not clickable) */
.addin-demo .demo-card-static {
    cursor: default;
}
.addin-demo .demo-card-static:hover {
    background: #ffffff;
}

/* Guided pulse — highlights the next clickable element */
.addin-demo .demo-guided {
    outline: 2px solid #B48434;
    outline-offset: -2px;
    cursor: pointer !important;
    animation: demoGuidePulse 1.5s ease-in-out infinite;
    position: relative;
}
@keyframes demoGuidePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 132, 52, 0.4); }
    50% { box-shadow: 0 0 12px 3px rgba(180, 132, 52, 0.25); }
}

/* Guide tooltip */
.addin-demo .demo-tooltip {
    position: absolute;
    background: #B48434;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 10px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
    opacity: 0;
    animation: demoTipFadeIn 0.4s 0.3s ease forwards;
}
.addin-demo .demo-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 14px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #B48434;
}
/* Tooltip positioned above (arrow points down) */
.addin-demo .demo-tooltip.demo-tooltip-above::before {
    top: auto;
    bottom: -5px;
    border-bottom: none;
    border-top: 5px solid #B48434;
}
@keyframes demoTipFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Accept button applied state in Changes */
.addin-demo .demo-change-btn.accepted {
    background: #15803d;
    color: white;
    border-color: #15803d;
    pointer-events: none;
}

/* ── Module Views ── */
.addin-demo .demo-module { display: none; padding: 14px; }
.addin-demo .demo-module.active { display: block; }
.addin-demo .demo-module.active.demo-slide-in {
    animation: demoSlideIn 0.25s ease-out;
}
@keyframes demoSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}
.addin-demo .demo-module.active.demo-slide-back {
    animation: demoSlideBack 0.25s ease-out;
}
@keyframes demoSlideBack {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Back button */
.addin-demo .demo-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #B48434;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 2px 0;
}
.addin-demo .demo-back:hover { color: #8a6328; }
.addin-demo .demo-back svg { width: 14px; height: 14px; }

/* Module header */
.addin-demo .demo-mod-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}
.addin-demo .demo-mod-desc {
    font-size: 11px;
    color: #4a5568;
    margin-bottom: 12px;
}

/* ── Progress ── */
.addin-demo .demo-progress-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: #4a5568;
    margin-bottom: 4px;
}
.addin-demo .demo-progress-bar { height: 3px; background: #eee; overflow: hidden; margin-bottom: 12px; }
.addin-demo .demo-progress-fill {
    height: 100%;
    background: #B48434;
    width: 0%;
}
.addin-demo .demo-progress-fill.demo-animate { animation: demoProgressFill 0.8s ease forwards; }
@keyframes demoProgressFill {
    from { width: 0%; }
    to { width: 100%; }
}

/* ── Risk Summary ── */
.addin-demo .demo-risk-summary { display: flex; gap: 6px; margin-bottom: 12px; }
.addin-demo .demo-risk-stat {
    flex: 1;
    padding: 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
}
.addin-demo .demo-risk-stat-num {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}
.addin-demo .demo-risk-stat-lbl {
    font-size: 8.5px;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ── Risk Items ── */
.addin-demo .demo-risk-item {
    border: 1px solid #e2e8f0;
    margin-bottom: 8px;
    cursor: pointer;
    overflow: hidden;
}
.addin-demo .demo-risk-item:hover {
    border-color: #cbd5e0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.addin-demo .demo-risk-item-hdr {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.addin-demo .demo-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    flex-shrink: 0;
}
.addin-demo .demo-badge.high { background: #dc2626; }
.addin-demo .demo-badge.moderate { background: #ea580c; }
.addin-demo .demo-badge.low { background: #16a34a; }
.addin-demo .demo-badge.covered { background: #4281a4; }
.addin-demo .demo-risk-title {
    font-size: 11.5px;
    font-weight: 500;
    color: #1a1a1a;
    flex: 1;
}
.addin-demo .demo-risk-chevron {
    width: 14px;
    height: 14px;
    color: #999;
    flex-shrink: 0;
}
.addin-demo .demo-risk-item.expanded .demo-risk-chevron { transform: rotate(90deg); }
.addin-demo .demo-risk-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.addin-demo .demo-risk-item.expanded .demo-risk-detail { max-height: 260px; }
.addin-demo .demo-risk-detail-inner {
    padding: 0 12px 12px;
    font-size: 10.5px;
    color: #4a5568;
    line-height: 1.5;
}
.addin-demo .demo-suggestion {
    margin-top: 8px;
    padding: 8px;
    background: #f8fafb;
    border-left: 2px solid #B48434;
    font-size: 10px;
}
.addin-demo .demo-suggestion-lbl {
    font-size: 8.5px;
    font-weight: 600;
    color: #B48434;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

/* ── Changes Analysis View ── */
.addin-demo .demo-change-item {
    border: 1px solid #e2e8f0;
    margin-bottom: 8px;
    overflow: hidden;
}
.addin-demo .demo-change-hdr {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.addin-demo .demo-action-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.addin-demo .demo-action-badge.accept { background: #dcfce7; color: #15803d; }
.addin-demo .demo-action-badge.reject { background: #fef2f2; color: #dc2626; }
.addin-demo .demo-action-badge.negotiate { background: #fef9c3; color: #a16207; }
.addin-demo .demo-change-title {
    font-size: 11px;
    font-weight: 500;
    color: #1a1a1a;
    flex: 1;
}
.addin-demo .demo-change-impact {
    font-size: 8.5px;
    color: #4a5568;
    flex-shrink: 0;
}
.addin-demo .demo-change-body {
    padding: 0 12px 10px;
    font-size: 10.5px;
    line-height: 1.5;
}
.addin-demo .demo-change-old {
    color: #dc2626;
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
}
.addin-demo .demo-change-new {
    color: #2563eb;
    text-decoration: underline;
    display: block;
}
.addin-demo .demo-change-reason {
    color: #4a5568;
    font-size: 9.5px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}
.addin-demo .demo-change-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.addin-demo .demo-change-btn {
    padding: 3px 8px;
    font-size: 8.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border: 1px solid #e2e8f0;
    background: white;
    color: #4a5568;
    cursor: pointer;
}
.addin-demo .demo-change-btn.accept-btn { color: #15803d; border-color: #bbf7d0; }
.addin-demo .demo-change-btn.accept-btn:hover { background: #f0fdf4; }
.addin-demo .demo-change-btn.reject-btn { color: #dc2626; border-color: #fecaca; }
.addin-demo .demo-change-btn.reject-btn:hover { background: #fef2f2; }

/* ── Chat ── */
.addin-demo .demo-chat-mode {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
}
.addin-demo .demo-chat-mode-btn {
    flex: 1;
    padding: 5px 8px;
    font-size: 9.5px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    background: #fafbfc;
    color: #4a5568;
    border: none;
    font-family: 'Inter', sans-serif;
}
.addin-demo .demo-chat-mode-btn.active {
    background: #B48434;
    color: white;
    font-weight: 600;
}
.addin-demo .demo-chat-msgs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.addin-demo .demo-chat-msg {
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.55;
    max-width: 92%;
}
.addin-demo .demo-chat-msg.user {
    background: #B48434;
    color: white;
    align-self: flex-end;
}
.addin-demo .demo-chat-msg.assistant {
    background: #f6f8fa;
    border: 1px solid #e2e8f0;
    color: #1a1a1a;
    align-self: flex-start;
}
.addin-demo .demo-chat-role {
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    opacity: 0.7;
}
.addin-demo .demo-chat-input {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border: 1px solid #e2e8f0;
    background: #fafbfc;
}
.addin-demo .demo-chat-input input {
    flex: 1;
    border: none;
    background: none;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    outline: none;
}
.addin-demo .demo-chat-send {
    width: 28px;
    height: 28px;
    background: #B48434;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addin-demo .demo-chat-send:hover { background: #8a6328; }
.addin-demo .demo-chat-send svg { width: 14px; height: 14px; fill: white; }
.addin-demo .demo-typing {
    display: flex;
    gap: 3px;
    padding: 10px 14px;
    align-self: flex-start;
    background: #f6f8fa;
    border: 1px solid #e2e8f0;
}
.addin-demo .demo-typing-dot {
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    animation: demoBounce 1.2s infinite;
}
.addin-demo .demo-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.addin-demo .demo-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes demoBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Analysis ── */
.addin-demo .demo-a-section { margin-bottom: 14px; }
.addin-demo .demo-a-label {
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4a5568;
    margin-bottom: 6px;
}
.addin-demo .demo-a-card {
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
}
.addin-demo .demo-a-card + .demo-a-card { margin-top: 6px; }
.addin-demo .demo-a-val {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
}
.addin-demo .demo-a-sub {
    font-size: 10px;
    color: #4a5568;
    margin-top: 2px;
}
.addin-demo .demo-a-party {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.addin-demo .demo-a-party:last-child { border-bottom: none; }
.addin-demo .demo-a-avatar {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #B48434, #e8c589);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
}
.addin-demo .demo-a-name {
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
}
.addin-demo .demo-a-role {
    font-size: 9.5px;
    color: #4a5568;
}
.addin-demo .demo-sec-item {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.addin-demo .demo-sec-clickable {
    cursor: pointer;
}
.addin-demo .demo-sec-clickable:hover {
    border-color: #B48434;
    background: #faf8f4;
}
.addin-demo .demo-sec-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}
.addin-demo .demo-sec-dot.high { background: #dc2626; }
.addin-demo .demo-sec-dot.medium { background: #ea580c; }
.addin-demo .demo-sec-dot.low { background: #16a34a; }
.addin-demo .demo-sec-name {
    font-size: 11px;
    font-weight: 500;
    color: #1a1a1a;
    flex: 1;
}
.addin-demo .demo-sec-rating {
    font-size: 9px;
    color: #4a5568;
}
.addin-demo .demo-sec-clickable {
    cursor: pointer;
}
.addin-demo .demo-sec-clickable:hover {
    border-color: #B48434;
    background: #faf8f4;
}
.addin-demo .demo-sec-clickable.active {
    border-color: #B48434;
    background: rgba(180, 132, 52, 0.08);
    box-shadow: inset 3px 0 0 #B48434;
}

/* ── Panel Footer ── */
.addin-demo .demo-panel-ft {
    padding: 6px 10px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    color: #4a5568;
    min-height: 40px;
}
.addin-demo .demo-ft-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.addin-demo .demo-ft-logo {
    width: 28px;
    height: 28px;
    background: white;
    border: 2px solid #B48434;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.addin-demo .demo-ft-logo svg { width: 16px; height: 16px; fill: #B48434; }
.addin-demo .demo-ft-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.addin-demo .demo-ft-name {
    font-size: 10px;
    font-weight: 600;
    color: #1a1a1a;
    font-family: 'Poppins', sans-serif;
}
.addin-demo .demo-ft-timer {
    font-size: 8.5px;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 3px;
}
.addin-demo .demo-ft-arrow {
    width: 12px;
    height: 12px;
    color: #999;
}
.addin-demo .demo-ft-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.addin-demo .demo-ft-right svg {
    width: 20px;
    height: 20px;
    color: #718096;
    cursor: default;
}
.addin-demo .demo-ft-right svg:first-child { color: #B48434; }

/* ── Word Status Bar ── */
.addin-demo .demo-statusbar {
    background: #f0f0f0;
    border-top: 1px solid #d4d4d4;
    padding: 3px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    color: #666;
    font-family: 'Inter', sans-serif;
    user-select: none;
}
.addin-demo .demo-statusbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.addin-demo .demo-statusbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.addin-demo .demo-statusbar-views {
    display: flex;
    align-items: center;
    gap: 4px;
}
.addin-demo .demo-statusbar-views svg {
    width: 13px;
    height: 13px;
    color: #888;
}
.addin-demo .demo-statusbar-zoom {
    display: flex;
    align-items: center;
    gap: 6px;
}
.addin-demo .demo-zoom-track {
    width: 60px;
    height: 3px;
    background: #ccc;
    position: relative;
}
.addin-demo .demo-zoom-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%;
    background: #888;
}

/* ── Stagger animation ── */
.addin-demo .demo-stagger > * { opacity: 0; transform: translateY(8px); }
.addin-demo .demo-stagger > .demo-animate { animation: demoSlideUp 0.3s ease forwards; }
.addin-demo .demo-stagger > .demo-animate:nth-child(1) { animation-delay: 0.03s; }
.addin-demo .demo-stagger > .demo-animate:nth-child(2) { animation-delay: 0.08s; }
.addin-demo .demo-stagger > .demo-animate:nth-child(3) { animation-delay: 0.13s; }
.addin-demo .demo-stagger > .demo-animate:nth-child(4) { animation-delay: 0.18s; }
.addin-demo .demo-stagger > .demo-animate:nth-child(5) { animation-delay: 0.23s; }
.addin-demo .demo-stagger > .demo-animate:nth-child(6) { animation-delay: 0.28s; }
.addin-demo .demo-stagger > .demo-animate:nth-child(7) { animation-delay: 0.33s; }
@keyframes demoSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .addin-demo .demo-ribbon-tabs { display: none; }
    .addin-demo .demo-ribbon-icons { display: none; }
    .addin-demo .demo-ruler { display: none; }
    .addin-demo .demo-statusbar { display: none; }
    .addin-demo .demo-content { min-height: 520px; max-height: 520px; }
    .addin-demo .demo-doc-area { display: none; }
    .addin-demo .demo-panel { width: 100%; min-width: 100%; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .addin-demo .demo-ribbon-tabs { font-size: 9.5px; gap: 0; }
    .addin-demo .demo-ribbon-tab { padding: 4px 6px 5px; }
    .addin-demo .demo-doc { padding: 24px 28px; }
    .addin-demo .demo-panel { width: 280px; min-width: 280px; }
    .addin-demo .demo-ribbon-btn { min-width: 38px; padding: 3px 4px 2px; }
    .addin-demo .demo-ribbon-btn svg { width: 18px; height: 18px; }
    .addin-demo .demo-ribbon-btn span { font-size: 7.5px; }
}