:root {
    --aglt-ink: #111722;
    --aglt-ink-2: #1b2432;
    --aglt-gold: #d89a16;
    --aglt-gold-2: #f4bd43;
    --aglt-gold-soft: #fff4d8;
    --aglt-paper: #f7f5ef;
    --aglt-white: #ffffff;
    --aglt-muted: #6e746f;
    --aglt-line: rgba(17, 23, 34, .11);
    --aglt-green: #2f9a69;
    --aglt-red: #b85667;
    --aglt-shadow: 0 30px 80px rgba(25, 31, 40, .14);
}

body.aglt-translator-active .agai-root {
    display: none !important;
}

.aglt-app,
.aglt-app * {
    box-sizing: border-box;
}

.aglt-app {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    color: var(--aglt-ink);
    background:
        radial-gradient(circle at 10% 4%, rgba(232, 173, 47, .10), transparent 26%),
        linear-gradient(180deg, #f9f8f3 0%, #f2f0e9 100%);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.aglt-app button,
.aglt-app input,
.aglt-app select {
    font: inherit;
}

.aglt-app button {
    cursor: pointer;
}

.aglt-shell {
    width: min(1480px, calc(100% - 48px));
    margin: 0 auto;
    padding: 38px 0 58px;
}

.aglt-hero {
    position: relative;
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 32px;
    background:
        radial-gradient(circle at 85% 20%, rgba(244, 189, 67, .15), transparent 40%),
        linear-gradient(135deg, #0b0f17 0%, #161f2e 100%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
    color: #fff;
}

.aglt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to right, transparent, #000 28%, #000);
}

.aglt-hero-copy {
    position: relative;
    z-index: 2;
    padding: 66px 44px 66px 72px;
}

.aglt-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.aglt-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #55d28c;
    box-shadow: 0 0 0 6px rgba(85,210,140,.12);
    animation: aglt-live-pulse 2s ease-in-out infinite;
}

@keyframes aglt-live-pulse {
    0%,100% { box-shadow: 0 0 0 6px rgba(85,210,140,.12); }
    50% { box-shadow: 0 0 0 10px rgba(85,210,140,0); }
}

.aglt-beta {
    padding: 4px 8px;
    border: 1px solid rgba(244,189,67,.5);
    border-radius: 999px;
    color: var(--aglt-gold-2);
    font-size: 9px;
    letter-spacing: .12em;
}

.aglt-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 5vw, 76px);
    font-weight: 760;
    line-height: .98;
    letter-spacing: -.045em;
}

.aglt-hero-copy > p {
    max-width: 690px;
    margin: 27px 0 30px;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 1.68;
}

.aglt-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.aglt-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.065);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.25;
}

.aglt-hero-point-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: var(--aglt-gold-2);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aglt-hero-art {
    position: relative;
    height: 100%;
    min-height: 500px;
    display: grid;
    place-items: center;
    isolation: isolate;
    perspective: 1000px;
}

.aglt-aurora-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 189, 67, .22) 0%, rgba(216, 154, 22, .05) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

.aglt-globe {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .4), rgba(244, 189, 67, .6), rgba(255, 255, 255, .1));
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .5),
        0 0 60px rgba(244, 189, 67, .2);
    z-index: 5;
    animation: aglt-globe-float 6s ease-in-out infinite;
}

.aglt-globe-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 60%),
        linear-gradient(145deg, #182232 0%, #0d131d 100%);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.aglt-globe-grid-overlay {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        radial-gradient(rgba(244, 189, 67, .8) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 16px 16px, 28px 28px, 28px 28px;
    background-position: 0 0, 14px 14px, 14px 14px;
    border-radius: 50%;
}

.aglt-globe-core-icon {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}

.aglt-globe-core-icon svg {
    width: 32px;
    height: 32px;
    color: var(--aglt-gold-2);
    filter: drop-shadow(0 2px 8px rgba(244, 189, 67, .4));
}

