/* =========================================================
   PRIL – SPRING MODE "SAKURA FRESH"
   Helles Sakura-Rosa + frisches Mint
   Aktiv bei: html.spring oder body.spring
   ========================================================= */

html.spring,
body.spring{

  --bg: #fff6fa;          /* ganz helles Kirschblüten-Rosa */
  --panel: #ffffff;       /* klar & frisch */
  --panel2: #ffeef5;      /* soft rosa Sekundärfläche */

  --border: #f3cfe0;      /* zartes Blütenrosa */
  --border2: #f7dbe8;

  --text: #2a2a2a;        /* neutral dunkel */
  --muted: #8b8b95;
  --row-hover:#ffeef5;
  --accent: #ff6fa5;      /* Sakura Pink */
  --accent2: #4fd1c5;     /* frisches Mint */
}

/* ================= BASE ================= */

html.spring body,
body.spring{
  background:
    radial-gradient(circle at 20% 20%, #ffe9f2 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, #e8fffa 0%, transparent 45%),
    var(--bg) !important;

  color: var(--text) !important;
}

/* ================= NAVBAR ================= */

html.spring .navbar,
body.spring .navbar{
  background: rgba(255,111,165,.82) !important;  /* leicht transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 6px 18px rgba(255,111,165,.10);
}

/* ================= CARDS ================= */

html.spring .card,
html.spring .panel,
html.spring .box,
html.spring .project-card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 10px 24px rgba(255,111,165,.08),
    0 2px 6px rgba(0,0,0,.04) !important;
  transition:.2s;
}

html.spring .project-card:hover{
  border-color: var(--accent);
  box-shadow:
    0 12px 30px rgba(255,111,165,.15);
}

/* ================= BUTTONS ================= */

html.spring .btn,
html.spring button{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  transition:.2s;
}

html.spring .btn:hover{
  border-color: var(--accent);
  background: #fff0f6 !important;
}

/* Primärbutton leicht pink */
html.spring .btn-primary{
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #ffffff !important;
}

html.spring .btn-primary:hover{
  background: #ff4d94 !important;
}

/* ================= INPUTS ================= */

html.spring input,
html.spring select,
html.spring textarea{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

html.spring input:focus,
html.spring select:focus,
html.spring textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,111,165,.15);
  outline:none;
}

/* ================= TABLES ================= */

html.spring table{
  background: var(--panel) !important;
}

html.spring th{
  background: #fff0f6 !important;
  font-weight: 800;
  border-color: var(--border2) !important;
}

html.spring tbody tr:nth-child(even) td{
  background: #fff9fc !important;
}

/* ================= BADGES ================= */

html.spring .badge,
html.spring .pill{
  background: #fff0f6 !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
  font-weight:800;
}

/* ================= SCROLLBARS ================= */

html.spring ::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    var(--accent),
    var(--accent2)
  );
  border-radius:10px;
}

/* ================= STATUS COLORS leicht softer ================= */

