/* CSS変数は variables.css に移動済み */

    /* グローバルナビレール（全ページ共通） */
    .global-nav-rail {
        width: 64px;
        min-width: 64px;
        background: var(--nav-rail-bg);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 12px 0;
        border-right: 1px solid var(--border-color);
        height: 100%;
        overflow: visible;
    }

    .global-nav-rail-top,
    .global-nav-rail-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        overflow: visible;
    }

    .global-nav-rail-top {
        padding-top: 8px;
    }

    /* ナビゲーションレール（チャットアプリと統一スタイル） */
    .nav-rail {
        width: 64px;
        background: var(--nav-rail-bg);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 12px 0;
        border-right: 1px solid var(--border-color);
        transition: background-color 0.3s, border-color 0.3s;
        position: relative;
        z-index: 120;
    }

    .nav-rail-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .global-nav-rail-btn {
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        border-radius: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        text-decoration: none;
        position: relative;
        color: var(--icon-color);
    }

    .global-nav-rail-btn:hover {
        background: var(--accent-hover-bg);
    }

    .global-nav-rail-btn.active {
        background: var(--line-green);
    }

    .global-nav-rail-btn.active svg {
        color: var(--text-inverse);
        stroke: var(--text-inverse);
    }

    /* グループ区切り線（チャットアプリと統一） */
    .nav-rail-divider {
        width: 32px;
        height: 1px;
        background: var(--divider-color);
        margin: 8px 6px;
        flex-shrink: 0;
    }

    .global-nav-rail-btn svg {
        width: 22px;
        height: 22px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .nav-rail-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        background: var(--badge-danger-bg);
        color: var(--badge-danger-text);
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 8px;
        min-width: 16px;
        text-align: center;
    }

    .global-nav-rail-user {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--line-green);
        color: var(--text-inverse);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        margin: 8px 0;
        overflow: hidden;
        position: relative;
    }

    .nav-rail-user-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    /* チャットスタイル nav-rail-bottom スタイル */
    .nav-rail-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        overflow: visible;
    }

    .nav-rail-btn {
        width: 44px;
        height: 44px;
        border: none !important;
        background: transparent;
        border-radius: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        text-decoration: none;
        position: relative;
        color: var(--icon-color);
    }

    .nav-rail-btn:hover {
        background: var(--accent-hover-bg);
    }

    /* サイドバーアイコンのカスタムツールチップ */
    .nav-rail-btn[title]::after {
        content: attr(title);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--tooltip-bg);
        color: var(--tooltip-text);
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        z-index: 10000;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .nav-rail-btn[title]::before {
        content: '';
        position: absolute;
        left: calc(100% + 4px);
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: var(--tooltip-bg);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        z-index: 10000;
        pointer-events: none;
    }

    .nav-rail-btn[title]:hover::after,
    .nav-rail-btn[title]:hover::before {
        opacity: 1;
        visibility: visible;
    }

    .nav-icon-svg {
        width: 22px;
        height: 22px;
        color: var(--icon-color);
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: color 0.2s, stroke 0.2s;
    }

    .nav-rail-btn:hover .nav-icon-svg {
        color: var(--icon-color-hover);
    }

    /* アクティブ状態のスタイル（チャットアプリと統一） */
    .nav-rail-btn.active {
        background: var(--line-green) !important;
        border-radius: 8px;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .nav-rail-btn:focus,
    .nav-rail-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    .nav-rail-btn.active .nav-icon-svg {
        color: var(--text-inverse) !important;
        stroke: var(--text-inverse) !important;
        fill: var(--text-inverse) !important;
    }

    .nav-rail-user {
        position: relative;
        cursor: pointer;
        margin: 8px 0;
    }

    .nav-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--line-green);
        color: var(--text-inverse);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        object-fit: cover;
    }

    .nav-user-status {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid var(--nav-rail-bg);
        background: var(--text-light);
    }

    .nav-user-status.online {
        background: var(--line-green);
    }

    /* モーダルスタイル */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal {
        background: var(--modal-bg);
        border-radius: 16px;
        width: 90%;
        max-width: 480px;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .modal.modal-small {
        max-width: 360px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-color);
    }

    .modal-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .modal-close {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-close:hover {
        background: var(--bg-tertiary);
    }

    .close-icon-svg {
        width: 20px;
        height: 20px;
        color: var(--text-secondary);
    }

    .modal-body {
        padding: 20px;
        overflow-y: auto;
        max-height: calc(90vh - 100px);
    }

    /* プロフィールモーダル */
    .profile-content {
        text-align: center;
    }

    .profile-info-section {
        margin-bottom: 16px;
    }

    .form-group {
        margin-bottom: 16px;
        text-align: left;
    }

    .form-group label {
        display: block;
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 4px;
    }

    .info-display {
        padding: 8px 12px;
        background: var(--bg-secondary);
        border-radius: 8px;
        font-size: 14px;
        color: var(--text-primary);
    }

    .input-field {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--input-border);
        background: var(--input-bg);
        color: var(--text-primary);
        border-radius: 8px;
        font-size: 14px;
        box-sizing: border-box;
    }

    .input-field:focus {
        outline: none;
        border-color: var(--line-green);
    }

    /* 設定モーダル */
    .settings-content {
        text-align: left;
    }

    .settings-section {
        margin-bottom: 24px;
    }

    .settings-section-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        margin: 0 0 12px 0;
    }

    .settings-item {
        margin-bottom: 12px;
    }

    .settings-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .settings-label {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .toggle-slider {
        width: 48px;
        height: 26px;
        background: var(--toggle-off-bg);
        border-radius: 13px;
        position: relative;
        transition: background 0.3s;
    }

    .toggle-slider::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s;
    }

    .settings-toggle input:checked + .toggle-slider {
        background: var(--line-green);
    }

    .settings-toggle input:checked + .toggle-slider::before {
        transform: translateX(22px);
    }

    .settings-toggle input {
        display: none;
    }

    .settings-hint {
        font-size: 12px;
        color: var(--text-muted);
        margin: 4px 0 0 0;
    }

    /* ログアウトモーダル */
    .logout-confirm-content {
        text-align: center;
    }

    .logout-icon-large {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        color: var(--danger-color);
    }

    .logout-icon-large svg {
        width: 100%;
        height: 100%;
    }

    .logout-message {
        font-size: 16px;
        margin: 0 0 24px 0;
        color: var(--text-primary);
    }

    .logout-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    /* ボタンスタイル */
    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
    }

    .btn-primary {
        background: var(--line-green);
        color: var(--text-inverse);
    }

    .btn-secondary {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .btn-danger {
        background: var(--danger-color);
        color: var(--text-inverse);
    }

    .btn-full {
        width: 100%;
    }

    /* クロップモーダル */
    .crop-modal {
        max-width: 400px;
    }

    .crop-container {
        width: 100%;
        margin-bottom: 16px;
    }

    .crop-area {
        position: relative;
        width: 280px;
        height: 280px;
        margin: 0 auto;
        overflow: hidden;
        background: var(--bg-tertiary);
        border-radius: 8px;
    }

    .crop-area img {
        position: absolute;
        cursor: move;
        user-select: none;
        -webkit-user-drag: none;
    }

    .crop-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, -50%);
        border: 3px solid var(--line-green);
        border-radius: 50%;
        pointer-events: none;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    }

    .crop-controls {
        margin-bottom: 16px;
    }

    .crop-slider-group {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .crop-slider-group label {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .crop-slider-group input[type="range"] {
        flex: 1;
    }

    .crop-hint {
        font-size: 12px;
        color: var(--text-muted);
        text-align: center;
        margin: 0 0 16px 0;
    }

    .crop-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    /* アバターアップロードオーバーレイ */
    .avatar-upload-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s;
        border-radius: 50%;
    }

    .avatar-upload-overlay svg {
        color: white;
        stroke: white;
    }

    .avatar-upload-trigger:hover .avatar-upload-overlay {
        opacity: 1;
    }

    .avatar-upload-trigger {
        cursor: pointer;
    }

    /* アバターメニュースタイル */
    .avatar-menu-wrapper {
        position: relative;
    }

    .avatar-menu-trigger {
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .avatar-menu-trigger:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .avatar-menu-popup {
        position: fixed !important;
        left: 72px !important;
        bottom: 16px !important;
        width: 240px !important;
        background: var(--bg-primary) !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12)) !important;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-10px) scale(0.95);
        transition: all 0.2s ease !important;
        z-index: 99999 !important;
        display: block !important;
    }

    .avatar-menu-popup.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) scale(1) !important;
    }

    .avatar-menu-header {
        padding: 16px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .avatar-menu-user-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .avatar-menu-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--line-green);
        color: var(--text-inverse);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 16px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .avatar-menu-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar-menu-user-details {
        flex: 1;
        min-width: 0;
    }

    .avatar-menu-user-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .avatar-menu-user-email {
        font-size: 12px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .avatar-menu-items {
        padding: 8px;
    }

    .avatar-menu-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        color: var(--text-primary);
        text-align: left;
        transition: background 0.15s;
    }

    .avatar-menu-item:hover {
        background: var(--bg-tertiary);
    }

    .avatar-menu-item svg {
        flex-shrink: 0;
        color: var(--text-muted);
    }

    .avatar-menu-divider {
        height: 1px;
        background: var(--border-color);
        margin: 0 8px;
    }

    .avatar-menu-logout {
        color: var(--danger-color);
    }

    .avatar-menu-logout svg {
        color: var(--danger-color);
        stroke: var(--danger-color);
    }

    .avatar-menu-logout:hover {
        background: rgba(239, 68, 68, 0.08);
    }

    /* ダークモード - アバターメニューポップアップ */
    [data-theme="dark"] .avatar-menu-popup {
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    /* ツールチップスタイル */
    .global-nav-rail-btn[data-tooltip]::after,
    .global-nav-rail-user[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--tooltip-bg);
        color: var(--tooltip-text);
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        z-index: 1000;
        pointer-events: none;
    }

    .global-nav-rail-btn[data-tooltip]::before,
    .global-nav-rail-user[data-tooltip]::before {
        content: '';
        position: absolute;
        left: calc(100% + 4px);
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: var(--tooltip-bg);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        z-index: 1000;
    }

    .global-nav-rail-btn:hover[data-tooltip]::after,
    .global-nav-rail-btn:hover[data-tooltip]::before,
    .global-nav-rail-user:hover[data-tooltip]::after,
    .global-nav-rail-user:hover[data-tooltip]::before {
        opacity: 1;
        visibility: visible;
    }

    /* ヘッダーDropdownスタイル */
    .header-dropdown-wrapper {
        position: relative;
    }

    .header-dropdown-trigger {
        background: none;
        border: none;
        cursor: pointer;
    }

    .header-dropdown-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 320px;
        max-height: 400px;
        background: var(--bg-primary);
        border-radius: 12px;
        box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s ease;
        z-index: 1000;
        overflow: hidden;
    }

    .header-dropdown-panel.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
    }

    .dropdown-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .dropdown-header-link {
        font-size: 13px;
        color: var(--success-color);
        text-decoration: none;
    }

    .dropdown-header-link:hover {
        text-decoration: underline;
    }

    .dropdown-content {
        max-height: 320px;
        overflow-y: auto;
    }

    .dropdown-item {
        display: block;
        padding: 12px 16px;
        border-bottom: 1px solid var(--bg-tertiary);
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: background 0.15s;
    }

    .dropdown-item:hover {
        background: var(--bg-secondary);
    }

    .dropdown-item:last-child {
        border-bottom: none;
    }

    .dropdown-empty {
        padding: 32px 16px;
        text-align: center;
        color: var(--text-muted);
        font-size: 14px;
    }

    /* お知らせアイテム */
    .notice-item-type {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .notice-type-info { /* preserve-color: category badge */
        background: #DBEAFE;
        color: #1E40AF;
    }

    .notice-type-warning { /* preserve-color: category badge */
        background: #FEF3C7;
        color: #92400E;
    }

    .notice-type-important { /* preserve-color: category badge */
        background: #DCFCE7;
        color: #166534;
    }

    .notice-type-maintenance { /* preserve-color: category badge */
        background: #F3E8FF;
        color: #6B21A8;
    }

    .notice-item-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 2px;
    }

    .notice-item-date {
        font-size: 12px;
        color: var(--text-muted);
    }

    /* チャットアイテム */
    .chat-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .chat-item-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--success-color);
        color: var(--text-inverse);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        flex-shrink: 0;
        overflow: hidden;
    }

    .chat-item-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .chat-item-content {
        flex: 1;
        min-width: 0;
    }

    .chat-item-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .chat-item-message {
        font-size: 13px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-item-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .chat-item-time {
        font-size: 11px;
        color: var(--text-muted);
    }

    .chat-item-badge {
        background: var(--danger-color);
        color: var(--text-inverse);
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
    }

    /* テーマトグルアイコン */
    .theme-toggle .sun-icon {
        display: block;
    }
    .theme-toggle .moon-icon {
        display: none;
    }
    [data-theme="dark"] .theme-toggle .sun-icon {
        display: none;
    }
    [data-theme="dark"] .theme-toggle .moon-icon {
        display: block;
    }


    /* ============================================
       グローバルヘッダー用CSS（チラつき防止のためhead内に配置）
       ============================================ */
    .new-header {
        z-index: 1000;
        flex-shrink: 0;
    }

    /* 全体検索バー */
    .header-search-wrapper {
        flex: 1;
        max-width: 800px;
        min-width: 200px;
        margin: 0 24px;
        padding: 0;
        background: transparent;
        position: relative;
    }

    .header-search-wrapper:hover .header-search-input-wrapper {
        border-color: var(--line-green);
        background: var(--bg-primary);
    }

    .header-search-form {
        width: 100%;
    }

    .header-search-input-wrapper {
        display: flex;
        align-items: center;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 12px;
        transition: all 0.2s;
        width: 100%;
        position: relative;
    }

    .header-search-input-wrapper:focus-within {
        background: var(--bg-secondary);
        border-color: var(--line-green);
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(0, 185, 0, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .header-search-icon {
        color: var(--text-muted);
        flex-shrink: 0;
        margin-right: 8px;
    }

    .header-search-input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 14px;
        color: var(--text-primary);
        outline: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        text-align: left;
    }

    .header-search-input::placeholder {
        color: var(--text-muted);
    }

    .header-search-shortcut {
        flex-shrink: 0;
        font-size: 11px;
        color: var(--text-muted);
        background: var(--border-color);
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 8px;
    }

    /* dark overrides for .header-search-input-wrapper, .header-search-input, .header-search-icon, .header-search-shortcut removed - variables handle both themes */

    /* 検索ドロップダウン */
    .header-search-dropdown {
        display: none;
        position: fixed;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        width: 1300px;
        max-width: calc(100vw - 40px);
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        max-height: calc(100vh - 100px);
        overflow: hidden;
    }

    .header-search-dropdown.show {
        display: block;
    }

    /* 2カラムレイアウト */
    .search-dropdown-main {
        display: flex;
        height: calc(100vh - 100px);
        max-height: 900px;
        min-height: 600px;
    }

    /* 左側：検索結果リスト */
    .search-dropdown-list-panel {
        width: 400px;
        min-width: 350px;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--border-color);
    }

    .header-search-dropdown-content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
    }

    /* 右側：プレビューパネル */
    .search-preview-panel {
        flex: 2;
        min-width: 550px;
        display: flex;
        flex-direction: column;
        background: var(--bg-secondary);
        overflow: hidden;
    }

    .search-preview-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-muted);
        gap: 12px;
        text-align: center;
        padding: 20px;
    }

    .search-preview-placeholder svg {
        stroke: var(--border-color);
    }

    .search-preview-placeholder span {
        font-size: 13px;
    }

    .search-preview-content {
        padding: 20px;
        overflow-y: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .search-preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .search-preview-type {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--border-color);
        color: var(--text-secondary);
    }

    .search-preview-type.type-drive { background: #dbeafe; color: #1d4ed8; }
    .search-preview-type.type-gmail { background: #fee2e2; color: #dc2626; }
    .search-preview-type.type-chat { background: #dcfce7; color: #16a34a; }
    .search-preview-type.type-note { background: #fef3c7; color: #d97706; }
    .search-preview-type.type-workflow { background: #f3e8ff; color: #7c3aed; }

    .search-preview-date {
        font-size: 12px;
        color: var(--text-muted);
    }

    .search-preview-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 12px 0;
        line-height: 1.4;
    }

    .search-preview-meta {
        font-size: 13px;
        color: var(--text-secondary);
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }

    .search-preview-body {
        font-size: 15px;
        color: var(--text-secondary);
        line-height: 1.7;
        white-space: pre-wrap;
        word-break: break-word;
        flex: 1;
        overflow-y: auto;
    }

    .search-preview-body img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 8px 0;
    }

    /* サムネイル表示エリア */
    .search-preview-thumbnail {
        margin: 16px 0;
        text-align: center;
        background: var(--bg-tertiary);
        border-radius: 12px;
        padding: 16px;
    }

    .search-preview-thumbnail img {
        max-width: 100%;
        max-height: 600px;
        min-height: 400px;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .search-preview-thumbnail img:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }

    /* 画像拡大モーダル */
    .search-image-lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.9);
        z-index: 10001;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .search-image-lightbox.active {
        display: flex;
    }

    .search-image-lightbox img {
        max-width: 95vw;
        max-height: 95vh;
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        object-fit: contain;
        background: #222;
    }

    .search-image-lightbox.loading img {
        opacity: 0.3;
    }

    .search-image-lightbox .loading-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        border: 4px solid rgba(255,255,255,0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: none;
    }

    .search-image-lightbox.loading .loading-spinner {
        display: block;
    }

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

    .search-image-lightbox-close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: white;
        font-size: 32px;
        cursor: pointer;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        transition: background 0.2s;
    }

    .search-image-lightbox-close:hover {
        background: rgba(255,255,255,0.2);
    }

    .search-dropdown-section {
        padding: 0 8px;
    }

    .search-dropdown-header {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 8px 12px 4px;
    }

    .search-dropdown-list {
        display: flex;
        flex-direction: column;
    }

    .search-dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .search-dropdown-item:hover,
    .search-dropdown-item.selected {
        background: var(--bg-tertiary);
    }

    .search-dropdown-item-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-tertiary);
        border-radius: 8px;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .search-dropdown-item-content {
        flex: 1;
        min-width: 0;
    }

    .search-dropdown-item-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .search-dropdown-item-subtitle {
        font-size: 12px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .search-dropdown-item-type {
        font-size: 11px;
        color: var(--text-muted);
        padding: 2px 8px;
        background: var(--bg-tertiary);
        border-radius: 4px;
        flex-shrink: 0;
    }

    .search-dropdown-footer {
        display: flex;
        justify-content: space-between;
        padding: 8px 16px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
    }

    .search-dropdown-hint {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .search-dropdown-hint kbd {
        background: var(--border-color);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 11px;
    }

    /* 空の状態 */
    .search-dropdown-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
        color: var(--text-secondary);
        font-size: 13px;
        text-align: center;
    }

    /* インライン検索結果ヘッダー */
    .search-inline-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 4px;
    }

    .search-inline-back-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 10px;
        border: none;
        background: #f3f4f6;
        border-radius: 6px;
        font-size: 12px;
        color: #4b5563;
        cursor: pointer;
        transition: background 0.15s;
    }

    .search-inline-back-btn:hover {
        background: #e5e7eb;
    }

    .search-inline-query {
        font-size: 13px;
        color: #111827;
        font-weight: 500;
    }

    .search-inline-query::before {
        content: '"';
    }

    .search-inline-query::after {
        content: '" の検索結果';
        color: var(--text-secondary);
        font-weight: 400;
    }

    /* ダークモード・テーマ別オーバーライド — CSS変数で自動対応 */

    .search-dropdown-item:hover,
    .search-dropdown-item.selected {
        background: var(--bg-tertiary);
    }

    .search-dropdown-item-icon {
        background: var(--bg-tertiary);
        color: var(--text-muted);
    }

    .search-dropdown-item-title {
        color: var(--text-primary);
    }

    .search-dropdown-footer {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }

    .search-inline-header {
        border-color: var(--border-color);
    }

    .search-inline-back-btn {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
    }

    .search-inline-back-btn:hover {
        background: var(--border-color);
    }

    .search-inline-query {
        color: var(--text-primary);
    }

    .header-icon-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        color: var(--text-secondary);
        position: relative;
        transition: background 0.2s, color 0.2s;
    }

    .header-icon-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    /* ウィジェット追加ボタン */
    .header-widget-add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px dashed var(--border-color);
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        color: var(--text-secondary);
        transition: all 0.2s;
    }

    .header-widget-add-btn:hover {
        border-color: var(--line-green);
        color: var(--line-green);
        background: var(--accent-hover-bg);
    }

    .nav-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 11px;
        font-weight: 600;
        color: var(--badge-danger-text);
        background: var(--badge-danger-bg);
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-dropdown-wrapper {
        position: relative;
    }

    .header-dropdown-panel {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 8px;
        min-width: 320px;
        max-height: 400px;
        background: var(--card-bg, white);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        overflow: hidden;
    }

    .header-dropdown-panel.show {
        display: block;
    }

    .dropdown-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
    }

    .dropdown-header h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .dropdown-header-link {
        font-size: 12px;
        color: var(--line-green);
        text-decoration: none;
    }

    .dropdown-header-link:hover {
        text-decoration: underline;
    }

    .dropdown-content {
        max-height: 340px;
        overflow-y: auto;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        text-decoration: none;
        color: inherit;
        transition: background 0.2s;
    }

    .dropdown-item:hover {
        background: var(--bg-secondary);
    }

    .dropdown-empty {
        padding: 24px 16px;
        text-align: center;
        color: var(--text-muted);
        font-size: 14px;
    }

    /* Notice dropdown panel */
    .notice-dropdown-panel {
        width: 400px;
        max-height: 500px;
    }

    .notice-dropdown-content {
        max-height: 420px;
        overflow-y: auto;
    }

    /* Notice item styles */
    .notice-item {
        display: block;
        cursor: pointer;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
        transition: background-color 0.2s;
    }

    .notice-item:hover {
        background-color: var(--bg-tertiary);
    }

    .notice-item:last-child {
        border-bottom: none;
    }

    /* 未読のお知らせ */
    .notice-unread {
        background-color: #eff6ff;
        border-left: 3px solid #3b82f6;
    }

    [data-theme="dark"] .notice-unread {
        background-color: #1e3a5f;
    }

    .notice-item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
    }

    .notice-item-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .notice-mark-read-btn {
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 500;
        background: #3b82f6;
        color: var(--text-inverse);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .notice-mark-read-btn:hover {
        background: #2563eb;
    }

    .notice-read-label {
        font-size: 12px;
        color: var(--text-muted);
    }

    .notice-item-type {
        display: inline-block;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 500;
        border-radius: 4px;
    }

    .notice-type-info {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .notice-type-warning {
        background: #fef3c7;
        color: #d97706;
    }

    .notice-type-important {
        background: #fee2e2;
        color: #dc2626;
    }

    .notice-type-maintenance {
        background: #e0e7ff;
        color: #4338ca;
    }

    .notice-item-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    /* dark override for .notice-item-title removed - variable handles both themes */

    .notice-item-content {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: 6px;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .notice-item-date {
        font-size: 12px;
        color: var(--text-muted);
    }

    /* Chat item styles */
    .chat-item-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--line-green);
        color: var(--text-inverse);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        flex-shrink: 0;
        overflow: hidden;
    }

    .chat-item-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .chat-item-content {
        flex: 1;
        min-width: 0;
    }

    .chat-item-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 2px;
    }

    .chat-item-message {
        font-size: 13px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-item-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .chat-item-time {
        font-size: 11px;
        color: var(--text-muted);
    }

    .chat-item-badge {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-inverse);
        background: var(--line-green);
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* AIボタン ハイライト */
    .ai-assistant-btn {
        position: relative;
    }

    .ai-assistant-btn::before {
        content: '✨';
        position: absolute;
        top: -2px;
        right: -2px;
        font-size: 10px;
    }

    #global-search-wrapper {
        position: relative;
    }

    /* ============================================
       コマンドパレット用CSS（チラつき防止のためhead内に配置）
       ============================================ */

