/* ---------------------------------------------------
   Dark‑Mode UI Framework – v2  (rewritten 2025‑06‑13)
   Elegant, material‑inspired design system for the
   calendar + chat dashboard.
   --------------------------------------------------- */

/***************
 * CSS CUSTOM PROPERTIES
 ***************/
:root {
  /* Brand HSL palette allows lightweight tint/shade tweaks */
  --h-brand: 216;
  --s-brand: 91%;
  --l-brand: 59%;

  --primary: hsl(var(--h-brand) var(--s-brand) var(--l-brand));        /*  #3b82f6  */
  --primary-hover: hsl(var(--h-brand) var(--s-brand) calc(var(--l-brand) + 6%));
  --primary-muted: hsl(var(--h-brand) var(--s-brand) 32%);

  --secondary: #10b981;
  --accent:    #f59e0b;
  --error:     #ef4444;
  --success:   #22c55e;
  --warning:   #f59e0b;

  /* Greyscale – tuned for OLED dark UI */
  --bg-primary:  #0d1117;
  --bg-secondary:#161b22;
  --bg-tertiary: #1f2937;
  --bg-surface:  #242e3c;
  --bg-card:     #1b222d;
  --bg-elevated: #222b39;

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;

  --border:       rgba(148,163,184,.12);
  --border-light: rgba(148,163,184,.18);

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.32);
  --shadow:    0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.45);
  --shadow-xl: 0 14px 48px rgba(0,0,0,.5);

  /* Radii */
  --radius:     .75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.25rem;
  --radius-full:9999px;

  /* Layout */
  --sidebar-width:     280px;
  --sidebar-collapsed:  72px;

  /* Motion */
  --timing: cubic-bezier(.4,0,.2,1);
  --transition:       all .3s var(--timing);
  --transition-fast:  all .15s var(--timing);
}

body.light-mode {
  --bg-primary:  #f9fafb;
  --bg-secondary:#f3f4f6;
  --bg-tertiary: #e5e7eb;
  --bg-surface:  #e5e7eb;
  --bg-card:     #ffffff;
  --bg-elevated: #f3f4f6;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #64748b;

  --border:       rgba(100,116,139,.2);
  --border-light: rgba(100,116,139,.3);
}

/***************
 * RESET & BASELINE
 ***************/
*,::before,::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  font-size:clamp(.875rem,.9vw + .65rem,1rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}

/***************
 * LAYOUT: DASHBOARD & SIDEBAR
 ***************/
.dashboard{
  display:flex;
  min-height:100dvh;
  background:var(--bg-primary);
}
.sidebar{
  width:var(--sidebar-width);
  background:var(--bg-card);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:width .25s var(--timing);
  box-shadow:var(--shadow);
  position:relative;z-index:10;
}
.sidebar.collapsed{width:var(--sidebar-collapsed)}

/* sidebar header */
.sidebar-header{
  display:flex;align-items:center;gap:.875rem;
  padding:1rem 1.25rem;min-height:72px;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
}
.logo{
  width:40px;height:40px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  display:grid;place-items:center;
  font-weight:600;color:#fff;font-size:1rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--timing);
}
.logo:hover{transform:scale(1.05)}
.brand-text{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.sidebar.collapsed .brand-text{display:none}

/* navigation */
.nav-menu{flex:1;overflow-y:auto;padding:.75rem 0}
.nav-item{margin:.25rem .75rem}
.nav-link{
  position:relative;display:flex;align-items:center;gap:.875rem;
  padding:.75rem 1rem;border-radius:var(--radius);
  color:var(--text-secondary);font-weight:500;
  transition:var(--transition-fast);
}
.nav-link::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--bg-elevated);opacity:0;transition:opacity .2s var(--timing);
}
.nav-item:hover .nav-link{color:var(--text-primary);transform:translateX(3px)}
.nav-item:hover .nav-link::before{opacity:1}
.nav-item.active .nav-link{
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;box-shadow:var(--shadow-sm);
}
.nav-icon{width:20px;height:20px;display:grid;place-items:center}
.sidebar.collapsed .nav-text{display:none}

/***************
 * LAYOUT: MAIN CONTENT
 ***************/
