/* ══════════════════════════════════════════
   OpenClaw Gateway Panel
   ══════════════════════════════════════════ */

/* ── 패널 헤더 ── */
.oc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-bottom: none;
}

.oc-panel-title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.oc-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* ── 버튼 ── */
.oc-btn-sm {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    color: var(--text-sub);
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}

.oc-btn-sm:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.oc-btn-sm:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.oc-btn-sm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.oc-btn-accent {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-s);
    background: var(--accent);
    color: var(--contrast-on-accent);
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}

.oc-btn-accent:hover {
    filter: brightness(var(--hover-brightness));
    box-shadow: var(--glow-accent);
    transform: translateY(var(--hover-lift-sm));
}
.oc-btn-accent:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.oc-btn-accent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 서브탭 네비게이션 ── */
.oc-subtabs {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-bottom: none;
}

.oc-subtab-btn {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-sub);
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}

.oc-subtab-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.oc-subtab-btn:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.oc-subtab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.oc-subtab-btn.active {
    background: var(--surface-active);
    color: var(--text);
    font-weight: var(--weight-semibold);
}

/* ── 에이전트 카드 그리드 ── */
.oc-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-4);
    padding: var(--s-5);
}

.oc-agent-grid:empty {
    display: none;
}

/* transition/transform/box-shadow → animations.css Tier 1 단일 권위 (.oc-agent-card:not(.no-lift)) */
.oc-agent-card {
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-4);
    cursor: pointer;
}

.oc-agent-card:hover {
    background: var(--surface-hover);
}

.oc-agent-card-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.oc-agent-icon {
    font-size: var(--text-xl);
}

.oc-agent-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    color: var(--text);
}

.oc-agent-status {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}

.oc-agent-status.active {
    background: var(--status-running);
    animation: dotPulse 2s infinite;
}

.oc-agent-status.working {
    background: var(--status-running);
    animation: dotPulse 2s infinite;
}

.oc-agent-status.idle {
    background: var(--text-sub);
}

.oc-agent-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.oc-agent-model {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
}

.oc-agent-sessions {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.oc-agent-card-footer {
    margin-top: var(--s-3);
}

/* ── 채널 요약 바 ── */
.oc-channel-summary {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    border-top: none;
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.oc-channel-summary:empty {
    display: none;
}

/* ── 메시지 피드 ── */
.oc-msg-agent-select {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-bottom: none;
}

.oc-msg-agent-select select {
    background-color: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-3);
    color: var(--text);
    font: inherit;
    font-size: var(--text-base);
}

.oc-msg-agent-select select:focus {
    border-color: var(--accent);
    outline: none;
}

.oc-session-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
}

.oc-msg-feed {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    scrollbar-width: thin;
    scrollbar-color: var(--surface-hover) transparent;
}

.oc-msg-feed::-webkit-scrollbar { width: var(--s-1); }
.oc-msg-feed::-webkit-scrollbar-track { background: transparent; }
.oc-msg-feed::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: var(--radius-pill); }

.oc-msg-bubble {
    max-width: 80%;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.oc-msg-user {
    align-self: flex-end;
    background: var(--surface-w10);
    color: var(--text);
    border: 1px solid var(--line);
}

.oc-msg-assistant {
    align-self: flex-start;
    background: var(--surface);
    color: var(--text);
    border: none;
}

.oc-msg-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    display: block;
    margin-bottom: var(--s-1);
}

.oc-msg-body {
    word-break: break-word;
}

.oc-msg-body code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--surface-active);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
}

/* ── 입력 영역 ── */
.oc-msg-input-bar {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-top: none;
}

.oc-msg-input-bar input {
    flex: 1;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-3);
    color: var(--text);
    font: inherit;
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--motion-hover);
}

.oc-msg-input-bar input:focus {
    border-color: var(--accent);
}

.oc-msg-input-bar input::placeholder {
    color: var(--text-sub);
}

/* ── 연결 뱃지 ── */
.oc-connection-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.oc-connection-badge.connected {
    background: var(--clr-success-bg-sm);
    color: var(--clr-success);
}

.oc-connection-badge.disconnected {
    background: var(--clr-error-bg-sm);
    color: var(--clr-error);
}

.oc-conn-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
}

.oc-connection-badge.connected .oc-conn-dot {
    background: var(--clr-success);
    animation: dotPulse 2s infinite;
}

.oc-connection-badge.disconnected .oc-conn-dot {
    background: var(--clr-error);
}

/* ── 작업 테이블 ── */
.oc-sessions-container {
    padding: var(--s-5);
}

