/* =====================================================================
 * ②号子屏幕 · 「吃了么」外卖 App —— 选择聊天对象浮层样式
 * ---------------------------------------------------------------------
 * 极致趣味可爱风格升级版（Pop-Art / 软萌卡通手绘粗描边风）。
 * 视觉语言：极具弹性的微粗黑灰色描边 + 实体 block 投影 + 欢快明亮食物色。
 *
 * 兼容：iOS Safari / 华为·小米·OPPO·魅族·vivo·三星 自带浏览器、
 *       Via / 谷歌 / Edge / 搜狗 / 雨见 / 夸克。统一加 -webkit- 前缀，
 *       仅用 flexbox 等高兼容布局，无 grid 依赖。
 * 命名：统一 ss2tk- 前缀，独立文件，不与其它屏幕/组件共用样式。
 * ===================================================================== */

.ss2tk-pick-hint {
    flex: 0 0 auto;
    margin: 4px 4px 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a535e;
    font-weight: 700;
}

.ss2tk-friend-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 与外卖店铺列表一致：在 .takeaway-menu-body(overflow:hidden) 内部独立滚动 */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px 10px;
}

.ss2tk-friend-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 好友行 - 趣味粗描边 + Q弹实体投影 */
.ss2tk-friend-row {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2.5px solid #2e3640 !important; /* 卡通黑褐色粗边框 */
    border-radius: 20px !important; /* 软Q大圆角 */
    background: #ffffff !important;
    color: #2e3640 !important;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
    box-shadow: 4px 4px 0 #2e3640 !important; /* 实体可爱厚重投影 */
    transition: background 0.15s ease, transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease;
}

.ss2tk-friend-row:hover {
    background: #FFF9E6 !important; /* 温暖芝士黄亮色 */
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #2e3640 !important;
}

.ss2tk-friend-row:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 1px 1px 0 #2e3640 !important;
}

.ss2tk-friend-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #FFEDC2 !important; /* 可爱蛋黄黄 */
    border: 2px solid #2e3640 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e3640 !important;
    font-size: 17px;
    font-weight: 900 !important;
    box-shadow: 2px 2px 0 rgba(46, 54, 64, 0.15);
}

.ss2tk-friend-avatar--text {
    text-transform: uppercase;
}

.ss2tk-friend-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ss2tk-friend-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ss2tk-friend-name {
    font-size: 15px;
    font-weight: 900 !important; /* 极其粗黑的标题，手绘卡通感 */
    color: #2e3640;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss2tk-friend-sub {
    font-size: 12px;
    color: #7b838f;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss2tk-friend-arrow {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #2e3640 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss2tk-friend-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.2; /* 粗线线条 */
}

.ss2tk-friend-empty {
    padding: 40px 20px;
    text-align: center;
    color: #7b838f;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
}

/* ---------- 独立「吃了么」全屏 App 外观（与 love咪手机屏幕 #app 等宽、等高） ---------- */
body.ss2tk-app #takeaway-menu-modal,
body.ss2tk-app #takeaway-shop-detail-modal,
body.ss2tk-app #takeaway-cart-modal {
    position: fixed;
    left: 50%;
    top: 0;
    width: 100%;
    max-width: 480px;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(-50%);
    overflow: hidden;
    background: rgba(15, 18, 24, 0.36);
    border-radius: 0;
}

/* 极致趣味可爱弹层容器 */
body.ss2tk-app #takeaway-menu-modal .takeaway-menu-modal-content,
body.ss2tk-app #takeaway-shop-detail-modal .takeaway-menu-modal-content,
body.ss2tk-app #takeaway-cart-modal .takeaway-menu-modal-content,
#ss2-takeaway-checkout-modal .wallet-modal-content,
#ss2-takeaway-friend-modal .wallet-modal-content,
#ss2-takeaway-order-modal .wallet-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: #FFFDF2 !important; /* 软萌奶酪黄底色 */
}

/* 非全屏弹层，如弹出的独立结算方式选择等，给予可爱的软面包圆角及黑框 */
#ss2-takeaway-checkout-modal .wallet-modal-content,
#ss2-takeaway-friend-modal .wallet-modal-content,
#ss2-takeaway-order-modal .wallet-modal-content {
    width: min(92vw, 388px);
    height: auto !important;
    max-height: min(88vh, 690px);
    border: 3px solid #2e3640 !important; /* 可爱黑边粗框 */
    border-radius: 28px !important; /* 面包一样圆润 */
    box-shadow: 0 10px 30px rgba(46, 54, 64, 0.18) !important;
    overflow: hidden;
}

