/*
 * Dataroom window widget: styles ported from dataroom-v2 src/app/globals.css.
 * The .dr-window* / .dr-dot / .dr-address rules, their media queries and the
 * glass-slide-right keyframes are copied verbatim, with CSS variables resolved:
 *   var(--font-dataroom-mono), var(--font-mono) -> "Fragment Mono", "JetBrains Mono", monospace
 * Everything else in the window is Tailwind utility classes (Play CDN).
 */
/* Fragment Mono for the mono bits; Inter 300/600 for font-light / font-semibold
   (the host page only loads Inter 400/500). */
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter:wght@300;600&display=swap");

/* Inherited base from the original page: body letter-spacing var(--tracking-normal),
   14px base size, antialiasing, white text from .dr-landing. Font family stays the
   host page's (Inter). */
.dr-scope {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.011em;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
}

/* .dr-landing .font-mono { font-family: var(--font-dataroom-mono), var(--font-mono); } */
.dr-scope .font-mono {
    font-family: "Fragment Mono", "JetBrains Mono", monospace;
}

/* Global button cursor rules from the original globals.css */
.dr-scope button:not(:disabled) {
    cursor: pointer;
}

.dr-scope button:disabled {
    cursor: not-allowed;
}

/* Original page scrollbar (".dark ::-webkit-scrollbar*"), scoped to the widget */
.dr-scope::-webkit-scrollbar,
.dr-scope ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dr-scope::-webkit-scrollbar-track,
.dr-scope ::-webkit-scrollbar-track {
    background: transparent;
}

.dr-scope::-webkit-scrollbar-thumb,
.dr-scope ::-webkit-scrollbar-thumb {
    background: oklch(0.4 0 0 / 0.4);
}

.dr-scope::-webkit-scrollbar-thumb:hover,
.dr-scope ::-webkit-scrollbar-thumb:hover {
    background: oklch(0.5 0 0 / 0.6);
}

/* ---- Verbatim from globals.css ---- */

.dr-window {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: #090909;
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(215, 157, 179, 0.04), 0 0 80px rgba(215, 157, 179, 0.08);
}

.dr-window-compact {
    min-width: 670px;
    transform: perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
    transform-origin: center left;
}

.dr-window-bar {
    display: flex;
    height: 36px;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
    padding: 0 12px;
}

.dr-dot {
    height: 7px;
    width: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.18);
}

.dr-address {
    margin: 0 auto;
    display: flex;
    transform: translateX(-20px);
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.025);
    padding: 4px 40px;
    font-family: "Fragment Mono", "JetBrains Mono", monospace;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 1023px) {
    .dr-window-compact {
        min-width: 0;
        width: 100%;
        margin-left: 0;
        transform: none;
    }
}

@media (max-width: 640px) {
    .dr-window {
        border-radius: 14px;
    }

    .dr-address {
        min-width: 0;
        max-width: calc(100% - 58px);
        transform: translateX(-10px);
        overflow: hidden;
        padding-inline: 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dr-window-compact { transform: none; }
}

@keyframes glass-slide-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-glass-slide-right {
    animation: glass-slide-right 0.3s ease-out;
}