/* 基础样式，移除边距和内边距 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 隐藏父页面的滚动条 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #2a2a2a; /* 添加背景色以更好地演示菜单 */
}

/* Iframe样式，让它填满整个视口 */
#original-site {
    width: 100%;
    height: 100vh; /* 视口高度 */
    border: none; /* 移除边框 */
}

/* 这是您要添加的按钮的样式 */
#my-custom-button {
    position: fixed;   /* 固定定位，不随滚动条滚动 */
    left: 20px;         /* 距离左边20像素 */
    bottom: 20px;       /* 距离底部20像素 */
    z-index: 9999;      /* 置于顶层，确保在iframe之上 */
    
    /* 按钮的圆形和美化样式 */
    width: 70px; /* 设置宽度和高度相同以创建圆形 */
    height: 70px; /* 设置宽度和高度相同以创建圆形 */
    padding: 0; /* 移除内边距，让内容居中 */
    font-size: 26px; /* 字体大小 */
    line-height: 70px; /* 使文本垂直居中 */
    text-align: center; /* 使文本水平居中 */
    color: white;
    background-color: #007bff; /* 蓝色背景 */
    border: none;
    border-radius: 50%; /* 关键：设置50%的border-radius使其成为圆形 */
    cursor: grab; /* 鼠标样式，表示可拖动 */
    box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* 加一点阴影 */
    transition: transform 0.2s, background-color 0.2s; /* 添加简单的动画效果 */
    user-select: none; /* 防止文本被选中 */
    display: flex; /* 使用flexbox居中内容 */
    align-items: center;
    justify-content: center;
}

/* 鼠标悬停时，按钮稍微变大一点 */
#my-custom-button:hover {
    transform: scale(1.05);
    background-color: #0056b3; /* 悬停时颜色变深 */
}

/* 菜单容器样式 */
#my-menu {
    position: fixed;
    z-index: 9998; /* 比按钮低一点，但仍在顶层 */
    background-color: #3a3a3a; /* 深色背景 */
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    padding: 10px 0;
    min-width: 180px;
    display: none; /* 默认隐藏 */
    opacity: 0; /* 初始透明度为0，用于过渡 */
    transform: translateY(10px); /* 初始位置向下偏移，用于过渡 */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* 添加过渡效果 */
    list-style: none; /* 移除列表点 */
    margin: 0; /* 移除默认外边距 */
}

#my-menu.show {
    display: block; /* 显示菜单 */
    opacity: 1; /* 完全不透明 */
    transform: translateY(0); /* 恢复正常位置 */
}

/* 菜单项样式 */
#my-menu li {
    padding: 12px 20px;
    color: #e0e0e0; /* 浅灰色文字 */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

#my-menu li:hover {
    background-color: #505050; /* 悬停时背景变深 */
    color: white;
}

/* --- Draggable Window Styles --- */
.draggable-window {
    position: fixed;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    overflow: hidden; /* Hide iframe scrollbars if content doesn't fit */
    display: flex;
    flex-direction: column;
    min-width: 300px; /* Minimum window width */
    min-height: 200px; /* Minimum window height */
    z-index: 10000; /* Higher than button/menu */
    resize: both; /* Enable native browser resizing (will overlay custom handles) */
    overflow: auto; /* Allow window content to scroll if iframe is smaller */
}

.window-title-bar {
    background-color: #444;
    color: white;
    padding: 8px 15px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #555;
    user-select: none; /* Prevent text selection during drag */
}

.window-title {
    font-weight: bold;
    font-size: 1.1em;
}

.window-close-button {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.window-close-button:hover {
    background-color: #d32f2f;
}

.window-iframe-container {
    flex-grow: 1; /* Allow iframe to take remaining space */
    position: relative;
}

.draggable-window iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Remove extra space below iframe */
}

/* Resize handles (invisible, used for custom resizing) */
.resize-handle {
    position: absolute;
    background: transparent; /* Make them invisible */
    /* background: rgba(0, 255, 0, 0.2); /* For debugging resize handles */
    z-index: 1; /* Above iframe, below title bar */
}

.resize-handle.top-left {
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    cursor: nwse-resize;
}
.resize-handle.top-right {
    width: 15px;
    height: 15px;
    top: 0;
    right: 0;
    cursor: nesw-resize;
}
.resize-handle.bottom-left {
    width: 15px;
    height: 15px;
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
}
.resize-handle.bottom-right {
    width: 15px;
    height: 15px;
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
}
.resize-handle.top {
    width: 100%;
    height: 8px;
    top: 0;
    left: 0;
    cursor: ns-resize;
}
.resize-handle.bottom {
    width: 100%;
    height: 8px;
    bottom: 0;
    left: 0;
    cursor: ns-resize;
}
.resize-handle.left {
    width: 8px;
    height: 100%;
    top: 0;
    left: 0;
    cursor: ew-resize;
}
.resize-handle.right {
    width: 8px;
    height: 100%;
    top: 0;
    right: 0;
    cursor: ew-resize;
}

/* When dragging/resizing, prevent iframe interaction */
.draggable-window.dragging .window-iframe-container::after,
.draggable-window.resizing .window-iframe-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0); /* Invisible overlay */
    z-index: 2; /* Higher than iframe, blocks clicks */
}