/* Rendite Rolf: Reiter und Fenster (Phase 6a). Farben aus brand.css / mobile.css. */
.portfolio-mobile #tabs.with-rolf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.portfolio-mobile #tabs .rolf-tab { color: #D4A84B; }
.portfolio-mobile #tabs .rolf-tab svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px #D4A84B66); }

.ios-design .rolf-sheet { display: none; height: 92svh; max-height: 92svh; padding: 0; overflow: hidden; }
.ios-design .rolf-sheet[open] { display: flex; flex-direction: column; }
/* Mac: Seitenleiste rechts über volle Höhe, die Seite daneben bleibt bedienbar. */
.rolf-panel { position: fixed; z-index: 1000; inset: 0 0 0 auto; width: min(440px, 100vw); height: 100vh; max-height: none;
  margin: 0; padding: 0; border: 0; border-left: 1px solid #1E3357; background: #0A1428; color: #fff; overflow: hidden;
  box-shadow: -18px 0 48px #0009; font-size: 15px; }
.rolf-panel:not([open]) { display: none; }
.rolf-panel[open] { display: flex; flex-direction: column; animation: rolf-slide .22s ease-out; }
@keyframes rolf-slide { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rolf-panel[open] { animation: none; } }
.rolf-panel button { font: inherit; cursor: pointer; }
.rolf-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 8px 0; }
.rolf-head b { display: flex; align-items: center; gap: 6px; font-size: 17px; color: #fff; }
.rolf-head b svg { width: 18px; height: 18px; color: #D4A84B; }
.rolf-link { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: #D4A84B; font-size: 16px; }
.rolf-head .rolf-link:first-child { justify-self: start; }
.rolf-head .rolf-head-end { justify-self: end; display: flex; align-items: center; }
.rolf-head .rolf-end { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 6px; }
.rolf-head .rolf-end svg { width: 24px; height: 24px; }

/* Der Kreis schneidet nur das Video zu; der Lautsprecher sitzt ganz sichtbar auf dem Rand. */
.rolf-stage { position: relative; align-self: center; flex: none; width: 124px; height: 124px; margin: 4px 0 2px; }
.rolf-stage video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  background: #0A1428; box-shadow: 0 0 0 1px #1E3357, 0 6px 24px #0008; }
.portfolio-mobile .rolf-mute, .rolf-mute { position: absolute; right: -16px; bottom: 6px; width: 38px; height: 38px; min-width: 0; min-height: 0; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #D4A84B; background: #0F1B33;
  color: #F5DFA0; box-shadow: 0 2px 10px #0009; }
.rolf-mute::before { content: ''; position: absolute; inset: -4px; }   /* 46 px Tippfläche */
.rolf-mute svg { width: 20px; height: 20px; }
.rolf-mute.off { border-color: #5A6B8C; color: #94A6C8; }
.rolf-privacy { flex: none; margin: 4px 12px 6px; text-align: center; font-size: 11.5px; color: #94A6C8; }

.rolf-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px;
  display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.rolf-msg { max-width: 88%; padding: 10px 13px; border-radius: 18px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.rolf-msg.rolf-rolf { align-self: flex-start; background: #15263F; color: #fff; border-bottom-left-radius: 6px; }
.rolf-msg.rolf-user { align-self: flex-end; background: #D4A84B; color: #0A1428; border-bottom-right-radius: 6px; }
.rolf-note { align-self: flex-start; font-size: 13px; color: #94A6C8; }
.rolf-note.rolf-status::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: rolf-dots 1.2s steps(4) infinite; }
.rolf-note.rolf-warning { align-self: stretch; padding: 10px 12px; border-radius: 12px; background: #3A2A0E; color: #F5DFA0; }
.rolf-note.rolf-error { align-self: stretch; padding: 10px 12px; border-radius: 12px; background: #3A1712; color: #FFB4A8; }
@keyframes rolf-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.rolf-hints { display: flex; flex-direction: column; gap: 8px; }
.rolf-hint { padding: 12px; border-radius: 14px; background: #15263F; border-left: 3px solid #94A6C8; }
.rolf-hint.rolf-warnung { border-left-color: #E5544E; }
.rolf-hint.rolf-hinweis { border-left-color: #D4A84B; }
.rolf-hint p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; color: #fff; }
.rolf-disclaimer { align-self: center; font-size: 11px; color: #5A6B8C; }

.rolf-examples h3 { margin: 6px 0 4px; font-size: 17px; color: #fff; }
.rolf-examples h4, .rolf-card h4 { margin: 12px 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #94A6C8; }
.rolf-examples section > div, .rolf-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.rolf-chip { min-height: 36px; padding: 7px 12px; border: 1px solid #2E4163; border-radius: 18px; background: #0F1B33;
  color: #F5DFA0; font-size: 14px; text-align: left; line-height: 1.25; }
.rolf-chip:active { background: #1E3357; }

.rolf-card { padding: 14px; border-radius: 16px; background: #0F1B33; border: 1px solid #1E3357; }
.rolf-card h3 { margin: 0; font-size: 16px; color: #fff; }
.rolf-sub { margin: 4px 0 0; font-size: 13px; color: #94A6C8; line-height: 1.35; }
.rolf-big { margin: 10px 0 2px; font-size: 26px; font-weight: 700; color: #fff; }
.rolf-asof { display: block; margin-top: 10px; font-size: 11px; color: #5A6B8C; }
.rolf-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rolf-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 13px; color: #E9EEF9; }
.rolf-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolf-bar i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #A88239, #E8C76B); }
.rolf-rows { display: flex; flex-direction: column; margin-top: 8px; }
.rolf-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid #1E3357; font-size: 13px; color: #94A6C8; }
.rolf-row:last-child { border-bottom: 0; }
.rolf-row > b { color: #fff; font-size: 14px; font-weight: 600; }
.rolf-list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.4; color: #E9EEF9; }
.rolf-list li { margin-bottom: 4px; }
.rolf-list .rolf-warnung::marker { color: #E5544E; }
.rolf-list .rolf-hinweis::marker, .rolf-list.rolf-hinweis li::marker { color: #D4A84B; }
.rolf-problem { margin: 8px 0 0; font-size: 14px; color: #FFB4A8; }
.rolf-fields { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0 0; font-size: 14px; }
.rolf-fields > div { display: contents; }
.rolf-fields dt { color: #94A6C8; }
.rolf-fields dd { margin: 0; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.rolf-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.rolf-actions button, .rolf-all { min-height: 44px; padding: 0 18px; }
.rolf-all { width: 100%; margin-top: 10px; }
.rolf-card[data-type="booking_draft"] { border-color: #A88239; }

.rolf-input { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid #1E3357; background: #0A1428; }
.rolf-input textarea { flex: 1; min-height: 42px; max-height: 120px; padding: 10px 14px; border: 1px solid #2E4163; border-radius: 21px;
  background: #0F1B33; color: #fff; font: 16px/1.35 -apple-system, sans-serif; resize: none; }
.rolf-input button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #D4A84B; color: #0A1428; font-size: 18px; }
.rolf-input button:disabled { opacity: .45; }

@media (prefers-reduced-motion: reduce) { .rolf-note.rolf-status::after { animation: none; content: "…"; } }
.rolf-actions [data-act="confirm"] { background: linear-gradient(180deg, #E8C76B, #D4A84B); border-color: #D4A84B; color: #0A1428; font-weight: 700; }
.rolf-actions [data-act="discard"], .rolf-actions [data-act="undo"] { background: transparent; border: 1px solid #2E4163; color: #F5DFA0; }
.rolf-input .rolf-mic { background: transparent; border: 1px solid #2E4163; color: #F5DFA0; display: flex; align-items: center; justify-content: center; }
.rolf-input .rolf-mic svg { width: 22px; height: 22px; }
.rolf-input .rolf-mic.on { background: #E5544E; border-color: #E5544E; color: #fff; animation: rolf-listen 1.4s ease-in-out infinite; }
@keyframes rolf-listen { 0%, 100% { box-shadow: 0 0 0 0 #E5544E66; } 50% { box-shadow: 0 0 0 8px #E5544E00; } }
.rolf-input .rolf-mic.wait { border-color: #D4A84B; animation: rolf-wait 1s ease-in-out infinite; }
@keyframes rolf-wait { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .rolf-input .rolf-mic.on, .rolf-input .rolf-mic.wait { animation: none; } }

/* Ausblenden: kleiner Rolf über der Tab-Leiste, solange ein Gespräch läuft. */
.rolf-head .rolf-hide { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
.rolf-head .rolf-hide svg { width: 28px; height: 28px; }
.rolf-mini { position: fixed; z-index: 61; right: max(14px, env(safe-area-inset-right)); bottom: calc(80px + env(safe-area-inset-bottom));
  width: 50px; height: 50px; padding: 0; border: 2px solid #D4A84B; border-radius: 50%; background: #0A1428;
  box-shadow: 0 6px 20px #000a, 0 0 0 1px #0A1428; overflow: visible; }
.rolf-mini[hidden] { display: none; }
.rolf-mini.rolf-launch { z-index: 999; right: 24px; bottom: 24px; width: 60px; height: 60px; cursor: pointer;
  transition: transform .15s ease; }
.rolf-mini.rolf-launch:hover { transform: scale(1.06); }
.rolf-mini.rolf-launch:focus-visible { outline: 2px solid #F5DFA0; outline-offset: 3px; }
.rolf-mini { display: flex; align-items: center; justify-content: center; color: #D4A84B; border-color: #D4A84B8C; border-width: 1px; }
.rolf-mini svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px #D4A84B8C); }
.rolf-mini.rolf-launch svg { width: 30px; height: 30px; }
.rolf-mini[hidden] { display: none; }
/* Gespräch läuft im Hintergrund: leichtes gelbes Pulsieren von Stern und Rolf-Tab. */
.rolf-mini.waiting { animation: rolf-wait-glow 2s ease-in-out infinite; }
.rolf-mini.waiting svg, .portfolio-mobile #tabs .rolf-tab.waiting svg { animation: rolf-wait-star 2s ease-in-out infinite; }
@keyframes rolf-wait-glow { 0%, 100% { box-shadow: 0 6px 20px #000a, 0 0 0 0 #F5C84266; } 50% { box-shadow: 0 6px 20px #000a, 0 0 0 9px #F5C84200, 0 0 18px 4px #F5C8427a; } }
@keyframes rolf-wait-star { 0%, 100% { color: #D4A84B; filter: drop-shadow(0 0 6px #D4A84B8C); } 50% { color: #F8D96A; filter: drop-shadow(0 0 12px #F5C842); } }
@media (prefers-reduced-motion: reduce) { .rolf-mini.waiting, .rolf-mini.waiting svg, .portfolio-mobile #tabs .rolf-tab.waiting svg { animation: none; }
  .rolf-mini.waiting { box-shadow: 0 6px 20px #000a, 0 0 14px 3px #F5C8427a; } }
.rolf-mini.busy::before { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(#D4A84B 0 25%, transparent 25% 100%); animation: rolf-spin 1s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.rolf-mini.unread::after, .portfolio-mobile #tabs .rolf-tab.unread::after { content: ""; position: absolute; width: 12px; height: 12px;
  border-radius: 50%; background: #E5544E; border: 2px solid #0A1428; }
.rolf-mini.unread::after { top: -2px; right: -2px; }
.portfolio-mobile #tabs .rolf-tab { position: relative; }
.portfolio-mobile #tabs .rolf-tab.unread::after { top: 2px; left: calc(50% + 8px); width: 10px; height: 10px; }
@keyframes rolf-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .rolf-mini.busy::before { animation: none; background: conic-gradient(#D4A84B 0 100%); } }

.rolf-dictate-hint { flex: none; margin: 0; padding: 8px 16px; text-align: center; font-size: 13px; color: #F5DFA0; background: #0A1428; border-top: 1px solid #1E3357; }

/* Rolf denkt nach: blinkender Stern unten im Verlauf, bis die Antwort kommt. */
.rolf-thinking { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 14px; color: #94A6C8; }
.rolf-thinking svg { flex: none; width: 20px; height: 20px; color: #D4A84B; animation: rolf-twinkle 1.3s ease-in-out infinite; }
@keyframes rolf-twinkle { 0%, 100% { opacity: .35; transform: scale(.78) rotate(0deg); filter: none; }
  50% { opacity: 1; transform: scale(1.08) rotate(45deg); filter: drop-shadow(0 0 6px #D4A84Baa); } }
@media (prefers-reduced-motion: reduce) { .rolf-thinking svg { animation: rolf-blink 1.6s steps(2) infinite; }
  @keyframes rolf-blink { 50% { opacity: .35; } } }

/* Wertpapier-Karte */
.rolf-spans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.rolf-spans div { padding: 6px 8px; border-radius: 10px; background: #15263F; display: flex; flex-direction: column; gap: 2px; }
.rolf-spans small { font-size: 11px; color: #94A6C8; }
.rolf-spans b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.rolf-holding { margin: 12px 0 0; padding: 8px 10px; border-radius: 10px; background: #15263F; font-size: 13px; color: #E9EEF9; }
.rolf-summary { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; }

/* Umschichtung: Vorher/Nachher je Kategorie, Gesamtbild, Bewegungen */
.rolf-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #1E3357; color: #F5DFA0; font-size: 12px; }
.rolf-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 2px; font-size: 12px; color: #94A6C8; }
.rolf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rolf-legend i.before { background: #3B4C6B; } .rolf-legend i.after { background: #D4A84B; }
.rolf-pair { display: grid; grid-template-columns: 64px minmax(0, 1fr) 78px; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; color: #E9EEF9; }
.rolf-pair > div { position: relative; height: 16px; }
.rolf-pair > div i { position: absolute; left: 0; height: 6px; border-radius: 3px; }
.rolf-pair > div i:first-child { top: 0; background: #3B4C6B; } .rolf-pair > div i:last-child { top: 9px; background: #D4A84B; }
.rolf-pair em { font-style: normal; text-align: right; color: #94A6C8; font-variant-numeric: tabular-nums; } .rolf-pair em b { color: #fff; }
.rolf-stack { display: flex; height: 20px; margin: 3px 0 8px; border-radius: 6px; overflow: hidden; background: #15263F; }
.rolf-stack i { display: block; height: 100%; }
.rolf-moves > div { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #1E3357; font-size: 13px; }
.rolf-moves span { font-weight: 700; } .rolf-moves .in span { color: #3DDC97; } .rolf-moves .out span { color: #E5544E; }
.rolf-moves b { color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolf-moves b small { padding: 0 6px; border-radius: 8px; background: #1E3357; color: #F5DFA0; font-size: 11px; }
.rolf-moves em { font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.rolf-actions [data-act="rebalance"] { background: transparent; border: 1px solid #A88239; color: #F5DFA0; }

/* Auswahl bei mehreren Treffern: Art und ISIN klein darunter, damit Acc./Dis. unterscheidbar sind. */
.rolf-choices .rolf-chip small { display: block; margin-top: 2px; font-size: 12px; color: #94A6C8; }

/* Chart-Karte: Zeitraum-Umschalter, Linien, Legende. */
.rolf-ranges { display: flex; gap: 6px; margin: 4px 0 8px; }
.rolf-ranges .rolf-range { flex: 1; min-height: 34px; padding: 0; border: 1px solid #2E4163; border-radius: 10px; background: #0F1B33; color: #94A6C8; font-size: 13px; font-weight: 600; }
.portfolio-mobile .rolf-ranges .rolf-range { min-height: 34px; }
.rolf-ranges .rolf-range.on { background: #D4A84B; border-color: #D4A84B; color: #0A1428; }
.rolf-ranges .rolf-range:disabled { opacity: .35; }
.rolf-chart { display: block; width: 100%; height: auto; margin: 2px 0 8px; }
.rolf-chart text { fill: #94A6C8; font-size: 9.5px; }
.rolf-chart .grid { stroke: #1E3357; stroke-width: 1; }
.rolf-chart .zero { stroke: #5A6B8C; stroke-width: 1; stroke-dasharray: 3 3; }
.rolf-legend { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #1E3357; }
.rolf-legend > i { width: 10px; height: 10px; border-radius: 50%; }
.rolf-legend span { display: flex; flex-direction: column; min-width: 0; }
.rolf-legend span b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolf-legend small { color: #94A6C8; font-size: 12px; }

/* Senden während der Aufnahme: Nachricht steht sofort im Verlauf, bis der Text erkannt ist. */
.rolf-msg.rolf-pending { display: inline-flex; align-items: center; gap: 8px; opacity: .85; animation: rolf-wait 1s ease-in-out infinite; }
.rolf-msg.rolf-pending svg { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: reduce) { .rolf-msg.rolf-pending { animation: none; } }

.rolf-diverging { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; padding: 5px 0; }
.rolf-diverging > span { font-variant-numeric: tabular-nums; }
.rolf-diverging > i, .rolf-diverging > small { grid-column: 1 / -1; }
.rolf-diverging > i { position: relative; height: 7px; background: #ffffff17; border-radius: 6px; overflow: hidden; }
.rolf-diverging > i::before { content: ''; position: absolute; left: 50%; inset-block: 0; border-left: 1px solid #ffffff80; }
.rolf-diverging em { position: absolute; inset-block: 0; }
.rolf-diverging em.positive { left: 50%; background: #62c9a4; }
.rolf-diverging em.negative { right: 50%; background: #ee8d88; }
.rolf-sources { padding-inline-start: 20px; }
.rolf-sources a { color: inherit; text-decoration: underline; }