/* cashly-notes.css — replace whole file */
:root{
  --ai-btn-size-sm: 56px;
  --ai-btn-size-lg: 70px;

  --notes-btn-size-sm: 40px;
  --notes-btn-size-lg: 47px;

  --notes-icon-size-sm: 20px;
  --notes-icon-size-lg: 25px;

  /* dynamic gap range */
  --notes-btn-gap-min: 8;   /* smallest gap on narrow screens */
  --notes-btn-gap-max: 20;  /* largest gap on wide screens */
  /* optional explicit mobile override (if present JS will prefer) */
  --notes-btn-gap-mobile: 8;

  --notes-btn-left-fallback: 94px;

  --ai-panel-z: 100000;
  --ai-btn-z: 100000;
  --notes-btn-z: 150000;
  --notes-panel-z: 200500;

  --bg: #000614;
  --white: #ffffff;
  --accent: #0A00FF;
  --muted: rgba(255,255,255,0.6);
  --panel-bg: rgba(255,255,255,0.03);
}

.cashly-notes-floating-btn {
  position: relative;   /* WICHTIG */
  left: auto;
  bottom: auto;

  width: var(--notes-btn-size-sm);
  height: var(--notes-btn-size-sm);
  min-width: var(--notes-btn-size-sm);
  min-height: var(--notes-btn-size-sm);
  max-width: var(--notes-btn-size-sm);
  max-height: var(--notes-btn-size-sm);

  padding: 0;
  box-sizing: border-box;

  z-index: var(--notes-btn-z);
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, var(--accent), #3a3cff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  transition: transform .15s ease;
}

.cashly-notes-floating-btn:hover { transform: scale(1.06); }
.cashly-notes-floating-btn:active { transform: scale(.96); }

.cashly-notes-floating-btn .pen-icon svg {
  width: var(--notes-icon-size-sm);
  height: var(--notes-icon-size-sm);
  color: #fff;
  display: block;
}

@media (min-width:721px){
  .cashly-notes-floating-btn {
    width: var(--notes-btn-size-lg);
    height: var(--notes-btn-size-lg);
    min-width: var(--notes-btn-size-lg);
    min-height: var(--notes-btn-size-lg);
    max-width: var(--notes-btn-size-lg);
    max-height: var(--notes-btn-size-lg);
  }
  .cashly-notes-floating-btn .pen-icon svg {
    width: var(--notes-icon-size-lg);
    height: var(--notes-icon-size-lg);
  }
}

/* panel */
.cashly-notes-panel {
  position: fixed;
  left: 14px;
  bottom: 84px;
  z-index: var(--notes-panel-z);
  width: 420px;
  max-width: 92vw;
  height: 72vh;
  max-height: 780px;
  background: var(--bg);
  color: var(--white);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing: border-box;
}
.cashly-notes-panel.open { transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }

.cashly-notes-panel.fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: calc(var(--notes-panel-z) + 1000) !important;
}

/* header + rest unchanged (kept minimal) */
.cn-header{ display:flex; gap:12px; align-items:center; padding:12px; border-bottom:1px solid rgba(255,255,255,0.03); }
.cn-title{ font-weight:700; font-size:1rem; }
.cn-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.cn-actions button{ width:20px; height:20px; padding:0; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(10,0,255,0.12); transition: transform .08s ease, filter .12s ease; }
.cn-actions button:hover{ transform: translateY(-1px); filter: brightness(.98); }
.cn-fullscreen::before { content: "⤢"; font-size:12px; line-height:1; display:inline-block; }
.cn-close::before { content: "\00D7"; font-size:13px; line-height:1; display:inline-block; }
.cn-body{ padding:12px; display:grid; grid-template-columns: 140px 1fr; gap:12px; flex:1; min-height:0; box-sizing:border-box; }
.cn-list{ background:var(--panel-bg); border-radius:8px; padding:8px; overflow:auto; box-sizing:border-box; }
.cn-item{ padding:8px; border-radius:6px; cursor:pointer; color:var(--muted); margin-bottom:8px; display:flex; flex-direction:column; gap:6px; }
.cn-item.active{ background: linear-gradient(90deg,var(--accent),#3a3cff); color:#fff; font-weight:700; }
.cn-item.cn-new{ background: rgba(255,255,255,0.04); color:#fff; font-weight:700; padding:10px; text-align:center; cursor:pointer; }
.cn-editor{ display:flex; flex-direction:column; height:100%; min-height:0; box-sizing:border-box; }
.cn-item-meta{
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}
#cn-title{ width:100%; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:#07142a; color:#fff; margin-bottom:8px; box-sizing:border-box; }
#cn-content{ flex:1; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:#060611; color:#fff; resize:none; min-height:120px; overflow:auto; white-space:pre-wrap; box-sizing:border-box; }
.cn-editor-actions{ display:flex; gap:8px; margin-top:8px; }
.cn-editor-actions button{ padding:8px 12px; border-radius:8px; border:none; background:var(--accent); color:#fff; cursor:pointer; font-weight:700; }
.cn-editor-actions .danger{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white); }
.cn-empty{ color:var(--muted); padding:8px; }

@media (max-width:720px){
  .cashly-notes-panel{ left: 14px !important; right: 14px !important; width: calc(100% - 28px); height: 76vh; bottom: 84px; }
  .cn-body{ grid-template-columns: 1fr; }
  .cn-list{ order:2; height:220px; }
  .cn-editor{ order:1; }
}
@media (min-width: 721px) {
  .cashly-notes-panel {
    width: 480px;       /* optional – wenn gleiche Breite */
    height: 75vh;       /* optional – wenn gleiche Höhe */

    bottom: 20px;
    left: 20px;
  }
  
  
/* Wrapper */
.cashly-inline-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
}

/* Label Text */
.cashly-toggle-label {
  cursor: pointer;
}

/* Switch Container */
.cashly-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}

/* Hide Default Checkbox */
.cashly-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider Background */
.cashly-slider {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  border-radius: 50px;
  transition: 0.25s ease;
  cursor: pointer;
}

/* Circle */
.cashly-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background-color: #2A00FF;
  border-radius: 50%;
  transition: 0.25s ease;
}

/* ACTIVE STATE */
.cashly-switch input:checked + .cashly-slider {
  background-color: #2A00FF;
}

.cashly-switch input:checked + .cashly-slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
}