.aglt-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.aglt-orbit-primary {
    width: 370px;
    height: 370px;
    border: 1px solid rgba(244, 189, 67, .25);
    box-shadow: 0 0 15px rgba(244, 189, 67, .05);
    animation: aglt-spin 40s linear infinite;
}

.aglt-orbit-secondary {
    width: 440px;
    height: 440px;
    border: 1px dashed rgba(255, 255, 255, .12);
    animation: aglt-spin 60s linear infinite reverse;
}

.aglt-flag-constellation {
    position: absolute;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.aglt-floating-flag,
.aglt-language-flag {
    display: inline-block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
}

.aglt-floating-flag {
    position: absolute;
    left: var(--fx);
    top: var(--fy);
    width: 38px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%) scale(var(--fs, 1));
    animation: aglt-flag-float 4.5s ease-in-out infinite var(--fd, 0s);
    transition: transform .3s ease, border-color .3s ease;
}

.aglt-floating-flag:hover {
    border-color: var(--aglt-gold-2);
    transform: translate(-50%, -50%) scale(1.2);
}

.aglt-language-flag {
    width: 24px;
    height: 16px;
    vertical-align: middle;
}

/* VECTOR SVG BAYRAKLAR (Tüm Tarayıcı Uyumluluğu) */
.flag-tr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23E30A17'/%3E%3Ccircle cx='425' cy='400' r='200' fill='%23ffffff'/%3E%3Ccircle cx='475' cy='400' r='160' fill='%23E30A17'/%3E%3Cpolygon fill='%23ffffff' points='583.333,400 738.163,450.305 678.919,298.172 678.919,501.828 738.163,349.695'/%3E%3C/svg%3E"); }
.flag-gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.flag-us { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 741 390'%3E%3Crect width='741' height='390' fill='%23B22234'/%3E%3Cpath d='M0,30h741M0,90h741M0,150h741M0,210h741M0,270h741M0,330h741' stroke='%23fff' stroke-width='30'/%3E%3Crect width='296.4' height='210' fill='%233C3B6E'/%3E%3C/svg%3E"); }
.flag-de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' y='0' fill='%23000'/%3E%3Crect width='5' height='2' y='1' fill='%23DD0000'/%3E%3Crect width='5' height='1' y='2' fill='%23FFCE00'/%3E%3C/svg%3E"); }
.flag-fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' x='0' fill='%23002654'/%3E%3Crect width='1' height='2' x='1' fill='%23ffffff'/%3E%3Crect width='1' height='2' x='2' fill='%23CE1126'/%3E%3C/svg%3E"); }
.flag-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 500'%3E%3Crect width='750' height='500' fill='%23c60b1e'/%3E%3Crect width='750' height='250' y='125' fill='%23ffc400'/%3E%3C/svg%3E"); }
.flag-it { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' x='0' fill='%23009246'/%3E%3Crect width='1' height='2' x='1' fill='%23ffffff'/%3E%3Crect width='1' height='2' x='2' fill='%23CE2B37'/%3E%3C/svg%3E"); }
.flag-jp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect width='900' height='600' fill='%23ffffff'/%3E%3Ccircle cx='450' cy='300' r='180' fill='%23bc002d'/%3E%3C/svg%3E"); }
.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23fff'/%3E%3Crect width='9' height='4' y='2' fill='%230039A6'/%3E%3Crect width='9' height='2' y='4' fill='%23D52B1E'/%3E%3C/svg%3E"); }
.flag-br { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 504'%3E%3Crect width='720' height='504' fill='%23009b3a'/%3E%3Cpolygon points='360,36 684,252 360,468 36,252' fill='%23fedf00'/%3E%3Ccircle cx='360' cy='252' r='126' fill='%23002776'/%3E%3C/svg%3E"); }

@keyframes aglt-globe-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes aglt-flag-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(var(--fs, 1)); }
    50% { transform: translate(-50%, -50%) translateY(-6px) scale(var(--fs, 1)); }
}

@keyframes aglt-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.aglt-main {
    position: relative;
    z-index: 3;
    margin-top: -28px;
}

.aglt-stage {
    border: 1px solid rgba(18,25,35,.08);
    border-radius: 30px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--aglt-shadow);
    backdrop-filter: blur(12px);
}