body.ss2tk-app #takeaway-menu-modal .takeaway-menu-modal-content > .wallet-modal-header,
body.ss2tk-app #takeaway-shop-detail-modal .takeaway-menu-modal-content > .wallet-modal-header,
body.ss2tk-app #takeaway-cart-modal .takeaway-menu-modal-content > .wallet-modal-header,
#ss2-takeaway-checkout-modal .wallet-modal-header,
#ss2-takeaway-friend-modal .wallet-modal-header,
#ss2-takeaway-order-modal .wallet-modal-header {
    background: #FFEDC2 !important; /* 亮丽芝士黄 */
    border-bottom: 3px solid #2e3640 !important; /* 分割黑线 */
    padding-top: max(14px, calc(8px + env(safe-area-inset-top, 0px)));
    padding-bottom: 12px;
}

@media (min-width: 481px) {
    body.ss2tk-app #takeaway-menu-modal,
    body.ss2tk-app #takeaway-shop-detail-modal,
    body.ss2tk-app #takeaway-cart-modal {
        top: 20px;
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        border-radius: 20px;
    }
}

/* 统一抬高层级修复 */
#ss2-takeaway-checkout-modal,
#ss2-takeaway-friend-modal,
#ss2-takeaway-order-modal {
    z-index: 1003;
}

/* ---------- 标签筛选折叠：搜出店铺后自动收起，把空间让给店铺列表 ---------- */
.takeaway-tags-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    font-family: inherit;
    line-height: 1.3;
}

.takeaway-tags-caret {
    flex: 0 0 auto;
    font-size: 12px;
    color: #2e3640;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.takeaway-search-section.is-collapsed .takeaway-tags-caret {
    transform: rotate(-90deg);
}

.takeaway-search-section.is-collapsed .takeaway-tags-grid {
    display: none;
}

.takeaway-search-section.is-collapsed {
    gap: 10px;
    padding-bottom: 10px;
}

/* ---------- 下单方式选择（给自己点 / 让好友帮我付 / 送给好友） ---------- */
.ss2tk-checkout-content {
    width: min(92vw, 388px);
}

.ss2tk-choice-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 2px 14px;
}

.ss2tk-choice-item {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 2.5px solid #2e3640 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #2e3640 !important;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
    box-shadow: 4px 4px 0 #2e3640 !important;
    transition: background 0.15s ease, transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease;
}

.ss2tk-choice-item:hover {
    background: #FFF9E6 !important;
    border-color: #2e3640 !important;
    box-shadow: 5px 5px 0 #2e3640 !important;
    transform: translate(-1px, -1px);
}

.ss2tk-choice-item:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 1px 1px 0 #2e3640 !important;
}

.ss2tk-choice-ic {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF3DB !important;
    color: #FF7315 !important; /* 可爱胡萝卜橙 */
    border: 2px solid #2e3640 !important;
}

.ss2tk-choice-ic svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke-width: 2.2 !important;
}

.ss2tk-choice-tx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ss2tk-choice-tx b {
    font-size: 15px;
    font-weight: 900 !important;
    color: #2e3640;
}

.ss2tk-choice-tx i {
    font-style: normal;
    font-size: 12px;
    line-height: 1.45;
    color: #7b838f;
    font-weight: 700;
}

/* ---------- ②号子屏幕「吃了么」磁贴图标取色（沿用快捷磁贴 .ss2sc- 外壳） ---------- */
.ss2sc-tile.ss2tk-tile .ss2sc-icon {
    color: #FF7315;
}

html[data-appearance="dark"] .ss2sc-tile.ss2tk-tile .ss2sc-icon {
    color: #FFB073;
}

html[data-global-beautify="1"] .home-sub-screen-2-page .ss2sc-tile.ss2tk-tile .ss2sc-icon {
    color: var(--ss2-accent);
}

/* ---------- 兼容兜底：不支持 backdrop-filter 的内核，列表行底色保持不透明 ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ss2tk-friend-row {
        background: #ffffff !important;
    }
}

/* ---------- 窄屏微调 ---------- */
@media (max-width: 375px), (max-height: 700px) {
    .ss2tk-friend-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .ss2tk-friend-name {
        font-size: 14px;
    }
}


/* =====================================================================
 * 独立「吃了么」APP（body.ss2tk-app 作用域下）全局趣味可爱风格覆盖
 * ===================================================================== */

/* APP 内的所有按钮与菜品卡片均具有 bouncy 弹性缩放动画 */
body.ss2tk-app .takeaway-shop-card,
body.ss2tk-app .takeaway-dish-item,
body.ss2tk-app .takeaway-search-btn,
body.ss2tk-app .takeaway-tag-btn,
body.ss2tk-app .takeaway-cart-btn,
body.ss2tk-app .takeaway-receive-btn {
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease !important;
}

/* 搜店/搜索栏区域 */
body.ss2tk-app .takeaway-search-input {
    border: 2.5px solid #2e3640 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #2e3640 !important;
    font-weight: 700 !important;
    outline: none !important;
}

