* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  background: #f2f3f6;
  color: rgba(0,0,0,.85);
}

/* =========================
   iOS-like TOPBAR & Theme
   ========================= */
:root {
  --ios-bar-h: 52px;
  --ios-sep: rgba(0,0,0,.12);
  --ios-text: rgba(0,0,0,.88);
  --ios-sub: rgba(0,0,0,.58);
  --ios-bg: rgba(248,248,248,.82);
  --ios-btn: rgba(0,0,0,.08);
  --ios-btn-hover: rgba(0,0,0,.12);
  --ios-search-bg: rgba(0,0,0,.06);
  --ios-search-border: rgba(0,0,0,.08);
  --ios-search-focus: rgba(0,0,0,.14);
  --ios-search-placeholder: rgba(0,0,0,.45);
  
  --cw-field-bg: rgba(255,255,255,.78);
  --cw-field-border: rgba(0,0,0,.14);
  --cw-field-border-2: rgba(0,0,0,.22);
  --cw-field-text: rgba(0,0,0,.86);
  --cw-field-sub: rgba(0,0,0,.55);
  --cw-field-shadow: 0 10px 24px rgba(0,0,0,.08);
  --cw-focus: rgba(99,102,241,.55);
  --cw-focus-ring: 0 0 0 4px rgba(99,102,241,.18);
  --cw-accent: #0a84ff;
  --cw-accent-hover: #0a6ed9;
  --cw-accent-subtle: #3a3a3c;
  --cw-red: #ff453a;

  --cw-panel-bg: rgba(255,255,255,.82);
  --cw-panel-border: rgba(0,0,0,.10);
  --cw-panel-shadow: 0 30px 80px rgba(0,0,0,.18);
  --cw-panel-text: rgba(0,0,0,.88);
  --cw-panel-sub: rgba(0,0,0,.55);
  --cw-panel-btn-bg: rgba(0,0,0,.05);
  --cw-panel-btn-border: rgba(0,0,0,.10);
  --cw-panel-sep: rgba(0,0,0,.08);
  --cw-panel-empty-bg: rgba(0,0,0,.03);
  --cw-panel-empty-border: rgba(0,0,0,.12);
   --mono: 'SF Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

[data-theme="dark"] {
  --ios-sep: rgba(255,255,255,.12);
  --ios-text: rgba(255,255,255,.90);
  --ios-sub: rgba(255,255,255,.62);
  --ios-bg: rgba(22,22,24,.72);
  --ios-btn: rgba(255,255,255,.10);
  --ios-btn-hover: rgba(255,255,255,.16);
  --ios-search-bg: rgba(255,255,255,.10);
  --ios-search-border: rgba(255,255,255,.10);
  --ios-search-focus: rgba(255,255,255,.18);
  --ios-search-placeholder: rgba(255,255,255,.55);
  
  --cw-field-bg: rgba(255,255,255,.08);
  --cw-field-border: rgba(255,255,255,.14);
  --cw-field-border-2: rgba(255,255,255,.22);
  --cw-field-text: rgba(255,255,255,.88);
  --cw-field-sub: rgba(255,255,255,.60);
  --cw-field-shadow: 0 18px 40px rgba(0,0,0,.45);
  --cw-focus: rgba(129,140,248,.70);
  --cw-focus-ring: 0 0 0 4px rgba(129,140,248,.18);
  --cw-accent: #0a84ff;
  --cw-accent-subtle: #3a3a3c;
  --cw-red: #ff453a;
  
  --cw-panel-bg: rgba(25,25,28,.92);
  --cw-panel-border: rgba(255,255,255,.10);
  --cw-panel-shadow: 0 30px 80px rgba(0,0,0,.55);
  --cw-panel-text: rgba(255,255,255,.92);
  --cw-panel-sub: rgba(255,255,255,.55);
  --cw-panel-btn-bg: rgba(255,255,255,.06);
  --cw-panel-btn-border: rgba(255,255,255,.10);
  --cw-panel-sep: rgba(255,255,255,.08);
  --cw-panel-empty-bg: rgba(255,255,255,.04);
  --cw-panel-empty-border: rgba(255,255,255,.14);
}

[data-theme="dark"] body {
  background: #0f1114;
  color: rgba(255,255,255,.88);
}

/* =========================
   iOS Topbar
   ========================= */
header.ios-topbar {
  position: sticky;
  top: 0;
  z-index: 15000;
  height: var(--ios-bar-h);
  background: var(--ios-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ios-sep);
  border-radius: 0 0 20px 20px;
}

.ios-topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 10px;
  position: relative;
}

.ios-topbar__left, .ios-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.ios-topbar__right { justify-content: flex-end; }

.ios-topbar__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(240px, 34vw, 460px);
  pointer-events: none;
}

/* Search */
.ios-search {
  pointer-events: auto;
  position: relative;
  height: 34px;
  border-radius: 999px;
  background: var(--ios-search-bg);
  border: 1px solid var(--ios-search-border);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  transition: all .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.04) inset;
}

.ios-search:focus-within {
  border-color: var(--ios-search-focus);
  box-shadow: 0 0 0 4px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05) inset;
}

[data-theme="dark"] .ios-search:focus-within {
  box-shadow: 0 0 0 4px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35) inset;
}

.ios-search__icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--ios-search-placeholder);
  flex: 0 0 auto;
  font-size: 14px;
  margin-left: 2px;
}

.ios-search__input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-text);
  padding: 0;
}

.ios-search__input::placeholder {
  color: var(--ios-search-placeholder);
  font-weight: 500;
}

.ios-search__clear {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.12);
  color: rgba(0,0,0,.70);
  display: none;
  place-items: center;
  cursor: pointer;
  transition: all .15s ease;
  flex: 0 0 auto;
}

.ios-search__clear:hover { background: rgba(0,0,0,.16); }
.ios-search__clear:active { transform: scale(.96); }

[data-theme="dark"] .ios-search__clear {
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
}

[data-theme="dark"] .ios-search__clear:hover { background: rgba(255,255,255,.22); }

.ios-search.is-filled .ios-search__clear { display: grid; }

/* Buttons & navigation */
.ios-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ios-sub);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  transition: all .15s ease;
  white-space: nowrap;
}

.ios-back:hover { 
  background: var(--ios-btn); 
  color: var(--ios-text); 
}

.ios-back__chev { 
  font-size: 22px; 
  line-height: 1; 
  margin-top: -1px; 
  opacity: .9; 
}

.ios-back__text { 
  font-size: 14px; 
  font-weight: 500; 
}

.ios-link-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ios-sub);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.ios-link-btn:hover { 
  background: var(--ios-btn); 
  color: var(--ios-text); 
}

.ios-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
  color: var(--ios-sub);
  font-size: 16px;
  position: relative;
}

.ios-icon-btn:hover { 
  background: var(--ios-btn); 
  transform: translateY(-1px);
}

.ios-icon-btn:active { transform: scale(.95); }

.ios-sep {
  width: 1px;
  height: 20px;
  background: var(--ios-sep);
  margin: 0 2px;
  opacity: .9;
}

/* User profile */
.ios-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background .15s ease;
  cursor: pointer;
}

.ios-user:hover { background: var(--ios-btn); }

.ios-user__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text);
  white-space: nowrap;
}

.ios-user__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .5px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

/* Menu buttons */
.ios-menu-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ios-text);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.ios-menu-btn:hover { background: var(--ios-btn); }
.ios-menu-btn:active { transform: scale(.96); }

/* Lang & theme pills */
.ios-user-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}

.ios-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ios-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  user-select: none;
}

[data-theme="light"] .ios-pill {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.08);
}

.ios-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

[data-theme="light"] .ios-dot {
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.ios-quick-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 10px;
}

.ios-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  background: #ff3b30;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  border: 2px solid rgba(0,0,0,.15);
}

.ios-flag {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

/* =========================
   LOGO SETHCORE
   ========================= */
.ios-topbar__logo-base {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .4px;
  user-select: none;
}

.ios-topbar__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  user-select: none;
  pointer-events: none;
  min-width: 220px;
  height: 30px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.4px;
}

.ios-logo-default,
.ios-logo-welcome {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.2,1), filter .35s ease;
  will-change: opacity, transform, filter;
}

.ios-logo-default {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .4px;
}

.ios-logo-welcome {
  opacity: 0;
  transform: translateY(10px) scale(.96);
  filter: blur(2px);
  flex-direction: column;
  line-height: 1.05;
}

.ios-topbar__logo.is-welcome .ios-logo-default {
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  filter: blur(2px);
}

.ios-topbar__logo.is-welcome .ios-logo-welcome {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.ios-welcome-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: .6;
}

.ios-welcome-name {
  font-size: 15px;
  font-weight: 1000;
}