.aglt-lobby {
    padding: 25px;
}

.aglt-status-ribbon {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px;
    border: 1px solid rgba(216,154,22,.22);
    border-radius: 17px;
    background: linear-gradient(90deg, rgba(255,248,230,.99), rgba(255,255,255,.99));
    color: #4f5751;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

.aglt-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3b443e;
    font-weight: 750;
}

.aglt-storage-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #3f4842;
    font-weight: 760;
}

.aglt-storage-note svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: #a97716;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aglt-status-pill i,
.aglt-connected i,
.aglt-participant-state i {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: var(--aglt-green);
    box-shadow: 0 0 0 5px rgba(47,154,105,.11);
}

.aglt-card {
    position: relative;
    min-height: 500px;
    padding: 36px;
    overflow: hidden;
    border: 1px solid var(--aglt-line);
    border-radius: 24px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.aglt-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -110px;
    top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(219,159,28,.1), transparent 68%);
}

.aglt-card:hover,
.aglt-card.is-invited {
    border-color: rgba(216,154,22,.36);
    box-shadow: 0 25px 60px rgba(19,25,34,.10);
    transform: translateY(-3px);
}

.aglt-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 27px;
    border-radius: 15px;
    background: var(--aglt-ink);
    color: var(--aglt-gold-2);
    box-shadow: 0 13px 24px rgba(17,23,34,.18);
    font-size: 25px;
}

.aglt-card-kicker,
.aglt-room-label,
.aglt-section-heading > span,
.aglt-panel-heading > div > span,
.aglt-language-modal-head span {
    color: #a97716;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .18em;
}

.aglt-card h2 {
    margin: 7px 0 11px;
    color: var(--aglt-ink);
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: -.025em;
}

.aglt-card > div > p {
    min-height: 48px;
    margin: 0 0 28px;
    color: #747874;
    font-size: 14px;
    line-height: 1.7;
}

.aglt-form {
    display: grid;
    gap: 16px;
}

.aglt-form label {
    display: grid;
    gap: 7px;
    color: #3a403c;
    font-size: 12px;
    font-weight: 720;
}

.aglt-form input,
.aglt-form select,
.aglt-language-button {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(19,25,35,.13);
    border-radius: 14px;
    outline: none;
    background: #fbfbf9;
    color: #222a26;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.aglt-form input:focus,
.aglt-form select:focus,
.aglt-language-button:focus-visible {
    border-color: rgba(216,154,22,.72);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(216,154,22,.11);
}

.aglt-form input::placeholder {
    color: #aaada9;
}

.aglt-language-button {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 9px;
    text-align: left;
}

.aglt-language-label {
    font-weight: 720;
}

.aglt-chevron {
    color: #8b8e8a;
    font-size: 18px;
}

.aglt-primary-button,
.aglt-secondary-button {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3px;
    padding: 0 18px 0 20px;
    border: 0;
    border-radius: 15px;
    font-weight: 780;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.aglt-primary-button {
    background: linear-gradient(135deg, #d99613, #efb635);
    color: #151b24;
    box-shadow: 0 15px 27px rgba(205,139,11,.22);
}

.aglt-secondary-button {
    background: linear-gradient(135deg, #141b27, #252e3b);
    color: #fff;
    box-shadow: 0 15px 27px rgba(20,27,39,.2);
}

.aglt-primary-button b,
.aglt-secondary-button b {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.18);
    font-size: 17px;
}

.aglt-primary-button:hover,
.aglt-secondary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(20,27,39,.23);
}

.aglt-primary-button:disabled,
.aglt-secondary-button:disabled,
.aglt-form :disabled {
    cursor: not-allowed;
    opacity: .55;
}

.aglt-room {
    padding: 28px;
}

.aglt-room-topbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.aglt-room-topbar h2 {
    margin: 3px 0 0;
    font-size: 25px;
    letter-spacing: -.035em;
}

.aglt-room-topbar h2 strong {
    color: var(--aglt-gold);
}

.aglt-room-actions {
    display: flex;
    gap: 9px;
}

.aglt-room-actions button,
.aglt-panel-heading button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--aglt-line);
    border-radius: 11px;
    background: #fff;
    color: #384039;
    font-size: 11px;
    font-weight: 730;
}