html.spring .status-1{ color:#ff6fa5 !important; }
html.spring .status-2{ color:#4fd1c5 !important; }
html.spring .status-3{ color:#f6ad55 !important; }
html.spring .status-4{ color:#68d391 !important; }
html.spring .status-5{ color:#f687b3 !important; }
html.spring .status-6{ color:#63b3ed !important; }
html.spring .status-7{ color:#fbd38d !important; }
html.spring .status-8{ color:#81e6d9 !important; }
html.spring .status-9{ color:#fc8181 !important; }
html.spring .status-10{ color:#a0aec0 !important; }


/* ================= SAKURA PARTICLES (CANVAS) ================= */
html.spring #sakuraCanvas,
body.spring #sakuraCanvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:0;
  opacity:1.2;
}

/* alles andere bleibt darüber */
html.spring body > *,
body.spring > *{
  position:relative;
  z-index:1;
}

/* ================= SPRING ACTION BUTTON ================= */

html.spring .action-btn{

background:linear-gradient(145deg,#ffffff,#ffeef5);
border:1px solid var(--border);

box-shadow:
0 0 18px rgba(255,111,165,.18),
0 4px 10px rgba(0,0,0,.05);
}

/* HOVER = IDENTISCH FÜR ALLE */
html.spring .action-btn:hover{

border-color:var(--accent);

box-shadow:
0 0 25px rgba(255,111,165,.45),
0 0 35px rgba(79,209,197,.25);

transform:scale(1.08);
}

/* BADGE */
html.spring .action-btn .badge{
background:linear-gradient(145deg,var(--accent),var(--accent2));
color:#fff;
box-shadow:0 0 10px rgba(255,111,165,.4);
}


/* ================= NOTIFICATIONS ================= */

html.spring .notif-item{
background: linear-gradient(145deg,#ffffff,#fff0f6);
border:1px solid var(--border);
border-radius:10px;
padding:12px 14px;
margin-bottom:10px;
cursor:pointer;
transition:.2s;
position:relative;
overflow:hidden;
}

/* subtle glow layer */
html.spring .notif-item::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,rgba(255,111,165,.12),rgba(79,209,197,.12));
opacity:0;
transition:.25s;
}

html.spring .notif-item:hover{
border-color:var(--accent);
box-shadow:0 8px 22px rgba(255,111,165,.18);
transform:translateY(-2px);
}

html.spring .notif-item:hover::before{
opacity:1;
}

/* Titel */
html.spring .notif-item strong{
color:var(--accent);
font-weight:900;
}

/* Text */
html.spring .notif-item div{
color:var(--text);
font-weight:600;
}

/* Meta (z.B. "Von:") */
html.spring .notif-item small{
color:var(--muted);
}

/* ================= BADGE (oben rechts / Bot) ================= */

html.spring .bot-badge,
html.spring #chatBadge,
html.spring .msg-badge{

background:linear-gradient(145deg,var(--accent),var(--accent2));
color:#fff;
border:none;
box-shadow:0 0 10px rgba(255,111,165,.4);
}

/* POP Animation softer */
html.spring .bot-badge.pop{
animation:springPop .4s ease;
}

@keyframes springPop{
0%{transform:scale(0.7);opacity:.5;}
60%{transform:scale(1.2);}
100%{transform:scale(1);}
}

/* ================= NOTIFICATION MODAL ================= */

html.spring #notificationModal .modal-content{
background:linear-gradient(145deg,#ffffff,#ffeef5);
border:1px solid var(--border);
box-shadow:
0 20px 50px rgba(255,111,165,.15);
}

/* ================= ICON (BOT / BELL) ================= */

html.spring .pril-bot{
background:linear-gradient(145deg,#ffffff,#ffeef5);
border:1px solid var(--border);
box-shadow:0 0 20px rgba(255,111,165,.2);
}

html.spring .pril-bot:hover{
border-color:var(--accent);
box-shadow:0 0 25px rgba(255,111,165,.45);
}


/* ================= KI BUTTON (SPRING) ================= */

html.spring #ollamaToggle{

background:linear-gradient(145deg,#ffffff,#ffeef5) !important;
border:1px solid var(--border) !important;

box-shadow:
0 0 18px rgba(255,111,165,.18),
0 4px 10px rgba(0,0,0,.05);

transition:.25s;
}

/* Hover */
html.spring #ollamaToggle:hover{

border-color:var(--accent);

box-shadow:
0 0 25px rgba(255,111,165,.45),
0 0 35px rgba(79,209,197,.25);

transform:scale(1.08);
}

/* Label */
html.spring .ollama-label{
color:var(--text);
}

/* Status Dot */
html.spring .ollama-dot{
background:var(--accent2);
box-shadow:0 0 10px rgba(79,209,197,.8);
}

/* LIVE DOT stärker */
html.spring .ollama-dot.live{
background:var(--accent2);
box-shadow:0 0 14px rgba(79,209,197,1);
}

/* ================= KI WIDGET ================= */

html.spring #ollamaWidget{

background:#fff;
background:linear-gradient(180deg,#ffffff,#fff4f8);
border:1px solid var(--border);

box-shadow:
0 20px 50px rgba(255,111,165,.18);
}

/* Header */
html.spring .ollama-header{
background:rgba(255,111,165,.85);
color:#fff;
border-bottom:1px solid var(--border);
}

/* AI Bubble */
html.spring .ollama-bubble.ai{
background:#fff0f6;
color:var(--text);
border:1px solid var(--border);
}

/* User Bubble */
html.spring .ollama-bubble.me{
background:var(--accent);
color:#fff;
}

/* Input */
html.spring .ollama-inputbar{
background:#fff;
border-top:1px solid var(--border);
}

html.spring .ollama-inputbar textarea{
background:#fff;
color:var(--text);
border:1px solid var(--border);
}


/* ================= CHAT (SPRING) ================= */

html.spring #chatWidget{

background:linear-gradient(145deg,#ffffff,#ffeef5);
border:1px solid var(--border);

box-shadow:
0 20px 50px rgba(255,111,165,.18);
}

/* HEADER */
html.spring .chat-header{
background:rgba(255,111,165,.85);
color:#fff;
border-bottom:1px solid var(--border);
}

/* USER LIST */
html.spring #chatUserSearch{
background:#fff;
color:var(--text);
border-bottom:1px solid var(--border);
}

html.spring .chat-users{
border-bottom:1px solid var(--border);
}

html.spring .chat-user{
color:var(--text);
}

html.spring .chat-user:hover{
background:#fff0f6;
}

html.spring .chat-user.active{
background:#ffe4f0;
}

/* STATUS DOT */
html.spring .chat-status.online{
background:var(--accent2);
box-shadow:0 0 6px var(--accent2);
}

html.spring .chat-status.away{
background:#f6ad55;
}

/* MESSAGES */
html.spring .chat-messages{
background:#fff;
}

/* BUBBLES */
html.spring .chat-bubble.me{
background:var(--accent);
color:#fff;
}

html.spring .chat-bubble.other{
background:#fff0f6;
color:var(--text);
border:1px solid var(--border);
}

/* TAIL */
html.spring .chat-bubble.me::after{
border-color:transparent transparent transparent var(--accent);
}

html.spring .chat-bubble.other::after{
border-color:transparent #fff0f6 transparent transparent;
}

/* TIME */
html.spring .chat-time{
color:var(--muted);
}

/* INPUT BAR */
html.spring .chat-inputbar{
background:#fff;
border-top:1px solid var(--border);
}

html.spring .chat-inputbar textarea{
background:#fff;
color:var(--text);
border:1px solid var(--border);
}

/* BUTTONS (emoji etc.) */
html.spring .chat-btn{
background:#fff0f6;
border:1px solid var(--border);
}

html.spring .chat-btn:hover{
background:#ffe4f0;
border-color:var(--accent);
}

/* EMOJI PANEL */
html.spring .emoji-panel{
background:#fff;
border:1px solid var(--border);
}

/* UNREAD USER */
html.spring .chat-user.new-msg{
background:#fff0f6;
border-left:3px solid var(--accent);
}

/* TYPING */
html.spring .typing-bubble{
background:#fff0f6;
border:1px solid var(--border);
}

html.spring .typing-dot{
background:var(--accent);
}