.main-content{flex:1;min-width:0;display:flex;flex-direction:column}
.content-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.5rem;min-height:72px;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.content-title{font-size:1.25rem;font-weight:700;letter-spacing:-.015em}

.content-body{flex:1;overflow:auto;padding:1.25rem;background:var(--bg-primary)}
.view{display:none;animation:fade .3s ease-out}@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view.active{display:block}

/***************
 * COMPONENT: BUTTONS
 ***************/
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;
  font-weight:600;font-size:.875rem;border-radius:var(--radius);
  white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
  transition:var(--transition-fast);
}
.btn::before{content:"";position:absolute;inset:0;--grad-stop:rgba(255,255,255,.12);
  background:linear-gradient(110deg,transparent, var(--grad-stop) 40%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s var(--timing);
}
.btn:hover::before{transform:translateX(100%)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-light)}
.btn-secondary:hover{background:var(--bg-surface);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-danger{background:linear-gradient(135deg,var(--error),#dc2626);color:#fff}
.btn-danger:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/***************
 * CALENDAR LAYOUT
 ***************/
.calendar-container{display:grid;grid-template-columns:1fr clamp(280px,25vw,340px);gap:1.25rem;height:calc(100dvh - 144px)}

.calendar-main{display:flex;flex-direction:column;gap:1.25rem}
.calendar-header{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-card);padding:1rem 1.25rem;
  border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.calendar-nav{display:flex;align-items:center;gap:.75rem}

.calendar-grid-container{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:1rem 1.25rem;flex:1;box-shadow:var(--shadow);
}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border-light);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.calendar-day-header{background:var(--bg-elevated);padding:.75rem 0;text-align:center;font-weight:700;font-size:.75rem;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.1em}

.calendar-day{background:var(--bg-secondary);min-height:96px;padding:.75rem;cursor:pointer;position:relative;border:2px solid transparent;transition:var(--transition-fast)}
.calendar-day:hover{background:var(--bg-elevated);transform:scale(1.02);z-index:2;box-shadow:var(--shadow-lg)}
.calendar-day.today{background:var(--bg-tertiary);border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.calendar-day.other-month{opacity:.45}
.day-number{font-weight:700;margin-bottom:.5rem;font-size:.875rem}

.event-item{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;padding:.25rem .5rem;border-radius:6px;font-size:.75rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition-fast)}
.event-item:hover{transform:scale(1.05);box-shadow:var(--shadow)}
.event-item.assignment{background:linear-gradient(135deg,var(--warning),#f59e0b)}
.event-item.exam{background:linear-gradient(135deg,var(--error),#dc2626)}
.event-item.class{background:linear-gradient(135deg,var(--secondary),#059669)}

/* sidebar (add‑event + upcoming) */
.calendar-sidebar{display:flex;flex-direction:column;gap:1.25rem}
.add-event-form,.upcoming-events{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1rem 1.25rem;box-shadow:var(--shadow)}
.form-title{font-size:1.125rem;font-weight:700;margin-bottom:1rem}
.form-group{margin-bottom:1rem}
.form-label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-secondary);font-size:.875rem}
.form-input{width:100%;padding:.65rem .75rem;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--bg-elevated);color:var(--text-primary);font-size:.875rem;transition:var(--transition-fast)}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.18);background:var(--bg-tertiary)}

.upcoming-events{flex:1}
.event-list-item{padding:.875rem;border-radius:var(--radius);background:var(--bg-elevated);margin-bottom:.75rem;border-left:4px solid var(--primary);display:flex;justify-content:space-between;align-items:center;transition:var(--transition-fast)}
.event-list-item:hover{transform:translateX(4px);box-shadow:var(--shadow);background:var(--bg-surface)}
.event-list-item.assignment{border-left-color:var(--warning)}
.event-list-item.exam{border-left-color:var(--error)}
.event-list-item.class{border-left-color:var(--secondary)}
.event-list-item.planner{border-left-color:var(--accent)}
.event-title{font-weight:600;font-size:.9rem;color:var(--text-primary)}
.event-meta{font-size:.75rem;color:var(--text-muted);font-weight:500}

/***************
 * PROFESSIONAL CHAT MODULE
 ***************/

/* Chat Container */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 144px);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    backdrop-filter: blur(16px);
    margin-inline: auto;
}

.chat-header {
    padding: 1.5rem 2rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.chat-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.chat-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

/* Messages Area */
.chat-messages {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: flex-end;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Modern Chat Input Container */
.chat-input-container {
    padding: 2rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    position: relative;
}

.chat-input-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.chat-input-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.input-field {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.chat-input:focus  { outline: none; box-shadow: none; }

.input-field:focus-within {
    border-color: var(--primary-muted);          /* softer colour */
    box-shadow: 0 0 0 2px rgba(59,130,246,.25);  /* gentle glow */
}

/* Modern Textarea */
.chat-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 24px;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-input::-webkit-scrollbar {
    display: none;
}

.chat-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Input Actions Container */
.input-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    flex-shrink: 0;
}

/* Character Count */
.char-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* Modern Send Button */
.send-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #fff;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.send-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    border-radius: var(--radius-full);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.send-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.send-button:hover::before {
    opacity: 1;
}

.send-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
}

.send-button:disabled {
    background: var(--border-light);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.send-button:disabled::before {
    display: none;
}

/* Send Icon */
.send-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    transition: transform 0.2s ease;
}

.send-button:hover .send-icon {
    transform: translateX(1px) translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .chat-input-container {
        padding: 1rem;
    }
    .input-field {
        padding: 10px 16px;
        border-radius: 20px;
    }
    .send-button {
        width: 40px;
        height: 40px;
    }
    .send-icon {
        width: 18px;
        height: 18px;
    }
    .char-count {
        display: none;
    }
}

/* Focus and Animation States */
@keyframes sendPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.send-button.sending {
    animation: sendPulse 0.6s ease-in-out;
    pointer-events: none;
}

/* Auto-resize textarea functionality */
.chat-input[data-auto-resize] {
    transition: height 0.1s ease;
}

/* Professional message bubbles */
.message {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    animation: slideIn 0.3s ease-out;
}

.message            { max-width: 70%; }      /* was 85% */
@media (max-width: 768px) {
  .message          { max-width: 85%; }      /* keep breathing room on narrow screens */
}

.message.user {
    align-self: flex-end;
}

.message.system {
    align-self: flex-start;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    align-self: flex-end;
}

.message.system .message-time {
    align-self: flex-start;
}

.message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.45;
    word-wrap: break-word;
    white-space: pre-wrap;
    position: relative;
    font-weight: 400;
}