.aglt-room-actions button:hover,
.aglt-panel-heading button:hover {
    border-color: rgba(216,154,22,.45);
    background: #fffaf0;
}

.aglt-room-actions .aglt-leave-button {
    border-color: rgba(184,86,103,.2);
    color: #a24657;
}

.aglt-session-strip {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 16px;
    border: 1px solid rgba(17,23,34,.08);
    border-radius: 14px;
    background: #f8f8f5;
    color: #707570;
    font-size: 11px;
}

.aglt-session-strip > span:not(:first-child) {
    padding-left: 20px;
    border-left: 1px solid rgba(17,23,34,.1);
}

.aglt-connected {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #335a46;
}

.aglt-participant-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin: 17px 0;
}

.aglt-participant-card {
    min-height: 92px;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--aglt-line);
    border-radius: 17px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.aglt-participant-card.is-speaking {
    border-color: rgba(216,154,22,.68);
    box-shadow: 0 0 0 4px rgba(216,154,22,.1), 0 13px 28px rgba(24,30,38,.08);
    transform: translateY(-2px);
}

.aglt-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #161e2a, #283240);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
}

.aglt-avatar i {
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    font-style: normal;
    font-size: 14px;
}

.aglt-participant-copy {
    min-width: 0;
    display: grid;
}

.aglt-participant-copy b {
    overflow: hidden;
    color: #202720;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aglt-participant-copy b small {
    color: #949894;
    font-size: 9px;
}

.aglt-participant-copy span {
    color: #858985;
    font-size: 11px;
}

.aglt-participant-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6b726d;
    font-size: 9px;
    font-weight: 720;
}

.aglt-participant-card.is-speaking .aglt-participant-state {
    color: #92600c;
}

.aglt-participant-card.is-speaking .aglt-participant-state i {
    background: var(--aglt-gold);
    box-shadow: 0 0 0 5px rgba(216,154,22,.12);
    animation: aglt-pulse 1.1s ease-in-out infinite;
}

@keyframes aglt-pulse { 50% { transform: scale(1.25); opacity: .7; } }

.aglt-conversation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .65fr);
    gap: 16px;
}

.aglt-transcript-panel,
.aglt-control-panel {
    border: 1px solid var(--aglt-line);
    border-radius: 21px;
    background: #fbfbf9;
}

.aglt-transcript-panel {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aglt-panel-heading {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--aglt-line);
    background: #fff;
}

.aglt-panel-heading h3 {
    margin: 1px 0 0;
    font-size: 20px;
    letter-spacing: -.025em;
}