body.ss2tk-app .takeaway-search-input:focus {
    background: #FFFDF2 !important;
    border-color: #FF7315 !important;
}

body.ss2tk-app .takeaway-search-btn {
    border: 2.5px solid #2e3640 !important;
    border-radius: 18px !important;
    background: #FFBE1A !important; /* 鲜活蛋黄黄 */
    color: #2e3640 !important;
    font-weight: 900 !important;
    box-shadow: 3px 3px 0 #2e3640 !important;
}

body.ss2tk-app .takeaway-search-btn:hover {
    background: #FFD043 !important;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #2e3640 !important;
}

body.ss2tk-app .takeaway-search-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #2e3640 !important;
}

/* 标签筛选分类按钮 */
body.ss2tk-app .takeaway-tag-btn {
    border: 2.5px solid #2e3640 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #2e3640 !important;
    font-weight: 800 !important;
}

body.ss2tk-app .takeaway-tag-btn:hover {
    background: #FFF5D1 !important;
}

body.ss2tk-app .takeaway-tag-btn.is-selected {
    background: #FFBE1A !important;
    color: #2e3640 !important;
    box-shadow: 2px 2px 0 #2e3640 !important;
}

/* 店铺卡片 - 粗边界 + 可爱阴影 */
body.ss2tk-app .takeaway-shop-card {
    border: 2.5px solid #2e3640 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 4px 4px 0 #2e3640 !important;
    color: #2e3640 !important;
    padding: 14px !important;
}

body.ss2tk-app .takeaway-shop-card:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #2e3640 !important;
    background: #FFFDF8 !important;
}

body.ss2tk-app .takeaway-shop-name {
    font-weight: 900 !important;
    color: #2e3640 !important;
    font-size: 16px !important;
}

body.ss2tk-app .takeaway-shop-tag {
    background: #FFF5D1 !important;
    border: 1.5px solid #2e3640 !important;
    color: #2e3640 !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
}

/* 菜品单品条目 */
body.ss2tk-app .takeaway-dish-item {
    border: 2.5px solid #2e3640 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 3px 3px 0 #2e3640 !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
}

body.ss2tk-app .takeaway-dish-item:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #2e3640 !important;
}

body.ss2tk-app .takeaway-dish-name {
    font-weight: 900 !important;
    color: #2e3640 !important;
    font-size: 14.5px !important;
}

/* 趣味可爱主题下：商品缩略图也戴上卡通黑描边 */
body.ss2tk-app .takeaway-dish-thumb {
    border: 2px solid #2e3640 !important;
    border-radius: 12px !important;
    background: #FFF3DB !important;
}

body.ss2tk-app .takeaway-dish-img-fallback {
    background: #FFF3DB !important;
    color: #b6792b !important;
    font-weight: 800 !important;
}

/* 数量选择器 - 经典的黄色圆形 Q弹加减按钮 */
body.ss2tk-app .takeaway-quantity-btn {
    border: 2.2px solid #2e3640 !important;
    border-radius: 50% !important;
    background: #FFBE1A !important;
    color: #2e3640 !important;
    font-weight: 900 !important;
    box-shadow: 1.5px 1.5px 0 #2e3640 !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

body.ss2tk-app .takeaway-quantity-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 0 0 0 #2e3640 !important;
}

body.ss2tk-app .takeaway-quantity-value {
    color: #2e3640 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    padding: 0 4px !important;
}

/* 购物车长条按钮 */
body.ss2tk-app .takeaway-cart-btn {
    border: 2.5px solid #2e3640 !important;
    border-radius: 22px !important;
    background: #FFBE1A !important;
    color: #2e3640 !important;
    font-weight: 900 !important;
    box-shadow: 4px 4px 0 #2e3640 !important;
    padding: 12px !important;
}

body.ss2tk-app .takeaway-cart-btn:hover {
    background: #FFD043 !important;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #2e3640 !important;
}

body.ss2tk-app .takeaway-cart-btn:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 1px 1px 0 #2e3640 !important;
}

/* 确认签收按钮 */
body.ss2tk-app .takeaway-receive-btn {
    border: 2.5px solid #2e3640 !important;
    border-radius: 22px !important;
    background: #3EC70B !important; /* 醒目卡通绿 */
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 4px 4px 0 #2e3640 !important;
    text-shadow: 1px 1px 0 #2e3640;
}

body.ss2tk-app .takeaway-receive-btn:hover {
    background: #4EE01B !important;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #2e3640 !important;
}

body.ss2tk-app .takeaway-receive-btn:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 1px 1px 0 #2e3640 !important;
}

/* 外卖详情清单价格总和 */
body.ss2tk-app .takeaway-detail-total {
    color: #FF7315 !important;
    font-weight: 900 !important;
}

/* 外卖小哥地图区域及状态字 */
body.ss2tk-app .takeaway-map-text {
    color: #2e3640 !important;
    font-weight: 900 !important;
}