.ios-logo-seth { color: #0A84FF; }
.ios-logo-core { color: #111; }

html[data-theme="dark"] .ios-logo-core { color: #fff; }

/* =========================
   iOS Popover & Menu
   ========================= */
.ios-popover {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 10050;
  pointer-events: none;
}

.ios-popover__panel {
  min-width: 220px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translate(var(--pop-x, 0px), var(--pop-y, 0px)) translateY(6px) scale(.98);
  transform-origin: top left;
  opacity: 0;
  filter: blur(2px);
  transition: all .16s ease;
  pointer-events: none;
}

.ios-popover.is-open { pointer-events: auto; }

.ios-popover.is-open .ios-popover__panel {
  opacity: 1;
  filter: blur(0);
  transform: translate(var(--pop-x, 0px), var(--pop-y, 0px)) translateY(0) scale(1);
  pointer-events: auto;
}

.ios-popover__panel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.86);
  border-left: 1px solid rgba(0,0,0,.10);
  border-top: 1px solid rgba(0,0,0,.10);
  transform: rotate(45deg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ios-popover__item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text);
  cursor: pointer;
  transition: all .12s ease;
}

.ios-popover__item:hover { background: rgba(0,0,0,.06); }
.ios-popover__item:active { transform: scale(.99); }
.ios-popover__item--danger { color: #c0262d; }

[data-theme="dark"] .ios-popover__item--danger { color: #ff6b6b; }

[data-theme="dark"] .ios-popover__panel {
  background: rgba(28,28,30,.78);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

[data-theme="dark"] .ios-popover__panel::before {
  background: rgba(28,28,30,.78);
  border-left-color: rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.12);
}

[data-theme="dark"] .ios-popover__item:hover { background: rgba(255,255,255,.08); }

/* iOS Menu (Theme picker) */
.ios-menu {
  position: fixed;
  inset: 0;
  z-index: 13000;
  pointer-events: none;
}

.ios-menu__panel {
  position: absolute;
  min-width: 240px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  filter: blur(2px);
  transition: all .16s ease;
  transform-origin: top center;
  pointer-events: none;
}

.ios-menu.is-open .ios-menu__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.ios-menu__item {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all .12s ease;
  color: var(--ios-text);
}

.ios-menu__item:hover { background: rgba(0,0,0,.06); }
.ios-menu__item:active { transform: scale(.99); }

.ios-menu__ic {
  font-size: 18px;
  opacity: .9;
  display: grid;
  place-items: center;
}

.ios-menu__label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .1px;
}

.ios-menu__check {
  font-size: 16px;
  font-weight: 900;
  opacity: .85;
  text-align: right;
}

[data-theme="dark"] .ios-menu__panel {
  background: rgba(20,20,22,.78);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}

[data-theme="dark"] .ios-menu__item:hover { background: rgba(255,255,255,.08); }

/* =========================
   FLOATING WINDOW (macOS-like)
   ========================= */
.cw-window {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20000;
}

.cw-window__panel {
  pointer-events: auto;
  position: absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.985);
  width: min(520px, 92vw);
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transform: translateY(8px) scale(.985);
  opacity: 0;
  transition: all .18s cubic-bezier(.2,.9,.2,1);
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 180px;
}

.cw-window.is-open .cw-window__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cw-window__panel.is-shaking { animation: cw-shake .35s ease; }

/* Titlebar */
.cw-window__titlebar {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  user-select: none;
  cursor: grab;
}

.cw-window__titlebar:active { cursor: grabbing; }

.cw-dots { display: flex; gap: 8px; }

.cw-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.16);
  cursor: pointer;
}

.cw-dot--red { background: #ff5f57; }
.cw-dot--yellow { background: #febc2e; }
.cw-dot--green { background: #28c840; }

.cw-window__title {
  flex: 1;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .3px;
  color: rgba(0,0,0,.72);
}

.cw-window__right { display: flex; gap: 8px; }

.cw-pill {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.70);
}

/* Body & Footer */
.cw-window__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 14px 0 14px;
  scrollbar-width: thin;
}

.cw-window__footer {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(0deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  margin-top: 8px;
}

.cw-footer-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ios-sub);
  text-transform: uppercase;
}

.cw-btn-footer {
  height: 30px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
  cursor: pointer;
  transition: all .15s ease;
  color: var(--ios-text);
  min-width: 80px;
}

.cw-btn-footer:hover { background: rgba(99,102,241,.18); }
.cw-btn-footer:active { transform: scale(.96); }
.cw-btn-footer--primary { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.28); }

/* Resizer */
.cw-window__resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  z-index: 5;
  background: transparent;
}

.cw-window__resizer::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, transparent 55%, rgba(99,102,241,0.55) 56%),
              linear-gradient(135deg, transparent 72%, rgba(99,102,241,0.45) 73%),
              linear-gradient(135deg, transparent 88%, rgba(99,102,241,0.35) 89%);
  opacity: 0.55;
  transition: opacity .15s ease;
  pointer-events: none;
}

.cw-window__resizer:hover::before { opacity: 1; }

/* Overlay */
.cw-window__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.cw-window.is-open.is-blocking .cw-window__overlay {
  pointer-events: auto;
  opacity: 1;
  
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

/* Dark theme window */
[data-theme="dark"] .cw-window__panel {
  background: rgba(20,20,22,.72);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 34px 100px rgba(0,0,0,.55);
}

[data-theme="dark"] .cw-window__titlebar {
  border-bottom-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

[data-theme="dark"] .cw-window__title { color: rgba(255,255,255,.82); }

[data-theme="dark"] .cw-pill {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
}

[data-theme="dark"] .cw-window__footer {
  border-top-color: rgba(255,255,255,.10);
  background: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

[data-theme="dark"] .cw-btn-footer {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}

[data-theme="dark"] .cw-window__resizer::before {
  background: linear-gradient(135deg, transparent 55%, rgba(129,140,248,0.65) 56%),
              linear-gradient(135deg, transparent 72%, rgba(129,140,248,0.55) 73%),
              linear-gradient(135deg, transparent 88%, rgba(129,140,248,0.45) 89%);
}

/* =========================
   Forms - Version unifiée
   ========================= */
.cw-window .cw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.cw-window .cw-field label {
  font-weight: 800;
  font-size: 13px;
  color: var(--cw-field-text);
  letter-spacing: .2px;
}

.cw-window .cw-field small,
.cw-window .cw-field-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--cw-field-sub);
}

.cw-window .cw-input,
.cw-window .cw-select,
.cw-window .cw-textarea,
.ai-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--cw-field-border);
  background: var(--cw-field-bg);
  color: var(--cw-field-text);
  font-weight: 700;
  font-size: 14px;
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) inset;
  transition: all .15s ease;
}

.cw-window .cw-input,
.cw-window .cw-select { height: 38px; }

.cw-window .cw-textarea,
.ai-input {
  height: auto;
  min-height: 56px;
  max-height: 140px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.35;
  font-family: inherit;
}

.ai-input {
  min-height: 56px;
  max-height: 140px;
  padding: 14px 18px;
  border-radius: 18px;
}

.cw-window .cw-input::placeholder,
.cw-window .cw-textarea::placeholder,
.ai-input::placeholder {
  color: var(--cw-field-sub);
  font-weight: 700;
}

.cw-window .cw-input:focus,
.cw-window .cw-select:focus,
.cw-window .cw-textarea:focus,
.ai-input:focus {
  border-color: var(--cw-focus);
  box-shadow: var(--cw-focus-ring), 0 6px 18px rgba(0,0,0,.06) inset;
}

.cw-window .cw-input:hover,
.cw-window .cw-select:hover,
.cw-window .cw-textarea:hover,
.ai-input:hover {
  border-color: var(--cw-field-border-2);
}

.cw-window .cw-input[readonly],
.cw-window .cw-input:disabled,
.cw-window .cw-select:disabled,
.cw-window .cw-textarea:disabled,
.ai-input:disabled,
.ai-input[readonly] {
  opacity: .80;
  cursor: not-allowed;
  background: rgba(0,0,0,.04);
}

.cw-window .cw-select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--cw-field-sub) 50%),
                    linear-gradient(135deg, var(--cw-field-sub) 50%, transparent 50%);
  background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.cw-window .cw-form-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cw-window .cw-form-row > label {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--cw-field-text);
}

.cw-window .cw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cw-window .cw-span-2 { grid-column: span 2; }

/* Auth forms */
.cw-label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--ios-text);
}

.cw-input-wrap { position: relative; }

.cw-input.cw-input--with-icon { padding-right: 46px; }

.cw-input-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .15s ease;
  color: var(--ios-text);
}

.cw-input-icon:hover { background: rgba(99,102,241,.14); }
.cw-input-icon:active { transform: translateY(-50%) scale(.97); }

.cw-eye {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  opacity: .75;
  user-select: none;
}

.cw-eye:hover { opacity: 1; }

.cw-auth__error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(192,38,45,.25);
  background: rgba(192,38,45,.10);
  color: rgba(192,38,45,.95);
  font-weight: 800;
}

/* Confirm */
.cw-confirm {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cw-confirm__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
}

.cw-confirm__title {
  font-weight: 1000;
  font-size: 14px;
  margin-bottom: 4px;
}

.cw-confirm__text {
  font-weight: 700;
  font-size: 13px;
  opacity: .85;
  line-height: 1.35;
}

.cw-confirm__footer {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 10px;
}

[data-theme="dark"] .cw-window .cw-input[readonly],
[data-theme="dark"] .cw-window .cw-input:disabled,
[data-theme="dark"] .cw-window .cw-select:disabled,
[data-theme="dark"] .cw-window .cw-textarea:disabled {
  background: rgba(255,255,255,.06);
}

