/* ==========================================================================
   Header & Main Navigation Layout (Material Design 3 Top App Bar)
   ========================================================================== */

header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 24px;
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(24px, env(safe-area-inset-left, 0px));
  padding-right:max(24px, env(safe-area-inset-right, 0px));
  height:calc(64px + env(safe-area-inset-top, 0px));
  box-sizing:border-box;
  background:var(--md-sys-color-surface-container);
  border-bottom:1px solid var(--md-sys-color-outline-variant);
  box-shadow:var(--md-sys-elevation-level1);
  z-index:50;
  -webkit-app-region:drag;
  app-region:drag;
  transition:background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-spring-effects),
              border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-spring-effects);
}

/* Ensure interactive elements in header are non-draggable in desktop PWA standalone mode */
header button,
header a,
header input,
header select,
.modes,
.view-toggle,
.settings-btn,
.pwa-install-btn {
  -webkit-app-region:no-drag;
  app-region:no-drag;
}

@media (display-mode: window-controls-overlay) {
  header {
    padding-left: max(24px, env(titlebar-area-x, 0px));
    padding-right: max(24px, calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px)));
    height: max(64px, env(titlebar-area-height, 64px));
  }
}

.logo{
  font:var(--md-sys-typescale-title-large);
  color:var(--md-sys-color-on-surface);
  letter-spacing:-.3px;
  display:inline-flex;
  align-items:center;
}

.header-divider{
  width:1px;
  height:24px;
  background:var(--md-sys-color-outline-variant);
  flex-shrink:0;
  margin:0 4px;
}

:root {
  --mode-dot-idle: var(--md-sys-color-on-surface-variant);
  --mode-dot-active: var(--md-sys-color-primary);
  --mode-dot-glow: var(--accent-glow);
}

/* M3 Flexible Navigation Bar (Contained Secondary Container Pill) */
.modes{
  position:relative;
  display:flex;
  gap:4px;
  align-items:center;
  background:var(--md-sys-color-surface-container-low);
  padding:4px;
  border-radius:var(--md-sys-shape-corner-full);
  border:1px solid var(--md-sys-color-outline-variant);
  box-sizing:border-box;
}

/* Sliding active indicator for lateral displacement */
.modes-indicator{
  position:absolute;
  top:4px;
  left:0;
  height:calc(100% - 8px);
  background:var(--md-sys-color-secondary-container);
  border-radius:var(--md-sys-shape-corner-full);
  box-shadow:var(--md-sys-elevation-level1);
  pointer-events:none;
  z-index:1;
  transition:transform 240ms cubic-bezier(0.2, 0, 0, 1),
              width 240ms cubic-bezier(0.2, 0, 0, 1),
              opacity var(--md-sys-motion-duration-short2) ease;
  will-change:transform, width;
  opacity:0;
}

.mode-btn{
  background:none;
  color:var(--md-sys-color-on-surface-variant);
  border:0;
  padding:0 16px;
  height:40px;
  cursor:pointer;
  font:var(--md-sys-typescale-label-large);
  font-weight:600;
  border-radius:var(--md-sys-shape-corner-full);
  transition:color var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  user-select:none;
  text-decoration:none;
}
.mode-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  transition:transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.mode-btn:hover .mode-icon{
  transform:scale(1.08);
}
.mode-btn:hover:not(.active){
  background:rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
  color:var(--md-sys-color-on-surface);
}
.mode-btn.active{
  color:var(--md-sys-color-on-secondary-container);
  font:var(--md-sys-typescale-label-large);
  font-weight:600;
  background:transparent !important;
  box-shadow:none !important;
}
.mode-btn.active .mode-icon{
  transform:scale(1.12);
}
.mode-btn:active{
  transform:scale(0.97);
}

.mode-label{
  display:inline-block;
  line-height:1.2;
}