/* コマンドパレット オーバーレイ */
.command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;  /* display で制御（即時表示） */
}

.command-palette-overlay.show {
    display: block;
}

/* backdrop-filterは遅延で追加（パフォーマンス対策） */
.command-palette-overlay.with-blur {
    backdrop-filter: blur(4px);
}

/* ヘッダー検索からの即時表示用 */
.command-palette-overlay.instant,
.command-palette-modal.instant {
    transition: none !important;
}

/* コマンドパレット モーダル */
.command-palette-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 1400px;
    height: 90%;
    max-height: 900px;
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 10001;
    flex-direction: column;
    overflow: hidden;
    display: none;  /* display で制御（即時表示） */
}

/* コマンドパレットは openSearchPalette() でのみ開く - クラスで表示制御 */
.command-palette-modal.show {
    display: flex;
}

[data-theme="dark"] .command-palette-modal {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ヘッダー */
.cp-header {
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cp-search-wrapper {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 16px 20px;
    gap: 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s;
}

.cp-search-wrapper:focus-within {
    background: var(--bg-secondary);
    border-color: var(--line-green);
    box-shadow: 0 0 0 3px rgba(0, 185, 0, 0.15);
}

.cp-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.cp-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--text-primary);
    outline: none;
}

.cp-search-input::placeholder {
    color: var(--text-muted);
}

