@import url("https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Google+Sans+Text:wght@400;500;600;700&display=swap");

@layer reset, theme, base, components, responsive;

/* ==========================================================================
   THEME TOKENS
   ========================================================================== */
@layer theme {
  :root {
    color-scheme: light;

    /* Google Meet-like light palette */
    --bg: #fff;
    --page-bg: #f8fafd;
    --surface: #fff;
    --surface-soft: #f1f3f4;
    --surface-hover: #e8f0fe;
    --surface-muted: #f8fafd;
    --ink: #202124;
    --ink-secondary: #5f6368;
    --ink-muted: #80868b;
    --blue: #174ea6;
    --blue-dark: #174ea6;
    --blue-soft: #e8f0fe;
    --blue-glow: rgb(26 115 232 / 16%);
    --green: #188038;
    --red: #d93025;
    --red-soft: #fce8e6;
    --border: #dadce0;
    --border-light: #e8eaed;
    --shadow-sm:
      0 1px 2px rgb(60 64 67 / 18%), 0 1px 3px 1px rgb(60 64 67 / 8%);
    --shadow-md: 0 4px 12px rgb(60 64 67 / 15%), 0 1px 3px rgb(60 64 67 / 12%);
    --shadow-lg: 0 8px 24px rgb(60 64 67 / 16%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --video-bg: #101a26;
    --video-surface: #1c2e40;
    --video-label-bg: rgb(16 26 38 / 80%);
    --video-controls-bg: rgb(16 26 38 / 92%);
    --ease: 180ms cubic-bezier(0.2, 0, 0, 1);
    --motion-spring: 360ms cubic-bezier(0.22, 1, 0.36, 1);
    --motion-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
    --motion-slow: 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ------------------------------------------------------------------------
     DARK THEME
     Toggled by setting data-theme="dark" on <html> (see theme-toggle.js).
     Video call surfaces (--video-*) stay identical in both themes since
     they were already dark by design.
     ------------------------------------------------------------------------ */
  :root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #202124;
    --page-bg: #191a1d;
    --surface: #292a2d;
    --surface-soft: #35363a;
    --surface-hover: #3c4043;
    --surface-muted: #28292c;
    --ink: #e8eaed;
    --ink-secondary: #9aa0a6;
    --ink-muted: #80868b;
    --blue: #8ab4f8;
    --blue-dark: #aecbfa;
    --blue-soft: rgb(138 180 248 / 16%);
    --blue-glow: rgb(138 180 248 / 22%);
    --green: #81c995;
    --red: #f28b82;
    --red-soft: rgb(242 139 130 / 16%);
    --border: #3c4043;
    --border-light: #35363a;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 45%), 0 1px 3px 1px rgb(0 0 0 / 30%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 35%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 45%);
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer base {
  html {
    min-height: 100%;
    background: var(--page-bg);
    transition: background var(--motion-fast);
  }

  body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    font-family: "Google Sans Text", "Google Sans", Arial, sans-serif;
    background: var(--page-bg);
    transition:
      background var(--motion-fast),
      color var(--motion-fast);
  }

  h1,
  h2,
  h3,
  button {
    font-family: "Google Sans", "Google Sans Text", Arial, sans-serif;
  }

  button,
  input {
    font: inherit;
  }

  button {
    border: 0;
  }

  :focus-visible {
    outline: 3px solid rgb(26 115 232 / 35%);
    outline-offset: 2px;
  }

  ::selection {
    color: #fff;
    background: var(--blue);
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: #bdc1c6;
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  .main-content {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    animation: page-enter var(--motion-slow) both;
  }

  .container {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: clamp(24px, 3vw, 42px) clamp(20px, 4vw, 64px) 40px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(
        circle at 0% 0%,
        rgb(232 240 254 / 70%),
        transparent 28rem
      ),
      linear-gradient(180deg, rgb(248 250 253 / 90%), var(--surface) 300px),
      var(--surface);
    box-shadow: none;
  }

  .app-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(100%, 1600px);
    margin-inline: auto;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-light);
    animation: content-enter 560ms var(--motion-spring) 80ms both;

    &::after {
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      content: "";
      background: linear-gradient(90deg, var(--blue), transparent 42%);
      opacity: 0.75;
    }

    & h1 {
      position: relative;
      display: inline-block;
      color: var(--ink);
      font-size: clamp(1.8rem, 3.5vw, 2.55rem);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.2;

      &::after {
        display: block;
        width: 42px;
        height: 4px;
        margin-top: 9px;
        content: "";
        border-radius: var(--radius-pill);
        background: linear-gradient(90deg, var(--blue), #8ab4f8);
      }
    }

    & .subtitle {
      margin-top: 7px;
      color: var(--ink-secondary);
      font-size: 0.95rem;
    }
  }

  .header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .app-header h1 {
    color: var(--ink);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
  }

  .app-header h3 {
    color: var(--ink-secondary);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.85;
    white-space: nowrap;
  }

  /* Tema (açık/koyu) değiştirme butonu */
  .theme-toggle-btn {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    border-color: var(--border);
    background: var(--surface-soft);
  }

  .theme-toggle-btn i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    color: var(--ink-secondary);
    transition:
      transform var(--motion-spring),
      opacity var(--motion-fast);
  }
  .theme-toggle-btn .fa-moon {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }

  .theme-toggle-btn .fa-sun {
    transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
    opacity: 0;
  }

  :root[data-theme="dark"] .theme-toggle-btn .fa-moon {
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
    opacity: 0;
  }

  :root[data-theme="dark"] .theme-toggle-btn .fa-sun {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
    color: #fdd663;
  }
  /* Sabit konumlu tema butonu (login gibi tam sayfalarda) */
  .theme-toggle-fixed {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 50;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  /* Status pill (JS toggles text into #status.status) */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-top: 22px;
    margin-inline: max(0px, calc((100% - 1600px) / 2));
    margin-bottom: 20px;
    padding: 8px 13px;
    color: var(--ink-secondary);
    font-size: 0.82rem;
    border: 1px solid rgb(24 128 56 / 18%);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #f6fbf7, #fff);
    box-shadow: 0 1px 2px rgb(60 64 67 / 7%);
    animation: content-enter 560ms var(--motion-spring) 150ms both;

    &::before {
      width: 8px;
      height: 8px;
      content: "";
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 4px rgb(24 128 56 / 10%);
    }

    &:empty {
      display: none;
    }
  }

  .input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: min(100%, 760px);
    margin-inline: auto;
    margin-bottom: 28px;
    padding: 6px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    animation: content-enter 560ms var(--motion-spring) 220ms both;

    &:focus-within {
      border-color: rgb(26 115 232 / 38%);
      box-shadow:
        0 0 0 3px var(--blue-glow),
        var(--shadow-sm);
    }

    & input[type="text"] {
      flex: 1;
      min-width: 0;
      min-height: 48px;
      border-color: transparent;
      background: transparent;
      box-shadow: none;

      &:hover,
      &:focus {
        border-color: transparent;
        box-shadow: none;
        background: var(--surface-muted);
      }
    }

    & button {
      min-width: 108px;
      border-radius: var(--radius-sm);
    }

    & .input-group-icon-btn {
      min-width: 0;
      width: 44px;
      padding: 0;
      flex: 0 0 auto;
    }
  }

  /* ------------------------------------------------------------------------
     AUTH / LOGIN SAYFASI
     Meet sayfasıyla aynı token setini (renk, radius, shadow, font)
     kullanır — ayrı bir tema/tasarım dili yoktur.
     ------------------------------------------------------------------------ */
  .login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--page-bg);
  }

  .login-card {
    width: 100%;
    max-width: 420px;
    padding: 44px 40px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: content-enter 560ms var(--motion-spring) both;
  }

  .login-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    color: #fff;
    font-size: 1.9rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #4285f4, #1a73e8);
    box-shadow: 0 8px 20px rgb(26 115 232 / 22%);
  }

  .login-card h1 {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .login-card .subtitle {
    margin-bottom: 28px;
    color: var(--ink-secondary);
    font-size: 0.92rem;
  }

  .login-field {
    position: relative;
    margin-bottom: 18px;
  }

  .login-field .field-icon,
  .login-field .field-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: 15px;
  }

  .login-field .field-icon {
    left: 16px;
  }

  .login-field .field-toggle {
    right: 16px;
    cursor: pointer;
    transition: color var(--motion-fast);

    &:hover {
      color: var(--blue);
    }
  }

  .login-field input[type="password"],
  .login-field input[type="text"] {
    width: 100%;
    min-height: 50px;
    padding: 0 46px;
  }

  .btn-primary {
    width: 100%;
    min-height: 50px;
    color: #fff;
    font-weight: 600;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 4px 12px rgb(26 115 232 / 22%);

    &:hover:not(:disabled) {
      color: #fff;
      border-color: var(--blue-dark);
      background: var(--blue-dark);
    }
  }

  .login-error {
    display: none;
    margin-bottom: 18px;
    padding: 12px 14px;
    color: var(--red);
    font-size: 0.85rem;
    text-align: left;
    border: 1px solid var(--red-soft);
    border-radius: var(--radius-sm);
    background: var(--red-soft);

    &.show {
      display: block;
    }
  }

  .login-footer {
    margin-top: 24px;
    color: var(--ink-muted);
    font-size: 0.78rem;
  }

  /* ------------------------------------------------------------------------
     TOPLANTI OLUŞTUR PANELİ
     Meet sayfasındaki diğer kartlarla (welcome-panel, input-group) aynı
     token setini kullanır — mor/yeşil ayrı renk paleti kaldırıldı.
     ------------------------------------------------------------------------ */
  .meeting-create-panel {
    width: 100%;
    margin: 0 auto 22px;
    padding: 22px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    animation: content-enter 560ms var(--motion-spring) both;
  }

  .meeting-create-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }

  .meeting-create-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    color: #fff;
    font-size: 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, #4285f4, #1a73e8);
    box-shadow: 0 8px 20px rgb(26 115 232 / 22%);
  }

  .meeting-create-header h2 {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
  }

  .meeting-create-header p {
    color: var(--ink-secondary);
    font-size: 0.8rem;
  }

  .meeting-create-btn {
    width: 100%;
    min-height: 48px;
    color: #fff;
    font-weight: 600;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 4px 12px rgb(26 115 232 / 22%);

    &:hover:not(:disabled) {
      color: #fff;
      border-color: var(--blue-dark);
      background: var(--blue-dark);
    }

    &:disabled {
      cursor: wait;
      opacity: 0.6;
    }
  }

  .meeting-result {
    margin-top: 18px;
    animation: content-enter 260ms var(--motion-spring) both;
  }

  .meeting-success {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--green);
    font-size: 0.84rem;
    font-weight: 600;
  }

  .meeting-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;

    & input {
      min-width: 0;
      flex: 1;
      min-height: 44px;
      padding: 0 13px;
      color: var(--ink);
      font-size: 0.8rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-muted);
    }

    & button {
      width: 44px;
      height: 44px;
      min-height: 44px;
      flex-shrink: 0;
      padding: 0;
    }
  }

  .meeting-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;

    & > button {
      flex: 1;
      min-height: 42px;
      font-size: 0.82rem;
      font-weight: 600;
    }
  }

  .meeting-open-btn {
    color: #fff;
    border-color: var(--green);
    background: var(--green);

    &:hover:not(:disabled) {
      filter: brightness(1.06);
    }
  }

  .meeting-copy-info {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    color: var(--ink-muted);
    font-size: 0.74rem;
    line-height: 1.4;
  }

  .meeting-create-error {
    margin-top: 12px;
    padding: 10px 12px;
    color: var(--red);
    font-size: 0.8rem;
    border: 1px solid var(--red-soft);
    border-radius: var(--radius-sm);
    background: var(--red-soft);
  }

  input[type="text"],
  input[type="password"] {
    min-height: 48px;
    padding: 0 16px;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: 0;
    background: var(--surface);
    transition:
      border-color var(--ease),
      box-shadow var(--ease),
      background var(--ease);

    &::placeholder {
      color: var(--ink-muted);
    }

    &:hover {
      border-color: var(--ink-secondary);
    }

    &:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 1px var(--blue);
    }
  }

  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--surface);
    transition:
      background var(--motion-fast),
      border-color var(--motion-fast),
      box-shadow var(--motion-spring),
      transform var(--motion-spring),
      color var(--motion-fast);

    &:hover:not(:disabled) {
      border-color: var(--ink-secondary);
      background: var(--surface-soft);
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }

    &:active:not(:disabled) {
      transform: translateY(0) scale(0.97);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }
  }

  #joinBtn,
  #wbExportBtn {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 4px 12px rgb(26 115 232 / 22%);

    &::before {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(
        110deg,
        transparent 25%,
        rgb(255 255 255 / 28%),
        transparent 75%
      );
      transform: translateX(-120%);
      transition: transform 500ms ease;
    }

    &:hover:not(:disabled) {
      border-color: var(--blue-dark);
      background: var(--blue-dark);

      &::before {
        transform: translateX(120%);
      }
    }
  }

  .btn-danger {
    color: var(--red);
    border-color: transparent;
    background: var(--red-soft);

    &:hover:not(:disabled) {
      border-color: rgb(217 48 37 / 25%);
      background: #f8d7d4;
    }
  }

  .welcome-panel {
    display: grid;
    place-items: center;
    min-height: clamp(360px, 45vh, 500px);
    width: min(100%, 1600px);
    margin-inline: auto;
    padding: 48px 24px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(
        circle at 50% 0%,
        rgb(232 240 254 / 72%),
        transparent 24rem
      ),
      linear-gradient(145deg, #fff, #f8fafd);
    box-shadow: 0 4px 18px rgb(60 64 67 / 7%);
    transition:
      border-color var(--motion-fast),
      box-shadow var(--motion-spring);
    animation: content-enter 640ms var(--motion-spring) 290ms both;

    &:hover {
      border-color: rgb(26 115 232 / 25%);
      box-shadow: var(--shadow-md);
    }

    & h2 {
      margin-bottom: 10px;
      color: var(--ink);
      font-size: clamp(1.35rem, 2vw, 1.7rem);
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    & p {
      max-width: 430px;
      margin-bottom: 24px;
      color: var(--ink-secondary);
      line-height: 1.55;
    }
  }

  .welcome-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 2rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #4285f4, #1a73e8);
    box-shadow: 0 8px 20px rgb(26 115 232 / 22%);
    transition:
      transform var(--motion-spring),
      box-shadow var(--motion-spring);

    &:hover {
      transform: translateY(-4px) rotate(-3deg);
      box-shadow: 0 12px 28px rgb(26 115 232 / 28%);
    }
  }

  .welcome-info {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ink-secondary);
    font-size: 0.78rem;

    & > div {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 12px;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-pill);
      background: var(--surface);
      box-shadow: 0 1px 2px rgb(60 64 67 / 7%);
      transition:
        background var(--motion-fast),
        border-color var(--motion-fast),
        transform var(--motion-spring),
        box-shadow var(--motion-spring);

      &:hover {
        transform: translateY(-3px);
        border-color: rgb(26 115 232 / 28%);
        background: var(--blue-soft);
        box-shadow: var(--shadow-sm);
      }
    }

    & i {
      color: var(--blue);
    }
  }

  .video-section {
    margin-top: 24px;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: var(--radius-lg);
    background: var(--video-bg);
    box-shadow:
      0 8px 26px rgb(60 64 67 / 18%),
      0 1px 3px rgb(60 64 67 / 12%);

    &:is(:fullscreen, :-webkit-full-screen) {
      position: relative;
      width: 100vw;
      height: 100vh;
      border-radius: 0;
      background: var(--video-bg);

      &::backdrop {
        background: var(--video-bg);
      }

      & .video-grid {
        position: absolute;
        inset: 0;
        display: block;
        padding: 0;
        background: var(--video-bg);
      }

      & #remoteVideoWrapper {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto;
      }

      & #remoteVideoWrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      & #localVideoWrapper {
        position: absolute !important;
        right: 24px !important;
        bottom: 96px !important;
        z-index: 20 !important;
        display: grid !important;
        place-items: center !important;
        width: clamp(180px, 22vw, 320px) !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        border: 2px solid #fff !important;
        border-radius: var(--radius-md) !important;
        background: var(--video-bg) !important;
        box-shadow: var(--shadow-lg);
      }

      & #localVideoWrapper video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        background: var(--video-bg) !important;
      }

      & .controls {
        position: absolute;
        bottom: 20px;
        left: 50%;
        z-index: 30;
        border: 0;
        border-radius: var(--radius-pill);
        transform: translateX(-50%);
        background: var(--video-controls-bg);
        box-shadow: var(--shadow-lg);
      }
    }
  }

  .video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: var(--video-bg);
  }

  /* aspect-ratio is the single source of truth for sizing here - it scales
     the tile proportionally at any viewport width. Do not pair it with a
     fixed/clamped min-height again: the two fight each other and produce a
     tile that isn't really 16:9, which crops the picture oddly. */
  .video-wrapper {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--video-surface);
    transition: filter var(--motion-spring);

    &:hover {
      filter: saturate(1.04) contrast(1.02);
    }

    &::after {
      position: absolute;
      inset: 0;
      pointer-events: none;
      content: "";
      background: linear-gradient(
        to bottom,
        rgb(0 0 0 / 28%),
        transparent 25% 76%,
        rgb(0 0 0 / 42%)
      );
    }
  }

  /* Local preview must always show the full camera frame, never crop it */
  #localVideoWrapper {
    background: var(--video-bg);
  }

  #localVideo.wt-screenshare {
    object-fit: contain;
    background: #000;
  }

  #localVideoWrapper video {
    object-fit: contain;
    object-position: center;
    background: var(--video-bg);
  }

  .video-label {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 7px 11px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-sm);
    background: var(--video-label-bg);
    box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
  }

  video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #localVideo {
    transform: scaleX(-1);
    transition: transform var(--ease);

    &.wt-unmirrored {
      transform: none;
    }
  }

  .controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    background: var(--surface);
  }

  .control-btn {
    position: relative;
    width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: var(--surface-soft);
    box-shadow: 0 1px 2px rgb(60 64 67 / 12%);
    transition:
      background var(--motion-fast),
      border-color var(--motion-fast),
      box-shadow var(--motion-spring),
      transform var(--motion-spring);

    &:hover:not(:disabled) {
      background: var(--surface-hover);
      border-color: rgb(26 115 232 / 28%);
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 4px 10px rgb(60 64 67 / 15%);
    }

    &:active:not(:disabled) {
      transform: scale(0.94);
    }

    &.active {
      color: var(--red);
      border-color: transparent;
      background: var(--red-soft);
    }
  }

  /* The label is for screen readers only - every control-btn, including the
     local-preview toggle, must stay an icon-only circle like its siblings. */
  .control-btn .toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
  }

  /* Pressed state = "kendi görüntüm gizli" */
  #localPreviewToggle[aria-pressed="true"] {
    color: var(--red);
    border-color: transparent;
    background: var(--red-soft);
  }

  /* Hiding the local preview: the remote tile takes the full grid, both
     in the normal layout and in fullscreen. */
  .video-grid.hide-local-preview {
    grid-template-columns: 1fr;
  }

  .video-grid.hide-local-preview #localVideoWrapper {
    display: none;
  }

  .video-section:is(:fullscreen, :-webkit-full-screen)
    .video-grid.hide-local-preview
    #localVideoWrapper {
    display: none !important;
  }

  #whiteboardToggleBtn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 500;
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    color: var(--blue);
    border: 1px solid rgb(26 115 232 / 18%);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 5px 16px rgb(60 64 67 / 18%);
    transition:
      background var(--motion-fast),
      box-shadow var(--motion-spring),
      transform var(--motion-spring);

    &:hover {
      color: var(--blue-dark);
      background: var(--blue-soft);
      transform: translateY(-4px) rotate(2deg);
      box-shadow: 0 10px 25px rgb(60 64 67 / 22%);
    }
  }

  #whiteboardPanel {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background: #f8fafd;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--ease),
      transform var(--ease);
    pointer-events: none;

    &.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    &:fullscreen {
      width: 100vw;
      height: 100vh;
    }
  }

  :is(.wb-header, .wb-tabs-row, .wb-toolbar) {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(60 64 67 / 7%);
  }

  .wb-header {
    justify-content: space-between;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px clamp(16px, 3vw, 28px);

    & h2 {
      color: var(--ink);
      font-size: 1.2rem;
      font-weight: 600;
    }
  }

  .wb-header .wb-tabs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }

  :is(.wb-header-actions, .wb-tool-group) {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wb-icon-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
    transition:
      color var(--motion-fast),
      background var(--motion-fast),
      border-color var(--motion-fast),
      box-shadow var(--motion-fast),
      transform var(--motion-fast);

    &:hover:not(:disabled) {
      color: var(--blue);
      border-color: rgb(26 115 232 / 25%);
      background: var(--blue-soft);
      box-shadow: none;
      transform: translateY(-1px);
    }

    &:active:not(:disabled) {
      transform: scale(0.96);
    }
  }

  .wb-close-btn {
    color: var(--red);
    border-color: transparent;
    background: var(--red-soft);
  }

  .wb-tabs-row {
    gap: 10px;
    padding: 9px clamp(16px, 3vw, 28px);
  }

  .wb-tabs {
    display: flex;
    flex: 1;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .wb-tab {
    min-height: 36px;
    padding: 0 14px;
    color: var(--ink-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
    border-color: transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    transition:
      color var(--motion-fast),
      background var(--motion-fast),
      border-color var(--motion-fast),
      transform var(--motion-fast);

    &:hover:not(:disabled) {
      color: var(--blue);
      background: var(--blue-soft);
      box-shadow: none;
      transform: translateY(-1px);
    }

    &.active {
      color: var(--blue-dark);
      border-color: transparent;
      background: var(--blue-soft);
    }
  }

  .wb-tab-add {
    width: 36px;
    min-height: 36px;
    padding: 0;
    color: var(--ink-secondary);
    border-style: dashed;
    background: transparent;
  }

  .wb-toolbar {
    gap: 16px;
    flex-wrap: wrap;
    min-height: 62px;
    padding: 10px clamp(16px, 3vw, 28px);

    & label {
      color: var(--ink-secondary);
      font-size: 0.72rem;
      font-weight: 500;
    }

    & .wb-tool-group {
      padding-right: 12px;
      padding-left: 12px;
      border-right: 1px solid var(--border-light);
    }
  }

  .wb-swatches {
    display: flex;
    gap: 6px;
  }

  .wb-swatch {
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border);

    &.active {
      border-color: #fff;
      box-shadow: 0 0 0 2px var(--blue);
    }
  }

  #wbColorPicker {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  #wbSizeRange {
    width: 105px;
    accent-color: var(--blue);
  }

  .wb-size-preview {
    min-width: 28px;
    color: var(--ink-secondary);
    font-size: 0.75rem;
  }

  .wb-spacer {
    flex: 1;
  }

  .wb-canvas-wrap {
    flex: 1;
    min-height: 0;
    margin: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 4px 16px rgb(60 64 67 / 10%);
  }

  #wbCanvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
  }

  @keyframes page-enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes content-enter {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* --------------------------------------------------------------------
     DARK THEME — component-level overrides for backgrounds/gradients that
     were hardcoded to light colors instead of using tokens.
     Higher specificity than the rules above, so no source-order games needed.
     -------------------------------------------------------------------- */
  :root[data-theme="dark"] .container {
    background:
      radial-gradient(
        circle at 0% 0%,
        rgb(138 180 248 / 7%),
        transparent 28rem
      ),
      linear-gradient(180deg, rgb(25 26 29 / 90%), var(--surface) 300px),
      var(--surface);
  }

  :root[data-theme="dark"] .status {
    background: linear-gradient(135deg, #1c2a20, var(--surface));
    border-color: rgb(129 201 149 / 22%);
  }

  :root[data-theme="dark"] .welcome-panel {
    background:
      radial-gradient(
        circle at 50% 0%,
        rgb(138 180 248 / 8%),
        transparent 24rem
      ),
      linear-gradient(145deg, var(--surface), var(--page-bg));
  }

  :root[data-theme="dark"] #whiteboardPanel {
    background: var(--page-bg);
  }

  :root[data-theme="dark"] .btn-danger:hover:not(:disabled) {
    background: rgb(242 139 130 / 24%);
  }

  /* Not tahtası kağıdı bilinçli olarak açık kalır (kalem rengi buna göre
     seçiliyor); yalnızca çerçevesini temaya uydur. */
  :root[data-theme="dark"] .wb-canvas-wrap {
    border-color: var(--border);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@layer responsive {
  @media (min-width: 1600px) {
    .container {
      padding-right: clamp(64px, 7vw, 120px);
      padding-left: clamp(64px, 7vw, 120px);
    }
  }

  @media (max-width: 1024px) {
    .container {
      padding-right: 28px;
      padding-left: 28px;
    }

    .controls {
      gap: 10px;
    }
  }

  @media (max-width: 700px) {
    .main-content {
      padding: 0;
    }

    .container {
      min-height: 100vh;
      padding: 20px 16px 92px;
      border-right: 0;
      border-left: 0;
      border-radius: 0;
    }

    .app-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 18px;
      padding-bottom: 18px;

      & h1 {
        font-size: clamp(1.6rem, 8vw, 2.1rem);
      }

      & .subtitle {
        max-width: 34ch;
        font-size: 0.88rem;
        line-height: 1.45;
      }
    }

    .status {
      max-width: 100%;
      margin-top: 16px;
      margin-bottom: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .input-group {
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 20px;
      padding: 5px;

      & input[type="text"] {
        flex: 1 1 100%;
        min-height: 46px;
      }

      & button {
        min-height: 46px;
      }
    }

    .meeting-create-panel {
      padding: 17px;
      border-radius: var(--radius-md);
    }

    .meeting-actions {
      flex-direction: column;
    }

    .meeting-link-wrapper input {
      font-size: 0.7rem;
    }

    .welcome-panel {
      min-height: 360px;
      padding: 38px 18px;

      & p {
        max-width: 34ch;
        font-size: 0.9rem;
      }
    }

    .welcome-info {
      gap: 7px;

      & > div {
        padding: 8px 10px;
        font-size: 0.72rem;
      }
    }

    .video-section {
      margin-top: 18px;
      border-radius: var(--radius-md);

      &:is(:fullscreen, :-webkit-full-screen) #localVideoWrapper {
        right: 12px !important;
        bottom: 82px !important;
        width: 40vw !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: var(--radius-sm) !important;
      }
    }

    .video-grid {
      grid-template-columns: 1fr;
      gap: 3px;
      padding: 3px;
    }

    .video-wrapper {
      aspect-ratio: 16 / 10;
      border-radius: 6px;
    }

    .video-label {
      top: 10px;
      left: 10px;
      padding: 6px 9px;
      font-size: 0.67rem;
    }

    .controls {
      gap: 8px;
      padding: 12px 8px;
    }

    .control-btn {
      width: clamp(42px, 12vw, 48px);
      height: clamp(42px, 12vw, 48px);
      min-height: clamp(42px, 12vw, 48px);
    }

    #whiteboardToggleBtn {
      right: 18px;
      bottom: 18px;
      width: 52px;
      height: 52px;
      min-height: 52px;
    }

    :is(.wb-header, .wb-tabs-row, .wb-toolbar) {
      padding-right: 14px;
      padding-left: 14px;
    }

    .wb-header {
      min-height: 60px;
      padding: 10px 12px;

      & h2 {
        font-size: 1rem;
      }
    }

    .wb-tabs-row {
      padding: 7px 10px;
    }

    .wb-toolbar {
      gap: 8px;
      padding: 8px 10px;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;

      & .wb-tool-group {
        flex: 0 0 auto;
        padding: 0;
        border-right: 0;

        & label {
          display: none;
        }
      }

      & .wb-spacer {
        display: none;
      }

      &::-webkit-scrollbar {
        display: none;
      }
    }

    #wbSizeRange {
      width: 72px;
    }

    .wb-canvas-wrap {
      margin: 10px;
      min-height: 220px;
      border-radius: var(--radius-sm);
    }
  }

  @media (max-width: 480px) {
    .container {
      padding-right: 10px;
      padding-left: 10px;
    }

    .app-header h1::after {
      width: 34px;
      height: 3px;
      margin-top: 7px;
    }

    .login-card {
      padding: 32px 24px;
      border-radius: var(--radius-md);
    }

    /* Only the primary call action collapses to an icon-only arrow;
       the utility icon buttons (dice, logout) keep their own icons. */
    .input-group {
      display: grid;
      grid-template-columns: 1fr auto auto;
      grid-template-areas:
        "field field field"
        "join dice logout";
      gap: 6px;
      padding: 5px;

      & input[type="text"] {
        grid-area: field;
        width: 100%;
        min-width: 0;
      }

      & #joinBtn,
      & #endBtn {
        grid-area: join;
        width: 100%;
        min-width: 0;
      }

      & .input-group-icon-btn {
        width: 46px;
        padding: 0;
      }
    }

    .welcome-panel {
      min-height: 330px;
      padding: 30px 14px;
      border-radius: var(--radius-md);

      & h2 {
        font-size: 1.3rem;
      }
    }

    .welcome-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 15px;
      font-size: 1.7rem;
    }

    .welcome-info > div {
      width: 100%;
      justify-content: center;
    }

    .controls {
      gap: 5px;
    }

    .control-btn {
      width: 42px;
      height: 42px;
      min-height: 42px;
      font-size: 0.85rem;
    }

    .wb-icon-btn,
    .wb-tool-btn {
      width: 36px;
      height: 36px;
      min-height: 36px;
    }

    .wb-tab {
      min-height: 34px;
      padding: 0 11px;
      font-size: 0.75rem;
    }
  }

  @media (max-width: 390px) {
    .container {
      padding-right: 8px;
      padding-left: 8px;
    }

    .controls {
      justify-content: space-around;
    }

    .control-btn {
      width: 38px;
      height: 38px;
      min-height: 38px;
    }
  }
}

/* Respect reduced-motion preference: disable all animation/transition */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   UNLAYERED OVERRIDES (kept unlayered like the original .wb-tool-btn block,
   since unlayered CSS always wins over @layer rules regardless of source
   order — matching them here in specificity so dark mode can override them)
   ========================================================================== */
.wb-tool-btn {
  width: 42px;
  height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wb-tool-btn:hover {
  background: #f8fafc;
  color: #334155;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.wb-tool-btn.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.wb-tool-btn:active {
  transform: scale(0.95);
}

.wb-tool-btn i {
  pointer-events: none;
}

:root[data-theme="dark"] .wb-tool-btn {
  background: #2a2b2e;
  color: #9aa0a6;
  border-color: #3c4043;
}

:root[data-theme="dark"] .wb-tool-btn:hover {
  background: #3c4043;
  color: #e8eaed;
  border-color: #5f6368;
}

:root[data-theme="dark"] .wb-tool-btn.active {
  background: #e8eaed;
  color: #202124;
  border-color: #e8eaed;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #5f6368;
}