.aglt-transcript {
    height: 448px;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.aglt-empty-transcript {
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 32px;
    color: #949994;
    text-align: center;
}

.aglt-empty-transcript > div {
    color: rgba(216,154,22,.38);
    font-family: Georgia, serif;
    font-size: 68px;
    line-height: .8;
}

.aglt-empty-transcript h4 {
    margin: 16px 0 5px;
    color: #444a45;
    font-size: 17px;
}

.aglt-empty-transcript p {
    margin: 0;
    font-size: 12px;
}

.aglt-transcript-entry {
    margin-bottom: 13px;
    padding: 16px;
    border: 1px solid rgba(17,23,34,.09);
    border-left: 3px solid var(--aglt-gold);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(24,30,38,.04);
}

.aglt-transcript-entry.is-translating {
    border-left-color: var(--aglt-green);
}

.aglt-transcript-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.aglt-transcript-meta span { font-size: 18px; }
.aglt-transcript-meta b { font-size: 12px; }
.aglt-transcript-meta small { color: #989c98; font-size: 10px; }

.aglt-transcript-original,
.aglt-transcript-translation {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 10px;
    align-items: start;
}

.aglt-transcript-original label,
.aglt-transcript-translation label {
    padding-top: 3px;
    color: #a0a39f;
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aglt-transcript-original p,
.aglt-transcript-translation p {
    margin: 0 0 7px;
    color: #6b706c;
    font-size: 12px;
}

.aglt-transcript-translation p {
    color: #1d2520;
    font-size: 14px;
    font-weight: 650;
}

.aglt-control-panel {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 50% 38%, rgba(216,154,22,.08), transparent 32%),
        #f8f7f2;
}

.aglt-control-status {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 13px;
    border: 1px solid rgba(47,154,105,.18);
    border-radius: 14px;
    background: rgba(238,250,244,.8);
}

.aglt-control-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--aglt-green);
    box-shadow: 0 0 0 6px rgba(47,154,105,.1);
}

.aglt-control-status div {
    display: grid;
}

.aglt-control-status b {
    color: #315845;
    font-size: 12px;
}

.aglt-control-status small {
    color: #7d8a82;
    font-size: 9px;
}

.aglt-ptt {
    position: relative;
    width: 218px;
    height: 218px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    margin: 42px 0 20px;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 37% 29%, rgba(255,255,255,.14), transparent 20%),
        linear-gradient(145deg, #202a38, #111822);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.05),
        0 25px 45px rgba(17,23,34,.25),
        0 0 0 12px #fff,
        0 0 0 13px rgba(216,154,22,.24);
    color: #fff;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.aglt-ptt:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.08),
        0 30px 55px rgba(17,23,34,.29),
        0 0 0 12px #fff,
        0 0 0 15px rgba(216,154,22,.31);
}

.aglt-ptt-rings {
    position: absolute;
    inset: -17px;
    border: 1px solid rgba(216,154,22,.2);
    border-radius: 50%;
    pointer-events: none;
}

.aglt-mic-icon {
    position: relative;
    width: 38px;
    height: 52px;
    display: block;
    color: var(--aglt-gold-2);
    font-size: 0;
}

.aglt-mic-icon::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 31px;
    left: 10px;
    top: 1px;
    border: 3px solid currentColor;
    border-radius: 12px;
}

.aglt-mic-icon::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 23px;
    left: 3px;
    top: 16px;
    border: 3px solid currentColor;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: inset 0 -18px 0 -16px currentColor;
}