[data-theme="dark"] .cw-input {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
}

[data-theme="dark"] .cw-input::placeholder { color: rgba(255,255,255,.55); }

[data-theme="dark"] .cw-input:focus {
  border-color: rgba(99,102,241,.45);
  box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}

[data-theme="dark"] .cw-input-icon {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
}

[data-theme="dark"] .cw-eye { color: rgba(255,255,255,.85); }

[data-theme="dark"] .cw-confirm__icon {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

[data-theme="dark"] .cw-auth__error {
  border-color: rgba(255,107,107,.28);
  background: rgba(255,107,107,.12);
  color: rgba(255,107,107,.92);
}

/* =========================
   Cards & grid inside window
   ========================= */
.cw-wcard {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  padding: 12px;
}

.cw-wcard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cw-avatar {
  width: 44px; height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.cw-name { 
  font-weight: 1000; 
  font-size: 14px; 
  color: var(--ios-text); 
}

.cw-sub { 
  font-weight: 700; 
  font-size: 12px; 
  color: var(--ios-sub); 
  margin-top: 2px; 
}

.cw-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cw-act {
  height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
  color: var(--ios-text);
  font-weight: 900;
  cursor: pointer;
  transition: all .15s ease;
}

.cw-act:hover { background: rgba(99,102,241,.12); }
.cw-act:active { transform: scale(.98); }

.cw-wgrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cw-tile {
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  padding: 12px;
  cursor: pointer;
  transition: all .15s ease;
}

.cw-tile:hover { background: rgba(99,102,241,.10); }
.cw-tile:active { transform: scale(.99); }

.cw-tile__t { 
  font-weight: 1000; 
  font-size: 13px; 
  color: var(--ios-text); 
}

.cw-tile__s { 
  margin-top: 4px; 
  font-weight: 800; 
  font-size: 12px; 
  color: var(--ios-sub); 
}

[data-theme="dark"] .cw-wcard {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

[data-theme="dark"] .cw-act {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.08);
}

[data-theme="dark"] .cw-tile {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

/* =========================
   Split layout
   ========================= */
.cw-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.cw-split__side, .cw-split__main {
  min-height: 0;
  height: 100%;
  padding: 4px;
}

.cw-sidecard {
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.cw-sidehead__title { 
  font-weight: 800; 
  font-size: 16px; 
  color: var(--ios-text); 
}

.cw-sidehead__sub { 
  font-weight: 600; 
  font-size: 13px; 
  color: var(--ios-sub); 
  margin-top: 2px; 
}

.cw-sidegroup { display: flex; flex-direction: column; gap: 8px; }

.cw-sidelabel { 
  font-weight: 700; 
  font-size: 12px; 
  color: var(--ios-sub); 
  text-transform: uppercase; 
  letter-spacing: .5px; 
  margin-bottom: 4px; 
}

.cw-sidebtn {
  height: 42px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ios-text);
  text-align: left;
  padding: 0 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cw-sidebtn:hover { 
  background: rgba(99,102,241,.08); 
  border-color: rgba(99,102,241,.2); 
}

.cw-sidebtn.is-active { 
  background: rgba(99,102,241,.12); 
  border-color: rgba(99,102,241,.3); 
  color: #4f46e5; 
  font-weight: 700; 
}

.cw-maincard {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cw-maincard__title { 
  font-weight: 700; 
  font-size: 18px; 
  color: var(--ios-text); 
  margin-bottom: 12px; 
  letter-spacing: -0.3px; 
}

.cw-maincard__text { 
  color: var(--ios-sub); 
  font-size: 14px; 
  line-height: 1.5; 
  flex: 1; 
  min-height: 0;
}

[data-theme="dark"] .cw-sidecard,
[data-theme="dark"] .cw-maincard {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .cw-sidebtn { color: rgba(255,255,255,.85); }

[data-theme="dark"] .cw-sidebtn:hover {
  background: rgba(129,140,248,.15);
  border-color: rgba(129,140,248,.3);
}

[data-theme="dark"] .cw-sidebtn.is-active {
  background: rgba(129,140,248,.2);
  border-color: rgba(129,140,248,.4);
  color: #a5b4fc;
}

/* =========================
   Grid/Table
   ========================= */
.cw-gridwrap {
  height: 100%;
  min-height: 0;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  scrollbar-width: thin;
  
}

.cw-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}

.cw-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 34px;
  padding: 0 10px;
  text-align: left;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(40,40,42,.85);
  border-bottom: 1px solid rgba(0,0,0,.18);
  border-right: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-grid thead th:first-child { border-top-left-radius: 12px; }

.cw-grid thead th:last-child {
  border-top-right-radius: 12px;
  border-right: 0;
}

.cw-grid tbody td {
  height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-right: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.82);
  background: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-grid tbody td:last-child { border-right: 0; }

.cw-grid tbody tr:nth-child(even) td { background: rgba(0,0,0,.03); }

/* Resizer */
.cw-grid th { position: relative; }

.cw-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 4;
}

.cw-col-resizer::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 4px;
  width: 1px;
  background: rgba(255,255,255,.35);
  opacity: 0;
  transition: opacity .12s ease;
}

.cw-grid thead th:hover .cw-col-resizer::before { opacity: 1; }

.cw-grid.is-resizing,
.cw-grid.is-resizing * { cursor: col-resize !important; }

[data-theme="dark"] .cw-gridwrap {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);

}

[data-theme="dark"] .cw-grid thead th {
  background: rgba(30,30,32,.90);
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-right: 1px solid rgba(255,255,255,.08);
}

[data-theme="dark"] .cw-grid tbody td {
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.05);
  border-bottom-color: rgba(255,255,255,.08);
  border-right-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .cw-grid tbody tr:nth-child(even) td { background: rgba(255,255,255,.08); }

[data-theme="dark"] .cw-col-resizer::before { background: rgba(255,255,255,.30); }

/* =========================
   Home Cards (Favoris)
   ========================= */
.ios-section-head {
  max-width: 980px;
  margin: 18px auto 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ios-section-title {
  font-weight: 1000;
  font-size: 16px;
  letter-spacing: .2px;
  color: var(--ios-text);
}

.ios-separator {
  max-width: 980px;
  margin: 10px auto 14px;
  height: 1px;
  background: var(--ios-sep);
  border-radius: 999px;
  opacity: .9;
}

.ios-cards {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ios-card {
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.ios-card:hover {
  background: rgba(255,255,255,.90);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.ios-card:active { transform: translateY(0) scale(.995); }

.ios-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #4f46e5;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.18);
  flex: 0 0 auto;
}

.ios-card__body { min-width: 0; flex: 1; }

.ios-card__title {
  font-weight: 1000;
  font-size: 14px;
  color: var(--ios-text);
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-card__sub {
  margin-top: 3px;
  font-weight: 800;
  font-size: 12px;
  color: var(--ios-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-theme="dark"] .ios-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

[data-theme="dark"] .ios-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

[data-theme="dark"] .ios-card__icon {
  color: #a5b4fc;
  background: rgba(129,140,248,.18);
  border-color: rgba(129,140,248,.22);
}

.ios-favs-card {
  max-width: 980px;
  margin: 18px auto 0;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  padding: 16px;
}

[data-theme="dark"] .ios-favs-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

/* =========================
   SIDE PANEL (Notifications)
   ========================= */
.cw-sidepanel {
  position: fixed;
  inset: 0;
  z-index: 120000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

.cw-sidepanel.is-open {
  pointer-events: auto;
  opacity: 1;
}

.cw-sidepanel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.cw-sidepanel__panel {
  position: absolute;
  right: 14px;
  top: var(--cw-panel-top, 70px);
  width: min(420px, calc(100vw - 28px));
  height: var(--cw-panel-height, calc(100vh - 90px));
  border-radius: 18px;
  background: var(--cw-panel-bg);
  border: 1px solid var(--cw-panel-border);
  box-shadow: var(--cw-panel-shadow);
  overflow: hidden;
  transform: translateX(18px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.cw-sidepanel.is-open .cw-sidepanel__panel {
  transform: translateX(0);
  opacity: 1;
}

.cw-sidepanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid var(--cw-panel-sep);
}

.cw-sidepanel__title {
  font-weight: 800;
  font-size: 15px;
  color: var(--cw-panel-text);
}

.cw-sidepanel__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--cw-panel-sub);
}

.cw-sidepanel__close {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--cw-panel-btn-border);
  background: var(--cw-panel-btn-bg);
  color: var(--cw-panel-text);
  cursor: pointer;
}

.cw-sidepanel__body {
  padding: 14px;
  height: calc(100% - 56px - 58px);
  overflow: auto;
  scrollbar-width: thin;
}

.cw-sidepanel__foot {
  padding: 12px 14px;
  border-top: 1px solid var(--cw-panel-sep);
  display: flex;
  justify-content: flex-end;
}

.cw-notif-empty {
  border: 1px dashed var(--cw-panel-empty-border);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  background: var(--cw-panel-empty-bg);
}

.cw-notif-empty__ic { font-size: 22px; margin-bottom: 8px; }
.cw-notif-empty__title { font-weight: 800; color: var(--cw-panel-text); }
.cw-notif-empty__text { margin-top: 4px; font-size: 12px; color: var(--cw-panel-sub); }

/* =========================
   AUTH GUARD
   ========================= */
.cw-auth-guard.is-locked {
  opacity: .45;
  filter: grayscale(1) saturate(.55);
  pointer-events: none;
  user-select: none;
}

.cw-auth-guard.is-locked #profileTrigger {
  pointer-events: auto;
  opacity: 1;
  filter: none;
}

.cw-auth-banner {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
}

.cw-auth-guard.is-locked .cw-auth-banner { display: flex; }

.cw-auth-banner__card {
  pointer-events: auto;
  width: min(520px, 92vw);
  border-radius: 22px;
  padding: 18px 18px 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.20);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
}

.cw-auth-banner__title {
  font-weight: 1000;
  font-size: 16px;
  color: var(--ios-text);
  margin-bottom: 6px;
}

.cw-auth-banner__text {
  font-weight: 700;
  font-size: 13px;
  color: var(--ios-sub);
  margin-bottom: 12px;
  line-height: 1.35;
}

.cw-auth-banner__btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(99,102,241,.16);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  cursor: pointer;
  color: var(--ios-text);
  transition: all .15s ease;
}

.cw-auth-banner__btn:hover { background: rgba(99,102,241,.22); }
.cw-auth-banner__btn:active { transform: scale(.98); }

[data-theme="dark"] .cw-auth-banner__card {
  background: rgba(20,20,22,.82);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 34px 110px rgba(0,0,0,.60);
}

/* =========================
   Calculator
   ========================= */
.calculator {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #1c1c1e;
  border-radius: 12px;
  overflow: hidden;
}

.calculator__display {
  padding: 20px 16px 12px;
  text-align: right;
  font-size: 48px;
  font-weight: 300;
  font-family: -apple-system, 'SF Mono', monospace;
  background: #000;
  color: #fff;
  border-bottom: 1px solid #3a3a3c;
  line-height: 1.2;
  min-height: 96px;
  word-wrap: break-word;
  word-break: break-all;
}

.calculator__buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #3a3a3c;
  flex: 1;
}

.calc-btn {
  border: none;
  background: #2c2c2e;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  padding: 20px 0;
  cursor: pointer;
  transition: background 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, 'SF Mono', monospace;
}

.calc-btn:hover { background: #3a3a3c; }
.calc-btn:active { background: #48484a; }

.calc-btn--operator {
  background: #3a3a3c;
  color: #0a84ff;
  font-weight: 600;
}

.calc-btn--operator:hover { background: #4a4a4c; }
.calc-btn--operator:active { background: #5a5a5c; }

.calc-btn--clear {
  background: #2c2c2e;
  color: #ff453a;
}

.calc-btn--equals {
  background: #0a84ff;
  color: white;
}

.calc-btn--equals:hover { background: #0a6ed9; }
.calc-btn--equals:active { background: #0858b0; }

.calc-btn--zero { grid-column: span 2; }

.calc-btn--active {
  background: #48484a !important;
  transform: scale(0.95);
}

.calculator__main {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.calculator__keypad,
.calculator__history {
  height: 100%;
  width: 100%;
  transition: opacity 0.2s ease;
}

.calculator__history {
  background: #1c1c1e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.history__list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}

.history-item {
  background: #2c2c2e;
  border-radius: 10px;
  padding: 12px;
  font-family: -apple-system, 'SF Mono', monospace;
  font-size: 14px;
  border: 1px solid #3a3a3c;
  transition: all 0.1s ease;
  cursor: pointer;
}

.history-item:hover {
  background: #3a3a3c;
  transform: translateY(-1px);
}

.history-item:active { transform: translateY(0); }

.history-item__expression {
  color: #98989d;
  font-size: 12px;
  margin-bottom: 4px;
  word-break: break-all;
}

.history-item__result {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

.history-item__result .equal {
  color: #0a84ff;
  margin-right: 6px;
  font-size: 14px;
}

.history__footer {
  padding: 12px;
  border-top: 1px solid #3a3a3c;
  background: #1c1c1e;
}

.history__clear {
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  border: none;
  background: #2c2c2e;
  color: #ff453a;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s ease;
}

.history__clear:hover { background: #3a3a3c; }
.history__clear:active { background: #48484a; }

.calc-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #2c2c2e;
  color: #fff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 20000;
  animation: fadeInOut 1.5s ease forwards;
  pointer-events: none;
}

[data-theme="light"] .calculator { background-color: #f2f2f7; }

[data-theme="light"] .calculator__display {
  background: #ffffff;
  color: #000000;
  border-bottom-color: #c6c6c8;
}

[data-theme="light"] .calc-btn {
  background: #ffffff;
  color: #000000;
}

[data-theme="light"] .calc-btn:hover { background: #f2f2f7; }
[data-theme="light"] .calc-btn:active { background: #e5e5ea; }

[data-theme="light"] .calc-btn--operator {
  background: #ffffff;
  color: #0a84ff;
}

[data-theme="light"] .calc-btn--operator:hover { background: #f2f2f7; }

[data-theme="light"] .calculator__buttons { background: #c6c6c8; }

[data-theme="light"] .calc-btn--active { background: #e5e5ea !important; }

[data-theme="light"] .calculator__history { background: #f2f2f7; }

[data-theme="light"] .history-item {
  background: #ffffff;
  border-color: #c6c6c8;
}

[data-theme="light"] .history-item:hover { background: #f2f2f7; }

[data-theme="light"] .history-item__expression { color: #8e8e93; }
[data-theme="light"] .history-item__result { color: #000000; }

[data-theme="light"] .history__footer {
  background: #f2f2f7;
  border-top-color: #c6c6c8;
}

[data-theme="light"] .history__clear { background: #ffffff; }

/* =========================
   AI Assistant
   ========================= */
.ai-assistant {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #1c1c1e;
  border-radius: 18px;
}

.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #000;
  border-bottom: 1px solid #3a3a3c;
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 2px rgba(48, 209, 88, 0.2);
  animation: pulse 2s infinite;
}

.ai-status__text {
  font-size: 13px;
  font-weight: 500;
  color: #30d158;
}

.ai-model__badge {
  background: #3a3a3c;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #0a84ff;
  letter-spacing: 0.3px;
}

.ai-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #1c1c1e;
  scrollbar-width: thin;
}

.ai-message {
  display: flex;
  gap: 12px;
  animation: slideIn 0.3s ease;
}

.ai-message--user { flex-direction: row-reverse; }

.ai-message__avatar {
  width: 32px;
  height: 32px;
  border-radius: 20px;
  background: #3a3a3c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.ai-message--user .ai-message__avatar { background: #0a84ff; }

.ai-message__content {
  flex: 1;
  max-width: calc(100% - 44px);
}

.ai-message__sender {
  font-size: 12px;
  font-weight: 600;
  color: #98989d;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.ai-message--user .ai-message__sender { text-align: right; }

.ai-message__bubble {
  background: #2c2c2e;
  padding: 12px 16px;
  border-radius: 18px;
  border-top-left-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ai-message--user .ai-message__bubble {
  background: #0a84ff;
  color: white;
  border-top-right-radius: 4px;
  border-top-left-radius: 18px;
}

.ai-message__time {
  font-size: 10px;
  color: #636366;
  margin-top: 4px;
  margin-left: 4px;
}

.ai-message--user .ai-message__time {
  text-align: right;
  margin-right: 4px;
}

.ai-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: #2c2c2e;
  border-radius: 18px;
  border-top-left-radius: 4px;
  width: fit-content;
}

.ai-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #98989d;
  animation: typingBounce 1.4s infinite;
}

.ai-typing__dot:nth-child(1) { animation-delay: 0s; }
.ai-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing__dot:nth-child(3) { animation-delay: 0.4s; }

.ai-input-area {
  flex: 0 0 auto;
  padding: 12px 16px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.ai-input__wrapper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ai-send-btn {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: none;
  background: var(--cw-accent, #0a84ff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.ai-send-btn:hover:not(:disabled) {
  background: var(--cw-accent-hover, #0a6ed9);
  transform: scale(1.05);
}

.ai-send-btn:active:not(:disabled) { transform: scale(0.95); }
.ai-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ai-send__tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background: #2c2c2e;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10;
}

.ai-send-btn:hover .ai-send__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

.ai-footer-note {
  font-size: 11px;
  color: #636366;
  text-align: center;
  margin-top: 8px;
}

[data-theme="light"] .ai-assistant { background: #f2f2f7; }

[data-theme="light"] .ai-header {
  background: #ffffff;
  border-bottom-color: #c6c6c8;
}

[data-theme="light"] .ai-messages { background: #f2f2f7; }

[data-theme="light"] .ai-message__bubble {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

[data-theme="light"] .ai-input-area {
  background: rgba(255,255,255,.92);
  border-top-color: #c6c6c8;
}

[data-theme="dark"] .ai-messages { background: rgba(18,18,20,.72); }

[data-theme="dark"] .ai-input-area {
  background: rgba(20,20,22,.72);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .ai-input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

[data-theme="dark"] .ai-input::placeholder { color: rgba(255,255,255,.55); }

[data-theme="dark"] .ai-send-btn { box-shadow: 0 10px 24px rgba(0,0,0,.45); }

/* =========================
   Floating button: Demander à Simy
   ========================= */
#btnAI.ios-menu-btn {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  cursor: pointer;
  user-select: none;
}

#btnAI.ios-menu-btn:hover { transform: translateY(-1px); }
#btnAI.ios-menu-btn:active { transform: translateY(0px) scale(.98); }

#btnAI.ios-menu-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.12), 0 12px 28px rgba(0,0,0,.18);
}

html[data-theme="dark"] #btnAI.ios-menu-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(18,18,20,.78);
  color: rgba(255,255,255,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}

/* =========================
   Search Popover
   ========================= */
.ios-search-popover {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 20000;
  pointer-events: none;
}

.ios-search-popover__panel {
  position: absolute;
  width: min(460px, 90vw);
  max-height: 480px;
  background: var(--ios-bg, rgba(248,248,248,.92));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ios-sep, rgba(0,0,0,.12));
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: all 0.18s cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
}

.ios-search-popover.is-open .ios-search-popover__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.ios-search-popover__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ios-sep, rgba(0,0,0,.08));
}

.ios-search-popover__stats {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-sub, rgba(0,0,0,.58));
}

.ios-search-popover__clear {
  background: transparent;
  border: none;
  color: var(--ios-sub, rgba(0,0,0,.58));
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ios-search-popover__clear:hover {
  background: var(--ios-btn, rgba(0,0,0,.06));
  color: var(--ios-text, rgba(0,0,0,.88));
}

.ios-search-popover__section {
  padding: 8px 0;
  border-bottom: 1px solid var(--ios-sep, rgba(0,0,0,.06));
}

.ios-search-popover__section:last-child { border-bottom: none; }

.ios-search-popover__section-title {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ios-sub, rgba(0,0,0,.48));
  display: flex;
  align-items: center;
  gap: 6px;
}

.ios-search-popover__section-title i { font-size: 12px; opacity: 0.7; }

.ios-search-popover__items {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ios-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.ios-search-item:hover { background: var(--ios-btn, rgba(0,0,0,.04)); }

.ios-search-item.is-selected {
  background: var(--ios-btn, rgba(99,102,241,.08));
  border-left-color: var(--cw-accent, #0a84ff);
}

.ios-search-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ios-btn, rgba(0,0,0,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ios-sub, rgba(0,0,0,.58));
  font-size: 16px;
  flex-shrink: 0;
}

.ios-search-item__content {
  flex: 1;
  min-width: 0;
}

.ios-search-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text, rgba(0,0,0,.88));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-search-item__sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--ios-sub, rgba(0,0,0,.58));
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-search-item__badge {
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--ios-btn, rgba(0,0,0,.06));
  font-size: 10px;
  font-weight: 700;
  color: var(--ios-sub, rgba(0,0,0,.58));
  flex-shrink: 0;
}

.ios-search-popover__empty {
  padding: 32px 16px;
  text-align: center;
}

.ios-search-popover__empty-icon {
  font-size: 32px;
  opacity: 0.4;
  margin-bottom: 12px;
}

.ios-search-popover__empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text, rgba(0,0,0,.88));
  margin-bottom: 4px;
}

.ios-search-popover__empty-text {
  font-size: 12px;
  color: var(--ios-sub, rgba(0,0,0,.58));
}

.ios-search-popover__footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--ios-sep, rgba(0,0,0,.06));
  background: var(--ios-btn, rgba(0,0,0,.02));
}

.ios-search-popover__shortcut {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ios-search-popover__key {
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--ios-btn, rgba(0,0,0,.08));
  border: 1px solid var(--ios-sep, rgba(0,0,0,.12));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ios-sub, rgba(0,0,0,.68));
}

.ios-search-popover__key-label {
  font-size: 11px;
  color: var(--ios-sub, rgba(0,0,0,.48));
  margin-left: 2px;
}

[data-theme="dark"] .ios-search-popover__panel {
  background: rgba(22,22,24,.92);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 34px 80px rgba(0,0,0,.55);
}

[data-theme="dark"] .ios-search-popover__stats { color: rgba(255,255,255,.62); }

[data-theme="dark"] .ios-search-popover__clear {
  color: rgba(255,255,255,.62);
}

[data-theme="dark"] .ios-search-popover__clear:hover {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

[data-theme="dark"] .ios-search-item:hover { background: rgba(255,255,255,.06); }

[data-theme="dark"] .ios-search-item.is-selected { background: rgba(99,102,241,.18); }

[data-theme="dark"] .ios-search-item__icon {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
}

[data-theme="dark"] .ios-search-item__title { color: rgba(255,255,255,.92); }

[data-theme="dark"] .ios-search-item__sub { color: rgba(255,255,255,.58); }

[data-theme="dark"] .ios-search-item__badge {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.62);
}

[data-theme="dark"] .ios-search-popover__empty-title { color: rgba(255,255,255,.92); }

[data-theme="dark"] .ios-search-popover__empty-text { color: rgba(255,255,255,.58); }

[data-theme="dark"] .ios-search-popover__footer {
  background: rgba(255,255,255,.04);
  border-top-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .ios-search-popover__key {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
}

[data-theme="dark"] .ios-search-popover__key-label { color: rgba(255,255,255,.52); }

/* =========================
   Tabs – style amélioré
   ========================= */
.cw-tabs__bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

.cw-tab {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .3px;
  cursor: pointer;
  color: rgba(0,0,0,.65);
  transition: all .18s ease;
}

.cw-tab:hover {
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.85);
}

.cw-tab.is-active {
  background: #0a84ff;
  color: #fff;
  border-color: #0a84ff;
  box-shadow: 0 6px 18px rgba(10,132,255,.35);
}

.cw-tabpanes { min-height: 0; }
.cw-tabpane { display: none; }
.cw-tabpane.is-active { display: block; }

.cw-section {
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}

.cw-section__title {
  font-weight: 1000;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(0,0,0,.78);
}

.cw-form-grid--sage { grid-template-columns: 1fr 1fr; }
.cw-muted { color: rgba(0,0,0,.55); font-weight: 700; font-size: 13px; }

/* Layout principal */
.cw-client-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.cw-client-tabs {
  flex: 0 0 auto;
  padding: 14px 14px 8px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.cw-client-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px 14px;
  scrollbar-width: thin;
}

/* =========================
   SCROLLBAR STANDARDISÉE - UNIFIÉE
   ========================= */
.cw-scrollable,
.cw-window__body,
.cw-sidepanel__body,
.ai-messages,
.history__list,
.cw-client-content,
.ios-search-popover__items,
.cw-gridwrap {
  scrollbar-width: thin;
}

/* Chrome/Edge/Safari */
.cw-scrollable::-webkit-scrollbar,
.cw-window__body::-webkit-scrollbar,
.cw-sidepanel__body::-webkit-scrollbar,
.ai-messages::-webkit-scrollbar,
.history__list::-webkit-scrollbar,
.cw-client-content::-webkit-scrollbar,
.ios-search-popover__items::-webkit-scrollbar,
.cw-gridwrap::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.cw-scrollable::-webkit-scrollbar-track,
.cw-window__body::-webkit-scrollbar-track,
.cw-sidepanel__body::-webkit-scrollbar-track,
.ai-messages::-webkit-scrollbar-track,
.history__list::-webkit-scrollbar-track,
.cw-client-content::-webkit-scrollbar-track,
.ios-search-popover__items::-webkit-scrollbar-track,
.cw-gridwrap::-webkit-scrollbar-track {
  background: transparent;
}

/* Light theme */
html[data-theme="light"] .cw-scrollable::-webkit-scrollbar-thumb,
html[data-theme="light"] .cw-window__body::-webkit-scrollbar-thumb,
html[data-theme="light"] .cw-sidepanel__body::-webkit-scrollbar-thumb,
html[data-theme="light"] .ai-messages::-webkit-scrollbar-thumb,
html[data-theme="light"] .history__list::-webkit-scrollbar-thumb,
html[data-theme="light"] .cw-client-content::-webkit-scrollbar-thumb,
html[data-theme="light"] .ios-search-popover__items::-webkit-scrollbar-thumb,
html[data-theme="light"] .cw-gridwrap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: 999px;
}

html[data-theme="light"] .cw-scrollable::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .cw-window__body::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .cw-sidepanel__body::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .ai-messages::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .history__list::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .cw-client-content::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .ios-search-popover__items::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .cw-gridwrap::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.45);
}

/* Dark theme */
html[data-theme="dark"] .cw-scrollable::-webkit-scrollbar-thumb,
html[data-theme="dark"] .cw-window__body::-webkit-scrollbar-thumb,
html[data-theme="dark"] .cw-sidepanel__body::-webkit-scrollbar-thumb,
html[data-theme="dark"] .ai-messages::-webkit-scrollbar-thumb,
html[data-theme="dark"] .history__list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .cw-client-content::-webkit-scrollbar-thumb,
html[data-theme="dark"] .ios-search-popover__items::-webkit-scrollbar-thumb,
html[data-theme="dark"] .cw-gridwrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.20);
  border-radius: 999px;
}

html[data-theme="dark"] .cw-scrollable::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .cw-window__body::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .cw-sidepanel__body::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .ai-messages::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .history__list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .cw-client-content::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .ios-search-popover__items::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .cw-gridwrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.40);
}

/* Firefox */
html[data-theme="light"] .cw-scrollable,
html[data-theme="light"] .cw-window__body,
html[data-theme="light"] .cw-sidepanel__body,
html[data-theme="light"] .ai-messages,
html[data-theme="light"] .history__list,
html[data-theme="light"] .cw-client-content,
html[data-theme="light"] .ios-search-popover__items,
html[data-theme="light"] .cw-gridwrap {
  scrollbar-color: rgba(0,0,0,.35) transparent;
}

html[data-theme="dark"] .cw-scrollable,
html[data-theme="dark"] .cw-window__body,
html[data-theme="dark"] .cw-sidepanel__body,
html[data-theme="dark"] .ai-messages,
html[data-theme="dark"] .history__list,
html[data-theme="dark"] .cw-client-content,
html[data-theme="dark"] .ios-search-popover__items,
html[data-theme="dark"] .cw-gridwrap {
  scrollbar-color: rgba(255,255,255,.30) transparent;
}

/* =========================
   Dark theme tabs
   ========================= */
html[data-theme="dark"] .cw-tabs__bar {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

html[data-theme="dark"] .cw-tab {
  color: rgba(255,255,255,.60);
}

html[data-theme="dark"] .cw-tab:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}

html[data-theme="dark"] .cw-tab.is-active {
  background: #0a84ff;
  color: #fff;
  box-shadow: 0 8px 22px rgba(10,132,255,.45);
}

html[data-theme="dark"] .cw-section {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

html[data-theme="dark"] .cw-section__title { color: rgba(255,255,255,.85); }
html[data-theme="dark"] .cw-muted { color: rgba(255,255,255,.55); }

/* =========================
   Animations & Utilities
   ========================= */
@keyframes cw-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, 20px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

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

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* =========================
   Responsive overrides
   ========================= */
@media (max-width: 900px) {
  .ios-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ios-topbar__center { width: min(420px, 40vw); }
}

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

@media (max-width: 520px) {
  .ios-hide-sm { display: none; }
  .ios-link-btn { display: none; }
  .ios-topbar__center { width: 52vw; }
  .cw-wgrid { grid-template-columns: 1fr; }
  .cw-window .cw-form-grid { grid-template-columns: 1fr; }
  .cw-window .cw-span-2 { grid-column: span 1; }
}

/* =========================
   Demo page
   ========================= */
.demo-page { min-height: calc(100vh - var(--ios-bar-h)); padding: 18px; }

.demo-card {
  max-width: 980px;
  margin: 18px auto 0;
  border-radius: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  padding: 18px;
}

.demo-title { 
  font-weight: 800; 
  letter-spacing: .2px; 
  margin: 0 0 8px; 
  font-size: 20px; 
}

.demo-text { 
  margin: 0; 
  color: rgba(0,0,0,.62); 
  line-height: 1.5; 
  font-size: 14px; 
}

[data-theme="dark"] .demo-card {
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

[data-theme="dark"] .demo-text { color: rgba(255,255,255,.65); }
.ai-input-area { border-top: none; }

/* =====================================
   CW POPSELECT — GLOBAL COMPONENT
   ===================================== */

.cw-popselect{
  position:relative;
  font-size:14px;
}

.cw-popselect__trigger{
  width:100%;
  height:38px;
  padding:0 38px 0 12px;
  border-radius:12px;
  border:1px solid var(--cw-field-border);
  background:var(--cw-field-bg);
  color:var(--cw-field-text);
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:.15s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.06) inset;
  position:relative;
}

.cw-popselect__trigger::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:6px;
  height:6px;
  border-right:2px solid var(--cw-field-sub);
  border-bottom:2px solid var(--cw-field-sub);
  transform:translateY(-50%) rotate(45deg);
  transition:.2s ease;
}

.cw-popselect.is-open .cw-popselect__trigger{
  border-color:var(--cw-focus);
  box-shadow:var(--cw-focus-ring), 0 6px 18px rgba(0,0,0,.06) inset;
}

.cw-popselect.is-open .cw-popselect__trigger::after{
  transform:translateY(-50%) rotate(-135deg);
}

.cw-popselect__dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  max-height:240px;
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--cw-panel-border);
  background:var(--cw-panel-bg);
  backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:.18s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  z-index:20000;
}

.cw-popselect.is-open .cw-popselect__dropdown{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.cw-popselect__option{
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  transition:.12s ease;
  color:var(--cw-panel-text);
}

.cw-popselect__option:hover{
  background:rgba(99,102,241,.12);
}

.cw-popselect__option.is-selected{
  background:rgba(10,132,255,.18);
  color:#0a84ff;
}

/* =========================
   FIX : Boutons footer modales
   ========================= */
.cw-window__footer .cw-btn-footer:hover,
.cw-window__footer .cw-btn-footer--primary:hover,
.cw-btn-footer:hover,
.cw-btn-footer--primary:hover {
  background: rgba(99,102,241,.22) !important;
  border-color: rgba(99,102,241,.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,.25);
}

.cw-window__footer .cw-btn-footer:active,
.cw-btn-footer:active {
  transform: scale(0.96) translateY(0);
}

/* Version dark theme */
[data-theme="dark"] .cw-window__footer .cw-btn-footer:hover,
[data-theme="dark"] .cw-btn-footer:hover {
  background: rgba(129,140,248,.25) !important;
  border-color: rgba(129,140,248,.4) !important;
  box-shadow: 0 4px 15px rgba(10,132,255,.35);
}

/* 1) Empêcher le scroll horizontal global dans la fenêtre */
#commandeModal,
#commandeModal .cw-split,
#commandeModal .cw-split__main,
#commandeModal .cw-maincard,
#commandeModal .cw-maincard__text {
  overflow-x: hidden;
}

/* 2) IMPORTANT en flex: autoriser le main à rétrécir (sinon ça déborde) */
#commandeModal .cw-split__main,
#commandeModal .cw-maincard,
#commandeModal .cw-maincard__text {
  min-width: 0;
}

/* 3) Le scroll horizontal est UNIQUEMENT ici */
#commandeModal .cw-gridwrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;            /* optionnel */
  -webkit-overflow-scrolling: touch;
}

/* 4) Le tableau peut dépasser => c'est cw-gridwrap qui scroll */
#commandeModal .cw-grid {
  width: max-content;            /* force la largeur naturelle des colonnes */
  min-width: 100%;               /* garde une présence pleine même si peu de colonnes */
  border-collapse: collapse;     /* si tu utilises ça */
}

/* Optionnel: empêcher les titres de casser en 2 lignes */
#commandeModal .cw-grid th,
#commandeModal .cw-grid td {
  white-space: nowrap;
}

.cw-footer-actions-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cw-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(to bottom, #f9f9f9, #ececec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cw-btn-icon i {
  font-size: 14px;
  color: rgba(0,0,0,0.65);
}

.cw-btn-icon:hover {
  background: #e5e5e5;
  transform: translateY(-1px);
}

.cw-btn-icon:active {
  transform: translateY(0);
  background: #dcdcdc;
}

/* =========================
   CW FOOTER ICON BUTTONS — DARK FIX
   ========================= */

/* Dark theme */
[data-theme="dark"] .cw-btn-icon {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

[data-theme="dark"] .cw-btn-icon i {
  color: rgba(255,255,255,.78);
}

/* Hover: léger glow bleu (cohérent avec --cw-accent) */
[data-theme="dark"] .cw-btn-icon:hover {
  background: rgba(10,132,255,.16);
  border-color: rgba(10,132,255,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 4px rgba(10,132,255,.14);
  transform: translateY(-1px);
}

[data-theme="dark"] .cw-btn-icon:active {
  background: rgba(10,132,255,.20);
  transform: translateY(0) scale(.98);
}

/* Light theme: petit ajustement pour harmoniser avec tes variables */
[data-theme="light"] .cw-btn-icon {
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

[data-theme="light"] .cw-btn-icon:hover {
  background: rgba(10,132,255,.10);
  border-color: rgba(10,132,255,.22);
  box-shadow: 0 0 0 4px rgba(10,132,255,.10);
}



/* =========================
   CW COMBO PORTAL (dropdown hors modale)
   Animation dédiée (indépendante du header)
   ========================= */

.cw-popselect__dropdown.cw-combo-portal{
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  max-height: 240px;
  overflow: auto;

  border-radius: 16px;
  border: 1px solid var(--cw-panel-border);
  background: var(--cw-panel-bg);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0,0,0,.18);

  /* Animation spécifique */
  opacity: 0;
  transition: opacity .08s linear;

  pointer-events: none;

  /* au-dessus de .cw-window (20000) */
  z-index: 26000;
}

.cw-popselect__dropdown.cw-combo-portal.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Tous les combos utilisant le mode portal */
[data-cw-combo] [data-cw-combo-dropdown]{
  display: none !important;
}

/* Dans les fenêtres qui utilisent le "portal combo", on cache le dropdown interne */
.cw-window[data-cw-combo-portal] [data-cw-combo-dropdown]{
  display: none !important;
}


.ios-pill--theme{
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center; /* centre le duo point+texte */
  gap: 6px;
  padding: 0 8px;
}

.ios-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin: 0;
  flex: 0 0 auto;
  background: rgba(0,0,0,.35);
}

/* Ajustement dark mode */
[data-theme="dark"] .ios-dot{
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}

/* 1) On NE grise PLUS le wrapper global */
html[data-auth="locked"] .cw-auth-guard{
  opacity: 1;
  filter: none;
  pointer-events: none;
  user-select: none;
}

/* 2) On grise SEULEMENT le contenu "app" (tout sauf la banner) */
html[data-auth="locked"] .cw-auth-guard > :not(.cw-auth-banner){
  opacity: .45;
  filter: grayscale(1) saturate(.55);
}

/* 3) La banner reste interactive */
html[data-auth="locked"] .cw-auth-banner{
  display: flex;
  pointer-events: none;
}
html[data-auth="locked"] .cw-auth-banner__card{
  pointer-events: auto;
  opacity: 1;
  filter: none;
}

/* 4) Autorise le trigger du profil (si tu veux le laisser cliquable) */
html[data-auth="locked"] .cw-auth-guard #profileTrigger{
  pointer-events: auto;
  opacity: 1;
  filter: none;
}

html[data-auth="locked"] .cw-auth-guard #profileTrigger{
  pointer-events: auto;
  opacity: 1;
  filter: none;
}

html[data-auth="locked"] .cw-auth-banner{
  display: flex;
}

#cwAuthBannerBtn{
  background: linear-gradient(135deg, #007aff, #005ce6);
  color:#fff;
  border:none;
  font-weight:800;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  animation: bannerPulse 1.6s ease-in-out infinite;
}

@keyframes bannerPulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,122,255,0.0), 0 10px 24px rgba(0,0,0,.18); }
  50%  { box-shadow: 0 0 0 10px rgba(0,122,255,0.35), 0 10px 24px rgba(0,0,0,.18); }
  100% { box-shadow: 0 0 0 0 rgba(0,122,255,0.0), 0 10px 24px rgba(0,0,0,.18); }
}

