/* Tailwind compatibility utilities extracted from resources/views/compat/index.blade.php */
        .absolute {
            position: absolute;
        }

        .flex {
            display: flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .items-center {
            align-items: center;
        }

        .justify-center {
            justify-content: center;
        }

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

        .gap-2 {
            gap: 0.5rem;
        }

        .w-full {
            width: 100%;
        }

        .w-96 {
            width: 24rem;
            max-width: 100%;
        }

        .h-full {
            height: 100%;
        }

        .h-12 {
            height: 3rem;
        }

        .top-8 {
            top: 2rem;
        }

        .right-32 {
            right: 8rem;
        }

        .z-20 {
            z-index: 20;
        }

        .z-50 {
            z-index: 50;
        }

        .mb-2 {
            margin-bottom: 0.5rem;
        }

        .mb-3 {
            margin-bottom: 0.75rem;
        }

        .mb-4 {
            margin-bottom: 1rem;
        }

        .mb-6 {
            margin-bottom: 1.5rem;
        }

        .mb-8 {
            margin-bottom: 2rem;
        }

        .ml-12 {
            margin-left: 3rem;
        }

        .mt-3 {
            margin-top: 0.75rem;
        }

        .p-3 {
            padding: 0.75rem;
        }

        .p-8 {
            padding: 2rem;
        }

        .px-3 {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .py-3 {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        .rounded-lg {
            border-radius: 0.5rem;
        }

        .rounded-2xl {
            border-radius: 1rem;
        }

        .border {
            border-width: 1px;
            border-style: solid;
        }

        .border-2 {
            border-width: 2px;
            border-style: solid;
        }

        .border-gray-300 {
            border-color: #d1d5db;
        }

        .bg-white {
            background-color: #fff;
        }

        .bg-gray-500 {
            background-color: #6b7280;
        }

        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--compat-gradient-from, transparent), var(--compat-gradient-to, transparent));
        }

        .from-purple-600 {
            --compat-gradient-from: #9333ea;
        }

        .to-purple-700 {
            --compat-gradient-to: #7e22ce;
        }

        .hover\:from-purple-700:hover {
            --compat-gradient-from: #7e22ce;
        }

        .hover\:to-purple-800:hover {
            --compat-gradient-to: #6b21a8;
        }

        .text-center {
            text-align: center;
        }

        .text-white {
            color: #fff;
        }

        .text-gray-600 {
            color: #4b5563;
        }

        .text-gray-700 {
            color: #374151;
        }

        .text-purple-600 {
            color: #9333ea;
        }

        .text-purple-800 {
            color: #6b21a8;
        }

        .text-sm {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }

        .text-lg {
            font-size: 1.125rem;
            line-height: 1.75rem;
        }

        .text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }

        .text-2xl {
            font-size: 1.5rem;
            line-height: 2rem;
        }

        .text-4xl {
            font-size: 2.25rem;
            line-height: 2.5rem;
        }

        .text-5xl {
            font-size: 3rem;
            line-height: 1;
        }

        .font-semibold {
            font-weight: 600;
        }

        .font-bold {
            font-weight: 700;
        }

        .font-mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        .select-none {
            user-select: none;
            -webkit-user-select: none;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .transform {
            transform: translateZ(0);
        }

        .transition-colors {
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }

        .transition-all {
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }

        .duration-300 {
            transition-duration: 300ms;
        }

        .shadow-2xl {
            box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
        }

        .hover\:shadow-lg:hover {
            box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.15), 0 4px 6px -4px rgba(15, 23, 42, 0.15);
        }

        .hover\:text-purple-800:hover {
            color: #6b21a8;
        }

        .hover\:scale-105:hover {
            transform: scale(1.05);
        }

        .focus\:border-purple-500:focus {
            border-color: #a855f7;
        }

        .focus\:outline-none:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
        }