.mode-busy-dots{
  position:absolute;
  bottom:3px;
  left:50%;
  transform:translateX(-50%) translateY(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3.5px;
  height:4px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s var(--md-sys-motion-spring-effects), transform .2s var(--md-sys-motion-spring-fast), visibility .2s;
}

.mode-btn.busy .mode-busy-dots{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.mode-busy-dots .mode-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background-color:var(--md-sys-color-primary);
  opacity:0.6;
  transform:scale(0.9);
  display:inline-block;
  flex-shrink:0;
}

.mode-btn.busy .mode-busy-dots .mode-dot{
  animation:modeDotPulse 1.2s infinite ease-in-out;
}

.mode-btn.busy .mode-busy-dots .mode-dot:nth-child(1){
  animation-delay:0s;
}

.mode-btn.busy .mode-busy-dots .mode-dot:nth-child(2){
  animation-delay:0.2s;
}

.mode-btn.busy .mode-busy-dots .mode-dot:nth-child(3){
  animation-delay:0.4s;
}

@keyframes modeDotPulse{
  0%, 80%, 100%{
    transform:scale(0.9);
    background-color:var(--md-sys-color-on-surface-variant);
    opacity:0.55;
    box-shadow:none;
  }
  40%{
    transform:scale(1.45);
    background-color:var(--md-sys-color-primary);
    opacity:1;
    box-shadow:0 0 6px var(--accent-glow);
  }
}

/* Header Actions Group (Right Aligned M3 Container) */
.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  -webkit-app-region:no-drag;
  app-region:no-drag;
  flex-shrink:0;
}

/* M3 Segmented Button */
.view-toggle{
  display:flex;
  gap:2px;
  align-items:center;
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-full);
  padding:2px;
  opacity:1;
  transform:scale(1) translateY(0);
  transition:opacity .25s var(--md-sys-motion-spring-effects), transform .25s var(--md-sys-motion-spring-fast);
  will-change:opacity, transform;
}
.view-toggle.hidden{
  display:none !important;
  opacity:0;
  pointer-events:none;
  transform:scale(.85) translateY(-2px);
}

.view-btn{
  background:none;
  color:var(--md-sys-color-on-surface-variant);
  border:0;
  width:32px;
  height:32px;
  cursor:pointer;
  font:inherit;
  border-radius:var(--md-sys-shape-corner-full);
  transition:all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.view-btn:hover{
  background:rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
  color:var(--md-sys-color-on-surface);
}
.view-btn.active{
  background:var(--md-sys-color-secondary-container);
  color:var(--md-sys-color-on-secondary-container);
  box-shadow:var(--md-sys-elevation-level1);
}

/* M3 Standard & Tonal Icon Buttons */
.settings-btn, .theme-toggle, .help-btn{
  position:relative;
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  color:var(--md-sys-color-on-surface-variant);
  width:40px;
  height:40px;
  border-radius:var(--md-sys-shape-corner-full);
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  transition:all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast);
  flex-shrink:0;
}
.settings-btn svg, .theme-toggle svg, .help-btn svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.settings-btn::after, .theme-toggle::after, .help-btn::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  min-width:48px;
  min-height:48px;
  width:100%;
  height:100%;
}
.settings-btn:hover, .theme-toggle:hover, .help-btn:hover{
  background:var(--md-sys-color-surface-container-high);
  color:var(--md-sys-color-on-surface);
  border-color:var(--md-sys-color-outline);
  transform:scale(1.05);
  box-shadow:var(--md-sys-elevation-level1);
}
.settings-btn:active, .theme-toggle:active, .help-btn:active{
  transform:scale(0.95);
}

/* ==========================================================================
   In-App Notification Toasts (M3 Expressive Dynamic Capsule)
   ========================================================================== */

.notification-container{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
  width:auto;
  max-width:90vw;
}