html[data-auth="locked"] #btnAI {
  pointer-events: none;
  opacity: .6;
}

/* =========================
   TOPBAR RIGHT — visible seulement si connecté
   Anim: comme logo/welcome (opacity + blur + translate + scale)
   ========================= */

.ios-topbar__right{
  /* état connecté par défaut */
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;

  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.9,.2,1),
    filter .35s ease;
  will-change: opacity, transform, filter;
}

/* Quand pas connecté => on “retire” visuellement mais on garde la place (pas de reflow brutal) */
html[data-auth="locked"] .ios-topbar__right{
  opacity: 0;
  transform: translateY(10px) scale(.96);
  filter: blur(2px);
  pointer-events: none; /* important : pas cliquable */
}

/* Optionnel: évite la sélection accidentelle pendant l'anim */
html[data-auth="locked"] .ios-topbar__right *{
  user-select: none;
}

/* =========================
   FOOTER SEARCH - macOS style
   ========================= */
.cw-footer-search {
  position: relative;
  display: flex;
  align-items: center;
}

.cw-search-field {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0.8);
  transform-origin: left center;
  width: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  background: var(--cw-field-bg);
  border: 1px solid var(--cw-field-border);
  border-radius: 12px;
  padding: 2px 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  pointer-events: none;
}