.cp-loading {
    flex-shrink: 0;
}

.cp-spinner {
    animation: cp-spin 1s linear infinite;
    color: var(--line-green);
}

@keyframes cp-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cp-kbd {
    padding: 4px 8px;
    font-size: 12px;
    font-family: monospace;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
}

/* フィルターチップ */
.cp-filter-chips {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    overflow-x: auto;
}

.cp-chip {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.cp-chip:hover {
    border-color: var(--line-green);
    color: var(--line-green);
}

.cp-chip.active {
    background: var(--line-green);
    border-color: var(--line-green);
    color: var(--text-inverse);
}

/* AIチップ */
.cp-chip-ai {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: var(--link-color);
    color: var(--text-inverse);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cp-chip-ai:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    border-color: var(--link-color);
    color: var(--text-inverse);
}

.cp-chip-ai svg {
    flex-shrink: 0;
}

/* AI回答表示 */
.cp-ai-answer {
    background: var(--bg-primary);
    border: 1px solid var(--link-color);
    border-radius: 12px;
    margin: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.15);
}

.cp-ai-answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.cp-ai-answer-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--link-color);
}

.cp-ai-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--link-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-ai-close:hover {
    background: rgba(102, 126, 234, 0.1);
}

.cp-ai-answer-content {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.cp-ai-sources {
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 11px;
}

.cp-ai-sources-title {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.cp-ai-source-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--text-secondary);
}