.oc-session-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.oc-session-table th {
    text-align: left;
    padding: var(--s-2) var(--s-3);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
    border-bottom: none;
    font-size: var(--text-sm);
}

.oc-session-table td {
    padding: var(--s-2) var(--s-3);
    color: var(--text-sub);
    border-bottom: none;
}

.oc-session-table tr:hover td {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

.oc-session-actions {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-4) 0 0;
}

/* ── 채널 카드 ── */
.oc-channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--s-3);
    padding: var(--s-5);
}

.oc-channel-card {
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-4);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}

.oc-channel-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(var(--hover-lift-sm));
}

.oc-channel-card-icon {
    font-size: var(--text-5xl);
    margin-bottom: var(--s-2);
}

.oc-channel-card-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    color: var(--text);
    margin-bottom: var(--s-1);
}

.oc-channel-card-status {
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.oc-channel-card-status.connected { color: var(--clr-success); }
.oc-channel-card-status.disconnected { color: var(--clr-error); }

.oc-channel-card-account {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
    margin-top: var(--s-1);
}

.oc-channel-card-binding {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

/* ── 라우팅 테이블 ── */
.oc-routing-table {
    padding: var(--s-5);
    border-top: none;
}

.oc-routing-table:empty {
    display: none;
}

/* ── 스킬 목록 ── */
.oc-skills-list {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.oc-skills-list:empty {
    display: none;
}

/* ── 설정 모달 ── */
.oc-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.oc-settings-form label {
    font-size: var(--text-base);
    color: var(--text-sub);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.oc-settings-form input[type="text"],
.oc-settings-form input[type="password"] {
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-3);
    color: var(--text);
    font: inherit;
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--motion-hover);
}

.oc-settings-form input[type="text"]:focus,
.oc-settings-form input[type="password"]:focus {
    border-color: var(--accent);
}

.oc-settings-form .oc-toggle-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.oc-toggle-row input[type="checkbox"] {
    width: var(--s-7);
    height: var(--s-5-0);
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-active);
    border-radius: var(--radius);
    position: relative;
    cursor: pointer;
    transition: background var(--duration-base) var(--easing-spring), box-shadow var(--duration-base) var(--easing-out);
}

.oc-toggle-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--s-4);
    height: var(--s-4);
    border-radius: 50%;
    background: var(--text);
    transition: transform var(--duration-moderate) var(--easing-spring), background var(--duration-base) var(--easing-spring);
}

.oc-toggle-row input[type="checkbox"]:checked {
    background: var(--accent);
}

.oc-toggle-row input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}

/* ── 빈 상태 ── */
/* 공통 레이아웃은 components.css 셀렉터 그룹에서 상속 */
.oc-empty-state {
    padding: var(--s-6) var(--s-5);
    font-size: var(--text-base); /* oc는 본문 크기 사용 */
}

.oc-empty-state:empty {
    display: none;
}

/* ── 서브패널 공통 ── */
.oc-subpanel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 메시지 서브패널 — 전체 높이 활용 */
#oc-sub-messages {
    height: calc(100vh - var(--topbar-h) - 180px);
}

/* ══════════════════════════════════════════
   반응형 — 4단계
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .oc-agent-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .oc-channel-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}
@media (max-width: 960px) {
    .oc-agent-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .oc-channel-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .oc-agent-grid {
        grid-template-columns: 1fr 1fr;
        padding: var(--s-4);
    }

    .oc-channel-grid {
        grid-template-columns: 1fr 1fr;
        padding: var(--s-4);
    }

    .oc-msg-bubble {
        max-width: 90%;
    }

    .oc-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
    }
}

@media (max-width: 640px) {
    .oc-agent-grid {
        grid-template-columns: 1fr;
    }

    .oc-channel-grid {
        grid-template-columns: 1fr;
    }

    .oc-subtabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .oc-subtabs::-webkit-scrollbar {
        display: none;
    }

    .oc-subtab-btn {
        flex-shrink: 0;
    }

    .oc-msg-input-bar {
        padding: var(--s-2) var(--s-4);
    }

    .oc-sessions-container {
        padding: var(--s-4);
        overflow-x: auto;
    }
}

@media (max-width: 375px) {
    .oc-agent-card {
        padding: var(--s-3);
    }

    .oc-panel-header {
        padding: var(--s-3) var(--s-4);
    }

    .oc-subtabs {
        padding: var(--s-2) var(--s-4);
        gap: var(--s-1);
    }

    .oc-msg-agent-select {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-1);
        padding: var(--s-2) var(--s-4);
    }

    .oc-channel-card {
        padding: var(--s-3);
    }
}