.notification-toast{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 20px;
  background:var(--md-sys-color-inverse-surface);
  color:var(--md-sys-color-inverse-on-surface);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-full);
  font:var(--md-sys-typescale-body-medium);
  box-shadow:var(--md-sys-elevation-level3);
  animation:toastIn 0.28s var(--md-sys-motion-spring-fast);
  transition:opacity 0.22s var(--md-sys-motion-spring-effects), transform 0.22s var(--md-sys-motion-spring-fast);
  cursor:pointer;
  user-select:none;
}

.notification-toast.toast-out{
  opacity:0;
  transform:translateY(-12px) scale(0.95);
}

@keyframes toastIn{
  from{
    opacity:0;
    transform:translateY(-16px) scale(0.92);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.toast-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.toast-icon.info{
  color:var(--md-sys-color-inverse-primary);
}
.toast-icon.success{
  color:#4ade80;
}
.toast-icon.warning{
  color:#fcd34d;
}
.toast-icon.error{
  color:#f87171;
}

.toast-text-wrap{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.toast-title{
  font:var(--md-sys-typescale-label-small-emphasized);
  text-transform:uppercase;
  letter-spacing:0.5px;
  opacity:0.85;
}
.toast-message{
  font:var(--md-sys-typescale-body-medium);
}

main{
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  margin:0;
  padding:0;
  min-height:0;
  overflow:hidden;
  position:relative;
}

/* M3 Elevated Token Banner */
.token-banner{
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  padding:16px 20px;
  border-radius:var(--md-sys-shape-corner-large-increased);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:calc(100% - 40px);
  max-width:840px;
  margin:0 auto 16px auto;
  box-sizing:border-box;
  box-shadow:var(--md-sys-elevation-level1);
}
.token-banner-icon{
  width:40px;
  height:40px;
  border-radius:var(--md-sys-shape-corner-medium);
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--md-sys-color-primary);
  flex-shrink:0;
}
.token-banner-content{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.token-banner-title{
  font:var(--md-sys-typescale-title-small-emphasized);
  color:var(--md-sys-color-on-surface);
}
.token-banner-desc{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.token-banner-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.token-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.token-input-icon{
  position:absolute;
  left:12px;
  color:var(--md-sys-color-on-surface-variant);
  pointer-events:none;
}
.token-banner-controls input{
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-small);
  padding:8px 14px 8px 34px;
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface);
  width:230px;
  outline:none;
  transition:border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
}
.token-banner-controls input:focus{
  border-color:var(--md-sys-color-primary);
  box-shadow:0 0 0 2px var(--accent-subtle);
}
.token-banner-btn{
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  border:none;
  border-radius:var(--md-sys-shape-corner-full);
  padding:8px 16px;
  font:var(--md-sys-typescale-label-large-emphasized);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast),
              opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
  white-space:nowrap;
  box-shadow:var(--md-sys-elevation-level1);
}
.token-banner-btn:hover{
  opacity:.92;
  transform:scale(1.03);
}
.token-banner-btn:active{
  transform:scale(0.97);
}
@media (max-width: 720px){
  .token-banner{
    flex-direction:column;
    align-items:flex-start;
  }
  .token-banner-controls{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .token-banner-controls input{
    width:100%;
    box-sizing:border-box;
  }
  .token-banner-btn{
    justify-content:center;
  }
}

.panels-slider{
  position:relative;
  flex:1;
  display:flex;
  width:100%;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.panels-slider::-webkit-scrollbar{
  display:none;
}

.panel{
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  max-width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
  height:100%;
  min-height:0;
  contain:layout;
  position:relative;
  overflow:hidden;
}

.panel-inner{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  max-width:840px;
  height:100%;
  min-height:0;
  padding:20px 20px 16px;
  box-sizing:border-box;
}

#panel-notes .panel-inner{
  max-width:840px;
}

#panel-infos .panel-inner{
  max-width:100%;
}

@media (min-width: 1200px){
  #panel-notes.supporting-pane-open .panel-inner{
    max-width:1280px;
  }
  #panel-infos .panel-inner{
    max-width:1440px;
    padding:24px 32px 16px;
  }
}