.aglt-audio-bars {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.aglt-audio-bars i {
    width: 3px;
    height: 6px;
    border-radius: 3px;
    background: rgba(216,154,22,.35);
}

.aglt-control-note {
    max-width: 280px;
    margin: 10px auto 0;
    color: #919591;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}

.aglt-privacy-bar {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 13px 17px;
    border: 1px solid rgba(47,154,105,.14);
    border-radius: 17px;
    background: linear-gradient(90deg, #eef8f2, #f9fcfa);
}

.aglt-shield {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #d8f0e2;
    color: #2e8c61;
    font-weight: 900;
}

.aglt-privacy-bar > div:last-child {
    display: grid;
}

.aglt-privacy-bar b { color: #315845; font-size: 12px; }
.aglt-privacy-bar span { color: #718178; font-size: 10px; }

.aglt-how-it-works {
    padding: 72px 22px 22px;
}

.aglt-section-heading {
    margin-bottom: 24px;
    text-align: center;
}

.aglt-section-heading h2 {
    margin: 5px 0 0;
    color: var(--aglt-ink);
    font-size: 34px;
    letter-spacing: -.04em;
}

.aglt-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.aglt-steps article {
    position: relative;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(216,154,22,.17);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(244,189,67,.10), transparent 38%),
        rgba(255,255,255,.88);
    box-shadow: 0 18px 42px rgba(17,23,34,.055);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.aglt-steps article:hover {
    transform: translateY(-4px);
    border-color: rgba(216,154,22,.34);
    box-shadow: 0 24px 52px rgba(17,23,34,.085);
}

.aglt-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.aglt-step-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216,154,22,.24);
    border-radius: 17px;
    background: linear-gradient(145deg, #fffaf0, #f8ecd0);
    color: #b67a0d;
    box-shadow: 0 10px 24px rgba(216,154,22,.10);
}

.aglt-step-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aglt-steps article .aglt-step-top > b {
    color: rgba(216,154,22,.42);
    font-size: 35px;
    font-weight: 820;
    letter-spacing: -.055em;
}

.aglt-steps article h3 {
    margin: 22px 0 10px;
    color: #202823;
    font-size: 18px;
    font-weight: 820;
    line-height: 1.28;
    letter-spacing: -.02em;
}

.aglt-steps article p {
    color: #69716c;
    font-size: 13px;
    line-height: 1.72;
}

.aglt-language-dialog {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.aglt-language-backdrop {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: rgba(8,12,18,.64);
    backdrop-filter: blur(7px);
    transition: opacity .18s ease;
}

.aglt-language-modal {
    position: absolute;
    width: min(780px, calc(100% - 32px));
    max-height: min(760px, calc(100vh - 40px));
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 40px 100px rgba(0,0,0,.32);
    transform: translate(-50%, -47%) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}

.aglt-language-dialog.is-open .aglt-language-backdrop,
.aglt-language-dialog.is-open .aglt-language-modal {
    opacity: 1;
}

.aglt-language-dialog.is-open .aglt-language-modal {
    transform: translate(-50%, -50%) scale(1);
}

.aglt-language-modal-head {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 23px;
    border-bottom: 1px solid var(--aglt-line);
}

.aglt-language-modal-head h3 {
    margin: 2px 0 0;
    font-size: 22px;
    letter-spacing: -.025em;
}

.aglt-language-modal-head button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: #f1f2ef;
    color: #373d38;
    font-size: 23px;
}

.aglt-language-search {
    position: relative;
    margin: 18px 20px 10px;
}

.aglt-language-search span {
    position: absolute;
    left: 16px;
    top: 50%;
    color: #939793;
    font-size: 22px;
    transform: translateY(-50%);
}

.aglt-language-search input {
    width: 100%;
    min-height: 50px;
    padding: 0 16px 0 48px;
    border: 1px solid var(--aglt-line);
    border-radius: 14px;
    outline: none;
    background: #f8f8f5;
}

.aglt-language-search input:focus {
    border-color: rgba(216,154,22,.55);
    box-shadow: 0 0 0 4px rgba(216,154,22,.1);
}

.aglt-language-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 20px 22px;
    overflow-y: auto;
}

.aglt-language-option {
    min-height: 67px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid rgba(17,23,34,.09);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.aglt-language-option:hover {
    border-color: rgba(216,154,22,.42);
    background: #fffaf0;
    transform: translateY(-1px);
}

.aglt-language-option > span:nth-child(2) {
    min-width: 0;
    display: grid;
}

.aglt-language-option b {
    overflow: hidden;
    color: #222a25;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aglt-language-option small {
    overflow: hidden;
    color: #959995;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aglt-language-option em {
    color: #aa7a19;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}

.aglt-toast {
    position: fixed;
    z-index: 1000000;
    min-width: 260px;
    max-width: min(430px, calc(100% - 30px));
    right: 22px;
    bottom: 22px;
    padding: 14px 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: #19212d;
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
}

.aglt-toast[data-type="error"] { background: #8f3445; }
.aglt-toast[data-type="warning"] { background: #9a6811; }
.aglt-hidden-audio { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.aglt-admin-notice { padding: 16px; border: 1px solid #dba617; background: #fff8e5; }

.aglt-private-lobby-grid {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    padding-top: 22px;
}

.aglt-private-card {
    min-height: 0;
    padding: 42px;
    background:
        radial-gradient(circle at 96% 0%, rgba(216,154,22,.10), transparent 28%),
        linear-gradient(180deg, #fff 0%, #fcfbf7 100%);
}

.aglt-private-card .aglt-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 26px;
}

.aglt-private-card h2 { max-width: 620px; }
.aglt-private-card > div > p { max-width: 650px; }
.aglt-private-card .aglt-form { max-width: none; }

.aglt-locked-card {
    padding: 64px 52px;
    text-align: center;
    place-items: center;
}

.aglt-lock-mark {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    border: 1px solid rgba(216,154,22,.28);
    border-radius: 28px;
    background: var(--aglt-gold-soft);
    color: #ad7410;
}

.aglt-invite-profile-icon {
    width: 56px;
    height: 56px;
    overflow: visible;
}

.aglt-invite-profile-head,
.aglt-invite-profile-body,
.aglt-invite-check-circle,
.aglt-invite-check {
    vector-effect: non-scaling-stroke;
}

.aglt-invite-profile-head,
.aglt-invite-profile-body {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aglt-invite-check-circle {
    fill: #fffaf0;
    stroke: #c88a16;
    stroke-width: 2.5;
}

.aglt-invite-check {
    fill: none;
    stroke: #9f6b0d;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aglt-locked-card h2 { margin: 10px auto 14px; }
.aglt-locked-card p { max-width: 650px; margin: 0 auto; }

.aglt-end-button {
    border-color: rgba(184,86,103,.28) !important;
    color: #9d4052 !important;
    background: rgba(184,86,103,.07) !important;
}

.aglt-language-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.aglt-language-pair > label {
    min-width: 0;
}

.aglt-language-help {
    margin: -4px 1px 2px;
    color: #777d78;
    font-size: 11px;
    line-height: 1.55;
}

.aglt-invite-share {
    display: grid;
    grid-template-columns: 56px minmax(220px, 1fr) minmax(360px, 1.35fr);
    align-items: center;
    gap: 18px;
    margin-top: 16px;
    padding: 17px 18px;
    border: 1px solid rgba(216,154,22,.24);
    border-radius: 18px;
    background: linear-gradient(135deg, #fffdf8 0%, #fff 54%, #fff9eb 100%);
    box-shadow: 0 14px 34px rgba(26,31,38,.07);
}
.aglt-invite-share[hidden] { display: none !important; }
.aglt-invite-share-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216,154,22,.25);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff7df, #fff);
    color: #a86e0d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.aglt-invite-share-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aglt-invite-share-copy > span {
    display: block;
    margin-bottom: 4px;
    color: #a56c0c;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .15em;
}
.aglt-invite-share-copy h3 { margin: 0 0 4px; color: #20272f; font-size: 17px; letter-spacing: -.025em; }
.aglt-invite-share-copy p { margin: 0; color: #767b77; font-size: 11px; line-height: 1.55; }
.aglt-invite-share-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: stretch; }
.aglt-invite-url-wrap {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(21,27,36,.12);
    border-radius: 13px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.aglt-invite-url-wrap:focus-within { border-color: rgba(216,154,22,.62); box-shadow: 0 0 0 4px rgba(216,154,22,.1); }
.aglt-invite-url-wrap input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #555c58;
    font-size: 10px;
    text-overflow: ellipsis;
}
.aglt-invite-url-wrap button,
.aglt-send-invite-button {
    min-height: 44px;
    border: 0;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.aglt-invite-url-wrap button {
    padding: 0 15px;
    border-left: 1px solid rgba(21,27,36,.1);
    background: #f8f6ef;
    color: #6f5830;
}
.aglt-send-invite-button {
    padding: 0 18px;
    border-radius: 13px;
    background: linear-gradient(135deg, #d89514, #efb63a);
    color: #171d25;
    box-shadow: 0 10px 22px rgba(205,139,11,.2);
}

.aglt-card[hidden],
.aglt-room-actions [hidden] { display: none !important; }

@media (max-width: 1080px) {
    .aglt-shell { width: min(100% - 28px, 1480px); }
    .aglt-hero { grid-template-columns: 1fr .65fr; }
    .aglt-hero-copy { padding: 56px 35px 56px 48px; }
    .aglt-conversation-layout { grid-template-columns: 1fr 320px; }
    .aglt-participant-state { display: none; }
    .aglt-language-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .aglt-shell { width: min(100% - 18px, 1480px); padding-top: 18px; }
    .aglt-hero { min-height: 0; grid-template-columns: 1fr; border-radius: 24px; }
    .aglt-hero-copy { padding: 44px 26px; }
    .aglt-hero h1 { font-size: clamp(39px, 11vw, 60px); }
    .aglt-hero-copy > p { font-size: 15px; }
    .aglt-hero-art { min-height: 380px; border-top: 1px solid rgba(255,255,255,.08); }
    .aglt-globe { width: 200px; height: 200px; }
    .aglt-flag-constellation { width: 310px; height: 310px; }
    .aglt-floating-flag { width: 32px; height: 22px; }
    .aglt-orbit-primary { width: 280px; height: 280px; }
    .aglt-orbit-secondary { width: 340px; height: 340px; }
    .aglt-main { margin-top: -12px; }
    .aglt-lobby, .aglt-room { padding: 14px; border-radius: 22px; }
    .aglt-status-ribbon { align-items: flex-start; flex-direction: column; }
    .aglt-card { min-height: 0; padding: 25px; }
    .aglt-room-topbar { align-items: flex-start; flex-direction: column; }
    .aglt-room-actions { width: 100%; }
    .aglt-room-actions button { flex: 1; }
    .aglt-session-strip { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
    .aglt-participant-grid { grid-template-columns: 1fr; }
    .aglt-conversation-layout { grid-template-columns: 1fr; }
    .aglt-control-panel { min-height: 455px; }
    .aglt-transcript-panel { min-height: 440px; }
    .aglt-transcript { height: 370px; }
    .aglt-ptt { width: 190px; height: 190px; margin-top: 38px; }
    .aglt-steps { grid-template-columns: 1fr; }
    .aglt-how-it-works { padding: 55px 4px 10px; }
    .aglt-language-list { grid-template-columns: 1fr; }
    .aglt-private-card { padding: 30px 22px; }
    .aglt-locked-card { padding: 48px 24px; }
    .aglt-language-pair { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 520px) {
    .aglt-shell { width: calc(100% - 10px); }
    .aglt-hero-copy { padding: 38px 21px; }
    .aglt-eyebrow { flex-wrap: wrap; font-size: 10px; }
    .aglt-hero-points { gap: 6px; }
    .aglt-hero-points span { padding: 8px 10px; font-size: 10px; }
    .aglt-card { padding: 21px 17px; border-radius: 18px; }
    .aglt-room-topbar h2 { font-size: 21px; }
    .aglt-room-actions { flex-direction: column; }
    .aglt-transcript-original,
    .aglt-transcript-translation { grid-template-columns: 1fr; gap: 2px; }
    .aglt-privacy-bar { align-items: flex-start; }
    .aglt-language-modal { width: calc(100% - 16px); max-height: calc(100vh - 18px); border-radius: 19px; }
    .aglt-language-modal-head { padding: 0 15px; }
    .aglt-language-modal-head h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .aglt-app *,
    .aglt-app *::before,
    .aglt-app *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}