.cw-search-field.is-open {
  width: 220px;
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scaleX(1);
  pointer-events: auto;
}

.cw-search-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--cw-field-text);
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

.cw-search-input::placeholder {
  color: var(--cw-field-sub);
  font-weight: 600;
  opacity: 0.7;
}

.cw-search-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--cw-field-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  font-size: 16px;
}

.cw-search-close:hover {
  background: rgba(0,0,0,.08);
  color: var(--cw-field-text);
}

.cw-search-toggle.active {
  background: var(--cw-accent);
  color: white !important;
}

/* Dark theme */
[data-theme="dark"] .cw-search-field {
  background: rgba(25,25,28,.95);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

[data-theme="dark"] .cw-search-close:hover {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
}

/* Position ajustée si le champ est trop à droite */
.cw-footer-actions-left {
  position: relative;
  overflow: visible !important;
}

/* =========================
   FOOTER CONTEXT MENU
   ========================= */
.cw-footer-menu-container {
  position: relative;
  display: inline-block;
}

.cw-footer-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 30000;
  pointer-events: none;
  margin-bottom: 8px;
}

.cw-footer-menu__panel {
  min-width: 200px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: all 0.16s ease;
  transform-origin: bottom left;
  pointer-events: none;
}

.cw-footer-menu.is-open .cw-footer-menu__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cw-footer-menu__item {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s ease;
  color: var(--ios-text);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
}