#panel-notes .panel-inner,
#panel-chat .panel-inner{
  padding-bottom:84px;
}
#panel-infos .panel-inner{
  padding-bottom:16px;
}

/* Shared Bottom Composer Bar */
.shared-composer-wrap{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:840px;
  margin:0;
  padding:0 20px 24px;
  padding-bottom:max(24px, env(safe-area-inset-bottom, 24px));
  box-sizing:border-box;
  z-index:10;
  opacity:1;
  pointer-events:auto;
  will-change:transform, opacity;
  transition:none;
}
.shared-composer-wrap.hidden{
  opacity:0;
  pointer-events:none;
  display:none;
}
.composer-mode-panel{
  display:none;
  width:100%;
}
.composer-mode-panel.active{
  display:block;
}

/* ==========================================================================
   PWA & Local AI Engine Header Controls (M3 Assist Chips & Menus)
   ========================================================================== */

.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font: var(--md-sys-typescale-label-large);
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
  height: 40px;
}
.pwa-install-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.pwa-install-btn:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-level1);
}
.pwa-install-btn:active {
  transform: scale(0.96);
}

.ai-engine-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ai-engine-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font: var(--md-sys-typescale-label-large);
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  height: 40px;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast);
}
.ai-engine-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ai-engine-btn:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-level1);
}
.ai-engine-btn:active {
  transform: scale(0.96);
}

.ai-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
}
.ai-status-indicator.loading {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
  animation: pulseAi 1.5s infinite;
}
.ai-status-indicator.offline {
  background: var(--md-sys-color-on-surface-variant);
  box-shadow: none;
}

@keyframes pulseAi {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* M3 Elevated Menu */
.ai-engine-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 8px;
  box-shadow: var(--md-sys-elevation-level3);
  z-index: 1000;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-dropdown-header {
  font: var(--md-sys-typescale-label-small-emphasized);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--md-sys-color-on-surface-variant);
  padding: 6px 10px 6px;
}

.ai-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
  text-align: left;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
  box-sizing: border-box;
}
.ai-dropdown-item:hover {
  background: rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
}
.ai-dropdown-item.active {
  background: var(--md-sys-color-secondary-container);
  border-left: 3px solid var(--md-sys-color-primary);
}
.ai-dropdown-item.active .ai-item-name {
  color: var(--md-sys-color-on-secondary-container);
}
.ai-dropdown-item.active .ai-item-desc {
  color: var(--md-sys-color-on-secondary-container);
  opacity: 0.85;
}

.ai-item-name {
  font: var(--md-sys-typescale-title-small-emphasized);
  color: var(--md-sys-color-on-surface);
}
.ai-item-desc {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
  line-height: 1.3;
}

.ai-engine-progress {
  padding: 8px 10px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin-top: 4px;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}
.ai-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  margin-bottom: 6px;
}
.ai-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width .2s ease;
}

/* ==========================================================================
   Zero-Leakage Authentication Gate (Apple HIG & Defense-in-Depth)
   ========================================================================== */

html:not(.authenticated) body:not(.authenticated) #appShell {
  display: none !important;
}

html.authenticated #authGate,
body.authenticated #authGate {
  display: none !important;
}

html.authenticated #appShell,
body.authenticated #appShell {
  display: flex !important;
}

.app-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background-color: var(--bg, #0d1117);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(249, 115, 22, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(var(--accent-rgb), 0.06) 0%, transparent 45%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.auth-gate-card {
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  box-sizing: border-box;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-level4);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: 36px 32px;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  animation: authFadeIn 0.35s var(--md-sys-motion-spring-default);
}