/* Main compatibility screen styles extracted from resources/views/compat/index.blade.php */
        :root {
            --compat-surface: #ffffff;
            --compat-surface-muted: #f8fafc;
            --compat-surface-strong: #f1f5f9;
            --compat-border: #d8dee8;
            --compat-border-strong: #c6ceda;
            --compat-text: #1f2937;
            --compat-text-muted: #64748b;
            --compat-accent: #532e61;
            --compat-accent-strong: #40214c;
            --compat-accent-soft: #f4eef7;
            --compat-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
            --compat-shadow-md: 0 14px 32px rgba(15, 23, 42, 0.10);
        }

        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        body,
        html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(83, 46, 97, 0.07), transparent 34%),
                linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
            color: var(--compat-text);
            max-height: 100vh;
            overflow: hidden;
            /* デフォルトでスクロールを無効化 */
        }

        /* 高さが十分にある場合のみスクロールを許可 */
        @media (min-height: 900px) {

            body,
            html {
                overflow-y: auto;
                max-height: none;
            }
        }

        .container-box {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: none;
            height: calc(100vh - clamp(50px, 8vh, 80px));
            /* 画面全体の高さからタイトル分を引く - 自動調整 */
            padding: clamp(10px, 2vh, 20px) clamp(14px, 2.2vw, 28px) clamp(12px, 1.8vh, 22px);
            width: 100%;
            box-sizing: border-box;
        }

        .room-container {
            display: flex;
            flex-direction: column;
            padding: clamp(10px, 2vw, 20px);
            flex-grow: 2;
            flex-basis: 0%;
            box-sizing: border-box;
        }

        .keypad-container {
            --keypad-touch-target: 64px;
            --keypad-gap: clamp(6px, 1.1vh, 12px);
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            max-width: min(70%, 600px);
            width: 100%;
            height: calc(100% - clamp(10px, 2vh, 20px));
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid var(--compat-border);
            border-radius: clamp(10px, 1.2vw, 16px);
            box-shadow: var(--compat-shadow-md);
            margin: clamp(5px, 1vh, 10px) auto;
            overflow: hidden;
        }

        .display {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: clamp(1.2rem, 4vh, 3rem);
            padding: clamp(5px, 1vh, 15px);
            margin-bottom: clamp(5px, 1vh, 15px);
            border: 1px solid var(--compat-border);
            border-left: clamp(4px, 0.55vh, 6px) solid var(--compat-accent);
            margin-left: clamp(10px, 2vw, 25px);
            margin-right: clamp(10px, 2vw, 25px);
            margin-top: clamp(8px, 2vh, 25px);
            color: var(--compat-text);
            font-weight: bold;
            height: clamp(30px, 6vh, 60px);
            min-height: 44px;
            background: var(--compat-surface-muted);
            border-radius: clamp(6px, 0.8vw, 10px);
            line-height: 1;
            letter-spacing: 0;
            overflow: hidden;
            white-space: nowrap;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
        }

        /* タイトルテキスト - レスポンシブ対応 */
        .video-text {
            font-size: clamp(0.9rem, 2.5vh, 1.25rem) !important;
            margin-left: clamp(1rem, 3vw, 3rem) !important;
            margin-top: clamp(0.3rem, 1vh, 0.75rem) !important;
            padding: clamp(5px, 1vh, 10px) 0;
        }

        .title-message-text {
            color: var(--compat-text);
        }

        .keypad-container > .title-message-text {
            flex-shrink: 0;
            line-height: 1.25;
            color: var(--compat-text-muted);
            font-weight: 700;
        }

        .debug-unlock-button {
            background: rgba(255,255,255,0.9);
            padding: 5px 10px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .keypad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(var(--keypad-touch-target), 1fr);
            gap: var(--keypad-gap);
            padding: clamp(6px, 1vh, 15px);
            flex: 1;
            align-content: center;
            min-height: 0;
        }

        .key {
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            min-width: 0;
            min-height: var(--keypad-touch-target);
            padding: clamp(8px, 2.5vh, 35px) 0px;
            text-align: center;
            font-size: clamp(1.2rem, min(4vh, 5vw), 4rem);
            font-family: inherit;
            cursor: pointer;
            color: var(--compat-text);
            font-weight: bold;
            background: var(--compat-surface);
            border-radius: clamp(6px, 0.8vw, 10px);
            box-shadow: var(--compat-shadow-sm);
            transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
            border: 1px solid var(--compat-border);
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: manipulation;
            user-select: none;
        }

        .key:hover {
            transform: translateY(-1px);
            background: #fbfcfe;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
            border-color: var(--compat-border-strong);
        }

        .key:active {
            transform: translateY(0);
            background: var(--compat-surface-strong);
            box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.10);
        }

        .key:focus-visible,
        .call-button:focus-visible,
        .manager-call-button:focus-visible,
        #tatoModeButtons .call-button-wide:focus-visible,
        #tatoModeButtons .manager-call-button-wide:focus-visible {
            outline: 4px solid rgba(83, 46, 97, 0.28);
            outline-offset: 3px;
        }

        #clearButton,
        #clearButtonWide,
        #tatoModeButtons .clear-button {
            background: #f8fafc;
            border-color: var(--compat-border);
            color: var(--compat-text-muted);
            box-shadow: none;
        }

        .key-span-3 {
            grid-column: span 3;
        }

        /* ダッシュボタンのスタイル - 通常の白いボタン */
        #dashButton {
            /* 他のキーボタンと同じスタイルを継承 */
        }

        /* 多棟モード時の横幅いっぱいの消ボタン行 */
        #clearButtonRow {
            display: none;
            width: 100%;
            margin-top: 10px;
            padding: 0 clamp(6px, 1vh, 15px);
            box-sizing: border-box;
        }

        /* 多棟モード時の新しいボタン配置 */
        #tatoModeButtons {
            display: none;
            grid-template-columns: 1fr 2fr;
            gap: 10px;
            margin-top: 10px;
            padding: 0 clamp(10px, 2vw, 20px) clamp(8px, 1.5vh, 20px);
        }

        #tatoModeButtons.has-manager-call {
            grid-template-columns: minmax(90px, 1fr) minmax(165px, 1.75fr) minmax(120px, 1.15fr);
        }

        #tatoModeButtons .clear-button {
            grid-column: 1;
        }

        #tatoModeButtons .call-button-wide,
        #tatoModeButtons .manager-call-button-wide {
            appearance: none;
            -webkit-appearance: none;
            grid-column: 2;
            text-align: center;
            border: none;
            border-radius: clamp(6px, 1vw, 12px);
            cursor: pointer;
            padding: clamp(8px, 2.5vh, 35px) 0px;
            transition: all 0.3s ease;
            font-weight: bold;
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: manipulation;
        }

        #tatoModeButtons .call-button-wide {
            background: var(--compat-accent);
            color: white;
            font-size: clamp(1rem, 3vh, 2.5rem);
            border: 1px solid var(--compat-accent-strong);
            box-shadow: 0 8px 18px rgba(83, 46, 97, 0.20);
        }

        #tatoModeButtons.has-manager-call .manager-call-button-wide {
            grid-column: 3;
        }

        #tatoModeButtons .manager-call-button-wide {
            display: none;
            background: var(--compat-surface);
            color: var(--compat-accent);
            font-size: clamp(0.9rem, 2vh, 1.15rem);
            line-height: 1.2;
            padding: clamp(8px, 2vh, 24px) clamp(8px, 1.5vw, 14px);
            border: 1px solid rgba(83, 46, 97, 0.26);
            box-shadow: var(--compat-shadow-sm);
            letter-spacing: 0.03em;
            white-space: normal;
            word-break: keep-all;
        }

        #tatoModeButtons.has-manager-call .manager-call-button-wide {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #tatoModeButtons .call-button-wide:hover {
            transform: translateY(-1px);
            background: var(--compat-accent-strong);
            box-shadow: 0 10px 22px rgba(83, 46, 97, 0.24);
        }

        #tatoModeButtons .manager-call-button-wide:hover {
            transform: translateY(-1px);
            background: var(--compat-accent-soft);
            box-shadow: 0 8px 16px rgba(83, 46, 97, 0.12);
            border-color: rgba(83, 46, 97, 0.34);
        }

        #tatoModeButtons .call-button-wide:active {
            transform: translateY(0);
            background: var(--compat-accent-strong);
        }

        #tatoModeButtons .manager-call-button-wide:active {
            transform: translateY(0);
            background: #eadff0;
        }

        #clearButtonWide {
            width: 100%;
            grid-column: span 3;
        }

        /* 多棟モード時のキーパッド調整 */
        .keypad.tato-mode .keypad-row {
            grid-template-columns: repeat(3, 1fr);
        }

        .action-button-row {
            display: flex;
            gap: clamp(8px, 1.5vw, 14px);
            margin: clamp(5px, 1vh, 12px) clamp(10px, 2vw, 20px) clamp(8px, 1.5vh, 20px) clamp(10px, 2vw, 20px);
            flex-shrink: 0;
            align-items: stretch;
        }

        .action-button-row.has-manager-call .manager-call-button {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }

        .action-button-row.has-manager-call .call-button {
            flex: 2;
        }

        .call-button,
        .manager-call-button {
            appearance: none;
            -webkit-appearance: none;
            background: var(--compat-accent);
            color: white;
            font-size: clamp(1rem, 3vh, 2.5rem);
            font-family: inherit;
            text-align: center;
            border: 1px solid var(--compat-accent-strong);
            border-radius: clamp(6px, 0.8vw, 10px);
            cursor: pointer;
            height: clamp(40px, 7vh, 80px);
            min-height: 56px;
            box-shadow: 0 8px 18px rgba(83, 46, 97, 0.20);
            transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
            font-weight: bold;
            flex-shrink: 0;
            width: 100%;
            margin: 0;
            min-width: 0;
            touch-action: manipulation;
        }

        .call-button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.35em;
        }

        .call-button:hover {
            transform: translateY(-1px);
            background: var(--compat-accent-strong);
            box-shadow: 0 10px 22px rgba(83, 46, 97, 0.24);
        }

        .call-button:active {
            transform: translateY(0);
            background: var(--compat-accent-strong);
        }

        .manager-call-button {
            display: none;
            background: var(--compat-surface);
            color: var(--compat-accent);
            font-size: clamp(0.92rem, 2.2vh, 1.18rem);
            line-height: 1.2;
            padding: 0 clamp(12px, 1.8vw, 18px);
            border: 1px solid rgba(83, 46, 97, 0.26);
            box-shadow: var(--compat-shadow-sm);
            letter-spacing: 0.03em;
            text-align: center;
            white-space: normal;
            word-break: keep-all;
        }

        .manager-call-button:hover {
            transform: translateY(-1px);
            background: var(--compat-accent-soft);
            box-shadow: 0 8px 16px rgba(83, 46, 97, 0.12);
            border-color: rgba(83, 46, 97, 0.34);
        }

        .manager-call-button:active {
            transform: translateY(0);
            background: #eadff0;
        }

        .manager-call-button:disabled,
        #tatoModeButtons .manager-call-button-wide:disabled,
        .call-button:disabled,
        #tatoModeButtons .call-button-wide:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            padding-top: 60px;
        }

        /* 呼出中は背景ぼかしを外してメッセージ視認性を優先 */
        #skywayModal {
            backdrop-filter: none;
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* Media Streams通話UI */
        .media-streams-complete-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 5% auto;
            padding: 40px;
            width: 600px;
            border-radius: 20px;
            text-align: center;
            color: white;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .connection-status {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
        }

        .status-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #fbbf24;
            animation: pulse 2s infinite;
        }

        .status-dot.connected {
            background-color: #10b981;
        }

        .status-dot.error {
            background-color: #ef4444;
        }

        .status-dot.token-refreshing {
            background-color: #8b5cf6;
        }

        .dtmf-history {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 25px;
            flex-wrap: wrap;
        }

        .end-call-btn {
            background: linear-gradient(45deg, #f44336, #d32f2f);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.1rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
            position: relative;
            z-index: 1100;
        }

        /* 🆕 ボタンクリック時の視覚的フィードバックを改善 */
        .end-call-btn:active,
        .round-button.end-call:active {
            transform: scale(0.95);
            background: linear-gradient(45deg, #d32f2f, #b71c1c) !important;
        }

        .end-call-btn:disabled,
        .round-button.end-call:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background: #666 !important;
            transform: none;
        }

        /* 🆕 通話終了ボタンのホバー効果を強化 */
        .end-call-btn:hover:not(:disabled) {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(244, 67, 54, 0.5);
        }

        .round-button.end-call:hover:not(:disabled) {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(239, 47, 47, 0.5);
        }

        .unlock-message {
            background: rgba(76, 175, 80, 0.2);
            padding: 25px;
            border-radius: 15px;
            margin: 20px 0;
            border: 2px solid #4caf50;
            animation: unlockPulse 2s infinite;
        }

        .success-icon {
            font-size: 3rem;
            margin-bottom: 10px;
            animation: unlockRotate 1s ease-in-out;
        }

        /* トークン状態表示 */
        .token-status {
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            z-index: 1001;
            transition: all 0.3s ease;
        }

        .token-status.valid {
            background: rgba(76, 175, 80, 0.9);
        }

        .token-status.warning {
            background: rgba(255, 152, 0, 0.9);
        }

        .token-status.expired {
            background: rgba(244, 67, 54, 0.9);
        }

        .token-status.refreshing {
            background: rgba(139, 92, 246, 0.9);
        }

        /* 部屋グリッド - 大幅改善 */
        .room-box {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
            height: 100%;
            overflow-y: auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin: 10px;
        }

        .room {
            width: 100%;
            min-height: 150px;
            padding: 20px;
            font-size: 3.5em;
            text-align: center;
            background: linear-gradient(145deg, #e7dbef, #d4c4dd);
            border-radius: 20px;
            color: #532e61;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(83, 46, 97, 0.15);
            border: 3px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .room::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .room:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(83, 46, 97, 0.25);
            border-color: #532e61;
            background: linear-gradient(145deg, #f0e6f7, #e1d1e8);
        }

        .room:hover::before {
            opacity: 1;
        }

        .room:active {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(83, 46, 97, 0.3);
            background: linear-gradient(145deg, #d0c1d8, #c0afc7);
        }

        .grayRoom {
            width: 100%;
            min-height: 150px;
            padding: 20px;
            font-size: 3.5em;
            text-align: center;
            background: linear-gradient(145deg, #f5f5f5, #e5e5e5);
            border-radius: 20px;
            color: #999;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            opacity: 0.6;
        }

        .toast {
            visibility: hidden;
            opacity: 0;
            min-width: clamp(200px, 50vw, 500px);
            max-width: 90vw;
            background: linear-gradient(145deg, #333, #444);
            color: #fff;
            text-align: center;
            border-radius: clamp(8px, 1.5vw, 15px);
            padding: clamp(15px, 3vh, 35px) clamp(20px, 4vw, 40px);
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            font-size: clamp(1rem, 3vh, 2.5rem);
            white-space: pre-line;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            will-change: transform, opacity;
            z-index: 2100;
        }

        .toast.show {
            visibility: visible;
            animation: toastFadeIn 0.3s ease-out forwards, toastFadeOut 0.3s ease-in 4.7s forwards;
        }

        /* Skyway用スタイル */
        .modal-content {
            margin: 5% auto;
            padding: 20px;
            width: 80%;
            max-width: calc(100% - min(36vw, 460px) - 48px);
            border-radius: 10px;
            text-align: center;
            color: #fefefe;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            height: 50%;
        }

        .skyway-side-panel {
            z-index: 1;
            position: absolute;
            top: 12px;
            right: 12px;
            width: min(33vw, 420px);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .video-display {
            position: relative;
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            box-sizing: border-box;
            border-radius: 15px;
            border: 2px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
        }

        #my-video {
            background: rgb(41, 41, 41);
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
        }

        .round-button {
            border: none;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(145deg, #ef2f2f, #d32525);
            box-shadow: 0 8px 25px rgba(239, 47, 47, 0.3);
            transition: box-shadow 0.3s ease, transform 0.2s ease;
            cursor: pointer;
            z-index: 1100;

            /* margin-topはFlexboxのgapで制御するため削除、もしくは微調整 */
            margin-top: 10px;
        }

        .round-button:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(239, 47, 47, 0.4);
        }

        .round-button img {
            width: 50%;
            height: auto;
        }

        .centered-content {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .is-hidden {
            display: none !important;
        }

        .mic-empty-state {
            padding: 20px;
            opacity: 0.7;
        }

        .unlock-complete-inline {
            color: #4caf50;
            font-size: 1.3rem;
        }

        .call-icon-large {
            font-size: 2rem;
        }

        /* テキストのスタイル調整 */
        .status-text {
            text-align: center;
            margin: 0;
            /* 余計な余白を消す */
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
            position: relative;
            z-index: 1200;
        }

        /* メッセージボックス */
        #skyway-message-box {
            width: 100%;
            max-width: 90%;
            min-height: 5rem;
            /* 高さを確保 */
            /* display: none; はJSで制御するためそのまま */
            background: rgba(17, 24, 39, 0.9) !important;
            color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.35);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
            position: relative;
            z-index: 1300;
        }

        .delivery-notification-panel {
            background: rgba(255, 255, 255, 0.96);
            color: #1f2937;
            border-radius: 16px;
            padding: 14px;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.35);
        }

        .delivery-notification-title {
            font-size: clamp(1rem, 1.5vw, 1.15rem);
            font-weight: 700;
            margin-bottom: 10px;
            color: #111827;
        }

        .delivery-notification-buttons {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .delivery-notification-button {
            width: 100%;
            border: 1px solid #d1d5db;
            border-radius: 12px;
            background: linear-gradient(145deg, #ffffff, #f3f4f6);
            color: #1f2937;
            font-size: clamp(0.9rem, 1.15vw, 1rem);
            font-weight: 700;
            line-height: 1.35;
            padding: 12px 14px;
            text-align: left;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .delivery-notification-button:hover:not(:disabled) {
            transform: translateY(-1px);
            border-color: #2563eb;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
        }

        .delivery-notification-button:disabled {
            cursor: not-allowed;
            opacity: 0.72;
            transform: none;
        }

        .delivery-notification-button.sending {
            border-color: #d97706;
            background: linear-gradient(145deg, #fff7ed, #ffedd5);
            color: #9a3412;
            opacity: 1;
        }

        .delivery-notification-button.selected,
        .delivery-notification-button.selected:disabled {
            border-color: #15803d;
            background: linear-gradient(145deg, #ecfdf5, #dcfce7);
            color: #166534;
            box-shadow: 0 10px 20px rgba(22, 101, 52, 0.15);
            opacity: 1;
        }

        .logout-button {
            position: absolute;
            top: 20px;
            right: 20px;
            background: linear-gradient(145deg, #ff6b6b, #ee5a52);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
            text-decoration: none;
            z-index: 100;
        }

        .logout-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        }

        /* 🆕 マイクデバイス設定ボタンのスタイル */
        .microphone-settings-button {
            position: absolute;
            top: 20px;
            right: 150px;
            /* ログアウトボタンの左側に配置 */
            background: linear-gradient(145deg, #4caf50, #45a049);
            color: white;
            padding: 10px 15px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.2rem;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
            transition: all 0.3s ease;
            border: none;
            z-index: 100;
        }

        .microphone-settings-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        .microphone-settings-button:active {
            transform: scale(0.95);
            background: linear-gradient(145deg, #45a049, #3d8b40);
        }

        /* 🆕 マイクデバイス選択モーダル */
        .microphone-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
        }

        .microphone-modal-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 8% auto;
            padding: 40px;
            width: 600px;
            max-width: 90%;
            border-radius: 20px;
            text-align: center;
            color: white;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .device-list {
            margin: 20px 0;
            max-height: 300px;
            overflow-y: auto;
        }

        .device-item {
            background: rgba(255, 255, 255, 0.1);
            margin: 10px 0;
            padding: 15px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            text-align: left;
        }

        .device-item:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .device-item.selected {
            background: rgba(76, 175, 80, 0.3);
            border-color: #4caf50;
        }

        .device-name {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .device-id {
            font-size: 0.9rem;
            opacity: 0.8;
            word-break: break-all;
        }

        .modal-buttons {
            margin-top: 30px;
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .modal-btn {
            padding: 12px 25px;
            border: none;
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }

        .modal-btn.primary {
            background: linear-gradient(145deg, #4caf50, #45a049);
            color: white;
        }

        .modal-btn.secondary {
            background: linear-gradient(145deg, #6c757d, #5a6268);
            color: white;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        /* レスポンシブ対応 - clamp()による自動スケーリングを基本とし、構造変更のみメディアクエリで対応 */

        /* ルームボックスのグリッド調整 */
        @media (max-width: 1200px) {
            .room-box {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: clamp(10px, 1.5vw, 15px);
            }

            .room {
                min-height: clamp(80px, 15vh, 130px);
                font-size: clamp(1.8em, 4vw, 3em);
            }
        }

        /* 全画面サイズ共通 - intercom-boxの構造 */
        .intercom-box {
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* タブレット横向き - 画面内に確実に収まるサイズ */
        @media (orientation: landscape) and (min-width: 768px) {
            .container-box {
                height: calc(100vh - clamp(28px, 4.5vh, 45px));
                padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.8vw, 22px) clamp(8px, 1.2vh, 14px);
            }

            .keypad-container {
                --keypad-touch-target: 72px;
                --keypad-gap: clamp(7px, 1.25vh, 13px);
                max-width: min(92vw, 720px);
                height: 100%;
                margin: 0 auto;
                border-radius: clamp(10px, 1vw, 14px);
            }

            .key {
                padding: 0;
                font-size: clamp(1.8rem, min(5.6vh, 5vw), 4.2rem);
            }

            .keypad {
                padding: clamp(8px, 1.35vh, 15px) clamp(10px, 1.4vw, 18px);
                flex: 1;
                align-content: center;
            }

            .display {
                height: clamp(56px, 8vh, 78px);
                min-height: 56px;
                font-size: clamp(1.75rem, 4.8vh, 3.25rem);
                margin-top: clamp(4px, 0.8vh, 10px);
                margin-bottom: clamp(6px, 1vh, 12px);
                margin-left: clamp(14px, 2vw, 24px);
                margin-right: clamp(14px, 2vw, 24px);
                padding: clamp(8px, 1.2vh, 14px);
            }

            .action-button-row {
                gap: clamp(10px, 1.5vw, 18px);
                margin: clamp(6px, 1vh, 12px) clamp(14px, 2vw, 24px) clamp(12px, 1.8vh, 20px);
            }

            .call-button,
            .manager-call-button {
                height: clamp(64px, 8.6vh, 88px);
                min-height: 64px;
                font-size: clamp(1.35rem, 3.6vh, 2.8rem);
                flex-shrink: 0;
            }

            .manager-call-button {
                font-size: clamp(0.96rem, 2.05vh, 1.14rem);
            }

            #tatoModeButtons .call-button-wide,
            #tatoModeButtons .manager-call-button-wide {
                min-height: 64px;
                padding: 0 clamp(8px, 1.2vw, 14px);
                font-size: clamp(1.28rem, 3.4vh, 2.6rem);
            }

            #tatoModeButtons .manager-call-button-wide {
                font-size: clamp(0.94rem, 2vh, 1.1rem);
                padding: 0 clamp(8px, 1.2vw, 14px);
            }

            .video-text {
                font-size: clamp(1.05rem, 2.35vh, 1.5rem) !important;
                margin-top: clamp(6px, 1vh, 10px) !important;
                margin-left: clamp(1.2rem, 2.4vw, 2.4rem) !important;
                padding: clamp(3px, 0.65vh, 6px) 0 !important;
            }

            .font-bold.text-3xl {
                font-size: clamp(1.2rem, 2.75vh, 2rem) !important;
                margin-top: clamp(0.1rem, 0.55vh, 0.33rem) !important;
                margin-left: clamp(0.33rem, 1.1vw, 0.66rem) !important;
                margin-bottom: clamp(0.1rem, 0.33vh, 0.22rem) !important;
            }
        }

        /* タブレット縦向き - 余白を詰めてコンパクトに */
        @media (orientation: portrait) and (min-width: 600px) {
            .container-box {
                height: calc(100vh - clamp(32px, 3.5vh, 45px));
                padding: 0 clamp(9px, 1.65vw, 16px) clamp(3px, 0.55vh, 9px);
            }

            .keypad-container {
                max-width: min(92%, 640px);
                height: auto;
                margin: clamp(3px, 0.55vh, 9px) auto;
            }

            .display {
                height: clamp(50px, 6.6vh, 77px);
                font-size: clamp(1.55rem, 5vh, 3.1rem);
                margin-top: clamp(9px, 1.65vh, 16px);
                margin-bottom: clamp(6px, 1.1vh, 11px);
                padding: clamp(9px, 1.65vh, 16px);
            }

            .key {
                padding: 0;
                aspect-ratio: 1 / 0.85;
                font-size: clamp(2.2rem, min(6vh, 10vw), 5rem);
            }

            .keypad {
                gap: clamp(9px, 1.65vw, 15px);
                padding: clamp(9px, 1.65vw, 20px);
                flex: 0 1 auto;
            }

            .action-button-row {
                margin: clamp(6px, 1.1vh, 11px) clamp(11px, 2.2vw, 22px) clamp(11px, 1.65vh, 16px);
            }

            .call-button,
            .manager-call-button {
                height: clamp(55px, 7.7vh, 93px);
                font-size: clamp(1.4rem, 3.85vh, 3.1rem);
            }

            .manager-call-button {
                font-size: clamp(0.98rem, 2.2vh, 1.18rem);
            }

            #tatoModeButtons .call-button-wide,
            #tatoModeButtons .manager-call-button-wide {
                padding: clamp(13px, 2.75vh, 28px) 0px;
                font-size: clamp(1.4rem, 3.85vh, 3.1rem);
            }

            #tatoModeButtons .manager-call-button-wide {
                font-size: clamp(0.94rem, 2.2vh, 1.1rem);
                padding: clamp(10px, 2.1vh, 22px) clamp(8px, 1.2vw, 12px);
            }
        }

        /* モバイル対応 - フルワイズレイアウト */
        @media (max-width: 768px) {
            .container-box {
                flex-direction: column;
                padding: clamp(5px, 1vh, 10px);
            }

            .keypad-container {
                max-width: 100%;
                order: 2;
            }

            .room-container {
                order: 1;
            }

            .room-box {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: clamp(5px, 1vw, 10px);
            }

            .room {
                min-height: clamp(60px, 12vh, 100px);
                font-size: clamp(1.5em, 5vw, 2.5em);
            }

            .video-text {
                font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
                margin-top: clamp(3px, 1vh, 5px) !important;
            }

            .action-button-row {
                gap: clamp(6px, 2vw, 10px);
            }

            .manager-call-button {
                font-size: clamp(0.86rem, 2.3vw, 0.98rem);
                padding: 0 clamp(8px, 2vw, 12px);
            }

            #tatoModeButtons.has-manager-call {
                grid-template-columns: minmax(72px, 0.9fr) minmax(132px, 1.45fr) minmax(102px, 1fr);
                gap: 8px;
            }

            #tatoModeButtons .manager-call-button-wide {
                font-size: clamp(0.8rem, 2vw, 0.9rem);
            }

            .modal-content {
                width: calc(100% - 24px);
                max-width: none;
                height: auto;
                min-height: 0;
                margin: 0 auto 16px;
                padding: 16px;
            }

            .skyway-side-panel {
                position: static;
                width: calc(100% - 24px);
                max-width: 460px;
                margin: 0 auto 20px;
            }

            .delivery-notification-panel {
                padding: 12px;
            }

            .delivery-notification-button {
                font-size: 0.9rem;
                padding: 11px 12px;
            }
        }

        /* 極端に低い高さの画面（横向きスマートフォン等） */
        @media (max-height: 400px) {
            .display {
                margin-top: clamp(3px, 1vh, 8px);
                margin-bottom: clamp(3px, 1vh, 8px);
            }

            .keypad {
                gap: clamp(3px, 0.8vh, 6px);
                padding: clamp(5px, 1vh, 10px);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        @keyframes fadein {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeout {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /* トースト用の滑らかなアニメーション */
        @keyframes toastFadeIn {
            from {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.9);
            }

            to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes toastFadeOut {
            from {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            to {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.9);
            }
        }

        @keyframes unlockPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
            }

            50% {
                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
            }
        }

        @keyframes unlockRotate {
            0% {
                transform: rotate(0deg) scale(1);
            }

            50% {
                transform: rotate(180deg) scale(1.2);
            }

            100% {
                transform: rotate(360deg) scale(1);
            }
        }