.message.user .message-bubble {
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.25);
}

.message.system .message-bubble {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message.thinking .message-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    animation: pulse 1s ease-in-out infinite;
}

.typing-dots {
    display: inline-flex;
    gap: 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typing 1.2s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.reasoning-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s var(--timing);
}

.reasoning-toggle:hover {
    color: var(--text-primary);
}

.reasoning-toggle .chevron {
    transition: transform 0.2s var(--timing);
}

.reasoning-toggle.open .chevron {
    transform: rotate(180deg);
}

.reasoning-text {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    font-size: 0.85rem;
    white-space: pre-wrap;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.reasoning-text.show {
    max-height: 500px;
    opacity: 1;
}

/* Smooth animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/***************
 * SETTINGS PANEL (placeholder)
 ***************/
.settings-container{max-width:820px;margin-inline:auto}
.settings-section{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.settings-title{font-size:1.125rem;font-weight:700;margin-bottom:1rem}
.setting-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid var(--border)}
.setting-item:last-child{border-bottom:none}
.setting-item:hover{padding-left:.5rem}
.setting-name{font-weight:600;font-size:1rem}
.setting-description{font-size:.875rem;color:var(--text-muted)}

/* toggle switch */
.toggle{position:relative;width:48px;height:28px;background:var(--bg-surface);border-radius:var(--radius-full);cursor:pointer;transition:var(--transition);border:2px solid var(--border)}
.toggle.active{background:linear-gradient(135deg,var(--primary),var(--primary-hover));border-color:var(--primary)}
.toggle-handle{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:var(--radius-full);transition:var(--transition);box-shadow:var(--shadow-sm)}
.toggle.active .toggle-handle{transform:translateX(20px)}

/***************
 * MODAL
 ***************/
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.8);z-index:1000}
.modal.active{display:grid;animation:modal-fade .3s ease-out}@keyframes modal-fade{from{opacity:0}to{opacity:1}}
.modal-content{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1.5rem 1.75rem;max-width:500px;width:92%;max-height:90%;overflow-y:auto;box-shadow:var(--shadow-xl);animation:modal-slide .3s ease-out}@keyframes modal-slide{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.modal-title{font-size:1.25rem;font-weight:700}.modal-close{padding:.5rem;border-radius:var(--radius);color:var(--text-muted);transition:var(--transition-fast)}.modal-close:hover{color:var(--text-primary);background:var(--bg-elevated)}
.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}