.cw-footer-menu__item:hover {
  background: rgba(99,102,241,.12);
}

.cw-footer-menu__item--danger {
  color: #ff453a;
}

.cw-footer-menu__item--danger:hover {
  background: rgba(255,69,58,.12);
}

.cw-footer-menu__divider {
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 6px 0;
}

/* Dark theme */
[data-theme="dark"] .cw-footer-menu__panel {
  background: rgba(25,25,28,.92);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 24px 50px rgba(0,0,0,.55);
}

[data-theme="dark"] .cw-footer-menu__divider {
  background: rgba(255,255,255,.10);
}

.cw-sidehead__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cw-badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background: rgba(0,122,255,.12);
  border: 1px solid rgba(0,122,255,.22);
  color: rgba(0,0,0,.75);
}

.cw-conv-main{ display:flex; flex-direction:column; height:100%; }
.cw-conv-thread{ flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.cw-conv-compose{ display:flex; gap:10px; padding:12px 14px; border-top:1px solid rgba(0,0,0,.08); }

.cw-msg{ display:flex; }
.cw-msg.is-me{ justify-content:flex-end; }
.cw-msg__bubble{ max-width:70%; padding:10px 12px; border-radius:14px; background: rgba(0,0,0,.04); }
.cw-msg.is-me .cw-msg__bubble{ background: rgba(0,122,255,.12); }

.cw-msg__meta{ display:flex; justify-content:space-between; gap:10px; font-size:12px; opacity:.7; margin-bottom:6px; }
.cw-msg__text{ font-size:14px; line-height:1.35; }

#convComposeInput{
  resize: none;
  overflow: hidden;
  min-height: 48px;
  max-height: 150px;
  line-height: 1.35;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* =========================
   DARK MODE – Conversations
   ========================= */

html[data-theme="dark"] .cw-badge{
  background: rgba(0,122,255,.18);
  border: 1px solid rgba(0,122,255,.35);
  color: rgba(255,255,255,.85);
}

html[data-theme="dark"] .cw-conv-compose{
  border-top: 1px solid rgba(255,255,255,.08);
}

html[data-theme="dark"] .cw-msg__bubble{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}

html[data-theme="dark"] .cw-msg.is-me .cw-msg__bubble{
  background: rgba(0,122,255,.25);
  color: white;
}

html[data-theme="dark"] .cw-msg__meta{
  opacity: .65;
  color: rgba(255,255,255,.65);
}

html[data-theme="dark"] .cw-msg__text{
  color: rgba(255,255,255,.9);
}

html[data-theme="dark"] #convEmpty{
  color: rgba(255,255,255,.6);
}