@keyframes authFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.auth-gate-card.shake {
  animation: authShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes authShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

.auth-gate-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-gate-icon-wrap {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 18.5px;
  background: transparent;
  border: none;
  box-shadow: var(--md-sys-elevation-level2);
  overflow: hidden;
  position: relative;
}

.auth-gate-logo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

.auth-gate-logo .app-icon-bg {
  fill: var(--app-icon-bg, #0284c7);
  stroke: var(--app-icon-stroke, rgba(0, 0, 0, 0.08));
  stroke-width: 2px;
  transition: fill var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.auth-gate-logo .app-icon-symbol {
  stroke: var(--app-icon-fg, #ffffff);
  transition: stroke var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.auth-gate-title {
  font: var(--md-sys-typescale-headline-small);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 8px 0;
}

.auth-gate-subtitle {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
  max-width: 320px;
}

.auth-gate-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.auth-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-input-prefix-icon {
  position: absolute;
  left: 14px;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.auth-gate-input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 44px;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  outline: none;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
  box-sizing: border-box;
}

.auth-gate-input:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding-left: 43px;
  box-shadow: 0 0 0 3px var(--accent-subtle);
  background: var(--md-sys-color-surface-container-lowest);
}

.auth-toggle-visibility-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-sys-shape-corner-full);
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
}

.auth-toggle-visibility-btn:hover {
  color: var(--md-sys-color-on-surface);
  background: rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
}

.auth-gate-status {
  padding: 10px 14px;
  border-radius: var(--md-sys-shape-corner-small);
  font: var(--md-sys-typescale-body-medium);
  text-align: center;
  font-weight: 500;
  box-sizing: border-box;
  animation: authFadeIn 0.2s ease;
}

.auth-gate-status.error {
  background: var(--md-sys-color-error-container);
  border: 1px solid var(--md-sys-color-error);
  color: var(--md-sys-color-on-error-container);
}

.auth-gate-status.warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.auth-gate-status.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.auth-gate-submit-btn {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large-emphasized);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast);
  box-shadow: var(--md-sys-elevation-level2);
}

.auth-gate-submit-btn:hover:not(:disabled) {
  opacity: 0.94;
  transform: scale(1.02);
  box-shadow: var(--md-sys-elevation-level3);
}

.auth-gate-submit-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.auth-gate-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 14px;
  width: 100%;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  opacity: 0.6;
}

.auth-divider span {
  font: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.google-signin-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.google-signin-btn {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large-emphasized);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast);
  box-shadow: var(--md-sys-elevation-level1);
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  padding: 0 20px;
}

.google-signin-btn:hover:not(:disabled) {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-level2);
  transform: translateY(-1px) scale(1.015);
}

.google-signin-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  background: var(--md-sys-color-surface-container-high);
}

.google-signin-btn:focus-visible {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.google-signin-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.google-signin-btn .google-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: block;
}

.google-signin-btn .google-btn-text {
  font-weight: 500;
  white-space: nowrap;
}

.auth-gate-footer {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.auth-gate-security-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: 0.01em;
}

/* Settings Modal - Bouton de verrouillage M3 Outlined */
.settings-footer {
  margin: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  justify-content: flex-end;
  background: var(--md-sys-color-surface-container-high);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.settings-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font: var(--md-sys-typescale-label-large-emphasized);
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast);
}

.settings-lock-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: var(--md-sys-elevation-level1);
}

/* ==========================================================================
   M3 Expressive Empty States
   ========================================================================== */
.m3-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  margin: auto;
  max-width: 460px;
  width: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
}
.m3-empty-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: var(--md-sys-shape-corner-large-increased);
  background: var(--md-sys-color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-primary);
  margin-bottom: 20px;
  box-shadow: var(--md-sys-elevation-level1);
  transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
}
.m3-empty-state:hover .m3-empty-icon-wrap {
  transform: scale(1.08) rotate(3deg);
}
.m3-empty-title {
  font: var(--md-sys-typescale-title-medium-emphasized);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 8px;
}
.m3-empty-desc {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 20px;
  line-height: 1.5;
}
.m3-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large-emphasized);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: 0;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-level1);
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-fast);
}
.m3-empty-cta:hover {
  transform: scale(1.04);
  box-shadow: var(--md-sys-elevation-level2);
  opacity: 0.94;
}
.m3-empty-cta:active {
  transform: scale(0.96);
}