/* toast notifications */
#notifications{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.75rem;z-index:1100}
.notification-toast{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-light);padding:.75rem 1rem;border-radius:var(--radius);box-shadow:var(--shadow);animation:slideIn .3s ease-out}

/***************
 * RESPONSIVE BREAKPOINTS
 ***************/
@media(max-width:1024px){.calendar-container{grid-template-columns:1fr}.calendar-sidebar{order:-1}}
@media(max-width:768px){.sidebar{position:fixed;top:0;left:-280px;height:100dvh;z-index:200;transition:left .3s var(--timing)}.sidebar.open{left:0}.main-content{width:100%}.content-header{padding:1rem}.content-body{padding:1rem}.calendar-day{min-height:68px}.btn-mobile-menu{display:inline-flex}}
@media(min-width:769px){.btn-mobile-menu{display:none}}
@media(max-width:480px){.calendar-grid{font-size:.78rem}.event-item{padding:.125rem .25rem;font-size:.65rem}.calendar-day{min-height:56px;padding:.375rem}}

/***************
 * DAILY PLANNER
 ***************/
.planner-container{display:grid;grid-template-columns:400px 1fr;gap:1.25rem;height:calc(100dvh - 144px)}
.planner-chat-container{display:flex;flex-direction:column;background:rgba(17,24,39,.7);backdrop-filter:blur(12px);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.planner-sidebar{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1rem;gap:1rem;box-shadow:var(--shadow)}
.planner-controls{display:flex;align-items:center;gap:.5rem}
.planner-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}
.planner-item{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius);padding:.5rem .75rem;display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(6px);animation:plannerFade .3s ease-out forwards}
.planner-item .planner-time{font-size:.75rem;color:var(--text-muted)}
.planner-item .planner-title{font-weight:600}
.planner-item .delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.25rem;line-height:1;transition:color .15s var(--timing)}
.planner-item .delete-btn:hover{color:var(--error)}
.planner-edit{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius);padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
@keyframes plannerFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:600px){
  .planner-container{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .planner-chat-container{max-height:50vh;border-bottom:1px solid var(--border);border-right:none}
}

/*** WIKI ***/
.wiki-container{display:grid;grid-template-columns:240px 1fr;gap:1.25rem;height:calc(100dvh - 144px)}
.wiki-nav{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow);overflow-y:auto}
.wiki-nav input{margin-bottom:.75rem}
.wiki-nav a{display:block;padding:.5rem .25rem;border-radius:var(--radius);color:var(--text-primary);text-decoration:none;font-weight:500}
.wiki-nav a:hover{background:var(--bg-elevated)}
.wiki-content{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1rem 1.25rem;overflow-y:auto;box-shadow:var(--shadow);min-width:0}
.wiki-content pre{background:var(--bg-elevated);padding:.75rem;border-radius:var(--radius);overflow-x:auto}
.wiki-content .faq-question{font-size:1.25rem;margin:1rem 0 .5rem;font-weight:600}

@media(max-width:768px){
  .wiki-container{grid-template-columns:1fr}
  .wiki-nav{position:fixed;top:72px;left:-240px;width:240px;height:calc(100dvh - 72px);margin-bottom:0;box-shadow:var(--shadow-lg);transition:left .3s var(--timing);z-index:150}
  .wiki-nav.open{left:0}
}


/***************
 * ACCESSIBILITY & MISC.
 ***************/
:focus-visible{outline:2px dashed var(--primary)}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Custom Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}
::-webkit-scrollbar-thumb{background:var(--bg-surface);border-radius:4px;transition:var(--transition-fast)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

.fab{position:fixed;bottom:80px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);z-index:150;transition:var(--transition-fast)}
.fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.modal.fullscreen .modal-content{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}