.cw-conv-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cw-unread-badge{
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(0,122,255,.95);
  color: #fff;
}
html[data-theme="dark"] .cw-unread-badge{
  background: rgba(0,122,255,.95);
}

/* Scroll fin pour la liste gauche + thread */
.cw-sidegroup,
.cw-conv-thread{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,.25) transparent;
}

/* Chrome/Edge/Safari */
.cw-sidegroup::-webkit-scrollbar,
.cw-conv-thread::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

.cw-sidegroup::-webkit-scrollbar-thumb,
.cw-conv-thread::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.cw-sidegroup::-webkit-scrollbar-track,
.cw-conv-thread::-webkit-scrollbar-track{
  background: transparent;
}

/* Dark */
html[data-theme="dark"] .cw-sidegroup,
html[data-theme="dark"] .cw-conv-thread{
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
html[data-theme="dark"] .cw-sidegroup::-webkit-scrollbar-thumb,
html[data-theme="dark"] .cw-conv-thread::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Conversation active */
.cw-sidebtn.is-selected{
  background: rgba(0,122,255,.12);
  border: 1px solid rgba(0,122,255,.22);
}

html[data-theme="dark"] .cw-sidebtn.is-selected{
  background: rgba(0,122,255,.18);
  border: 1px solid rgba(0,122,255,.35);
}

/* petit polish : badge non-lu aligné même en sélection */
.cw-sidebtn.is-selected .cw-unread-badge{
  box-shadow: 0 0 0 3px rgba(0,122,255,.10);
}

/* item conversation: 2 lignes (nom + aperçu) */
.cw-conv-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cw-conv-item__left{
  display:flex;
  flex-direction:column;
  min-width:0; /* important pour ellipsis */
}

.cw-conv-item__name{
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cw-conv-item__preview{
  margin-top:4px;
  font-size:12px;
  line-height:1.2;
  opacity:.65;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[data-theme="dark"] .cw-conv-item__preview{
  opacity:.6;
}

/* Ligne des actions (trombone + envoyer) */
.cw-compose-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* ou flex-start si tu veux à gauche */
  gap:10px;                 /* ✅ l’espace entre les 2 */
}

/* Optionnel : rendre le bouton trombone bien "carré" et respirant */
#conversationsModal .cw-compose-actions .cw-btn-icon{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}

/* =========================
   CW TOGGLE (switch)
   ========================= */
.cw-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  min-height: 36px;
}

.cw-toggle__switch{
  position:relative;
  display:inline-block;
  width: 46px;
  height: 24px;
  flex: 0 0 auto;
  margin:0;
}

.cw-toggle__switch input{
  position:absolute;
  inset:0;
  opacity:0;
}

.cw-toggle__slider{
  position:absolute;
  inset:0;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  transition: .22s ease;
}

.cw-toggle__slider::before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: .22s ease;
}