.cp-ai-source-badge {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
    background: #E3F2FD;
    color: #1565C0;
}

.cp-ai-source-badge.chat { background: #E3F2FD; color: #1565C0; }
.cp-ai-source-badge.note { background: #E8F5E9; color: #2E7D32; }
.cp-ai-source-badge.regulation { background: #FFF3E0; color: #EF6C00; }

/* AIソースリンク */
.cp-ai-source-link,
.knowledge-source-link {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s;
}
.cp-ai-source-link:hover,
.knowledge-source-link:hover {
    color: var(--link-color);
    text-decoration: underline;
}

/* AIパネル ソースリスト */
.ai-sources-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}
.ai-sources-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.ai-source-item {
    padding: 2px 0;
}
.ai-source-link {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s;
}
.ai-source-link:hover {
    color: var(--link-color);
    text-decoration: underline;
}

/* AI ローディング */
.cp-ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    margin: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.cp-ai-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-top-color: var(--link-color);
    border-radius: 50%;
    animation: cp-spin 0.8s linear infinite;
}

@keyframes cp-spin {
    to { transform: rotate(360deg); }
}

/* ダークモード - AI answer border handled by var(--link-color) */

[data-theme="dark"] .cp-ai-answer-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
}

[data-theme="dark"] .cp-ai-source-badge.chat { background: #1E3A5F; color: #90CAF9; }
[data-theme="dark"] .cp-ai-source-badge.note { background: #1B3B2F; color: #A5D6A7; }
[data-theme="dark"] .cp-ai-source-badge.regulation { background: #3D2E1F; color: #FFCC80; }

/* メインコンテンツ */
.cp-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左カラム: 検索結果 */
.cp-results-column {
    width: 40%;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cp-results-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ウェルカム表示 */
.cp-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    padding: 20px;
    text-align: center;
}

.cp-welcome-icon {
    margin-bottom: 16px;
    opacity: 0.5;
}

.cp-welcome-text {
    font-size: 14px;
    margin-bottom: 20px;
}

.cp-shortcuts {
    display: flex;
    gap: 16px;
    font-size: 12px;
}

.cp-shortcut {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cp-shortcut kbd {
    padding: 2px 6px;
    font-size: 11px;
    font-family: monospace;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-muted);
}

/* 検索結果アイテム */
.cp-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
    color: inherit;
}

.cp-result-item:hover,
.cp-result-item.selected {
    background: var(--bg-tertiary);
}

.cp-result-item.selected {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    padding-left: 12px;
}

[data-theme="dark"] .cp-result-item.selected {
    background: #14532d;
}

.cp-result-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-result-icon.chat { background: #dbeafe; color: #2563eb; }
.cp-result-icon.notes { background: #dcfce7; color: #16a34a; }
.cp-result-icon.drive { background: #fef3c7; color: #d97706; }
.cp-result-icon.gmail { background: #fee2e2; color: #dc2626; }
.cp-result-icon.workflow { background: #f3e8ff; color: #9333ea; }
.cp-result-icon.estimate { background: #e0f2fe; color: #0284c7; }
.cp-result-icon.suggest { background: #f3f4f6; color: #6b7280; }

[data-theme="dark"] .cp-result-icon.chat { background: #1e3a5f; }
[data-theme="dark"] .cp-result-icon.notes { background: #14532d; }
[data-theme="dark"] .cp-result-icon.drive { background: #78350f; }
[data-theme="dark"] .cp-result-icon.gmail { background: #7f1d1d; }
[data-theme="dark"] .cp-result-icon.workflow { background: #581c87; }
[data-theme="dark"] .cp-result-icon.estimate { background: #0c4a6e; }
[data-theme="dark"] .cp-result-icon.suggest { background: #374151; }

.cp-result-content {
    flex: 1;
    min-width: 0;
}

.cp-result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-result-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.cp-result-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* カテゴリヘッダー */
.cp-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* AIおすすめセクション */
.cp-ai-suggest-header {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: var(--link-color);
    font-weight: 600;
    border-radius: 8px;
    margin: 4px 8px;
    padding: 8px 12px;
}

[data-theme="dark"] .cp-ai-suggest-header {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
}

.cp-ai-suggest-item {
    border-left: 3px solid var(--link-color);
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 8px;
    background: rgba(102, 126, 234, 0.05);
}

.cp-ai-suggest-item:hover {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .cp-ai-suggest-item {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .cp-ai-suggest-item:hover {
    background: rgba(102, 126, 234, 0.2);
}

.cp-result-icon.ai-suggest {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-inverse);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-ai-reason {
    font-size: 11px;
    color: var(--link-color);
    margin-top: 2px;
    font-style: italic;
}

/* 検索結果なし */
.cp-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}

.cp-no-results-icon {
    margin-bottom: 12px;
    opacity: 0.5;
}

/* 右カラム: プレビュー */
.cp-preview-column {
    width: 60%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
}

.cp-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.cp-preview-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.cp-preview-empty p {
    font-size: 14px;
}

/* プレビューコンテンツ */
.cp-preview-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.cp-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.cp-preview-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-preview-icon svg {
    width: 18px;
    height: 18px;
}

.cp-preview-info {
    flex: 1;
    min-width: 0;
}

.cp-preview-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
}

.cp-preview-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cp-preview-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ヘッダー内アクションボタン */
.cp-header-action {
    flex-shrink: 0;
}

.cp-action-btn {
    padding: 6px 12px;
    border: none;
    background: var(--line-green);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.cp-action-btn:hover {
    background: var(--line-green-dark);
}

.cp-action-btn svg {
    width: 12px;
    height: 12px;
}

.cp-action-btn.primary {
    background: var(--line-green);
    border-color: var(--line-green);
    color: var(--text-inverse);
}

.cp-action-btn.primary:hover {
    background: var(--line-green-dark);
}

/* プレビュー本文 */
.cp-preview-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

.cp-preview-body p {
    margin-bottom: 12px;
}

/* ローディング */
.cp-loading-indicator {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

/* メタ情報ブロック */
.cp-preview-meta-block {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.cp-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.cp-meta-label {
    color: var(--text-muted);
    min-width: 80px;
    flex-shrink: 0;
}

.cp-meta-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* チャットメッセージ一覧 */
.cp-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-chat-message {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.cp-chat-message.cp-target-message {
    background: #F0FDF4;
    border-left-color: #22C55E;
}

[data-theme="dark"] .cp-chat-message.cp-target-message {
    background: #14532d;
    border-left-color: #22C55E;
}

.cp-chat-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cp-chat-sender {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.cp-chat-time {
    font-size: 12px;
    color: var(--text-muted);
}

.cp-chat-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

/* メンションスタイル */
.cp-mention {
    background: #DCFCE7;
    color: #16a34a;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
}

[data-theme="dark"] .cp-mention {
    background: #14532d;
    color: #4ade80;
}

/* ノートプレビュー */
.cp-note-preview {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px;
}

.cp-note-preview p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Driveファイルプレビュー */
.cp-drive-preview {
    margin-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* インラインメタ情報（ファイル種類 + 日時） */
.cp-preview-meta-inline {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.cp-meta-type {
    font-weight: 500;
    color: var(--text-primary);
}

.cp-meta-date {
    color: var(--text-muted);
}

.cp-drive-thumbnail {
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-height: 0;
}

.cp-drive-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cp-drive-embed {
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
    flex: 1;
    min-height: 350px;
}

.cp-drive-embed iframe {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border: none;
}

.cp-drive-no-preview,
.cp-drive-image-placeholder,
.cp-drive-pdf-placeholder,
.cp-drive-file-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    color: var(--text-muted);
    text-align: center;
    flex: 1;
    min-height: 200px;
}

.cp-drive-image-placeholder svg,
.cp-drive-pdf-placeholder svg,
.cp-drive-file-placeholder svg {
    margin-bottom: 12px;
    opacity: 0.6;
}

.cp-drive-image-placeholder p,
.cp-drive-pdf-placeholder p,
.cp-drive-file-placeholder p {
    margin: 0;
    font-size: 13px;
}

.cp-drive-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
}

/* サジェストアイテム */
.cp-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: all 0.15s ease;
}

.cp-suggest-item:hover,
.cp-suggest-item.selected {
    background: var(--bg-tertiary);
}

.cp-suggest-item.selected {
    background: #F0FDF4;
    border-left-color: #22C55E;
}

[data-theme="dark"] .cp-suggest-item.selected {
    background: #14532d;
}

.cp-suggest-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.cp-suggest-keyword {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.cp-suggest-source {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.cp-suggest-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cp-suggest-item:hover .cp-suggest-remove {
    opacity: 1;
}

.cp-suggest-remove:hover {
    color: var(--danger-color);
}

/* キーワード予測ハイライト */
.cp-typed {
    color: var(--text-muted);
}

.cp-predicted {
    font-weight: 600;
    color: var(--text-primary);
}

/* サジェスト内容（タイトル・サブタイトル） */
.cp-suggest-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-suggest-title {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-suggest-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* サジェストセクションヘッダー */
.cp-suggest-section-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

/* 結果がない場合のヒント */
.cp-no-results-hint {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* 件数プレビュー */
.cp-count-preview {
    padding: 20px;
}

.cp-count-header {
    margin-bottom: 20px;
    text-align: center;
}

.cp-count-keyword {
    font-size: 18px;
    font-weight: 600;
    color: var(--success-color);
}

.cp-count-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-left: 4px;
}

.cp-count-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

.cp-count-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.cp-count-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.cp-count-icon {
    font-size: 20px;
}

.cp-count-name {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.cp-count-num {
    font-size: 16px;
    font-weight: 600;
    color: var(--success-color);
}

.cp-count-total {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.cp-count-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* フッター */
.cp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.cp-footer-left {
    font-size: 13px;
    color: var(--text-muted);
}

.cp-show-all-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--line-green);
    text-decoration: none;
    font-weight: 500;
}

.cp-show-all-link:hover {
    text-decoration: underline;
}


    /* ============================================
       AIパネル用CSS（チラつき防止のためhead内に配置）
       ============================================ */

/* AIパネル オーバーレイ */
.ai-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ai-panel-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* AIパネル */
.ai-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--bg-primary);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.ai-panel.show {
    right: 0;
}

/* AIパネル ヘッダー */
.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-inverse);
    flex-shrink: 0;
}

.ai-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}

.ai-panel-icon {
    font-size: 18px;
}

.ai-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-header-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-inverse);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-header-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ai-panel-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-inverse);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-panel-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* AIパネル メイン */
.ai-panel-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* 履歴パネル */
.ai-history-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 10;
    display: none;
    flex-direction: column;
}

.ai-history-panel.show {
    display: flex;
}

.ai-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
}

.ai-history-close {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-history-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.ai-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.ai-history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 4px;
}

.ai-history-item:hover {
    background: var(--bg-tertiary);
}

.ai-history-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ai-history-content {
    flex: 1;
    min-width: 0;
}

.ai-history-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.ai-history-date {
    font-size: 12px;
    color: var(--text-muted);
}

.ai-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

/* AIパネル ボディ */
.ai-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

/* ウェルカムメッセージ（コンパクト） */
.ai-panel-welcome {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.ai-panel-welcome.hidden {
    display: none;
}

.ai-welcome-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.ai-panel-welcome h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ai-panel-welcome p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* AIメッセージ */
.ai-message {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.ai-message-user {
    align-items: flex-end;
}

.ai-message-assistant {
    align-items: flex-start;
}

.ai-message-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.ai-message-user .ai-message-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-inverse);
    border-bottom-right-radius: 4px;
}

.ai-message-assistant .ai-message-bubble {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

/* AIアクションボタン */
.ai-action-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.ai-action-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-action-btn-primary {
    background: var(--success-color);
    border: none;
    color: var(--text-inverse);
}

.ai-action-btn-primary:hover {
    opacity: 0.9;
}

.ai-action-btn-secondary {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.ai-action-btn-secondary:hover {
    background: var(--bg-tertiary);
}

.ai-action-btn-danger {
    background: var(--danger-color);
    border: none;
    color: var(--text-inverse);
}

.ai-action-btn-danger:hover {
    opacity: 0.9;
}

/* タイピングインジケーター */
.ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}

.ai-typing-dot {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: aiTyping 1.4s infinite ease-in-out both;
}

.ai-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-dot:nth-child(2) { animation-delay: -0.16s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes aiTyping {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* AIスピナー（処理中表示） */
.ai-typing-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
    color: var(--link-color);
    font-size: 13px;
    font-weight: 500;
}

[data-theme="dark"] .ai-typing-spinner {
    background: linear-gradient(135deg, #312e81 0%, #3730a3 100%);
}

.ai-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #a5b4fc;
    border-top-color: #4338ca;
    border-radius: 50%;
    animation: aiSpin 0.8s linear infinite;
}

[data-theme="dark"] .ai-spinner {
    border-color: #4338ca;
    border-top-color: #a5b4fc;
}

@keyframes aiSpin {
    to { transform: rotate(360deg); }
}

/* AI完了通知トースト */
.ai-completion-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10001;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: var(--text-inverse);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(67, 56, 202, 0.3);
    cursor: pointer;
    animation: aiToastSlideIn 0.3s ease-out;
    max-width: 360px;
}

.ai-toast-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}

.ai-toast-icon {
    font-size: 24px;
    line-height: 1;
}

.ai-toast-text {
    flex: 1;
    min-width: 0;
}

.ai-toast-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ai-toast-text p {
    margin: 0;
    font-size: 12px;
    opacity: 0.9;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-toast-close {
    background: none;
    border: none;
    color: var(--text-inverse);
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.ai-toast-close:hover {
    opacity: 1;
}

@keyframes aiToastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.ai-toast-fade-out {
    animation: aiToastFadeOut 0.3s ease-out forwards;
}

@keyframes aiToastFadeOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* AIパネル フッター */
.ai-panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
}

/* サジェストチップ */
.ai-suggest-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ai-suggest-chips::-webkit-scrollbar {
    display: none;
}

.ai-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.ai-chip:hover {
    background: var(--border-color);
    border-color: var(--border-color);
}

.ai-panel-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 4px 4px 4px 14px;
}

.ai-panel-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.ai-panel-input::placeholder {
    color: var(--text-muted);
}

.ai-panel-send-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.ai-panel-send-btn:hover {
    transform: scale(1.05);
}

.ai-panel-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* AIボタン ハイライト */
.ai-assistant-btn {
    position: relative;
}

.ai-assistant-btn::before {
    content: '✨';
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 10px;
}

/* モバイル対応 */
@media (max-width: 480px) {
    .ai-panel {
        width: 100%;
        right: -100%;
    }
}

/* ナレッジ検索モーダル・アバターメニューは modal.css に移動済み */