/* Global M3 Expressive Micro-Interactions */
button:active, .btn:active, .mode-btn:active, .view-btn:active,
.wiki-cat-pill:active, .card-action-btn:active, .cal-btn-add:active,
.cal-btn-sync:active, .chat-action-badge:active {
  transform: scale(0.97);
}

/* ==========================================================================
   Material Design 3 Expressive Adaptive & Responsive Breakpoints System
   Compact (< 600px) | Medium (600 - 839px) | Expanded (840 - 1199px) | Large (1200px+)
   ========================================================================== */

/* --- Compact (< 600px) : Smartphones & Foldables plies --- */
@media (max-width: 599px) {
  header {
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    gap: 8px;
    justify-content: flex-start;
  }

  .modes {
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
  }

  .modes-indicator {
    top: 2px;
    height: calc(100% - 4px);
  }

  .mode-btn {
    padding: 0 10px;
    height: 36px;
    gap: 6px;
    font-size: 0.8125rem;
  }

  .mode-icon {
    width: 16px;
    height: 16px;
  }

  /* Sur mobile compact, les cartes sont sur une seule colonne : masquer le toggle grille/liste pour liberer l'espace */
  .view-toggle {
    display: none !important;
  }

  /* Installer PWA converti en bouton icone compact 36x36 */
  .pwa-install-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    justify-content: center;
    border-radius: var(--md-sys-shape-corner-full);
  }
  .pwa-install-btn span {
    display: none !important;
  }
  .pwa-install-btn svg {
    margin: 0;
  }

  /* Header actions sur mobile */
  .header-actions {
    gap: 8px;
  }

  /* Reglages ancre proprement a droite */
  .settings-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-shrink: 0;
  }

  /* Conteneur de panneaux M3 compact */
  .panel-inner {
    padding: 12px 12px 16px;
    gap: 12px;
  }
  #panel-notes .panel-inner,
  #panel-chat .panel-inner {
    padding-bottom: 76px;
  }
  #panel-infos .panel-inner {
    padding-bottom: 12px;
  }

  /* Barre de saisie inferieure ancree en toute securite au-dessus de la barre gestuelle */
  .shared-composer-wrap {
    padding: 0 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    max-width: 100%;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  body.chat-drawer-open .shared-composer-wrap {
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .composer-box {
    padding: 6px 8px;
    gap: 6px;
    border-radius: var(--md-sys-shape-corner-large);
  }
  .composer-box textarea {
    font: var(--md-sys-typescale-body-medium);
    padding: 6px 4px;
    min-height: 24px;
    line-height: 1.4;
  }
  .composer-btn,
  .composer-attach-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .auth-gate-card {
    padding: 24px 18px;
    gap: 18px;
    border-radius: var(--md-sys-shape-corner-large-increased);
  }
  .auth-gate-icon-wrap {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
  }
}

/* --- Ecrans ultra-compacts (< 360px) : Foldables plies et mini-mobiles --- */
@media (max-width: 359px) {
  header {
    padding: 0 8px;
    gap: 4px;
  }
  .modes {
    gap: 1px;
    padding: 2px;
  }
  .mode-btn {
    padding: 0 8px;
    min-width: 36px;
  }
  .mode-label {
    display: none;
  }
  .auth-gate-card {
    padding: 20px 14px;
  }
}

/* --- Medium (600px - 839px) : Tablettes Portrait & Pliants deplaces --- */
@media (min-width: 600px) and (max-width: 839px) {
  header {
    padding: 0 20px;
    height: calc(64px + env(safe-area-inset-top, 0px));
  }
  .panel-inner {
    padding: 16px 20px 16px;
  }
}

/* --- Expanded (840px - 1199px) : Tablettes Paysage & Petits Laptops --- */
@media (min-width: 840px) and (max-width: 1199px) {
  header {
    padding: 0 24px;
  }
}