*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body { font-family: var(--font); background: var(--bg); color: var(--text); display: flex; flex-direction: column; overflow-y: auto; }

  /* ── Main layout ── */
  .di-main { flex: 1; padding: 24px 28px; max-width: 1200px; width: 100%; margin: 0 auto; }

  /* ── Global button variants (di-btn, di-btn-primary, di-btn-ghost) ── */
  .di-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 14px; border-radius: 7px; font-family: var(--font); font-size: 13px;
    font-weight: 500; cursor: pointer; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text);
    transition: filter 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
  }
  .di-btn:hover:not(:disabled) { filter: brightness(1.06); }
  .di-btn:active:not(:disabled) { filter: brightness(0.94); }
  .di-btn:disabled { opacity: 0.55; cursor: wait; }
  .di-btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
    font-weight: 600;
  }
  .di-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
  .di-btn-ghost {
    background: transparent; border-color: var(--border); color: var(--text);
  }
  .di-btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); filter: none; }

  /* ── Search bar ── */
  .di-search-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; position: relative; }

  /* När sökrutan placeras i topbaren (till höger om "Skalmans kunskap") –
     kompakt utförande, ingen bottenmarginal, popups öppnas högerjusterat
     så de inte rinner ut i högerkanten. */
  .admin-topnav-links .di-search-wrap.di-search-wrap--topbar {
    margin: 0 0 0 16px;
    gap: 8px;
  }
  .admin-topnav-links .di-search-wrap--topbar .di-search-input {
    width: 220px; max-width: 220px;
    padding: 7px 12px; font-size: 13px;
  }
  .admin-topnav-links .di-search-wrap--topbar .di-autocomplete {
    top: 38px; left: auto; right: 0; width: 360px;
  }
  .di-search-input {
    flex: 1; max-width: 480px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 14px; padding: 9px 14px; border-radius: 8px;
    outline: none; transition: border-color .15s;
  }
  .di-search-input:focus { border-color: var(--accent); }
  .di-search-input::placeholder { color: var(--muted); }
  .di-search-btn {
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    font-family: var(--font); font-size: 13px; font-weight: 600;
    padding: 9px 18px; cursor: pointer; transition: opacity .15s; white-space: nowrap;
  }
  .di-search-btn:hover { opacity: .85; }
  .di-search-btn:disabled { opacity: .4; cursor: default; }
  .di-autocomplete {
    position: absolute; top: 42px; left: 0; z-index: 100;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    width: 480px; overflow: hidden; box-shadow: 0 8px 24px rgba(180,140,100,.14); display: none;
  }
  .di-autocomplete-item {
    padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; transition: background .1s;
  }
  .di-autocomplete-item:hover, .di-autocomplete-item.selected { background: var(--surface2); }
  .di-autocomplete-meta { font-size: 11px; color: var(--muted); }
  .di-autocomplete-empty { padding: 10px 14px; font-size: 13px; color: var(--muted); }

  /* ── Empty/loading state ── */
  .di-empty { text-align: center; padding: 80px 20px; color: var(--muted); font-size: 15px; }
  .di-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin-right: 8px; vertical-align: middle; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── My-deals (Dina deals) lista ── */
  .di-my-deals-wrap { margin-top: 4px; }
  .di-my-deals-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
  .di-my-deals-title { font-size: 20px; font-weight: 700; color: var(--text); }
  .di-my-deals-title span { color: var(--accent); }
  .di-my-deals-count { color: var(--muted); font-weight: 500; font-size: 16px; margin-left: 2px; }

  /* Manager scope-toggle ("Dina deals" / "Ditt teams deals") */
  .di-scope-toggle { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
  .di-scope-btn {
    border: none; background: transparent; color: var(--muted);
    padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 999px;
    cursor: pointer; transition: background .12s, color .12s;
  }
  .di-scope-btn:hover { color: var(--text); }
  .di-scope-btn.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

  /* Seller-dropdown i team-läge */
  .di-seller-row { margin: 0 0 10px; }
  .di-seller-select {
    font: inherit; font-size: 13px;
    padding: 6px 28px 6px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); cursor: pointer; min-width: 220px;
  }
  .di-seller-select:focus { outline: none; border-color: var(--accent); }
  .di-my-deals-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
  .di-my-deals-meta .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; margin-right: 8px; }
  .di-my-deals-meta .pill.flyt   { background: rgba(127,166,143,.14); color: var(--green); }
  .di-my-deals-meta .pill.koll   { background: rgba(224,175,107,.18); color: #b07a2e; }
  .di-my-deals-meta .pill.action { background: rgba(217,127,141,.18); color: var(--red); }
  .di-my-deals-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

  .di-group { margin-bottom: 24px; }
  .di-group:last-child { margin-bottom: 8px; }
  .di-group-header { display: flex; align-items: center; gap: 10px; padding: 6px 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .di-group-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .2px; }
  .di-group-count { font-size: 12px; color: var(--muted); font-weight: 500; }
  .di-group-hint  { font-size: 12px; color: var(--muted); margin-left: auto; font-style: italic; }
  .di-group-dot   { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .di-group-explainer { font-size: 12px; color: var(--muted); line-height: 1.5; padding: 4px 4px 12px; max-width: 760px; }
  .di-group.flyt   .di-group-dot   { background: var(--green); }
  .di-group.koll   .di-group-dot   { background: #e0a96b; }
  .di-group.action .di-group-dot   { background: var(--red); }

  .di-help-mark {
    position: relative;
    display: inline-block; width: 14px; height: 14px; line-height: 14px;
    border-radius: 50%; background: var(--surface2); color: var(--muted);
    text-align: center; font-size: 10px; font-weight: 700; cursor: help;
    border: 1px solid var(--border); vertical-align: 1px;
  }
  .di-help-popover {
    display: none;
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    width: 440px; max-width: 80vw;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    padding: 14px 16px;
    font-size: 12px; font-weight: 400; line-height: 1.55;
    text-transform: none; letter-spacing: 0;
    text-align: left;
    z-index: 100;
    cursor: default;
    white-space: normal;
  }
  .di-help-mark:hover .di-help-popover,
  .di-help-mark:focus .di-help-popover { display: block; }
  .di-help-formula { font-size: 13px; margin-bottom: 10px; color: var(--text); }
  .di-help-section { margin-top: 10px; color: var(--text); }
  .di-help-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
  .di-help-table td { padding: 2px 8px 2px 0; vertical-align: top; }
  .di-help-table td:first-child {
    font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--accent); width: 36px; text-align: right;
  }

  .di-deal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .di-deal-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 10px 12px 8px; }
  .di-deal-table th.sortable { cursor: pointer; user-select: none; }
  .di-deal-table th.sortable:hover { color: var(--text); }
  .di-deal-table th .sort-arrow { display: inline-block; margin-left: 4px; opacity: .35; font-size: 10px; }
  .di-deal-table th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
  .di-deal-table td { padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .di-deal-table tbody tr { cursor: pointer; transition: background .12s; position: relative; }
  .di-deal-table tbody tr:hover td { background: var(--surface2); }
  .di-deal-table tbody tr:last-child td { border-bottom: none; }
  .di-deal-row-name { font-weight: 600; color: var(--text); }
  .di-deal-row-link { color: inherit; text-decoration: none; }
  .di-deal-row-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
  .di-deal-row-stage { font-size: 12px; color: var(--muted); }
  .di-deal-row-amount { font-size: 13px; font-weight: 600; color: var(--text); }
  .di-deal-row-health { font-size: 12px; font-weight: 600; }
  .di-deal-row-health.green  { color: var(--green); }
  .di-deal-row-health.yellow { color: #b07a2e; }
  .di-deal-row-health.red    { color: var(--red); }

  .di-flag-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  .di-flag-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
  .di-flag-badge.flyt   { background: rgba(127,166,143,.14); color: var(--green); }
  .di-flag-badge.koll   { background: rgba(224,175,107,.18); color: #b07a2e; }
  .di-flag-badge.action { background: rgba(217,127,141,.18); color: var(--red); }
  .di-flag-reason { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.45; max-width: 480px; }

  .di-attention-dots { display: inline-flex; gap: 3px; align-items: center; cursor: default; }
  .di-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); display: inline-block; }
  .di-dot.on.lvl-1 { background: var(--green);   border-color: var(--green); }
  .di-dot.on.lvl-2 { background: #9fb88a;        border-color: #9fb88a; }
  .di-dot.on.lvl-3 { background: #e0a96b;        border-color: #e0a96b; }
  .di-dot.on.lvl-4 { background: #c87a3a;        border-color: #c87a3a; }
  .di-dot.on.lvl-5 { background: var(--red);     border-color: var(--red); }

  .di-my-deals-empty-group { font-size: 12px; color: var(--muted); padding: 14px 4px 4px; font-style: italic; }

  /* ── Heta listan – topp-sektion på "Dina deals" ────────────────────────── */
  .di-hot-wrap { margin: 0 0 28px; }
  .di-hot-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
  .di-hot-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .di-hot-title span { color: var(--accent); }
  .di-hot-sub { font-size: 13px; color: var(--muted); }
  .di-hot-team-link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
  .di-hot-team-link:hover { text-decoration: underline; }
  .di-hot-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: stretch; }
  @media (max-width: 1100px) { .di-hot-row { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px)  { .di-hot-row { grid-template-columns: repeat(2, 1fr); } }
  .di-hot-card {
    position: relative;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 14px 36px; min-height: 110px;
    display: flex; flex-direction: column; gap: 4px;
    cursor: pointer; transition: background .12s, border-color .12s;
    text-decoration: none;
  }
  .di-hot-card:hover { background: var(--surface2); border-color: var(--accent); }
  .di-hot-card.empty {
    background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(127,127,127,.04) 8px 16px), var(--surface);
    border-style: dashed; cursor: default; color: var(--muted);
    align-items: center; justify-content: center; text-align: center; font-size: 12px;
  }
  .di-hot-card.empty:hover { background: var(--surface); border-color: var(--border); }
  .di-hot-card-name { font-weight: 600; color: var(--text); font-size: 13px; line-height: 1.3; }
  .di-hot-card-stage { font-size: 11px; color: var(--muted); }
  .di-hot-card-amount { font-size: 13px; font-weight: 700; color: var(--text); margin-top: auto; }
  .di-hot-trash {
    position: absolute; right: 6px; bottom: 6px;
    width: 26px; height: 26px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: transparent;
    color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
    transition: background .12s, color .12s, border-color .12s;
  }
  .di-hot-trash:hover { background: rgba(217,127,141,.14); color: var(--red); border-color: rgba(217,127,141,.4); }
  .di-hot-overflow {
    background: transparent; border: 1px dashed var(--border); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-weight: 600; font-size: 13px;
  }

  /* ── "Lägg i heta listan"-knapp i Dina deals-tabellen ─────────────────── */
  .di-hot-add-btn {
    font-size: 11px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
    position: relative; z-index: 2;
  }
  .di-hot-add-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .di-hot-add-btn.is-hot {
    background: rgba(224,175,107,.18); border-color: rgba(224,175,107,.5); color: #b07a2e;
  }
  .di-hot-add-btn.is-hot:hover { background: rgba(217,127,141,.18); border-color: rgba(217,127,141,.5); color: var(--red); }


  /* ── Section card ── */
  .di-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 20px 24px; margin-bottom: 20px;
  }
  .di-card-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); margin-bottom: 16px;
  }

  /* ── Deal header ── */
  .di-deal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
  .di-deal-name { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .di-deal-meta { font-size: 13px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
  .di-deal-meta span { white-space: nowrap; }
  .di-deal-products { font: inherit; font-size: 13px; color: var(--muted); margin-top: 10px; }
  .di-deal-hs-link { font-size: 12px; color: var(--accent); text-decoration: none; }
  .di-outcome-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .di-meta-analyzed { font-size: 11px; color: var(--muted); text-align: right; cursor: default; white-space: nowrap; }
  .di-meta-aging  { color: #b88a30 !important; }
  .di-meta-stale  { color: #b04a3a !important; }
  .di-deal-hs-link:hover { text-decoration: underline; }
  .di-outcome-badge {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px;
  }
  .di-outcome-open   { background: transparent; color: var(--peach-deep, #e08a5b); border: 1px solid rgba(224,138,91,.55); }
  .di-outcome-won    { background: rgba(127,166,143,.15); color: var(--green); }
  .di-outcome-lost   { background: rgba(217,127,141,.15); color: var(--red); }
  .di-outcome-closed { background: rgba(168,151,137,.15); color: var(--muted,#a89789); }
  .di-card-muted { opacity: .7; }

  /* ── KPI row ── */
  .di-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .di-data-notice { background: rgba(168,151,137,.08); border: 1px solid rgba(168,151,137,.2); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--muted,#a89789); margin-bottom: 4px; line-height: 1.5; }
  .di-data-notice em { font-style: normal; color: var(--accent); }
  .di-kpi { background: var(--surface2); border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 4px 12px rgba(60,40,20,.05); }
  .di-kpi-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
  .di-kpi-value { font-size: 20px; font-weight: 700; }
  .di-health-green { border: 2px solid #7fa68f; }
  .di-health-green .di-kpi-value { color: #7fa68f; }
  .di-health-yellow { border: 2px solid #b88a30; }
  .di-health-yellow .di-kpi-value { color: #b88a30; }
  .di-health-red { border: 2px solid #b04a3a; }
  .di-health-red .di-kpi-value { color: #b04a3a; }

  /* ── KPI warn / danger states (cycle days, stage days) ── */
  .di-kpi-warn { border: 2px solid #b88a30; }
  .di-kpi-warn .di-kpi-value { color: #b88a30; }
  .di-kpi-danger { border: 2px solid #b04a3a; }
  .di-kpi-danger .di-kpi-value { color: #b04a3a; }
  .di-kpi-good { border: 2px solid #7fa68f; }
  .di-kpi-good .di-kpi-value { color: #7fa68f; }

  /* ── KPI tooltips (legacy klassnamn – styling via shared/admin.css) ── */
  .di-kpi-tip-box .di-hs-pts { color: var(--text); font-size: 11px; font-weight: 600; }
  .di-kpi-label { display: flex; align-items: center; }

  /* ── Signal badges ── */
  .di-signals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
  .di-signal {
    background: var(--surface2); border-radius: 8px; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 5px;
    border-left: 3px solid var(--border);
    box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 4px 12px rgba(60,40,20,.05);
    transition: box-shadow .15s ease;
  }
  /* Inget `transform` på hover: det skulle skapa en ny containing block för
     `position:fixed` (tooltip-boxen ligger nästlad i kortet) och dessutom
     orsaka 1px-jitter vid hover-boundary mellan kort/knappar. */
  .di-signal:hover {
    box-shadow: 0 2px 4px rgba(60,40,20,.06), 0 8px 18px rgba(60,40,20,.07);
  }
  .di-signal.sig-pos  { border-left-color: var(--green); }
  .di-signal.sig-neg  { border-left-color: rgba(217,127,141,.7); }
  .di-signal.sig-warn { border-left-color: rgba(184,138,48,.55); }
  .di-signal-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text); }
  .di-signal-sub { font-size: 13px; font-weight: 600; line-height: 1.35; }
  .di-signal-sub.pos  { color: var(--green); }
  .di-signal-sub.neg  { color: rgba(217,127,141,.95); }
  .di-signal-sub.warn { color: rgba(160,118,52,.85); }
  .di-signal-sub.na   { color: var(--muted); font-style: italic; font-weight: 400; }
  .di-signal-detail { font-weight: 400; color: var(--muted); font-size: 11px; }
  /* Step indicator för enum-progression (behovssammanfattning, lösningsförslag, avtal m.fl.) */
  .di-signal-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
  .di-signal-step {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 11px;
    background: var(--surface3, rgba(180,140,100,.05));
    color: var(--text); border: 1px solid var(--border);
    line-height: 1.4; white-space: nowrap;
  }
  .di-signal-step.passed  { background: rgba(127,166,143,.18); color: rgba(127,166,143,.95); border-color: rgba(127,166,143,.4); }
  .di-signal-step.current { background: rgba(127,166,143,.32); color: var(--green);          border-color: rgba(127,166,143,.75); font-weight: 700; }
  .di-signal-step.future  { color: var(--text); opacity: .55; }
  .di-colb-warning {
    margin-top: 14px; padding: 12px 16px; border-radius: 10px;
    background: rgba(168,98,76,.08); border: 1px solid rgba(168,98,76,.22);
    color: rgba(140,75,55,.95); font-size: 13px; display: flex; gap: 8px; align-items: flex-start;
    box-shadow: 0 1px 2px rgba(60,40,20,.04);
  }
  .di-urgency-pill {
    display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
  }
  .di-urgency-low    { background: rgba(127,166,143,.15);  color: var(--green); }
  .di-urgency-medium { background: rgba(184,138,48,.15);  color: var(--yellow); }
  .di-urgency-high   { background: rgba(217,127,141,.15); color: var(--red); }

  /* ── Navigator ── */
  .di-navigator { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
  .di-nav-btn {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    font-size: 16px; width: 30px; height: 30px; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s;
  }
  .di-nav-btn:hover:not(:disabled) { border-color: var(--accent); }
  .di-nav-btn:disabled { opacity: .35; cursor: default; }
  .di-nav-select {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 13px; padding: 5px 8px; border-radius: 6px;
    cursor: pointer; outline: none;
  }
  .di-nav-select:focus { border-color: var(--accent); }
  .di-nav-count { font-size: 12px; color: var(--muted); }

  /* ── MEDDPICC dimensions ── */
  .di-meddpicc-grid { display: flex; flex-direction: column; gap: 4px; }
  .di-meddpicc-dim { display: grid; grid-template-columns: 120px 1fr auto; align-items: start; gap: 16px; padding: 18px 4px; border-bottom: 1px dashed rgba(168,151,137,.28); }
  .di-meddpicc-dim:last-child { border-bottom: none; }
  .di-meddpicc-score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .di-meddpicc-score-row { display: flex; flex-direction: row; align-items: center; gap: 10px; justify-content: flex-end; }
  .di-meddpicc-label { font-size: 14px; font-weight: 600; color: var(--text); padding-top: 1px; letter-spacing: .1px; }
  .di-meddpicc-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
  .di-meddpicc-bar-track { height: 14px; background: rgba(168,151,137,.14); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(120,90,60,.08); }
  .di-meddpicc-bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease-out; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.06); opacity: .82; }
  .di-meddpicc-comment { font-size: 12px; color: var(--muted); line-height: 1.45; }
  .di-meddpicc-facts { margin-top: 6px; }
  .di-meddpicc-facts-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; margin-bottom: 4px; }
  .di-meddpicc-facts-empty { font-size: 12px; color: var(--muted); font-style: italic; opacity: .75; }
  .di-meddpicc-facts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .di-meddpicc-fact { padding: 8px 10px; background: var(--surface2); border-radius: 8px; border: 1px solid var(--border); }
  .di-meddpicc-fact-claim { font-size: 13px; color: var(--text); line-height: 1.4; }
  .di-meddpicc-fact-quote { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 4px; line-height: 1.4; }
  .di-meddpicc-fact-meta { font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .di-meddpicc-fact-source { font-weight: 600; }
  .di-meddpicc-fact-dismiss { margin-left: auto; font-size: 11px; padding: 3px 8px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
  .di-meddpicc-fact-dismiss:hover { color: var(--red); border-color: var(--red); }
  .di-meddpicc-fact-dismiss:disabled { opacity: .5; cursor: wait; }
  /* ── Produktresonemang ── */
  .di-meddpicc-reasoning { margin-top: 16px; padding: 12px 14px; background: var(--surface2, #fbeede); border-radius: 8px; border: 1px solid var(--border); }
  .di-meddpicc-reasoning-product { margin-bottom: 14px; }
  .di-meddpicc-reasoning-product:last-child { margin-bottom: 0; }
  .di-meddpicc-reasoning-header { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
  .di-meddpicc-reasoning-pattern { margin-bottom: 12px; }
  .di-meddpicc-reasoning-pattern:last-child { margin-bottom: 0; }
  .di-meddpicc-reasoning-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .di-meddpicc-reasoning-desc { font-size: 13px; color: var(--text); line-height: 1.5; }
  .di-meddpicc-reasoning-examples { margin-top: 6px; }
  .di-meddpicc-reasoning-example { font-size: 12px; color: var(--muted); padding: 2px 0; }
  .di-meddpicc-reasoning-deal-link { color: var(--accent); text-decoration: none; }
  .di-meddpicc-reasoning-deal-link:hover { text-decoration: underline; }
  .di-meddpicc-reasoning-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 4px 0; }
  /* ── End produktresonemang ── */
  .di-meddpicc-score { font-size: 16px; font-weight: 700; text-align: right; padding-top: 2px; }
  .di-meddpicc-overall { margin-top: 16px; padding: 12px 14px; background: var(--surface2); border-radius: 10px; font-size: 13px; color: var(--muted); line-height: 1.55; box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 4px 12px rgba(60,40,20,.05); }
  .di-meddpicc-trend { display: flex; gap: 6px; align-items: center; }
  .di-trend-up   { color: var(--green); }
  .di-trend-down { color: var(--red); }
  .di-trend-flat { color: var(--muted); }
  /* ── MEDDPICC trend chart toggle ── */
  .di-chart-toggle { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 14px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; width: 100%; text-align: left; transition: border-color .15s, color .15s; letter-spacing: .3px; }
  .di-chart-toggle:hover { border-color: var(--accent); color: var(--text); }
  .di-chart-toggle-icon { font-size: 10px; transition: transform .2s; }
  .di-chart-toggle.open .di-chart-toggle-icon { transform: rotate(180deg); }
  .di-chart-wrap { margin-top: 12px; height: 240px; position: relative; overflow: hidden; display: none; }
  .di-chart-wrap.visible { display: block; }

  /* ── Analysis history ── */
  .di-analysis-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
  .di-analysis-meta span { font-size: 12px; color: var(--muted); }
  .di-analysis-meta strong { color: var(--text); }
  .di-analysis-actions { display: flex; gap: 8px; margin-bottom: 14px; }
  .di-delete-btn {
    font-size: 11px; color: var(--red); background: rgba(176,74,58,.07);
    border: 1px solid rgba(176,74,58,.25); border-radius: 5px;
    cursor: pointer; padding: 3px 9px; font-family: var(--font);
    opacity: .8; transition: opacity .15s, background .15s; white-space: nowrap;
  }
  .di-delete-btn:hover { opacity: 1; background: rgba(176,74,58,.14); }
  .di-delete-btn:disabled { opacity: .35; cursor: default; }
  .di-delete-btn--secondary {
    color: var(--muted); background: rgba(168,151,137,.07);
    border-color: rgba(168,151,137,.25);
  }
  .di-delete-btn--secondary:hover { background: rgba(168,151,137,.14); }
  .di-delete-btn--inline {
    padding: 1px 7px; font-size: 13px; line-height: 1;
  }
  .di-analysis-html-wrap {
    border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  }
  .di-analysis-html-wrap summary {
    padding: 10px 14px; cursor: pointer; font-size: 13px; color: var(--accent);
    background: var(--surface2); user-select: none;
  }
  .di-analysis-html-wrap summary:hover { opacity: .85; }
  .di-analysis-html-body {
    padding: 16px; font-size: 13px; line-height: 1.6; color: var(--text);
    max-height: 60vh; overflow-y: auto;
  }
  /* Style HubSpot-generated analysis HTML */
  .di-analysis-html-body h1, .di-analysis-html-body h2, .di-analysis-html-body h3 { color: var(--text); margin: 12px 0 6px; font-size: 14px; }
  .di-analysis-html-body ul, .di-analysis-html-body ol { padding-left: 20px; margin: 6px 0; }
  .di-analysis-html-body li { margin-bottom: 4px; }
  .di-analysis-html-body p { margin-bottom: 8px; }
  .di-analysis-html-body strong { color: var(--text); }

  /* ── Watcher events ── */
  .di-events-list { display: flex; flex-direction: column; gap: 10px; }
  .di-event-group-date { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 8px 0 4px; }
  .di-event { background: var(--surface2); border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 4px 12px rgba(60,40,20,.05); transition: transform .15s ease, box-shadow .15s ease; }
  .di-event:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(60,40,20,.06), 0 8px 18px rgba(60,40,20,.07); }
  .di-event-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .di-event-sentiment { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; }
  .di-event-sentiment.pos { background: rgba(127,166,143,.15);  color: var(--green); }
  .di-event-sentiment.neg { background: rgba(217,127,141,.15); color: var(--red); }
  .di-event-sentiment.neu { background: rgba(168,151,137,.15); color: var(--muted); }
  .di-event-date  { font-size: 12px; color: var(--muted); }
  .di-event-title { font-size: 13px; font-weight: 600; }
  .di-event-body  { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
  .di-no-events { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

  /* ── Recommendations ── */
  /* ── Rekommendationskort ── */
  .di-rec-list { display: flex; flex-direction: column; gap: 12px; }
  .di-rec-card { background: var(--surface2, rgba(180,140,100,.05)); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 4px 12px rgba(60,40,20,.05); transition: transform .15s ease, box-shadow .15s ease; }
  .di-rec-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(60,40,20,.06), 0 8px 18px rgba(60,40,20,.07); }
  .di-rec-card-muted { opacity: 0.55; }
  .di-rec-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .di-rec-card-prio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); }
  .di-rec-card-action { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
  .di-rec-card-meta { margin-top: 10px; margin-bottom: 2px; }
  .di-rec-status { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
  .di-rec-pending   { background: rgba(184,138,48,.15);  color: var(--yellow); }
  .di-rec-followed  { background: rgba(127,166,143,.15);  color: var(--green); }
  .di-rec-not-done  { background: rgba(217,127,141,.15); color: var(--red); }
  .di-rec-snoozed   { background: rgba(168,151,137,.15); color: var(--muted); }
  .di-rec-dismissed { background: rgba(168,151,137,.10); color: var(--muted); font-style: italic; }
  .di-rec-coaching-btn {
    display: block; width: 100%; margin-top: 12px;
    padding: 10px 14px; text-align: left;
    background: rgba(224,138,91,.08); border: 1px solid rgba(224,138,91,.3);
    color: var(--accent); border-radius: 6px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .di-rec-coaching-btn:hover { background: rgba(224,138,91,.16); border-color: var(--accent); }
  .di-snooze-days { display: flex; gap: 16px; margin-bottom: 8px; font-size: 13px; }
  .di-snooze-days label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
  .di-note-save-danger { background: rgba(217,127,141,.15); color: var(--red); border: 1px solid rgba(217,127,141,.4); border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
  .di-note-save-danger:hover { background: rgba(217,127,141,.25); }
  .di-note-cancel-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
  .di-note-cancel-btn:hover { background: var(--surface2); }
  .di-rec-rationale { color: var(--text); opacity: .85; font-size: 13px; line-height: 1.55; margin-top: 4px; }
  .di-rec-linked-notes { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
  .di-rec-linked-note { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 5px 8px; background: rgba(224,138,91,.08); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; }
  .di-rec-linked-note-text { flex: 1; color: var(--text); }
  .di-rec-linked-note-meta { color: var(--muted); white-space: nowrap; font-size: 11px; }
  .di-rec-linked-note-delete { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0.6; }
  .di-rec-linked-note-delete:hover { opacity: 1; color: var(--red); }

  /* ── Evaluating-banner – visas medan Skalman omvärderar efter en kommentar ── */
  @keyframes di-recs-evaluating-pulse {
    0%, 100% { opacity: .7; } 50% { opacity: 1; }
  }
  .di-recs-evaluating-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-bottom: 14px;
    background: rgba(224,138,91,.1); border: 1px solid rgba(224,138,91,.25);
    border-radius: 7px; font-size: 13px; color: var(--accent);
    animation: di-recs-evaluating-pulse 2s ease-in-out infinite;
  }
  .di-recs-evaluating-spinner {
    display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: spin .8s linear infinite;
  }

  /* ── Run log ── */
  .di-run-list { display: flex; flex-direction: column; gap: 6px; }
  .di-run-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface2); border-radius: 6px; font-size: 12px; }
  .di-run-date { color: var(--muted); min-width: 130px; }
  .di-run-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
  .di-run-ok  { background: rgba(127,166,143,.15); color: var(--green); }
  .di-run-dry { background: rgba(224,138,91,.15);  color: var(--accent); }
  .di-run-skip { background: rgba(168,151,137,.15); color: var(--muted); }
  .di-run-skip-reason { color: var(--muted); font-style: italic; }

  /* ── Inline update buttons per section ── */
  .di-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .di-card-header .di-card-title { margin-bottom: 0; }
  .di-history-updated { font-size: 11px; color: var(--muted, #a89789); font-weight: 400; margin-left: 8px; }
  .di-update-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 12px; }

  /* Recommendation feedback buttons */
  .di-rec-feedback { display: flex; align-items: center; gap: 6px; }
  .di-rec-row-feedback { margin-top: 14px; }
  .di-feedback-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
  .di-rec-inline-comment { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
  .di-rec-inline-comment-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; line-height: 1.4; }
  .di-rec-actions-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
  .di-rec-actions-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .di-rec-actions-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
  .di-rec-send-btn:disabled { opacity: .5; background: var(--surface2, rgba(180,140,100,.05)); color: var(--muted); cursor: not-allowed; }
  /* Legacy classes kept for any other call-sites */
  .di-feedback-header { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
  .di-feedback-actions { display: flex; align-items: flex-start; gap: 0; }
  .di-feedback-left { display: flex; flex-direction: column; flex: 1; }
  .di-feedback-btns { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .di-feedback-col { display: flex; flex-direction: column; gap: 4px; }
  .di-feedback-col-label { font-size: 10px; color: var(--muted); line-height: 1.3; max-width: 160px; }
  .btn-feedback-act { background: rgba(180,140,100,.05); border: 1.5px solid rgba(168,151,137,.45); color: var(--text); font-size: 12px; padding: 7px 16px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
  .btn-feedback-act:hover { border-color: var(--accent); background: rgba(224,138,91,.1); color: var(--accent); }
  .btn-feedback-act:disabled { opacity: .5; cursor: default; }
  .di-feedback-cta-col { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--border); padding-left: 20px; margin-left: 20px; flex-shrink: 0; }
  .di-feedback-cta-header { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
  .btn-feedback-cta { background: var(--accent); color: #fff; border: none; font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: opacity .15s, transform .1s, background .15s, color .15s, border-color .15s; }
  .btn-feedback-cta:hover { opacity: .87; transform: translateY(-1px); }
  .btn-feedback-cta--ghost { background: transparent; color: var(--accent); border: 1.5px solid rgba(224,138,91,.45); font-weight: 600; }
  .btn-feedback-cta--ghost:hover { background: rgba(224,138,91,.1); border-color: var(--accent); opacity: 1; transform: translateY(-1px); }
  .btn-feedback-good    { background: none; border: 1px solid rgba(127,166,143,.4);  color: var(--green);          font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .btn-feedback-good:hover    { background: rgba(127,166,143,.08); }
  .btn-feedback-good:disabled { opacity: .5; cursor: default; }
  .btn-feedback-snooze  { background: none; border: 1px solid rgba(168,151,137,.4); color: var(--muted);          font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .btn-feedback-snooze:hover  { background: rgba(168,151,137,.08); }
  .btn-feedback-snooze:disabled { opacity: .5; cursor: default; }
  .btn-feedback-comment { background: none; border: 1px solid rgba(168,151,137,.4); color: var(--muted);          font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .btn-feedback-comment:hover { background: rgba(168,151,137,.08); }
  .btn-feedback-comment:disabled { opacity: .5; cursor: default; }
  .btn-feedback-dismiss { background: none; border: 1px solid rgba(217,127,141,.35); color: var(--red, #d97f8d); font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
  .btn-feedback-dismiss:hover { background: rgba(217,127,141,.08); }
  .btn-feedback-dismiss:disabled { opacity: .5; cursor: default; }
  .di-update-link {
    font-size: 11px; color: var(--accent); background: none; border: none;
    cursor: pointer; padding: 0; font-family: var(--font); opacity: .8;
    transition: opacity .15s; white-space: nowrap;
  }
  .di-update-link:hover { opacity: 1; text-decoration: underline; }
  .di-update-link:disabled { opacity: .35; cursor: default; text-decoration: none; }
  /* Diskret "Fråga Insights"-deeplink (ikon-länk till /insights?q=...) */
  .di-ask-insights {
    display: inline-block;
    margin-left: 6px;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    opacity: .45;
    transition: opacity .15s, transform .15s;
    cursor: pointer;
    vertical-align: middle;
    filter: grayscale(.2);
  }
  .di-ask-insights:hover { opacity: 1; transform: scale(1.15); filter: none; text-decoration: none; }
  .di-ask-insights:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  .di-note-opt { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); cursor: pointer; white-space: nowrap; }
  .di-note-opt input[type=checkbox] { width: 12px; height: 12px; accent-color: var(--accent); cursor: pointer; }
  .di-update-status {
    font-size: 12px; line-height: 1.5; white-space: pre-wrap; display: none;
    padding: 8px 12px; border-radius: 6px; margin-bottom: 12px;
  }
  .di-update-status.visible { display: block; }
  .di-update-status.ok   { background: rgba(127,166,143,.08); border: 1px solid rgba(127,166,143,.25); color: var(--green); }
  .di-update-status.err  { background: rgba(176,74,58,.08);  border: 1px solid rgba(176,74,58,.25);  color: var(--red); }
  .di-update-status.info { background: rgba(224,138,91,.08); border: 1px solid rgba(224,138,91,.25); color: var(--accent); }
  .di-update-status.warn { background: rgba(184,132,32,.10); border: 1px solid rgba(184,132,32,.30); color: var(--gold-deep, #b88a30); }

  /* ── Win / Lost Reason ── */
  .di-win-reason-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  }
  .di-reason-field {
    background: var(--surface2); border-radius: 8px; padding: 12px 14px;
  }
  .di-reason-field-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
    color: var(--muted); margin-bottom: 6px;
  }
  .di-reason-field-value { font-size: 13px; line-height: 1.5; color: var(--text); }
  .di-reason-field-value.na { color: var(--muted); font-style: italic; }

  /* Price factor badges */
  .di-pf-badge {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .4px;
  }
  .di-pf-won    { background: rgba(127,166,143,.15);  color: var(--green); }
  .di-pf-neutral { background: rgba(168,151,137,.15); color: var(--muted); }
  .di-pf-friction { background: rgba(217,127,141,.15); color: var(--red); }

  /* Loss banner – shown at very top of a lost deal */
  .di-loss-banner {
    background: rgba(217,127,141,.08);
    border: 1.5px solid rgba(217,127,141,.35);
    border-radius: 10px; padding: 18px 22px; margin-bottom: 20px;
  }
  .di-loss-banner-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  }
  .di-loss-category-badge {
    font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 20px;
    background: rgba(217,127,141,.2); color: var(--red); white-space: nowrap;
  }
  .di-loss-banner-title { font-size: 17px; font-weight: 700; color: var(--text); }
  .di-loss-key-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
    margin-bottom: 12px;
  }
  .di-colb-alert {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
    background: rgba(217,127,141,.12); border: 1px solid rgba(217,127,141,.3);
    border-radius: 8px; font-size: 13px; color: var(--red); margin-bottom: 10px;
  }
  .di-lessons-box {
    background: rgba(224,138,91,.06); border: 1px solid rgba(224,138,91,.2);
    border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--text);
    line-height: 1.6;
  }
  .di-lessons-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
    color: var(--accent); margin-bottom: 6px;
  }
  .di-no-reason-notice {
    padding: 20px 24px; text-align: center; font-size: 13px; color: var(--muted);
    border: 1px dashed var(--border); border-radius: 8px;
  }

  /* ── Section wrappers – partial refresh animations ── */
  .di-section { position: relative; }
  .di-section--loading { opacity: 0.4; pointer-events: none; transition: opacity .15s; }

  /* Combined fade-in + green success-flash for refreshed sections */
  @keyframes di-section-refresh {
    0%   { opacity: 0; transform: translateY(5px); box-shadow: 0 0 0 2px rgba(127,166,143,.7); }
    35%  { opacity: 1; transform: translateY(0);   box-shadow: 0 0 0 2px rgba(127,166,143,.7); }
    100% { opacity: 1; transform: translateY(0);   box-shadow: 0 0 0 2px rgba(127,166,143,0);  }
  }
  .di-section--refreshed > .di-card {
    animation: di-section-refresh 1s ease forwards;
  }

  /* Highlight a specific recommendation row when arriving via ?highlightRec=<id> */
  @keyframes di-rec-highlight {
    0%   { box-shadow: 0 0 0 3px rgba(229,154,89,.75); background: rgba(229,154,89,.12); }
    70%  { box-shadow: 0 0 0 3px rgba(229,154,89,.55); background: rgba(229,154,89,.08); }
    100% { box-shadow: 0 0 0 3px rgba(229,154,89,0);   background: var(--surface2, rgba(180,140,100,.05)); }
  }
  .di-rec-card--highlight {
    animation: di-rec-highlight 3.5s ease forwards;
  }

  /* Small inline spinner used inside status messages while an agent is running */
  .di-status-spinner {
    display: inline-block; width: 10px; height: 10px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: spin .7s linear infinite;
    vertical-align: middle; margin-right: 5px; opacity: .8;
  }

  /* ── Toast ── */
  /* Positioneras uppe till höger så toasten inte göms bakom Fråga Skalman-chattbubblan (nere till höger). */
  .toast {
    position: fixed; top: 24px; right: 24px; padding: 12px 18px; border-radius: 8px;
    font-size: 13px; z-index: 9999; box-shadow: 0 4px 12px rgba(180,140,100,.18); max-width: 340px;
    animation: slideIn .2s ease;
  }
  @keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .toast.success { background: rgba(127,166,143,.12); border: 1px solid rgba(127,166,143,.45); color: var(--green); }
  .toast.error   { background: rgba(176,74,58,.10);  border: 1px solid rgba(176,74,58,.40);  color: var(--red); }
  .toast.info    { background: rgba(224,138,91,.12); border: 1px solid rgba(224,138,91,.45); color: var(--accent); }
  /* ── Recent deals panel ── */
  .di-recent-btn {
    background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
    font-family: var(--font); font-size: 12px; font-weight: 600;
    padding: 9px 14px; border-radius: 8px; cursor: pointer;
    transition: border-color .15s, color .15s; white-space: nowrap;
  }
  .di-recent-btn:hover { border-color: var(--accent); color: var(--text); }
  .di-recent-btn.active { border-color: var(--accent); color: var(--accent); }
  .di-recent-panel {
    position: absolute; top: 50px; left: 0; z-index: 100;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    width: 600px; max-height: 480px; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(180,140,100,.14); display: none;
  }
  .di-recent-panel.visible { display: block; }
  .di-recent-header {
    padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: var(--muted); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
  }
  .di-recent-item {
    padding: 10px 14px; cursor: pointer; display: grid;
    grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    font-size: 13px; transition: background .1s; border-bottom: 1px solid rgba(180,140,100,.05);
  }
  .di-recent-item:last-child { border-bottom: none; }
  .di-recent-item:hover { background: var(--surface2); }
  .di-recent-item-name { font-weight: 500; color: var(--text); }
  .di-recent-item-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .di-recent-item-date { font-size: 11px; color: var(--muted); white-space: nowrap; }
  .di-recent-empty { padding: 20px 14px; font-size: 13px; color: var(--muted); text-align: center; }

  /* ── Win/Loss-indikatorer ── */
  .di-winloss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
  @media (max-width: 640px) { .di-winloss-grid { grid-template-columns: 1fr; } }
  .di-winloss-col { background: var(--surface2); border-radius: 10px; padding: 14px 16px; border-left: 3px solid var(--border); box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 4px 12px rgba(60,40,20,.05); }
  .di-winloss-col-green { border-left-color: var(--green, #7fa68f); }
  .di-winloss-col-red   { border-left-color: #b88a30; }
  .di-winloss-col-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
    margin-bottom: 10px;
  }
  .di-winloss-col-green .di-winloss-col-title { color: var(--green, #7fa68f); }
  .di-winloss-col-red   .di-winloss-col-title { color: #b88a30; }
  .di-winloss-item {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 13px; padding: 3px 0; color: var(--text);
  }
  .di-winloss-item-icon { flex-shrink: 0; font-style: normal; }
  .di-winloss-item-text { line-height: 1.4; }
  .di-winloss-item-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
  .di-winloss-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 3px 0; }

  /* Situation summary – lägesbild under KPI-raden */
  .di-situation-block {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(224,138,91,.07); border: 1px solid rgba(224,138,91,.22);
    border-radius: 8px; padding: 11px 14px; margin-top: 14px; margin-bottom: 4px;
  }
  .di-situation-block--empty {
    background: rgba(168,151,137,.05); border-color: rgba(168,151,137,.15);
  }
  .di-situation-badge {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; box-sizing: border-box;
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
    background: var(--peach-deep, #e08a5b); color: #fff;
    border-radius: 50%; margin-top: 0;
    box-shadow: 0 1px 2px rgba(176,108,68,.25);
  }
  .di-situation-text {
    flex: 1; font-size: 13px; line-height: 1.55; color: var(--text);
  }
  .di-situation-empty-text {
    flex: 1; font-size: 13px; line-height: 1.55; color: var(--muted); font-style: italic;
  }
  .di-situation-actions { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
  .di-situation-refresh-btn {
    font-size: 11px; background: none; border: 1px solid var(--border, #334);
    color: var(--muted); border-radius: 4px; padding: 2px 8px; cursor: pointer;
  }
  .di-situation-refresh-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
  .di-situation-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .di-situation-meta { font-size: 11px; color: var(--muted); }

  /* Manager Brief – inline lägesbild på Deal Inspector */
  .di-situation-engagera {
    font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.45; margin-bottom: 6px;
  }
  .di-situation-bakgrund {
    font-size: 13px; color: var(--text); line-height: 1.55; margin-bottom: 6px; opacity: .92;
  }
  .di-situation-positivt {
    font-size: 13px; color: var(--green, #7fa68f); line-height: 1.45;
    border-top: 1px solid rgba(127,166,143,.12); padding-top: 6px; margin-bottom: 4px;
  }
  .di-situation-recs-label {
    font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em;
    text-transform: uppercase; margin-top: 10px; margin-bottom: 4px;
  }
  .di-situation-rec {
    font-size: 13px; color: var(--text); line-height: 1.5;
    padding: 2px 0 2px 16px; background: none;
    border-left: none; border-radius: 0; margin-bottom: 2px;
    position: relative;
  }
  .di-situation-rec::before {
    content: "›"; position: absolute; left: 2px; top: 0;
    color: var(--accent); font-weight: 700; font-size: 14px; line-height: 1.45;
  }
  .di-situation-rec-empty {
    font-size: 12px; color: var(--muted); font-style: italic;
  }
  .di-situation-rec-link {
    display: inline-block; font-size: 12px; color: var(--accent);
    text-decoration: none; margin-top: 4px;
  }
  .di-situation-rec-link:hover { text-decoration: underline; }

  /* Deal Pulse source badge */
  .di-winloss-source-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: middle;
    background: var(--accent); color: #fff;
  }
  .di-winloss-source-badge--rules {
    background: var(--muted); color: var(--bg, #1e1e1e);
  }
  /* Overall assessment */
  .di-winloss-overall {
    font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 10px; line-height: 1.5;
  }

  /* Seller notes list */
  .di-seller-notes { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
  .di-seller-notes-title { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
  .di-seller-note { background: rgba(180,140,100,.05); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
  .di-seller-note-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; color: var(--muted); }
  .di-seller-note-type { font-weight: 600; color: var(--accent); }
  .di-seller-note-date { margin-left: auto; }
  .di-note-form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .di-note-form-header .di-note-context-label { margin-bottom: 0; }
  .di-note-form-close { background: none; border: none; color: var(--text-muted, #8899aa); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
  .di-note-form-close:hover { color: var(--text, #cdd6e0); }
  .di-refresh-pulse-btn { margin-left: auto; font-size: 11px; background: none; border: 1px solid var(--border, #334); color: var(--text-muted, #8899aa); border-radius: 4px; padding: 2px 8px; cursor: pointer; float: right; }
  .di-refresh-pulse-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
  .di-refresh-pulse-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .di-seller-note-responding-to { font-size: 11px; color: var(--text-muted, #8899aa); margin-bottom: 4px; font-style: italic; }
  .di-seller-note-content { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
  .di-note-hs-badge { display: inline-block; padding: 0 4px; border-radius: 4px; font-size: 10px; background: #ff7a59; color: #fff; }
  .di-note-delete-btn {
    background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px;
    margin-left: 4px;
  }
  .di-note-delete-btn:hover { color: var(--red, #d97f8d); }

  /* Note form */
  .di-seller-note-form { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
  .di-note-textarea {
    width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid rgba(168,151,137,.45);
    border-radius: 6px; color: var(--text); font-family: inherit; font-size: 13px; line-height: 1.5;
    padding: 8px 11px; resize: vertical; min-height: 64px;
    box-shadow: inset 0 1px 2px rgba(60,40,20,.04);
    transition: border-color .15s, box-shadow .15s;
  }
  .di-note-textarea:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 2px rgba(60,40,20,.04), 0 0 0 3px rgba(224,138,91,.15); }
  .di-note-form-controls { display: flex; align-items: center; gap: 10px; margin: 7px 0 8px; flex-wrap: wrap; }
  .di-note-type-select {
    background: rgba(180,140,100,.08); border: 1px solid var(--border); border-radius: 5px;
    color: var(--text); font-size: 12px; padding: 3px 7px; cursor: pointer;
  }
  .di-note-hs-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }
  .di-note-form-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

  /* Primary save button */
  .di-note-save-primary {
    align-self: flex-start; padding: 6px 16px;
    background: var(--accent); border: none; border-radius: 6px;
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: opacity .15s;
  }
  .di-note-save-primary:hover { opacity: .85; }
  .di-note-save-primary:disabled { opacity: .4; cursor: default; }

  /* Secondary "save + full analysis" button */
  .di-note-save-full {
    align-self: flex-start; padding: 6px 14px;
    background: rgba(180,140,100,.05); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.3;
    transition: background .15s, border-color .15s;
  }
  .di-note-save-full:hover { background: rgba(180,140,100,.10); border-color: var(--accent); }
  .di-note-save-full:disabled { opacity: .4; cursor: default; }
  .di-note-save-full-sub { font-size: 11px; font-weight: 400; color: var(--muted); }

  /* Remove old save-note styles */
  .di-update-link--secondary { font-size: 12px; color: var(--muted); }
  .di-note-coach-warn { font-size: 11px; color: var(--muted); font-style: italic; }

  /* Note trigger buttons */
  .di-note-triggers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
  .di-note-trigger-btn {
    background: rgba(180,140,100,.05); border: 1px solid var(--border); border-radius: 5px;
    color: var(--muted); font-size: 12px; padding: 4px 10px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .di-note-trigger-btn:hover { background: rgba(180,140,100,.10); color: var(--text); }
  .di-note-trigger-btn--active { background: rgba(99,179,237,.12); border-color: var(--accent); color: var(--accent); }
  .di-note-trigger-btn--col { display: block; margin-top: 12px; width: 100%; text-align: left; }

  /* Per-signal inline comment button */
  .di-signal-comment-btn {
    display: inline-block; margin-top: 6px;
    background: none; border: none; padding: 0;
    color: var(--muted); font-size: 11px; cursor: pointer;
    transition: color .15s, opacity .15s;
    opacity: .75;
  }
  .di-signal-comment-btn:hover { color: var(--accent); opacity: 1; }
  .di-signal-comment-btn.di-note-trigger-btn--active { color: var(--accent); font-weight: 600; }

  /* Note context label */
  .di-note-context-label { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 7px; }

  /* ── Sphere of Influence ── */
  .soi-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 20px 0; }
  .soi-empty { padding: 32px 0; text-align: center; font-size: 13px; color: var(--muted); font-style: italic; }
  .soi-wrap { display: flex; flex-direction: column; gap: 20px; }
  .soi-svg-wrap { width: 100%; }

  /* Detail panel */
  .soi-detail-panel {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px 20px; animation: soiFadeIn .2s ease;
  }
  @keyframes soiFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .soi-detail-header { margin-bottom: 12px; }
  .soi-detail-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
  .soi-detail-title { font-size: 13px; color: var(--muted); }
  .soi-detail-company { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .soi-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .soi-detail-link { font-size: 12px; color: var(--accent); text-decoration: none; }
  .soi-detail-link:hover { text-decoration: underline; }

  /* Badges */
  .soi-detail-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .soi-badge {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .4px;
  }
  .soi-badge-role { background: rgba(224,138,91,.12); color: var(--accent); }
  .soi-badge-seniority { background: rgba(168,151,137,.15); color: var(--muted); }
  .soi-badge-eb { background: rgba(224,138,91,.2); color: #a45d3a; }
  .soi-badge-champion { background: rgba(79,125,94,.2); color: #3d6249; }
  .soi-badge-sm { font-size: 11px; padding: 2px 8px; background: var(--surface); color: var(--muted); border-radius: 20px; }

  /* Behavioral profile */
  .soi-profile-section {
    border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px;
  }
  .soi-profile-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
    color: var(--muted); margin-bottom: 10px;
  }
  .soi-profile-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13px; }
  .soi-profile-label { color: var(--muted); min-width: 140px; font-size: 12px; }
  .soi-profile-value { color: var(--text); }
  .soi-profile-none { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 10px; }

  /* Create contact section */
  .soi-create-section {
    border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px;
  }
  .soi-create-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }

  /* "Varför syns den här här?" – pedagogisk förklaring för icke-formella kontakter */
  .soi-ghost-explain {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .soi-ghost-explain-title {
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 6px;
  }
  .soi-ghost-explain-body {
    font-size: 13px; color: var(--text); line-height: 1.55;
  }
  .soi-ghost-explain-body strong { color: var(--text); font-weight: 600; }
  .soi-ghost-explain-quote {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--surface2, #fbeede);
    border-radius: 6px;
    border-left: 2px solid var(--muted);
  }
  .soi-ghost-explain-quote-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); margin-bottom: 4px;
  }
  .soi-ghost-explain-quote-text {
    font-size: 13px; color: var(--text); line-height: 1.5; font-style: italic;
  }
  .soi-ghost-explain-hint {
    font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 10px;
  }

  .soi-create-form { display: flex; flex-direction: column; gap: 8px; }
  .soi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .soi-form-input {
    background: rgba(180,140,100,.05); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-family: var(--font); font-size: 13px; padding: 7px 10px;
    outline: none; width: 100%;
  }
  .soi-form-input:focus { border-color: var(--accent); }
  .soi-form-email-row { font-size: 12px; color: var(--muted); }
  .soi-form-email-row strong { color: var(--text); }
  .soi-create-btn {
    align-self: flex-start; background: var(--accent); border: none; border-radius: 6px;
    color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600;
    padding: 7px 16px; cursor: pointer; transition: opacity .15s;
  }
  .soi-create-btn:hover { opacity: .85; }
  .soi-create-btn:disabled { opacity: .4; cursor: default; }
  .soi-create-status { font-size: 12px; color: var(--muted); margin-left: 8px; }

  /* Ytterkrets-uppmaning – synlig för formella kontakter på ring 3 utan roll/tagg */
  .soi-outer-prompt {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-deep, #b88a30);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .soi-outer-prompt-title {
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 6px;
  }
  .soi-outer-prompt-body {
    font-size: 13px; color: var(--text); line-height: 1.55;
  }
  .soi-outer-prompt-body strong { font-weight: 600; }
  .soi-outer-prompt-body em { font-style: italic; color: var(--ink-soft, #6b5e54); }

  /* Associate-läge: kontakten finns redan i HubSpot men är inte kopplad till dealen.
     Då behövs ingen formulärinput – bara "Koppla till dealen"-knappen. */
  .soi-form--associate-only .soi-form-row,
  .soi-form--associate-only input[name="email"],
  .soi-form--associate-only input[name="jobtitle"],
  .soi-form--associate-only input[name="companyName"],
  .soi-form--associate-only .soi-form-hint { display: none !important; }

  /* Already-läge: kontakten är redan kopplad till dealen. Dölj allt utom det
     gröna meddelandet (dupEl ligger utanför formuläret-fältområdet). */
  .soi-form--already .soi-form-row,
  .soi-form--already input[name="email"],
  .soi-form--already input[name="jobtitle"],
  .soi-form--already input[name="companyName"],
  .soi-form--already .soi-form-hint,
  .soi-form--already .soi-create-btn { display: none !important; }

  /* Domän-avvikelse-varning i förklaringsrutan */
  .soi-ghost-explain-warn {
    margin-top: 10px; padding: 8px 12px;
    background: rgba(176, 74, 58, .08);
    border: 1px solid rgba(176, 74, 58, .35);
    border-radius: 6px;
    font-size: 12.5px; color: #8a3829; line-height: 1.5;
  }
  .soi-ghost-explain-warn--soft {
    background: rgba(184, 132, 32, .08);
    border-color: rgba(184, 132, 32, .35);
    color: #7a5a18;
  }
  .soi-ghost-explain-warn code {
    background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px;
    font-size: 12px; font-family: var(--font-mono, monospace);
  }

  /* ── Roll-redigering ── */
  .soi-role-section {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 14px;
  }
  .soi-role-block {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .soi-role-block-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--text);
  }
  .soi-role-block-help {
    font-size: 13px; color: var(--muted); line-height: 1.5;
  }
  .soi-role-block-help em { color: var(--text); font-style: italic; }
  .soi-role-select {
    background: var(--surface, #ffffff); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-family: var(--font); font-size: 14px; padding: 8px 12px;
    outline: none; min-width: 240px; max-width: 280px;
    margin-top: 2px;
  }
  .soi-role-select:focus { border-color: var(--accent); }
  .soi-role-select option {
    background: var(--surface, #ffffff); color: var(--text);
  }
  .soi-role-hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
  .soi-role-hint strong { color: var(--text); font-weight: 600; }

  .soi-tag-row { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 2px; }
  .soi-tag-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--text); cursor: pointer; user-select: none;
    padding: 7px 12px; border-radius: 6px;
    background: rgba(180,140,100,.05);
    border: 1px solid var(--border);
    transition: background .15s, border-color .15s;
  }
  .soi-tag-check:hover { background: rgba(180,140,100,.10); border-color: var(--accent); }
  .soi-tag-check input[type=checkbox] { cursor: pointer; accent-color: var(--accent); width: 16px; height: 16px; }
  .soi-tag-pill {
    font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    letter-spacing: .3px;
  }
  .soi-tag-pill-champion { background: rgba(79,125,94,.15); color: #3d6249; border: 1px solid rgba(79,125,94,.45); }
  .soi-tag-pill-eb       { background: rgba(224,138,91,.15); color: #a45d3a; border: 1px solid rgba(224,138,91,.45); }
  .soi-role-status { font-size: 12px; color: var(--muted); min-height: 14px; }
  .soi-manual-actions { margin-top: 10px; }
  .soi-btn-danger {
    background: transparent; border: 1px solid rgba(176,74,58,.4); border-radius: 6px;
    color: #b04a3a; font-family: var(--font); font-size: 12px; padding: 5px 10px;
    cursor: pointer;
  }
  .soi-btn-danger:hover { background: rgba(176,74,58,.1); }
  .soi-btn-danger:disabled { opacity: .4; cursor: default; }

  /* ── "Inte rätt – ignorera framöver" för ghost-kontakter ── */
  .soi-ghost-dismiss { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
  .soi-btn-link-danger {
    background: transparent; border: none; padding: 0;
    color: #b04a3a; font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: underline;
  }
  .soi-btn-link-danger:hover { color: #8a3829; }
  .soi-btn-link-danger:disabled { opacity: .4; cursor: default; text-decoration: none; }
  .soi-ghost-dismiss-help { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

  /* ── Lägg till manuell kontakt ── */
  .soi-add-manual-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
  .soi-add-manual-btn {
    background: transparent; border: 1px dashed var(--border); border-radius: 6px;
    color: var(--muted); font-family: var(--font); font-size: 13px; padding: 8px 14px;
    cursor: pointer; transition: all .15s;
  }
  .soi-add-manual-btn:hover { border-color: var(--accent); color: var(--text); }
  .soi-add-manual-form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
  .soi-add-manual-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .soi-add-manual-grid input,
  .soi-add-manual-grid select {
    background: rgba(180,140,100,.05); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-family: var(--font); font-size: 13px; padding: 7px 10px;
    outline: none; width: 100%;
  }
  .soi-add-manual-grid input:focus,
  .soi-add-manual-grid select:focus { border-color: var(--accent); }
  .soi-add-manual-tags { display: flex; gap: 16px; }
  .soi-add-manual-actions { display: flex; align-items: center; gap: 12px; }
  .soi-add-manual-status { font-size: 12px; color: var(--muted); }

  /* ── Tidslinje – chat-layout ── */
  .di-tl-chat-wrap { display: flex; flex-direction: column; gap: 6px; }

  /* Månadsavdelare */
  .di-tl-month-sep {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); text-align: center; padding: 12px 0 4px;
  }
  .di-tl-month-sep:first-child { padding-top: 0; }

  /* Gemensam rad – alltid flexbox */
  .di-tl-row {
    display: flex; align-items: flex-start; gap: 8px;
    opacity: 1; transition: opacity .15s;
  }
  .di-tl-row.di-tl-tier2 { opacity: .45; }

  /* Spacer (tom flex-1) för att centrera höger/vänster-bubblor */
  .di-tl-spacer { flex: 1; min-width: 0; }

  /* Gemensam bubbel-stil */
  .di-tl-bubble {
    max-width: 48%; flex-shrink: 0; flex-grow: 0;
    background: var(--surface2); border-radius: 10px;
    padding: 10px 13px; position: relative;
  }
  .di-tl-bubble-left  { border-top-left-radius: 2px; }
  .di-tl-bubble-right { border-top-right-radius: 2px; text-align: right; }

  .di-tl-bubble-header {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .di-tl-bubble-right .di-tl-bubble-header { justify-content: flex-end; }

  .di-tl-dot-inline { font-size: 12px; }
  .di-tl-type-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  }
  .di-tl-date { font-size: 11px; color: var(--muted); white-space: nowrap; }

  .di-tl-label {
    font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4;
  }
  .di-tl-subtext {
    font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 3px;
  }
  .di-tl-original-toggle {
    display: inline-block; margin-top: 5px; font-size: 11px; color: var(--muted);
    cursor: pointer; border-bottom: 1px dashed var(--muted);
    position: relative; user-select: none;
  }
  .di-tl-orig-box {
    display: none; position: fixed;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 32px 18px 16px 18px;
    font-size: 13px; color: var(--text); line-height: 1.6;
    width: 520px; max-width: calc(100vw - 32px); max-height: 70vh;
    overflow-y: auto; z-index: 100000;
    box-shadow: 0 12px 32px rgba(45,37,32,.45);
    white-space: pre-wrap; text-align: left;
    font-weight: 400; text-transform: none; letter-spacing: 0;
    opacity: 1;
  }
  .di-tl-orig-box.open { display: block; }
  .di-tl-orig-close {
    position: absolute; top: 6px; right: 10px;
    background: transparent; border: 0; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--muted);
    padding: 4px 6px; border-radius: 4px;
  }
  .di-tl-orig-close:hover { color: var(--text); background: rgba(0,0,0,.05); }
  .di-tl-original-toggle.is-open { color: var(--accent); border-color: var(--accent); }

  /* Transcript source badge + expandable transcript text */
  .di-tl-transcript-line { margin-top: 6px; }
  .di-tl-transcript-badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 600; letter-spacing: .3px;
    padding: 2px 8px; border-radius: 999px;
    background: transparent;
    text-transform: none;
  }
  /* Transkript-toggle använder samma click-mekanik som original-toggle men
     ska inte ha dashed underline – badgen ramar redan in den. */
  .di-tl-transcript-toggle {
    border-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
  .di-tl-transcript-toggle:hover .di-tl-transcript-badge { filter: brightness(1.15); }
  .di-tl-hs-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--muted);
    text-decoration: none;
    opacity: .7;
  }
  .di-tl-hs-link:hover { opacity: 1; color: var(--accent); }
  .di-tl-original-toggle:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }

  /* Signal tags */
  .di-tl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

  /* Meeting resolution nudge */
  .di-tl-resolve-nudge {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 160, 0, 0.08);
    border: 1px solid rgba(255, 160, 0, 0.35);
  }
  .di-tl-resolve-badge {
    display: inline-block;
    font-size: 10px; font-weight: 700; letter-spacing: .4px;
    padding: 2px 8px; border-radius: 999px;
    background: #ffa000; color: #fff;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .di-tl-resolve-actions {
    display: flex; flex-wrap: wrap; gap: 5px;
  }
  .di-tl-resolve-btn {
    font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid rgba(255,160,0,.6);
    background: transparent; color: #e69000;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .di-tl-resolve-btn:hover:not(:disabled) {
    background: #ffa000; color: #fff;
  }
  .di-tl-resolve-btn:disabled { opacity: .5; cursor: default; }
  .di-tl-resolve-nudge--ro .di-tl-resolve-actions { display: none; }
  .di-tl-resolve-nudge--ro { padding: 4px 10px; }
  .di-tl-bubble-right .di-tl-tags { justify-content: flex-end; }
  .di-tl-signal-tag {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
    background: rgba(224,138,91,.14); color: var(--accent); letter-spacing: .3px;
    text-transform: uppercase;
  }

  /* Centerade events (stage, AI, milestone, off-track) */
  .di-tl-center-event {
    flex: 0 0 auto; margin: 6px auto; max-width: 80%;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: center;
    background: rgba(224,138,91,.06); border: 1px solid rgba(224,138,91,.18);
    border-radius: 8px; padding: 7px 14px; font-size: 12px;
  }
  .di-tl-stage-event {
    background: rgba(224,138,91,.1); border-color: rgba(224,138,91,.3);
    font-weight: 700;
  }
  .di-tl-milestone {
    background: rgba(224,138,91,.08); border-color: rgba(224,138,91,.22);
    font-style: italic;
  }
  .di-tl-off-track {
    max-width: 60%;
    background: rgba(184,138,48,.08);
    border-color: rgba(184,138,48,.35);
  }
  .di-tl-off-track .di-tl-center-icon { color: #b88a30 !important; }
  .di-tl-off-track .di-tl-center-label { color: #b88a30; }
  .di-tl-off-track .di-tl-center-subtext {
    color: var(--text);
    line-height: 1.5;
    margin-top: 6px;
    white-space: normal;
    word-break: break-word;
  }
  .di-tl-center-icon { font-size: 14px; }
  .di-tl-center-label { font-size: 12px; font-weight: 600; color: var(--text); }
  .di-tl-center-subtext { width: 100%; font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px; }

  /* Legend */
  .di-tl-legend {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-size: 11px; color: var(--muted);
  }
  .di-tl-legend-left  { color: #38bdf8; }
  .di-tl-legend-center { color: var(--accent); }
  .di-tl-legend-right { color: var(--muted); }

  /* Toggle-knapp */
  .di-tl-toggle-btn {
    font-size: 11px; color: var(--muted); background: none; border: 1px solid var(--border);
    border-radius: 5px; cursor: pointer; padding: 3px 9px; font-family: var(--font);
    transition: color .15s, border-color .15s; white-space: nowrap;
  }
  .di-tl-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }

  /* Tom tillstånd */
  .di-tl-empty {
    font-size: 13px; color: var(--muted); padding: 20px 0; text-align: center;
    border: 1px dashed var(--border); border-radius: 8px;
  }

  /* Bakåtkompatibilitet (används inte längre men kan finnas i cache) */
  .di-tl-wrap { position: relative; }

  /* ─── Dealstråd ────────────────────────────────────────────────────────────── */
  .di-thread-card { padding-bottom: 0; }
  .di-thread-card:has(#di-thread-body-wrap[style*="display:none"]),
  .di-thread-card:has(#di-thread-body-wrap[style*="display: none"]) { padding-bottom: 8px; }

  /* Collapse-toggle-header */
  .di-thread-toggle-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0 12px; cursor: pointer; user-select: none;
  }
  .di-thread-toggle-header:hover .di-card-title { color: var(--accent); }
  .di-thread-toggle-left { display: flex; align-items: center; gap: 8px; }
  .di-thread-toggle-icon { font-size: 10px; color: var(--muted); width: 12px; }
  .di-thread-toggle-hint { font-size: 11px; color: var(--muted); font-style: italic; }

  /* Body-wrap (kollapsat/expanderat) */
  .di-thread-body-wrap { display: flex; flex-direction: column; }

  .di-thread-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; max-height: 480px; overflow-y: auto; scrollbar-width: thin; }
  .di-thread-empty { font-size: 13px; color: var(--muted); padding: 16px 0; }
  .di-thread-no-user { font-size: 12px; color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); border-radius: 6px; padding: 8px 12px; margin: 8px 0 12px; }

  /* Inlägg-bubbla */
  .di-thread-entry { display: flex; flex-direction: column; }
  /* Indenterat svar under chefskommentar */
  .di-thread-reply-group { display: flex; flex-direction: column; gap: 6px; }
  .di-thread-reply-indent {
    margin-left: 24px;
    padding-left: 14px;
    border-left: 2px solid color-mix(in srgb, var(--green) 50%, transparent);
  }
  .di-thread-reply-indent .di-thread-bubble:not(.di-thread-bubble--ai) {
    border-left: 3px solid var(--green);
    background: color-mix(in srgb, var(--green) 5%, var(--surface2));
  }
  /* AI-svar i reply-grupp behåller sitt eget utseende, med accent-indrag */
  .di-thread-reply-indent:has(.di-thread-bubble--ai) {
    border-left: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .di-thread-bubble {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px; font-size: 13px; line-height: 1.55;
  }
  .di-thread-bubble--ai {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface2));
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .di-thread-entry--manager .di-thread-bubble {
    border-left: 3px solid var(--accent);
  }
  .di-thread-entry--unanswered .di-thread-bubble {
    border-left: 3px solid var(--yellow);
    background: color-mix(in srgb, var(--yellow) 8%, var(--surface2));
  }
  .di-thread-entry--unanswered .di-thread-prompt-card {
    border-left: 3px solid var(--yellow);
    background: color-mix(in srgb, var(--yellow) 6%, var(--surface2));
  }
  .di-thread-entry--overdue .di-thread-prompt-card {
    border-left: 3px solid var(--red);
  }

  /* Meta-rad */
  .di-thread-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
  .di-thread-author { font-weight: 600; font-size: 12px; }
  .di-thread-role-tag { font-size: 10px; color: var(--muted); }
  .di-thread-time { font-size: 10px; color: var(--muted); margin-left: auto; }
  .di-thread-ref { font-size: 11px; color: var(--muted); margin-bottom: 4px; font-style: italic; }

  /* Type badges */
  .di-thread-type-badge {
    font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
    background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  }
  .di-thread-badge--ai { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-color: transparent; }
  .di-thread-badge--prompt { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); border-color: transparent; }

  /* Unread badge */
  .di-thread-unread-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
    padding: 0 5px; vertical-align: middle;
  }

  /* AI-citat */
  .di-thread-quote {
    border-left: 3px solid var(--border); padding: 4px 10px;
    margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.4;
    white-space: pre-wrap; border-radius: 0 4px 4px 0;
  }
  .di-thread-quote-author { display: block; font-size: 10px; font-weight: 600; color: var(--text); margin-bottom: 2px; }

  /* Seller_prompt kort */
  .di-thread-prompt-card {
    background: color-mix(in srgb, var(--yellow) 8%, var(--surface2));
    border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
    border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  }
  .di-thread-prompt-header { display: flex; align-items: center; gap: 8px; }
  .di-thread-overdue-badge { font-size: 10px; font-weight: 700; color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); padding: 2px 7px; border-radius: 4px; }
  .di-thread-reply-btn {
    align-self: flex-start; background: transparent; border: 1px solid var(--border);
    color: var(--text); font-size: 12px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
    margin-top: 8px;
  }
  .di-thread-reply-btn:hover { border-color: var(--accent); color: var(--accent); }

  .di-thread-delete-btn {
    align-self: flex-start; background: transparent; border: 1px solid transparent;
    color: var(--muted); font-size: 11px; padding: 2px 8px; border-radius: 6px; cursor: pointer;
    margin-top: 6px; margin-left: 6px; opacity: 0.6;
  }
  .di-thread-delete-btn:hover { border-color: var(--red); color: var(--red); opacity: 1; }
  .di-thread-delete-btn:disabled { opacity: 0.4; cursor: default; }

  /* Inline reply form (säljare svarar direkt under ett chefsmeddelande) */
  .di-thread-inline-reply { margin-top: 6px; padding-left: 16px; border-left: 2px solid var(--accent); }
  .di-thread-inline-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 6px; }
  .di-thread-inline-ta {
    width: 100%; background: var(--surface2); border: 1px solid var(--accent);
    border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 13px;
    padding: 10px 12px; resize: vertical; outline: none;
  }
  .di-btn-secondary {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 13px; padding: 6px 14px; border-radius: 7px; cursor: pointer;
  }

  /* Info-text för säljare (inga fritext-inlägg) */
  .di-thread-seller-hint {
    font-size: 12px; color: var(--muted); text-align: center; padding: 10px 0 4px;
    font-style: italic;
  }

  /* Compose */
  .di-thread-compose { border-top: 1px solid var(--border); padding: 12px 0 4px; }
  .di-thread-input {
    width: 100%; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 13px;
    padding: 10px 12px; resize: vertical; outline: none;
  }
  .di-thread-input:focus { border-color: var(--accent); }
  .di-thread-compose-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-bottom: 4px; }
  .di-thread-at-hint { font-size: 11px; color: var(--accent); font-style: italic; }
  .di-thread-send-btn {
    background: var(--accent); color: #fff; border: none; border-radius: 7px;
    font-size: 13px; font-weight: 600; padding: 7px 18px; cursor: pointer;
  }
  .di-thread-send-btn:hover { opacity: .85; }
  .di-thread-send-btn:disabled { opacity: .45; cursor: default; }

  /* ─── Rekommendationer – Bekräfta-knapp (chef) ─────────────────────────── */
  .di-rec-endorse-wrap { display: inline-flex; align-items: center; gap: 4px; }
  .di-rec-endorse-btn {
    background: transparent; border: 1px solid color-mix(in srgb, var(--green) 50%, transparent);
    color: var(--green); font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap;
  }
  .di-rec-endorse-btn:hover { background: color-mix(in srgb, var(--green) 12%, transparent); }
  .di-rec-endorse-btn.di-thread-endorse-done { opacity: .6; cursor: default; }

  /* Endorsement-badge inuti rec-kort (synlig för alla) */
  .di-rec-endorsed-badge {
    font-size: 12px; color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    border-radius: 5px; padding: 5px 10px; margin-bottom: 8px;
  }

  /* ─── Notifieringsbanner ─────────────────────────────────────────────────── */
  .di-notification-banner { margin: 0 0 24px; }
  .di-notif-inner {
    background: color-mix(in srgb, var(--green) 10%, var(--surface));
    border: 2px solid var(--green) !important;
    border-radius: 12px; padding: 20px 20px;
    display: flex; align-items: center; gap: 16px;
    position: relative;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent),
                0 4px 16px rgba(180,140,100,.10);
  }
  .di-notif-items { flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .di-notif-item  { display: flex; align-items: flex-start; gap: 10px; }
  .di-notif-icon  { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
  .di-notif-text  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .di-notif-msg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .di-notif-msg   { color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.4; }
  .di-notif-tag   {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
    border-radius: 5px; padding: 2px 8px; white-space: nowrap;
  }
  .di-notif-sub   {
    color: var(--muted); font-size: 13px; line-height: 1.45;
    font-weight: 400;
  }
  .di-notif-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; margin-top: 18px; }
  .di-notif-show-btn {
    background: var(--green); color: #000; border: none;
    border-radius: 7px; font-size: 13px; font-weight: 700;
    padding: 10px 20px; cursor: pointer; white-space: nowrap; text-align: center;
  }
  .di-notif-show-btn:hover { opacity: .85; }
  .di-notif-show-btn--endorse {
    background: var(--green); color: #000; border: none;
    border-radius: 7px; font-size: 13px; font-weight: 700;
    padding: 10px 20px; cursor: pointer; white-space: nowrap; text-align: center;
  }
  .di-notif-show-btn--endorse:hover { opacity: .85; }
  .di-notif-close-btn {
    background: none; border: none; color: var(--muted);
    font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1;
    position: absolute; top: 8px; right: 10px;
  }
  .di-notif-close-btn:hover { color: var(--text); }

  /* ─── Coaching-panel ──────────────────────────────────────────────────────── */
  .di-coaching-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(180,140,100,.16); z-index: 1000;
  }
  .di-coaching-overlay.visible { display: block; }

  .di-coaching-panel {
    display: none; position: fixed; top: 0; right: 0; width: 620px; max-width: 95vw;
    height: 100vh; background: var(--surface); border-left: 1px solid var(--border);
    z-index: 1001; overflow: hidden; box-shadow: -4px 0 24px rgba(180,140,100,.14);
    flex-direction: column; resize: horizontal;
  }
  .di-coaching-panel.visible { display: flex; }

  .di-cp-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 20px 16px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
  }
  .di-cp-type-label {
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 4px;
  }
  .di-cp-title {
    font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4;
    max-width: calc(100% - 40px);
  }
  .di-cp-close {
    background: none; border: none; color: var(--muted); font-size: 18px;
    cursor: pointer; padding: 2px 6px; line-height: 1; flex-shrink: 0; margin-left: 8px;
  }
  .di-cp-close:hover { color: var(--text); }

  .di-cp-body { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }

  .di-cp-section {}
  .di-cp-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
  }
  .di-cp-section-text { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0; }
  .di-cp-muted { color: var(--muted) !important; }

  .di-cp-steps {
    margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px;
  }
  .di-cp-steps li { font-size: 13px; color: var(--text); line-height: 1.5; }

  .di-cp-theory {
    background: rgba(224,138,91,.08); border: 1px solid rgba(224,138,91,.2);
    border-radius: 8px; padding: 12px 14px;
  }
  .di-cp-theory .di-cp-section-title { color: var(--accent); margin-bottom: 6px; }

  .di-cp-stats { display: flex; flex-direction: column; gap: 8px; }
  .di-cp-stat-card {
    background: var(--surface2); border-radius: 8px; padding: 10px 14px;
  }
  .di-cp-stat-value { font-size: 18px; font-weight: 700; color: var(--text); }
  .di-cp-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .di-cp-stat-context { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

  .di-cp-rag-queries { display: flex; flex-direction: column; gap: 6px; }
  .di-cp-rag-btn {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-size: 12px; padding: 8px 12px; cursor: pointer;
    text-align: left; line-height: 1.4; transition: border-color .15s;
  }
  .di-cp-rag-btn:hover { border-color: var(--accent); color: var(--accent); }

  .di-cp-action-section {
    border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px;
  }
  .di-cp-email-btn {
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer;
    width: 100%; text-align: center;
  }
  .di-cp-email-btn:hover { opacity: .88; }
  .di-cp-email-loading {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
    padding: 8px 0;
  }
  .di-cp-email-draft {
    width: 100%; box-sizing: border-box; margin-top: 10px;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); font-size: 13px; line-height: 1.6; padding: 12px;
    font-family: inherit; white-space: pre-wrap; word-break: break-word;
    user-select: text;
  }
  .di-cp-copy-btn {
    margin-top: 8px; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: 12px; padding: 7px 14px;
    cursor: pointer; width: 100%;
  }
  .di-cp-copy-btn:hover { border-color: var(--accent); }

  /* Hjälp-knapp (används av meddpicc.js, overview.js – ej recommendations.js) */
  .di-help-btn {
    background: none; border: 1px solid var(--border); border-radius: 5px;
    color: var(--muted); font-size: 11px; padding: 2px 7px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
    transition: border-color .15s, color .15s; white-space: nowrap;
  }
  .di-help-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* Gmail-knapp i coaching-panelens mailutkast */
  .di-cp-gmail-btn {
    display: block; width: 100%; margin-top: 8px;
    padding: 10px 14px; text-align: center;
    background: var(--accent); color: #fff; border: none; border-radius: 6px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: opacity .15s;
  }
  .di-cp-gmail-btn:hover { opacity: 0.88; }

/* Coaching Questions */
#di-section-coaching-questions { margin-top: 24px; margin-bottom: 24px; }
.di-cq-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 10px;
}
.di-cq-header h3 {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35;
}
.di-cq-header .di-cq-regen {
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.di-cq-header .di-cq-regen:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.di-cq-header .di-cq-regen:disabled { opacity: .55; cursor: default; }
.di-cq-header-actions { display: flex; gap: 8px; align-items: center; }
.di-cq-shuffle {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.di-cq-shuffle:hover { border-color: var(--accent); color: var(--accent); }

.di-cq-info {
  margin: 0 0 12px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(224,138,91,.06);
  border-left: 3px solid rgba(224,138,91,.5);
  border-radius: 4px;
}
.di-cq-info strong { color: var(--text); font-weight: 600; }
.di-cq-info em { font-style: italic; }

.di-cq-card-saved {
  opacity: .85;
  border-color: rgba(127,166,143,.5);
  background: rgba(127,166,143,.05);
}
.di-cq-saved {
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(127,166,143,.08);
  border: 1px solid rgba(127,166,143,.35);
}
.di-cq-saved-head {
  font-size: 13px;
  font-weight: 700;
  color: #86efac;
  margin-bottom: 4px;
}
.di-cq-saved-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.di-cq-saved-body strong { color: var(--text); font-weight: 600; }
.di-cq-saved-body em { color: var(--muted); font-style: italic; }

.di-cq-loading, .di-cq-empty, .di-cq-error {
  padding: 14px 16px; color: var(--muted); font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.di-cq-error { color: #d97f8d; }

.di-cq-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }

.di-cq-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px;
}
.di-cq-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 6px;
}
.di-cq-domain {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: rgba(224,138,91,.15); color: var(--accent);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.di-cq-domain-meddpicc        { background: rgba(224,138,91,.15); color: #93c5fd; }
.di-cq-domain-customer_context{ background: rgba(168,85,247,.15); color: #d8b4fe; }
.di-cq-domain-tech_landscape  { background: rgba(20,184,166,.15); color: #5eead4; }
.di-cq-domain-commercial      { background: rgba(245,158,11,.15); color: #fcd34d; }
.di-cq-domain-process_health  { background: rgba(244,114,182,.15); color: #f9a8d4; }
.di-cq-domain-product_specific{ background: rgba(127,166,143,.15);  color: #86efac; }
.di-cq-score { color: var(--muted); font-size: 11px; }
.di-cq-q { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.45; margin: 6px 0; }
.di-cq-hyp, .di-cq-why { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 4px 0; }
.di-cq-hyp strong, .di-cq-why strong { color: var(--text); font-weight: 600; }
.di-cq-hyp-probe { font-style: italic; opacity: .85; }

.di-cq-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.di-cq-answer {
  width: 100%; font-size: 13px; padding: 8px 11px; box-sizing: border-box;
  background: var(--surface); border: 1px solid rgba(168,151,137,.45); border-radius: 6px;
  color: var(--text); font-family: inherit; resize: vertical; min-height: 56px;
  box-shadow: inset 0 1px 2px rgba(60,40,20,.04);
  transition: border-color .15s, box-shadow .15s;
}
.di-cq-answer:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 2px rgba(60,40,20,.04), 0 0 0 3px rgba(224,138,91,.15); }
.di-cq-answer::placeholder { color: var(--muted); }
.di-cq-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.di-cq-actions button {
  font-size: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  font-weight: 500; transition: border-color .15s, color .15s, background .15s;
}
.di-cq-actions button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.di-cq-actions .di-cq-btn-save {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.di-cq-actions .di-cq-btn-save:hover:not(:disabled) { opacity: .88; color: #fff; }
.di-cq-actions button:disabled { opacity: .5; cursor: default; }

.di-cq-honesty {
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.di-cq-honesty h4 {
  margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted);
}
.di-cq-honesty-row { display: flex; gap: 16px; flex-wrap: wrap; }
.di-cq-honesty-row label {
  font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 4px;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.di-cq-honesty-row input[type=number],
.di-cq-honesty-row select {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 13px; padding: 6px 8px; min-width: 110px; font-family: inherit;
  text-transform: none; font-weight: 400;
}
.di-cq-honesty-row input[type=number]:focus,
.di-cq-honesty-row select:focus { outline: none; border-color: var(--accent); }
.di-cq-honesty textarea {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 13px; padding: 8px 10px; font-family: inherit;
  resize: vertical; min-height: 48px; box-sizing: border-box; width: 100%;
}
.di-cq-honesty textarea:focus { outline: none; border-color: var(--accent); }
.di-cq-honesty textarea::placeholder { color: var(--muted); }
.di-cq-honesty .di-cq-h-save {
  align-self: flex-start;
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.di-cq-honesty .di-cq-h-save:hover:not(:disabled) { opacity: .88; }
.di-cq-honesty .di-cq-h-save:disabled { opacity: .55; cursor: default; }
.di-cq-h-status { font-size: 11px; color: var(--muted); }

/* Sparade svar – hopfällbar lista under öppna frågor */
.di-cq-answered { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.di-cq-answered > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; padding: 4px 0;
  list-style: none;
}
.di-cq-answered > summary::-webkit-details-marker { display: none; }
.di-cq-answered > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.di-cq-answered[open] > summary::before { transform: rotate(90deg); }
.di-cq-answered > summary:hover { color: var(--text); }
.di-cq-ans-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.di-cq-ans-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px;
}
.di-cq-ans-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.di-cq-ans-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 10px;
}
.di-cq-ans-status-answered       { background: rgba(127,166,143,.15);  color: #86efac; }
.di-cq-ans-status-dont_know      { background: rgba(245,158,11,.15); color: #fcd34d; }
.di-cq-ans-status-not_applicable { background: rgba(168,151,137,.15); color: var(--muted); }
.di-cq-ans-date { font-size: 11px; color: var(--muted); margin-left: auto; }
.di-cq-ans-reopen {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.di-cq-ans-reopen:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.di-cq-ans-reopen:disabled { opacity: .5; cursor: default; }
.di-cq-ans-q { font-size: 13px; font-weight: 500; color: var(--text); margin: 4px 0; }
.di-cq-ans-text { font-size: 13px; color: var(--text); line-height: 1.5; }
.di-cq-ans-empty em { color: var(--muted); font-style: italic; }

/* Honesty Box – inuti winloss-kortet, mellan signal-grid och äldre noter */
.di-honesty-slot:empty { display: none; }
.di-honesty-slot {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 4px 12px rgba(60,40,20,.05);
}
.di-honesty-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.di-honesty-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted);
}
.di-honesty-ref {
  font-size: 12px; color: var(--text);
  background: rgba(224,138,91,.1); border: 1px solid rgba(224,138,91,.25);
  padding: 3px 10px; border-radius: 12px;
}
.di-honesty-ref strong { color: var(--accent); font-weight: 700; }
.di-honesty-ref-empty { color: var(--muted); background: transparent; border-style: dashed; }
.di-honesty-question { font-size: 13px; color: var(--text); }
.di-honesty-question em { color: var(--accent); font-style: normal; font-weight: 600; }
.di-honesty-dir-row { display: flex; gap: 6px; }
.di-honesty-dir {
  flex: 0 0 auto; padding: 6px 14px; font-size: 12px; font-weight: 500;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.di-honesty-dir:hover { border-color: var(--accent); color: var(--accent); }
.di-honesty-dir.is-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.di-honesty-input-row { display: flex; gap: 12px; align-items: center; }
.di-honesty-input-row label {
  font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px;
}
.di-honesty-pct {
  width: 110px; padding: 6px 10px; font-size: 14px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit;
}
.di-honesty-pct:focus { outline: none; border-color: var(--accent); }
.di-honesty-why {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; resize: vertical; min-height: 48px;
}
.di-honesty-why:focus { outline: none; border-color: var(--accent); }
.di-honesty-why::placeholder { color: var(--muted); }
.di-honesty-actions { display: flex; gap: 12px; align-items: center; }
.di-honesty-save {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.di-honesty-save:hover:not(:disabled) { opacity: .88; }
.di-honesty-save:disabled { opacity: .55; cursor: default; }
.di-honesty-status { font-size: 11px; color: var(--muted); }
.di-honesty-error { font-size: 12px; color: #d97f8d; }
.di-honesty-question strong { color: var(--accent); font-weight: 700; }
.di-honesty-help {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(224,138,91,.06);
  border: 1px solid rgba(224,138,91,.18);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.di-honesty-help strong { color: var(--text); font-weight: 600; }

/* ── Tabbad layout ─────────────────────────────────────────────────────── */
.di-top-strip {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: 12px;
  background: var(--surface);
  backdrop-filter: blur(8px);
}
.di-tab-bar {
  position: sticky;
  top: var(--di-top-strip-h, 0);
  z-index: 49;
  display: flex;
  gap: 4px;
  padding: 6px 4px 0 4px;
  margin: 0 0 16px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg, var(--surface));
  overflow-x: auto;
  scrollbar-width: thin;
}
.di-tab {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 10px 14px 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.di-tab:hover { color: var(--text); }
.di-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.di-tab--hidden { display: none !important; }
.di-tab-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
}
.di-tab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  background: #b04a3a;
  border-radius: 50%;
  vertical-align: middle;
  animation: di-tab-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes di-tab-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
.di-tab-panel { display: block; }
.di-tab-panel:not(.is-active) { display: none; }

/* ── Beteenden-tabben ─────────────────────────────────────────────────── */
.di-beh-intro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.di-beh-intro p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.di-beh-bucket { margin-top: 18px; }
.di-beh-bucket:first-of-type { margin-top: 0; }
.di-beh-bucket-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.di-beh-bucket-intro {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.di-beh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.di-beh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.di-beh-card.di-beh--positive { border-left-color: #7fa68f; }
.di-beh-card.di-beh--warning  { border-left-color: #b88a30; }
.di-beh-card.di-beh--negative { border-left-color: #b04a3a; }
.di-beh-card.di-beh--neutral  { border-left-color: var(--muted); }
.di-beh-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.di-beh-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.di-beh-explain {
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}
.di-beh-explain b { color: var(--text); font-weight: 600; }
.di-beh-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.di-beh-badge--neg     { background: rgba(176,74,58,.15);  color: #fca5a5; border: 1px solid rgba(176,74,58,.35); }
.di-beh-badge--pos     { background: rgba(127,166,143,.22);  color: #166534; border: 1px solid rgba(127,166,143,.55); }
.di-beh-badge--warn    { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.35); }
.di-beh-badge--neutral { background: rgba(168,151,137,.15); color: var(--muted); border: 1px solid var(--border); }
.di-beh-evidence {
  font-size: 12px; color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.di-beh-evidence summary { cursor: pointer; }
.di-beh-evidence ul { margin: 6px 0 0 0; padding-left: 18px; }
.di-beh-card-actions {
  margin-top: 4px;
  display: flex;
  justify-content: flex-start;
}
.di-beh-card .di-beh-coach-slot {
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.di-beh-missing {
  margin-top: 18px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.di-beh-missing-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.di-beh-missing-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
}
.di-beh-missing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.di-beh-missing-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  flex: 1 1 220px;
}
.di-beh-missing-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.di-beh-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.di-beh-btn:hover:not(:disabled) {
  border-color: var(--accent, #7fa68f);
}
.di-beh-btn:disabled { opacity: 0.5; cursor: wait; }
.di-beh-btn--primary {
  background: rgba(184,208,189,0.15);
  border-color: rgba(184,208,189,0.4);
  color: #93c5fd;
}
.di-beh-btn--primary:hover:not(:disabled) {
  background: rgba(184,208,189,0.25);
}
.di-beh-btn--ghost { color: var(--muted); }
.di-beh-btn--small { padding: 3px 8px; font-size: 11px; }

.di-beh-coach-slot {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.di-beh-coach-loading,
.di-beh-coach-error {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.di-beh-coach-error { color: #fca5a5; font-style: normal; }
.di-beh-coach { display: flex; flex-direction: column; gap: 10px; }
.di-beh-coach-block {
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 8px 10px;
}
.di-beh-coach-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.di-beh-coach-text {
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}
.di-beh-coach-steps,
.di-beh-coach-warns {
  margin: 4px 0 0 0;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.di-beh-coach-warns li { color: #fca5a5; }

.di-beh-asserted {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid rgba(127,166,143,0.3);
  border-radius: 8px;
  padding: 12px 14px;
}
.di-beh-asserted-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.di-beh-asserted-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(127,166,143,0.06);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.di-beh-empty {
  font-size: 13px; color: var(--muted);
  padding: 16px 0;
}

/* ── Notification-banner (olästa kommentarer) ─────────────────────────── */
.di-notification-banner {
  display: none;
  background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.06));
  border: 1px solid rgba(245,158,11,.45);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text);
  animation: di-banner-pulse 2.4s ease-in-out infinite;
}
.di-notification-banner .di-notification-link {
  color: var(--accent);
  font-weight: 600;
  margin-left: 6px;
  text-decoration: none;
}
.di-notification-banner .di-notification-link:hover { text-decoration: underline; }
@keyframes di-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
}

/* ── Säljarfeedback per signal ───────────────────────────────────────────── */
.di-signal-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.di-signal-feedback-btn {
  background: none;
  border: 1px dashed rgba(160,160,160,.5);
  color: var(--muted);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.di-signal-feedback-btn:hover { opacity: 1; color: var(--text); border-color: rgba(160,160,160,.9); }
.di-signal-feedback-form {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(160,160,160,.25);
  border-radius: 6px;
}
.di-sff-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.di-sff-ta, .di-sff-select { width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: 13px; margin-bottom: 6px; }
.di-sff-actions { display: flex; gap: 6px; justify-content: flex-end; }
.di-sff-submit { background: var(--accent); color: #fff; border: 0; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.di-sff-submit:disabled { opacity: .5; cursor: default; }
.di-sff-cancel { background: none; border: 1px solid rgba(160,160,160,.5); color: var(--muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }

.di-signal-correction-badge {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.di-signal-override {
  margin-top: 6px;
  padding: 4px 6px;
  background: rgba(255,200,80,.12);
  border-left: 3px solid rgba(255,200,80,.65);
  font-size: 12px;
  line-height: 1.4;
}
.di-signal-override-comment { color: var(--muted); }
.di-signal-override-clear {
  margin-left: 6px;
  background: none;
  border: 0;
  color: var(--muted);
  text-decoration: underline;
  font-size: 11px;
  cursor: pointer;
}
.di-signal-override-clear:hover { color: var(--text); }


/* ─── Dealinställningar-flärp (under topp-stripen) ─────────────────────── */
#di-settings-flap-wrap { margin: -10px 0 12px 0; padding: 0 18px; }
.di-settings-flap {
  background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
  border: 1px solid var(--border, #d8d8d8);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 8px 14px 10px 14px;
  font-size: 13px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04) inset, 0 1px 1px rgba(0,0,0,0.03);
  position: relative;
}
.di-settings-flap::before {
  content: "";
  position: absolute;
  top: -1px; left: 18px; right: 18px;
  height: 1px;
  background: var(--border, #d8d8d8);
  opacity: 0.5;
}
.di-settings-flap-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #777);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.di-settings-flap-body { display: flex; flex-direction: column; gap: 6px; }
.di-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  flex-wrap: wrap;
}
.di-settings-row-icon { font-size: 16px; line-height: 1; }
.di-settings-row-label { font-weight: 600; color: var(--text, #222); min-width: 60px; }
.di-settings-row-value { color: var(--muted, #666); flex: 1; }
.di-settings-row-actions { display: flex; gap: 6px; margin-left: auto; }
.di-settings-row-body { flex: 1; min-width: 240px; }
.di-settings-row-line { color: var(--text, #222); }
.di-settings-row-meta { font-size: 12px; color: var(--muted, #777); margin-top: 2px; }
.di-settings-row-sub { font-size: 12px; color: #5a4500; margin-top: 4px; font-style: italic; }
.di-settings-row--paused {
  background: linear-gradient(180deg, #fff7e6 0%, #fff1d6 100%);
  border-left: 3px solid #d39e00;
  border-radius: 4px;
  padding: 8px 10px;
}
.di-settings-row--paused strong { color: #6b4500; letter-spacing: 0.3px; }
.di-settings-row--muted { opacity: 0.7; }
.di-pause-date { font-weight: 600; font-family: 'SF Mono', Menlo, Consolas, monospace; }
.di-pause-daysleft { color: var(--muted, #777); font-size: 12px; }
.di-pause-ext-badge {
  display: inline-block;
  background: #d39e00;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Buttons */
.di-pause-btn {
  padding: 5px 10px;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
}
.di-pause-btn:hover { background: #f7f7f7; }
.di-pause-btn-set { background: #fef3c7; border-color: #d39e00; color: #6b4500; font-weight: 500; }
.di-pause-btn-set:hover { background: #fde9a3; }
.di-pause-btn-release { background: #fff; border-color: #d39e00; color: #6b4500; }
.di-pause-btn-extend { background: #fff; }

/* Form (när säljaren klickar Pausa…) */
.di-pause-form-mount { width: 100%; }
.di-pause-form {
  margin-top: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.di-pause-form-title { font-weight: 600; font-size: 14px; }
.di-pause-form-warning {
  background: #ffe9e9;
  border: 1px solid #f5a3a3;
  color: #7a1a1a;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.di-pause-form-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.di-pause-form-row > span:first-child { font-weight: 500; color: var(--muted, #666); }
.di-pause-form-row input,
.di-pause-form-row select,
.di-pause-form-row textarea {
  padding: 6px 8px;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}
.di-pause-form-hint { font-size: 11px; color: var(--muted, #666); }
.di-pause-date-preview { font-family: 'SF Mono', Menlo, Consolas, monospace; font-weight: 600; color: var(--text, #222); }
.di-pause-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.di-pause-form-error {
  background: #ffe9e9;
  border: 1px solid #f5a3a3;
  color: #7a1a1a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
}

/* Inline pause-knapp i topp-stripens actions-row (nere till vänster) */
.di-pause-btn-inline {
  padding: 4px 10px;
  border: 1px solid #d39e00;
  background: #fff8e6;
  color: #6b4500;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
}
.di-pause-btn-inline:hover { background: #fde9a3; }

/* ── Berättelsen (Deal Story / L4) ──────────────────────────────────────── */
.di-story-root { font-size: 15px; line-height: 1.55; }
.di-story-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.di-story-meta { color: #5a6470; font-size: 13px; }
.di-story-section { margin: 0 0 24px 0; }
.di-story-section h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 600;
  color: #1a2330;
}
.di-story-chips { margin: 0 0 6px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.di-story-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: #eef1f5;
  color: #4a5568;
  font-size: 11px;
  text-decoration: none;
}
.di-story-chip:hover { background: #dde2ea; }
.di-story-body p { margin: 0 0 10px 0; }
.di-story-body ul { margin: 6px 0 10px 22px; padding: 0; }
.di-story-body li { margin: 2px 0; }
.di-story-evidence h3 { font-size: 14px; color: #5a6470; }
.di-story-evlist {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  color: #3a4250;
}
.di-story-evlist li { margin: 6px 0; }
.di-story-evsrc { color: #6b7280; font-size: 12px; font-weight: 500; }
.di-story-empty {
  padding: 32px 16px;
  text-align: center;
  color: #5a6470;
  border: 1px dashed #d1d6dd;
  border-radius: 8px;
}
.di-story-empty p { margin: 0 0 14px 0; }
.di-story-empty .di-btn,
.di-story-header .di-btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #c97a3a;
  background: linear-gradient(180deg, #ffb98a 0%, #f59765 100%);
  color: #3a2410;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(60, 30, 10, 0.12);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.di-story-empty .di-btn:hover,
.di-story-header .di-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 4px rgba(60, 30, 10, 0.18);
}
.di-story-empty .di-btn:active,
.di-story-header .di-btn:active { filter: brightness(0.95); }
.di-story-empty .di-btn:disabled,
.di-story-header .di-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  filter: none;
}

/* ── Kundlöften (commitments section) ─────────────────────────────────────── */
.di-commitments-loading,
.di-commitments-empty {
  padding: 18px 16px;
  color: #6b7280;
  font-size: 14px;
}
.di-commitments-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.di-commitments-group-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.di-commitments-group-title--we   { color: #1d5096; }
.di-commitments-group-title--they { color: #6b3fa0; }
.di-commitment-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
}
.di-commitment-item--closed {
  opacity: 0.5;
}
.di-commitment-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.di-commitment-claim {
  font-size: 14px;
  font-weight: 500;
  color: #1a2033;
  flex: 1;
}
.di-commitment-due {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.di-commitment-due--asap  { background: #fee2e2; color: #b91c1c; }
.di-commitment-due--days  { background: #fef3c7; color: #92400e; }
.di-commitment-due--weeks { background: #e0f2fe; color: #0369a1; }
.di-commitment-due--date  { background: #ede9fe; color: #5b21b6; }
.di-commitment-quote {
  font-size: 12px;
  color: #4b5563;
  font-style: italic;
  margin: 4px 0 8px 0;
  padding-left: 10px;
  border-left: 2px solid #d1d5db;
}
.di-commitment-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.di-commitment-source {
  font-size: 11px;
  color: #9ca3af;
  flex: 1;
}
.di-commitment-closed-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.di-commitment-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: filter 0.12s ease;
}
.di-commitment-btn:hover { filter: brightness(0.92); }
.di-commitment-btn--done    { background: #dcfce7; color: #166534; border-color: #86efac; }
.di-commitment-btn--dismiss { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }

/* ── Goal Letter ─────────────────────────────────────────────────── */
.di-gl-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.di-gl-controls label { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.di-gl-controls select {
  flex: 1; min-width: 200px; max-width: 420px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-size: 13px; font-family: var(--font); padding: 6px 10px;
}
.di-gl-controls select:focus { outline: none; border-color: var(--accent); }
.di-gl-subject-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.di-gl-subject-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.di-gl-subject-text { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }
.di-gl-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0;
}
.di-gl-profile-link {
  font-size: 12px; color: var(--accent); text-decoration: none;
  margin-left: auto;
}
.di-gl-profile-link:hover { text-decoration: underline; }
.di-gl-gaps {
  padding: 10px 14px; margin: 14px 0;
  background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.35);
  border-radius: 7px; font-size: 12px; color: #b45309;
}
.di-gl-gaps ul { margin: 6px 0 0 16px; }
.di-gl-gaps li { margin-bottom: 3px; }

/* ── Metrics Opportunity Hunter ──────────────────────────────────── */
.di-metrics-opp-card {
  margin-top: 16px;
  border: 1px solid var(--border, #2e3350);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface, #181c2e);
}
.di-metrics-opp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.di-metrics-opp-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #8890b4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1;
}
.di-metrics-opp-empty {
  font-size: 12px;
  color: var(--muted, #8890b4);
  font-style: italic;
  padding: 4px 0;
}
.di-metrics-opp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.di-metric-opp {
  border: 1px solid var(--border, #2e3350);
  border-radius: 7px;
  padding: 10px 12px;
  background: var(--surface2, #1f2440);
}
.di-metric-opp-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.di-metric-opp-claim {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8eaf6);
  line-height: 1.4;
}
.di-metric-opp-source-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(79, 126, 248, 0.12);
  color: var(--accent, #4f7ef8);
  border: 1px solid rgba(79, 126, 248, 0.3);
  white-space: nowrap;
}
.di-metric-opp-question {
  font-size: 12px;
  color: var(--text, #e8eaf6);
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.5;
  padding-left: 10px;
  border-left: 3px solid var(--accent, #4f7ef8);
}
.di-metric-opp-calc {
  font-size: 12px;
  color: var(--muted, #8890b4);
  background: var(--surface, #181c2e);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
  line-height: 1.55;
}
.di-metric-opp-calc p { margin: 0 0 6px; }
.di-metric-opp-calc p:last-child { margin-bottom: 0; }
.di-metric-opp-calc ul { margin: 4px 0 6px 16px; padding: 0; }
.di-metric-opp-calc li { margin-bottom: 3px; }
.di-metric-opp-calc strong { color: var(--text, #e8eaf6); font-weight: 600; }
.di-metric-opp-value {
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
  margin-bottom: 8px;
}
.di-metric-opp-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.di-metric-opp-confidence {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #8890b4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.di-metric-opp-dismiss {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, #2e3350);
  background: transparent;
  color: var(--muted, #8890b4);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s;
}
.di-metric-opp-dismiss:hover { border-color: #f87171; color: #f87171; }
.di-metric-opp-dismiss:disabled { opacity: 0.5; cursor: wait; }