/* Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

:root {
  color-scheme: light dark;
}

body,
html {
  background-color: var(--color-glic-background);
  color: var(--cr-fallback-color-on-surface);
  font-family: Roboto, sans-serif;
  height: auto !important;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: auto !important;
}

.panel:not([hidden]) {
  display: flex;
}

.panel {
  background-color: var(--color-glic-background);
  box-sizing: border-box;
  flex-direction: column;
  width: min(100%, var(--glic-experimental-opt-in-width, 512px));
}

.panel.dialog {
  height: 502px;
  padding: 0;
}

.header {
  -webkit-app-region: drag;
  display: flex;
  height: 24px;
  justify-content: space-between;
  padding: 12px 20px 12px 12px;
}

.close-button {
  -webkit-app-region: no-drag;
  --cr-icon-button-icon-size: 20px;
  --cr-icon-button-size: 24px;
  color: var(--cr-fallback-color-on-surface-variant);
  margin: 0;
  padding: 0;
}

.notice {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px 48px 48px;
  text-align: center;
}

.notice .icon {
  color: var(--cr-fallback-color-error);
  margin-bottom: 12px;
}

.notice .icon cr-icon {
  height: 24px;
  width: 24px;
}

.headline {
  color: var(--cr-fallback-color-on-surface);
  font-family: 'Google Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0 0 8px 0;
}

.notice-message {
  color: var(--cr-fallback-color-on-surface-variant);
  font-family: 'Google Sans Text', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  max-width: 320px;
}

webview:not([hidden]) {
  display: block;
}

webview {
  border: none;
  height: var(--glic-experimental-opt-in-height);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--glic-transition-duration, 250ms) ease-in-out;
  width: min(100%, var(--glic-experimental-opt-in-width, 512px));
}

webview.visible {
  opacity: 1;
  pointer-events: auto;
}

webview.autosized {
  height: auto;
  width: auto;
}

.hidden,
[hidden] {
  display: none !important;
}

.notice cr-button {
  --cr-button-height: 36px;
  border-radius: var(--corner-radii-fully-round, 100px);
  font-family: 'Google Sans Text', sans-serif;
  font-size: var(--cr-button-font-size, 13px);
  font-weight: 500;
  margin-top: 16px;
  width: 90px;
}

.tonal-button {
  background-color: var(--color-sys-tonal-container, var(--cr-fallback-color-tonal-container));
  color: var(--color-sys-on-tonal-container, var(--cr-fallback-color-on-tonal-container));
}

/* Shimmer Container / Loading Skeleton Styles */
#skeleton-container {
  --color-bg: var(--cr-fallback-color-surface);
  --color-skeleton: var(--cr-fallback-color-surface3);
  --color-skeleton-shimmer: var(--cr-fallback-color-surface1);
  background-color: var(--color-bg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: var(--glic-experimental-opt-in-height);
  inset-inline-start: 0;
  opacity: 1;
  overflow: hidden;
  padding: 20px;
  position: absolute;
  top: 0;
  transition: opacity var(--glic-transition-duration, 250ms) ease-in-out;
  width: var(--glic-experimental-opt-in-width);
  z-index: 10;
}

#skeleton-container.fade-out {
  opacity: 0;
}

#skeleton-container .skeleton-block {
  border-radius: 12px;
  flex-shrink: 0;
}



#skeleton-container .skeleton-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-skeleton);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

#skeleton-container .buttons-row {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  justify-content: flex-end;
  height: 44px;
  align-items: center;
}

#skeleton-container .button-pill {
  height: 44px;
  border-radius: 22px;
}

#skeleton-container .button-pill:nth-child(1) {
  width: 102px;
}

#skeleton-container .button-pill:nth-child(2) {
  width: 100px;
}

#skeleton-container:not([state='experimental']) {
  gap: 8px;
}

#skeleton-container[state='experimental'] {
  gap: 16px;
}

#skeleton-container:not([state='experimental']) .skeleton-card {
  height: 200px;
}

#skeleton-container[state='experimental'] .skeleton-card {
  height: 261px;
}

.skeleton-glic {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 360px;
  width: 100%;
}

.skeleton-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

#skeleton-container:not([state='experimental']) .skeleton-illustration .skeleton-block {
  width: 90px;
  height: 45px;
  border-radius: 24px;
}

.middle-tos {
  height: 24px;
}

.bottom-tos {
  height: 32px;
}

#skeleton-container:not([state='experimental']) .skeleton-segment-glic:nth-child(1) {
  height: 78px;
}

#skeleton-container:not([state='experimental']) .skeleton-segment-glic:nth-child(2),
#skeleton-container:not([state='experimental']) .skeleton-segment-glic:nth-child(3) {
  height: 60px;
}

/* Shimmer Animation Styles */
.shimmer {
  animation: shimmer-animation 1.4s ease-in-out infinite;
  animation-delay: var(--shimmer-delay, 0ms);
  background: linear-gradient(
    90deg,
    var(--color-skeleton) 25%,
    var(--color-skeleton-shimmer) 37%,
    var(--color-skeleton) 63%
  );
  background-size: 400% 100%;
}

@keyframes shimmer-animation {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.skeleton-experimental {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 451px;
  width: 100%;
}

.skeleton-experimental .skeleton-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110px;
}

#skeleton-container[state='experimental'] .skeleton-illustration .skeleton-block {
  width: 180px;
  height: 110px;
  border-radius: 12px;
}

.skeleton-experimental .middle-tos {
  height: 48px;
}

#skeleton-container[state='experimental'] .skeleton-segment:nth-child(1) {
  height: 78px;
}

#skeleton-container[state='experimental'] .skeleton-segment:nth-child(2),
#skeleton-container[state='experimental'] .skeleton-segment:nth-child(3),
#skeleton-container[state='experimental'] .skeleton-segment:nth-child(4) {
  height: 60px;
}

/* Toggle loading skeleton layouts based on state attribute */
#skeleton-container:not([state='experimental']) .skeleton-experimental {
  display: none;
}

#skeleton-container[state='experimental'] .skeleton-glic {
  display: none;
}