/* Floating Dashboard Button */ 

.dashboard-fab {
  position: fixed;
  bottom: 100px;
  right: 18px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgb(0, 0, 0);
  color: #fff;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  z-index: 900;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
  opacity: 0;
}

.dashboard-fab.visible {
  display: flex;
  opacity: 1;
}

.dashboard-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.dashboard-fab:active {
  transform: translateY(0);
}

/* Modal Overlay */

.finance-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.finance-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Modal Box  */

.finance-modal {
  background: #00000078;
  border: none;
  border-radius: 20px;
  width: min(680px, 95vw);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.finance-modal-overlay.active .finance-modal {
  transform: translateY(0);
}

/* scrollbar */
.finance-modal::-webkit-scrollbar { width: 4px; }
.finance-modal::-webkit-scrollbar-track { background: transparent; }
.finance-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* Header  */

.finance-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: flex;  /*sticky*/
  top: 0;
  background: #9f9f9f00;
  z-index: 1;
}

.finance-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.finance-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.6);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.finance-modal-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Body */

.finance-modal-body {
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Summary Cards  */

.finance-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .finance-cards { grid-template-columns: 1fr; }
}

/*
.finance-card {
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
} */

.finance-card.income {
  border-radius: 42px;
  padding: 14px 20px;   /*padding früher bei allen 16px 18px*/
  background: rgba(0, 0, 0, 0);
  border: 3px outset rgba(255, 255, 255, 0.07);
  color: white;
}


.finance-card.expenses {
  border-radius: 42px;
  padding: 14px 20px; 
  background: none;
  border: 3px outset rgba(255, 255, 255, 0.07);
  color: white;
}

.finance-card.savings {
  border-radius: 42px;
  padding: 14px 20px; 
  background: none;
  border: 3px outset rgba(255, 255, 255, 0);
  color: white;
}

.finance-card.savings.negative {
  border-radius: 42px;
  padding: 14px 20px; 
  background: rgba(255, 253, 253, 0);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: white;
}


.finance-card.income  { border-color: rgba(44, 144, 149, 0.279); }
.finance-card.expenses { border-color: rgba(136, 49, 49, 0.68); }
.finance-card.savings { border-color: rgba(57, 138, 75, 0.61); }
.finance-card.savings.negative { border-color: rgba(196, 13, 13, 0.927); } 

.finance-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 254, 254, 0.735);
  margin-bottom: 6px;
}

.finance-card-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.finance-card.income .finance-card-value  { color: rgba(255, 255, 255, 0.797); }    /*früher blau, (leichteas)rot, grün und rot(dunkles)*/
.finance-card.expenses .finance-card-value { color: rgba(255, 255, 255, 0.893); }
.finance-card.savings .finance-card-value { color: #ffffff; }
.finance-card.savings.negative .finance-card-value { color: rgba(255, 255, 255, 0.927); }

.finance-card-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}

/* Sections  */

.finance-section h3 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(233, 233, 233);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* Chart Section  */

.chart-section .chart-container {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.donut-svg {
  flex-shrink: 0;
}

.donut-center-label {
  font-size: 10px;
  fill: rgba(255, 255, 255, 0.4);
  font-family: inherit;
}

.donut-center-value {
  font-size: 13px;
  font-weight: 700;
  fill: #fff;
  font-family: inherit;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 140px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(248, 248, 248, 0.75);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-amt {
  margin-left: auto;
  font-weight: 600;
  color: #ffffff;
  font-size: 12px;
}

/* Expense Table  */

.expense-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.expense-table th {
  text-align: left;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.expense-table td {
  padding: 9px 10px;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.expense-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.expense-bar-track {
  display: inline-block;
  width: 80px;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  vertical-align: middle;
  margin-right: 6px;
}

.expense-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
}

.expense-pct {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

/* Savings Meter  */

.savings-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}

.savings-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.7s ease;
}

.savings-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.savings-labels > span:first-child {
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}

/* Hint  */

.finance-hint {
  background: rgb(0, 0, 0);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: rgb(255, 255, 255);
  line-height: 1.5;
}

.md-content {
  line-height: 1.65;
  font-size: 15px;
}
 
.md-content .md-p {
  margin: 0 0 10px;
}
 
.md-content .md-p:last-child {
  margin-bottom: 0;
}
 
.md-content .md-h1,
.md-content .md-h2,
.md-content .md-h3 {
  font-weight: 700;
  margin: 14px 0 6px;
  line-height: 1.3;
}
 
.md-content .md-h1 { font-size: 18px; }
.md-content .md-h2 { font-size: 16px; }
.md-content .md-h3 { font-size: 15px; color: rgba(255,255,255,0.85); }
 
.md-content .md-list {
  margin: 6px 0 10px 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
 
.md-content .md-list li {
  line-height: 1.5;
}
 
.md-content strong {
  font-weight: 700;
  color: #fff;
}
 
.md-content em {
  font-style: italic;
  color: rgba(255,255,255,0.8);
}
 
/* Nutzer-Bubble: Markdown nur minimal */
.msg.user .md-content strong { color: #111; }
.msg.user .md-content { color: #111; }
 
/* Inline Finance Chart im Chat */
 
.finance-inline-chart {
  margin-top: 14px;
  padding: 14px;
  background: rgba(157, 155, 155, 0.395);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: ficSlideIn 0.4s ease;
}
 
@keyframes ficSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
/* Summary Cards */
.fic-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
 
.fic-card {
  flex: 1;
  min-width: 80px;
  padding: 3px 6px;  /*10px 12px*/
  border-radius: 15px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
 
.fic-card.fic-income  { border-color: rgba(69, 225, 252, 0.765); }
.fic-card.fic-expenses { border-color: rgba(248,113,113,0.35); }
.fic-card.fic-savings { border-color: rgba(74,222,128,0.35); }
.fic-card.fic-savings.neg { border-color: rgba(248,113,113,0.4); }
 
.fic-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.4);
}
 
.fic-val {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
 
.fic-card.fic-income .fic-val   { color: #818cf8; }
.fic-card.fic-expenses .fic-val { color: #f87171; }
.fic-card.fic-savings .fic-val  { color: #4ade80; }
.fic-card.fic-savings.neg .fic-val { color: #f87171; }
 
.fic-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
 
/* Chart Row */
.fic-chart-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
 
.fic-donut { flex-shrink: 0; }
 
.fic-donut-label {
  font-size: 9px;
  fill: rgba(255,255,255,0.35);
  font-family: inherit;
}
 
.fic-donut-val {
  font-size: 12px;
  font-weight: 700;
  fill: #fff;
  font-family: inherit;
}
 
/* Legend */
.fic-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 120px;
}
 
.fic-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
 
.fic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
 
.fic-legend-amt {
  margin-left: auto;
  font-weight: 600;
  color: #fff;
  font-size: 11px;
}
 
/* Savings Bar */
.fic-savings-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
 
.fic-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
 
.fic-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
}
 
.fic-savings-tip {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
 
/* Dashboard Open Button */
.fic-open-btn {
  width: 100%;
  padding: 8px 12px;
  background: rgb(255, 0, 0);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-align: center;
}
 
.fic-open-btn:hover {
  background: rgba(99,102,241,0.25);
  transform: translateY(-1px);
}
 
/* Typing cursor */
.typing-cursor {
  animation: blink 0.8s infinite;
  opacity: 1;
}
 
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}