.cw-toggle__switch input:checked + .cw-toggle__slider{
  background: var(--cw-primary, #0a84ff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.cw-toggle__switch input:checked + .cw-toggle__slider::before{
  transform: translateX(22px);
}

.cw-toggle__label{
  font-size: 13px;
  color: rgba(0,0,0,.60);
}

/* dark (si tu as data-theme="dark") */
html[data-theme="dark"] .cw-toggle__label{
  color: rgba(255,255,255,.62);
}
html[data-theme="dark"] .cw-toggle__slider{
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.cw-mini-label{
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,.75);
}

html[data-theme="dark"] .cw-mini-label{
  color: rgba(255,255,255,.75);
}



/* =========================
   ROW SELECTION
   ========================= */
.cw-grid .cw-row.is-selected td{
  background: rgba(0,122,255,.14);
}
.cw-grid .cw-row:focus td{
  outline: 2px solid rgba(0,122,255,.25);
  outline-offset: -2px;
}

.cw-grid tbody tr td:first-child {
    font-weight: 700; /* ou 700 si tu veux plus marqué */
}


/* =========================================
   AUTH ANTI-FLASH (avant JS page)
   - dès que html[data-auth="locked"], on bloque l’UI
   ========================================= */

/* 1) on verrouille tout le guard immédiatement */
html.cw-auth-booted[data-auth="locked"] #cwAuthGuard{
  /* mets ici EXACTEMENT le même rendu que .cw-auth-guard.is-locked */
  filter: grayscale(1);
  opacity: .92;
}

/* 2) on empêche les clics dès le départ (avant que JS mette .is-locked) */
html.cw-auth-booted[data-auth="locked"] #cwAuthGuard *{
  pointer-events: none !important;
}

/* 3) mais on autorise le bouton “Se connecter” */
html.cw-auth-booted[data-auth="locked"] #cwAuthBanner,
html.cw-auth-booted[data-auth="locked"] #cwAuthBanner *{
  pointer-events: auto !important;
}

/* 4) on affiche le bandeau immédiatement */
html.cw-auth-booted[data-auth="locked"] #cwAuthBanner{
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* (optionnel) si ton banner dépend d’aria-hidden, assure l’affichage */
html.cw-auth-booted[data-auth="locked"] #cwAuthBanner[aria-hidden="true"]{
  aria-hidden: false; /* pas pris en charge en CSS, mais ok à laisser */
}

/* ✅ Context menu Users : largeur compacte */
#cwUsersContextMenu{
  width: auto !important;
}

#cwUsersContextMenu .cw-footer-menu__panel{
  width: max-content;          /* s’adapte au contenu */
  min-width: 220px;            /* garde un minimum propre */
  max-width: 280px;            /* évite l’énorme carte */
}
#cwUsersContextMenu .cw-footer-menu__panel{
  display: inline-flex;        /* empêche l’étirement */
  flex-direction: column;
}



/* =========================
   CW DOT (statut)
   ========================= */

.cw-dot{
  display:inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: 6px;
  flex: 0 0 auto;
  background: rgba(142,142,147,.55); /* fallback neutre */
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
}

/* Variantes */
.cw-dot--green{  background: #30d158; box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset, 0 0 0 4px rgba(48,209,88,.14); }
.cw-dot--orange{ background: #ff9f0a; box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset, 0 0 0 4px rgba(255,159,10,.14); }
.cw-dot--red{    background: #ff453a; box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset, 0 0 0 4px rgba(255,69,58,.14); }

/* =========================
   Animation légère (Actif)
   ========================= */
@keyframes cwDotPulse {
  0%   { transform: scale(1);   filter: brightness(1);   box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset, 0 0 0 4px rgba(48,209,88,.10); }
  50%  { transform: scale(1.18);filter: brightness(1.05);box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset, 0 0 0 6px rgba(48,209,88,.18); }
  100% { transform: scale(1);   filter: brightness(1);   box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset, 0 0 0 4px rgba(48,209,88,.10); }
}

/* Pulse seulement pour "actif" */
.cw-dot--green{
  animation: cwDotPulse 1.4s ease-in-out infinite;
}

/* Respecte les préférences d’accessibilité */
@media (prefers-reduced-motion: reduce){
  .cw-dot--green,
  .cw-btn-icon.is-live i {
    animation: none;
  }
}

/* LIVE : rouge + pulse */
.cw-btn-icon.is-live i {
  color: #ff3b30;
  animation: pulseLive 1.2s infinite;
}

@keyframes pulseLive {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.15); opacity: .7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Accessibilité : pas d’animations si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce){
  .cw-dot--green,
  .cw-btn-icon.is-live i,
  .cw-win-title{
    animation: none !important;
    transition: none !important;
  }
}

/* TITRE ANIMÉ (GLOBAL) */
[data-win-titlewrap]{
  position: relative;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}

.cw-win-title{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transform: translateY(0);
  transition: transform .22s ease, opacity .22s ease;
}

.cw-win-title--live{
  opacity: 0;
  transform: translateY(120%);
}

.cw-title-is-live .cw-win-title--normal{
  opacity: 0;
  transform: translateY(-120%);
}

.cw-title-is-live .cw-win-title--live{
  opacity: 1;
  transform: translateY(0);
}

.cw-log-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.cw-log-badge i{
  font-size: 12px;
}

/* =========================
   Journal Log – Scroll unique
   ========================= */

/* Empêche le parent de scroller */
#journalLogModal .cw-maincard__text {
  overflow: hidden !important;
}

/* Le scroll ne vit que dans le gridwrap */
#journalLogModal .cw-gridwrap {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* Supprime tout overflow parasite */
#journalLogModal .cw-split__main,
#journalLogModal .cw-maincard {
  overflow: hidden;
}

/* Journal Log – Date empilée */
#journalLogModal .cw-date-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

#journalLogModal .cw-date-stack__date {
  font-weight: 600;
}

#journalLogModal .cw-date-stack__time {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
}

/* =========================
   Articles – Scroll unique
   ========================= */

/* Empêche le parent de scroller */
#listearticlesModal .cw-maincard__text {
  overflow: hidden !important;
}

/* Le scroll ne vit que dans le gridwrap */
#listearticlesModal .cw-gridwrap {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* Supprime tout overflow parasite */
#listearticlesModal .cw-split__main,
#listearticlesModal .cw-maincard {
  overflow: hidden;
}

/* Pour la sidebar aussi */
#listearticlesModal .cw-split__side {
  overflow-y: auto;
  height: 100%;
}

 /* ============================= */
/* BADGES ERP PREMIUM SOBRES     */
/* ============================= */

.cw-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}

/* TYPE — discret */
.cw-badge--commande {
  background: rgba(37, 99, 235, .12);
  color: #2563eb;
}

.cw-badge--livraison {
  background: rgba(16, 185, 129, .12);
  color: #059669;
}

.cw-badge--facture {
  background: rgba(220, 38, 38, .12);
  color: #dc2626;
}

.cw-badge--retour {
  background: rgba(234, 88, 12, .12);
  color: #ea580c;
}

.cw-badge--avoir {
  background: rgba(124, 58, 237, .12);
  color: #7c3aed;
}

/* STATUT — ultra sobre */
.cw-badge--statut-brouillon {
  background: rgba(100,100,100,.12);
  color: #6b7280;
}

.cw-badge--statut-valide {
  background: rgba(5,150,105,.15);
  color: #059669;
}

.cw-badge--statut-transfere {
  background: rgba(14,165,233,.15);
  color: #0284c7;
}

.cw-badge--statut-annule {
  background: rgba(220,38,38,.15);
  color: #b91c1c;
}

#documentStockContextMenu .cw-footer-menu__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  
}

/* Optionnel : garder le même aspect mais plus transparent */
#documentStockContextMenu .cw-footer-menu__item:disabled:hover {
  background: transparent;
}

/* Police monospace unifiée */
.mono {
  font-family: var(--mono);
}